/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT PANEL  (.pv)  +  QUICK-VIEW SHELL  (.qv)

   .pv is the panel itself and is used in two places: inside the modal on the
   homepage, and as the whole of /products/<slug>. Style it once here so the
   two can't drift.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the modal shell ──────────────────────────────────────────────────── */
.qv{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(10px, 2.4vw, 40px);
}
/* `display:grid` above beats the `hidden` attribute's `display:none`, which
   would leave an invisible full-screen sheet swallowing every click on the
   page once the panel closed. Both rules below are load-bearing: the first
   for when it's fully closed, the second for the fade-out in between. */
.qv[hidden]{ display:none; }
.qv:not(.is-open){ pointer-events:none; }

html.qv-locked{ overflow:hidden; }

.qv-scrim{
  position:absolute; inset:0;
  background:rgba(4,4,5,.78);
  backdrop-filter:blur(7px) saturate(.7);
  -webkit-backdrop-filter:blur(7px) saturate(.7);
  opacity:0; transition:opacity .26s var(--ease);
}
.qv.is-open .qv-scrim{ opacity:1; }

.qv-panel{
  position:relative;
  width:min(1280px, 100%);
  max-height:calc(100dvh - clamp(20px, 4.8vw, 80px));
  overflow:auto;
  overscroll-behavior:contain;
  background:linear-gradient(180deg, #0e0e11, #0a0a0c 60%);
  border:1px solid var(--hair);
  border-radius:3px;
  box-shadow:0 40px 120px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.qv.is-open .qv-panel{ opacity:1; transform:none; }

.qv-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:46px; height:46px; padding:0;
  display:grid; place-items:center;
  background:rgba(10,10,12,.72);
  border:none; border-radius:50%;
  color:var(--gold); cursor:pointer;
  transition:color .25s var(--ease), transform .35s var(--ease);
}
.qv-close svg{ width:34px; height:34px; }
.qv-close:hover{ color:var(--cream); transform:rotate(90deg); }

/* ── the panel ─────────────────────────────────────────────────────────── */
.pv{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  align-items:stretch;
}
@media (max-width:900px){ .pv{ grid-template-columns:1fr; } }

/* left: imagery */
.pv-media{
  position:relative;
  padding:clamp(18px,2.2vw,30px);
  border-right:1px solid var(--hair-2);
  display:flex; flex-direction:column; gap:18px;
  background:radial-gradient(120% 90% at 50% 30%, #131316 0%, #0b0b0d 70%);
}
@media (max-width:900px){ .pv-media{ border-right:0; border-bottom:1px solid var(--hair-2); } }

.pv-crumb{
  margin:0;
  display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-soft);
}
.pv-crumb svg{ width:15px; height:15px; flex:none; }
.pv-crumb em{ font-style:normal; opacity:.5; }

.pv-stage{
  margin:0; flex:1;
  display:grid; place-items:center;
  min-height:min(60vh, 480px);
}
.pv-stage img{
  max-width:100%; max-height:min(74vh, 760px);
  width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}

/* Same trap as .qv above: an explicit `display` beats the `hidden` attribute,
   so the arrows kept showing for products with a single shot. */
.pv-thumbs{ display:flex; align-items:center; gap:10px; }
.pv-thumbs[hidden]{ display:none; }
.pv-thumbs ul{
  flex:1; list-style:none; margin:0; padding:0;
  display:flex; gap:12px; justify-content:center;
}
.pv-thumbs button[data-shot]{
  display:block; padding:0; background:none; border:0; cursor:pointer;
  color:var(--muted);
}
.pv-thumbs button[data-shot] img{
  display:block; width:92px; height:92px; object-fit:cover;
  border:1px solid transparent; border-radius:2px;
  opacity:.55; transition:opacity .25s var(--ease), border-color .25s var(--ease);
}
.pv-thumbs button[data-shot] span{
  display:block; margin-top:7px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.pv-thumbs button[aria-pressed="true"] img{ opacity:1; border-color:var(--gold-soft); }
.pv-thumbs button[aria-pressed="true"] span{ color:var(--gold); }
.pv-thumbs button[data-shot]:hover img{ opacity:.85; }

.pv-arw{
  flex:none; width:34px; height:34px;
  background:none; border:0; cursor:pointer;
  color:var(--cream-dim); font-size:15px;
  transition:color .25s var(--ease);
}
.pv-arw:hover{ color:var(--gold); }

/* right: the sell */
.pv-body{ padding:clamp(22px,3vw,44px) clamp(20px,3vw,46px) clamp(28px,3vw,44px); }

.pv-eyebrow{
  margin:0 0 16px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-soft);
}
.pv-eyebrow em{ font-style:normal; opacity:.5; }

.pv-title{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,4.4vw,58px); line-height:1.02;
  letter-spacing:.02em; color:var(--cream);
}
.pv-sub{
  margin:8px 0 0;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.7vw,23px); color:var(--gold);
}
.pv-blurb{ margin:18px 0 0; max-width:46ch; color:var(--cream-dim); }

.pv-price{
  margin:26px 0 0; padding-top:22px;
  border-top:1px solid var(--hair-2);
  font-family:var(--display); font-size:30px; color:var(--cream);
}
.pv-from{
  margin-left:10px;
  font-family:var(--ui); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}

.pv-opt{ margin-top:24px; }
.pv-label{
  margin:0 0 11px;
  display:flex; align-items:baseline; gap:10px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft);
}
.pv-chosen{ color:var(--cream-dim); letter-spacing:.08em; }
.pv-guide{
  margin-left:auto;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-dim); border-bottom:1px solid var(--hair);
  transition:color .25s var(--ease);
}
.pv-guide:hover{ color:var(--gold); }

.pv-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.pv-swatch{
  display:flex; align-items:center; gap:10px;
  padding:11px 17px 11px 13px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--hair-2); border-radius:2px;
  color:var(--cream-dim); font:inherit; font-size:13px; cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.pv-swatch i{
  width:19px; height:19px; border-radius:50%;
  border:1px solid rgba(233,226,212,.28);
}
.pv-swatch:hover{ border-color:var(--hair); color:var(--cream); }
.pv-swatch[aria-pressed="true"]{ border-color:var(--gold); color:var(--cream); }

.pv-sizes{ display:flex; flex-wrap:wrap; gap:9px; }
.pv-size{
  position:relative; min-width:62px; padding:13px 12px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--hair-2); border-radius:2px;
  color:var(--cream-dim); font:inherit; font-size:13px;
  letter-spacing:.06em; cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.pv-size:hover:not(:disabled){ border-color:var(--hair); color:var(--cream); }
.pv-size[aria-pressed="true"]{ border-color:var(--gold); color:var(--cream); }
.pv-size:disabled{ opacity:.28; cursor:not-allowed; }
.pv-size{ padding-top:13px; padding-bottom:13px; }
.pv-up{
  display:block; margin-top:3px;
  font-size:9.5px; letter-spacing:.06em; color:var(--gold-soft);
}
.pv-upnote{ margin:11px 0 0; font-size:12px; color:var(--muted); max-width:42ch; }

.pv-qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--hair-2); border-radius:2px;
}
.pv-qty button{
  width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  color:var(--cream-dim); font-size:17px;
  transition:color .25s var(--ease);
}
.pv-qty button:hover{ color:var(--gold); }
.pv-qty span{ min-width:44px; text-align:center; color:var(--cream); }

.pv-add{
  margin-top:26px; width:100%;
  padding:19px 24px;
  background:linear-gradient(180deg, #d9b877, #b8934f);
  border:0; border-radius:2px;
  color:#17130a; font-family:var(--display); font-size:16px;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:filter .25s var(--ease), opacity .25s var(--ease);
}
.pv-add:hover:not(:disabled){ filter:brightness(1.08); }
.pv-add:disabled{
  background:none; border:1px solid var(--hair-2);
  color:var(--muted); cursor:not-allowed;
}
.pv-add.is-done{ background:linear-gradient(180deg,#8fae7f,#6d8c60); color:#0e1409; }

.pv-note{
  margin:14px 0 0;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:12px; letter-spacing:.06em; color:var(--muted);
}
.pv-note svg{ width:15px; height:15px; flex:none; }
.pv-note em{ font-style:normal; opacity:.55; }

/* accordions */
.pv-acc{ margin-top:30px; border-top:1px solid var(--hair-2); }
.pv-acc details{ border-bottom:1px solid var(--hair-2); }
.pv-acc summary{
  list-style:none; cursor:pointer;
  padding:17px 2px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim);
  transition:color .25s var(--ease);
}
.pv-acc summary::-webkit-details-marker{ display:none; }
.pv-acc summary::after{
  content:'+'; color:var(--gold); font-size:17px; line-height:1;
  transition:transform .3s var(--ease);
}
.pv-acc details[open] summary{ color:var(--cream); }
.pv-acc details[open] summary::after{ transform:rotate(45deg); }
.pv-acc summary:hover{ color:var(--cream); }

.pv-acc-in{ padding:2px 2px 22px; color:var(--cream-dim); font-size:14px; }
.pv-acc-in p{ margin:0; max-width:52ch; }

.pv-spec{ list-style:none; margin:0; padding:0; }
.pv-spec li{
  display:flex; justify-content:space-between; gap:20px;
  padding:7px 0; border-bottom:1px solid rgba(233,226,212,.05);
}
.pv-spec li span:first-child{ color:var(--muted); }
.pv-spec li span:last-child{ text-align:right; }

.pv-bullets{ margin:0; padding-left:18px; }
.pv-bullets li{ margin-bottom:9px; max-width:52ch; }

.pv-table{ width:100%; margin-top:18px; border-collapse:collapse; font-size:13px; }
.pv-table caption{
  caption-side:top; text-align:left; padding-bottom:9px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.pv-table th, .pv-table td{
  padding:8px 10px; text-align:left;
  border-bottom:1px solid rgba(233,226,212,.06);
}
.pv-table thead th{
  font-weight:400; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-soft);
}
.pv-table tbody th{ font-weight:400; color:var(--cream); }

/* ── standalone page use ───────────────────────────────────────────────── */
.pv-page{
  padding:calc(var(--bar) + 26px) var(--pad) 90px;
  padding-left:calc(var(--rail) + var(--pad));
}
@media (max-width:860px){ .pv-page{ padding-left:var(--pad); } }

.pv-page .pv{
  max-width:1280px; margin:0 auto;
  border:1px solid var(--hair); border-radius:3px;
  background:linear-gradient(180deg, #0e0e11, #0a0a0c 60%);
}
.pv-page .pdp-back{ display:inline-block; margin:0 auto 22px; }

@media (prefers-reduced-motion:reduce){
  .qv-scrim, .qv-panel, .pv-add, .pv-swatch, .pv-size, .pv-acc summary::after{
    transition:none;
  }
  .qv-close:hover{ transform:none; }
}

/* ── the clip ──────────────────────────────────────────────────────────────
   Matches .pv-stage img exactly so switching between a photograph and the
   clip doesn't make the panel jump. And an explicit [hidden] rule for both,
   because the display values set here would otherwise beat the attribute --
   the same trap already documented above for .qv and .pv-thumbs. */
.pv-stage video{
  max-width:100%; max-height:min(74vh, 760px);
  width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.pv-stage img[hidden], .pv-stage video[hidden]{ display:none; }

.pv-thumbs button[data-shot] video{
  display:block; width:92px; height:92px; object-fit:cover;
  border:1px solid transparent; border-radius:2px;
  opacity:.55; transition:opacity .25s var(--ease), border-color .25s var(--ease);
}
.pv-thumbs button[aria-pressed="true"] video{ opacity:1; border-color:var(--gold-soft); }
.pv-thumbs button[data-shot]:hover video{ opacity:.85; }

.pv-thumbs button.is-clip{ position:relative; }
.pv-play{
  position:absolute; top:32px; left:32px;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.55); pointer-events:none;
}
.pv-play::after{
  content:''; position:absolute; top:8px; left:11px;
  border-style:solid; border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent #f4efe4;
}