/* ==========================================================
   WPZ / Iliade — Woo Single Product (scoped)
   File: /assets/css/single-product.css
   Scope: .wpz-sp
   ========================================================== */

@layer components {

  .wpz-sp{ background:#fff; }

  .wpz-sp__wrap{
    width: var(--wrap);
    margin-inline:auto;
    padding-left: clamp(16px, 2.5vw, 24px);
    padding-right: clamp(16px, 2.5vw, 24px);
    padding-top: clamp(14px, 2.2vw, 22px);
    padding-bottom: clamp(18px, 2.8vw, 28px);
    box-sizing:border-box;
  }

  /* HERO */
  .wpz-sp__hero{
    background:
      radial-gradient(900px 420px at 12% 20%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 65%),
      radial-gradient(780px 380px at 90% 10%, rgba(0,0,0,.05), transparent 60%),
      linear-gradient(180deg, var(--soft), #fff);
    border-bottom:1px solid var(--soft-2);
  }

  .wpz-sp__heroHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    padding-top: clamp(6px, 1.4vw, 14px);
  }
  @media (max-width: 980px){
    .wpz-sp__heroHead{ align-items:flex-start; flex-direction:column; }
  }

  .wpz-sp__heroLeft{ min-width:0; }






  .wpz-sp__sub{ margin: 8px 0 0; color: var(--muted); max-width: 68ch; }

  .wpz-sp__heroRight{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  @media (max-width: 980px){
    .wpz-sp__heroRight{ justify-content:flex-start; }
  }

  /* Meta row: rating + badges */
  .wpz-sp__metaRow{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap: 10px 12px;
    margin-top: 4px;
  }
  .wpz-sp__rating{ display:flex; align-items:center; gap:10px; color: var(--muted); }

  .wpz-sp__badges{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .wpz-sp__badge{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.35rem .65rem;
    border-radius:999px;
    font-weight:800;
    font-size:.88rem;
    border:1px solid var(--soft-2);
    background: rgba(255,255,255,.75);
    color: var(--ink);
  }
  .wpz-sp__badge--sale{
    border-color: color-mix(in oklab, var(--brand) 25%, var(--soft-2));
    background: color-mix(in oklab, var(--brand) 12%, #fff);
  }
  .wpz-sp__badge--stock.is-ok{ background:#F2FBF6; border-color:#CFE9D9; }
  .wpz-sp__badge--stock.is-out{ background:#FFF0F0; border-color:#F3CCCC; }

  /* CTA ghost */
  /* ==========================================================
   HERO QUICK LINKS — BRAND (Détails / Avis)
   ========================================================== */

.wpz-sp__heroRight{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width: 980px){
  .wpz-sp__heroRight{ justify-content:flex-start; }
}

/* Boutons brand, premium, lisibles */
.wpz-sp__ghostBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  padding:.58rem .92rem;
  border-radius:999px;

  border:1px solid color-mix(in oklab, var(--brand) 22%, var(--soft-2));
  background: rgba(255,255,255,.86);
  color: var(--ink);
  text-decoration:none;

  font-weight: 950;
  font-size: .92rem;
  letter-spacing: .2px;

  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.wpz-sp__ghostBtn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand) 36%, var(--soft-2));
  background: color-mix(in oklab, var(--brand) 10%, #fff);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

.wpz-sp__ghostBtn:active{
  transform: translateY(0);
}

/* Petit "accent" à gauche (effet app) */
.wpz-sp__ghostBtn::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:99px;
  background: color-mix(in oklab, var(--brand) 70%, #fff);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* Focus clavier propre */
.wpz-sp__ghostBtn:focus{
  outline:none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 25%, transparent), 0 14px 28px rgba(0,0,0,.08);
}

/* Mobile : plus compact */
@media (max-width: 560px){
  .wpz-sp__ghostBtn{
    padding:.50rem .72rem;
    font-size: .88rem;
  }
}
  .wpz-sp__ghostBtn--full{ width:100%; }

  /* GRID */
  .wpz-sp__grid{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: clamp(14px, 2.6vw, 24px);
    align-items:start;
    margin-top: clamp(16px, 2.6vw, 22px);
  }
  @media (max-width: 980px){
    .wpz-sp__grid{ grid-template-columns: 1fr; }
  }
 
 
 
 













  /* Buy */
  .wpz-sp__buy{ position: sticky; top: 18px; }
  @media (max-width: 980px){
    .wpz-sp__buy{ position: static; }
  }
  .wpz-sp__buyCard{
    background:#fff;
    border:1px solid var(--soft-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(14px, 2.4vw, 18px);
  }

  /* Woo summary inside card */
  .wpz-sp__buyCard .product_title{ display:none; }
  
  /* FIX HARD: certains thèmes réaffichent le titre dans .summary */
.wpz-sp h1.product_title,
.wpz-sp .summary h1.product_title,
.wpz-sp .woocommerce-product-details__short-description .product_title{
  display: none !important;
}


  /* --- TOP stock pill (AU-DESSUS du prix) --- */
  .wpz-sp__buyTop{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin: 2px 0 10px;
  }
  .wpz-sp__stockPill{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.38rem .7rem;
    border-radius:999px;
    font-weight:900;
    font-size:.92rem;
    border:1px solid var(--soft-2);
    background: var(--soft);
    color: var(--ink);
  }
  .wpz-sp__stockPill.is-ok{ background:#F2FBF6; border-color:#CFE9D9; }
  .wpz-sp__stockPill.is-out{ background:#FFF0F0; border-color:#F3CCCC; }

  /* On cache le stock Woo natif s'il apparaît (on utilise notre pill UX) */
  .wpz-sp__buyCard .stock,
  .wpz-sp__buyCard p.stock{
    display:none !important;
  }

  /* Prix + "Prix :" */
  .wpz-sp__buyCard .price{
    font-weight:900;
    font-size: clamp(20px, 2.2vw, 26px);
    margin: 8px 0 10px;
    color: var(--ink);
  }
  .wpz-sp__buyCard .price::before{
    content: "Prix : ";
    font-weight: 900;
    color: var(--muted);
  }
  .wpz-sp__buyCard .price del{ opacity:.55; font-weight:700; margin-right:.45rem; }
  .wpz-sp__buyCard .price ins{ text-decoration:none; }

  .wpz-sp__buyCard .woocommerce-product-details__short-description{
    color: var(--muted);
    margin: 10px 0 14px;
  }

  /* Variations */
  .wpz-sp__buyCard form.cart{ margin-top:14px; display:grid; gap:12px; }
  .wpz-sp__buyCard .variations{ margin:0; border:0; }
  .wpz-sp__buyCard .variations td{ padding:8px 0; border:0; }
  .wpz-sp__buyCard .variations label{ font-weight:900; margin: 0 0 6px; color: var(--ink); }
  .wpz-sp__buyCard .reset_variations{ font-size:.95rem; color: var(--muted); }

  /* Quantity base */
  .wpz-sp__buyCard .quantity{ display:inline-flex; align-items:center; gap:10px; }
  .wpz-sp__buyCard .quantity .qty{ width:96px; text-align:center; border-radius:999px; }

  /* ✅ Simple product : QTY + BTN sur la même ligne */
  .wpz-sp__buyCard form.cart:not(.variations_form){
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .wpz-sp__buyCard form.cart:not(.variations_form) .quantity{
    flex: 0 0 auto;
  }
  .wpz-sp__buyCard form.cart:not(.variations_form) .single_add_to_cart_button{
    flex: 1 1 auto;
    min-width: 200px;
    white-space: nowrap;
  }

  /* ✅ Variable product : bloc add-to-cart (Woo) sur une ligne */
  .wpz-sp__buyCard .woocommerce-variation-add-to-cart{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top: 10px;
  }
  .wpz-sp__buyCard .woocommerce-variation-add-to-cart .quantity{ flex: 0 0 auto; }
  .wpz-sp__buyCard .woocommerce-variation-add-to-cart .single_add_to_cart_button{
    flex: 1 1 auto;
    min-width: 200px;
    white-space: nowrap;
  }

  /* ==========================================================
     PATCH CRITIQUE — Anti-violet Woo / thèmes (boutons + liens)
     ========================================================== */

  .wpz-sp a:link,
  .wpz-sp a:visited{
    color: var(--brand);
  }
  .wpz-sp a:hover{ color: color-mix(in oklab, var(--brand) 75%, #000); }

  .wpz-sp .button,
  .wpz-sp a.button,
  .wpz-sp button.button,
  .wpz-sp input.button,
  .wpz-sp .single_add_to_cart_button,
  .wpz-sp .wp-element-button{
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 900;
    border-radius: 999px;
  }

  .wpz-sp .button:hover,
  .wpz-sp a.button:hover,
  .wpz-sp button.button:hover,
  .wpz-sp input.button:hover,
  .wpz-sp .single_add_to_cart_button:hover{
    filter: brightness(.95);
  }

  .wpz-sp a:focus,
  .wpz-sp button:focus,
  .wpz-sp .button:focus,
  .wpz-sp input:focus{
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 25%, transparent) !important;
  }

  /* ==========================================================
     PRODUCT META (Catégories / Étiquettes) — CHIPS PREMIUM
     ========================================================== */

 /* ==========================================================
   PRODUCT META — chips petites grises + WRAP (anti overflow sidebar)
   (On garde les labels Woo natifs : "Catégories :" / "Étiquettes :")
   ========================================================== */

.wpz-sp__buyCard .product_meta{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--soft-2);

  display: grid;
  gap: 10px;

  /* anti overflow global */
  max-width: 100%;
  min-width: 0;
}

.wpz-sp__buyCard .product_meta > span{
  display: block;               /* ✅ wrap naturel */
  max-width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.35;

  /* anti dépassement sur textes longs */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ✅ Chips petites grises */
.wpz-sp__buyCard .product_meta a{
  display: inline-block;        /* ✅ wrap */
  vertical-align: top;

  margin: 6px 6px 0 0;
  padding: .20rem .55rem;

  border-radius: 999px;
  border: 1px solid var(--soft-2);
  background: var(--soft);

  font-size: .78rem;
  font-weight: 800;
  line-height: 1.1;

  color: color-mix(in oklab, var(--muted) 90%, #fff);
  text-decoration: none;

  /* ✅ LE FIX IMPORTANT : autoriser le retour à la ligne */
  white-space: normal;          /* <-- au lieu de nowrap */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.wpz-sp__buyCard .product_meta a:hover{
  border-color: color-mix(in oklab, var(--brand) 18%, var(--soft-2));
  background: color-mix(in oklab, var(--soft) 78%, #fff);
  color: var(--ink);
}


  .wpz-sp__buyCard .product_meta a:active{ transform: translateY(1px); }

  /* TRUST BLOCK */
  .wpz-sp__trust{
    margin-top: 16px;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--soft-2);
    border-radius: var(--radius);
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.75)
    );
  }

  .wpz-sp__trustItem{
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--soft-2);
    box-shadow: 0 12px 28px rgba(0,0,0,.05);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .wpz-sp__trustItem:hover{
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--brand) 25%, var(--soft-2));
    box-shadow: 0 18px 36px rgba(0,0,0,.08);
  }

  .wpz-sp__trustIcon{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 28px;
    height: 28px;
    color: var(--brand);
  }

  .wpz-sp__trustText{
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .wpz-sp__trustItem strong{
    color: var(--ink);
    font-weight: 800;
    letter-spacing: .2px;
  }

  .wpz-sp__muted{
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.4;
  }

  .wpz-sp__asideCtas{
    margin-top: 16px;
    display: grid;
    gap: 12px;
  }

  /* Tabs */
  .wpz-sp__tabs{ margin-top: clamp(18px, 3vw, 28px); }
  .wpz-sp__tabs .woocommerce-tabs{
    border:1px solid var(--soft-2);
    border-radius: var(--radius);
    background:#fff;
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .wpz-sp__tabs .wc-tabs{
    margin:0;
    padding:10px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border-bottom:1px solid var(--soft-2);
    background: var(--soft);
  }
  .wpz-sp__tabs .wc-tabs li{ margin:0; }
  .wpz-sp__tabs .wc-tabs li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.55rem .85rem;
    border-radius:999px;
    border:1px solid var(--soft-2);
    background:#fff;
    color: var(--ink);
    text-decoration:none;
    font-weight:900;
    transition: background .2s ease, border-color .2s ease, transform .05s ease;
  }
  .wpz-sp__tabs .wc-tabs li.active a,
  .wpz-sp__tabs .wc-tabs li a:hover{
    border-color: color-mix(in oklab, var(--brand) 30%, var(--soft-2));
    background: color-mix(in oklab, var(--brand) 10%, #fff);
  }
  .wpz-sp__tabs .woocommerce-Tabs-panel{
    padding: clamp(14px, 2.4vw, 18px);
  }

  /* Related grid */
  .wpz-sp .related,
  .wpz-sp .up-sells{ margin-top: clamp(18px, 3vw, 28px); }

  .wpz-sp .related ul.products,
  .wpz-sp .up-sells ul.products{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:14px;
  }
  @media (max-width: 980px){
    .wpz-sp .related ul.products,
    .wpz-sp .up-sells ul.products{
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  }
  @media (max-width: 560px){
    .wpz-sp .related ul.products,
    .wpz-sp .up-sells ul.products{
      grid-template-columns: 1fr;
    }
  }
}


/* ==========================================================
   WPZ — Sticky Add-to-Cart (MOBILE ONLY) — CLEAN (no conflict)
   ========================================================== */

body.wpz-sp-has-sticky{
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.wpz-sp__sticky{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 999999;
  display: none;
}

.wpz-sp__stickyInner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}

.wpz-sp__stickyPrice{
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
  white-space: nowrap;
}
.wpz-sp__stickyPrice .price{ margin: 0; font-size: 1.05rem; }
.wpz-sp__stickyPrice del{ opacity: .55; }
.wpz-sp__stickyPrice ins{ text-decoration: none; }

.wpz-sp__stickyQtyInput{
  width: 64px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-align: center;
  font-weight: 800;
  padding: 0 10px;
}

.wpz-sp__stickyBtn{
  margin-left: auto;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  background: rgba(92,161,116,.16);
  color: #2f6f4a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wpz-sp__stickyBtn .dashicons{
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.wpz-sp__stickyBtn.is-disabled,
.wpz-sp__stickyBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.wpz-sp__stickyBtn.is-loading{ opacity: .75; cursor: progress; }
.wpz-sp__stickyBtn.is-ok{ transform: translateY(-1px); }
.wpz-sp__stickyBtn.is-err{ opacity: .85; }

.wpz-sp__sticky--shake{ animation: wpzStickyShake .45s ease; }
@keyframes wpzStickyShake{
  0%{ transform: translateY(0); }
  20%{ transform: translateY(-2px); }
  40%{ transform: translateY(0); }
  60%{ transform: translateY(-2px); }
  100%{ transform: translateY(0); }
}

@media (max-width: 900px){
  .wpz-sp__sticky{ display: block; }
}

@media (min-width: 901px){
  body.wpz-sp-has-sticky{ padding-bottom: 0; }
  .wpz-sp__sticky{ display: none !important; }
}

/* Désactive l'UI des notices Woo sur la fiche produit */
body.single-product .woocommerce-notices-wrapper,
body.single-product .woocommerce-message,
body.single-product .woocommerce-error,
body.single-product .woocommerce-info{
  display: none !important;
}



/* Labels Woo natifs "Catégories :" / "Étiquettes :" — gris clair */
.wpz-sp__buyCard .product_meta .posted_in,
.wpz-sp__buyCard .product_meta .tagged_as{
  color: color-mix(in oklab, var(--muted) 85%, #fff);
  font-size: .86rem;
  font-weight: 800;
}


/* ==========================================================
   WPZ — RECO GRID (Produits conseillés) — 2 colonnes mobile
   ========================================================== */

.wpz-sp__reco{
  margin-top: clamp(18px, 3vw, 28px);
}

.wpz-sp__recoHead{
  margin-bottom: 12px;
}

.wpz-sp__gridProducts{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Tablette + mobile : 2 colonnes */
@media (max-width: 980px){
  .wpz-sp__gridProducts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* On garde 2 colonnes même en petit mobile */
@media (max-width: 560px){
  .wpz-sp__gridProducts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Reset Woo/thème sur les items */
.wpz-sp__gridProducts > li.product{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Anti clearfix/theme sur ul.products */
.wpz-sp__gridProducts::before,
.wpz-sp__gridProducts::after{
  content: none !important;
  display: none !important;
}



/* ==========================================================
   TABS Woo — BRAND (plus de gris)
   ========================================================== */

.wpz-sp__tabs .wc-tabs{
  margin: 0;
  padding: 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  border-bottom: 1px solid color-mix(in oklab, var(--brand) 18%, var(--soft-2));
  background:
    radial-gradient(420px 220px at 14% 30%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, #fff), #fff);
}

.wpz-sp__tabs .wc-tabs li{ margin: 0; }

.wpz-sp__tabs .wc-tabs li a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .55rem .88rem;
  border-radius: 999px;

  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--soft-2));
  background: rgba(255,255,255,.86);
  color: var(--ink);
  text-decoration: none;

  font-weight: 900;
  font-size: .92rem;

  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.wpz-sp__tabs .wc-tabs li a:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand) 36%, var(--soft-2));
  background: color-mix(in oklab, var(--brand) 10%, #fff);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

/* ✅ Active tab = brand rempli */
.wpz-sp__tabs .wc-tabs li.active a{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 16px 34px color-mix(in oklab, var(--brand) 24%, transparent);
}

@media (max-width: 560px){
  .wpz-sp__tabs .wc-tabs{ padding: 10px; gap: 8px; }
  .wpz-sp__tabs .wc-tabs li a{
    padding: .48rem .74rem;
    font-size: .88rem;
  }
}

/* ==========================================================
   FIX TYPO TABS (H2/H3 trop gros dans panels Woo)
   ========================================================== */
.wpz-sp__tabs .woocommerce-Tabs-panel h2{
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  margin: 6px 0 14px;
  letter-spacing: .2px;
}

.wpz-sp__tabs .woocommerce-Tabs-panel h3{
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 14px 0 10px;
}


.wpz-sp__recoHead .wpz-sp__h2{
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 20px 0 8px;
}

.wpz-sp__recoHead .wpz-sp__muted{
  margin: 0;
  max-width: 62ch;
}

/* ==========================================================
   TABLE "Informations complémentaires" — BRAND (plus de gris)
   ========================================================== */

.wpz-sp__tabs table.shop_attributes{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--soft-2));
  border-radius: 16px;

  background:
    radial-gradient(520px 260px at 10% 10%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 65%),
    #fff;

  box-shadow: 0 16px 38px rgba(0,0,0,.06);
}

.wpz-sp__tabs table.shop_attributes th,
.wpz-sp__tabs table.shop_attributes td{
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 12%, var(--soft-2));
  vertical-align: top;
}

/* Ligne zebra très légère (brand) */
.wpz-sp__tabs table.shop_attributes tr:nth-child(even) td{
  background: color-mix(in oklab, var(--brand) 4%, #fff);
}

.wpz-sp__tabs table.shop_attributes tr:last-child th,
.wpz-sp__tabs table.shop_attributes tr:last-child td{
  border-bottom: 0;
}

.wpz-sp__tabs table.shop_attributes th{
  width: 40%;
  color: var(--ink);
  font-weight: 900;

  background: color-mix(in oklab, var(--brand) 10%, #fff);
  border-right: 1px solid color-mix(in oklab, var(--brand) 12%, var(--soft-2));
}

.wpz-sp__tabs table.shop_attributes td{
  color: var(--ink);
  font-weight: 700;
  opacity: .9;
}


/* ==========================================================
   H1 Produit — Féminin mariage propre (sans coupe)
   ========================================================== */

.wpz-sp__title{
  position: relative;

  margin: 8px 0 22px;

  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.25;

  /* Taille féminine maîtrisée */
  font-size: clamp(28px, 2.8vw, 32px);

  color: var(--ink);

  /* On laisse le texte vivre naturellement */
  max-width: 100%;
}

/* Soulignage vert foncé → effacement */
.wpz-sp__title::after{
  content: "";
  display: block;

  margin-top: 14px;

  width: 120px;
  height: 3px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    color-mix(in oklab, var(--brand) 50%, transparent) 60%,
    transparent 100%
  );
}

/* Mobile équilibré */
@media (max-width: 640px){
  .wpz-sp__title{
    font-size: 25px;
    line-height: 1.3;
  }

  .wpz-sp__title::after{
    width: 90px;
    height: 2.5px;
  }
}







/* ==========================================================
   WPZ — Woo Gallery (GRID THUMBS) — FINAL
   Scope: .wpz-sp__media
   Objectifs:
   ✅ Main image 1:1 stable (contain, jamais rognée)
   ✅ Thumbs en GRID (wrap) => plus de souci de scroll/overlay
   ✅ Loupe Woo unique + kill plugins zoom
   ✅ Anti-bleed / anti hover glitch
   ========================================================== */

@layer components {

  /* ---- CARD ---- */
  .wpz-sp__media{
    border: 1px solid var(--soft-2);
    border-radius: calc(var(--radius) + 2px);
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  /* ==========================================================
     LAYOUT: colonne + séparation nette (viewport puis thumbs)
     => empêche le viewport de recouvrir les thumbs
     ========================================================== */
  .wpz-sp__media .woocommerce-product-gallery{
    position: relative !important;
    margin: 0 !important;
    padding: clamp(12px, 2vw, 16px) !important;
    box-sizing: border-box;

    display: grid !important;
    grid-template-rows: auto auto;
    row-gap: 12px;

    overflow: visible !important;
  }

  /* ---- Viewport / slider zone ---- */
  .wpz-sp__media .flex-viewport{
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border-radius: 16px;
    margin: 0 !important;

    /* anti “bloc transparent” */
    height: auto !important;
    min-height: 0 !important;
  }

  /* UL slides / wrapper */
  .wpz-sp__media .woocommerce-product-gallery__wrapper{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    z-index: 1 !important;
  }

  .wpz-sp__media .woocommerce-product-gallery__image{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---- Cadre 1:1 ---- */
  .wpz-sp__media .woocommerce-product-gallery__image > a{
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    overflow: hidden !important;
    border-radius: 16px;
    background: #fff;
    -webkit-tap-highlight-color: transparent;
  }

  @supports not (aspect-ratio: 1 / 1){
    .wpz-sp__media .woocommerce-product-gallery__image > a{
      position: relative;
      height: 0;
      padding-top: 100%;
    }
    .wpz-sp__media .woocommerce-product-gallery__image > a > img{
      position: absolute;
      inset: 0;
    }
  }

  /* ✅ Main image: contain (jamais rognée) */
  .wpz-sp__media .woocommerce-product-gallery__image img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
    background: #fff;

    transform: none !important;
    transition: none !important;
    filter: none !important;

    border-radius: 0 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
  }

  .wpz-sp__media .woocommerce-product-gallery__image > a:hover img,
  .wpz-sp__media .woocommerce-product-gallery__image > a:active img,
  .wpz-sp__media .woocommerce-product-gallery__image > a:focus img{
    transform: none !important;
    filter: none !important;
  }

  /* ==========================================================
     THUMBS: GRID (plus de scroll)
     ========================================================== */

  /* Nav thumbs doit être dans le flux + au-dessus de tout */
  .wpz-sp__media .flex-control-nav.flex-control-thumbs{
    position: relative !important;
    z-index: 9999 !important;

    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    /* ✅ GRID responsive */
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;

    overflow: visible !important;

    /* sécurité anti thèmes */
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tablette */
  @media (max-width: 980px){
    .wpz-sp__media .flex-control-nav.flex-control-thumbs{
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  /* Mobile */
  @media (max-width: 640px){
    .wpz-sp__media .flex-control-nav.flex-control-thumbs{
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
  }

  /* Items thumbs */
  .wpz-sp__media .flex-control-nav.flex-control-thumbs > li{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    float: none !important;        /* tue float Woo */
    width: auto !important;        /* tue width inline Woo */
    max-width: none !important;

    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 12px);

    /* ✅ carré stable */
    aspect-ratio: 1 / 1;
    background: #fff;
  }

  .wpz-sp__media .flex-control-nav.flex-control-thumbs img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 0 !important;
    border: 1px solid var(--soft-2) !important;
    background: #fff !important;

    transform: none !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;

    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .wpz-sp__media .flex-control-nav.flex-control-thumbs img:hover{
    border-color: color-mix(in oklab, var(--brand) 30%, var(--soft-2)) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.07);
  }

  /* Active thumb (Woo met class flex-active sur img) */
  .wpz-sp__media .flex-control-nav.flex-control-thumbs img.flex-active{
    border-color: color-mix(in oklab, var(--brand) 45%, var(--soft-2)) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
  }

  /* ==========================================================
     KILL OVERLAYS (si un calque invisible passe au-dessus)
     ========================================================== */

  /* rien ne doit pouvoir capter les events SUR les thumbs */
  .wpz-sp__media .flex-control-nav.flex-control-thumbs,
  .wpz-sp__media .flex-control-nav.flex-control-thumbs *{
    pointer-events: auto !important;
  }

  /* mais si un plugin ajoute un overlay au-dessus (hors thumbs), on le neutralise */
  .wpz-sp__media .yith_magnifier_mousetrap,
  .wpz-sp__media .zoomContainer,
  .wpz-sp__media .zoomWindowContainer,
  .wpz-sp__media .zoomImg,
  .wpz-sp__media .easyzoom-flyout,
  .wpz-sp__media .easyzoom{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ==========================================================
     LOUPE (Woo) — unique + propre
     ========================================================== */
  .wpz-sp__media .woocommerce-product-gallery__trigger{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10000 !important;

    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.14) !important;
    backdrop-filter: blur(10px);

    text-decoration: none !important;
    overflow: hidden !important;

    text-indent: -9999px !important;
    white-space: nowrap !important;
  }

  .wpz-sp__media .woocommerce-product-gallery__trigger::after{ content:none !important; display:none !important; }
  .wpz-sp__media .woocommerce-product-gallery__trigger *{ display:none !important; }

  .wpz-sp__media .woocommerce-product-gallery__trigger::before{
    content: "\f179" !important;
    font-family: dashicons !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--ink) !important;
    display: block !important;
    text-indent: 0 !important;
  }

  .wpz-sp__media .woocommerce-product-gallery__trigger:not(:first-of-type){
    display: none !important;
  }
}