/* =========================================================
   Cartes produit — Lauxane Home (tokens-based)
   Dépend de: assets/css/bundle.css (tokens.css)
   ========================================================= */

/* ==============================
   0) Variables locales (carte)
   ============================== */
:root{
  /* Ratio visuel */
  --card-media-ratio: 4 / 5;

  /* Mécanique image */
  --media-scale: 1;
  --media-gap: 0px;
  --media-offset: 0px;

  /* Slot résumé (fermé / ouvert) */
  --summary-slot: 120px;
  --summary-slot-hover: 160px;

  /* Cinétique */
  --ease-smooth: cubic-bezier(.22,.61,.36,1);
  --dur-s: .26s;
  --dur-m: .36s;

  /* Image (hover) */
  --hover-img-scale: 1.008;

  /* Liseré hairline (doré) */
  --lh-stroke: var(--cta-stroke, var(--doré-naturel, #a8743b));
  --lh-stroke-w: .6px;
  --lh-stroke-c: color-mix(in srgb, var(--lh-stroke) 30%, #fff 70%);
  --lh-stroke-c-hover: color-mix(in srgb, var(--lh-stroke) 40%, #fff 60%);

  /* Titre carte */
  --title-lh: 1.35;     /* line-height des titres */
  --title-lines: 2;     /* nb de lignes clampées */
}

/* =========================================================
   1) Fond & grille (listing produits)
   ========================================================= */
body,
.site,
.ast-container,
.site-content,
.woocommerce .ast-container,
.woocommerce-page .site-content,
.archive.woocommerce .site-content,
.woocommerce ul.products{
  background: var(--panel) !important;
}

.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 0;
  margin: 0 auto;
  justify-items: center;
}

/* =========================================================
   2) Carte (li.product) — base + liseré au hover
   ========================================================= */
.woocommerce ul.products li.product,
.single-product .related.products ul.products li.product,
.woocommerce .upsells ul.products li.product{
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
  outline: none;
  box-shadow: none;                       /* pas d’ombre au repos */
  border: 1px solid transparent;          /* évite les halos AA */
  background-clip: padding-box;
  transition:
    box-shadow var(--dur-m) var(--ease-smooth),
    transform var(--dur-m) var(--ease-smooth),
    background-color var(--dur-m) var(--ease-smooth);
}

/* micro-lift carte */
/*.woocommerce ul.products li.product{ --hover-translate: -2px; }
.woocommerce ul.products li.product:hover{ transform: translateY(var(--hover-translate)); }*/

@media(hover:hover){
  .woocommerce ul.products li.product{ --hover-translate: -2px; }
  .woocommerce ul.products li.product:hover{ transform: translateY(var(--hover-translate)); }
}

/* liseré (invisible par défaut) */
.woocommerce ul.products li.product::after,
.single-product .related.products ul.products li.product::after,
.woocommerce .upsells ul.products li.product::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  box-shadow:none;
  transition: opacity .26s var(--ease-smooth);
  z-index: 0;
}
/* liseré au hover + ombre d’élévation */
.woocommerce ul.products li.product:hover::after,
.woocommerce ul.products li.product.active::after,
.single-product .related.products ul.products li.product:hover::after,
.single-product .related.products ul.products li.product.active::after,
.woocommerce .upsells ul.products li.product:hover::after,
.woocommerce .upsells ul.products li.product.active::after{
  opacity:1;
  box-shadow: inset 0 0 0 var(--lh-stroke-w) var(--lh-stroke-c-hover);
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product.active{
  box-shadow: var(--ombre-hover, 0 10px 22px rgba(0,0,0,.08));
}

/* Masquer la catégorie sous le titre (shop + related + upsells) */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ast-woo-shop-product-category,
.single-product .related.products ul.products li.product .ast-woo-product-category,
.single-product .related.products ul.products li.product .ast-woo-shop-product-category,
.woocommerce .upsells ul.products li.product .ast-woo-product-category,
.woocommerce .upsells ul.products li.product .ast-woo-shop-product-category{
  display: none !important;
}

/* Garde-fou : ne pas masquer la marque/fournisseur explicitement insérée */
/*.woocommerce ul.products li.product .lh-supplier,
.woocommerce ul.products li.product .lh-supplier-loop,
.woocommerce ul.products li.product .lh-supplier__name{
  display: inline !important;
}*/

.woocommerce ul.products li.product .lh-supplier,
.woocommerce ul.products li.product .lh-supplier__name{
  display: inline !important;
}

/* =========================================================
   3) Zone média + image + price pill
   ========================================================= */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--card-media-ratio);
  overflow: hidden;
  border-radius: 12px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(var(--media-offset)) scale(var(--media-scale));
  transform-origin: top center;
  margin-bottom: var(--media-gap);
  transition:
    transform var(--dur-m) var(--ease-smooth),
    margin-bottom var(--dur-m) var(--ease-smooth);
}

/* image */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  transition: transform var(--dur-m) var(--ease-smooth);
  z-index: 1;
}
/* micro-zoom image au hover */
/*.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > img{
  transform: scale(.965);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap > img{
  transform: scale(.985);
}*/


@media(hover:hover){
  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap > img{
    transform:none; transition:transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap > img{
    transform:scale(.985);
  }
}

/* neutralise le pseudo-lien Astra */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link{
  position: relative; z-index: 1; background: transparent !important;
  font-size: inherit !important; line-height: inherit !important;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link::before,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link::after{
  content: none !important;
}

/* price pill (toujours visible, shop + related + upsells) */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .price-overlay{
  position:absolute; right:12px; bottom:12px; z-index:60;
  display:inline-block; padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  pointer-events:none;
  font-size:14px; line-height:1.2; font-weight:600; color:var(--gold);
  opacity:1; transition: opacity var(--dur-s) var(--ease-smooth);
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .price-overlay *,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .price-overlay bdi{
  font-size:14px !important; line-height:1.2 !important;
  font-weight:600 !important; color:var(--gold) !important;
}

/* =========================================================
   4) Résumé (grid), titre & prix (masqué en bas)
   ========================================================= */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  height: var(--summary-slot);
  max-height: none !important;
  overflow: hidden;
  padding: 0;
  margin-top: 8px;

  /* Grille unifiée, centrage vertical du titre */
  display: grid !important;
  grid-auto-columns: 1fr;
  grid-template-rows:
    auto
    minmax(calc(var(--title-lines) * 1em * var(--title-lh)),
           calc(var(--title-lines) * 1em * var(--title-lh)))
    auto; /* CTA */
  row-gap: 6px;
  align-items: center;

  transition:
    height var(--dur-m) var(--ease-smooth),
    padding var(--dur-s) var(--ease-smooth),
    margin-top var(--dur-s) var(--ease-smooth);
}

/* éléments visibles sans fade artificiel */
.woocommerce ul.products li.product .astra-shop-summary-wrap > *{
  transform: none; opacity: 1;
  transition: transform var(--dur-s) var(--ease-smooth), opacity var(--dur-s) var(--ease-smooth);
}

/* Titre : clamp 2 lignes + hauteur exacte + centrage */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--heading-font, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(14px, 1.02rem, 15.5px) !important;
  font-weight: 500 !important;
  line-height: var(--title-lh) !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: .006em;

  display: -webkit-box !important;
  -webkit-line-clamp: var(--title-lines) !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* Hauteur EXACTE = 2 lignes => centrage vertical parfait */
  min-height: calc(var(--title-lines) * 1em * var(--title-lh)) !important;
  max-height: calc(var(--title-lines) * 1em * var(--title-lh)) !important;

  margin: 3px 0 10px !important;
  text-align: center !important;
  align-self: center;
  justify-self: center;
}

/* prix texte (bas de carte) masqué — on conserve le pill */
.woocommerce ul.products li.product .astra-shop-summary-wrap .price,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap .price,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap .price{
  display: none !important;
}

/* ouverture carte (hover) : slot + respirations */
.woocommerce ul.products li.product:hover .astra-shop-summary-wrap,
.woocommerce ul.products li.product.active .astra-shop-summary-wrap{
  height: var(--summary-slot-hover);
  padding-top: 10px; padding-bottom: 10px;
}

/* =========================================================
   5) CTA (bouton fort) — même style shop/related/upsells
   ========================================================= */
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap > a.button{
  position: absolute !important;
  bottom: 10px; left: 12px; right: 12px;      /* largeur = carte - 24px */
  box-sizing: border-box;

  height: 38px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;

  background: var(--cta-strong) !important;
  border: 1px solid var(--cta-strong-border) !important;
  color: #fff !important; -webkit-text-fill-color:#fff;
  border-radius: 999px;

  font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial);
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  z-index: 5; isolation: isolate;
}
/* apparition au hover de la carte */
.woocommerce ul.products li.product:hover .astra-shop-summary-wrap > a.button,
.single-product .related.products ul.products li.product:hover .astra-shop-summary-wrap > a.button,
.woocommerce .upsells ul.products li.product:hover .astra-shop-summary-wrap > a.button{
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
/* hover/active */
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:hover,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button:hover,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap > a.button:hover{
  background: var(--cta-strong-hover) !important;
  border-color: var(--cta-strong-hover) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12),
              0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:active,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button:active,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap > a.button:active{
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}

/* CTA (shop / related / upsells) : jamais de soulignage */
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap > a.button,
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:hover,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button:hover,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap > a.button:hover,
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:focus,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button:focus,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap > a.button:focus,
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:active,
.single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button:active,
.woocommerce .upsells ul.products li.product .astra-shop-summary-wrap > a.button:active{
  text-decoration: none !important;
  text-decoration-color: transparent !important;
}


/* =========================================================
   6) Liens UI : Titre & Fournisseur (micro-lift, sans recolor)
   ========================================================= */
/* Titre cliquable */
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title a{
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center bottom;
  transition:
    transform 140ms var(--ease-smooth),
    letter-spacing 140ms var(--ease-smooth);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title a:hover{
  transform: translate3d(0,-1px,0);
  letter-spacing: .06px;
  text-decoration: none;
}
/* focus a11y */
.woocommerce ul.products li.product .woocommerce-loop-product__title a:focus-visible,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title a:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Fournisseur (optionnel) : caché, visible au hover carte */
@media (hover:hover) and (min-width:769px){
  .woocommerce ul.products li.product .astra-shop-summary-wrap > .lh-supplier-loop,
  .woocommerce ul.products li.product .astra-shop-summary > .lh-supplier-loop{ display: none !important; }

  .woocommerce ul.products li.product:hover .astra-shop-summary-wrap > .lh-supplier-loop,
  .woocommerce ul.products li.product.active .astra-shop-summary-wrap > .lh-supplier-loop,
  .woocommerce ul.products li.product:hover .astra-shop-summary > .lh-supplier-loop,
  .woocommerce ul.products li.product.active .astra-shop-summary > .lh-supplier-loop{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    pointer-events: auto !important;
    opacity: .92;
    transition:
      transform 140ms var(--ease-smooth),
      letter-spacing 140ms var(--ease-smooth),
      opacity 140ms var(--ease-smooth);
  }
  .woocommerce ul.products li.product .lh-supplier-loop:hover{
    transform: translate3d(0,-1px,0);
    letter-spacing: .06px;
    opacity: 1;
  }
}
/* jamais dans la zone image */
.astra-shop-thumbnail-wrap .lh-supplier-loop{ display:none !important; }

/* garde-fou marque/fournisseur explicitement placés */
/*.woocommerce ul.products li.product .lh-supplier,
.woocommerce ul.products li.product .lh-supplier-loop,
.woocommerce ul.products li.product .lh-supplier__name{ display: inline !important; }*/
.woocommerce ul.products li.product .lh-supplier,
.woocommerce ul.products li.product .lh-supplier__name{ display: inline !important; }

/* =========================================================
   7) Mobile (≤768px)
   ========================================================= */
@media (hover:none) and (pointer:coarse), (max-width:768px){

  :root{ --card-media-ratio: 1 / 1; }

  .woocommerce ul.products{
    grid-template-columns: repeat(2, 1fr) !important;
    gap:16px; padding-left:12px; padding-right:12px;
  }

  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
  .single-product .related.products ul.products li.product .astra-shop-thumbnail-wrap{
    aspect-ratio: var(--card-media-ratio) !important;
    min-height: clamp(180px, 46vw, 320px) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    margin-bottom: 10px !important;
  }
  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
  .single-product .related.products ul.products li.product .astra-shop-thumbnail-wrap img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center center !important;
    border-radius:inherit !important; transform:none !important; opacity:1 !important;
  }

  /* CTA toujours visible, + compact */
  .woocommerce ul.products li.product .astra-shop-summary-wrap,
  .single-product .related.products ul.products li.product .astra-shop-summary-wrap{
    padding-bottom: 44px;
  }
  .woocommerce ul.products li.product .astra-shop-summary-wrap > a.button,
  .single-product .related.products ul.products li.product .astra-shop-summary-wrap > a.button{
    bottom: 8px; left: 10px; right: 10px; height: 36px; padding: 0 14px;
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }

  /* price pill réduit */
  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .price-overlay{
    right:8px !important; bottom:8px !important; padding:4px 7px !important; border-radius:10px !important;
    max-width:calc(100% - 16px) !important; box-shadow:0 1px 4px rgba(0,0,0,.06) !important;
  }
  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .price-overlay *,
  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .price-overlay bdi{
    font-size:12px !important; line-height:1.2 !important; font-weight:500 !important; letter-spacing:.1px !important;
  }

  /* related (mobile) : fermé par défaut, ouvert en .active */
  .single-product .related.products ul.products li.product .astra-shop-summary-wrap{
    height:0 !important; max-height:0 !important; padding:0 !important; margin-top:0 !important;
    opacity:0 !important; overflow:hidden !important; transform:none !important;
  }
  .single-product .related.products ul.products li.product .price-overlay{ opacity:1 !important; }
  .single-product .related.products ul.products li.product.active .astra-shop-thumbnail-wrap{
    transform: translateY(-24px) scale(.88) !important; margin-bottom:-18px !important;
    transition: transform var(--dur-m) var(--ease-smooth) !important, margin-bottom var(--dur-m) var(--ease-smooth) !important;
  }
  .single-product .related.products ul.products li.product.active .price-overlay{ opacity:1 !important; }
  .single-product .related.products ul.products li.product.active .astra-shop-summary-wrap{
    height:auto !important; max-height:none !important; opacity:1 !important;
    margin-top:8px !important; padding:6px 10px 8px !important; gap:2px !important; overflow:visible !important;
  }
}



/* =========================================================
   8) Accessibilité — motion safe
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

/* ===== Desktop : "Voir le panier" UNIQUEMENT pour produits simples ===== */
@media (hover:hover) and (min-width:769px){

  /* (A) PRODUITS SIMPLES — réserver la place + overlay propre */
  .woocommerce ul.products li.product.product-type-simple .astra-shop-summary-wrap{
    position: relative;
    padding-bottom: 48px;          /* place pour un CTA 38px + marges */
  }

  /* cacher le bouton d'ajout une fois l'article ajouté */
  .woocommerce ul.products li.product.product-type-simple a.add_to_cart_button.added{
    display: none !important;
  }

  /* "Voir le panier" = CTA overlay en bas de la carte */
  .woocommerce ul.products li.product.product-type-simple a.added_to_cart.wc-forward{
    position: absolute !important;
    left: 12px; right: 12px; bottom: 10px;
    height: 38px; padding: 0 16px;
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--cta-strong) !important;
    border: 1px solid var(--cta-strong-border) !important;
    color: #fff !important; -webkit-text-fill-color: #fff;
    text-transform: uppercase; letter-spacing: .06em;
    text-decoration: none !important;
    white-space: nowrap; overflow: visible; text-overflow: clip;

    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
    z-index: 6;
  }
  .woocommerce ul.products li.product.product-type-simple:hover a.added_to_cart.wc-forward,
  .woocommerce ul.products li.product.product-type-simple a.added_to_cart.wc-forward:focus-visible{
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }
  .woocommerce ul.products li.product.product-type-simple a.added_to_cart.wc-forward:hover{
    background: var(--cta-strong-hover) !important;
    border-color: var(--cta-strong-border) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.12),
                0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset;
  }
  .woocommerce ul.products li.product.product-type-simple a.added_to_cart.wc-forward:active{
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
  }

  /* (B) RESET SÉCURITÉ — ne rien imposer aux produits NON simples
     (variables, groupés, etc.) pour éviter tout rognage/chevauchement */
  .woocommerce ul.products li.product:not(.product-type-simple) .astra-shop-summary-wrap{
    padding-bottom: 0;                     /* retire la place forcée si héritée */
  }
  .woocommerce ul.products li.product:not(.product-type-simple) a.added_to_cart.wc-forward{
    position: static !important; transform: none; opacity: 1;
    display: none !important;               /* si présent, on ne l’affiche pas */
  }
}