/*
Theme Name: Harmony Sound
Theme URI: https://hbstudio-co.com/templates/harmony-sound-woo
Author: HB Studio Co
Author URI: https://hbstudio-co.com
Description: A WooCommerce theme for audio and electronics brands. Every page is edited with the free version of Elementor — no premium page builder required. Ships with a one-click demo installer.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: harmony-sound
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ===========================================================================
   Jetons de design.

   Repris tels quels du theme Shopify Harmony Sound : c'est ce qui fait que
   les deux se reconnaissent au premier coup d'oeil. Ils sont declares ici ET
   pousses dans le kit Elementor (inc/elementor.php) : l'acheteur qui change
   une couleur globale dans Elementor voit donc TOUT le theme suivre, y
   compris l'en-tete et la fiche produit, que Elementor gratuit ne sait pas
   editer.
   =========================================================================== */

:root {
  --hs-bg:         #F1EFE9;
  --hs-bg-soft:    #F5F5F6;
  --hs-surface:    #FFFFFF;
  --hs-text:       #0E0E12;
  --hs-muted:      #6B6B73;
  --hs-line:       rgba(14, 14, 18, .10);
  --hs-line-2:     rgba(14, 14, 18, .06);
  --hs-accent:     #F59E0B;
  --hs-accent-ink: #0E0E12;
  --hs-sale:       #E11D48;
  --hs-dark:       #14141A;

  --hs-radius:     22px;
  --hs-radius-lg:  34px;
  --hs-radius-sm:  14px;
  --hs-pill:       999px;

  --hs-shadow:     0 10px 40px rgba(14, 14, 18, .08);
  --hs-shadow-sm:  0 4px 18px rgba(14, 14, 18, .06);
  --hs-ease:       cubic-bezier(.22, .61, .36, 1);

  --hs-font-body:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hs-font-head:  "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --hs-wide:       1320px;
  --hs-content:    760px;
}

/* ---- socle --------------------------------------------------------------
   Volontairement mince : le detail des composants vit dans
   assets/css/theme.css, charge par functions.php avec sa propre empreinte de
   version. Ici ne reste que ce dont WordPress a besoin pour rendre une page
   correcte avant meme que le reste ne soit charge.
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hs-bg);
  color: var(--hs-text);
  font-family: var(--hs-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hs-font-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
}

a { color: inherit; }
img, video { max-width: 100%; height: auto; display: block; }

/* Accessibilite : un lien d'evitement invisible tant qu'il n'a pas le focus.
   Exige par la revue Envato, et utile a qui navigue au clavier. */
.screen-reader-text {
  position: absolute !important;
  clip-path: inset(50%);
  width: 1px; height: 1px; overflow: hidden;
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100000;
  clip-path: none; width: auto; height: auto;
  background: var(--hs-surface); color: var(--hs-text);
  padding: 12px 18px; border-radius: var(--hs-radius-sm);
  box-shadow: var(--hs-shadow);
}

/* Respecte le reglage systeme : aucune animation imposee. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}