@charset "UTF-8";

/* =============================================================================
   WAREHOUSE — McDAVIDIAN
   Direction artistique : Riviera française raffinée
   Accessoires cheveux de luxe faits main en France depuis 1980
   ----------------------------------------------------------------------------
   Sommaire :
     1.  Imports (Google Fonts)
     2.  Variables :root (palette, typo, ombres, transitions)
     3.  Reset & base (body, fond crème, sélection, scrollbar)
     4.  Typographie (titres Cormorant, italique or, .mcd-eyebrow)
     5.  Liens
     6.  Boutons (.btn override + variantes .mcd-btn-*)
     7.  Cartes produit (.product-miniature + coins dorés)
     8.  Séparateurs (.mcd-divider)
     9.  Listes & symbole ✦ (.mcd-list)
     10. Cadres décoratifs (.mcd-frame)
     11. Panneaux blur (.mcd-panel)
     12. Animations (.mcd-reveal, @keyframes fadeInUp)
     13. Header & footer — ajustements légers
   ========================================================================== */


/* ===========================================================================
   1. IMPORTS
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');


/* ===========================================================================
   2. VARIABLES :root
   ========================================================================= */

:root {
  /* --- Palette --- */
  --cream:          #f7f1e7;
  --cream-light:    #fbf6ee;
  --cream-dark:   #f1e7d6;
  --cream-deep:  #efe5d4;
  --ink:          #1a1410;
  --ink-soft:     #3a2e25;
  --gold:             #b08d4f;
  --gold-light:       #d4b87e;
  --rose:    #c08a82;
  --line:          #d8cbb4;
  --white:          #ffffff;

  /* --- Ombres (toujours chaudes, jamais grises) --- */
  --shadow:          0 8px 24px rgba(40, 28, 15, 0.12);
  --shadow-soft:    0 4px 14px rgba(40, 28, 15, 0.08);
  --shadow-strong:    0 16px 40px rgba(40, 28, 15, 0.18);

  /* --- Typographie --- */
  --font-display:   'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:      'Jost', 'Helvetica Neue', Arial, sans-serif;
  --eyebrow-size:   11px;
  --eyebrow-ls:     0.36em;
  --btn-ls:         0.22em;

  /* --- Transitions --- */
  --ease:           cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur:            0.35s;
  --dur-fast:       0.2s;

  /* --- Géométrie --- */
  --radius:         2px;       /* coins quasi nets, raffinement */
  --corner-size:    22px;      /* taille des coins décoratifs */
  --corner-stroke:  1px;       /* épaisseur des filets dorés */
}


/* ===========================================================================
   3. RESET & BASE
   ========================================================================= */

body,
#wrapper,
#main {
  background: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 0%, var(--cream-light) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, var(--cream-dark) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--gold);
  color: var(--cream);
}

/* Scrollbar discrète, ton crème/or */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }


/* ===========================================================================
   4. TYPOGRAPHIE
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title,
#main .page-header h1 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1.15;
}

h1, .h1, .page-title { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2, .h2             { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3, .h3             { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

/* Emphase signature : <em> dans un titre = italique doré */
h1 em, h2 em, h3 em,
.h1 em, .h2 em, .h3 em,
.mcd-emphasis {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

/* Eyebrow — petites majuscules dorées au-dessus des titres */
.mcd-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8em;
}

p, li, td, th, label, input, textarea, select, button {
  font-family: var(--font-body);
}

p {
  line-height: 1.65;
  color: var(--ink-soft);
}


/* ===========================================================================
   5. LIENS
   ========================================================================= */

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover,
a:focus {
  color: var(--gold);
  text-decoration: none;
}


/* ===========================================================================
   6. BOUTONS
   ========================================================================= */

/* Override des boutons primaires Warehouse/PrestaShop.
   Style "inversion élégante" : fond encre → transparent au survol. */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
.btn-secondary {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.95em 2.2em;
  box-shadow: none;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
.btn-secondary:hover,
.btn-primary:focus {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* Variante or : pour CTA secondaires de marque */
.mcd-btn-or {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  background: var(--gold);
  color: var(--cream);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 0.95em 2.2em;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.mcd-btn-or:hover,
.mcd-btn-or:focus {
  background: transparent;
  color: var(--gold);
}

/* Variante ghost (fantôme) : encre uniquement en filet */
.mcd-btn-ghost {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.95em 2.2em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.mcd-btn-ghost:hover,
.mcd-btn-ghost:focus {
  background: var(--ink);
  color: var(--cream);
}


/* ===========================================================================
   7. CARTES PRODUIT
   ----------------------------------------------------------------------------
   Cible la miniature standard PrestaShop/Warehouse. Cadre relatif pour
   accueillir les coins décoratifs ::before / ::after.
   ========================================================================= */

/* === "Hands off" : Iqit gère le slide et le hover.
   On ajoute uniquement width: 100% sur les images pour qu'elles
   remplissent la carte (la photo source home_default est petite).
   AUCUN transform / hover de notre côté pour ne pas écraser le slide. */
.product-miniature .product-thumbnail,
.js-product-miniature .product-thumbnail,
.product-miniature .thumbnail-container > a {
  display: block;
  width: 100%;
}
.product-miniature .product-thumbnail img,
.js-product-miniature .product-thumbnail img,
.product-miniature .thumbnail-container img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}


/* ===========================================================================
   8. SÉPARATEURS — ligne or 46px + deux cercles aux extrémités
   ========================================================================= */

.mcd-divider {
  position: relative;
  display: block;
  width: 46px;
  height: 1px;
  margin: 1.6em auto;
  background: var(--gold);
  border: 0;
}
.mcd-divider::before,
.mcd-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateY(-50%);
}
.mcd-divider::before { left: -12px; }
.mcd-divider::after  { right: -12px; }

/* Variante alignée à gauche */
.mcd-divider--left {
  margin-left: 0;
  margin-right: auto;
}


/* ===========================================================================
   9. LISTES & SYMBOLE ✦
   ========================================================================= */

.mcd-list {
  list-style: none;
  padding-left: 0;
}
.mcd-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.6em;
  color: var(--ink-soft);
}
.mcd-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gold);
  font-size: 0.9em;
  line-height: 1.4;
}

/* Marqueur de sélection ✦ (utilisable sur élément actif, étape en cours…) */
.mcd-marker::before {
  content: '✦ ';
  color: var(--gold);
  font-weight: 500;
  margin-right: 0.3em;
}


/* ===========================================================================
   10. CADRES DÉCORATIFS — filets or partiels (haut-gauche + bas-droite)
   ----------------------------------------------------------------------------
   Utilisable autour d'un bloc qui doit ressembler à un médaillon raffiné :
   <div class="mcd-frame"> ... </div>
   ========================================================================= */

.mcd-frame {
  position: relative;
  padding: 2.6em 2.4em;
  border: 1px solid var(--line);
}
.mcd-frame::before,
.mcd-frame::after {
  content: '';
  position: absolute;
  width: 46px;
  height: 46px;
  opacity: 0.5;
  pointer-events: none;
}
.mcd-frame::before {
  top: 14px; left: 14px;
  border-top: var(--corner-stroke) solid var(--gold);
  border-left: var(--corner-stroke) solid var(--gold);
}
.mcd-frame::after {
  bottom: 14px; right: 14px;
  border-bottom: var(--corner-stroke) solid var(--gold);
  border-right: var(--corner-stroke) solid var(--gold);
}

/* Variante "complète" : filets sur tous les coins */
.mcd-frame--full::before,
.mcd-frame--full::after {
  width: 46px; height: 46px;
}
.mcd-frame--full::before {
  border-right: var(--corner-stroke) solid var(--gold);
}
.mcd-frame--full::after {
  border-left: var(--corner-stroke) solid var(--gold);
}


/* ===========================================================================
   11. PANNEAUX BLUR
   ----------------------------------------------------------------------------
   Pour les overlays / encarts qui doivent flotter sur l'image ou le fond.
   ========================================================================= */

.mcd-panel {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  border: 1px solid rgba(216, 203, 180, 0.5);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8em 2em;
}

.mcd-panel--encre {
  background: rgba(26, 20, 16, 0.72);
  color: var(--cream);
  border-color: rgba(176, 141, 79, 0.3);
}
.mcd-panel--encre .mcd-eyebrow { color: var(--gold-light); }


/* ===========================================================================
   12. ANIMATIONS — apparitions en fondu + léger déplacement vertical
   ========================================================================= */

@keyframes mcdFadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mcd-reveal {
  opacity: 0;
  animation: mcdFadeInUp 0.7s var(--ease) forwards;
}
.mcd-reveal--delay-1 { animation-delay: 0.12s; }
.mcd-reveal--delay-2 { animation-delay: 0.24s; }
.mcd-reveal--delay-3 { animation-delay: 0.36s; }
.mcd-reveal--delay-4 { animation-delay: 0.48s; }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===========================================================================
   13. HEADER & FOOTER — ajustements légers (non-intrusifs)
   ----------------------------------------------------------------------------
   On ne refait pas la structure Warehouse, on ajuste juste les tons et la
   typo pour cohérence avec la DA.
   ========================================================================= */

#header,
.header-top,
.header-nav {
  background: var(--cream-light);
  border-bottom: 1px solid var(--line);
}

#header .logo {
  filter: none;
}

#header a {
  color: var(--ink);
}
#header a:hover {
  color: var(--gold);
}

/* Menu principal (iqitmegamenu) — typo aérée, majuscules subtiles */
.iqitmegamenu-horizontal .cbp-hrmenu > .cbp-tab > a,
.iqitmegamenu-vertical .cbp-hrmenu > .cbp-tab > a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Footer */
#footer,
.footer-container {
  background: var(--cream-dark);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
#footer h3,
#footer .h3,
.footer-container .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.01em;
}
#footer a:hover {
  color: var(--gold);
}

/* Mise en valeur des signatures de marque dans le footer/bandeaux :
   utilise <span class="mcd-signature">Fait main en France depuis 1980</span> */
.mcd-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.02em;
}


/* ===========================================================================
   16. PAGES IQITELEMENTOR (CMS pages construites avec le page builder)
   ----------------------------------------------------------------------------
   Surcharge les widgets elementor pour qu'ils suivent la DA Riviera :
   titres en Cormorant, textes en Jost, palette crème/encre/or.
   ========================================================================= */

/* Containers / sections — fond crème uniforme */
.elementor-section,
.elementor-section-wrap,
.elementor-column,
.elementor-widget-container,
.elementor-row {
  background-color: transparent !important;
}

/* Titres Elementor — Cormorant Garamond, encre */
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.15 !important;
}

/* Italique dans titre = doré (signature Riviera) */
.elementor-heading-title em,
.elementor-widget-heading em {
  font-style: italic !important;
  color: var(--gold) !important;
}

/* Texte courant — Jost */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-text-editor,
.elementor-widget-text-editor .elementor-widget-container {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  color: var(--ink-soft) !important;
  line-height: 1.65 !important;
}

/* Liens dans le contenu Elementor */
.elementor-widget-text-editor a,
.elementor-text-editor a {
  color: var(--ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--gold-light);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.elementor-widget-text-editor a:hover,
.elementor-text-editor a:hover {
  color: var(--gold) !important;
  border-color: var(--gold);
}

/* Boutons Elementor — style "encre → transparent" */
.elementor-button,
.elementor-button-link,
.elementor-widget-button .elementor-button {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: uppercase !important;
  background-color: var(--ink) !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius) !important;
  padding: 0.95em 2.2em !important;
  box-shadow: none !important;
  transition: all var(--dur) var(--ease) !important;
}
.elementor-button:hover,
.elementor-button-link:hover,
.elementor-widget-button .elementor-button:hover {
  background-color: transparent !important;
  color: var(--ink) !important;
}

/* Icon lists — utiliser ✦ couleur or */
.elementor-icon-list-item .elementor-icon-list-icon i {
  color: var(--gold) !important;
}
.elementor-icon-list-item .elementor-icon-list-text {
  font-family: var(--font-body) !important;
  color: var(--ink-soft) !important;
}

/* Séparateur Elementor — couleur or */
.elementor-divider-separator,
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--gold) !important;
  background-color: var(--gold) !important;
}

/* Bloc image-box / icon-box — titre Cormorant, texte Jost */
.elementor-image-box-title,
.elementor-icon-box-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.elementor-image-box-description,
.elementor-icon-box-description {
  font-family: var(--font-body) !important;
  color: var(--ink-soft) !important;
}


/* ===========================================================================
   15. COPYRIGHTS FOOTER (3 lignes — marque, séparateur ✦, ligne légale)
   ========================================================================= */

#footer-copyrights.mcd-copyrights {
  background-color: var(--cream-deep) !important;
  border-top: 1px solid var(--line);
  padding: 2.4em 0 2em;
  text-align: center;
}
.mcd-copyrights__inner {
  max-width: 720px;
  margin: 0 auto;
}
.mcd-copyrights__brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin: 0 0 0.4em;
}
.mcd-copyrights__sep {
  color: var(--gold);
  font-size: 1.1rem;
  margin: 0 0 0.6em;
  line-height: 1;
}
.mcd-copyrights__legal {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}


/* ===========================================================================
   14. PRIORITÉ — overrides forcés
   ----------------------------------------------------------------------------
   Warehouse a des règles de couleur avec une spécificité élevée (souvent
   préfixées par #wrapper, #main, ou .page-X). On force ici les couleurs
   signature avec !important pour gagner la cascade sans devoir réécrire
   toute la palette du thème parent.
   ========================================================================= */

/* Fond global — sélecteurs ID (#wrapper/#main) battent déjà la plupart
   des règles Iqit classes-seules. Plus de !important nécessaire ici. */
html body,
html body#checkout,
body #wrapper,
body #main,
body .page-wrapper {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 0%, var(--cream-light) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, var(--cream-dark) 0%, transparent 50%);
  color: var(--ink);
}

/* Texte courant */
body p, body li, body td, body th,
body .product-description, body .block-content {
  color: var(--ink);
}

/* Titres en couleur encre, italique en or */
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body .page-title,
#main .page-header h1,
body .product-title,
body .product-title a {
  color: var(--ink);
  font-family: var(--font-display);
}

body h1 em, body h2 em, body h3 em,
body .h1 em, body .h2 em, body .h3 em,
body .mcd-emphasis {
  color: var(--gold);
  font-style: italic;
}

/* Liens */
body a, body a:link, body a:visited {
  color: var(--ink);
}
body a:hover, body a:focus,
body .product-title a:hover {
  color: var(--gold);
}

/* Eyebrow — classe perso .mcd-*, aucun conflit donc pas de !important */
.mcd-eyebrow {
  color: var(--gold);
}

/* Boutons primaires — sans !important (préfixe `body` pour battre Iqit).
   Spécificité native Iqit : .btn-primary (0,0,1,0). Notre body .btn-primary
   est (0,0,1,1) → gagne sans !important. */
body .btn-primary,
body .btn.btn-primary,
body button.btn-primary,
body input[type="submit"].btn-primary,
body .btn-secondary,
body a.btn-secondary,
body a.btn.btn-secondary,
body .btn.btn-secondary,
body .cart-content-btn .btn-primary,
body .product-add-to-cart .btn-primary,
body .add-to-cart {
  background-color: var(--ink) !important;
  background-image: none !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink) !important;
  text-transform: uppercase;
  letter-spacing: var(--btn-ls);
  box-shadow: none;
}

/* Garantir la lisibilité du chevron/icône à l'intérieur du bouton */
body a.btn.btn-secondary i,
body .btn.btn-secondary i,
body a.btn-secondary i {
  color: var(--cream) !important;
}

body .btn-primary:hover,
body .btn.btn-primary:hover,
body button.btn-primary:hover,
body .btn-secondary:hover,
body .add-to-cart:hover {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* === Boutons CHECKOUT / VIEW CART (blockcart dropdown + cart pages) ===
   Préfixe par #blockcart-content (ID = spécificité 100+) pour battre
   toute règle Bootstrap/Iqit avec haute spécificité. */
#blockcart-content a.btn,
#blockcart-content .btn.btn-primary,
#blockcart-content .btn.btn-secondary,
#blockcart-content a.btn-primary,
#blockcart-content a.btn-secondary,
body .cart-content-btn a,
body .cart-content-btn .btn,
body .cart-detailed-actions a,
body .cart-detailed-actions .btn,
body .blockcart-modal-footer .btn,
body .modal-footer .btn-primary,
body .blockcart-modal .btn-primary,
body a.btn-cart-checkout,
body a.checkout-cart-btn,
body .cart-summary .btn-primary,
body .cart-summary a.btn {
  background-color: var(--ink) !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: uppercase !important;
  padding: 1em 2em !important;
  text-decoration: none !important;
}

/* Variante secondaire (View cart) — fond transparent, bordure encre */
#blockcart-content a.btn-secondary,
#blockcart-content .btn.btn-secondary {
  background-color: transparent !important;
  color: var(--ink) !important;
}

/* Hover : inversion */
#blockcart-content a.btn:hover,
#blockcart-content .btn.btn-primary:hover,
#blockcart-content .btn.btn-secondary:hover,
body .cart-content-btn a:hover,
body .cart-content-btn .btn:hover,
body .cart-detailed-actions a:hover,
body .cart-detailed-actions .btn:hover,
body .blockcart-modal-footer .btn:hover,
body .modal-footer .btn-primary:hover,
body a.btn-cart-checkout:hover,
body a.checkout-cart-btn:hover {
  background-color: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}
#blockcart-content a.btn-secondary:hover,
#blockcart-content .btn.btn-secondary:hover {
  background-color: var(--ink) !important;
  color: var(--cream) !important;
}

/* Cartes produit miniatures : "Hands off total". Toutes mes règles
   .product-miniature retirées de la section PRIORITY pour laisser Iqit
   gérer le slide "Second image on hover" sans interférence.
   Les couleurs encre/cream s'héritent via :root + body. */

/* Prix : garder l'encre (utile partout, pas que sur miniature) */
body .product-price,
body .current-price {
  color: var(--ink);
}
body .regular-price {
  color: var(--line);
}
body .discount,
body .discount-percentage,
body .discount-amount {
  background-color: var(--gold);
  color: var(--cream);
}

/* Header — #header est ID (specificité 100), aucun !important nécessaire */
body #header,
body .header-top,
body .header-nav,
body .header-nav .wrapper {
  background-color: var(--cream-light);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

/* === Réduction padding du topbar (la <nav class="header-nav"> contenant
   MCD France / Help / USD$ / Wishlist) === */
body #header > nav.header-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body #header > nav.header-nav > .container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
body #header > nav.header-nav .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body #header > nav.header-nav .col,
body #header > nav.header-nav .col-auto {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.5;
}
body #header > nav.header-nav #iqithtmlandbanners-block-5 p,
body #header > nav.header-nav .rte-content p {
  margin: 0 !important;
}

/* === Réduction de l'espace ENTRE le topbar et le logo === */
/* On compacte tous les wrappers + tous les éléments parents du logo.
   `html body header#header` = 4 niveaux de spécificité pour battre Iqit. */
html body #header #desktop-header,
html body #header #desktop-header.desktop-header-style-2,
html body #header .header-top,
html body #header #desktop-header-container,
html body #header #desktop-header-container.container,
html body #header .desktop-header-style-2 .header-top {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body #header .header-top > .container > .row,
html body #header .header-top .row.align-items-center,
html body #header #desktop-header-container > .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body #header #desktop_logo {
  margin: 0 !important;
  padding: 0 !important;
}
html body #header #desktop_logo img.logo {
  margin: 0 !important;
  vertical-align: middle;
}
html body #header .col-header-left,
html body #header .col-header-center,
html body #header .col-header-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* .header-banner (div vide) : hauteur 0 si vide */
html body #header > .header-banner:empty {
  display: none !important;
}
html body #header > .header-banner {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
}
/* #header global : pas de padding/margin */
html body #header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* === Espace topbar/logo : on laisse l'espace naturel d'Iqit ===
   Les tentatives -15/-30/-50px causaient des chevauchements sur la gauche
   entre la topbar et le logo. Mieux vaut un peu plus d'air sans bug. */
html body #header > nav.header-nav {
  margin-bottom: 0 !important;
}
body #header a,
body .header-top a,
body .header-nav a {
  color: var(--ink);
}
body #header a:hover,
body .header-top a:hover,
body .header-nav a:hover {
  color: var(--gold);
}

/* Menu principal Iqit — forcer la visibilité au cas où une règle parente le cache */
#iqitmegamenu-wrapper,
.iqitmegamenu-wrapper,
.iqitmegamenu-horizontal,
.iqitmegamenu-vertical,
#cbp-hrmenu,
.cbp-hrmenu,
.cbp-hrmenu > ul,
.cbp-hrmenu-tab {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 44px !important;
  overflow: visible !important;
}
.center-nav,
.col.center-nav {
  min-height: 44px !important;
  flex-grow: 1 !important;
}
.cbp-hrmenu-tab > a {
  display: inline-block !important;
  padding: 12px 16px !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
}

/* Force la visibilité du megamenu desktop quelle que soit la résolution */
@media (max-width: 991.98px) {
  #iqitmegamenu-wrapper.iqitmegamenu-all,
  .iqitmegamenu-wrapper.iqitmegamenu-all,
  #iqitmegamenu-horizontal,
  #cbp-hrmenu {
    display: block !important;
    visibility: visible !important;
  }
}

/* Sous-menus iqitmegamenu (.cbp-hrsub) — masqués par défaut, visibles
   uniquement quand le tab parent est survolé/ouvert. Notre force
   `overflow: visible` sur .cbp-hrmenu-tab faisait remonter les items
   "Brushes / Hairclips" du sous-menu de Hair Accessories dans le flux
   normal de la page. */
.cbp-hrsub {
  position: absolute !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
.cbp-hrmenu-tab.cbp-hover > .cbp-hrsub,
.cbp-hrmenu-tab:hover > .cbp-hrsub,
.cbp-hrmenu-tab.cbp-has-submeu:hover > .cbp-hrsub,
.cbp-hrmenu > ul > li:hover > .cbp-hrsub {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Au cas où iqitlinksmanager renderait aussi quelque chose dans left-nav */
.header-nav .col.left-nav:empty,
.header-nav .left-nav:empty {
  display: none !important;
}

/* Menu mobile iqitmegamenu — caché sur desktop (viewport >= 992px).
   Sans cette règle, le bloc #_desktop_iqitmegamenu-mobile (qui rend la
   liste verticale Brushes/Hairclips/etc.) s'affiche en parallèle du
   megamenu horizontal en haut à gauche. */
@media (min-width: 992px) {
  #_desktop_iqitmegamenu-mobile,
  #iqitmegamenu-mobile,
  .mobile-menu,
  .js-mobile-menu {
    display: none !important;
  }
}

/* Item individuel — visible même si vide ou avec juste icône
   Couleurs en dur (#1a1410) pour éviter tout risque de variable non résolue. */
.cbp-hrmenu > ul > li.cbp-hrmenu-tab,
.cbp-hrmenu > ul > li {
  display: inline-block !important;
  visibility: visible !important;
  min-width: 80px !important;
  text-align: center;
  padding: 0 8px !important;
}
.cbp-hrmenu > ul > li > a,
.cbp-hrmenu > ul > li > a:link,
.cbp-hrmenu > ul > li > a:visited,
.cbp-hrmenu-tab > a,
.cbp-hrmenu-tab > a:link,
.cbp-hrmenu-tab > a:visited,
.cbp-hrmenu > ul > li.cbp-hrmenu-tab .cbp-tab-title,
.cbp-hrmenu > ul > li .cbp-tab-title,
.cbp-tab-title,
nav#cbp-hrmenu li a,
nav#cbp-hrmenu li span {
  color: #1a1410 !important;
  background: transparent !important;
  -webkit-text-fill-color: #1a1410 !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.cbp-hrmenu > ul > li > a:hover,
.cbp-hrmenu-tab > a:hover,
.cbp-hrmenu > ul > li:hover > a,
.cbp-hrmenu > ul > li:hover .cbp-tab-title {
  color: #b08d4f !important;
  -webkit-text-fill-color: #b08d4f !important;
}
.cbp-hrmenu > ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.iqitmegamenu-horizontal,
.iqitmegamenu-vertical,
.iqitmegamenu-horizontal .cbp-hrmenu,
.iqitmegamenu-vertical .cbp-hrmenu {
  background-color: transparent !important;
}
.iqitmegamenu-horizontal .cbp-hrmenu > .cbp-tab > a,
.iqitmegamenu-vertical .cbp-hrmenu > .cbp-tab > a {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-size: 16px !important;
}
.iqitmegamenu-horizontal .cbp-hrmenu > .cbp-tab > a:hover,
.iqitmegamenu-vertical .cbp-hrmenu > .cbp-tab > a:hover {
  color: var(--gold) !important;
}

/* Footer */
#footer,
.footer-container,
.footer-container .container {
  background-color: var(--cream-dark) !important;
  color: var(--ink-soft) !important;
  border-top: 1px solid var(--line) !important;
}
#footer a,
.footer-container a {
  color: var(--ink-soft) !important;
}
#footer a:hover,
.footer-container a:hover {
  color: var(--gold) !important;
}
#footer h3, #footer .h3,
.footer-container h3, .footer-container .h3 {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}


/* ===========================================================================
   17. FICHE PRODUIT — polish luxe
   ----------------------------------------------------------------------------
   Composition : titre Cormorant grand format, eyebrow doré pour brand+ref,
   prix Cormorant, ligne signature "CELLULOSE ACETATE · THE NOBLE MATERIAL",
   image cadre or, onglets élégants, sidebar avec frames.
   ========================================================================= */

/* === Cacher "Secure payments" + icônes PayPal/Mastercard/Visa/Amex ===
   Choix de marque luxe : on assume que la sécurité est implicite, on évite
   les codes e-commerce de masse. Cible précisément le block ps_checkout
   sur la fiche produit ; reste visible au checkout naturellement. */
body.page-product #ps_checkout-payment-method-logo-block-container {
  display: none !important;
}

/* Conteneur principal — espace négatif généreux */
body #main .product-container,
body #main .product__product-info,
body #main .product-information {
  padding-top: 2em;
}

/* === TITRE PRODUIT (h1) === */
body .product__product-name,
body .product-information .h1,
body .product-detail-name,
body .product-information h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0.6em;
  position: relative;
}
/* Petite ligne or sous le titre (signature) */
body .product__product-name::after,
body .product-information .h1::after,
body .product-detail-name::after,
body .product-information h1::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  background: var(--gold);
  margin: 0.7em 0 0;
}

/* === BRAND + RÉFÉRENCE (au-dessus du prix) — eyebrow doré === */
body .product-manufacturer,
body .product-manufacturer-link,
body .product-reference,
body .product-information .product-manufacturer,
body .product-information .product-reference,
body .product__product-brand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3em;
}
body .product-manufacturer a,
body .product-manufacturer-link a,
body .product-reference a {
  color: var(--gold);
  border-bottom: 0;
}
body .product-manufacturer a:hover,
body .product-reference a:hover {
  color: var(--ink);
}

/* Label statique avant brand/ref ("Brand:", "Reference:") — plus discret */
body .product-information .product-manufacturer .label,
body .product-information .product-reference .label {
  color: var(--ink-soft);
  opacity: 0.6;
}

/* === PRIX === */
body .product-prices,
body .product__product-price,
body .product-information .product-prices {
  margin: 1.4em 0 0.8em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7em;
}
body .product-prices .current-price,
body .product__product-price .current-price,
body .current-price span.price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink);
  letter-spacing: 0.01em;
}
body .product-prices .product-discount .regular-price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--line);
  text-decoration: line-through;
  margin-right: 0.6em;
}
/* "Tax included" : eyebrow discret, inline avec le prix (baseline) */
body .product-tax,
body .tax-shipping-delivery-label,
body .product-prices .tax-shipping-delivery-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.65;
  margin: 0;
  align-self: baseline;
}

/* === SIGNATURE MARQUE — déplacée APRÈS les variantes ===
   Plus dans le bloc prix mais en ::after sur .product-actions
   (qui contient le form variantes + cart). Position : juste sous
   les pickers Color/Style, avant le bouton Add to cart. */
/* Direction C "Confidence" : on retire l'auto-injection "CELLULOSE ACETATE..."
   sur chaque fiche produit (trop de signature = perçu pastiche).
   La mention reste sur le hero home, c'est suffisant. */

/* === DESCRIPTION COURTE ("Ponytail (8cm clip), handmade in France") === */
body .product-information .product-description-short,
body .product__product-short-description,
body .product-description-short {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 1em 0 1.6em;
}

/* === LABELS DES VARIANTES ("Color", "Style") === */
body .product-variants .control-label,
body .product-variants-item .control-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6em;
  display: block;
}

/* === BOUTON ADD TO CART — plus large, présence affirmée === */
body .product-add-to-cart .add-to-cart,
body .product-actions .add-to-cart {
  min-width: 220px;
  padding: 1.1em 2.6em;
  letter-spacing: 0.28em;
  font-size: 12px;
}

/* === WISHLIST heart — discret, doré au hover === */
body .product-actions .btn-iqitwishlist-add,
body .product-actions .iqitwishlist-button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all var(--dur) var(--ease);
}
body .product-actions .btn-iqitwishlist-add:hover,
body .product-actions .iqitwishlist-button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* === SECURE PAYMENTS + cards === */
body .product-information .secure-payments,
body .product__secure-payments {
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}
body .secure-payments-title,
body .product-information .secure-payments-title {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.8em;
}

/* === ICÔNES SOCIAL SHARE === */
body .social-sharing,
body .product-share-social {
  margin-top: 2em;
}
body .social-sharing a,
body .product-share-social a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  margin-right: 0.4em;
  transition: all var(--dur) var(--ease);
}
body .social-sharing a:hover,
body .product-share-social a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* === IMAGE GALERIE — cadre léger sans toucher au calcul d'EasyZoom ===
   IMPORTANT : pas de padding ni de width forcé sur l'image ni sur le
   wrapper direct. EasyZoom calcule la position de la loupe en se basant
   sur les dimensions exactes de l'img — toute intervention CSS ici
   provoque un dezoom apparent au hover. On habille DEHORS via un wrapper
   ::before pour la bordure, sans interférer. */
body .product-cover {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  /* PAS de padding ici — EasyZoom en a besoin */
}
/* Coins dorés signature — purement décoratifs, pointer-events: none */
body .product-cover::before,
body .product-cover::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 2;
}
body .product-cover::before {
  top: 10px; left: 10px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
}
body .product-cover::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}
/* On NE force PLUS width / height sur l'image du product-cover.
   On laisse EasyZoom gérer ses dimensions naturellement. */

/* === ONGLETS DESCRIPTION / DETAILS / REVIEWS === */
body .tabs .nav-tabs,
body #product-details-tabs .nav-tabs {
  border-bottom: 1px solid var(--line);
}
body .tabs .nav-tabs .nav-link,
body #product-details-tabs .nav-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: 1em 0;
  margin-right: 2em;
  position: relative;
  transition: color var(--dur) var(--ease);
}
body .tabs .nav-tabs .nav-link:hover {
  color: var(--ink);
}
body .tabs .nav-tabs .nav-link.active,
body #product-details-tabs .nav-link.active {
  color: var(--ink);
}
/* Trait or sous l'onglet actif */
body .tabs .nav-tabs .nav-link.active::after,
body #product-details-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}

/* === SIDEBAR (Guarantee, Need more photos, Size guide) — cadres luxe === */
body .product-information-block,
body .iqitextendedproduct .iqit-content-block,
body #right-column .product__quickview-content,
body .product-right-info {
  background-color: var(--white);
  border: 1px solid var(--line);
  padding: 1.5em 1.4em;
  margin-bottom: 1.4em;
  position: relative;
  box-shadow: var(--shadow-soft);
}
body .product-information-block::before,
body .iqitextendedproduct .iqit-content-block::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  width: 24px;
  height: 24px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  opacity: 0.5;
  pointer-events: none;
}
body .product-information-block::after,
body .iqitextendedproduct .iqit-content-block::after {
  content: '';
  position: absolute;
  bottom: 8px; right: 8px;
  width: 24px;
  height: 24px;
  border-bottom: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  opacity: 0.5;
  pointer-events: none;
}

/* === "Guarantee 100% hand made in France" — eyebrow signature === */
body .product-information-block h3,
body .product-information-block .h3,
body .iqitextendedproduct h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1em;
  text-align: center;
}

/* === BOUTON WHATSAPP — moins criard, plus discret luxe === */
body .whatsapp-button,
body .btn-whatsapp,
body a[href*="whatsapp"],
body a[href*="wa.me"] {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* === BREADCRUMB — discret, gold pour le dernier === */
body .breadcrumb {
  background: transparent;
  padding: 1em 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body .breadcrumb-item a {
  color: var(--ink-soft);
  border-bottom: 0;
}
body .breadcrumb-item.active,
body .breadcrumb-item:last-child {
  color: var(--gold);
}



/* ===========================================================================
   18. RESPONSIVE MOBILE — fiche produit
   ----------------------------------------------------------------------------
   Pattern luxe (Hermès, Dior, Sephora) : sur mobile, l'image ne doit pas
   pousser les variantes hors écran. Image limitée à 55vh, variantes
   compactes, et bouton "Add to cart" sticky en bas du viewport pour
   être toujours accessible sans scroll.
   ========================================================================= */

@media (max-width: 991.98px) {

  /* Image principale : on contraint TOUS les descendants Swiper sinon
     le swiper recalcule sa hauteur en fonction de l'image et ignore
     notre max-height. Cible 35vh + cascade. */
  body .product-cover,
  body .product__product-cover,
  body .product-images-large,
  body .product-images-large .swiper-wrapper,
  body .product-images-large .swiper-slide,
  body .product-images-large .easyzoom {
    max-height: 35vh !important;
    overflow: hidden !important;
  }
  body .product-cover img,
  body .product__product-cover img,
  body .product-images-large img,
  body .product-images-large .swiper-slide img,
  body .easyzoom img {
    max-height: 35vh !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }

  /* Galerie thumbnails CACHÉE sur mobile (pattern luxe : swipe sur l'image
     principale pour naviguer plutôt que vignettes ; plus d'espace pour
     variantes et CTA). */
  body #product-images-thumbs,
  body .product-images-thumbs,
  body .js-product-image-thumbs,
  body .product-thumbs {
    display: none !important;
  }

  /* === ZOOM MOBILE — modal sur tap === */
  /* Image cliquable (cursor zoom-in pour indicateur visuel) */
  body .product-cover .easyzoom-product,
  body .product-cover .product-lmage-large,
  body .product-cover .js-easyzoom-trigger,
  body .product-cover img {
    cursor: zoom-in;
  }

  /* === Images dans le MODAL ZOOM : libérer les contraintes mobile ===
     Sinon mon `max-height: 35vh` constraint aussi l'image dans le modal,
     qui devient minuscule. Le modal doit afficher l'image en grand. */
  body #product-modal img,
  body #product-modal .modal-body img,
  body #product-modal .modal-content img,
  body .modal .product-images-large img,
  body .modal .easyzoom img,
  body .modal-content .easyzoom img,
  body .modal-content .product-cover img,
  body .product-modal img,
  body .modal-zoom-content img,
  body .easyzoom-zoom img,
  body .easyzoom-flyout img,
  body .easyzoom-flyout-wrap img,
  body .easyzoom-notice img {
    max-height: none !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* Le wrapper du modal doit avoir auto height (pas 35vh) */
  body #product-modal .product-cover,
  body #product-modal .product-images-large,
  body #product-modal .product-images-large .swiper-wrapper,
  body #product-modal .product-images-large .swiper-slide,
  body #product-modal .easyzoom,
  body #product-modal .easyzoom-product,
  body .modal .product-cover,
  body .modal .product-images-large,
  body .modal .product-images-large .swiper-wrapper,
  body .modal .product-images-large .swiper-slide,
  body .modal .easyzoom {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Hint "TAP TO ZOOM" caché à l'intérieur du modal (déjà ouvert dedans) */
  body #product-modal .product-cover::after,
  body .modal .product-cover::after {
    display: none !important;
  }

  /* Bouton expand (déclenche le modal zoom) — bien visible en haut droite */
  body .product-cover .expander {
    display: flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    z-index: 5;
    box-shadow: 0 2px 8px rgba(40, 28, 15, 0.12);
    cursor: pointer;
  }
  body .product-cover .expander i,
  body .product-cover .expander .fa {
    font-size: 16px;
    line-height: 1;
  }
  body .product-cover .expander:hover,
  body .product-cover .expander:active {
    background-color: var(--gold);
    color: var(--white);
    border-color: var(--gold);
  }

  /* Petit "hint" eyebrow doré sous l'image : tap to zoom */
  body .product-cover::after {
    content: '✦ TAP TO ZOOM';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.4em;
    color: var(--gold);
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 10px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 4;
    /* Override la déco "coin or" du desktop */
    width: auto;
    height: auto;
    border: 0;
    opacity: 0.85;
  }
  body .product-cover::before {
    display: none; /* on neutralise l'autre coin or sur mobile */
  }

  /* Coins or signature plus petits sur mobile */
  body .product-cover::before,
  body .product-cover::after {
    width: 20px;
    height: 20px;
    top: 6px;
    left: 6px;
  }
  body .product-cover::after {
    top: auto;
    left: auto;
    bottom: 6px;
    right: 6px;
  }

  /* Espace au-dessus du bloc info réduit pour rapprocher variantes */
  body #main .product-information,
  body #main .product__product-info {
    padding-top: 0.6em;
  }

  /* === Compactage du bloc info pour gagner de la hauteur ===
     Mobile = moins d'espacement entre titre / brand / ref / prix / signature
     pour que les variantes (couleurs) remontent au-dessus du fold. */

  /* === REORDER de .product-information ===
     Cette div contient SEULEMENT 2 enfants : description (rte-content) et
     product-actions (form avec variantes + cart). On les met dans l'ordre :
     1. product-actions (variantes + cart) — JUSTE après le prix
     2. description (renvoyée plus bas) */
  body .product-information,
  body #main .product-information {
    display: flex !important;
    flex-direction: column !important;
  }
  body .product-information .product-actions,
  body .product-information > .product-actions,
  body .product-information > .product-actions.js-product-actions {
    order: 1 !important;
    margin-top: 0.6em;
  }
  body .product-information .product-description,
  body .product-information > .rte-content,
  body .product-information > .rte-content.product-description {
    order: 2 !important;
    font-size: 0.9rem !important;
    margin: 0.6em 0 0 !important;
    line-height: 1.4 !important;
  }

  /* === Titre + prix dans .product_header_container ===
     Ces éléments sont DEHORS de .product-information. On stylise le titre
     et le prix dans leur conteneur d'origine. */
  body .product_header_container h1,
  body .product_header_container .h1,
  body .product_header_container .product-detail-name {
    font-size: 1.6rem !important;
    line-height: 1.1 !important;
    margin: 0 0 0.3em !important;
  }
  body .product_header_container h1::after,
  body .product_header_container .h1::after {
    display: none !important;
  }
  body .product_header_container .product-prices {
    margin: 0.4em 0 0.5em !important;
    padding-bottom: 0.4em !important;
  }
  body .product_header_container .product-prices .current-price {
    font-size: 1.4rem !important;
  }
  body .product-prices .current-price,
  body .current-price span.price {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }
  body .product-tax,
  body .tax-shipping-delivery-label,
  body .product-prices .tax-shipping-delivery-label {
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
    margin: 0 !important;
    display: block;
    text-align: right;
    color: var(--ink-soft);
  }
  /* Signature "CELLULOSE ACETATE" reste sous le prix dans la colonne droite */
  body .product-prices::after {
    display: block !important;
    text-align: right !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    margin-top: 0.3em !important;
    max-width: none !important;
  }

  /* Brand "Brand: MC Davidian" : MASQUÉE sur mobile */
  body .product-information > .product-manufacturer,
  body .product-information .product-manufacturer-link {
    display: none !important;
  }

  /* === ORDRE EXPLICITE ===
     Row 1 : titre + prix
     Row 2 : form (variantes Color / Style + qty + add to cart)
     Row 3+: reference puis description (en dessous, auto-placés) */

  /* === BLOC ACTIONS (form > variants + qty + add to cart) ===
     C'est le PARENT de la form (.product-actions), pas la form elle-même.
     Placé sur grid-row 2 → variantes et add-to-cart juste sous titre/prix. */
  body .product-information > .product-actions,
  body .product-information > .product-actions.js-product-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.8em;
  }

  /* Tous les autres éléments en dessous, full-width, ordrés via order */
  body .product-information > .product-reference,
  body .product-information > .product-description-short,
  body .product-information > .rte-content.product-description,
  body .product-information > .product-customization {
    grid-column: 1 / -1;
  }

  /* Description courte → après variantes (ordre 3) */
  body .product-information > .product-description-short,
  body .product-information > .rte-content.product-description {
    order: 3 !important;
    font-size: 0.9rem !important;
    margin: 0.8em 0 0 !important;
    line-height: 1.4 !important;
  }

  /* Reference → tout en bas (ordre 4) */
  body .product-information > .product-reference {
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.24em !important;
    color: var(--gold) !important;
    margin: 0.4em 0 0 !important;
    line-height: 1.4 !important;
    order: 4 !important;
  }

  /* === HIDE BRAND (sélecteurs élargis) === */
  body.page-product .product-manufacturer,
  body.page-product .product-information .product-manufacturer,
  body.page-product .product-information .product-manufacturer-link,
  body.page-product .product-information .product-brand,
  body.page-product .product-information [itemprop="brand"] {
    display: none !important;
  }

  /* Description courte : compact */
  body .product-description-short,
  body .product-information .product-description-short {
    font-size: 0.9rem !important;
    margin: 0.4em 0 0.7em !important;
    line-height: 1.4 !important;
  }

  /* Variantes : labels VISIBLES et swatches GROS pour le tap (44px = WCAG minimum) */
  body .product-variants-item .control-label,
  body .product-variants .control-label {
    font-size: 12px;
    letter-spacing: 0.28em;
    margin-bottom: 0.8em;
    display: block;
  }
  body .product-variants .input-color,
  body .product-variants-item .color,
  body .product-variants-item .input-container .color {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--line);
  }
  body .product-variants .input-color:checked + label,
  body .product-variants-item .color:checked + label,
  body .product-variants .input-container input:checked ~ .color {
    border: 2px solid var(--gold) !important;
    box-shadow: 0 0 0 2px var(--white) inset;
  }
  /* Espacement entre swatches */
  body .product-variants-item .input-container {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  body .product-variants {
    margin-bottom: 1.4em;
  }

  /* Style picker (select dropdown) : plus grand pour tap mobile */
  body .product-variants-item select,
  body .product-variants select.form-control {
    min-height: 44px;
    padding: 0.5em 0.8em;
    font-size: 13px;
  }

  /* Description courte plus discrète */
  body .product-description-short {
    font-size: 0.95rem;
    margin: 0.6em 0 1em;
  }

  /* Signature "CELLULOSE ACETATE..." plus petite sur mobile */
  body .product-prices::after {
    font-size: 9px;
    letter-spacing: 0.3em;
    margin-top: 0.6em;
  }

  /* === Add to cart row : aligné horizontal proprement (PAS sticky) ===
     Sur mobile, Bootstrap col-12 empile en vertical. On force flex nowrap
     pour garder qty + add-to-cart + wishlist sur une seule ligne, mais
     SANS position:fixed (le bloc reste dans le flux normal). */
  body .product-add-to-cart > .row,
  body .product-add-to-cart .row.product-quantity {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.5em;
    margin: 0 !important;
  }

  body .product-add-to-cart .row > .col,
  body .product-add-to-cart .row > [class*="col-"],
  body .product-add-to-cart .col-add-qty,
  body .product-add-to-cart .col-add-btn,
  body .product-add-to-cart .col-add-wishlist {
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  /* Bouton add-to-cart prend tout l'espace restant */
  body .product-add-to-cart .col-add-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Qty box compacte */
  body .product-add-to-cart .qty,
  body .product-add-to-cart .input-group {
    width: 64px !important;
    height: 44px !important;
  }
  body .product-add-to-cart .qty input,
  body .product-add-to-cart input[name="qty"] {
    width: 64px !important;
    height: 44px !important;
    border-radius: 4px !important;
    border: 1px solid var(--line) !important;
    text-align: center !important;
    background: var(--white) !important;
  }
  /* Cache spinners up/down de Touchspin (cassent l'alignement) */
  body .product-add-to-cart .bootstrap-touchspin-up,
  body .product-add-to-cart .bootstrap-touchspin-down,
  body .product-add-to-cart .input-group-btn-vertical,
  body .product-add-to-cart .input-group-btn {
    display: none !important;
  }

  /* Add to cart : pleine largeur, 44px haut */
  body .product-add-to-cart .add {
    width: 100% !important;
    margin: 0 !important;
  }
  body .product-add-to-cart .add-to-cart {
    width: 100% !important;
    height: 44px !important;
    padding: 0 1em !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4em;
  }

  /* Wishlist heart : circulaire 44px */
  body .product-add-to-cart .col-add-wishlist > * {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background-color: var(--white) !important;
    color: var(--ink) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sidebar en fin de page sur mobile */
  body #right-column,
  body .product-right-column {
    margin-top: 2em;
  }

  /* Onglets plus compacts */
  body .tabs .nav-tabs .nav-link {
    padding: 0.8em 0;
    margin-right: 1em;
    font-size: 10px;
    letter-spacing: 0.28em;
  }

  /* Breadcrumb plus discret sur mobile */
  body .breadcrumb {
    font-size: 10px;
    padding: 0.6em 0;
  }
}

/* Très petit mobile (< 576px) : ajustements supplémentaires */
@media (max-width: 575.98px) {
  body .product-information .h1,
  body .product-detail-name,
  body .product-information h1,
  body .product__product-name {
    font-size: 1.8rem;
  }
  body .product-prices .current-price,
  body .current-price span.price {
    font-size: 1.5rem;
  }
}


/* ===========================================================================
   19. HOME HERO BANNER — version "C — Confidence" (sobre)
   ----------------------------------------------------------------------------
   Refonte assumée : moins de gold (mention rare en signature uniquement),
   plus d'italique doré, plus de ✦. Le luxe vient du blanc, de la typo
   généreuse, du Cormorant calme. Inspiration : Buly 1803, Le Labo.
   ========================================================================= */

.mcd-hero {
  background-color: var(--cream-light);
  padding: 5em 0 4em;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--line);
}

.mcd-hero__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5em;
}

/* === Eyebrow encre soft (pas doré) — "French Riviera · since 1980" === */
.mcd-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.6em;
}

/* === Titre Cormorant calme — sans italique gold === */
.mcd-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 1.6em;
}

/* === Séparateur : simple trait fin, pas de ✦ === */
.mcd-hero__divider {
  width: 36px;
  height: 1px;
  background-color: var(--ink);
  opacity: 0.4;
  margin: 0 auto 2.4em;
}

/* === 3 piliers : tout en encre, plus discrets === */
.mcd-hero__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  align-items: start;
}
.mcd-hero__pillar {
  position: relative;
  padding: 0 0.5em;
}
/* Séparateur vertical entre piliers : ligne très discrète */
.mcd-hero__pillar + .mcd-hero__pillar::before {
  content: '';
  position: absolute;
  left: -1em;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background-color: var(--line);
}
.mcd-hero__pillar-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.45em;
}
/* Sub-text en Jost normal, ink-soft (PAS italique, PAS doré) */
.mcd-hero__pillar-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* === Responsive : mobile = piliers en colonne === */
@media (max-width: 767px) {
  .mcd-hero {
    padding: 2.6em 0 2.2em;
  }
  .mcd-hero__eyebrow {
    font-size: 10px;
    letter-spacing: 0.28em;
    margin-bottom: 1em;
  }
  .mcd-hero__title {
    font-size: 1.35rem;
    margin-bottom: 1em;
  }
  .mcd-hero__divider {
    margin-bottom: 1.4em;
    width: 28px;
  }
  .mcd-hero__pillars {
    grid-template-columns: 1fr;
    gap: 1.2em;
  }
  /* Séparateur horizontal entre piliers en mobile */
  .mcd-hero__pillar + .mcd-hero__pillar::before {
    left: 35%;
    right: 35%;
    top: -0.6em;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}


/* ===========================================================================
   20. CUSTOM CSS PROD — repris du site mcdavidian.com
   ----------------------------------------------------------------------------
   Intégration des règles custom qui sont déjà en place en prod, pour aligner
   l'apparence dev/prod et conserver les ajustements UX du site live.
   ========================================================================= */

/* ----- Logos transporteurs : taille raisonnable ----- */
.carrier-hasLogo img {
  max-width: 70px !important;
}

/* ----- Bouton burger menu mobile plus visible ----- */
#mobile-header .m-nav-btn > i {
  font-size: 2rem !important;
}

/* ----- Petite respiration sur les images fluide/thumbnails ----- */
.img-fluid,
.img-thumbnail {
  padding-top: 10px;
}

/* ----- Alignement vertical des éléments du header ----- */
#ps-shoppingcart-wrapper,
#header-user-btn,
.cbp-hrmenu .cbp-menu-column {
  align-self: center;
}

/* ----- Liens dans éditeur de texte/description : bleu souligné ----- */
.elementor-text-editor a,
#description a {
  color: blue !important;
  text-decoration: underline;
}

/* ----- Menu mobile : icônes plus grandes ----- */
.mobile-menu__tab-icon--img {
  max-height: 5rem;
}

/* ----- Logos paiement bloc gauche : espace en bas ----- */
.ps_checkout.payment-method-logo-block.left {
  padding-bottom: 3em;
}

/* ----- Mobile : padding sur block-title ----- */
@media (max-width: 767px) {
  #wrapper .block-title {
    padding-top: 3em;
  }
}

/* ----- Tables centrées ----- */
tbody {
  text-align: center;
}

/* ----- Cacher infos additionnelles reviews ETS ----- */
.ets-rv-product-comments-additional-info {
  display: none;
}

/* ----- Cacher sélecteur langue dans le menu mobile ----- */
.d-inline-block.mobile-menu__language-selector.mr-4 {
  display: none !important;
}

/* ----- Bouton "Add to cart" : texte centré ----- */
.add-to-cart {
  text-align: center !important;
}

/* ----- Description courte un peu plus grande ----- */
.product-description-short.text-muted {
  font-size: 1.1rem;
}

/* ----- Tarteaucitron (cookies icon) ----- */
#tarteaucitronIcon {
  position: fixed;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  display: none !important; /* caché complètement */
}
#tarteaucitronIcon.tarteaucitronIconBottomRight {
  left: 20px !important;
  right: auto !important;
}

/* ----- Bouton expand sur l'image fiche produit caché -----
   (Iqit l'utilisait pour ouvrir un modal zoom, prod l'a caché) */
.product-cover .expander {
  display: none !important;
}


/* ============================================
   FIX : REFERENCE et PRIX toujours sur lignes séparées
   ============================================
   Structure réelle Iqit Warehouse :
     .product-prices (flex container)
       └ .product-reference   ← s'aligne avec le prix sur certaines largeurs
       └ div > .current-price
   On force la référence à prendre 100% de la ligne flex pour que
   le prix passe à la ligne suivante. Aucun media query : ça marche
   à toutes largeurs (mobile stacke déjà via flex-wrap). */
body .product-prices > .product-reference,
body .product-prices .product-reference,
body .product-prices > .product-manufacturer {
  flex: 0 0 100% !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 0.5em !important;
  order: -1 !important;
}

/* ============================================
   BLOC D'ACHAT — fiche produit (palette ORANGE brique prod)
   ============================================
   Décalage assumé avec la DA Riviera : les CTA passent en orange brique
   #C04E2A (un cran plus profond que #D85A30, dialogue mieux avec le cream).
   Le reste du site garde encre/cream/or. */

/* ----- Bouton Add to cart ----- */
.btn-primary.add-to-cart,
button.add-to-cart {
  background-color: #C04E2A !important;
  border-color: #C04E2A !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  height: 48px !important;
  box-sizing: border-box !important;
}
.btn-primary.add-to-cart:hover,
.btn-primary.add-to-cart:focus,
button.add-to-cart:hover {
  background-color: #8A3818 !important;
  border-color: #8A3818 !important;
  color: #ffffff !important;
}

/* ----- Sélecteur quantité (fiche produit uniquement) ----- */
.product-quantity .bootstrap-touchspin {
  height: 48px !important;
  border: 1px solid #C04E2A !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: stretch !important;
}
.product-quantity .bootstrap-touchspin input#quantity_wanted {
  border: none !important;
  border-radius: 0 !important;
  color: #8A3818 !important;
  height: 100% !important;
  box-shadow: none !important;
  text-align: center !important;
}
.product-quantity .bootstrap-touchspin .input-group-btn-vertical {
  border: none !important;
  border-left: 1px solid #E08660 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.product-quantity .bootstrap-touchspin .btn-touchspin {
  background-color: #FAECE7 !important;
  color: #C04E2A !important;
  border: none !important;
  border-radius: 0 !important;
  flex: 1 !important;
  padding: 0 10px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-quantity .bootstrap-touchspin .btn-touchspin:hover {
  background-color: #F5C4B3 !important;
  color: #8A3818 !important;
}

/* ----- Bouton coeur favoris (wishlist) ----- */
.btn-iqitwishlist-add,
button.js-iqitwishlist-add {
  background-color: #FAECE7 !important;
  border: 1px solid #E08660 !important;
  border-radius: 8px !important;
  color: #C04E2A !important;
  height: 48px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-iqitwishlist-add:hover,
button.js-iqitwishlist-add:hover {
  background-color: #F5C4B3 !important;
  color: #8A3818 !important;
}


/* ============================================
   PROPAGATION ORANGE BRIQUE — tunnel d'achat
   ============================================
   Cohérence du CTA orange sur tout le parcours d'achat :
   popup post-ajout, panier, étapes checkout, confirmation paiement.
   Les boutons "Continue shopping" / "Back" gardent le sober encre
   (action de recul, pas de progression). */

/* === Popup post-add-to-cart (#blockcart-modal) === */
body #blockcart-modal .btn-primary,
body .blockcart-modal .btn-primary,
body .blockcart-modal-footer .btn-primary,
body .modal-footer .btn-primary,
body .cart-content-btn .btn-primary,
/* === Panier (sélecteurs ultra-spécifiques pour battre la section 14) === */
html body .cart-detailed-actions a.btn-primary,
html body .cart-detailed-actions .btn.btn-primary,
html body .cart-detailed-actions a.btn.btn-primary,
html body .cart-detailed-actions a.btn-primary.btn-lg,
html body .cart-detailed-actions a.btn-block.btn-primary,
html body div.cart-detailed-actions a,
html body div.cart-detailed-actions .btn,
html body .cart-grid .cart-detailed-actions a,
html body .cart-grid-right .cart-detailed-actions a,
html body #main .cart-detailed-actions a.btn,
body .cart-summary .btn-primary,
body a.btn-cart-checkout,
body a.checkout-cart-btn,
body #js-checkout-button,
/* === Étapes checkout (Continue) === */
body .checkout-step .btn-primary,
body .checkout-step button.continue,
body .checkout-step .continue.btn-primary,
body #checkout-personal-information-step .continue,
body #checkout-addresses-step .continue,
body #checkout-delivery-step .continue,
body #checkout-payment-step .btn-primary,
body button[name="confirm-addresses"],
body button[name="confirmDeliveryOption"],
body #payment-confirmation .btn-primary,
body #payment-confirmation button[type="submit"] {
  background-color: #C04E2A !important;
  background-image: none !important;
  border: 1px solid #C04E2A !important;
  color: #ffffff !important;
}

body #blockcart-modal .btn-primary:hover,
body .blockcart-modal .btn-primary:hover,
body .blockcart-modal-footer .btn-primary:hover,
body .modal-footer .btn-primary:hover,
body .cart-content-btn .btn-primary:hover,
html body .cart-detailed-actions a.btn-primary:hover,
html body .cart-detailed-actions .btn.btn-primary:hover,
html body .cart-detailed-actions a.btn.btn-primary:hover,
html body div.cart-detailed-actions a:hover,
html body div.cart-detailed-actions .btn:hover,
html body .cart-grid .cart-detailed-actions a:hover,
html body .cart-grid-right .cart-detailed-actions a:hover,
html body #main .cart-detailed-actions a.btn:hover,
body .cart-summary .btn-primary:hover,
body a.btn-cart-checkout:hover,
body a.checkout-cart-btn:hover,
body #js-checkout-button:hover,
body .checkout-step .btn-primary:hover,
body .checkout-step button.continue:hover,
body .checkout-step .continue.btn-primary:hover,
body #checkout-personal-information-step .continue:hover,
body #checkout-addresses-step .continue:hover,
body #checkout-delivery-step .continue:hover,
body #checkout-payment-step .btn-primary:hover,
body button[name="confirm-addresses"]:hover,
body button[name="confirmDeliveryOption"]:hover,
body #payment-confirmation .btn-primary:hover,
body #payment-confirmation button[type="submit"]:hover {
  background-color: #8A3818 !important;
  border-color: #8A3818 !important;
  color: #ffffff !important;
}


/* ============================================
   PAGE CATÉGORIE / LISTING — DA Riviera
   ============================================
   Cible : .block-facets (filtres), .products-sort (tri),
   .page-list (pagination), .category-description.
   Objectif : aligner ces zones sur la sobriété de la fiche produit
   (eyebrow doré, filets fins, encre, pas de Bootstrap brut). */

/* ----- Titre de catégorie : déjà Cormorant via le global, on ajuste l'air ----- */
body #js-product-list-header,
body .block-category .category-description {
  margin-bottom: 1.4em;
}

/* ----- Sidebar filtres : conteneur ----- */
body .block-facets,
body #search_filters_wrapper .block-facets {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
body #search_filters {
  padding: 0;
}

/* Chaque groupe de filtre = séparé par un filet fin */
body #search_filters .facet {
  border-bottom: 1px solid var(--line);
  padding: 1.1em 0;
  margin: 0;
}
body #search_filters .facet:last-child {
  border-bottom: none;
}

/* Titre du filtre → eyebrow doré (cohérent avec brand/reference fiche produit) */
body .facet .facet-title,
body .facet h4.facet-title,
body .facet .facet-title span {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9em;
}

/* Labels de filtre (texte) */
body .facet .facet-label,
body .facet .facet-label a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
body .facet .facet-label:hover,
body .facet .facet-label a:hover {
  color: var(--ink);
}

/* Pastilles couleur : carrées nettes, bordure fine, sélection dorée */
body .facet .facet_color .color.texture,
body .facet ul.facet-type-checkbox .color {
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
body .facet .color.texture:hover {
  transform: scale(1.08);
  border-color: var(--gold);
}
body .facet input:checked + .color.texture,
body .facet .custom-checkbox input:checked ~ .color {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

/* === Repli de la liste des couleurs (Show more) ===
   Quand le module ajoute .mcd-collapsed sur ul.facet_color, on masque les
   pastilles au-delà de la 30e (COLOR_VISIBLE dans colorswap.js — garder
   nth-child(n+31) en phase). Bouton « Show more » brandé. */
body ul.facet_color.mcd-collapsed > li:nth-child(n+31) {
  display: none !important;
}
body .mcd-color-more {
  display: inline-block;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  padding: 0.7em 0 0.2em;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
body .mcd-color-more:hover { color: var(--ink); }

/* === Désactivation du slide 2e image quand un filtre couleur est actif ===
   Le module ajoute .mcd-no-slide sur la miniature quand son image est forcée
   sur une couleur filtrée : on neutralise alors le glissement vertical Iqit
   pour éviter un survol incohérent (sinon il slide vers une autre couleur). */
body .js-product-miniature.mcd-no-slide .thumbnail-container:hover .product-thumbnail-first,
body .js-product-miniature.mcd-no-slide .thumbnail-container:hover .product-thumbnail-second {
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

/* Masquer le facet prix NATIF de ps (slider noUiSlider cassé sur ce thème) dès
   le 1er rendu, sans attendre le JS → pas de clignotement. Le module injecte
   son propre bloc .mcd-price-aside à la place. :has() supporté navigateurs récents. */
body aside.facet:has(.faceted-slider) { display: none !important; }

/* === Filtre prix autonome (champs Min/Max injectés par mcdcolorswap) ===
   Le slider noUiSlider natif ne s'initialise pas sur ce thème ; le module
   injecte deux champs Min/Max à la place. Style brandé Riviera. */
body .faceted-slider { padding: 0.2em 0 0; list-style: none; }
body #search_filters .faceted-slider li { list-style: none; padding: 0; margin: 0; }

body .mcd-price-filter { margin-top: 0.2em; }
body .mcd-price-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
body .mcd-price-field {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0 0.5em;
  transition: border-color var(--dur-fast) var(--ease);
  margin: 0;
}
body .mcd-price-field:focus-within { border-color: var(--gold); }
body .mcd-price-unit {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.7;
}
body .mcd-price-filter input[type="number"] {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  padding: 0.5em 0.3em;
  box-shadow: none;
  -moz-appearance: textfield;
}
body .mcd-price-filter input[type="number"]::-webkit-outer-spin-button,
body .mcd-price-filter input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body .mcd-price-filter input:focus { outline: none; }
body .mcd-price-sep { color: var(--line); }
body .mcd-price-apply {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.55em 0.9em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
body .mcd-price-apply:hover {
  background: transparent;
  color: var(--ink);
}

/* "Clear all" : redevient un lien discret (corrige l'effet de bord v64).
   Sélecteurs sur-spécifiés (tag + 3 classes) pour battre `body .btn.btn-secondary`
   qui est lui aussi en !important depuis la v64. */
body button.btn.btn-secondary.js-search-filters-clear-all,
body a.btn.btn-secondary.js-search-filters-clear-all,
body .btn-secondary.js-search-filters-clear-all,
body #js-active-search-filters .js-search-filters-clear-all,
body .js-search-filters-clear-all {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.4em 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
body button.btn.btn-secondary.js-search-filters-clear-all:hover,
body a.btn.btn-secondary.js-search-filters-clear-all:hover,
body .js-search-filters-clear-all:hover {
  color: var(--gold) !important;
  background: transparent !important;
}
body .js-search-filters-clear-all i {
  color: inherit !important;
  margin-right: 0.4em;
}

/* ----- Barre "Active filters" : chips légères (pas de gros blocs noirs) ----- */
body .active_filters,
body #js-active-search-filters {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 1em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
}
/* Label "Active filters" → eyebrow doré */
body .active-filter-title {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
body #active-search-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
}
body .filter-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .filter-block {
  list-style: none;
  margin: 0;
}
/* Chaque tag de filtre actif = chip crème, bordure fine, ✕ doré */
body .filter-block .js-search-link,
body .filter-block a.btn,
body .filter-block a.js-search-link.btn-secondary,
body #js-active-search-filters .filter-block a {
  background: var(--cream-light) !important;
  background-color: var(--cream-light) !important;
  border: 1px solid var(--line) !important;
  border-radius: 100px !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.45em 0.95em !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease) !important;
}
body .filter-block .js-search-link:hover,
body .filter-block a.btn:hover,
body #js-active-search-filters .filter-block a:hover {
  border-color: var(--gold) !important;
  color: var(--ink) !important;
  background: var(--cream-light) !important;
}
body .filter-block .js-search-link i,
body #js-active-search-filters .filter-block a i {
  color: var(--gold) !important;
  margin-right: 0.4em;
  font-size: 10px;
}

/* ----- Barre de tri / nb par page (dropdowns) ----- */
body .products-sort-nb-dropdown .select-title,
body .products-sort-order .select-title,
body .products-nb-per-page .select-title {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 0.6em 1em;
}
body .products-sort-nb-dropdown .select-title:hover {
  border-color: var(--gold);
}
body .products-sort-nb-dropdown .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: var(--white);
}
body .products-sort-nb-dropdown .dropdown-item,
body .products-sort-nb-dropdown .select-list {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
body .products-sort-nb-dropdown .dropdown-item:hover,
body .products-sort-nb-dropdown .select-list:hover {
  background: var(--cream);
  color: var(--ink);
}

/* ----- Pagination : minimaliste ----- */
body nav.pagination,
body .pagination {
  border: none;
  background: transparent;
  margin: 2.5em 0 1em;
}
body .pagination .page-list {
  display: flex;
  justify-content: center;
  gap: 0.3em;
  padding: 0;
  margin: 0;
}
body .pagination .page-list li {
  list-style: none;
}
body .pagination .page-list li a,
body .pagination .page-list li span {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.5em 0.85em;
  min-width: 2.4em;
  text-align: center;
  transition: color var(--dur-fast) var(--ease);
}
body .pagination .page-list li a:hover {
  color: var(--gold);
  background: transparent;
}
/* Page courante : soulignée or */
body .pagination .page-list li.current a,
body .pagination .page-list li.current span {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--gold);
}
/* Flèches précédent/suivant */
body .pagination .page-list li a[rel="prev"],
body .pagination .page-list li a[rel="next"] {
  color: var(--ink);
}
body .pagination .page-list li .spacer {
  color: var(--line);
}

/* ----- Description de catégorie (bas de page) ----- */
body .category-description,
body .category-description-bottom {
  max-width: 760px;
  margin: 2em auto 0;
}
body .category-description hr {
  border: none;
  border-top: 1px solid var(--line);
  max-width: 60px;
  margin: 0 auto 1.6em;
}
body .category-description .rte-content,
body .category-description p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}


/* ============================================
   BOUTON FLOTTANT WHATSAPP
   ============================================ */

/* DESKTOP */
.asagiSabit.whatsappBlock {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 9999;
}
.asagiSabit.whatsappBlock a img[src*="whatsapp"] {
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.asagiSabit.whatsappBlock a:hover img[src*="whatsapp"] {
  transform: scale(1.1);
}

/* MOBILE */
@media (max-width: 768px) {
  /* Remonter au-dessus de la barre "Add to cart" */
  .asagiSabit.whatsappBlock {
    bottom: 75px !important;
    right: 15px !important;
  }
  /* Cacher la photo de profil qui chevauche tout */
  .asagiSabit.whatsappBlock img:not([src*="whatsapp"]) {
    display: none !important;
  }
  /* Cacher aussi le point vert online sur mobile */
  .asagiSabit.whatsappBlock .kutucuklar,
  .asagiSabit.whatsappBlock #kutu {
    display: none !important;
  }
}


/* ===========================================================================
   21. OVERRIDE POLICE DE TITRE DU THÈME PROD
   ===========================================================================
   Le thème prod (warehouse) impose 'Playfair Display' sur les titres via la
   config iqitthemeeditor (8 sélecteurs, dont `#content-wrapper .page-title`
   en spécificité id qui battait notre Cormorant). On force la police d'affichage
   Riviera (Cormorant Garamond) partout où le thème met Playfair.
   NB : sans effet sur le dev (pas de Playfair), c'est une sécurité prod. */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3,
html body .h4, html body .h5, html body .h6,
html body #content-wrapper .page-title,
html body .product-detail-name,
html body .product-information .h1,
html body .products-section-title,
html body section.checkout-step.-current .step-title,
html body#checkout section.checkout-step.-current .step-title {
  font-family: var(--font-display) !important;
}

/* Le menu principal, lui, reste en sans-serif (Jost) comme sur le dev —
   le thème prod le passait aussi en Playfair. */
html body .cbp-hrmenu > ul > li a,
html body #main-menu a,
html body .menu-content a {
  font-family: var(--font-body) !important;
}