/*
Fiche produit SNY Worldwide — CSS du template Elementor "Produit unique" (#5816).
Chargé uniquement sur is_product() (voir functions.php).
Toutes les règles sont scopées sous .sny-product pour ne jamais affecter le Header,
le Footer, la Boutique ou les autres templates Elementor.
*/
:root{
  --ink:      #12172B;
  --sand:     #F1EAD9;
  --paper:    #FAF6EE;
  --gold:     #B8963F;
  --ember:    #A8471F;
  --ink-70:   rgba(18,23,43,.7);
  --ink-40:   rgba(18,23,43,.4);
  --line:     rgba(18,23,43,.12);
  --radius:   2px;
  --shadow:   0 20px 60px -25px rgba(18,23,43,.35);
}

/* !important nécessaire : le container Elementor applique sa propre règle
   ":is(.elementor-section-wrap,[data-elementor-id]) > .e-con { max-width:min(100%,var(--width)) }"
   plus spécifique que .sny-product seul (même bug identifié sur la page Boutique). */
.sny-product{
  max-width:1280px !important;margin:0 auto;padding:0 clamp(16px,4vw,48px) 80px;
  background:var(--sand);color:var(--ink);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
}
.sny-product *{box-sizing:border-box;}
.sny-product img{max-width:100%;display:block;}

.sny-product .eyebrow{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);display:flex;align-items:center;gap:10px;
}
.sny-product .eyebrow::before{content:'';width:22px;height:1px;background:var(--ember);}

/* ================= STORY REEL — élément signature ================= */
.sny-product .reel-wrap{padding:28px 0 8px;}
.sny-product .reel-wrap.category-reel{margin-top:32px;}
.sny-product .reel-wrap.category-reel .reel{justify-content:center;}
.sny-product .reel{display:flex;gap:22px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none;}
.sny-product .reel::-webkit-scrollbar{display:none;}
.sny-product .reel-item{flex:0 0 auto;text-align:center;cursor:pointer;}
.sny-product .reel-ring{
  width:74px;height:74px;border-radius:50%;padding:3px;
  background:conic-gradient(from 210deg, var(--gold), var(--ember), var(--gold));
  transition:transform .25s ease;
}
.sny-product .reel-item.is-active .reel-ring{background:var(--ink);}
.sny-product .reel-item:hover .reel-ring{transform:scale(1.06);}
.sny-product .reel-thumb{
  width:100%;height:100%;border-radius:50%;border:2.5px solid var(--sand);
  background-size:cover;background-position:center;
}
.sny-product .reel-label{
  display:block;margin-top:8px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-70);font-family:'Space Mono',monospace;
}

/* ================= HERO ================= */
.sny-product .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;padding:8px 0 40px;}
.sny-product .hero-media{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);background:var(--ink);
}
.sny-product .hero-media img{width:100%;height:100%;object-fit:cover;}
.sny-product .hero-badge{
  position:absolute;top:18px;left:18px;background:var(--paper);color:var(--ink);
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 12px;border-radius:100px;z-index:2;
}
.sny-product .hero-copy{padding-right:8px;}
.sny-product .hero-title,
.sny-product .hero-title.elementor-heading-title{
  font-family:'Fraunces',serif;font-weight:600;font-optical-sizing:auto;
  font-size:clamp(38px,5vw,64px);line-height:.94;letter-spacing:-.01em;margin:14px 0 6px;color:var(--ink);
}
.sny-product .hero-sub{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:clamp(16px,1.6vw,20px);color:var(--ink-70);margin:0 0 22px;
}
.sny-product .hero-meta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.sny-product .tag{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);
  border-radius:100px;color:var(--ink-70);
}
.sny-product .tag.exclusive{border-color:var(--ember);color:var(--ember);}

/* ---- Prix : WooCommerce sort déjà <p class="price"> nativement ---- */
.sny-product .price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.sny-product .price-row .price,
.sny-product .summary .price{
  font-family:'Fraunces',serif;font-size:34px;font-weight:600;color:var(--ink);
}
.sny-product .price-row .price ins{text-decoration:none;}
.sny-product .price-row .price del{opacity:.5;font-size:.55em;margin-right:8px;}
.sny-product .price-note{font-size:13px;color:var(--ink-70);}

/* ---- Add to cart natif WooCommerce, restylé pour matcher la maquette ---- */
.sny-product .buy-block{display:flex;gap:12px;margin-bottom:14px;align-items:stretch;}
.sny-product .buy-block form.cart{display:flex;gap:12px;width:100%;align-items:stretch;flex-wrap:wrap;}
.sny-product .buy-block .quantity{
  display:flex;align-items:center;border:1px solid var(--line);
  border-radius:100px;overflow:hidden;background:var(--paper);
}
.sny-product .buy-block .quantity input.qty{
  border:none;background:none;width:52px;height:52px;text-align:center;
  font-family:'Space Mono',monospace;font-size:14px;color:var(--ink);
  -moz-appearance:textfield;
}
.sny-product .buy-block .quantity input.qty::-webkit-outer-spin-button,
.sny-product .buy-block .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.sny-product .btn-primary,
.sny-product .single_add_to_cart_button{
  flex:1;border:none;border-radius:100px;background:var(--ink);color:var(--paper) !important;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  cursor:pointer;transition:background .2s ease, transform .2s ease;
  min-height:52px;padding:0 24px;
}
.sny-product .btn-primary:hover,
.sny-product .single_add_to_cart_button:hover{background:var(--ember);transform:translateY(-1px);}

.sny-product .pay-alt{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.sny-product .pay-alt > *{flex:1;}
.sny-product .pay-alt button{
  flex:1;height:48px;border-radius:100px;border:1px solid var(--line);
  background:var(--paper);font-family:'Inter',sans-serif;font-weight:600;
  font-size:13px;cursor:pointer;color:var(--ink);
}
.sny-product .pay-alt button:hover{border-color:var(--ink);}

/* ---- Stock natif WooCommerce (p.stock) ---- */
.sny-product .stock-line,
.sny-product p.stock{
  display:flex;align-items:center;gap:8px;margin-top:18px;
  font-size:12.5px;color:var(--ink-70);font-family:'Inter',sans-serif;
}
.sny-product .stock-line .dot,
.sny-product p.stock::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--ember);flex:0 0 auto;display:block;
}
.sny-product p.stock.out-of-stock::before{background:#b3261e;}

/* ================= EDITORIAL STORY BAND ================= */
.sny-product .story-band{
  margin:64px 0;display:grid;grid-template-columns:0.9fr 1.1fr;gap:0;
  background:var(--ink);color:var(--paper);border-radius:var(--radius);overflow:hidden;
}
.sny-product .story-media{aspect-ratio:16/13;overflow:hidden;}
.sny-product .story-media img{width:100%;height:100%;object-fit:cover;}
.sny-product .story-text{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;}
.sny-product .story-text .eyebrow{color:var(--gold);}
.sny-product .story-text .eyebrow::before{background:var(--gold);}
.sny-product .story-text h3{
  font-family:'Fraunces',serif;font-weight:500;font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;margin:14px 0 16px;color:var(--paper);
}
.sny-product .story-text p{font-size:15px;line-height:1.7;color:rgba(250,246,238,.75);max-width:44ch;}

/* ================= SPEC ACCORDION (contenu réel produit) ================= */
.sny-product .specs{margin:56px 0;}
.sny-product .section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px;
}
.sny-product .section-head h4{font-family:'Fraunces',serif;font-size:22px;font-weight:600;margin:6px 0 0;color:var(--ink);}
.sny-product .acc-item{border-bottom:1px solid var(--line);}
.sny-product .acc-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 2px;cursor:pointer;font-weight:600;font-size:14.5px;background:none;border:none;width:100%;text-align:left;color:var(--ink);
}
.sny-product .acc-head .plus{font-family:'Space Mono',monospace;color:var(--ember);font-size:16px;transition:transform .25s ease;}
.sny-product .acc-item.open .plus{transform:rotate(45deg);}
.sny-product .acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14px;line-height:1.75;color:var(--ink-70);}
.sny-product .acc-item.open .acc-body{max-height:400px;}
.sny-product .acc-body-inner{padding:0 2px 20px;}

/* ================= RELATED — mêmes cartes .p-card que la grille Boutique ================= */
.sny-product .related{margin:64px 0 8px;}
.sny-product .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;}
.sny-product .related > h2{font-family:'Fraunces',serif;font-size:22px;font-weight:600;margin:6px 0 0;color:var(--ink);}

.sny-product .p-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;position:relative;
  box-shadow:0 12px 30px -22px rgba(18,23,43,.3);transition:transform .3s ease;
}
.sny-product .p-card:hover{transform:translateY(-4px);}
.sny-product .p-card a.p-link{color:inherit;text-decoration:none;display:block;}
.sny-product .p-media{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--ink);}
.sny-product .p-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.sny-product .p-card:hover .p-media img{transform:scale(1.06);}
.sny-product .p-card .badge{
  position:absolute;top:14px;left:14px;background:var(--paper);color:var(--ink);
  font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;display:flex;align-items:center;gap:6px;z-index:2;
}
.sny-product .p-card .badge.gold{background:var(--gold);color:var(--ink);}
/* !important nécessaire : la règle ".woocommerce a.button, ..." du thème Inspiro est plus
   spécifique et écraserait sinon le style pilule (voir même bug déjà résolu sur la Boutique). */
.sny-product .p-card .add_to_cart_button{
  display:flex !important;align-items:center;justify-content:center;gap:8px;
  width:100% !important;height:44px !important;
  padding:0 !important;border:none !important;border-radius:100px !important;
  background:var(--ink) !important;color:var(--paper) !important;
  font-family:'Inter',sans-serif !important;font-weight:600 !important;font-size:12.5px !important;
  letter-spacing:.02em;cursor:pointer;
  transition:background .2s ease, transform .25s ease, box-shadow .2s ease, opacity .25s ease;
  text-align:center;line-height:normal !important;text-decoration:none !important;
  margin:0 0 14px !important;box-sizing:border-box;
}
@media (hover:hover) and (pointer:fine){
  .sny-product .p-card .add_to_cart_button{opacity:0;transform:translateY(6px);pointer-events:none;}
  .sny-product .p-card:hover .add_to_cart_button,
  .sny-product .p-card:focus-within .add_to_cart_button{opacity:1;transform:translateY(0);pointer-events:auto;}
}
.sny-product .p-card .add_to_cart_button:hover{
  background:var(--ember) !important;transform:translateY(-2px);
  box-shadow:0 8px 16px -6px rgba(168,71,31,.5);
}
.sny-product .p-card .add_to_cart_button:active{transform:translateY(0);}
.sny-product .p-card .p-info{padding:18px 4px 4px;position:relative;}
.sny-product .p-card .p-title-link{color:inherit;text-decoration:none;display:block;}
.sny-product .p-card .p-info .name{font-family:'Fraunces',serif;font-weight:600;font-size:17px;margin:0 0 6px;}
.sny-product .p-card .p-info .meta{display:flex;justify-content:space-between;align-items:center;}
.sny-product .p-card .p-info .price{font-size:14.5px;color:var(--ink-70);}
.sny-product .p-card .p-info .price ins{text-decoration:none;}
.sny-product .p-card .p-info .price del{opacity:.5;font-size:.85em;margin-right:4px;}
.sny-product .p-card .p-info .gender{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember);}

/* ================= MOBILE STICKY BUY BAR ================= */
.sny-product .sticky-buy{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--paper);border-top:1px solid var(--line);
  padding:12px 16px;align-items:center;gap:12px;
  box-shadow:0 -12px 30px -18px rgba(18,23,43,.4);
}
.sny-product .sticky-buy .price{font-size:18px;flex:0 0 auto;}
.sny-product .sticky-buy .single_add_to_cart_button,
.sny-product .sticky-buy .btn-primary{height:46px;min-height:46px;}
.sny-product .sticky-buy .quantity{display:none;}

/* ================= RESPONSIVE ================= */
/* Titre/prix/achat empilés sous l'image uniquement en dessous de 768px (mobile) ;
   dès la tablette (≥768px) et sur desktop, ils restent côte à côte de l'image. */
@media (max-width: 767px){
  .sny-product .hero{grid-template-columns:1fr;gap:28px;}
  .sny-product .hero-media{aspect-ratio:4/4.6;}
}
@media (max-width: 900px){
  .sny-product .story-band{grid-template-columns:1fr;}
  .sny-product .story-media{aspect-ratio:16/10;}
  .sny-product .related-grid,
  .sny-product .related.products ul.products{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 560px){
  .sny-product{padding:0 16px 120px;}
  .sny-product .related-grid,
  .sny-product .related.products ul.products{grid-template-columns:1fr 1fr;gap:14px;}
  .sny-product .buy-block{display:none;}
  .sny-product .sticky-buy{display:flex;}
  .sny-product .reel-ring{width:64px;height:64px;}
  .sny-product .hero-title{font-size:clamp(32px,9vw,44px);}
}