/* ══════════════════════════════════════════════════════
   PRODUCT — page pleine (galerie, infos, accordéons, widget expert)
   NB : à l'origine pensée comme une modale ("PRODUCT MODAL" dans les
   commentaires historiques), migrée en page pleine sans que le
   commentaire ait été nettoyé. Les classes .prod-modal/.prod-sheet/
   .ps-img de l'ancien media query mobile sont mortes (aucun élément
   du DOM ne les porte) — conservées telles quelles dans
   responsive/mobile.css pour ne rien changer au comportement.
══════════════════════════════════════════════════════ */
#product{background:#fff;color:#0C0C0B}
#product{--bg:#fff;--bg-card:#F5F4F2;--border:rgba(0,0,0,0.08);--border-h:rgba(0,0,0,0.14);--w:#0C0C0B;--g1:#F0EFED;--g2:#E4E2DF;--g3:#C8C6C2;--g4:#8A8880;--g5:#6B6965;--g6:#3A3936}
.prod-page{max-width:1240px;margin:0 auto;padding:24px 28px 60px}
.prod-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--g5);cursor:pointer;padding:8px 0;margin-bottom:16px;background:none;border:none;font-family:var(--sans);transition:color .18s}
.prod-back:hover{color:var(--w)}
.prod-crumbs{font-size:12px;color:var(--g4);margin-bottom:20px}
.prod-crumbs span{cursor:pointer}
.prod-crumbs span:hover{color:var(--g6)}
.prod-crumbs .sep{margin:0 8px;color:var(--g3)}
.prod-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:flex-start}
/* Left: gallery */
.prod-gallery{position:sticky;top:80px}
.prod-main-img{width:100%;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}
.prod-main-badge{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.08em;font-weight:500;padding:5px 11px;border-radius:20px;text-transform:uppercase}
.prod-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.prod-thumb{aspect-ratio:1;border-radius:var(--r);cursor:pointer;border:1.5px solid transparent;overflow:hidden;transition:all .18s}
.prod-thumb.active{border-color:var(--purple)}
.prod-thumb:hover{border-color:var(--border-h)}
/* Right: info */
.prod-info-side{padding-bottom:24px}
.prod-brand{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g5);margin-bottom:6px}
.prod-title{font-family:var(--serif);font-size:34px;font-weight:300;line-height:1.15;margin-bottom:14px;letter-spacing:-.01em}
.prod-rating{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:13px;color:var(--g5)}
.prod-stars{color:#D4A030;letter-spacing:1px;font-size:14px}
.prod-price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.prod-price-now{font-family:var(--serif);font-size:32px;font-weight:400}
.prod-price-old{font-size:16px;color:var(--g4);text-decoration:line-through}
.prod-price-off{background:rgba(29,158,117,.15);color:#1D9E75;font-size:12px;font-weight:500;padding:3px 8px;border-radius:20px}
.prod-section{margin-bottom:22px}
.prod-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g5);margin-bottom:10px}
.prod-color-row{display:flex;gap:9px;flex-wrap:wrap}
.prod-color{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;position:relative;transition:all .18s}
.prod-color.sel{border-color:var(--w)}
.prod-color.sel::after{content:'';position:absolute;inset:-5px;border:1px solid var(--w);border-radius:50%}
.prod-size-row{display:flex;flex-wrap:wrap;gap:8px}
.prod-size{min-width:52px;padding:9px 14px;border:1px solid var(--border-h);border-radius:var(--r);font-size:13px;color:var(--g6);cursor:pointer;background:none;font-family:var(--sans);transition:all .18s;text-align:center}
.prod-size:hover{border-color:var(--w)}
.prod-size.sel{border-color:var(--w);background:var(--w);color:#fff}
.prod-size.out{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.prod-size-guide{margin-top:10px;font-size:12px;color:var(--purple-l);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.prod-cta-row{display:flex;gap:10px;margin:28px 0 20px}
.prod-add{flex:1;padding:14px;background:var(--w);color:#fff;border:none;border-radius:var(--r);font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:all .18s}
.prod-add:hover{background:#000}
.prod-wish{width:50px;height:50px;background:var(--bg-card);border:1px solid var(--border-h);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all .18s;color:var(--g5)}
.prod-wish:hover{border-color:var(--w);color:var(--w)}
.prod-wish.liked{color:var(--coral);border-color:var(--coral)}
.prod-perks{display:flex;flex-direction:column;gap:9px;padding:16px 18px;background:var(--bg-card);border-radius:var(--r-lg);margin-bottom:24px}
.prod-perk{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--g6)}
.prod-perk .pk-ico{color:var(--purple-l);font-size:14px;flex-shrink:0}
/* Accordions */
.prod-acc{border-top:1px solid var(--border)}
.prod-acc-item{border-bottom:1px solid var(--border)}
.prod-acc-hdr{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 0;background:none;border:none;font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--w);cursor:pointer;text-align:left}
.prod-acc-caret{font-size:16px;transition:transform .2s;color:var(--g4);font-weight:300}
.prod-acc-item.open .prod-acc-caret{transform:rotate(45deg)}
.prod-acc-body{max-height:0;overflow:hidden;transition:max-height .3s;font-size:14px;color:var(--g5);line-height:1.7}
.prod-acc-item.open .prod-acc-body{max-height:600px;padding-bottom:18px}
.prod-acc-body ul{padding-left:18px;margin-top:6px}
.prod-acc-body li{margin-bottom:4px}
/* Also-like */
.prod-also{max-width:1240px;margin:60px auto 0;padding:0 28px}
.prod-also-ttl{font-family:var(--serif);font-size:26px;font-weight:300;margin-bottom:20px}
/* ── EXPERT WIDGET (bas de la colonne infos) ──
   Point d'intégration Cleed : contient les éléments portant les
   classes/ids "cleed-magic-recommendations*". Voir README racine. */
.expert-widget{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:var(--r-lg);padding:22px;margin-top:24px;font-family:var(--sans);color:#0C0C0B}
.expert-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8A8880;margin-bottom:5px}
.expert-ttl{font-size:14px;font-weight:500;margin-bottom:12px;color:#0C0C0B}
.expert-q{width:100%;text-align:left;padding:11px 14px;background:#F5F4F2;border:1px solid rgba(0,0,0,0.06);border-radius:var(--r);font-family:var(--sans);font-size:12.5px;color:#3A3936;cursor:pointer;line-height:1.45;margin-bottom:7px;transition:all .18s;display:flex;gap:9px;align-items:flex-start}
.expert-q:hover{border-color:var(--purple);background:rgba(137,165,255,.08)}
.expert-q-ico{color:#8A8880;flex-shrink:0;font-size:12px;margin-top:1px}
.expert-input{width:100%;padding:11px 40px 11px 14px;background:#fff;border:1px solid rgba(0,0,0,0.12);border-radius:var(--r);font-family:var(--sans);font-size:13px;color:#0C0C0B;outline:none;transition:border-color .18s;margin-top:5px}
.expert-input:focus{border-color:var(--purple)}
.expert-input::placeholder{color:#8A8880}
.expert-input-wrap{position:relative}
.expert-send{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;background:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8A8880;transition:color .18s}
.expert-send:hover{color:var(--purple-l)}
.expert-close{position:absolute;top:10px;right:10px;width:24px;height:24px;background:none;border:none;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:#8A8880}
.expert-close:hover{background:#F5F4F2}
/* Mobile: expert widget full width bottom */
@media(max-width:768px){
  .expert-widget{padding:18px}
  .prod-layout{grid-template-columns:1fr;gap:24px}
  .prod-gallery{position:static}
  .prod-page{padding:16px 16px 24px}
  .prod-title{font-size:26px}
  .prod-price-now{font-size:26px}
}
