/*! lmdr-commerce critical.css 0.1.0
 * Anti-FOUC : cache les templates Webflow (wishlist/related/last-viewed/
 * cart-upsells), les [condition] non résolus et les placeholders d'option
 * de variante AVANT le first paint.
 *
 * Intégration Webflow (Site Settings → Custom Code → Head Code) :
 *   <link rel="stylesheet" href="https://.../lmdr-commerce/v1/critical.css">
 *   <!-- placé AU-DESSUS du <script src=".../index.js"> -->
 */
/* --- Templates multi-IDs : jamais visibles --- */
smootify-product[data-id="wishlist"],
smootify-product[data-id="related"],
smootify-product[data-id="last-viewed"],
smootify-product[data-id="cart-upsells"],
smootify-product[data-id="filter"],
smootify-product[data-id="search"],
smootify-product[data-lmdr-multi-template="true"] {
  display: none !important;
}

/* --- Clones multi : 2 etats independants pilotes cote JS.
     - data-lmdr-revealed : decide par le METRONOME (smootify-product.ts)
       declenche apres hydrate. Tick fixe 100ms par card, dans l ordre
       stagger-idx. INDEPENDANT du timing CDN des images → cascade regulière
       meme si les images arrivent en bursts.
     - data-lmdr-img-ready : decide quand le IMG load fire. Fade l IMG
       de opacity 0 → 1 sur 350ms (transition sur l IMG uniquement).
     Etats combines :
       (!revealed)           → clone totalement hidden (skeleton invisible).
       (revealed, !imgReady) → clone visible, skeleton shimmer sur image wrap,
                               IMG opacity:0, contenu texte visible.
       (revealed, imgReady)  → clone visible, IMG fade-in 350ms, skeleton off. --- */
smootify-product[data-lmdr-multi-clone="true"]:not([data-lmdr-revealed]) {
  visibility: hidden;
}

/* --- Conditions non encore résolues : cachées par défaut --- */
[condition]:not([data-lmdr-cond]) {
  display: none !important;
}

/* --- Blocs [data-option] : cachés entièrement jusqu'à hydrateOptions.
       Contiennent des labels placeholder ("Option Label", "Variant Selector")
       + des boutons/selects bidons — on les cache AVANT résolution.
       hydrateOptions pose data-lmdr-option-resolved="1", puis :
         - si produit sans variantes (default "Title: Default Title") :
           style.display=none inline (bloc reste caché)
         - sinon : révèle le bloc et clone les vraies valeurs. --- */
[data-option]:not([data-lmdr-option-resolved]) {
  display: none !important;
}

/* Le template d'un bloc [data-option] (1er enfant, cloné pour chaque valeur)
   reste caché en permanence — ses clones représentent les vraies valeurs. */
[data-lmdr-option-template="true"] {
  display: none !important;
}

/* --- Helper classique utilisé par applyConditions pour les toggles live --- */
[class~="lmdr-hidden"] {
  display: none !important;
}

/* --- Filter layer : cache les clones qui ne matchent pas les filtres
       search/price actifs (cf. attributes/filter.ts). Class posée
       dynamiquement côté JS au fil des input events. --- */
[class~="lmdr-filter-hidden"] {
  display: none !important;
}

/* --- Pagination layer : cache les clones hors de la page courante.
       Lit l'attribut limit du wrapper <smootify-search-discovery>
       (default 40). Boutons prev/next dans .pagination button[name]. --- */
[class~="lmdr-pagination-hidden"] {
  display: none !important;
}
.lmdr-pagination-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Lazy hydration : cards filter visibles par defaut (placeholder Webflow
       visible) pour que l IntersectionObserver fire. Quand loadProduct
       termine, .lmdr-card-loaded est ajoutee. Pas d animation = pas de
       risque que opacity reste bloquee a 0 sur certains contextes
       browser/CDP. --- */

/* --- Boot mask : sur la page filter, on cache la sidebar (count, search,
       price slider, reset btn), le chip "filtre actif", l empty-state et
       la pagination pendant le boot pour eviter que l user voie les
       placeholders Webflow ("Produits en ligne : 15", chip "This is some
       text...", "Nous n avons pas trouve...", slider 0-100). Le runtime pose
       la classe .lmdr-ready sur smootify-search-discovery apres le 1er
       refreshFilters reussi → fade-in tout. Scope smootify-search-discovery
       pour ne pas affecter les autres pages. --- */
/* Boot mask : on cache uniquement les placeholders Webflow trompeurs
   (count "15", chip "This is some text", empty-state "Nous n avons pas
   trouve"). La sidebar (search/prix/reset) reste visible : les bornes
   du slider sont posees AVANT toute hydratation depuis l endpoint worker
   enrichi (priceMin/Max), donc afficher la sidebar tot est OK. */
smootify-search-discovery [filter="count"],
smootify-search-discovery [filter="active"],
smootify-search-discovery [filter="empty-state"],
smootify-search-discovery .pagination {
  visibility: hidden;
}
smootify-search-discovery.lmdr-ready [filter="count"],
smootify-search-discovery.lmdr-ready [filter="active"],
smootify-search-discovery.lmdr-ready [filter="empty-state"],
smootify-search-discovery.lmdr-ready .pagination {
  visibility: visible;
}

/* --- Skeleton loading shimmer + cascade fade-in pour cards catalog ---
   Strategie : pose skeleton sur le WRAPPER de l image (.images-container,
   div data-lmdr-img-wrap) qui a deja les dimensions definies par Webflow CSS
   (aspect-ratio + width:100%). L IMG enfant est opacity:0 jusqu a load,
   puis transition opacity 0→1 avec stagger pour effet cascade.

   Pourquoi pas skeleton sur IMG directement : IMG a son placeholder Webflow
   visible (rendu du browser) qui MASK le background CSS du skeleton. Il
   faut soit hide l IMG (opacity 0) soit pose skeleton sur un element parent.
*/
@keyframes lmdr-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Skeleton shimmer : visible DES que la clone est dans le DOM, meme avant
   hydrate / reveal. L IMG wrap override visibility:visible pour remonter
   au-dessus du visibility:hidden heritee du parent clone (trick CSS). Ainsi
   l utilisateur voit le skeleton grid immediatement, puis les cards se
   revealent en cascade (texte + prix) quand le metronome tick. */
smootify-product[data-lmdr-multi-clone="true"]:not([data-lmdr-img-ready]) .images-container,
smootify-product[data-lmdr-multi-clone="true"]:not([data-lmdr-img-ready]) [data-lmdr-img-wrap],
smootify-product[data-lmdr-multi-clone="true"]:not([data-lmdr-img-ready]) .product-image-wrapper,
smootify-product[data-lmdr-multi-clone="true"]:not([data-lmdr-img-ready]) .image-product-wrap {
  visibility: visible;
  background: linear-gradient(
    90deg,
    var(--skeleton-loading-start, hsl(200, 15%, 88%)) 0%,
    var(--skeleton-loading-end, hsl(200, 15%, 96%)) 50%,
    var(--skeleton-loading-start, hsl(200, 15%, 88%)) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: lmdr-skeleton-shimmer 1.4s ease-in-out infinite !important;
  border-radius: 4px;
  overflow: hidden;
}

/* IMG cachee tant que l image pas chargee : evite le flash placeholder
   Webflow par-dessus le skeleton. */
smootify-product[data-lmdr-multi-clone="true"]:not([data-lmdr-img-ready]) [variation="image"],
smootify-product[data-lmdr-multi-clone="true"]:not([data-lmdr-img-ready]) [product="image"] {
  opacity: 0 !important;
}

/* IMG fade-in quand image loaded (350ms) — reveal image elegamment. */
smootify-product[data-lmdr-multi-clone="true"][data-lmdr-img-ready] [variation="image"],
smootify-product[data-lmdr-multi-clone="true"][data-lmdr-img-ready] [product="image"] {
  opacity: 1 !important;
  transition: opacity 350ms ease-out;
}

/* Clone fade-in a la reveal du metronome : petit slide-in vertical + opacity
   pour un effet cascade perceptible (sinon visibility:hidden→visible est
   instantane). 250ms ease-out, forwards pour que l etat final tienne. */
@keyframes lmdr-clone-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
smootify-product[data-lmdr-multi-clone="true"][data-lmdr-revealed] {
  animation: lmdr-clone-reveal 250ms ease-out both;
}

/* --- Couleur brand LMDR (#760000) sur les scrollbars, SANS modifier
       taille ni radius (qui sont set par Webflow ou natifs du browser).
       Firefox / Chrome 121+ / Safari 17.4+ utilisent scrollbar-color.
       Webkit ancien : override uniquement background du thumb pour
       remplacer le noir set par Webflow. On ne touche JAMAIS aux
       proprietes width / height / border-radius. --- */
* {
  scrollbar-color: #760000 transparent;
}
::-webkit-scrollbar-thumb {
  background: #760000 !important;
}

/* --- Bloc discount (wrapper .discount-block OU [cart-item="discount"]) et
       ses contenus [discount="title"|"amount"] : cachés par défaut tant
       qu'aucun code n'est actif. Le wrapper contient une icône tag SVG qu'on
       ne veut pas voir non plus. Le runtime pose data-lmdr-discount="1" sur
       TOUT l'ensemble (wrapper + labels) UNIQUEMENT quand une réduction est
       active côté cart. --- */
[discount]:not([data-lmdr-discount]),
[cart-item="discount"]:not([data-lmdr-discount]),
.discount-block:not([data-lmdr-discount]) {
  display: none !important;
}

/* --- Variant thumbs overlay sur cards (hover-to-swap image).
       Visibles par défaut (pas juste au hover), bandeau pleine largeur ancré
       au bas de l'image. Une seule ligne horizontale — scroll discret si
       trop de variantes. Bordure fine couleur brand #760000. --- */
[data-lmdr-img-wrap] {
  position: relative;
  /* visible pour laisser depasser les vignettes sous l image (bottom: -20px). */
  overflow: visible;
}
[data-lmdr-variant-thumbs] {
  position: absolute;
  left: 0;
  right: 0;
  /* Sous l image, decalage 40px vers le bas (20 + 20 additionnel demande)
     pour laisser place entre l image et les vignettes. */
  bottom: -40px;
  display: flex;
  flex-wrap: nowrap;
  /* Aligne les vignettes a gauche sans padding pour que le premier thumb
     colle au bord gauche du wrap (alignement avec le titre de la card). */
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  pointer-events: auto;
  z-index: 3;
}
[data-lmdr-variant-thumbs]::-webkit-scrollbar {
  display: none;
}
[data-lmdr-variant-thumbs] > img {
  /* Taille legerement augmentee pour meilleure visibilite. */
  width: 36px;
  height: 36px;
  object-fit: cover;
  /* Leger radius pour adoucir les coins. */
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 36px;
  /* Non-selectionne : pas de bordure visible. transparent garde la place
     pour eviter un shift de layout quand un autre devient actif. */
  border: 1px solid transparent;
  background: #fff;
  transition: border-color 140ms ease-out;
  display: block;
}
/* Selectionne (et hover) : bordure gris clair discrete, sans box-shadow
   ni scale. Seule vignette visuellement marquee. */
[data-lmdr-variant-thumbs] > img[data-lmdr-thumb-active="1"],
[data-lmdr-variant-thumbs] > img[data-lmdr-thumb-active="1"]:hover {
  border-color: #c8c8c8;
  box-shadow: none;
  transform: none;
}
/* Hover sur non-selectionne : feedback discret avec bordure tres claire. */
[data-lmdr-variant-thumbs] > img:not([data-lmdr-thumb-active="1"]):hover {
  border-color: rgba(0, 0, 0, 0.2);
}
[data-lmdr-img-wrap] [variation="image"],
[data-lmdr-img-wrap] [product="image"] {
  transition: opacity 180ms ease-out;
}
@media (hover: none) {
  /* Sur touch on garde les thumbs visibles aussi — tap = swap. */
}

/* --- Variant swatches sur fiche produit : .option-button.active Webflow
       set background:#000 par defaut donc grosse pastille noire autour du
       thumbnail. On veut une bordure fine couleur brand #760000 et zero
       background. S applique aussi a variant-swatches/variant-selector pour
       couvrir les 3 styles Smootify. --- */
.option-button.active,
variant-swatches .option-button.active,
variant-selector .option-button.active,
variant-dropdown .option-button.active,
[data-option-value].active {
  background: transparent !important;
  border: 2px solid #760000 !important;
  box-shadow: none !important;
  outline: none !important;
}
.option-button:not(.active),
variant-swatches .option-button:not(.active),
variant-selector .option-button:not(.active),
[data-option-value]:not(.active) {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
}

/* --- Cartouche label option (ex: "Couleur") sur fiche produit : inutile UX
       et visuellement laide. On masque dans les 3 styles Smootify. --- */
variant-swatches > label.variant-label,
variant-selector > label.variant-label,
variant-dropdown > label.variant-label,
variant-swatches > .variant-label,
variant-selector > .variant-label,
variant-dropdown > .variant-label {
  display: none !important;
}

/* --- Vignette image DANS le bouton variant : Webflow met padding 8px 11.2px
       sur .option-button + image 30x30 ronde au centre donc grosse marge
       blanche autour. On veut l image bord a bord. Bouton fixe a 56x56
       (flex 0 0 pour ne pas s etirer dans le parent flex) + padding 0 +
       container 100% + image 100% object-fit cover. box-sizing border-box
       pour que la border 2px soit incluse dans la taille totale. --- */
.option-button {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.option-button .color-image-container {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
}
.option-button .color-image-container > img,
.option-button img[option="image"] {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Slider galerie produit : wrapper transform pour anim smooth.
       Les slides sont positionnées en ligne dans un flex container, le
       wrapper translate-X selon l'index actif. --- */
.w-slider-mask [data-lmdr-slides-wrap] {
  display: flex;
  transition: transform 350ms ease-in-out;
  will-change: transform;
}
.w-slider-mask [data-lmdr-slides-wrap] > [data-lmdr-slide-index] {
  flex: 0 0 100%;
  min-width: 100%;
  display: block !important;
}