/** Shopify CDN: Minification failed

Line 11:14 Expected ")" to end URL token
Line 2348:38 Unexpected "{"

**/
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  src: url({{ 'Inter' | font_url }}) format('woff2');
  font-display: swap;
}

@media screen and (min-width: 990px) {
    .header:not(.drawer-menu).page-width {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Disable all focus-visible black borders */
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Hide Dawn's native variant picker (keep it in DOM for JS + add-to-cart to work) */
.native-variant-picker { 
  display: none !important; 
}

[hidden] { 
  display: none !important; 
}

.cart-reassurance:not(.is-ready) .cart-reassurance__slide:not(:first-child){
  display:none;
}

.text-arrow {
  font-family: system-ui;
}

.drawer {
  /* background-color: transparent !important; */
}

.button, .button-label, .shopify-challenge__button, .customer button {
  letter-spacing: -0.01em !important;
}

body {
  letter-spacing: -0.01em !important;
  overflow-x: hidden !important;
}

/* Prio 1 (DS) — letter-spacing négatif sur le texte courant (-0.01em).
   Le body ci-dessus est hérité par tout le texte sans tracking propre
   (header inline menu, icons, mega menu, prix, etc.). On neutralise ici
   les classes Dawn qui redéclarent un tracking POSITIF et échapperaient
   donc à l'héritage (prix, captions, sous-titres, champs de formulaire). */
.text-body,
.caption,
.caption-large,
.caption-with-letter-spacing,
.caption-with-letter-spacing--medium,
.caption-with-letter-spacing--large,
.subtitle,
.subtitle--small,
.subtitle--medium,
.price,
.price--large,
.field__input,
.form__label,
.select__select,
.customer .field input,
.customer select {
  letter-spacing: -0.01em !important;
}

/* =========================================================
   PRIX PRINCIPAL PRODUIT (au-dessus du titre, page produit)
   weight 500, letter-spacing -4%, noir 80%.
   Décliné pour le prix barré (compare-at <s>) : plus léger,
   noir 40%, weight 400 — barré conservé.
   ========================================================= */
.product__info-wrapper .price .price-item {
  font-weight: 500;
  letter-spacing: -0.04em !important;
  color: rgba(0, 0, 0, 0.8);
}

.product__info-wrapper .price s.price-item {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.4rem;
}

/* Aligne verticalement (baseline) le prix barré et le prix soldé, écart 1rem.
   Les <span.visually-hidden> sont en position:absolute → ignorés du flux flex. */
.product__info-wrapper .price--on-sale .price__sale {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}

.product__info-wrapper .price--on-sale .price__sale .price-item,
.search-modal__product-card .price--on-sale .price__sale .price-item  {
  margin: 0;
}

/* Centre verticalement le badge avec les prix (au lieu du vertical-align: top
   de .price > *). */
.product__info-wrapper .price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Espace (1rem) entre le prix et le badge "Sale" / "Sold out" à sa droite */
.product__info-wrapper .price__badge-sale,
.product__info-wrapper .price__badge-sold-out {
  margin-left: 1rem;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative !important;
}

.header__icon, .header__icon--cart .icon {
    height: 4.4rem;
    width: auto;
    padding: 0;
}

.header__icons {
    padding-right: 0;
    column-gap: 20px;
    z-index: 10;
}

.header__inline-menu {
    z-index: 10;
}

@media screen and (min-width: 990px) {
  /* Anchor the nav menu at 35% of the screen width from the left (responsive),
     and push the icons to the far right. The auto margin on the icons absorbs
     the free space, so the menu stays exactly at 35vw (no double-count with the
     header's space-between). !important: the header rules otherwise win.
     Mega menu unaffected — its panel is positioned relative to .header. */
  .header__inline-menu {
    margin-left: calc((100vw - 35vw) - (35px)) !important;
  }
  .header__icons {
    margin-left: auto !important;
  }
}

.header__icon--cart {
    margin-right: 0;
}

.product__info-wrapper .product__tax {
  display: none;
}

.product__info-container {
  /* border-bottom: .5px solid black; */
}

.card__media .media img {
  padding: 0rem;
}

.cart-drawer__reco .card__media .media img {
  padding: 1rem;
}

.cart-drawer__reco .media {
  margin-top: 2rem;
}

.card__heading,
.card-information .price {
  font-size: 1.2rem;
  letter-spacing: -.05px;
  font-weight: 400;
  line-height: 1;
}

.card__information {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* .slider-mobile-gutter {
  padding: 0 1rem;
} */

.slider-mobile-gutter .slider-buttons {
  display: none;
}

.collection--full-width slider-component:not(.slider-component-desktop) {
  padding: 0 1rem !important;
}

/* =========================================================
   PRODUCT CARDS — global look
   (carousels, collection pages, search, related, etc.)
   ========================================================= */

/* The whole card becomes one grey block (#f3f3f3) with a thin permanent
   border, instead of the grey sitting only behind the image. */
.product-card-wrapper .card.card--standard {
  background-color: #f3f3f3;
  border: 1px solid #eaeaea;
  border-radius: var(--border-radius);
  overflow: hidden;
  /* Inset the image so it's framed/centred within the card with even grey
     margins (aligned with the text below) — more balanced than edge-to-edge. */
  --image-padding: 20px;
}

/* Merge the image wrapper into the card (no separate background/border). */
.product-card-wrapper .card--standard .card__inner {
  background: transparent !important;
  border: 0 !important;
}
.product-card-wrapper .card--standard .card__inner:after {
  display: none !important; /* drop the inner hover-border overlay */
}
.product-card-wrapper .card--standard .card__media {
  border-radius: 0 !important; /* image flush; the card's radius clips corners */
}

/* Text area shares the grey, with breathing room. The extra bottom padding
   also makes the cards a touch taller. (Main content only — the ">" avoids the
   badge/quick-add overlay that sits inside the image.) */
.product-card-wrapper .card--standard > .card__content {
  background: transparent;
  /* Title/price sit close to the bottom (10px). */
  padding: 0px 10px 0px;
}

/* Title + price on the same line: title left (wraps by words), price right.
   CSS grid (1fr / auto) instead of flex-shrink, which — combined with the
   theme's word-break: break-word — was collapsing the title to one letter
   per line and pushing the price out of the card. */
.product-card-wrapper .card--standard > .card__content .card__information {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; /* titre aligne sur la DERNIERE ligne du prix (prix de base,
                       quand le prix barre est empile au-dessus) */
  column-gap: 8px;
}
.product-card-wrapper .card--standard > .card__content .card__information > .card__heading {
  min-width: 0;
  margin: 0;
}
.product-card-wrapper .card--standard > .card__content .card__information > .card-information {
  min-width: 0;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* "from x€" price: softer colour (#00000099) and no capital letter. */
.product-card-wrapper .price,
.product-card-wrapper .price .price-item {
  color: #00000099 !important;
  margin:0;
  font-size: 1.2rem;
}
.product-card-wrapper .price-item {
  text-transform: lowercase;
}

@media screen and (min-width: 990px) {
  /* Hover: keep a border cue on the whole card... */
  .product-card-wrapper:hover .card.card--standard {
    border-color: #000;
  }
  /* Cross-fade base -> secondary image with NO flash: the previous setup faded
     both images, so mid-transition they were each ~50% opaque and the grey card
     showed through (the "clip"). Instead, keep the base image fully opaque and
     just fade the secondary one in on top. transform: none kills Dawn's
     scale(1.03) zoom too. */
  /* Grey-backed cross-fade. Giving both images the card grey makes them fully
     opaque (the grey fills transparent / letterboxed areas), so:
     - transparent zones stay grey throughout (no flicker), and
     - the secondary image, once at full opacity, completely covers the base
       image — no residual overlap at the end, whatever the image sizes. */
  .product-card-wrapper .media.media--hover-effect > img {
    transform: none !important;
    background-color: #f3f3f3;
  }
  .product-card-wrapper .media.media--hover-effect > img:first-child {
    opacity: 1 !important;
  }
  .product-card-wrapper .media.media--hover-effect > img + img {
    opacity: 0;
    transition: opacity 0.15s ease !important;
  }
  .product-card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
  }
  /* Image secondaire (hover) : full-bleed dans la BOÎTE MÉDIA (bord à bord,
     quitte à rogner G/D) — contrairement à l'image principale qui garde son
     cadre gris. On fait déborder l'image des 20px de marge de .card__media (via
     insets négatifs basés sur --image-padding) en levant l'overflow:hidden
     intermédiaire (.card__media + .media). .card__inner (overflow:hidden) clippe
     l'image dans la zone média : elle NE couvre PAS le titre/prix, qui restent
     sur le fond gris en dessous. */
  .product-card-wrapper .card .card__inner .card__media,
  .product-card-wrapper .media.media--hover-effect {
    overflow: visible;
  }
  .product-card-wrapper .media.media--hover-effect > img + img {
    padding: 0;
    /* La règle .product-card-wrapper .card__media .media img (custom.css ~5926)
       force object-fit:contain !important sur TOUTES les images de card (visuel
       entier, letterboxé). Pour l'image de hover on rétablit cover en !important
       (spécificité 0,3,2 > 0,3,1) afin qu'elle remplisse la zone média. */
    object-fit: cover !important;
    object-position: center center;
    top: calc(-1 * var(--image-padding));
    left: calc(-1 * var(--image-padding));
    width: calc(100% + 2 * var(--image-padding));
    height: calc(100% + 2 * var(--image-padding));
    /* base.css met max-width:100% sur .media > * (0,3,0), ce qui plafonnait la
       largeur : l'image se décalait à gauche sans s'élargir à droite. */
    max-width: none;
  }
}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */
@media screen and (min-width: 990px) {
  /* Push the product content down so the price isn't hidden behind the
     overlaying header when it turns white on hover. */
  body.template-product .product {
    /* padding-top: 4rem; */
  }
}



/* =========================================================
   SIDE CART — remove cross (now lives in the totals cell)
   ========================================================= */
/* Dawn sets pointer-events:none on .cart-item__totals (it only held the
   non-interactive price). Re-enable clicks now that the cross is there. */
.cart-drawer .cart-item__totals cart-remove-button,
.cart-drawer .cart-item__totals cart-remove-button .button {
  pointer-events: auto;
}
/* Flush the cross to the right (same right spacing as the price) and size the
   close icon — Dawn only sized .icon-remove. */
.cart-drawer .cart-item__totals cart-remove-button {
  margin: 0;
}
.cart-drawer .cart-item__totals cart-remove-button .button {
  min-width: 0;
  min-height: 2.4rem;
  padding: 0;
  margin: 0 -8px 0 0; /* pull the cross closer to the drawer edge (15px padding) */
}
.cart-drawer .cart-item__totals cart-remove-button svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* =========================================================
   DESIGN SYSTEM — Lot A : poids & emphase
   Tout en weight 400 (l'emphase passe par l'opacité, jamais le gras).
   Les titres "display" 130px gardent 500 via leurs sections.
   Headings : 400 via le réglage de police (type_header_font: inter_n4).
   Ci-dessous : on neutralise les rares gras codés en dur.
   ========================================================= */
.link-with-icon,
.font-body-bold,
.quantity__input,
.button,
button.button,
.shopify-payment-button__button,
.search-modal__product-title,
.search-modal__article-title,
.predictive-search__product-title,
.predictive-search__article-title,
.predictive-search__item-heading,
.mega-menu__link--level-2 {
  font-weight: 400 !important;
}

/* =========================================================
   DESIGN SYSTEM — titres
   ========================================================= */
/* Weight 500 (taille conservée) : side cart, page collection, article blog,
   compteur produits. !important car les CSS panier/facets se chargent après. */
.drawer__heading,
.collection-hero__title,
.article-template__title,
.product-count__text {
  font-weight: 500 !important;
}
/* Tracking sur les titres "Cart (x)" et "Products (x)". */
.drawer__heading,
.product-count__text {
  letter-spacing: -0.03em !important;
}

/* =========================================================
   STANDARDISATION DES TITRES DE SECTION (quality matters, FAQ, For design
   enthusiasts, You might also like, Our most-loved art, From the journal, etc.)
   Style "display" identique au titre du "focus on" :
     • poids 500, noir 100% ;
     • MOBILE : 4rem, letter-spacing -0.03em ;
     • DESKTOP : 13rem (130px), letter-spacing -0.07em.
   Inclut les titres a classe dediee ET les titres en .title (scopes a leur
   section pour ne pas toucher les titres de page panier/404/collection). */
.related-products__heading,
.bento-grid__heading,
.main-blog__heading,
.latest-articles__heading,
.collection__title .title,
.section-faq .title,
.title-wrapper-with-link .title,
.search-modal__section-title,
[class*='ai-dual-image-title'] {
  font-weight: 500 !important;
  color: #000 !important;
  font-size: 4rem !important;
  letter-spacing: -0.03em !important; /* mobile */
}
@media screen and (min-width: 990px) {
  .related-products__heading,
  .bento-grid__heading,
  .main-blog__heading,
  .latest-articles__heading,
  .collection__title .title,
  .section-faq .title,
  .title-wrapper-with-link .title,
  .search-modal__section-title,
  [class*='ai-dual-image-title'] {
    font-size: 13rem !important;
    letter-spacing: -0.07em !important; /* desktop, comme focus-on */
  }
}

/* Hide the fit-to-width product title until product-title-size.js has sized it
   on the settled layout (it reveals it via an inline style). Scoped to .js so it
   stays visible without JS. Avoids the visible resize steps on load. */
.js .product__info-wrapper .product__title h1 {
  visibility: hidden;
}

/* =========================================================
   DESIGN SYSTEM — Lot B : texte discret + surfaces
   ========================================================= */
/* Texte discret -> 50% (remplace le compound opacity 0.7 de .light qui
   donnait ~49%). Reste correct sur fond sombre via --color-foreground. */
.light {
  color: rgba(var(--color-foreground), 0.50);
  opacity: 1;
}

/* =========================================================
   DESIGN SYSTEM — Liens & hover
   Pas de soulignement ; l'interaction passe par l'opacite (70 -> 100).
   La fleche -> reste le pattern des liens editoriaux / boutons dedies.
   (Les liens de contenu .rte gardent leur soulignement = affordance.)
   ========================================================= */
.link,
.underlined-link,
.link--text {
  color: rgba(var(--color-foreground), 0.70);
  text-decoration: none;
}
.link:hover,
.underlined-link:hover,
.link--text:hover {
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

/* Roll back the active header menu link to its pre-Lot-B colour: the global
   foreground went to pure black (#000), which the header's mix-blend-mode:
   difference turns white. Pin it back to the old #333. */
.header__active-menu-item {
  color: inherit !important;
  text-decoration: none !important;
}

/* Hide the blog "Journal" display title (130px) until the font is loaded, to
   avoid the FOUT size jump (the fallback font is smaller than Inter at 130px).
   Revealed by a small script in main-blog.liquid; visible without JS. */
.js .main-blog__heading {
  visibility: hidden;
}

/* Green announcement bar must sit BELOW the search overlay when it's open.
   The fullscreen search panel lives inside .section-header, which was only
   elevated to 9999 via a media-scoped :has rule — so off that case the header
   capped the panel below the bar's section (z-index: 60). Elevating the header
   on all viewports is enough to cover the bar; we keep the bar at its normal
   z-index so it isn't briefly dimmed behind the glass overlay during the close
   animation. */
.section-header[data-search-open] {
  z-index: 9999 !important;
}

/* =========================================================
   MOBILE HEADER BEHAVIOR
   ========================================================= */
@media (max-width: 989px) {
  /* Position header fixed */
  .section-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    margin-bottom: 0 !important;
  }

  .section-header,
  .header-wrapper,
  .header {
    overflow: visible !important;
  }

  /* Hide account link on mobile (search is now a fullscreen modal, shown via header icon) */
  .header__icon--account {
    display: none !important;
  }

  /* Consistent padding on header */
  .header {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Force logo to left */
  .header--mobile-center .header__heading,
  .header__heading {
    order: -1;
    margin-right: auto;
    margin-left: 0;
    flex-shrink: 0;
  }

  /* Header drawer (burger menu) - ensure it stays visible */
  header-drawer {
    order: 2;
    margin-left: 15px !important;
    margin-right: 0 !important;
    flex-shrink: 0;
  }

  /* Prevent menu button from overflowing */
  header-drawer button,
  header-drawer .header__icon {
    margin-right: 0 !important;
    padding-right: 0 !important;
    z-index: 50;
  }

  /* Cart positioning */
  .header__icon--cart {
    order: 1;
    margin-right: 0 !important;
    margin-left: 0;
  }

  /* Header icons container */
  .header__icons {
    display: flex;
    align-items: center;
    gap: 0;
    order: 1;
    margin-right: 0;
  }

  /* Cart styling with icon + number */
  .header__icon--cart {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header__icon {
    width: 3.5rem;
  }

  .header__cart-text {
    display: inline-flex !important;
    align-items: center;
    font-size: 1.2rem;
  }

  .header__heading-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }

  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }

  /* Menu ouvert : logo reduit (90px) dans tous les cas. */
  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-logo-wrapper {
    width: 90px !important;
  }
  /* TOUT EN HAUT + menu ouvert, HOMEPAGE UNIQUEMENT : on descend le petit logo
     sous la barre d'annonce (corrige le "trop haut" d'origine, qui etait un cas
     homepage). Hors homepage on ne change PAS le translate -> le logo ne glisse
     plus vers le bas a l'ouverture du menu quand la banner est visible. */
  body.template-index .section-header:not(.scrolled-past-header):has(#Details-menu-drawer-container[open]) .header__heading-logo-wrapper {
    translate: 0 var(--mobe-announcement-height, 0px);
  }
  /* SCROLLE + menu ouvert : on garde la position scrollee (translate 0) pour que
     le logo NE BOUGE PAS verticalement a l'ouverture du menu. */
  .section-header.scrolled-past-header:has(#Details-menu-drawer-container[open]) .header__heading-logo-wrapper {
    translate: 0;
  }
  /* A l'ouverture du menu/recherche : width ET translate animes ENSEMBLE sur la
     meme courbe -> trajectoire diagonale (comme les reductions au scroll/hover).
     Translate hors transition = saut vertical instantane puis reduction -> effet
     "haut puis gauche". Hors homepage-tout-en-haut le translate ne change pas a
     l'ouverture, donc l'animer est sans effet. */
  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-logo-wrapper,
  .section-header:has(.header__search details[open]) .header__heading-logo-wrapper {
    transition: width 0.15s cubic-bezier(.52, 0, .61, .99), translate 0.15s cubic-bezier(.52, 0, .61, .99) !important;
  }

  /* Full width logo at top - MOBILE HOMEPAGE ONLY, NOT ON HOVER */
  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading-link {
    pointer-events: none !important;
  }

  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading-logo-wrapper {
    width: 100% !important;
    max-width: none !important;
    /*translate: 0 4.4rem;*/
  }

  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }

  /* Prevent the original heading box from forcing alignment issues - MOBILE HOMEPAGE ONLY, NOT ON HOVER */
  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading {
    position: relative;
  }

  /* Force small logo on non-homepage pages - MOBILE */
  body:not(.template-index) .section-header:not(.scrolled-past-header) .header__heading-logo-wrapper {
    width: 90px !important;
  }

  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-link {
    position: fixed !important;
    top: 1rem;
    transform: none !important;
    width: calc(100% - 2rem) !important;
    height: auto !important;
    transition: transform .26s ease;
    will-change: transform;
    padding: 0px !important;
  }

  /* Reduced logo when scrolled */
  .header__heading-link {
    position: fixed !important;
    top: 1rem;
    transform: none !important;
    width: calc(100% - 2rem) !important;
    height: auto !important;
    transition: transform .26s ease;
    will-change: transform;
    padding: 0px !important;
  }

  .section-header.scrolled-past-header .header__heading-logo-wrapper {
    width: 90px !important;
    translate: 0;
  }

  body.template-index .header__heading-logo-wrapper {
    transition: width .15s cubic-bezier(.52, 0, .61, .99), translate .15s cubic-bezier(.52, 0, .61, .99) !important;
    translate: 0 calc(4.4rem + var(--mobe-announcement-height, 0px));
  }

  /* Maintient la vitesse 0.15s (agrandissement/retrecissement) dans TOUS les
     etats de scroll sur mobile, comme desktop — sinon le width retombe sur le
     260ms de Dawn une fois .scrolled-past-header ajoute. IMPORTANT : sur mobile
     le translate est porte par le WRAPPER (pas le link comme desktop), donc on
     anime width ET translate ensemble ici, sinon le mouvement vertical se
     desynchronise de la reduction (effet "2 temps" au lieu de diagonal). */
  body.template-index .section-header:not(:has(.header__inline-menu details[open])) .header__heading-logo-wrapper {
    transition: width 0.15s cubic-bezier(.52, 0, .61, .99), translate 0.15s cubic-bezier(.52, 0, .61, .99) !important;
  }

  /* .section-header.scrolled-past-header .header__heading-logo {
    width: 100% !important;
  } */

  /* Transparent header backgrounds */
  .header-wrapper,
  .header-wrapper.gradient {
    isolation: unset !important;
    background: transparent !important;
    background-image: none !important;
  }

  .header {
    background: transparent !important;
    background-image: none !important;
    transition: background 300ms ease;
    position: relative;
  }
  
  /* Add white layer for smooth transition on mobile (same as desktop) */
  .header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 300ms ease; /* Increased from 200ms */
    pointer-events: none;
    z-index: -1;
  }

  /* Tout en haut, le blend "difference" est actif et bascule INSTANTANEMENT
     (mix-blend-mode n'est pas animable). Si le fond blanc se fond encore en
     300ms a ce moment, il reste visible un instant SOUS le difference -> clip
     colore. On force donc le blanc a 0 sans transition des que le difference
     s'applique. Exclu des etats menu/recherche ouverts (qui ont besoin de leur
     propre fond blanc). */
  .section-header:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header::before {
    opacity: 0 !important;
    transition: none !important;
  }

  /* Track scroll direction */
  .section-header {
    transition: all 300ms ease;
  }

  /* AT THE TOP: Apply difference blend mode (not scrolled at all) */
  .section-header:not(.scrolled-past-header) {
    mix-blend-mode: difference !important;
  }

  .section-header:not(.scrolled-past-header) .header__heading-logo {
    filter: none !important;
  }

  .section-header:not(.scrolled-past-header) .header__menu-item,
  .section-header:not(.scrolled-past-header) .header__cart-text {
    color: #fff;
    mix-blend-mode: difference;
  }

  .section-header:not(.scrolled-past-header) .header__icon svg,
  .section-header:not(.scrolled-past-header) .header__icon svg * {
    fill: #fff;
    mix-blend-mode: difference;
  }

  /* SCROLLING DOWN: Difference blend mode - EXCEPT during transition OR leaving */
  .section-header.scrolled-past-header:not(.scrolling-up):not(.is-scrolling-transition):not(.is-scrolling-leaving) {
    mix-blend-mode: difference !important;
  }

  .section-header.scrolled-past-header:not(.scrolling-up):not(.is-scrolling-transition):not(.is-scrolling-leaving) .header__heading-logo {
    filter: none !important;
  }

  .section-header.scrolled-past-header:not(.scrolling-up):not(.is-scrolling-transition):not(.is-scrolling-leaving) .header__menu-item,
  .section-header.scrolled-past-header:not(.scrolling-up):not(.is-scrolling-transition):not(.is-scrolling-leaving) .header__cart-text {
    color: #fff;
    mix-blend-mode: difference;
  }

  .section-header.scrolled-past-header:not(.scrolling-up):not(.is-scrolling-transition):not(.is-scrolling-leaving) .header__icon svg,
  .section-header.scrolled-past-header:not(.scrolling-up):not(.is-scrolling-transition):not(.is-scrolling-leaving) .header__icon svg * {
    fill: #fff;
    mix-blend-mode: difference;
  }

  /* SCROLLING UP, TRANSITIONING, OR LEAVING: Keep blend mode normal */
  .section-header.scrolling-up,
  .section-header.is-scrolling-transition,
  .section-header.is-scrolling-leaving {
    mix-blend-mode: normal !important;
  }

  /* Show white background layer when scrolling up or transitioning (full opacity) */
  .section-header.scrolling-up .header::before,
  .section-header.is-scrolling-transition .header::before {
    opacity: 1;
    transition: opacity 300ms ease; /* Instant on/off, no fade during transition */
  }
  
  /* Fade out white bg when leaving (but blend mode stays normal) */
  .section-header.is-scrolling-leaving .header::before {
    opacity: 0;
    transition: opacity 300ms ease; /* Now we fade out */
  }

  .section-header.scrolling-up .header__heading-logo,
  .section-header.is-scrolling-transition .header__heading-logo,
  .section-header.is-scrolling-leaving .header__heading-logo {
    filter: brightness(0) !important;
    mix-blend-mode: normal !important;
  }

  .section-header.scrolling-up .header__menu-item,
  .section-header.scrolling-up .header__cart-text,
  .section-header.is-scrolling-transition .header__menu-item,
  .section-header.is-scrolling-transition .header__cart-text,
  .section-header.is-scrolling-leaving .header__menu-item,
  .section-header.is-scrolling-leaving .header__cart-text {
    color: #000 !important;
    mix-blend-mode: normal !important;
  }

  .section-header.scrolling-up .header__icon svg,
  .section-header.scrolling-up .header__icon svg *,
  .section-header.is-scrolling-transition .header__icon svg,
  .section-header.is-scrolling-transition .header__icon svg *,
  .section-header.is-scrolling-leaving .header__icon svg,
  .section-header.is-scrolling-leaving .header__icon svg * {
    fill: #000;
    mix-blend-mode: normal !important;
  }

  /* TOUT EN HAUT : le blend "difference" doit toujours revenir, même si une
     classe de direction de scroll (scrolling-up / transition / leaving) persiste
     après un cycle réduction → agrandissement (Dawn ne retire `scrolling-up`
     qu'au prochain scroll vers le bas). Sans ça, le logo full-width agrandi
     restait noir (blend normal) au lieu d'être inversé.
     IMPORTANT : on EXCLUT les panneaux ouverts (menu / recherche / mega) — mêmes
     exclusions que la règle .header::before plus bas. Ces règles sont en
     !important ; sans exclusion elles écrasaient des propriétés du panneau qui
     ne le sont pas (ex. fill:#000 du toggle menu) → croix blanche invisible sur
     le fond blanc du header quand on ouvrait le menu en haut + scrolling-up. */
  .section-header.scrolling-up:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])),
  .section-header.is-scrolling-transition:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])),
  .section-header.is-scrolling-leaving:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) {
    mix-blend-mode: difference !important;
  }
  .section-header.scrolling-up:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__heading-logo,
  .section-header.is-scrolling-transition:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__heading-logo,
  .section-header.is-scrolling-leaving:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__heading-logo {
    filter: none !important;
    mix-blend-mode: difference !important;
  }
  .section-header.scrolling-up:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__menu-item,
  .section-header.scrolling-up:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__cart-text,
  .section-header.is-scrolling-transition:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__menu-item,
  .section-header.is-scrolling-transition:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__cart-text,
  .section-header.is-scrolling-leaving:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__menu-item,
  .section-header.is-scrolling-leaving:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__cart-text {
    color: #fff !important;
    mix-blend-mode: difference !important;
  }
  .section-header.scrolling-up:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__icon svg,
  .section-header.scrolling-up:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__icon svg *,
  .section-header.is-scrolling-transition:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__icon svg,
  .section-header.is-scrolling-transition:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__icon svg *,
  .section-header.is-scrolling-leaving:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__icon svg,
  .section-header.is-scrolling-leaving:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header__icon svg * {
    fill: #fff !important;
    mix-blend-mode: difference !important;
  }
  /* Et pas de fond blanc résiduel tout en haut — SAUF menu/recherche ouverts,
     qui ont besoin de leur fond blanc (le !important d'ici battait sinon leur
     opacity:1 → fond perdu au 2e cycle ouvre-ferme-ouvre, quand scrolling-up
     persiste après la fermeture). */
  .section-header.scrolling-up:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header::before,
  .section-header.is-scrolling-transition:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header::before,
  .section-header.is-scrolling-leaving:not(.scrolled-past-header):not(:has(#Details-menu-drawer-container[open])):not(:has(.header__search details[open])):not(:has(.header__inline-menu details[open])) .header::before {
    opacity: 0 !important;
  }

  .header__icon svg {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }

  .header__icon--cart .cart-count-bubble {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .icon-cart,
  .icon-cart-empty,
  .icon-cart * ,
  .icon-cart-empty *,
  .section-header.scrolling-up .icon-cart,
  .section-header.scrolling-up .icon-cart-empty,
  .section-header.scrolling-up .icon-cart * ,
  .section-header.scrolling-up .icon-cart-empty * {
    fill: none !important;
  }

  .icon-cart path,
  .icon-cart-empty path,
  .section-header.scrolling-up .icon-cart path,
  .section-header.scrolling-up .icon-cart-empty path {
    stroke: currentColor !important;
  }

  .section-header:has(#Details-menu-drawer-container[open]) {
    mix-blend-mode: normal !important;
  }

  /* Fond blanc INSTANTANÉ à l'ouverture du menu (pas de fondu 300ms) : le logo
     bascule instantanément en noir/normal, donc si le blanc se fondait encore
     il restait un instant noir sur fond sombre → léger "clip" pendant le
     rétrécissement. Le blanc immédiat supprime ce clip. */
  .section-header:has(#Details-menu-drawer-container[open]) .header::before {
    opacity: 1;
    transition: none !important;
  }

  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-logo {
    filter: brightness(0) !important;
    mix-blend-mode: normal !important;
  }

  .section-header:has(#Details-menu-drawer-container[open]) .header__menu-item,
  .section-header:has(#Details-menu-drawer-container[open]) .header__cart-text {
    color: #000 !important;
    mix-blend-mode: normal !important;
  }

  .section-header:has(#Details-menu-drawer-container[open]) .header__icon svg,
  .section-header:has(#Details-menu-drawer-container[open]) .header__icon svg * {
    fill: #000;
    mix-blend-mode: normal !important;
  }

  

  .header__icon--menu[aria-expanded=true]:before {
    display: none !important;
  }


}

/* =========================================================
   TOP-LEFT ANCHORED FULL-WIDTH LOGO (grows right + bottom)
   Only when NOT scrolled (not reduced)
   ========================================================= */
@media (min-width: 990px) {
  /* Position header fixed to overlay first section and stay sticky */
  .section-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    margin-bottom: 0 !important;
  }

  /* Ensure nothing clips the overflow */
  .section-header,
  .header-wrapper,
  .header {
    overflow: visible !important;
  }

  /* Keep normal header layout untouched - HOMEPAGE ONLY, NOT ON HOVER */
  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header {
    position: relative;
  }

  /* Anchor the logo link to viewport top-left, overlaying without affecting layout */
  .header__heading-link {
    position: fixed !important;
    top: 0.3rem;
    transform: none !important;
    width: 100vw !important;
    height: auto !important;
    transition: transform 260ms ease, translate 260ms ease;
    will-change: transform, translate;
    translate: 0;
  }

  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading-link {
    /*pointer-events: none !important;*/
    translate: 0 calc(4.4rem + var(--mobe-announcement-height, 0px));
    transition: translate .15s cubic-bezier(.52, 0, .61, .99);
  }

  body.template-index .section-header:not(.scrolled-past-header):hover .header__heading-link {
    /*pointer-events: none !important;*/
    translate: 0 calc(4.4rem + var(--mobe-announcement-height, 0px));
    transition: translate .15s cubic-bezier(.52, 0, .61, .99);
  }

  body.template-index .section-header:not(.scrolled-past-header):has(#Details-menu-drawer-container[open]) .header__heading-link {
    position: fixed !important;
    top: 0.3rem;
    transform: none !important;
    width: 100vw !important;
    height: auto !important;
    transition: transform 260ms ease, translate .15s cubic-bezier(.52, 0, .61, .99);
    will-change: transform, translate;
    translate: 0 var(--mobe-announcement-height, 0px);
  }

  /* Search open on homepage at top: keep logo in its natural vertical position */
  body.template-index .section-header:not(.scrolled-past-header):has(.header__search details[open]) .header__heading-link {
    position: fixed !important;
    top: 0.3rem;
    transform: none !important;
    width: 100vw !important;
    height: auto !important;
    transition: none !important;
    translate: 0 calc(4.4rem + var(--mobe-announcement-height, 0px));
  }

  /* Mega menu open: snap logo position instantly (no vertical animation) */
  body.template-index .section-header:not(.scrolled-past-header):has(.header__inline-menu details[open]) .header__heading-link {
    position: fixed !important;
    top: 0.3rem;
    transform: none !important;
    width: 100vw !important;
    height: auto !important;
    transition: none !important;
    will-change: transform, translate;
    translate: 0 var(--mobe-announcement-height, 0px);
  }

  .section-header:hover .header__heading-link {
    position: fixed !important;
    top: 0.3rem;
    transform: none !important;
    width: 100vw !important;
    height: auto !important;
    transition: transform 260ms ease, translate 260ms ease;
    will-change: transform, translate;
    translate: 0;
  }

  details[open]>.header__menu-item {
    text-decoration-color: lightgray;
  }

  .section-header:hover .header__menu-item {
    color: black !important;
  }

  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-link,
  .section-header:has(.header__inline-menu details[open]) .header__heading-link,
  .section-header:has(.header__search details[open]) .header__heading-link {
    position: fixed !important;
    top: 0.3rem;
    transform: none !important;
    width: 100vw !important;
    height: auto !important;
    transition: transform 260ms ease;
    will-change: transform;
  }

  .section-header:has(#Details-menu-drawer-container[open]),
  .section-header:has(.header__inline-menu details[open]),
  .section-header:has(.header__search details[open]) {
    /* disable difference blending while menu is open */
    mix-blend-mode: normal !important;
  }

  /* Wrapper + image fill full width - HOMEPAGE ONLY, NOT ON HOVER */
  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading-logo-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  /* Force small logo on non-homepage pages - DESKTOP */
  body:not(.template-index) .section-header:not(.scrolled-past-header) .header__heading-logo-wrapper {
    width: 90px !important;
  }

  /* Reduce logo on hover - applies everywhere */
  /* .section-header:hover .header__heading-logo-wrapper {
    width: 90px !important;
  }*/

  /* Logo shrinks for drawer/search open, but NOT for mega menu open */
  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-logo-wrapper,
  .section-header:has(.header__search details[open]) .header__heading-logo-wrapper {
    width: 90px !important;
  }

  /* On homepage at top: snap logo instantly to small when mega menu opens, smooth transition back when it closes */
  body.template-index .section-header:not(.scrolled-past-header):has(.header__inline-menu details[open]) .header__heading-logo-wrapper {
    width: 90px !important;
    transition: none !important;
  }
  /* Keep the width transition declared in ALL scroll states (not only before
     .scrolled-past-header). Otherwise, on a fast scroll the transition is
     dropped the moment .scrolled-past-header is added and the logo snaps from
     big to small instead of animating. Mega/search keep their instant snap via
     their own higher-specificity transition: none rules. */
  body.template-index .section-header:not(:has(.header__inline-menu details[open])) .header__heading-logo-wrapper {
    transition: width 0.15s cubic-bezier(.52, 0, .61, .99) !important;
  }

  /* Keep the logo's vertical translate on the same 0.15s curve in every scroll
     state (it otherwise reverts to Dawn's 260ms once .scrolled-past-header is
     added), so size and position move together — and identically whether the
     change is hover- or scroll-driven. Menu-open states keep their own timing. */
  body.template-index .section-header:not(:has(.header__inline-menu details[open])):not(:has(.header__search details[open])):not(:has(#Details-menu-drawer-container[open])) .header__heading-link {
    transition: translate 0.15s cubic-bezier(.52, 0, .61, .99) !important;
  }

  /* On homepage at top: keep logo full size when search opens (no shrink, no animation) */
  body.template-index .section-header:not(.scrolled-past-header):has(.header__search details[open]) .header__heading-logo-wrapper {
    width: 100% !important;
    max-width: none !important;
    transition: none !important;
  }

  .header__inline-menu {
    /* position: absolute;
    right: calc(23.4% - var(--grid-desktop-horizontal-spacing) / 2); */
  }

  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }

  .section-header:has(#Details-menu-drawer-container[open]) .header__heading-logo,
  .section-header:has(.header__inline-menu details[open]) .header__heading-logo,
  .section-header:has(.header__search details[open]) .header__heading-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    transition: width 260ms ease;
  }

  .section-header:hover .header__heading-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    transition: width 260ms ease;
  }

  .header__heading-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    transition: width 260ms ease;
  }

  /* Prevent the original heading box from forcing alignment issues - HOMEPAGE ONLY, NOT ON HOVER */
  body.template-index .section-header:not(.scrolled-past-header):not(:hover) .header__heading {
    position: relative;
  }

  .scrolled-past-header .header__heading-logo-wrapper {
    width: 90px !important;
  }
}

/* =========================================================
   MIX BLEND MODE + HOVER BEHAVIOR
   ========================================================= */
@media (min-width: 990px) and (hover: hover) and (pointer: fine) {
  /* Remove isolation to allow blend mode to work */
  sticky-header.header-wrapper,
  sticky-header.header-wrapper.gradient,
  .header-wrapper,
  .header-wrapper.gradient {
    isolation: unset !important;
    background: transparent !important;
    background-image: none !important;
  }

  /* Header itself transparent by default */
  sticky-header.header-wrapper .header {
    background: transparent !important;
    background-image: none !important;
    position: relative;
  }
  
  /* Add a white layer that fades in on hover to mask the blend mode transition */
  sticky-header.header-wrapper .header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 200ms ease;
    /*pointer-events: none;*/
    z-index: -1;
  }
  
  /* Section header with difference blend mode by default */
  .section-header:not(.is-hovering):not(.is-leaving) {
    mix-blend-mode: difference !important;
  }

  /* Keep blend mode NORMAL during hover AND during leaving (while bg fades) */
  .section-header.is-hovering,
  .section-header.is-leaving {
    mix-blend-mode: normal !important;
  }
  
  /* White background visible when hovering */
  .section-header.is-hovering sticky-header.header-wrapper .header::before {
    opacity: 1;
  }
  
  /* White background starts fading out when leaving (but blend mode stays normal) */
  .section-header.is-leaving sticky-header.header-wrapper .header::before {
    opacity: 0;
  }

  /* DEFAULT STATE: White text for difference mode */
  .section-header:not(.is-hovering):not(.is-leaving) .header__heading-logo {
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .section-header:not(.is-hovering):not(.is-leaving) .header__menu-item,
  .section-header:not(.is-hovering):not(.is-leaving) .header__search-text,
  .section-header:not(.is-hovering):not(.is-leaving) .header__account-text,
  .section-header:not(.is-hovering):not(.is-leaving) .header__cart-text {
    color: #fff !important;
    mix-blend-mode: difference !important;
  }

  .section-header:not(.is-hovering):not(.is-leaving) .header__icon svg,
  .section-header:not(.is-hovering):not(.is-leaving) .header__icon svg * {
    fill: #fff !important;
    mix-blend-mode: difference !important;
  }

  /* HOVER & LEAVING STATE: Black text on white background (stays black while bg fades) */
  .section-header.is-hovering .header__heading-logo,
  .section-header.is-leaving .header__heading-logo {
    filter: brightness(0) !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
  }

  .section-header.is-hovering .header__menu-item,
  .section-header.is-leaving .header__menu-item,
  .section-header.is-hovering .header__search-text,
  .section-header.is-leaving .header__search-text,
  .section-header.is-hovering .header__account-text,
  .section-header.is-leaving .header__account-text,
  .section-header.is-hovering .header__cart-text,
  .section-header.is-leaving .header__cart-text {
    color: #000 !important;
    mix-blend-mode: normal !important;
  }

  .section-header.is-hovering .header__icon svg,
  .section-header.is-leaving .header__icon svg,
  .section-header.is-hovering .header__icon svg *,
  .section-header.is-leaving .header__icon svg * {
    fill: #000 !important;
    stroke: #000 !important;
    mix-blend-mode: normal !important;
  }

  /* Individual hover highlight for right-side icon labels (search / log in / cart).
   * The general .is-hovering rule locks them to #000 !important (specificity 0,3,0).
   * These selectors use specificity 0,4,0 to win and apply the same lightgray
   * treatment as the middle nav items get via .header__menu-item:hover span. */
  .section-header.is-hovering .header__icon--search:hover .header__search-text,
  .section-header.is-leaving .header__icon--search:hover .header__search-text,
  .section-header.is-hovering .header__icon--account:hover .header__account-text,
  .section-header.is-leaving .header__icon--account:hover .header__account-text,
  .section-header.is-hovering .header__icon--cart:hover .header__cart-text,
  .section-header.is-leaving .header__icon--cart:hover .header__cart-text {
    opacity: 0.4; /* estompe au survol (transition d'opacite, pas de couleur) */
  }

  /* Make dropdown backgrounds white on hover too */
  .section-header.is-hovering .mega-menu__content,
  .section-header.is-hovering .header__submenu {
    background: #fff !important;
  }

  /* While the mega menu is open, keep the white header background and black
     content even if the cursor leaves the mega menu (otherwise the header
     would fall back to its transparent/difference-blend state). */
  .section-header:has(.header__inline-menu details[open]) sticky-header.header-wrapper .header::before {
    opacity: 1 !important;
  }

  .section-header:has(.header__inline-menu details[open]) {
    mix-blend-mode: normal !important;
  }

  .section-header:has(.header__inline-menu details[open]) .header__heading-logo {
    filter: brightness(0) !important;
    mix-blend-mode: normal !important;
  }

  .section-header:has(.header__inline-menu details[open]) .header__menu-item,
  .section-header:has(.header__inline-menu details[open]) .header__search-text,
  .section-header:has(.header__inline-menu details[open]) .header__account-text,
  .section-header:has(.header__inline-menu details[open]) .header__cart-text {
    color: #000 !important;
    mix-blend-mode: normal !important;
  }

  .section-header:has(.header__inline-menu details[open]) .header__icon svg,
  .section-header:has(.header__inline-menu details[open]) .header__icon svg * {
    fill: #000 !important;
    stroke: #000 !important;
    mix-blend-mode: normal !important;
  }
}

/* Glass overlay when ANY header details is open (menu drawer, mega menu, search, etc.) */
@media (hover: hover) and (pointer: fine) {
  /* Always present overlay */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40; /* below header (50) */
    background: rgba(var(--color-foreground), .5);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 260ms ease, visibility 0s linear 260ms;
  }

  /* Fade in when any header details is open */
  body:has(.section-header details[open])::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 260ms ease;
  }

  /* Keep header above the glass */
  .section-header {
    position: fixed !important;
    z-index: 50 !important;
  }
}

/* =========================================================
   FOOTER: GLOBAL TWEAKS
   ========================================================= */

.footer .footer__content-top.page-width {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.footer__content-top {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.policies li:before {
    content: unset !important;
    padding: 0 .8rem;
}

.footer__copyright {
    margin-top: 0rem !important;
}

/* Reduce bottom spacing (desktop + mobile) */
.footer .footer__content-bottom {
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.footer .footer__content-bottom-wrapper {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

/* Kill some Dawn default margins that create big gaps */
.footer .footer-block__heading {
  margin: 0;
}

/* Reduce spacing between list items inside menu blocks */
.footer .footer-block--menu .footer-block__details-content li {
  margin: 0;
  padding: 0;
}

.footer .footer-block--menu .footer-block__details-content a {
  padding: 0.35rem 0;
  display: inline-block;
}

/* =========================================================
   DESKTOP (>= 990px)
   Layout:
   Row 1: Klaviyo LEFT / Menus RIGHT (horizontal)
   Row 2: MoBe logo FULL WIDTH
   Bottom: copyright LEFT / policies RIGHT
   ========================================================= */

@media (min-width: 990px) {

  /* Build our own layout grid – ignore Dawn "grid--x-col" helpers */
  .footer .footer__blocks-wrapper {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2.4rem;
    row-gap: 2.2rem;
    align-items: start;
  }

  details[open]:hover>.header__menu-item {
    text-decoration-thickness: 0rem !important;
  }

  /* Newsletter block (stable selector via your ID) */
  .footer .footer-block.grid__item:has(.klaviyo-form-WaguPF) {
    grid-column: 9 / 13;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    margin: 0 !important;
    max-width: 560px;
}


  .footer-block.grid__item {
    width: 100% !important;
  }

    /* MENUS: place each one in its own column group (left side) */
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu:nth-child(3) {
    grid-column: 5 / 7;
    grid-row: 1;
  }
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu:nth-child(4) {
    grid-column: 7 / 9;
    grid-row: 1;
  }

  /* Menus: 4 blocks (Help/About/Legal/Connect)
     We place them in the MENUS area and display horizontally */
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu {
    grid-area: menus;
  }

  /* Turn the MENUS area into a horizontal row:
     easiest: make each menu block inline-flex and align to the right */
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    margin-left: 2.5rem; /* spacing between columns */
  }

  /* Ensure the menus area aligns top-right */
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu:first-of-type {
    margin-left: 0;
  }

  /* Right-align the whole "menus area" by pushing menu blocks to the right */
  .footer .footer__blocks-wrapper {
    justify-items: start;
  }

  /* Hack to align all menu blocks to the right column visually */
  .footer .footer__blocks-wrapper > .footer-block.footer-block--menu {
    justify-self: end;
  }

  /* Tighten spacing inside menus */
  .footer .footer-block--menu .footer-block__details-content {
    margin-top: 0.6rem;
  }

  /* MoBe logo block:
     It's the footer image block. Force it into the LOGO area and full width. */
  .footer .footer__blocks-wrapper > .footer-block:has(.footer-block-image) {
    grid-column: 1 / 13;
    grid-row: 2;
    width: 100%;
    margin: 0;
  }

  /* Full-bleed logo (edge-to-edge) */
  .footer .footer__blocks-wrapper > .footer-block:has(.footer-block-image) .footer-block__image-wrapper {
    max-width: none !important;
    width: 100vw !important;
    padding: 0 !important;
  }

  .footer .footer__blocks-wrapper > .footer-block:has(.footer-block-image) img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Bottom row: left/right */
  .footer .footer__content-bottom-wrapper--center {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }

  .footer .footer__copyright {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  /* Hide powered by shopify (optional) */
  .footer .footer__copyright > .copyright__content:nth-of-type(2) {
    display: none;
  }

  .footer .footer__copyright .policies {
    display: flex;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
  }
}

/* =========================================================
   MOBILE (< 990px)
   Layout:
   Menus as accordions, stacked
   Newsletter under
   Logo under (full width)
   Bottom: left/right
   ========================================================= */

@media (max-width: 989px) {
  /* Stack blocks, reduce gaps */
  .footer .footer__blocks-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 1.2rem; /* reduce vertical spacing between drawers */
  }

  .footer-block__details-content {
    margin-bottom: 0 !important;
  }

  /* Menu drawer block spacing */
  .footer .footer-block.footer-block--menu {
    padding: 0;
    margin: 0;
  }

  /* Heading looks like tab row */
  .footer .footer-block--menu .footer-block__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.8rem 0;
    margin: 0;
  }

  /* Put divider UNDER the heading (not above) */
  .footer .footer-block.footer-block--menu {
    border-top: none;
    border-bottom: 1px solid rgba(0,0,0,.15);
  }

  /* +/- icon : meme glyphe SVG fin (icon-plus/icon-minus) que la page produit/FAQ,
     1rem, via mask. Crossfade plus<->minus (opacity + rotate 0.3s) identique aux
     accordeons FAQ : le PLUS est sur ::after (dans le flux), le MINUS sur ::before
     superpose. */
  .footer .footer-block--menu .footer-block__heading {
    position: relative;
  }
  .footer .footer-block--menu .footer-block__heading::after,
  .footer .footer-block--menu .footer-block__heading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background-color: currentColor;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  /* PLUS (visible ferme) */
  .footer .footer-block--menu .footer-block__heading::after {
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='%23000' fill-rule='evenodd' d='M1 4.51a.5.5 0 0 0 0 1h3.5l.01 3.5a.5.5 0 0 0 1-.01V5.5l3.5-.01a.5.5 0 0 0-.01-1H5.5L5.49.99a.5.5 0 0 0-1 .01v3.5l-3.5.01z' clip-rule='evenodd'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='%23000' fill-rule='evenodd' d='M1 4.51a.5.5 0 0 0 0 1h3.5l.01 3.5a.5.5 0 0 0 1-.01V5.5l3.5-.01a.5.5 0 0 0-.01-1H5.5L5.49.99a.5.5 0 0 0-1 .01v3.5l-3.5.01z' clip-rule='evenodd'/></svg>") center / contain no-repeat;
    opacity: 1;
    transform: rotate(0deg);
  }
  /* MINUS (superpose, visible ouvert) */
  .footer .footer-block--menu .footer-block__heading::before {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'><path fill='%23000' fill-rule='evenodd' d='M.5 1C.5.7.7.5 1 .5h8a.5.5 0 1 1 0 1H1A.5.5 0 0 1 .5 1' clip-rule='evenodd'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'><path fill='%23000' fill-rule='evenodd' d='M.5 1C.5.7.7.5 1 .5h8a.5.5 0 1 1 0 1H1A.5.5 0 0 1 .5 1' clip-rule='evenodd'/></svg>") center / contain no-repeat;
    opacity: 0;
    transform: translateY(-50%) rotate(-90deg);
  }

  /* Collapsible content with smooth animation using grid trick */
  .footer .footer-block--menu .footer-block__details-content {
    height: 0;
    overflow: hidden;
    transition: height 260ms ease;
    margin: 0;
  }

  .footer .footer-block--menu .footer-block__details-content > * {
    overflow: hidden;
  }

  .footer .footer-block--menu.is-open .footer-block__details-content {
    grid-template-rows: 1fr;
  }

  /* Etat ouvert : le plus disparait (rotate+fade), le minus apparait */
  .footer .footer-block--menu.is-open .footer-block__heading::after {
    opacity: 0;
    transform: rotate(90deg);
  }
  .footer .footer-block--menu.is-open .footer-block__heading::before {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
  }

  /* Reduce spacing between items inside drawer */
  .footer .footer-block--menu .footer-block__details-content a {
    padding: 0.28rem 0;
  }

  /* Klaviyo block: reduce side padding */
  #shopify-block-ARUM5KytlbXBXWk5ib__klaviyo_email_marketing_sms_form_embed_block_gLindK {
    margin-left: -1rem;  /* reduce the page-width feel */
    margin-right: -1rem;
  }

  /* Also reduce any default inner spacing around the embed */
  #shopify-block-ARUM5KytlbXBXWk5ib__klaviyo_email_marketing_sms_form_embed_block_gLindK .klaviyo-form {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Logo block: reduce spacing top/bottom + full bleed */
  .footer .footer__blocks-wrapper > .footer-block:has(.footer-block-image) {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .footer .footer__blocks-wrapper > .footer-block:has(.footer-block-image) .footer-block__image-wrapper {
    max-width: none !important;
    width: 100% !important;
  }

  .footer .footer__blocks-wrapper > .footer-block:has(.footer-block-image) img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Bottom row: left/right, tighter */
  .footer .footer__content-bottom-wrapper--center {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .footer .footer__copyright {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  /* Hide powered by shopify (optional) */
  .footer .footer__copyright > .copyright__content:nth-of-type(2) {
    display: none;
  }

  .footer .footer__copyright .policies {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }
}

.page-width {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.header__menu-item:hover span {
  opacity: 0.4; /* estompe (transition douce dans les 2 sens, sans clip du blend) */
  text-decoration: none !important;
}

.header__menu-item:hover svg {
  opacity: 0.4 !important; /* meme estompage que le texte (au lieu d'un lightgray plus clair) */
  text-decoration: none !important;
  mix-blend-mode: unset !important;
}

.header__menu-item span {
  /* transition: color var(--duration-short) ease; */
}

/* ===== Drawer predictive search: allow results to show like desktop ===== */
#menu-drawer .menu-drawer__inner-container,
#menu-drawer .menu-drawer__navigation-container {
  overflow: visible !important; /* prevents clipping */
}

#mobe-drawer-search {
  position: relative;
}

/* Make predictive search behave like a dropdown under the field */
#mobe-drawer-search predictive-search {
  position: relative;
  display: block;
}

/* The results panel */
#mobe-drawer-search .predictive-search {
  /* position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  width: 100%; */
  z-index: 50;
}

.predictive-search__item--term {
    padding: 1.3rem 2rem !important;
}

/* Ensure results content looks like Dawn and is scrollable */
#mobe-drawer-search .predictive-search__results {
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Optional: if Dawn uses a border-radius / shadow on desktop, keep it here too */
#mobe-drawer-search .predictive-search {
  border-radius: 0;
}

/* Shared card styles */
.menu-pushes {
  display: grid;
  gap: 1rem;
}

.menu-push {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
}

.menu-push__media {
  display: block;
  aspect-ratio: 1/1;
  background: rgba(0,0,0,.06);
}

.menu-push__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(0.33, 1, 0.68, 1);
}

.menu-push__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  /* Dégradé renforcé : garantit la lisibilité du texte quelle que soit l'image. */
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 100%);
}

/* Titre — aligné sur le DS : weight 500, tracking négatif, line-height serré. */
.menu-push__title {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

/* CTA — libellé majuscule façon lien niveau 2 du DS, lisible sur l'image.
   La flèche sert d'affordance « cliquable » y compris sans hover (mobile). */
.menu-push__cta {
  margin-top: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

.menu-push__cta::after {
  content: "→";
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .35s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Hover / focus : léger zoom de l'image + flèche du CTA qui avance. */
.menu-push:hover .menu-push__img,
.menu-push:focus-visible .menu-push__img {
  transform: scale(1.05);
}

.menu-push:hover .menu-push__cta::after,
.menu-push:focus-visible .menu-push__cta::after {
  transform: translateX(.4rem);
}

@media (prefers-reduced-motion: reduce) {
  .menu-push__img,
  .menu-push__cta::after {
    transition: none;
  }
}

/* Desktop: mega-menu list on the left, pushes on the right */
@media (min-width: 990px) {
  /* The Dawn mega menu content wrapper */

  .mega-menu__link--level-2 {
    font-weight: 400 !important;
    color: black !important;
    opacity: 0.5; 
    padding-top: 0 !important;
    padding-bottom: 2rem !important;
    font-size: 1.2rem;
    text-transform: uppercase !important; 
  }

  /* The container inside mega menu (your UL + menu-pushes are siblings) */
  .mega-menu__content {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: stretch;
    padding-bottom: 5rem !important;
    padding-top: 5rem !important;
    height: 60vh;
  }

  /* Remove the drop shadow under the header: the mega menu panel (and any header
     dropdown) carries the .global-settings-popup popup shadow by default. */
  .section-header .mega-menu__content,
  .section-header .global-settings-popup,
  .section-header .header__submenu {
    box-shadow: none !important;
  }

  /* Continuity between two mega menus: the panel has no transition by default,
     so switching from one to another (e.g. Collection -> About) snaps closed
     then open. A short opacity/transform transition cross-fades them instead —
     both panels are briefly open together, so the overlay and white header
     background stay put through the switch. HeaderMenu does not JS-cancel these
     animations, so a pure CSS transition is safe. */
  .mega-menu__content {
    transition: opacity 0.28s cubic-bezier(0.33, 1, 0.68, 1),
                transform 0.28s cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* Make the UL behave as a left column (and avoid it stretching weirdly) */
  .mega-menu__list {
    width: 100%;
    height: 100%;
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 1rem 1rem !important;
    padding-right: 0px !important;
    align-content: start;
  }

  .mega-menu__list li::after {
    content: '';
    position: absolute;
    top: 5rem;
    bottom: 5rem;
    width: 1px;
    background: rgba(0,0,0,0.01);
    margin-left: -1rem;
  }

  /* Pushes on the right */
  .menu-pushes {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1rem;
    align-self: stretch;
    align-items: stretch;
    padding-right: 1rem;
  }

  /* Card basics (optional but usually needed) */
  .menu-push {
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
  }

  .menu-push__media,
  .menu-push__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-push__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.2rem;
    pointer-events: none; /* keep the <a> clickable everywhere */
  }

  /* Cartes plus grandes sur desktop : on remonte légèrement le titre. */
  .menu-push__title {
    font-size: 1.9rem;
  }

  .drawer__inner {
    padding: 0 1rem !important;
    width: 35vw !important;
    border: none !important;
  }

  .drawer__close .svg-wrapper {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }

  .drawer__header {
    padding: 1rem 0 1rem 0 !important;
  }

  .drawer__heading {
    margin: 0 !important;
    font-size: 6rem !important;
    padding-top: 2rem;
  }

  .drawer {
    background-color: transparent;
    transition: visibility var(--duration-default) ease, background-color var(--duration-default) ease, backdrop-filter var(--duration-default) ease !important;
  }

  .drawer.active {
    background-color: rgba(var(--color-foreground), .5);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(5px) saturate(140%);
  }

  .drawer__close {
    top: 1.3rem !important;
    min-height: auto !important;
    right: 0px !important;
    font-size: 1.2rem;
  }

  .drawer__footer {
    padding: 1rem 0!important;
    border-top: 0.5px solid black !important;
  }

  .cart-items thead {
    display: none;
  }

  .cart-drawer .cart-item {
    border-top: 0.5px solid black;
  }

  .quantity:after {
    box-shadow: none !important;
  }

  .drawer__cart-items-wrapper .quantity {
    width: calc(8rem / var(--font-body-scale) + var(--inputs-border-width) * 2) !important;
    min-height: auto;
  }

  .cart-item__quantity-wrapper {
    justify-content: space-between;
    align-items: flex-end; /* quantite et prix ferres en bas */
  }

  .cart-drawer .cart-item>td+td {
    padding-left: 0 !important;
  }

  .cart-item__totals.right {
    padding-right: 1rem;
  }

  .cart-item__price-wrapper .price,
  .cart-item__price-wrapper .price--end {
    letter-spacing: 0 !important;
  }

  .cart-drawer .cart-item:last-child {
    margin-bottom: 0 !important;
  }

  .cart-drawer .cart-items td {
    padding-top: 0 !important;
    min-width: fit-content;
    width: auto;
  }

  .cart-item__details dl .product-option {
    font-size: 1.2rem !important;
  }

  .cart-drawer .cart-item {
    grid-template: 1fr auto / 12rem 1fr auto !important;
    min-height: 20rem;
    padding: 1rem 0;
  }

  .cart-drawer .cart-item__details {
    grid-column: 2 / 3 !important;
    align-self: start; /* Model/Size/Frame cales en haut */
  }

  .cart-drawer .cart-items .cart-item__quantity {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    align-self: end; /* quantite + prix colles en bas */
    padding-top : 0 !important
  }

  .cart-drawer .cart-item__media {
    background: var(--colors-dark-4, rgba(0, 0, 0, 0.04));
    align-items: center;
    display: flex;
    justify-content: center;
    grid-column: 1;
    grid-row: 1 / 3; /* image haute, sur les 2 lignes */
  }

  .quantity__button {
    width: calc(2rem / var(--font-body-scale)) !important;
    background-color: var(--colors-dark-4, rgba(0, 0, 0, 0.04)) !important;
    height: calc(2rem / var(--font-body-scale));
  }

  .quantity__input {
    padding: 0 !important;
    font-size: 1.2rem !important;
  }

  .cart-drawer .cart-item__error {
    margin-top: 0 !important;
  }

  .cart-drawer__footer .totals,
  .cart-drawer__footer h2,
  .cart-drawer__footer .totals__total-value {
    font-weight: 400 !important;
    color: black;
    font-size: 3rem !important;
    letter-spacing: -0.04em !important;
  }

  .cart-drawer__footer small {
    font-size: 1.2rem;
    margin: 1rem 0 2rem auto !important;
    color: rgba(var(--color-foreground), 0.6);
  }

  .cart-drawer .cart__checkout-button,
  .product-form__buttons .product-form__submit {
    justify-content: space-between;
    padding: 0 1rem !important;
  }

  .cart-drawer .cart-item .loading__spinner {
    padding-top: 0rem !important;
  }
}

/* Mobile: carousel under Log in */
@media (max-width: 989px) {

  .menu-drawer {
    max-width: calc(100% - 3rem) !important;
    right: 0 !important;
    left: unset !important;
    width: 40rem !important;
  }

  .menu-drawer__overlay {
    /* background-color: rgba(var(--color-foreground), .5); */
    z-index: -1;
    /* backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(5px) saturate(140%); */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .menu-drawer__overlay:empty {
    display: block;
  }

  .js details[open].menu-opening>.menu-drawer__overlay {
    /* transform: translate(0);
    visibility: visible; */
    background-color: rgba(var(--color-foreground), .5);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(5px) saturate(140%);
    z-index: -2;
  }

  .js details[open]>.menu-drawer__overlay {
    transition: background-color .3s ease, backdrop-filter .3s ease;
  }

  .drawer {
    background-color: transparent;
    transition: visibility var(--duration-default) ease, background-color var(--duration-default) ease, backdrop-filter var(--duration-default) ease !important;
    width: 100% !important;
  }

  .drawer.active {
    background-color: rgba(var(--color-foreground), .5);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(5px) saturate(140%);
  }

  .menu-drawer__pushes {
    padding: 1rem 1rem 0; /* requested 2rem sides */
  }

  .menu-drawer__pushes .menu-pushes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 28rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .menu-drawer__pushes .menu-push {
    scroll-snap-align: start;
  }

  .menu-drawer__pushes .menu-pushes::-webkit-scrollbar {
    display: none;
  }

  .js details[open] > .menu-drawer,
  .js details[open] > .menu-drawer__submenu {
    /* transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.38, 0.99), visibility 0.5s cubic-bezier(0.18, 0.89, 0.38, 0.99) !important; */
  }
}

/* Mobile drawer layout: top search, scrollable menu, bottom pushes + utility */
@media (max-width: 989px) {
  /* Make the drawer a full-height column */
  #menu-drawer .menu-drawer__inner-container,
  #menu-drawer .menu-drawer__navigation-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* 1) Search stays at the top */
  #menu-drawer .menu-drawer__search {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    background: rgba(0,0,0,.04); /* keep same drawer background */
    /* border-top: 1px solid rgba(0, 0, 0, 1); */
  }

  .field__button {
    color: black;
  }

  .menu-drawer__menu-item {
    padding: 2rem 1.5rem !important;
    font-size: 2.5rem !important;
  }

  .menu-drawer__close-button {
    padding: 2rem 1.5rem !important;
    font-size: 2.5rem !important;
    margin-top: 0 !important;
    justify-content: space-between;
  }

  .menu-drawer__close-button .svg-wrapper {
    width: 2.5rem !important;
    left: 1.5rem !important;
  }

  .field__input:focus {
    box-shadow: none !important;
  }

  /* MENU MOBILE (drawer) — à la charte : texte noir plein, aucun hover.
     Les items portent .link--text → 70 % du foreground au repos puis 100 % au
     survol (+ fond gris Dawn), ce qui crée des états "collés" sur tactile et un
     item "page active" grisé. On fige le foreground plein dans tous les états,
     sans fond, sans soulignement ni variation d'opacité. */
  .menu-drawer__menu-item,
  .menu-drawer__menu-item--active,
  .menu-drawer__menu-item:hover,
  .menu-drawer__menu-item:focus,
  .menu-drawer__menu-item--active:hover,
  .menu-drawer__close-button,
  .menu-drawer__close-button:hover,
  .menu-drawer__close-button:focus {
    color: rgb(var(--color-foreground)) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    opacity: 1 !important;
    border-top: none;
    letter-spacing: -0.04rem;
  }

  #link-collection .menu-drawer__menu-item,
  #link-collection .menu-drawer__menu-item a {
    font-size: 2rem !important;
    padding: 1.5rem 1.5rem !important;
  }

  #link-collection .menu-drawer__menu-item>.svg-wrapper {
    width: 2rem !important;
    right: 1.5rem !important;
  }

  /* 2) Menu list gets the remaining space and scrolls */
  #menu-drawer .menu-drawer__navigation {
    flex: 1 1 auto;
    min-height: 0;           /* CRITICAL for flex scrolling */
    overflow: hidden;
    padding: 0rem 0;
    position: relative;
  }

  #menu-drawer .menu-drawer__navigation > .menu-drawer__menu{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .menu-drawer__menu-item>.svg-wrapper {
    width: 2.5rem !important;
    right: 1.5rem !important;
  }

  #menu-drawer .menu-drawer__submenu, {
    height: auto !important;
    max-height: none !important;
  }

  #menu-drawer .menu-drawer__submenu{
    position: absolute !important;
    left: 0; 
    right: 0;
    /* top: var(--drawer-search-h, 0px) !important;
    bottom: var(--drawer-bottom-h, 0px) !important; 
    height: auto !important;
    overflow: hidden; /* inner scroll handles long content */
    z-index: 3;
  }

  #menu-drawer .menu-drawer__inner-submenu{
    height: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #menu-drawer .menu-drawer__inner-submenu .menu-drawer__pushes {
    position: absolute;
    bottom: 0;
    /* left/right indispensables : sans eux l'élément absolu prend la largeur
       de son contenu (28rem × N cartes) et le carrousel .menu-pushes ne peut
       plus déborder → le scroll horizontal était neutralisé. On le borne à la
       largeur du drawer pour que overflow-x: auto reprenne effet. */
    left: 0;
    right: 0;
    background-color: rgb(var(--color-background));
  }

  .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
    padding: 1.5rem 3rem !important;
  }

  .menu-drawer__account {
    display: flex !important;
    justify-content: center !important;
    font-size: 2rem !important;
    letter-spacing: -0.04rem;
  }

  .menu-drawer__account>.svg-wrapper {
    height: 2rem !important;
    width: 2rem !important;
    display:none;
  }

  /* 3) Utility links pinned to bottom */
  #menu-drawer .menu-drawer__utility-links {
    flex: 0 0 auto;
    background: rgba(0,0,0,.04);
    border-top: 1px solid rgba(0,0,0,.01);
  }

  .field__label, .customer .field label {
    font-size: 1.6rem;
    color: rgba(var(--color-foreground), .5);
    letter-spacing: 0rem;
  }

  .field__input {
    background: transparent !important;
  }

  .search-modal__form .field:after {
    box-shadow: none !important;
    border-top:1px;
  }

  .drawer__inner {
    padding: 0 1rem !important;
    border: none !important;
  }

  .drawer__close .svg-wrapper {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }

  .drawer__header {
    padding: 1rem 0 2rem 0 !important;
  }

  .drawer__heading {
    margin: 0 !important;
    font-size: 3rem !important;
  }

  .drawer__close {
    top: 1rem !important;
  }

  .drawer__footer {
    padding: 1rem 0!important;
    border-top: 0.5px solid black !important;
  }

  .cart-items thead {
    display: none;
  }

  .cart-drawer .cart-item {
    border-top: 0.5px solid black;
  }

  .quantity:after {
    box-shadow: none !important;
  }

  .drawer__cart-items-wrapper .quantity {
    width: calc(8rem / var(--font-body-scale) + var(--inputs-border-width) * 2) !important;
    min-height: auto;
  }

  .cart-item__quantity-wrapper {
    justify-content: space-between;
    align-items: flex-end; /* quantite et prix ferres en bas */
  }

  .cart-drawer .cart-item>td+td {
    padding-left: 0 !important;
  }

  .cart-item__totals.right {
    padding-right: 1rem;
  }

  .cart-drawer .cart-item:last-child {
    margin-bottom: 0 !important;
  }

  .cart-drawer .cart-items td {
    padding-top: 0 !important;
  }

  .cart-item__details dl .product-option {
    font-size: 1rem !important;
  }

  .cart-drawer .cart-item {
    grid-template: 1fr auto / repeat(2, auto) !important; /* ligne 1 s'etire, ligne 2 (quantite) en bas */
    padding: 1rem 0;
    min-height: 16rem; /* chaque ligne produit prend plus de hauteur (mobile) */
  }

  .cart-drawer .cart-item__details {
    grid-column: 2 / 3 !important;
    align-self: start;
  }

  .cart-drawer .cart-items .cart-item__quantity {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    align-self: end; /* quantite + prix colles en bas */
    padding-top : 0 !important
  }

  .cart-drawer .cart-item__media {
    background: var(--colors-dark-4, rgba(0, 0, 0, 0.04));
    align-items: center;
    display: flex;
    justify-content: center;
    width: 12rem;
    grid-column: 1;
    grid-row: 1 / 3; /* image sur les 2 lignes */
  }

  .menu-drawer__localization, .header-localization {
    display: none;
  }

  .quantity__button {
    width: calc(2rem / var(--font-body-scale)) !important;
    background-color: var(--colors-dark-4, rgba(0, 0, 0, 0.04)) !important;
    height: calc(2rem / var(--font-body-scale));
  }

  .quantity__input {
    padding: 0 !important;
    font-size: 1.2rem !important;
  }

  .cart-drawer .cart-item__error {
    margin-top: 0 !important;
  }

  .cart-drawer__footer .totals,
  .cart-drawer__footer h2 {
    font-weight: 400 !important;
    color: black;
    font-size: 1.8rem !important;
    letter-spacing: -0.04em !important;
  }

  .cart-drawer__footer small {
    font-size: 1rem;
  }

  .cart-drawer .cart__checkout-button,
  .product-form__buttons .product-form__submit {
    justify-content: space-between;
    padding: 0 1rem !important;
  }

  .cart-drawer .cart-item .loading__spinner {
    padding-top: 0rem !important;
  }
}

/* Cart reassurances bar (under checkout) */
#CartDrawer .cart-reassurance {
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0,0,0,.04); /* light gray */
  overflow: hidden;
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

#CartDrawer .cart__ctas {
  margin-bottom: 1rem;
}

#CartDrawer .cart-reassurance__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

#CartDrawer .cart-reassurance__track {
  display: flex;
  transform: translateX(0);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

#CartDrawer .cart-reassurance__slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
}

#CartDrawer .cart-reassurance__icon img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

#CartDrawer .cart-reassurance__icon-fallback {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: block;
  background: rgba(0,0,0,.25);
}

#CartDrawer .cart-reassurance__text {
  font-size: 1.2rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#CartDrawer .cart-reassurance__dots {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

#CartDrawer .cart-reassurance__dot {
  width: .4rem;
  height: .4rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(0,0,0,.25);
}

#CartDrawer .cart-reassurance__dot.is-active {
  background: rgba(0,0,0,1);
}

/* Free shipping bar (Cart Drawer) */
#CartDrawer .cart-free-shipping{
  margin: 1rem 0 1rem;
  padding: 1rem 1rem 1.5rem 1rem;
  background: transparent;
}

#CartDrawer .cart-free-shipping__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

#CartDrawer .cart-free-shipping__label{
  font-size: 1.2rem;
  opacity: .75;
}

#CartDrawer .cart-free-shipping__message{
  font-size: 1.2rem;
  text-align:right;
  margin-left:auto;
  white-space: nowrap;
  font-weight: 500;
}

#CartDrawer .cart-free-shipping__text{
  font-size: 1.2rem;
  line-height: 1.2;
}

#CartDrawer .cart-free-shipping__threshold{
  font-size: 1.1rem;
  opacity: .6;
  white-space: nowrap;
}

#CartDrawer .cart-free-shipping__bar{
  position: relative;
  height: 0.3rem;
  overflow: hidden;
  border-radius: 0;
  background: rgba(0, 0, 0, .3); /* track gris (noir 30%) */
}

#CartDrawer .cart-free-shipping__fill{
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: 0;
  background: #29ff30; /* vert progression */
  transition: width 420ms cubic-bezier(.22,.61,.36,1);
}

.cart-drawer__form {
  height: 100%;
  padding-bottom: 1rem;
  border-top: 0.5px solid black;
}

.cart__empty-text {
  margin: 3rem 0 3rem;
  font-size: 1.4rem !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgb(var(--color-foreground));
}

/* Cart drawer recommendations slider: force it to behave like a carousel */
#CartDrawer .cart-drawer__reco .slider {
  display: flex !important;          /* overrides grid layout */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;                /* horizontal only — show full card height */
  scrollbar-width: none;             /* hide scrollbar (nav via prev/next) */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1rem;
  padding: 0;
  margin: 0 1rem;
}
#CartDrawer .cart-drawer__reco .slider::-webkit-scrollbar {
  display: none;
}

/* Side cart : masquer la scrollbar de la zone produits (le scroll reste actif) */
cart-drawer-items {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / vieux Edge */
}
cart-drawer-items::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* =========================================================
   DS — textes de la zone produits du side cart
   (taille 1.2rem ; ls courant -0.01em ; titre 500 ; options secondaires 60%)
   ========================================================= */
/* Taille 1.2rem pour TOUS les textes d'un produit (titre, options, prix) */
.cart-drawer .cart-item__name,
.cart-drawer .product-option,
.cart-drawer .cart-item__final-price,
.cart-drawer .cart-item__old-price,
.cart-drawer .cart-item__price-wrapper .price {
  font-size: 1.2rem !important;
}
/* Nom produit (valeur de la ligne Model) */
.cart-drawer .cart-item__name {
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: rgb(var(--color-foreground));
}
/* Options de variante / proprietes / plan (texte secondaire) */
.cart-drawer .product-option {
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(var(--color-foreground), 0.6);
}
/* Prix (final + ancien) : noir plein, weight 400 */
.cart-drawer .cart-item__final-price,
.cart-drawer .cart-item__price-wrapper .price {
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: rgb(var(--color-foreground)) !important;
}
/* Ancien prix barré : plus clair (comme la page produit) */
.cart-drawer .cart-item__old-price {
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.4) !important;
}
/* Prix barré AU-DESSUS du prix courant (colonne), aligne a droite. */
.cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices {
  display: flex;
  flex-direction: column !important;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.2rem;
}
/* Retire la border-top du 1er produit (evite le doublon avec le bloc au-dessus) */
.cart-drawer .cart-item:first-child {
  border-top: none !important;
}

/* === Affichage produit epure : Model (titre) / Size / Frame ===
   Masque uniquement le prix redondant (deja dans le price-wrapper). */
.cart-drawer .cart-item__details > div.product-option,
.cart-drawer .cart-item__details > .cart-item__discounted-prices {
  display: none !important;
}
/* Options en 2 colonnes alignees : libelle (gris) | valeur (noir) */
.cart-drawer .cart-item__details dl {
  margin: 0;
}
.cart-drawer .cart-item__details dl .product-option {
  display: grid !important;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 1rem;
  margin: 0 0 0.2rem 0;
}
.cart-drawer .cart-item__details dl .product-option dt,
.cart-drawer .cart-item__details dl .product-option dd {
  display: block !important;
  margin: 0;
}
.cart-drawer .cart-item__details dl .product-option dt {
  color: rgba(var(--color-foreground), 0.6); /* libelle secondaire */
}
.cart-drawer .cart-item__details dl .product-option dd {
  color: rgb(var(--color-foreground)); /* valeur en noir */
}

#CartDrawer .cart-drawer__reco slider-component,
#CartDrawer .cart-drawer__reco .slider {
  min-width: 0;
  max-width: 100%;
}
#CartDrawer .cart-drawer__reco .slider__slide {
  flex: 0 0 60%;
  min-width: 0; /* keep slides at 31.5% — card content must not widen them */
  scroll-snap-align: start;
}
/* Reco cards keep the global same-line layout (title left / price right). The
   overflow that this caused is handled by min-width:0 on the slides above, and
   the title stays on one line via the ellipsis rule below. */
/* Kill horizontal scroll on the items container — it must scroll vertically
   only. The reco carousel keeps its own internal horizontal scroll (.slider). */
#CartDrawer cart-drawer-items {
  overflow-x: hidden;
}
#CartDrawer .cart-drawer__reco {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Smaller grey frame on the tiny reco cards. */
#CartDrawer .cart-drawer__reco .card.card--standard {
  --image-padding: 6px;
}

/* Contraint la largeur des contenus du side cart (items + reco) pour eviter tout
   debordement horizontal hors du viewport (sans clipper le scroll interne du
   slider reco). */
#CartDrawer .drawer__contents,
#CartDrawer .cart-drawer__reco {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#CartDrawer .drawer__contents {
  overflow-x: hidden;
}

/* Optional: make buttons usable/clean in the drawer */
#CartDrawer .cart-drawer__reco .slider-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 0rem;
  padding: 1rem;
}

#CartDrawer .cart-drawer__reco .slider-button[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.cart-drawer__reco {
  border: .5px solid black;
}

.cart-drawer__reco-title {
  padding: 1.5rem 1rem;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgb(var(--color-foreground));
}

.cart-drawer__reco .card__information {
  padding: 1rem 0 !important;
  min-width: 0;
}

.cart-drawer__reco .card__content {
  min-width: 0;
}

.card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0rem !important;
}

.cart-drawer__reco .price {
  font-size: 0.8rem !important;
}

.cart-drawer__reco .card__heading {
  /* font-size: 1rem !important; */
}

/* Cart drawer reco: product title ellipsis (single line) */
#CartDrawer #Slider-CartDrawer-Reco .card__heading,
#CartDrawer #Slider-CartDrawer-Reco .card__heading a,
#CartDrawer #Slider-CartDrawer-Reco .full-unstyled-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cart-drawer__reco .slider-button {
  background: rgba(0,0,0,.04);
  color: black !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

.cart-drawer__reco .slider-button .icon {
  height: 0.7rem !important;
}

.cart-drawer__reco .card__inner.gradient {
  padding: 1rem 0;
}

.product__media-list .media>img {
    background: rgb(0, 0, 0, .05);
}

@media (min-width: 990px) {

  .product--large:not(.product--no-media) .product__info-wrapper {
    padding: 1rem 0 0 1rem !important;
  }

  .product__media-wrapper .product__column-sticky {
    top: 0 !important;
  }

  /* Calage vertical du prix quand la colonne est "stuck".
     Position à l'écran du prix = ce `top` + le `margin-top` du 1er enfant
     (44px, voir .sticky-top-section>*:first-child). C'est CE réglage (et non
     le point de bascule du JS) qui empêche le prix de passer sous le header.
     Augmenté 44 -> 80px pour dégager la hauteur header + barre d'annonce. */
  .product__info-wrapper .product__column-sticky {
    top: 52px !important;
  }

  /* Disable the slide-in animation on the product info wrapper.
     transform: translateY on an ancestor breaks position:sticky —
     the sticky child uses the transformed ancestor as its scroll
     container and appears frozen while the animation plays. */
  .product__info-wrapper.scroll-trigger.animate--slide-in {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .product:not(.product--columns) .product__media-list .product__media-item:first-child, .product:not(.product--columns) .product__media-list .product__media-item--full {
    background: rgb(0, 0, 0, 0.05);
    padding: 14rem;
    height: calc(100vh - 21px - 1rem);
  }

  .product:not(.product--columns) .product__media-list .product__media-item:first-child .media,
  .product:not(.product--columns) .product__media-list .product__media-item--full .media {
    height: calc(100vh - 44px - 28rem) !important;
    padding-top: 0 !important;
  }

  .product:not(.product--columns) .product__media-list .product__media-item:first-child .media img,
  .product:not(.product--columns) .product__media-list .product__media-item--full .media img {
    object-fit: contain !important;
  }

  .global-media-settings {
    border:none !important;
  }

  .product__media-list {
    margin-bottom: 0rem;
  }

}

@media (max-width: 989px) {

  .product__media-list .product__media-item {
    width: 100% !important;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin: 0 !important;
  }

  /* Espace a gauche du 1er produit : carrousels de CARDS uniquement
     (.product-grid), pas le slider d'images produit (qui partage grid--peek). */
  .product-grid.grid--peek.slider .grid__item:first-of-type {
    margin-left: 1rem !important;
  }

  .grid--peek.slider .grid__item {
    padding: 0 !important;
  }

  .slider.slider--mobile .slider__slide {
    padding: 0 !important;
    justify-content: space-around;
  }

  .slider.slider--mobile {
    scroll-padding-left: 0 !important;
    margin-bottom: 0 !important;
  }

  /* gutter au snap pour les carrousels de cards uniquement */
  .product-grid.grid--peek.slider {
    scroll-padding-left: 1rem !important;
  }

  .product-media-container .media {
    padding-top: 70vh !important;
  }

  .product__media-list > li:first-child .product__media img {
    object-fit: contain;
  }

  .product__column-sticky .slider-mobile-gutter {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1.01rem !important;
    margin-right: -1.01rem !important;
  }

  .product__media-list {
    overflow-x: auto !important;
  }

  .product__media-item {
    overflow: hidden !important;
  }

  .product-media-container {
    border: none;
    max-width: none !important;
  }

  .product__column-sticky .slider-mobile-gutter .slider-buttons .slider-progress-bar {
    align-self: center;
    background-color: #d9d9d9;
    border-radius: var(--buttons-radius);
    display: block;
    height: .3rem;
    margin-right: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .product__column-sticky .slider-mobile-gutter .slider-buttons .slider-progress-bar:after {
    background-color: black;
    border-radius: var(--buttons-radius);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width .3s ease-in-out;
    width: var(--progress, 0);
  }

  .product__column-sticky .slider-mobile-gutter .slider-buttons {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  .product__column-sticky .slider-mobile-gutter .slider-buttons {
    cursor: pointer;
    display: flex !important;
    gap: 1rem;
    justify-content: flex-end;
    position: absolute;
    z-index: 2;
  }

  .product__column-sticky .slider-mobile-gutter .slider-buttons button {
    display: none;
  }

  .product__info-wrapper .product__title h1 {
    line-height: 0.8 !important;
    white-space: nowrap !important;
    width: 100% !important;
    letter-spacing: -0.05em !important;
    font-weight: 500 !important;
    text-indent: -0.06em;
  }

  .product__info-wrapper .product__title {
    width: 100% !important;
    margin: 0 !important;
  }

  .product__info-wrapper .price--large {
    letter-spacing: 0px;
    font-size: 1.4rem !important;
    margin: 1rem 0 0 0 !important;
  }

  .product__info-wrapper .price__container {
    /* margin: 2rem 0 0 0 !important; */
  }

  .product__info-container>*+* {
    margin: 0rem 0 !important;
  }

  .product__info-wrapper .product__description {
    padding: 0;
    border-top: .5px black solid;
    border-bottom: .5px black solid;
    margin: 2rem 0 0 0 !important;
    font-size: 1.2rem;
  }

  .custom-variants__row {
    padding-top: 2.5rem;
  }

  .variant-tooltip-drawer__inner {
    max-width: calc(100% - 3rem) !important;
    width: 40rem !important;
  }

}

@media screen and (min-width: 990px) {
  
  .product__info-container>*:first-child {
    margin-top: 44px!important;
  }

  .sticky-top-section>*:first-child {
    margin-top: 44px!important;
  }

  .product__info-wrapper>*:first-child {
    margin-top: 44px!important;
  }

  .product__info-wrapper .price--large {
    letter-spacing: 0px;
    font-size: 1.4rem !important; 
  }

  .product__info-container>*+* {
    margin: 0rem 0 !important;
  }

  .product__info-wrapper .product__title h1 {
    line-height: 0.8 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    letter-spacing: -0.05em !important;
    font-weight: 500 !important;
    text-indent: -0.06em;
  }

  .product__info-wrapper .product__title {
    width: 100% !important;
  }

  .product__info-wrapper .product__description {
    padding: 0;
    border-top: .5px black solid;
    border-bottom: .5px black solid;
    margin: 2rem 0 0 0 !important;
    font-size: 1.2rem;
  }

  .product__info-wrapper .product-form__buttons {
    max-width: 100% !important;
  }
}

/* =========================================================
   PRODUCT DESCRIPTION BLOCK — layout tableau 2 colonnes
   (Artist / Description). Le conteneur garde la classe
   .product__description pour rester compatible avec le scroll
   desktop custom (product-scroll-behavior.js déplace cet
   élément dans la middleSection). Lignes séparées par des
   filets, labels à gauche / valeurs à droite.
   ========================================================= */
.product__info-wrapper .product__description .product__info-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2rem;
  padding: 1.5rem 0;
  align-items: start;
}

.product__info-wrapper .product__description .product__info-row + .product__info-row {
  border-top: .5px black solid;
}

.product__info-wrapper .product__description .product__info-label {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
  line-height: 1.4;
}

.product__info-wrapper .product__description .product__info-value {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: #000;
  font-weight: 400;
  line-height: 1.4;
}

.product__info-wrapper .product__description .product__info-value > div {
  margin: 0;
}

.product__info-wrapper .product__description .product__info-value p {
  margin: 0;
}

.product__info-wrapper .product__description .product__info-value p + p {
  margin-top: 0.8rem;
}

/* =========================================================
   VARIANT TOOLTIP BUTTON
   ========================================================= */

.custom-variants {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.custom-variants__row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.custom-variants__row .field_custom_variant {
  flex: 1;
  min-width: 0;
}

.custom-variants:first-child {
  padding-top: 1rem;
}

.field__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0rem;
  justify-content: space-between;
}

.field__header label {
  display: flex;
  margin-bottom: 0;
  flex: 1;
  color: rgb(var(--color-foreground));
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.product__info-container .product-form {
  margin: 1rem 0 1rem !important;
}

.field_custom_variant {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.5rem;
}

.field_custom_variant.checkbox {
  flex-direction: row;
  align-items: center;
  position: relative;
  height: auto;
  margin-bottom: 1rem;
}

.field_custom_variant.checkbox input {
  margin: 0;
}

.field__input-wrapper {
  position: relative;
  display: flex;
  gap: 1rem;
}

.field__input-wrapper select {
  flex: 1;
  height: calc(4rem + var(--buttons-border-width) * 2);
  border-radius: 0px;
  padding: 1rem;
  /* kept for any other selects that may use this wrapper */
}

.variant-tooltip-trigger {
  flex: 0 0 auto;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(var(--color-foreground), 0.40);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-left: auto;
}

/* Flèche "→" après le label Info — même glyphe et même police (system-ui)
   que la flèche .text-arrow du bouton "Add to cart". */
.variant-tooltip-trigger::after {
  content: "→";
  font-family: system-ui;
  display: inline-block;
  line-height: 1;
  transition: transform 0.2s ease;
}

.variant-tooltip-trigger:hover {
  color: rgb(var(--color-foreground));
}

.variant-tooltip-trigger:hover::after {
  transform: translateX(2px);
}

.accordion {
  margin: 0 !important;
  border-top: .5px solid black !important;
}

/* Question row — visually prominent */
.accordion__title {
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.70);
  letter-spacing: 0;
}

/* Answer content — indented and lighter to read as "A" under the "Q" */
.product__accordion .accordion__content {
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.70);
  letter-spacing: 0;
  padding: 0 0 0 1rem !important;
}

/* Same answer styling in standalone FAQ/collapsible-content section */
.collapsible-content .accordion__content {
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.70);
  padding-left: 1rem;
  border-left: 2px solid rgba(var(--color-foreground), 0.1);
}

/* collapsible-content: use theme default heading styles, just add spacing */
.collapsible-content__heading {
  margin-bottom: 2.5rem;
}

/* =========================================================
   ACCORDION TOGGLE ICON (PLUS/MINUS)
   ========================================================= */

.accordion summary {
  align-items: center;
}   

.accordion__toggle-icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.accordion__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Default state (closed) - show plus, hide minus */
.accordion__icon--plus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.accordion__icon--minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* Open state - hide plus, show minus */
details[open] .accordion__icon--plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

details[open] .accordion__icon--minus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* =========================================================
   VARIANT TOOLTIP DRAWER
   ========================================================= */

.variant-tooltip-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000 !important;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s, background 300ms ease;
}

.variant-tooltip-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, background 300ms ease;;
  background-color: rgba(var(--color-foreground), .5);
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
}

/* Overlay - invisible but clickable */
.variant-tooltip-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: transparent;
  opacity: 1;
  cursor: pointer;
  z-index: 10000 !important;
}

/* Drawer panel */
.variant-tooltip-drawer__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 35%;
  max-width: 35%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-default) ease;
  z-index: 10001 !important;
}

.variant-tooltip-drawer.is-open .variant-tooltip-drawer__inner {
  transform: translateX(0);
}

/* Header */
.variant-tooltip-drawer__header {
  flex: 0 0 auto;
  padding: 2rem 2rem;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.variant-tooltip-drawer__title {
  font-size: 2rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0;
}

.variant-tooltip-drawer__close {
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: black;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.variant-tooltip-drawer__close:hover {
  color: rgb(var(--color-foreground));
}

.variant-tooltip-drawer__close svg {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}

/* Content area */
.variant-tooltip-drawer__content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2rem;
}

/* Scrollbar styling */
.variant-tooltip-drawer__content::-webkit-scrollbar {
  width: 6px;
}

.variant-tooltip-drawer__content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.variant-tooltip-drawer__content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.variant-tooltip-drawer__content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* =========================================================
   TOOLTIP CONTENT
   ========================================================= */

.tooltip-content {
  max-width: 60rem;
  margin: 0 auto;
}

.tooltip-content__image {
  margin-bottom: 2rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.tooltip-content__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.tooltip-content__text h3 {
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 1rem 0;
  letter-spacing: 0;
}

.tooltip-content__text h4 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 2rem 0 0.8rem 0;
  letter-spacing: 0;
}

.tooltip-content__text p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  color: rgba(var(--color-foreground), 0.70);
}

.tooltip-content__text ul {
  margin: 1rem 0;
  padding-left: 2rem;
}

.tooltip-content__text ul li {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  color: rgba(var(--color-foreground), 0.70);
}

.tooltip-content__text ul li strong {
  color: rgb(var(--color-foreground));
}

.tooltip-content__tip {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid rgba(0, 0, 0, 1);
}

.tooltip-content__tip strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.tooltip-content__tip p,
.tooltip-content__tip {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
}

/* =========================================================
   MOBILE ADJUSTMENTS
   ========================================================= */

@media (max-width: 989px) {
  .variant-tooltip-drawer__inner {
    max-width: calc(100% - 3rem);
  }

  .variant-tooltip-drawer__header {
    padding: 1.5rem;
  }

  .variant-tooltip-drawer__title {
    font-size: 1.8rem;
  }

  .variant-tooltip-drawer__content {
    padding: 1.5rem;
  }

  .tooltip-content__text h3 {
    font-size: 1.8rem;
  }

  .tooltip-content__text h4 {
    font-size: 1.3rem;
  }

  .tooltip-content__text p,
  .tooltip-content__text ul li {
    font-size: 1.3rem;
  }
}

/* =========================================================
   PREVENT BODY SCROLL WHEN DRAWER IS OPEN
   ========================================================= */

body.variant-tooltip-open {
  overflow: hidden;
}

/* =========================================================
   CUSTOM DROPDOWN (SIZE & FRAME) — replaces browser selects
   ========================================================= */

.custom-dropdown {
  position: relative;
  flex: 1;
}

/* Trigger button */
.custom-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  height: calc(4rem + var(--buttons-border-width) * 2);
  padding: 0 1.2rem;
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2rem;
  color: rgb(var(--color-foreground));
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.custom-dropdown__trigger:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.custom-dropdown.is-open .custom-dropdown__trigger {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.3);
}

.custom-dropdown__value {
  flex: 1;
}

/* +/- toggle icon — mirrors the accordion pattern */
.custom-dropdown__toggle-icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dropdown__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Closed: show +, hide - */
.custom-dropdown__icon--plus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.custom-dropdown__icon--minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* Open: hide +, show - */
.custom-dropdown.is-open .custom-dropdown__icon--plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.custom-dropdown.is-open .custom-dropdown__icon--minus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Options panel */
.custom-dropdown__options {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: rgb(var(--color-background));
  border: 1px solid rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  z-index: 200;
  max-height: 24rem;
  overflow-y: auto;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Open upward when not enough space below */
.custom-dropdown.opens-up .custom-dropdown__options {
  top: auto;
  bottom: calc(100% + 2px);
  transform: translateY(4px);
}

.custom-dropdown.is-open .custom-dropdown__options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Individual option row */
.custom-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background-color 0.1s ease;
}

.custom-dropdown__option:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.custom-dropdown__option.is-active {
  background-color: rgba(0, 0, 0, 0.06);
  font-weight: 500;
}

.custom-dropdown__option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.custom-dropdown__option.is-disabled .custom-dropdown__option-label {
  text-decoration: line-through;
}

/* ---- Frame colour swatches ---- */

.custom-dropdown__swatch {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.custom-dropdown__swatch--none {
  background-color: #f0ece4;
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.25);
}

.custom-dropdown__swatch--black {
  background-color: #1a1a1a;
}

.custom-dropdown__swatch--darkwood {
  background: linear-gradient(135deg, #3d2314 0%, #5c3420 40%, #3d2314 100%);
}

.custom-dropdown__swatch--white {
  background-color: #f5f0e8;
  border-color: rgba(0, 0, 0, 0.2);
}

.custom-dropdown__swatch--wood {
  background: linear-gradient(135deg, #7a4f2e 0%, #9b6a3e 40%, #7a4f2e 100%);
}

/* Image swatch variant — swap the <span> for an <img class="custom-dropdown__swatch-img"> */
.custom-dropdown__swatch-img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* =========================================================
   CHECKBOX STYLING
   ========================================================= */

.field_custom_variant input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  width: 1.5rem;
  height: 1.5rem;

  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0rem;
  
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  
  transition: all 0.2s ease;
}

.field_custom_variant input[type="checkbox"]:hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.25);
}

.field_custom_variant input[type="checkbox"]:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.4);
}

.field_custom_variant input[type="checkbox"]:checked {
  background-color: rgba(0, 0, 0, 1);
  border-color: rgba(0, 0, 0, 1);
}

/* Checkmark */
.field_custom_variant input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 1.2rem;
  height: 1.2rem;
  
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =========================================================
   CHECKBOX LABEL ENHANCEMENT
   ========================================================= */

.field_custom_variant.checkbox .field__header label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Pousse le lien "Info →" à l'extrémité droite de la ligne ready-to-hang */
.field_custom_variant.checkbox .field__header {
  flex: 1;
}

/* Mention prix de l'option ready-to-hang (secondaire, plus petit) */
.cv-rth-note {
  color: rgba(var(--color-foreground), 0.4);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* =========================================================
   PRODUCT REASSURANCE MODULE
   ========================================================= */

.product-reassurance {
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.04); /* light gray - matches cart */
  overflow: hidden;
  min-height: calc(4.5rem + var(--buttons-border-width, 0) * 2);
  margin: 1rem 0 !important;
}

.product-reassurance__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.product-reassurance__track {
  display: flex;
  transform: translateX(0);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.product-reassurance__slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.product-reassurance__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-reassurance__icon img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.product-reassurance__icon-fallback {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: block;
  background: rgba(0, 0, 0, 0.25);
}

.product-reassurance__text {
  font-size: 1.2rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-reassurance__dots {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-reassurance__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
  transition: background 200ms ease;
}

.product-reassurance__dot:hover {
  background: rgba(0, 0, 0, 0.5);
}

.product-reassurance__dot.is-active {
  background: rgba(0, 0, 0, 1);
}

/* Mobile progress bar — shown instead of dots on small screens */
.product-reassurance__progress-bar {
  display: none;
}

@media screen and (max-width: 749px) {

  .product-reassurance__progress-bar {
    display: block;
    flex: 0 0 4rem;
    height: 0.2rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }

  .product-reassurance__progress-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--reassurance-progress, 0%);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 999px;
    transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* The reassurance carousel is intentionally always animated (brand choice),
   so we do NOT disable its transition under prefers-reduced-motion. */

/* ===================================================================
   STICKY ADD TO CART BANNER
   Slides up/down to reveal actual add-to-cart button
   =================================================================== */

.sticky-atc-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: white;
  border-top: .5px solid rgba(0, 0, 0, 1);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  touch-action: manipulation;
}

/* Show banner when visible */
.sticky-atc-banner.is-visible {
  transform: translateY(0);
}

/* Banner inner container */
.sticky-atc-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  max-width: 100%;
}

/* Mobile: 2 rows layout */
@media (max-width: 749px) {
  .sticky-atc-banner__inner {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
}

/* Content area (image + info) */
.sticky-atc-banner__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

/* Mobile: Content takes full width */
@media (max-width: 749px) {
  .sticky-atc-banner__content {
    width: 100%;
    justify-content: space-between;
  }
}

/* Product image */
.sticky-atc-banner__image {
  width: 4.5rem;
  height: 4.5rem;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.05);
  /* Cadre gris uniforme autour de l'image : la bordure (grise) entoure le visuel
     et background-clip:padding-box empêche l'image de peindre sous la bordure.
     box-sizing:border-box conserve l'encombrement de 4.5rem. */
  border: 0.4rem solid rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  flex-shrink: 0;
}

/* Mobile: Hide image to save space */
@media (max-width: 749px) {
  .sticky-atc-banner__image {
    display: none;
  }
}

/* Product info */
.sticky-atc-banner__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 1rem;
}

/* Mobile: Info takes full width, flex layout for title/price */
@media (max-width: 749px) {
  .sticky-atc-banner__info {
    display: none; /* titre masqué sur mobile */
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }
}

.sticky-atc-banner__title {
  /* Titre agrandi pour remplir au max la hauteur du banner. Ellipsis "…" si trop
     long (nowrap + overflow hidden). Réglable. Pas de line-height forcé (sinon
     les jambages sont rognés). letter-spacing aligné sur le titre produit (DS). */
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(var(--color-foreground));
}

/* Mobile: Remove margin, allow title to take available space */
@media (max-width: 749px) {
  .sticky-atc-banner__title {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
  }
}

.sticky-atc-banner__price {
  font-size: 1.2rem;
  opacity: 0.8;
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

/* Ancien prix barré dans le sticky (à côté de l'image produit) */
.sticky-atc-banner__price-compare {
  text-decoration: line-through;
  opacity: 0.55;
}

/* Mobile: Price is more prominent, aligned right */
@media (max-width: 749px) {
  .sticky-atc-banner__price {
    font-size: 1.4rem;
    font-weight: 500;
    opacity: 0.8;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Banner button */
.sticky-atc-banner__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.2rem 2rem;
  background: black;
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

/* Mobile: Full width button on second row */
@media (max-width: 749px) {
  .sticky-atc-banner__button {
    width: 100%;
    padding: 1rem;
    justify-content: space-between;
  }
}

.sticky-atc-banner__button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.sticky-atc-banner__button-text {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.sticky-atc-banner__button-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.4rem;
  opacity: 1;
  flex: 0 0 auto;
}

/* =========================================================
   DS — Boutons "ajout au panier" (produit, sticky, side-cart)
   • texte a 1.4rem
   • hover = couleurs du bouton de la 1re section de la home (#121212 / #fff)
   • au survol, la fleche glisse de gauche a droite jusqu'au prix
     (un espaceur flex grandit et pousse la fleche vers le prix)
   ========================================================= */
.product-form__buttons .product-form__submit,
.cart-drawer .cart__checkout-button {
  font-size: 1.4rem !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* layout texte|prix : produit seulement quand le prix est injecte (sinon on
   garde le centrage Dawn) ; side-cart toujours (prix present dans le markup). */
.product-form__buttons .product-form__submit:has(.button-price-wrapper),
.cart-drawer .cart__checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

/* prix a droite, meme taille, ne retrecit pas */
.product-form__submit .button-price-wrapper,
.cart-drawer .cart__checkout-button > div:last-child {
  font-size: 1.4rem;
  flex: 0 0 auto;
}

/* CTA en solde : ancien prix barré + prix courant, séparés d'un espace */
.button-price-wrapper {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
}

.button-price--compare {
  text-decoration: line-through;
  opacity: 0.6;
}

/* groupe texte + fleche : occupe l'espace jusqu'au prix */
.product-form__submit > span:has(.text-arrow),
.cart-drawer .cart__checkout-button > div:first-child {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* la fleche ne retrecit jamais */
.product-form__submit .text-arrow,
.cart__checkout-button .text-arrow,
.sticky-atc-banner__button .text-arrow {
  flex: 0 0 auto;
}

/* l'espaceur, collapse par defaut, grandit au survol -> pousse la fleche */
.button-arrow-spacer {
  flex: 1 1 0;
  max-width: 1rem; /* espace au repos entre le texte et la fleche */
  transition: max-width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.product-form__submit:hover .button-arrow-spacer,
.cart__checkout-button:hover .button-arrow-spacer,
.sticky-atc-banner__button:hover .button-arrow-spacer {
  max-width: 40rem;
}

/* hover : memes couleurs que le bouton de la 1re section de la home */
.product-form__buttons .product-form__submit:hover:not([disabled]),
.cart-drawer .cart__checkout-button:hover:not([disabled]),
.sticky-atc-banner__button:hover:not([disabled]) {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* au survol : pas de bordure (le ::after de Dawn en dessine une au hover) */
.product-form__submit:hover::after,
.cart-drawer .cart__checkout-button:hover::after {
  box-shadow: none !important;
}

/* =========================================================
   FAQ (sections faq + faq-filtered, conteneur .section-faq)
   Questions en noir 100% / weight 400, reponses en noir 60% / weight 400.
   ========================================================= */
.section-faq .accordion__title {
  color: #000000;
  font-weight: 400;
}
.section-faq .faq__answer,
.section-faq .faq__answer * {
  color: #00000099; /* noir 60% */
  font-weight: 400;
}

/* =========================================================
   Header desktop — menus a sous-menu : la croix "+" se transforme
   en "-" avec la meme animation que les accordeons FAQ
   (croisement opacity + rotation, 0.3s).
   ========================================================= */
.header__toggle-icon {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
/* .header__menu-item est prefixe ici pour battre la specificite de
   base.css `.header__menu-item span { transition: text-decoration ... }`
   (0,1,1) qui ecrasait sinon notre transition opacity/transform. */
.header__menu-item .header__toggle-plus,
.header__menu-item .header__toggle-minus {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.header__toggle-plus svg,
.header__toggle-minus svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.2s ease;
}
/* ferme : "+" visible, "-" cache */
.header__toggle-plus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.header__toggle-minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
/* ouvert (clic = [open]) : "+" -> "-" avec transition.
   On cible le summary direct uniquement (ok pour menus imbriques). */
details[open] > summary .header__toggle-plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}
details[open] > summary .header__toggle-minus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
/* placement : niveau 1 a droite (comme l'ancienne icone) */
.header__inline-menu > ul > li > header-menu > details > summary {
  position: relative;
}
.header__inline-menu > ul > li > header-menu > details > summary > .header__toggle-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
/* sous-menus imbriques : en flux, a droite du libelle */
.header__submenu .header__toggle-icon {
  margin-left: 1rem;
}

/* Pas de soulignement quand un menu de 1er niveau est ouvert
   (annule base.css `details[open] > .header__menu-item { text-decoration: underline }`) */
.header__inline-menu details[open] > .header__menu-item {
  text-decoration: none !important;
}

/* Liens du footer : meme hover que les textes du menu header (gris clair,
   sans soulignement). Le mix-blend-mode du header est inutile ici. */
.footer .list-menu__item--link,
.footer .copyright__content a,
.footer .list-menu__item--active {
  transition: color 0.2s ease;
}
.footer .list-menu__item--link:hover,
.footer .copyright__content a:hover {
  color: lightgray !important;
  text-decoration: none !important;
}

/* Lien actif (page courante) : identique aux autres liens du footer — on retire
   le gris "page active" pour qu'il soit noir comme ses voisins (repos = .link--text
   à 70 %), gris clair seulement au survol. */
.footer .list-menu__item--active {
  color: rgba(var(--color-foreground), 0.70) !important;
  text-decoration: none !important;
}
.footer .list-menu__item--active:hover {
  color: lightgray !important;
  text-decoration: none !important;
}

/* =========================================================
   Header mega-menus : parents INTERMEDIAIRES (titres de section niveau 2,
   ex. Browse / What's hot / Style) + sous-liens (niveau 3).
   Les items de 1er niveau (barre de nav) ne sont PAS modifies.
   ========================================================= */
/* Parents intermediaires = titres de section (niveau 2) */
.header__inline-menu .mega-menu__link--level-2 {
  font-weight: 500 !important;
  font-size: 3rem;
  letter-spacing: -0.04em;
  color: #000000 !important;
  opacity: 1 !important; /* annule le opacity:0.5 de la regle existante (l.1628) */
  text-transform: none !important; /* retire la majuscule auto */
  mix-blend-mode: normal !important;
}
/* Survol niveau 2 : identique au niveau 3 (gris clair, sans soulignement). */
.header__inline-menu .mega-menu__link--level-2:hover {
  color: lightgray !important;
  text-decoration: none !important;
}
/* Sous-liens = liens niveau 3 */
.header__inline-menu .mega-menu__link:not(.mega-menu__link--level-2) {
  font-weight: 400 !important;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: #000000 !important;
  mix-blend-mode: normal !important;
}
/* Survol des enfants (niveau 3) : comme le footer (gris clair, sans soulignement) */
.header__inline-menu .mega-menu__link:not(.mega-menu__link--level-2):hover {
  color: lightgray !important;
  text-decoration: none !important;
}

/* Retire le style "page courante" (focus/actif) du mega-menu (niveaux 2 et 3) :
   ni soulignement ni couleur differente — l'item courant s'affiche normalement
   (annule component-mega-menu.css:72). La couleur normale (#000) reste imposee
   par les regles de niveau 2 / niveau 3 plus specifiques. */
.header__inline-menu .mega-menu__link--active,
.header__inline-menu .mega-menu__link--active:hover {
  text-decoration: none !important;
  text-decoration-thickness: 0 !important;
}

/* Menu deroulant non-mega (au cas ou) : pas de soulignement sur l'item courant */
.header__inline-menu .list-menu__item--active {
  text-decoration: none !important;
}

/* Filet de securite : neutralise aussi le soulignement/couleur portes par le
   LIEN ou le SUMMARY de la page courante (aria-current), a tous les niveaux,
   au cas ou ils ne viendraient pas des classes ci-dessus. */
.header__inline-menu a[aria-current='page'],
.header__inline-menu summary[aria-current='page'],
.header__inline-menu a[aria-current='page'] span,
.header__inline-menu summary[aria-current='page'] span {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 0 !important;
}
/* Transition douce de couleur AU SURVOL UNIQUEMENT (sur :hover) : on n'anime
   jamais le swap #fff<->#000 du systeme de blend a l'entree/sortie du header
   (c'est lui qui provoquait le "clip"). Le retour hors survol est instantane. */
/* Sous-liens du panneau mega : pas concernes par le blend -> transition pleine. */
.header__inline-menu .mega-menu__link {
  transition: color 0.2s ease, text-decoration var(--duration-short) ease;
}
/* Items de 1er niveau + libelles d'icones : le blend swappe la COULEUR du texte
   a l'entree/sortie du header. Pour un survol doux dans les DEUX sens sans
   "clip", on anime l'OPACITE (le survol estompe), pas la couleur. */
.header__menu-item span,
.header__search-text,
.header__account-text,
.header__cart-text {
  transition: opacity 0.2s ease;
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   =================================================================== */

/* Mobile (<750px) - Most rules now inline above */
@media (max-width: 749px) {
  .sticky-atc-banner__inner {
    padding: 0.9rem;
  }

  .sticky-atc-banner__title {
    font-size: 2.4rem;
  }

  .sticky-atc-banner__button {
    font-size: 1.4rem;
    min-height: calc(4.5rem + var(--buttons-border-width) * 2);
  }

  .sticky-atc-banner__button-price {
    font-size: 1.4rem;
  }
}

/* Tablet (750px - 989px) */
@media (min-width: 750px) and (max-width: 989px) {
  .sticky-atc-banner__inner {
    padding: 0.9rem;
  }

  .sticky-atc-banner__image {
    width: 4.5rem;
    height: 4.5rem;
  }

  .sticky-atc-banner__button {
    padding: 1.4rem 2.5rem;
  }
}

/* Desktop (≥990px) */
@media (min-width: 990px) {
  .sticky-atc-banner__inner {
    padding: 0.9rem;
  }

  .sticky-atc-banner__image {
    display: block !important;
  }

  .sticky-atc-banner__image {
    width: 4.5rem;
    height: 4.5rem;
  }

  .sticky-atc-banner__button:hover {
    background: rgba(0, 0, 0, 0.85);
  }

  .sticky-atc-banner__title {
    font-size: 3.5rem;
  }

  .sticky-atc-banner__price {
    font-size: 1.4rem;
    line-height: 1;
  }

  .sticky-atc-banner__button {
    padding: 1rem;
    font-size: 1.4rem;
    min-height: calc(4.5rem + var(--buttons-border-width) * 2);
    max-width: 35%;
    width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .sticky-atc-banner__button-price {
    font-size: 1.4rem;
  }
}

/* =========================================================
   PRODUCT ACCORDION ANIMATION (Footer Style)
   Copy this to the END of your custom.css file
   ========================================================= */

/* Smooth height animation - same as footer */
.product__accordion .accordion__content {
  height: 0;
  overflow: hidden;
  transition: height 260ms ease;
  margin: 0;
}

/* When open, height is set via JavaScript */
.product__accordion details[open] .accordion__content {
  /* Height set dynamically by JS */
}

/* Prevent inner content overflow */
.product__accordion .accordion__content > * {
  overflow: hidden;
}

/* Hide default details marker */
.product__accordion summary::-webkit-details-marker,
.product__accordion summary::marker {
  display: none;
}

/* Summary cursor (hover = darken du fond, géré sur .product__accordion details) */
.product__accordion summary {
  cursor: pointer;
}

/* Accessibility */
.product__accordion summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.product__accordion .rte:after {
  padding-bottom: 2rem;
}

/* =========================================================
   PRODUCT ACCORDIONS — blocs gris pleins (Specifications,
   Delivery & Returns). Titre à gauche, "+/-" à droite, fond
   gris léger DS, filets supprimés, gap entre blocs.
   ========================================================= */
.product__accordion.accordion {
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 0 0.8rem 0 !important;
}

.product__accordion details {
  background: rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease;
}

.product__accordion details:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Sélecteur renforcé (.product__accordion details summary = 0,1,2) pour battre
   component-accordion.css `.accordion summary { padding: 1.5rem 0 }` et
   appliquer le padding gauche/droite des blocs. */
.product__accordion details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 2rem;
}

.product__accordion .summary__title {
  display: flex;
  align-items: center;
}

.product__accordion .accordion__content {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* =========================================================
   END OF ACCORDION ANIMATION CODE
   ========================================================= */

@media (min-width: 990px) {
  .product--stacked .product__media-item:not(:first-child) {
    width: calc(97% / 3) !important;
    max-width: calc(100% / 3) !important;
  }

  .product:not(.product--columns) .product__media-list .product__media-item:first-child, .product:not(.product--columns) .product__media-list .product__media-item--full {
    width: 100% !important;
  }

  .media_number {
    font-size: 1.2rem;
    border-top: .5px black solid;
    padding: 0.5rem 0;
  }

  .slider-mobile-gutter .grid {
    row-gap: 2rem !important;
  }
}

@media (max-width: 989px) {
  .media_number {
    display:none !important;
  }
}

.collection-hero {
  padding-top: 4rem !important;
}

.facets-container .product-count {
  display: none;
}

.mobile-facets__open .svg-wrapper {
  display: none;
}

.mobile-facets__disclosure {
  background: rgb(0,0,0, .04);
  padding: 1rem 2rem;
}

.mobile-facets__open>*+* {
  margin: 0 !important;
}

#product-grid {
  margin-top: 1rem;
}

.collection-hero__description {
  max-width: 100% !important;
  font-size: 1.2rem !important;
}

.facets.small-hide #FacetSortDrawerForm {
  background: rgb(0,0,0, .04);
  padding: 1rem 2rem;
  margin-bottom: 0 !important;
}

.facet-filters {
  padding: .5rem 0 !important;
}

#FacetFiltersPillsForm {
  margin-bottom: 0  !important;
}

@media (max-width: 989px) {
  .mobile-facets__inner {
    max-width: calc(100vw - 3rem) !important;
    width: calc(100vw - 3rem) !important;
  }

  .mobile-facets__count {
    flex-grow: 0 !important;
    font-size: 3rem !important;
    color: rgb(var(--color-foreground)) !important;
  }

  .mobile-facets__header-inner {
    line-height: 1;
  }

  .mobile-facets__header {
    border-bottom: .5px solid black !important;
    padding: 1rem 0 2rem 1rem !important;
  }

  .mobile-facets__close {
    color: rgb(var(--color-foreground));
    top: 1rem !important;
    right: 0 !important;
  }

  .mobile-facets__close .svg-wrapper {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }
}

@media (min-width: 990px) {
  .mobile-facets__inner {
    width: 35vw !important;
    max-width: 35vw !important;
  }

  .mobile-facets__count {
    flex-grow: 0 !important;
    font-size: 6rem !important;
    color: rgb(var(--color-foreground)) !important;
  }

  .mobile-facets__header {
    border-bottom: .5px solid black !important;
    padding: 2rem 1rem !important;
  }

  .header__search details[open] .header__icon-close{
    display: none !important;
  }
}

.mobile-facets__main {
  padding: 2rem 0 0 !important;
}

.mobile-facets__summary {
  padding: 1.5rem 2rem !important;
}

.mobile-facets__footer {
  border-top: .5px solid black !important;
  padding: 1rem !important;
}

.mobile-facets__close-button {
  padding: 1.5rem 2rem !important;
  margin-top: 2rem !important;
}

.mobile-facets__label {
  padding: 1.5rem 2rem !important;
}

.mobile-facets__info {
  padding: 0 2rem !important;
  margin: 0;
}

.mobile-facets__header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mobile-facets__heading.small-hide {
  font-size: 6rem !important;
}

.mobile-facets__heading.medium-hide.large-up-hide {
  font-size: 3rem !important;
}

.collection-hero.collection-hero--with-image {
  padding: 1rem 0 0 0 !important;
}

.collection-hero__inner {
  flex-direction: column-reverse !important;
  align-items: flex-start !important;
}

.collection-hero__image-container {
  margin-left: 0 !important;
}

.mobile-facets {
  background-color: transparent !important;
}

.mobile-facets__open:hover {
  /* color: transparent !important; */
}

@media (max-width: 989px) {
  .mobile-facets__wrapper .disclosure-has-popup.menu-opening > summary::before {
    pointer-events: auto;
    background-color: rgba(var(--color-foreground), 0.5) !important;
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    opacity: 1 !important;
    visibility: visible !important;
    height: 100vh !important;
  }

  .mobile-facets__wrapper .disclosure-has-popup > summary::before {
    background-color: transparent !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0 !important;
    visibility: visible !important;
    /*z-index: 60 !important;*/
    inset: 0 !important;
    display: block !important;
    content: "" !important;
    pointer-events: auto;
    position: fixed !important;

    transition: 
      background-color var(--duration-default) ease,
      backdrop-filter var(--duration-default) ease,
      opacity var(--duration-default) ease,
      visibility var(--duration-default) ease !important;
  }
}


@media (min-width: 990px) {
  /* Force the ::before to ALWAYS exist */
  .mobile-facets__wrapper .disclosure-has-popup > summary::before {
    display: block !important;
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 60 !important;
    pointer-events: none;
    visibility: visible !important;
    height: 100vh !important;

    /* Hidden state */
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    
    transition: 
      background-color var(--duration-default) ease,
      backdrop-filter var(--duration-default) ease,
      opacity var(--duration-default) ease,
      visibility var(--duration-default) ease !important;
  }

  /* Visible state - only with menu-opening class */
  .mobile-facets__wrapper .disclosure-has-popup.menu-opening:open > summary::before {
    pointer-events: auto;
    background-color: rgba(var(--color-foreground), 0.5);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    opacity: 1;
    visibility: visible !important;
  }
}

.article-card__excerpt {
  display: none;
}

.article-card__image-wrapper.card__media .media img {
  padding: 0 !important;
}

.article-template {
  padding-top: 60px;
}

.article-template__content {
  padding-bottom: 80px !important;
  letter-spacing: -.5px !important;
  line-height: 2.2rem;
}

.caption-with-letter-spacing {
  text-transform: none !important;
  letter-spacing: 0px;
  font-weight: 400;
  font-size:1.2rem;
  width: 100%;
  display: block;
  text-align: center;
  padding-bottom: 1rem;
}

.article-template__title {
  letter-spacing: -1px;
  text-align: center;
}

.article-card-wrapper .card__information {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.article-card-wrapper .card__heading {
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  transition: opacity 0.2s ease;
  letter-spacing: -.5px;
  color: black;
}

.article-card__info {
  padding-top: 0 !important;
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
}

.article-card__tags {
  font-size: 1.2rem;
  letter-spacing: -.3px;
  opacity: 1;
  color: black;
}

.article-card__info .circle-divider {
  display: block;
  font-size: 1.2rem;
  opacity: 0.5;
  letter-spacing: -.3px;
}

.blog .page-width-desktop {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.section-latest-articles .title-wrapper-with-link {
  align-items: flex-end;
}

@media (min-width: 990px) {
  .blog .title-wrapper-with-link .blog__title {
    font-weight: 500;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -1px;
  }

  .article-card-wrapper .card__heading {
    font-size: 1.4rem;
  }

  .main-blog .title--primary,
  .main-blog .main-blog__heading {
    font-size: 8rem;
    letter-spacing: -3px;
    margin: 2rem 0;
  }

  .main-blog {
    padding-top: 4rem !important;
    padding-bottom: 10rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .article-template__hero-container {
    max-width: 98rem !important;
  }

  .page-width--narrow {
    max-width: 100rem !important;
  }
}

@media (max-width: 989px) {
  .blog .title-wrapper-with-link .blog__title {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -1px;
  }

  .main-blog .title--primary,
  .main-blog .main-blog__heading {
    font-size: 3rem;
    letter-spacing: -1px;
    text-align: center;
  }

  .article-template__hero-container {
    padding: 0 1rem;
  }

  .article-template__hero-medium {
    height: 100% !important;
    aspect-ratio: 1 / 1;
  } 

  .main-blog {
    padding-top: 4rem !important;
    padding-bottom: 10rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .blog-article--hero .blog-article__title {
    font-size: 3rem;
    letter-spacing: -1px;
    line-height: 1.2;
    font-weight: 500;
  }

  .blog-article__content {
    padding: 1rem 0 2rem !important;
  }
}

/* =========================================================
   BLOG ARTICLES - CUSTOM GRID LAYOUT
   ========================================================= */

/* Reset default blog styles */
.main-blog .blog-articles,
.main-blog .blog-articles--collage {
  display: block;
}

/* =========================================================
   ARTICLE CARD BASE STYLES
   ========================================================= */

.blog-article {
  position: relative;
}

.blog-article__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-article__link:hover .blog-article__title {
  opacity: 1;
}

/* Image container */
.blog-article__image {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.05);
}

.blog-article__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-article__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.05);
}

.blog-article__placeholder .placeholder-svg {
  width: 50%;
  height: 50%;
  opacity: 0.3;
}

/* Content area */
.blog-article__content {
  padding: 1rem 0;
}

/* Tags */
.blog-article__tags {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.blog-article__tag {
  font-size: 1.2rem;
  letter-spacing: -.3px;
  opacity: 1;
  color: black;
}

/* Title */
.blog-article__title {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  transition: opacity 0.2s ease;
  letter-spacing: -.5px;
  color: black;
}

.blog-article__details {
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
}

/* Date */
.blog-article__date {
  display: block;
  font-size: 1.2rem;
  opacity: 0.5;
  letter-spacing: -.3px;
}

/* =========================================================
   MOBILE LAYOUT (Default - Single Column)
   ========================================================= */

/* Hero section - stack vertically on mobile */
.blog-hero {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.blog-hero__left,
.blog-hero__right {
  width: 100%;
}

.blog-hero__right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* All images are 1:1 square on mobile */
.blog-article__image--hero,
.blog-article__image--side,
.blog-article__image--square {
  aspect-ratio: 1 / 1;
}

/* Grid section - single column on mobile */
.blog-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Filtered grid - same as regular grid */
.blog-grid--filtered {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* =========================================================
   DESKTOP LAYOUT (min-width: 990px)
   ========================================================= */

@media screen and (min-width: 990px) {
  
  /* Hero Section: 2 columns - 2/3 left (sticky) + 1/3 right */
  .blog-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .blog-hero__left .blog-article__content {
    padding: 1rem 0 2rem !important;
  }

  /* Left column - sticky */
  .blog-hero__left {
    position: sticky;
    top: 4.4rem;
    align-self: start;
    height: fit-content;
  }

  /* Right column - 3 stacked articles */
  .blog-hero__right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Hero image (left) - natural aspect ratio, full width */
  .blog-article__image--hero {
    aspect-ratio: auto;
    width: 100%;
  }

  .blog-article__image--hero .blog-article__img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* Side images (right column) - full width of column */
  .blog-article__image--side {
    aspect-ratio: auto;
    width: 100%;
  }

  .blog-article__image--side .blog-article__img {
    width: 100%;
    height: 40rem;
    object-fit: cover;
  }

  /* Grid Section: 4 columns */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  /* Filtered Grid: Same 4 columns layout */
  .blog-grid--filtered {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  /* Grid images - 1:1 square */
  .blog-article__image--square {
    aspect-ratio: 1 / 1;
  }

  /* Adjust title size for grid items */
  .blog-article--grid .blog-article__title {
    font-size: 1.4rem;
  }

  /* Larger title for hero article */
  .blog-article--hero .blog-article__title {
    font-size: 3.5rem;
    letter-spacing: -1px;
    line-height: 1.2;
    font-weight: 500;
  }

  .blog-article--hero .blog-article__tag {
    font-size: 1.2rem;
  }

  .blog-article--hero .blog-article__date {
    font-size: 1.2rem;
  }
}

/* =========================================================
   HOVER EFFECTS (Desktop only)
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .blog-article__img {
    transition: transform 0.2s ease;
  }

  .blog-article__link:hover .blog-article__img {
    transform: scale(1.03);
  }
}

/* =========================================================
   404 PAGE — align with site-wide styles
   ========================================================= */

/* Titre 404 — même registre display que les titres de section du DS :
   weight 500, noir, tracking négatif (4rem mobile / 8rem desktop).
   (Le sous-texte rebondissant garde son style propre dans main-404.liquid.) */
.template-404 .title {
  font-weight: 500;
  color: #000;
  letter-spacing: -0.03em;
  font-size: 4rem;
}

@media screen and (min-width: 990px) {
  .template-404 .title {
    font-size: 8rem;
    letter-spacing: -0.05em;
  }
}

/* =========================================================
   HIDE DEFAULT DAWN BLOG STYLES
   ========================================================= */

/* Hide the default article-card if it somehow gets rendered */
.main-blog .article-card {
  display: none !important;
}


/* =========================================================
   CART PAGE (/cart/) — align with site-wide styles
   Scoped to body.template-cart to avoid touching the drawer.
   ========================================================= */

body.template-cart {
  margin-top: 10rem;
}

@media screen and (min-width: 990px) {
  body.template-cart .title--primary {
    font-size: 8rem;
    letter-spacing: -1px;
  }
}

@media screen and (max-width: 989px) {
  body.template-cart .title--primary {
    font-size: 3rem;
    letter-spacing: -1px;
  }
}

body.template-cart .cart__empty-text,
body.template-cart .cart__login-title {
  font-size: 3rem !important;
  letter-spacing: -.5px;
}

body.template-cart .cart__login-paragraph {
  font-size: 1.4rem;
  letter-spacing: -.5px;
}

/* --- Items section border -------------------------------- */
body.template-cart .cart__items {
  padding-bottom: 0;
  border-bottom: none !important;
}

body.template-cart .cart-items {
  border-collapse: collapse !important;
}

body.template-cart .cart-item {
  margin: 1rem 0 !important;
  gap: 1rem;
}

body.template-cart .cart-item td {
  margin: 1rem 0 !important;
}

/* --- Item row separators --------------------------------- */
body.template-cart .cart-items tbody .cart-item {
  border-top: 0.5px solid black;
}

/* --- Table header (visible at 750–989px, already hidden
       at ≥990px by the drawer rule; hidden below 750px) --- */
body.template-cart .cart-items th {
  border-bottom: 0.5px solid black;
  opacity: 1;
  font-size: 1.2rem;
  font-weight: 400;
  padding-bottom: 1.2rem;
}

@media (max-width: 749px) {
  body.template-cart .cart-items thead {
    display: none;
  }
}

/* --- Product image cell — grey tint + flex centering,
       matches .cart-drawer .cart-item__media -------------- */
body.template-cart .cart-item__media {
  background: var(--colors-dark-4, rgba(0, 0, 0, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Quantity controls ----------------------------------- */
body.template-cart .quantity:after {
  box-shadow: none !important;
}

/* Total stepper width (matches .drawer__cart-items-wrapper .quantity) */
body.template-cart .cart__items .quantity {
  width: calc(8rem / var(--font-body-scale) + var(--inputs-border-width) * 2) !important;
  min-height: auto;
}

body.template-cart .quantity__button {
  width: calc(2rem / var(--font-body-scale)) !important;
  height: calc(2rem / var(--font-body-scale));
  background-color: var(--colors-dark-4, rgba(0, 0, 0, 0.04)) !important;
}

body.template-cart .quantity__input {
  padding: 0 !important;
  font-size: 1.2rem !important;
}

body.template-cart .cart-item__quantity-wrapper {
  justify-content: space-between;
}

/* --- Price ----------------------------------------------- */
body.template-cart .cart-item__price-wrapper .price,
body.template-cart .cart-item__price-wrapper .price--end {
  letter-spacing: 0 !important;
}

/* --- Product options ------------------------------------- */
body.template-cart .cart-item__details dl .product-option {
  font-size: 1.2rem !important;
}

/* --- Totals (matches .cart-drawer__footer .totals + h2) -- */
body.template-cart .totals__total,
body.template-cart .totals__total-value {
  font-weight: 600 !important;
  color: black;
  font-size: 3rem !important;
  letter-spacing: 0 !important;
}

/* --- Tax note (matches .cart-drawer__footer small) ------- */
body.template-cart .tax-note {
  font-size: 1.2rem;
}

@media screen and (min-width: 990px) {
  body.template-cart .tax-note {
    margin: 1rem 0 2rem auto !important;
  }
}

/* --- Checkout button (matches .cart-drawer .cart__checkout-button) */
body.template-cart .cart__checkout-button {
  justify-content: space-between;
  padding: 0 1rem !important;
}

/* --- Footer border --------------------------------------- */
body.template-cart .cart__footer-wrapper {
  border-top: 0.5px solid black;
}

/* --- Desktop: tighten table cell top padding ------------ */
@media screen and (min-width: 750px) {
  body.template-cart .cart-items td {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* =========================================================
   LATEST ARTICLES SECTION
   ========================================================= */

/* Mobile: horizontal scrollable row — same pattern as blog-hero/blog-grid */
.latest-articles__grid {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 1rem;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 1.5rem;
}

.latest-articles__grid::-webkit-scrollbar {
  display: none;
}

.latest-articles__grid .blog-article {
  flex-shrink: 0;
  width: 75vw;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Tablet: 2-column grid */
@media screen and (min-width: 750px) {
  .latest-articles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    overflow-x: unset;
    padding-bottom: 0;
  }

  .latest-articles__grid .blog-article {
    width: auto;
  }
}

/* Desktop: column count driven by --article-columns, set inline by Liquid */
@media screen and (min-width: 990px) {
  .latest-articles__grid {
    grid-template-columns: repeat(var(--article-columns, 3), 1fr);
  }
}

/* =========================================================
   FAQ SECTION
   ========================================================= */

/* Heading now uses .title class — just add spacing below */
.title-wrapper + .faq__items {
  margin-top: 2rem;
}

.section-faq .title-wrapper {
  margin-bottom: 0;
}

.section-faq .title {
  line-height: 0.9;
  letter-spacing: -1px;
  font-weight: 500;
}

@media screen and (min-width: 990px) {
  .section-faq .title {
    line-height: 1;
    font-size: 8rem;
    letter-spacing: -1px;
  }
}

/* Items container: bottom border closes the list visually */
.faq__items {
  display: block;
  border-bottom: 0.5px solid black;
}

/* Each item: top border acts as separator */
.faq__item {
  border-top: 0.5px solid black;
}

/* Summary row = Question */
.faq__item summary {
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker,
.faq__item summary::marker {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover {
    opacity: 0.7;
  }
}

/* Title grows to fill available width, pushing toggle icon right */
.faq__item .summary__title {
  display: flex;
  flex: 1;
}

/* Q — bold, full black, prominent */
.faq__item .accordion__title {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgb(var(--color-foreground));
  letter-spacing: 0;
  margin: 0;
}

/* Content wrapper: animated by JS */
.faq__item .accordion__content {
  height: 0;
  overflow: hidden;
  transition: height 260ms ease;
  margin: 0;
  padding: 0;
}

/* A — visually separated: indent + left accent rule + lighter colour */
.faq__answer {
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(var(--color-foreground), 0.70);
  letter-spacing: 0;
  padding: 0.2rem 0 1.5rem 1.2rem;
  margin-left: 0.2rem;
}

/* Accessibility */
.faq__item summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =========================================================
   FAQ WITH FILTERS
   ========================================================= */

.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.faq-filter-btn {
  appearance: none;
  background: transparent;
  border: 0.5px solid black;
  border-radius: 100px;
  padding: 0.55rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .faq-filter-btn:hover {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
}

.faq-filter-btn--active {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

.faq-filter-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.faq__item[hidden] {
  display: none;
}

.shopify-pc__banner__dialog {
  padding: 1rem !important;
}

.shopify-pc__prefs__dialog {
  border-radius: 0px !important;
}

.shopify-pc__banner__dialog .shopify-pc__banner__body-title,
#shopify-pc__prefs__header-title {
  letter-spacing: -.5px !important;
}

.shopify-pc__banner__dialog h2 {
  letter-spacing: -.5px !important;
}

.shopify-pc__prefs__intro-main h3 {
  letter-spacing: -.5px !important;
  margin: 0 0 10px 0 !important;
}

.shopify-pc__prefs__intro-main p {
  font-size: 1.2rem !important;
}

.shopify-pc__prefs__option label {
  letter-spacing: -.5px !important;
}

.shopify-pc__prefs__option p {
  font-size: 1.2rem !important;
}

.shopify-pc__banner__dialog p,
.shopify-pc__prefs__header-actions {
  font-size: 1.2rem !important;
}

.shopify-pc__banner__dialog .shopify-pc__banner__btns,
.shopify-pc__banner__dialog .shopify-pc__banner__btns-granular {
  font-size: 1.2rem !important;
}

.shopify-pc__banner__dialog .shopify-pc__banner__dialog, 
.shopify-pc__banner__dialog button {
  margin: 1rem 0 0 !important;
  border-radius: 0px;
}

.shopify-pc__banner__dialog button,
.shopify-pc__prefs__header-actions button {
  border-radius: 0px !important;
}

.search__input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.predictive-search__heading {
  font-size: 2rem !important;
  letter-spacing: -.5px !important;
}

.template-search__search .field__input~.field__label,
.template-search__search .field__input {
  letter-spacing: -.5px;
}

.template-search__header p {
  letter-spacing: -.5px;
}

.predictive-search__item--term {
  letter-spacing: -.5px;
}

.predictive-search__heading {
  margin: 0 !important;
}

/* =========================================================
   DESKTOP MEGA-MENU: level-2 labels that have children
   (e.g. "Browse", "What's Hot", "Style" — rendered as <span>)
   — no pointer, no hover effect, no uppercase
   ========================================================= */
@media (min-width: 990px) {
  .mega-menu__link--has-children {
    cursor: default;
    pointer-events: none;
    text-decoration: none !important;
    color: black !important;
  }
}
/* The logo reduction is intentionally driven by .scrolled-past-header (see rule
   ".scrolled-past-header .header__heading-logo-wrapper"), the SAME trigger the
   hover path uses, so the shrink speed/feel is identical whether the cursor is
   over the header or not. The green bar is synced to that same trigger in JS
   (see bottom-announcement-bar.liquid), so bar + logo animate together. */

/* =========================================================
   NON-HOME: lower the small fixed logo by the bar height
   On non-home pages the logo stays small and is position:fixed, so it does NOT
   follow the header's top offset (body .section-header { top: var(...) }) and
   ends up half-hidden behind the green bar. Shift it down by the bar height,
   using the flipping variable so it rides back up in sync when the bar hides on
   scroll. Falls back to 0 (no shift) when the bar is inactive.
   ========================================================= */
body:not(.template-index) .header__heading-link {
  translate: 0 var(--mobe-announcement-height, 0px) !important;
  transition: translate 0.15s cubic-bezier(.52, 0, .61, .99) !important;
}

/* =========================================================
   PRODUCT TITLES: no underline on hover
   Cards (grids, carousels, collections, related, recos), side cart & cart page
   product names. Overrides Dawn's .underline-links-hover:hover a and the
   default underlined-link hover thickening.
   ========================================================= */
.underline-links-hover:hover a,
.card__heading a:hover,
.card-information .card__heading a:hover,
.product-card-wrapper:hover .card__heading a,
.card-wrapper .full-unstyled-link:hover,
.cart-item__name:hover {
  text-decoration: none !important;
  text-decoration-thickness: 0 !important;
}

/* =========================================================
   PRIX "From X€" DES CARTES coupe : cause = .card__content { width:100% } en
   box-sizing content-box (grid item) + padding 1rem -> deborde de 2rem a droite,
   clippe par overflow:hidden. Fix : box-sizing border-box (width 100% inclut le
   padding, plus de debordement).
   ========================================================= */
.card__content,
.card__information {
  box-sizing: border-box !important;
}
.card__information .price,
.card-information .price {
  white-space: normal;
}

/* =========================================================
   VISUELS PRODUITS CARRES + VERTICAUX (cohabitation, Option "cadre gris").
   Image toujours entiere (object-fit: contain), jamais rognee :
   - cards : centree dans le cadre gris (marges egales selon le ratio) ;
   - page produit mobile : contain + marges laterales pour que les visuels
     carres ne touchent pas les bords et ne paraissent pas trop grands.
   La transition de changement de variante (smooth-variant-media.js) utilise
   deja object-fit: contain et mesure les rects dynamiquement -> compatible.
   ========================================================= */
.card__media .media img,
.product-card-wrapper .card__media .media img {
  object-fit: contain !important;
}

@media (max-width: 989px) {
  /* PAGE PRODUIT : seul le PREMIER media (l'affiche) passe en contain + marges.
     Les AUTRES medias gardent leur comportement d'origine (pas de letterbox sur
     les visuels horizontaux). Le padding est mis sur l'ITEM (l'image est en
     position:absolute, le padding sur .media ne la decalait pas). */
  /* 1er media (affiche) — HOMOGENEISATION PAR FORMAT (metafield custom.poster_format,
     classe .poster--square / .poster--vertical / .poster--horizontal sur la liste).
     Les affiches sont des PNG carres ; on rogne le vide selon le format :
       - square  : aucun crop (canevas carre entier, contain) -> defaut ;
       - vertical: vide gauche/droite -> cadre PORTRAIT + cover (coupe les cotes) ;
       - horizontal: vide haut/bas -> cadre PAYSAGE + cover (coupe haut/bas).
     L'image reste absolute ; le JS de transition lit l'object-fit reel -> coherent.
     Reglages : --poster-box-v (hauteur boite portrait) / --poster-box-h (boite paysage). */

  /* Defaut + square : canevas entier, contain. Marges laterales (6rem) pour
     aerer. FOND GRIS sur UNE SEULE couche (le slider-component) : rgba(0,0,0,0.05)
     sur blanc = #F2F2F2, soit EXACTEMENT la couleur du stage de transition (cf.
     smooth-variant-media.js). L'item/media/img sont transparents (ils laissent
     voir ce gris) -> plus d'empilement qui rendait le gris plus fonce que le
     stage et provoquait le changement de teinte pendant la transition.
     Le slider-component est full-bleed (marges negatives Dawn) et s'arrete au
     progress-bar. */
  .product__media-wrapper slider-component {
    background: rgba(0, 0, 0, 0.05) !important;
  }
  .product__media-list .product__media-item:first-child,
  .product__media-list .product__media-item:first-child .media,
  .product__media-list .product__media-item:first-child .media img {
    background: #F2F2F2 !important;
  }
  .product__media-list .product__media-item:first-child {
    box-sizing: border-box !important;
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .product__media-list .product__media-item:first-child .media img {
    object-fit: contain !important;
  }

  /* VERTICAL : cadre portrait, cover -> rogne les cotes vides. 134% = ratio du
     contenu vertical (les cotes vides sont retires SANS rogner le contenu ;
     au-dela, ex. 140%, cover zoome et rogne le contenu). */
  .product__media-list.poster--vertical .product__media-item:first-child .media {
    padding-top: min(80vh, var(--poster-box-v, 134%)) !important;
  }
  .product__media-list.poster--vertical .product__media-item:first-child .media img {
    object-fit: cover !important;
    object-position: center !important;
  }

  /* HORIZONTAL : cadre paysage, cover -> rogne le vide haut/bas. */
  .product__media-list.poster--horizontal .product__media-item:first-child .media {
    padding-top: var(--poster-box-h, 75%) !important; /* 75% = 4:3 paysage */
  }
  .product__media-list.poster--horizontal .product__media-item:first-child .media img {
    object-fit: cover !important;
    object-position: center !important;
  }

  /* CARROUSELS DE CARDS : cards plus larges (le 2e produit deborde nettement du
     viewport -> on comprend que c'est un carrousel ; titre ne rencontre plus le
     prix, visuels plus grands). Scope .product-grid pour ne PAS toucher le
     slider d'images produit (qui partage grid--peek). max-width:none pour ne
     pas etre plafonne par la regle Dawn. */
  .product-grid.grid--peek .grid__item,
  .product-grid.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(55% - var(--grid-mobile-horizontal-spacing)) !important;
    max-width: none !important;
  }
  /* overflow-x:auto force overflow-y a "auto" -> scroll vertical parasite dans
     le carrousel. On le bloque, UNIQUEMENT sur les carrousels peek (homepage)
     pour ne PAS toucher le reco du side cart (.product-grid.slider sans peek)
     dont ca cassait la contrainte de largeur. */
  .product-grid.grid--peek.slider {
    overflow-y: hidden !important;
  }
  .card__media .media img,
  .product-card-wrapper .card__media .media img {
    padding: 0.6rem !important;
  }

  /* Titre de card : une seule ligne, "..." si trop long */
  .card__heading,
  .card__heading a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Titre produit centre. La div .product__title contient le <h1> ET un
   <a class="product__title"><h2 class="h1"></a> de secours : on le masque a fond
   (display:none + 0x0) pour qu'il ne fausse pas la largeur mesuree / le centrage,
   et on centre explicitement le h1 (bloc centre dans la div pleine largeur). */
.product__info-wrapper .product__title > a {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.product__info-wrapper .product__title {
  text-align: center !important;
  width: 100% !important;
}
.product__info-wrapper .product__title h1 {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   PRIX SOLDE sur CARDS PRODUITS : prix barre AU-DESSUS du prix (ou "From X€"),
   en colonne (au lieu de cote a cote).
   ========================================================= */
.card .price--on-sale .price__sale,
.card-information .price--on-sale .price__sale,
.card__information .price--on-sale .price__sale {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; /* prix barre + prix ferres a droite */
  text-align: right !important;
}
.card .price,
.card-information .price,
.card__information .price {
  text-align: right !important;
}

/* =========================================================
   BADGE "Sale" / "Sold out" des cards (cards avec media) : en haut a droite,
   ~1rem du bord. Positionne en absolute dans .card__content (qui couvre le
   media) ; le top negatif compense le padding interne de .card__content
   (calc(--image-padding + 1rem)) pour remonter au coin haut du visuel.
   ========================================================= */
.card__inner .card__content > .card__badge {
  position: absolute !important;
  top: -2rem !important;
  right: 1rem !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 3;
}

/* =========================================================
   SEARCH MODAL — contenu par defaut (search-modal__default-content) au DS.
   Les titres de section (.search-modal__section-title) suivent la regle
   standardisee des titres de section (cf. plus haut). Ici : textes secondaires
   (date, view-all) en 60%, titre d'article en 1.4rem/500, ls -0.01em.
   ========================================================= */
.search-modal__view-all {
  font-size: 1.2rem !important;
  letter-spacing: -0.01em !important;
  color: rgba(var(--color-foreground), 0.6) !important;
}
.search-modal__article-title {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: rgb(var(--color-foreground)) !important;
}
.search-modal__article-date {
  font-size: 1.2rem !important;
  letter-spacing: -0.01em !important;
  color: rgba(var(--color-foreground), 0.6) !important;
}

/* =========================================================
   COLLECTION HERO TITLE — coherent avec le DS des titres (le weight 500 est
   deja applique plus haut) : noir 100% + letter-spacing display
   (-0.03em mobile / -0.07em desktop). La taille reste celle du heading_size.
   ========================================================= */
.collection-hero__title {
  color: #000 !important;
  letter-spacing: -0.03em !important;
}
@media screen and (min-width: 990px) {
  .collection-hero__title {
    letter-spacing: -0.03em !important;
  }
}

/* =========================================================
   SEARCH MODAL — cards produit alignees sur les cards produit standard :
   cadre gris (#f3f3f3 + bordure + radius), image CONTAIN (non rognee), titre +
   prix sur la meme ligne, prix "from x€" attenue (#00000099, minuscule).
   ========================================================= */
.search-modal__product-link {
  background-color: #f3f3f3;
  border: 1px solid #eaeaea;
  border-radius: var(--border-radius, 0px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* remplit la card (les cards s'etirent a la plus haute) */
}
.search-modal__product-image {
  background: transparent !important;
  margin-bottom: 0 !important;
}
.search-modal__product-img,
.search-modal__product-placeholder {
  object-fit: contain !important;
  padding: 1.2rem !important;
}
.search-modal__product-info {
  padding: 1rem !important;
  margin-top: auto; /* pousse le 2e enfant (titre + prix) tout en bas */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 8px;
}
.search-modal__product-info .card__heading {
  min-width: 0;
  margin: 0;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-modal__product-info .price,
.search-modal__product-info .price .price-item {
  font-size: 1.2rem !important;
  color: #00000099 !important;
  text-transform: lowercase;
  white-space: nowrap;
}

/* =========================================================
   PAGE PASSWORD — mise à la charte
   Le layout password.liquid charge désormais custom.css : la base du DS
   (tracking -0.01em, liens sans soulignement 70→100%, boutons weight 400)
   s'applique d'office. Ici, uniquement les ajustements propres à la page.
   ========================================================= */

/* Titre "Opening soon" — pattern display du DS (cf. drawer__heading) :
   weight 500, tracking -0.03em, line-height serré. */
.password-main .email-signup-banner__heading {
  font-weight: 500;
  color: rgb(var(--color-foreground));
  font-size: 4rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  .password-main .email-signup-banner__heading {
    font-size: 6rem;
  }
}

/* Sous-titre : texte discret à 60 %, comme les libellés secondaires du DS. */
.password-main .newsletter__subheading,
.password-main .newsletter__subheading p {
  color: rgba(var(--color-foreground), 0.6);
  letter-spacing: -0.01em;
}

/* Champs : pas de halo au focus (même traitement que recherche / drawer). */
.password .field__input:focus {
  box-shadow: none !important;
}

/* Titre du modal "Enter store using password" : aligné sur les titres DS. */
.password .password-modal__content-heading {
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: -0.03em;
}

/* Petits textes (header, modal, footer) : discrets à 60 %, liens compris ;
   retour au noir plein au hover, sans soulignement (pattern liens DS). */
.password .password__footer-text,
.password .password__footer-text a {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: none;
}

.password .password__footer-text a:hover {
  color: rgb(var(--color-foreground));
}

/* =========================================================
   PAGE PRODUIT — RAIL DE VIGNETTES DESKTOP (visuels secondaires)
   Vignettes à gauche du bloc gris (cf. mock-up) :
   • centrées verticalement à l'écran par défaut ;
   • suivent le scroll puis se BLOQUENT à la fin du bloc gris : sticky dans
     un track absolu de la hauteur exacte du bloc gris (calc(100vh - 36px),
     même valeur que .product__media-item:first-child) ;
   • hover : léger voile blanc en transition douce ;
   • clic : ancre douce vers le visuel correspondant (product-thumb-rail.js).
   ========================================================= */
@media screen and (min-width: 990px) {
  .product-thumb-rail__track {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100vh - 36px); /* = hauteur du bloc gris (1er media item) */
    z-index: 3;
    pointer-events: none; /* le track ne bloque pas le clic sur l'image */
  }

  .product-thumb-rail {
    position: sticky;
    /* Centre du viewport ; --thumb-rail-h est mesurée par product-thumb-rail.js
       (fallback raisonnable avant JS). Borné à 2rem du haut si le rail est
       plus haut que le viewport (nombreuses images). */
    top: max(2rem, calc(50vh - var(--thumb-rail-h, 36rem) / 2));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    pointer-events: auto;
  }

  .product-thumb-rail__item {
    position: relative;
    display: block;
    width: 5rem;
  }

  .product-thumb-rail__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Voile blanc léger + bordure noire au survol (comme les cards produits),
     transition douce. Bordure portée par le ::after (inset:0) → aucun décalage
     de layout. */
  .product-thumb-rail__item::after {
    content: '';
    position: absolute;
    inset: 0;
    /* background: rgba(255, 255, 255, 0.5); */
    border: 1px solid transparent;
    /* opacity: 0;
    transition: opacity 0.3s ease; */
  }

  .product-thumb-rail__item:hover::after,
  .product-thumb-rail__item:focus-visible::after {
    opacity: 1;
    border-color: #000;
  }
}

@media screen and (max-width: 989px) {
  .product-thumb-rail__track {
    display: none;
  }
}

/* Le quick-add injecte la page produit rendue : pas de rail dans la modale. */
quick-add-modal .product-thumb-rail__track {
  display: none !important;
}

/* =========================================================
   PAGE PRODUIT — VARIANTES COULEUR (produits liés)
   Rail HORIZONTAL de vignettes carrées (image principale de chaque coloris),
   au-dessus des sélecteurs size/frame. Même esprit que le rail de vignettes
   desktop (voile blanc + bordure noire au hover), mais horizontal + carré +
   scroll horizontal (utile mobile). Bordure noire SOUS le bloc.
   ========================================================= */
.product-color-variants {
  margin: 2rem 0 1.5rem;
}

/* En mobile (<990) la colonne n'est pas réorganisée par product-scroll-behavior.js,
   donc .product-color-variants reste enfant direct de .product__info-container et
   la règle `.product__info-container > * + * { margin: 0 !important }` tue ses
   margins. On les rétablit ici (spécificité 0,2,0 > 0,1,0, à !important égal). */
@media screen and (max-width: 989px) {
  .product__info-container > .product-color-variants {
    margin: 2rem 0 0 !important;
  }
}

/* Ligne titre : "Colorways" à gauche, flèche grise ferrée à droite (si >5). */
.product-color-variants__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
}

/* Titre "Colorways" — même style que les libellés Size / Frame. */
.product-color-variants__title {
  margin: 0;
  color: rgb(var(--color-foreground));
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Flèche grise — même glyphe/couleur que la flèche "→" des éléments Info. */
.product-color-variants__arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: rgba(var(--color-foreground), 0.40);
  font-family: system-ui;
  font-size: 1.2rem;
  line-height: 1;
}

.product-color-variants__track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* scroll horizontal conservé, mais barre masquée */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* snap horizontal : chaque vignette se cale au bord gauche */
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
}
.product-color-variants__track::-webkit-scrollbar {
  display: none;
}

.product-color-variants__item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 5rem;
  aspect-ratio: 1 / 1; /* éléments carrés */
  padding: 0rem; /* fond gris visible autour du visuel */
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
  scroll-snap-align: start;
}

.product-color-variants__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;
}

/* Bordure noire au survol (sans voile). Bordure portée par le ::after
   (inset:0) -> aucun décalage de layout. */
.product-color-variants__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-color-variants__item:hover::after,
.product-color-variants__item:focus-visible::after {
  opacity: 1;
  border-color: #000;
}

/* Coloris courant : bordure noire permanente, sans voile. */
.product-color-variants__item.is-active::after {
  opacity: 1;
  border-color: #000;
  background: transparent;
}

/* =========================================================
   PAGE COLLECTION — BANDEAU (refonte façon maquette MoBe)
   Haut (gris) : grand titre ferré en bas à gauche, image (moitié écran) à
   droite, titre secondaire en overlay bas-droite. Bas (blanc) : date (∞ si
   permanente) à gauche, sous-titre centré, description unique à droite.
   1rem blanc de gouttière à gauche/droite. Nombre d'articles en exposant.
   ========================================================= */
.collection-banner {
  padding: 0 1rem; /* gouttière blanche gauche/droite */
}

.collection-banner__hero {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #ececec;
  min-height: 38rem;
  overflow: hidden;
}

.collection-banner:not(.collection-banner--with-image) .collection-banner__hero {
  min-height: 0;
}

.collection-banner__title-wrap {
  display: flex;
  align-items: flex-end; /* titre ferré par le bas */
  flex: 1 1 50%; /* moitié de l'écran */
  min-width: 0;
  padding: 3rem 1rem 2.5rem 1rem; /* proche du bord gauche */
}

.collection-banner__title {
  margin: 0;
  color: #000;
  font-weight: 500;
  font-size: clamp(4rem, 8.5vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
}

/* Nombre d'articles : petit exposant discret, espacé du titre. */
.collection-banner__count {
  margin-left: 0.4em;
  font-size: 0.2em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: super;
  opacity: 0.5;
}

.collection-banner__media {
  position: relative;
  flex: 1 1 50%; /* moitié de l'écran */
  min-width: 0;
  align-self: stretch;
}
.collection-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titre secondaire en overlay, bas-droite, débordant sur l'image. */
.collection-banner__secondary {
  position: absolute;
  right: 1rem;
  bottom: 1.5rem;
  z-index: 1;
  color: #000;
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  pointer-events: none;
}
.collection-banner__secondary::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0;
  margin-right: 0.25em;
  border-top: 0.05em solid currentColor;
  vertical-align: 0.28em;
}

/* Ligne meta (fond blanc) : date à gauche, sous-titre centré, description à
   droite. Padding horizontal 0 -> la gouttière 1rem de .collection-banner cale
   la date à 1rem du bord gauche et la description à 1rem du bord droit. */
.collection-banner__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 2rem;
  padding: 1.2rem 0;
  font-size: 1.2rem;
  line-height: 1.35;
  color: rgb(var(--color-foreground));
}
.collection-banner__date {
  justify-self: start;
}
.collection-banner__infinity {
  font-weight: 300;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.08em;
}
.collection-banner__subtitle {
  justify-self: center; /* centré horizontalement */
  text-align: center;
}
.collection-banner__description {
  justify-self: end; /* décalée à droite */
  max-width: 32rem;
}
.collection-banner__description > * { margin: 0; }

/* ---- Mobile ---- */
@media screen and (max-width: 749px) {
  .collection-banner__hero {
    flex-direction: column;
    min-height: 0;
  }
  /* Image d'abord, titre principal en dessous. */
  .collection-banner--with-image .collection-banner__media {
    order: -1;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .collection-banner__title-wrap {
    align-items: flex-start;
    padding: 1.5rem 0 1.5rem 1rem; /* + padding à gauche du titre */
  }
  .collection-banner__title {
    font-size: clamp(3.2rem, 13vw, 6rem);
  }
  /* Titre secondaire masqué sur mobile (il se superposait au titre principal). */
  .collection-banner__secondary {
    display: none;
  }
  /* Date+∞ et sous-titre ferrés à gauche (l'un sous l'autre) ; description
     ferrée au centre (face à eux). 1rem de padding partout (gouttière + vertical). */
  .collection-banner__meta {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.4rem;
    padding: 1rem 0;
  }
  .collection-banner__date {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .collection-banner__subtitle {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }
  .collection-banner__description {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: start;
    max-width: 100%;
  }
}