/* =====================================================================
   PRODUCT / CHECKOUT pages — built on the roam tokens in styles.css
   ===================================================================== */

/* solid page header (no sky hero here) */
.pnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad);
  background:color-mix(in srgb, var(--bone) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.pnav .back{ font-weight:600; font-size:.95rem; text-transform:lowercase; opacity:.8; }
.pnav .back:hover{ opacity:1; color:var(--coral); }

/* ---------- product detail layout ---------- */
.pdp{
  max-width:1320px; margin:0 auto;
  padding:clamp(20px,3.5vw,44px) var(--pad) clamp(60px,8vw,110px);
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px); align-items:start;
}
.gallery{ position:sticky; top:92px; }
.gallery__main{
  border-radius:var(--r-lg); overflow:hidden; background:var(--white);
  box-shadow:0 30px 60px rgba(40,30,20,.10); aspect-ratio:1/1;
}
.gallery__main img{ width:100%; height:100%; object-fit:cover; }
.gallery__thumbs{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.thumb{
  width:clamp(60px,6.4vw,88px); aspect-ratio:1/1; border-radius:var(--r-sm); overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:var(--white); transition:border-color .2s;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.active{ border-color:var(--coral); }

/* ---------- buy column ---------- */
.buy__badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--teal-soft); color:var(--teal-deep);
  font-weight:700; font-size:.76rem; letter-spacing:.03em; text-transform:lowercase; padding:7px 14px; border-radius:100px;
}
.buy h1{ font-size:clamp(2rem,3.2vw,2.9rem); margin:16px 0 10px; }
.rating{ display:flex; align-items:center; gap:10px; color:var(--ink-2); font-weight:600; font-size:.95rem; }
.stars{ color:var(--coral); letter-spacing:2px; font-size:1rem; }
.price-row{ display:flex; align-items:baseline; gap:12px; margin:18px 0 6px; flex-wrap:wrap; }
.price{ font-size:2.1rem; font-weight:800; letter-spacing:-.02em; }
.compare{ font-size:1.15rem; color:var(--muted); text-decoration:line-through; }
.save-badge{ background:var(--pink-soft); color:var(--pink-deep); font-weight:800; font-size:.78rem; text-transform:lowercase; padding:5px 12px; border-radius:100px; }
.buy__ship{ color:var(--teal-deep); font-weight:700; font-size:.9rem; text-transform:lowercase; }

.benefits{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.benefits li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-weight:500; text-transform:none; }
.benefits li b{ color:var(--coral); font-weight:800; }

.bundle-head{
  display:flex; align-items:center; gap:14px; margin:28px 0 16px; text-transform:lowercase;
  font-weight:800; letter-spacing:-.01em; font-size:1.05rem;
}
.bundle-head::before,.bundle-head::after{ content:""; height:1px; flex:1; background:color-mix(in srgb,var(--ink) 12%,transparent); }

.opt{
  position:relative; display:block; border:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:var(--r-md); padding:18px 20px; margin-bottom:14px; cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s; background:var(--white);
}
.opt:hover{ border-color:color-mix(in srgb,var(--coral) 55%,transparent); }
.opt.sel{ border-color:var(--coral); background:color-mix(in srgb,var(--coral) 5%,var(--white)); box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 14%,transparent); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.opt__left{ display:flex; gap:12px; }
.opt__radio{ width:20px; height:20px; border-radius:50%; border:2px solid color-mix(in srgb,var(--ink) 25%,transparent); margin-top:2px; flex:none; position:relative; transition:border-color .2s; }
.opt.sel .opt__radio{ border-color:var(--coral); }
.opt.sel .opt__radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--coral); }
.opt__name{ font-weight:800; text-transform:lowercase; font-size:1.05rem; }
.opt__desc{ color:var(--muted); font-size:.9rem; margin-top:2px; text-transform:none; }
.opt__price{ text-align:right; white-space:nowrap; }
.opt__price .p{ font-weight:800; font-size:1.15rem; }
.opt__price .c{ display:block; font-size:.85rem; color:var(--muted); text-decoration:line-through; }
.opt__tag{ position:absolute; top:-11px; right:16px; background:var(--coral); color:var(--bone); font-weight:800; font-size:.7rem; text-transform:lowercase; padding:4px 12px; border-radius:100px; }
.opt__tag.value{ background:var(--teal-deep); }
.opt__colors{ margin-top:16px; display:none; flex-direction:column; gap:12px; }
.opt.sel .opt__colors{ display:flex; }
.colorrow{ display:flex; align-items:center; gap:12px; }
.colorrow .lbl{ font-weight:700; font-size:.85rem; color:var(--ink-2); width:44px; text-transform:lowercase; }
.swatch{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid var(--white); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ink) 15%,transparent); transition:box-shadow .15s; }
.swatch.blush{ background:var(--pink); }
.swatch.aqua{ background:var(--teal); }
.swatch.on{ box-shadow:0 0 0 2px var(--coral); }
.colorrow .cname{ font-size:.85rem; color:var(--muted); text-transform:lowercase; }

.addcart{ width:100%; justify-content:center; font-size:1.05rem; padding:18px; margin-top:8px; }
.stock{ display:flex; align-items:center; gap:8px; margin:14px 0; font-weight:700; font-size:.9rem; color:var(--coral-deep); text-transform:lowercase; }
.stock .pulse{ width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 60%,transparent); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 55%,transparent);} 70%{ box-shadow:0 0 0 10px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

.pay{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
.pay span{ font-weight:700; font-size:.66rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2); background:var(--white); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:7px; padding:6px 9px; }
.reassure{ display:flex; gap:18px 24px; justify-content:center; margin-top:20px; flex-wrap:wrap; color:var(--ink-2); font-weight:600; font-size:.85rem; text-transform:lowercase; }
.reassure b{ color:var(--coral); }

.acc{ margin-top:28px; border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.acc__item{ border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.acc__q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 2px; font-weight:700; text-transform:lowercase; font-size:1rem; color:var(--ink); }
.acc__q .pm{ color:var(--coral); font-size:1.4rem; line-height:1; transition:transform .25s var(--ease); }
.acc__item.open .acc__q .pm{ transform:rotate(45deg); }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.acc__item.open .acc__a{ max-height:260px; }
.acc__a p{ padding:0 2px 18px; margin:0; color:var(--ink-2); text-transform:none; }

/* ---------- slide-in cart ---------- */
.cart{ position:fixed; inset:0; z-index:200; visibility:hidden; }
.cart.open{ visibility:visible; }
.cart__scrim{ position:absolute; inset:0; background:rgba(20,18,14,.42); opacity:0; transition:opacity .3s; }
.cart.open .cart__scrim{ opacity:1; }
.cart__panel{ position:absolute; top:0; right:0; height:100%; width:min(430px,94vw); background:var(--bone); transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column; box-shadow:-20px 0 50px rgba(40,30,20,.22); }
.cart.open .cart__panel{ transform:translateX(0); }
.cart__head{ display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.cart__head h3{ font-size:1.3rem; }
.cart__close{ font-size:1.4rem; line-height:1; color:var(--ink-2); background:none; }
.cart__body{ padding:20px; flex:1; overflow:auto; }
.cart__empty{ color:var(--muted); text-align:center; margin-top:40px; text-transform:lowercase; }
.cart__line{ display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.cart__line img{ width:66px; height:66px; border-radius:var(--r-sm); object-fit:cover; background:var(--white); flex:none; }
.cart__line .ln{ flex:1; }
.cart__line .ln b{ text-transform:lowercase; font-size:1rem; }
.cart__line .ln small{ display:block; color:var(--muted); margin-top:2px; }
.cart__line .lp{ font-weight:800; }
.cart__foot{ padding:20px; border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.cart__sub{ display:flex; justify-content:space-between; font-weight:800; font-size:1.15rem; margin-bottom:6px; text-transform:lowercase; }
.cart__note{ color:var(--muted); font-size:.82rem; margin-bottom:14px; text-transform:lowercase; }

/* ---------- checkout page ---------- */
.checkout{ max-width:1080px; margin:0 auto; padding:clamp(24px,4vw,52px) var(--pad) 90px; display:grid; grid-template-columns:1.2fr .9fr; gap:clamp(28px,4vw,56px); align-items:start; }
.checkout h1{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:700; font-size:.85rem; text-transform:lowercase; margin-bottom:7px; color:var(--ink-2); }
.field input,.field select{ width:100%; font-family:inherit; font-size:1rem; padding:14px 16px; border-radius:var(--r-sm); border:1.5px solid color-mix(in srgb,var(--ink) 15%,transparent); background:var(--white); color:var(--ink); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--coral); }
.field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.summary{ position:sticky; top:92px; background:var(--white); border-radius:var(--r-lg); padding:26px; box-shadow:0 24px 50px rgba(40,30,20,.08); }
.summary h3{ font-size:1.3rem; margin-bottom:18px; }
.summary .line{ display:flex; justify-content:space-between; padding:10px 0; color:var(--ink-2); text-transform:lowercase; }
.summary .tot{ display:flex; justify-content:space-between; padding-top:14px; margin-top:8px; border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); font-weight:800; font-size:1.3rem; text-transform:lowercase; }
.pay-note{ margin-top:18px; font-size:.82rem; color:var(--muted); text-align:center; text-transform:lowercase; }

@media (max-width:900px){
  .pdp{ grid-template-columns:1fr; }
  .gallery{ position:static; }
  .checkout{ grid-template-columns:1fr; }
  .summary{ position:static; order:-1; }
}