/* ===========================================================================
   Aroma — thème enfant de Hummingbird : charte « Aroma Sense ».
   ---------------------------------------------------------------------------
   Chargé APRÈS le theme.css du parent (priority 1000) → écrase hummingbird.
   Édition live (réglages Performance) : visible au simple rechargement.

   Plan : 1) tokens  2) recolorisation teal (variables Bootstrap)
          3) base  4) header noir mono-ligne  5) boutons
          6) cartes produit  7) prix & badges  8) footer
   =========================================================================== */

/* ── 1. Tokens Aroma Sense ────────────────────────────────────────────── */
:root {
  --aroma-teal:        #4FB3BD;
  --aroma-teal-strong: #22666D;
  --aroma-teal-dark:   #1a565c;
  --aroma-teal-50:     #f1f9f9;
  --aroma-teal-100:    #e3f2f3;
  --aroma-ink-900:     #0b1416;
  --aroma-ink-600:     #46585b;
  --aroma-ink-500:     #6a797c;
  --aroma-ink-400:     #94a1a3;
  --aroma-bg:          #f3f6f6;
  --aroma-surface:     #ffffff;
  --aroma-line:        rgba(11,40,42,.08);
  --aroma-line-strong: rgba(11,40,42,.14);
  --aroma-danger:      #b3261e;
  --aroma-danger-bg:   #fdecea;
  --aroma-shadow-md:   0 4px 16px -4px rgba(11,40,42,.10), 0 1px 2px rgba(11,40,42,.05);

  /* Header (logo AROMA Sense = fond noir opaque → header noir) */
  --aroma-header-bg:   #000;
  --aroma-header-fg:   #f3f6f6;
  --aroma-header-muted:#9aa7a9;
  --aroma-header-line: rgba(255,255,255,.12);

  /* ── 2. Recolorisation : on remplace le bleu Bootstrap par le teal ───── */
  --bs-primary:#22666D;
  --bs-primary-rgb:34,102,109;
  --bs-blue:#22666D;
  --bs-link-color:#22666D;
  --bs-link-color-rgb:34,102,109;
  --bs-link-hover-color:#1a565c;
  --bs-link-hover-color-rgb:26,86,92;
  --bs-primary-text-emphasis:#1a565c;
  --bs-primary-bg-subtle:#e3f2f3;
  --bs-primary-border-subtle:#c6e6e9;
}

/* ── 3. Base ──────────────────────────────────────────────────────────── */
body { background: var(--aroma-bg); color: var(--aroma-ink-900); }
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
:focus-visible { outline-color: var(--aroma-teal); }

/* ── 4. HEADER NOIR, sur UNE ligne ────────────────────────────────────── */
#header { background: var(--aroma-header-bg); color: var(--aroma-header-fg); }
#header .header-bottom { background: var(--aroma-header-bg); }

.aroma-header__row { min-height: 88px; gap: 20px; padding: 4px 0; flex-wrap: nowrap; }
.aroma-header__actions { gap: 16px; flex-wrap: wrap; row-gap: 8px; }

/* Texte & icônes du header en clair (sauf panneaux déroulants, voir plus bas) */
#header,
#header a,
#header .header-block__title,
#header .ps-customersignin a,
#header .ps-mainmenu__desktop a { color: var(--aroma-header-fg); }
#header a:hover,
#header .ps-mainmenu__desktop a:hover,
#header .header-block__action-btn:hover { color: var(--aroma-teal); }
#header .material-icons { color: inherit; }

/* Sous-menus déroulants : fond clair → on re-fonce le texte pour la lisibilité */
#header .ps-mainmenu [class*="submenu"] a,
#header .ps-mainmenu [class*="dropdown"] a,
#header .ps-mainmenu__sub a { color: var(--aroma-ink-900); }
#header .ps-mainmenu [class*="submenu"] a:hover,
#header .ps-mainmenu [class*="dropdown"] a:hover,
#header .ps-mainmenu__sub a:hover { color: var(--aroma-teal-strong); }

/* Logo : pleine hauteur du header. On lève le plafond de hummingbird
   (.logo{max-height:3rem} = 48px) et on force la taille. Le fond noir opaque
   du logo se fond dans le header → pas de carré visible. */
#header .navbar-brand,
#header .aroma-header__logo { padding: 0; }
#header .header-bottom .navbar-brand .logo,
#header .navbar-brand .logo,
#header .aroma-header__logo img {
  max-height: none;
  max-width: none;
  height: 84px;
  width: auto;
  display: block;
}

/* Badge panier en teal */
#header .header-block__badge {
  background: var(--aroma-teal-strong);
  color: #fff;
  border-color: var(--aroma-teal-strong);
}

/* Recherche : champ sombre translucide, focus teal */
#header .ps-searchbar__input {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--aroma-header-line);
  color: var(--aroma-header-fg);
  min-width: 200px;
}
#header .ps-searchbar__input::placeholder { color: var(--aroma-header-muted); }
#header .ps-searchbar__input:focus {
  background: rgba(255,255,255,.10);
  border-color: var(--aroma-teal);
  box-shadow: 0 0 0 3px rgba(79,179,189,.20);
}
#header .ps-searchbar__magnifier { color: var(--aroma-header-muted); }

/* Le menu desktop est une colonne Bootstrap : on neutralise dans la flexbox */
.aroma-header__actions .ps-mainmenu,
.aroma-header__actions > div { width: auto; padding-left: 0; padding-right: 0; }

/* ── 5. Boutons (recolore les variables Bootstrap des .btn) ────────────── */
.btn-primary {
  --bs-btn-bg:#22666D;            --bs-btn-border-color:#22666D;
  --bs-btn-hover-bg:#1a565c;      --bs-btn-hover-border-color:#1a565c;
  --bs-btn-active-bg:#1a565c;     --bs-btn-active-border-color:#1a565c;
  --bs-btn-disabled-bg:#22666D;   --bs-btn-disabled-border-color:#22666D;
}
.btn-outline-primary {
  --bs-btn-color:#22666D;         --bs-btn-border-color:#22666D;
  --bs-btn-hover-bg:#22666D;      --bs-btn-hover-border-color:#22666D;
  --bs-btn-active-bg:#22666D;     --bs-btn-active-border-color:#22666D;
}

/* ── 6. Cartes produit (charte : surface blanche, bord doux, lift) ─────── */
.product-miniature {
  background: var(--aroma-surface);
  border: 1px solid var(--aroma-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.product-miniature:hover {
  border-color: var(--aroma-line-strong);
  box-shadow: var(--aroma-shadow-md);
  transform: translateY(-2px);
}
.product-miniature__bottom { padding: 12px 14px 14px; }

/* ── 7. Prix & badges ─────────────────────────────────────────────────── */
.product-price,
.product-miniature .price,
.product__product-price .current-price-value {
  color: var(--aroma-ink-900);
  font-weight: 600;
}
.regular-price,
.product-miniature__regular-price {
  color: var(--aroma-ink-400);
  text-decoration: line-through;
}
.product-flag {
  background: var(--aroma-teal-strong);
  color: #fff;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.product-flag.discount,
.product-flag.on-sale,
.product-miniature__discount-price {
  background: var(--aroma-danger-bg);
  color: var(--aroma-danger);
}

/* Titres de section (produits vedettes, etc.) */
.products-section-title,
.featured-products .h2 {
  color: var(--aroma-ink-900);
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
}

/* ── 8. Footer ────────────────────────────────────────────────────────── */
.footer { background: var(--aroma-surface); border-top: 1px solid var(--aroma-line); }
.footer-block__title {
  color: var(--aroma-ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 600;
}
.footer a { color: var(--aroma-ink-600); }
.footer a:hover { color: var(--aroma-teal-strong); }

/* ── 9. Fiche produit : accordéon Description / Détails en cartes ──────── */
.product__accordion {
  --bs-accordion-active-color: var(--aroma-teal-strong);
  --bs-accordion-active-bg: var(--aroma-surface);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(79,179,189,.20);
}
/* chaque bloc = une carte (on annule le "flush" de Bootstrap) */
.product__accordion.accordion-flush .accordion-item {
  background: var(--aroma-surface);
  border: 1px solid var(--aroma-line) !important;
  border-radius: 14px !important;
  margin-bottom: 12px;
  overflow: hidden;                       /* clippe les angles du bouton */
  box-shadow: 0 1px 0 rgba(11,40,42,.04);
}
.product__accordion .accordion-button {
  padding: 16px 20px;
  font-weight: 600;
  color: var(--aroma-ink-900);
  background: var(--aroma-surface);
}
.product__accordion .accordion-button:not(.collapsed) {
  color: var(--aroma-teal-strong);
  background: var(--aroma-surface);
  box-shadow: none;
}
.product__accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(79,179,189,.20);
}
.product__accordion .accordion-body {
  padding: 4px 20px 20px;
  color: var(--aroma-ink-600);
}

/* ── 10. Déclinaisons en BOUTONS (groupes passés en type 'radio') ──────── */
.product-variant__radios { display: flex; flex-wrap: wrap; gap: 8px; }
.product-variant__radio.form-check {
  padding: 0; margin: 0; min-height: 0; display: inline-flex;
}
.product-variant__radio .form-check-input {     /* on masque le rond radio */
  position: absolute; opacity: 0; pointer-events: none; margin: 0;
}
.product-variant__radio label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 15px; border: 1px solid var(--aroma-line-strong);
  border-radius: 8px; background: var(--aroma-surface);
  color: var(--aroma-ink-900); font-size: 13px; font-weight: 500;
  cursor: pointer; user-select: none; transition: all .12s;
}
.product-variant__radio label:hover {
  border-color: var(--aroma-teal); color: var(--aroma-teal-strong);
}
.product-variant__radio .form-check-input:checked + label {
  background: var(--aroma-teal-strong); border-color: var(--aroma-teal-strong);
  color: #fff;
}
.product-variant__radio .form-check-input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(79,179,189,.25);
}

/* ── 11. Loader anti-flash du module 3D (cf. custom.js) ───────────────── */
.aroma-3d-loader {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity .3s ease;
}
.aroma-3d-loader.is-hidden { opacity: 0; pointer-events: none; }
.aroma-3d-loader__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--aroma-teal-100);
  border-top-color: var(--aroma-teal-strong);
  animation: aroma-spin .7s linear infinite;
}
@keyframes aroma-spin { to { transform: rotate(360deg); } }

/* ── 12. Quick view (listings) : pastille « œil » en bas à droite ──────────
   Par défaut hummingbird affiche au survol une BARRE pleine largeur « Aperçu
   rapide » qui glisse sur l'image et masque le flacon 3D. On la remplace par
   une petite pastille ronde avec l'icône œil, dans le coin bas-droit, qui ne
   recouvre plus l'image (on garde l'accès au flacon). */
.product-miniature__top { position: relative; }
.product-miniature__quickview-button {
  top: auto; left: auto; right: 10px; bottom: 10px;
  width: 40px; height: 40px; min-width: 0; padding: 0; margin: 0;
  border-radius: 999px;
  border: 1px solid var(--aroma-line);
  background: rgba(255,255,255,.92);
  color: var(--aroma-ink-900);
  box-shadow: var(--aroma-shadow-md);
  align-items: center; justify-content: center;
  font-size: 0;                  /* masque le texte « Aperçu rapide » */
  opacity: 0; transform: none;
  z-index: 2;
  transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.product-miniature__quickview-button .material-icons { font-size: 20px; line-height: 1; }
.product-miniature__inner:hover .product-miniature__quickview-button,
.product-miniature__inner:has(:focus-visible) .product-miniature__quickview-button {
  transform: none; opacity: 1;
}
.product-miniature__quickview-button:focus { transform: none; }
.product-miniature__quickview-button:hover {
  background: var(--aroma-teal-strong); color: #fff; border-color: var(--aroma-teal-strong);
}

/* ── 13. Déclinaisons sur les cartes de listing (petits boutons) ───────────
   Rendu par custom.js depuis les données du module aromalistvariants. */
.aroma-lv { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.aroma-lv__group { display: flex; flex-wrap: wrap; gap: 5px; }
.aroma-lv__btn {
  font-size: 11px; font-weight: 500; line-height: 1;
  padding: 5px 8px;
  border: 1px solid var(--aroma-line-strong);
  border-radius: 6px;
  background: var(--aroma-surface);
  color: var(--aroma-ink-900);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.aroma-lv__btn:hover { border-color: var(--aroma-teal); color: var(--aroma-teal-strong); }
.aroma-lv__btn.is-active {
  background: var(--aroma-teal-strong); border-color: var(--aroma-teal-strong); color: #fff;
}

/* ── 14. Drag-to-rotate du flacon 3D sur les cartes ────────────────────────
   Le module écoute le glisser sur .product-miniature__image-container. Sur
   desktop, le navigateur lançait un "drag natif" de l'image/lien qui avalait
   le glisser → le flacon ne tournait pas. On désactive ce drag natif. */
.product-miniature__image-container img,
.product-miniature__image-link,
.product-miniature__image-link img {
  -webkit-user-drag: none;
  user-select: none;
}

/* --- Tes personnalisations ci-dessous ------------------------------------- */

/* ── 15. Mobile : 1 produit par ligne dans les listes ──────────────────────
   Hummingbird passe la grille .products à 2 (puis 4) colonnes dès les petits
   écrans. On force 1 seule colonne sous 768px (téléphones). */
@media (max-width: 767.98px) {
  .products {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* ── 16. Mobile : image produit / flacon 3D à taille raisonnable ───────────
   En 1-par-ligne (cartes pleine largeur), l'image — et le canvas 3D qui se
   superpose dessus — devenait géante. On borne et on centre le bloc image. */
@media (max-width: 767.98px) {
  .product-miniature__image-container {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 17. Icône burger en BLANC (sinon teal/invisible sur le header sombre) ── */
.ps-mainmenu__mobile-toggle .menu-toggle,
.ps-mainmenu__mobile-toggle .menu-toggle i,
.ps-mainmenu__mobile-toggle .menu-toggle svg,
.aroma-header .menu-toggle {
  color: #fff !important;
}
.ps-mainmenu__mobile-toggle .menu-toggle svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}