/* ═══════════════════════════════════════════════════════════════════════
   DARK TIDES SUPPLY — product pages, cart drawer, checkout
   Loaded after styles.css; reuses its tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════ PRODUCT PAGE ══════════════════════════ */
.pdp{
  margin-left:var(--rail);
  padding:calc(var(--bar) + clamp(32px,5vw,72px)) var(--pad) clamp(60px,7vw,110px);
  min-height:100vh;
}
.pdp-back{
  display:inline-block; margin-bottom:clamp(24px,3vw,44px);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  transition:color .4s var(--ease);
}
.pdp-back:hover{ color:var(--cream); }

.pdp-grid{
  display:grid; gap:clamp(30px,5vw,80px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}
.pdp-media{ position:relative; background:#0d0d10; border:1px solid var(--hair-2); }
.pdp-media img{ width:100%; height:auto; display:block; }

.pdp-body{ max-width:460px; }
.pdp-no{
  font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}
.pdp-body h1{
  margin-top:14px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem,3.2vw,2.9rem); letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream); line-height:1.06;
}
.pdp-price{
  margin-top:18px;
  font-family:var(--display); font-size:clamp(1.15rem,1.7vw,1.5rem);
  color:var(--cream); letter-spacing:.04em;
}
.pdp-price .from{
  margin-left:10px; font-family:var(--ui); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.pdp-blurb{
  margin-top:20px; font-size:13px; line-height:2; letter-spacing:.04em;
  color:var(--muted); max-width:40ch;
}

/* ── option groups ──────────────────────────────────────────────────── */
.opt{ margin-top:clamp(26px,3vw,38px); }
.opt-label{
  display:flex; align-items:baseline; gap:12px;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.opt-label .chosen{ color:var(--cream); letter-spacing:.2em; }
.opt-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

.swatch{
  display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 10px;
  border:1px solid var(--hair-2); background:transparent;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-dim);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.swatch i{
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
}
.swatch:hover{ border-color:rgba(233,226,212,.34); color:var(--cream); }
.swatch[aria-pressed="true"]{ border-color:var(--gold-soft); color:var(--cream); }

.size{
  min-width:52px; padding:11px 6px;
  border:1px solid var(--hair-2); background:transparent;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.size:hover{ border-color:rgba(233,226,212,.34); color:var(--cream); }
.size[aria-pressed="true"]{ border-color:var(--gold-soft); color:#0b0b0d; background:var(--cream); }
.size .up{ display:block; margin-top:3px; font-size:8px; letter-spacing:.1em; opacity:.7; }

.size-note{
  margin-top:12px; font-size:10px; letter-spacing:.1em; color:var(--muted);
}

.pdp-add{
  margin-top:clamp(28px,3.4vw,42px);
  display:flex; gap:12px; align-items:stretch; flex-wrap:wrap;
}
.qty{
  display:flex; align-items:center; border:1px solid var(--hair-2);
}
.qty button{
  width:40px; height:100%; color:var(--cream-dim); font-size:15px;
  transition:color .3s;
}
.qty button:hover{ color:var(--cream); }
.qty span{
  min-width:34px; text-align:center;
  font-family:var(--display); font-size:14px; color:var(--cream);
}
.btn-add{
  flex:1 1 220px;
  padding:16px 30px;
  border:1px solid var(--cream); background:var(--cream); color:#0b0b0d;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.btn-add:hover{ background:var(--gold); border-color:var(--gold); }
.btn-add:disabled{
  background:transparent; color:var(--muted);
  border-color:var(--hair-2); cursor:not-allowed;
}

.pdp-meta{
  margin-top:clamp(30px,3.4vw,44px);
  border-top:1px solid var(--hair-2); padding-top:22px;
}
.pdp-meta li{
  display:flex; justify-content:space-between; gap:20px;
  padding:9px 0;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.pdp-meta li span:first-child{ color:var(--muted); }
.pdp-meta li span:last-child{ color:var(--cream-dim); text-align:right; }

/* ═══════════════════════════════ CART DRAWER ═══════════════════════════ */
.cart-scrim{
  position:fixed; inset:0; z-index:180;
  background:rgba(4,4,6,.72); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.cart-scrim.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; z-index:190; top:0; right:0; bottom:0;
  width:min(430px,100vw);
  display:flex; flex-direction:column;
  background:#0a0a0c; border-left:1px solid var(--hair);
  transform:translateX(102%);
  transition:transform .5s var(--ease);
}
.drawer.open{ transform:none; }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(18px,3vw,28px);
  border-bottom:1px solid var(--hair-2);
}
.drawer-head h2{
  font-family:var(--display); font-size:12px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--cream);
}
.drawer-close{ color:var(--muted); font-size:20px; line-height:1; padding:4px 6px; }
.drawer-close:hover{ color:var(--cream); }

.drawer-scroll{
  flex:1; min-height:0; overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.drawer-body{ padding:clamp(14px,2vw,22px); }
.drawer-empty{
  padding:60px 20px; text-align:center;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}

.line{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px;
  padding:16px 4px; border-bottom:1px solid rgba(233,226,212,.06);
}
.line img{ width:64px; height:80px; object-fit:cover; background:#111; }
.line h3{
  font-family:var(--display); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream);
}
.line .spec{
  margin-top:6px; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.line .line-qty{ margin-top:10px; display:flex; align-items:center; gap:10px; }
.line .line-qty button{ color:var(--muted); font-size:13px; padding:2px 5px; }
.line .line-qty button:hover{ color:var(--cream); }
.line .line-qty span{ font-size:11px; color:var(--cream-dim); min-width:16px; text-align:center; }
.line .line-price{
  font-family:var(--display); font-size:13px; color:var(--cream); white-space:nowrap;
}
.line .drop{
  display:block; margin-top:10px; font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.line .drop:hover{ color:#c98e6a; }

.drawer-foot{
  border-top:1px solid var(--hair-2);
  padding:clamp(16px,2.4vw,24px);
  padding-bottom:max(clamp(16px,2.4vw,24px),calc(env(safe-area-inset-bottom) + 16px));
}
.totals{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.totals div{ display:flex; justify-content:space-between; padding:5px 0; color:var(--muted); }
.totals div.grand{
  margin-top:8px; padding-top:12px; border-top:1px solid var(--hair-2);
  color:var(--cream); font-family:var(--display); font-size:14px; letter-spacing:.08em;
}
.drawer-foot .btn-add{ width:100%; margin-top:16px; }
.drawer-consent{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; color:#a79d8d; font-size:11px; line-height:1.5; cursor:pointer; }
.drawer-consent input{ flex:0 0 auto; width:15px; height:15px; margin-top:1px; accent-color:var(--gold); }
.drawer-consent span{ text-transform:none; letter-spacing:.01em; }
.drawer-note{
  margin-top:12px; text-align:center;
  font-size:9px; letter-spacing:.16em; color:var(--muted); line-height:1.9;
}

/* ── ship-to step inside the drawer ─────────────────────────────────── */
.ship{ margin-top:4px; }
.ship h3{
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.ship-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ship-grid .full{ grid-column:1 / -1; }
.ship input,.ship select{
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,.03); border:1px solid var(--hair-2);
  color:var(--cream); font-family:var(--ui); font-weight:300;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  outline:none; transition:border-color .35s;
}
.ship input::placeholder{ color:rgba(184,177,164,.5); }
.ship input:focus,.ship select:focus{ border-color:var(--gold-soft); }
.ship select{ appearance:none; cursor:pointer; }
.ship select option{ background:#0d0d10; }

.rates{ margin-top:16px; }
.rate{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; padding:13px 15px; margin-top:8px;
  border:1px solid var(--hair-2); background:transparent; text-align:left;
  transition:border-color .35s var(--ease);
}
.rate:hover{ border-color:rgba(233,226,212,.32); }
.rate[aria-pressed="true"]{ border-color:var(--gold-soft); }
.rate b{
  display:block; font-weight:400;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
}
.rate small{
  display:block; margin-top:4px;
  font-size:9px; letter-spacing:.14em; color:var(--muted);
}
.rate .amt{ font-family:var(--display); font-size:13px; color:var(--cream); }

.ship-msg{
  margin-top:12px; min-height:1.2em;
  font-size:9.5px; letter-spacing:.16em; color:var(--gold-soft); line-height:1.8;
}
.ship-msg.bad{ color:#c98e6a; }

.spinner{
  display:inline-block; width:11px; height:11px; margin-right:8px;
  border:1px solid rgba(201,169,97,.3); border-top-color:var(--gold);
  border-radius:50%; animation:spin .7s linear infinite;
  vertical-align:-1px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ═══════════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:900px){
  .pdp{ margin-left:var(--rail); padding-left:clamp(18px,4vw,32px); padding-right:clamp(18px,4vw,32px); }
  .pdp-grid{ grid-template-columns:1fr; }
  .pdp-body{ max-width:none; }
}
@media (max-width:560px){
  .drawer{ width:100vw; }
  .ship-grid{ grid-template-columns:1fr; }
}

/* A slug that isn't in the catalogue — hidden, withdrawn, or a typo.
   Only reachable via the /products/_piece fallback. */
.pv-missing{max-width:34rem;margin:5rem auto;text-align:center}
.pv-missing-k{font-family:'Cinzel',serif;font-size:1.4rem;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 .8rem}
.pv-missing p{margin:.5rem 0;line-height:1.6;opacity:.82}