/* ============================================================
   CHOICES v2 · product pages (the six PDPs). Loaded after styles.css.
   Wall kit only: flats are pasted up (.paste-sheet), thumbs are stickers
   (.sticker), scripture wears the spray cite (.sw-cite), the worn shot
   sits on a wall band with a tag heading (.tag-h).
============================================================ */

/* ---------- grid ---------- */
.pdp-sec{padding:var(--sp-6) 0 var(--sp-7)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:var(--sp-6);align-items:start}

/* ---------- gallery ---------- */
.pdp-gal{display:grid;grid-template-columns:clamp(66px,5.8vw,88px) minmax(0,1fr);column-gap:clamp(22px,2.6vw,40px);align-items:start;padding-top:14px}
.g-main{grid-column:2;grid-row:1;justify-self:center;position:relative;width:min(100%,calc((100svh - 172px) * .8));aspect-ratio:4/5;outline-offset:12px}
.g-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.g-slide.on{opacity:1;visibility:visible;transition:opacity .4s ease}

/* flat front/back: the canon paste-up sheet, stretched to the 4:5 frame */
.g-sheet.paste-sheet{position:absolute;inset:0;aspect-ratio:auto}
.g-sheet.paste-sheet img{left:7%;top:7%;width:86%;height:80%}
.g-lab{position:absolute;left:7%;right:7%;bottom:4.6%;display:flex;align-items:baseline;gap:9px;font-size:10.5px;font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.2em;text-transform:uppercase;line-height:1;color:#2b2b30;pointer-events:none}
.g-lab b{font-weight:800;color:var(--violet)}
.g-lab i{margin-left:auto;font-style:normal;color:#5a5a61}

/* worn: the on-model photo runs full-bleed in the frame, label over a bottom scrim */
.g-model{padding:0;border:0;background:none;box-shadow:0 30px 60px -22px #000,0 6px 16px rgba(0,0,0,.6)}
.g-photo{position:relative;height:100%;overflow:hidden;background:var(--wall)}
.g-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) saturate(.92)}
.g-photo::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
.g-model .g-lab{left:16px;right:16px;bottom:14px;color:var(--wing)}
.g-model .g-lab b{color:var(--ice)}
.g-model .g-lab i{color:var(--stone)}

/* thumbs: stickers slapped beside the poster; the current one straightens */
.g-thumbs{grid-column:1;grid-row:1;display:grid;justify-items:center;gap:clamp(18px,1.9vw,26px);padding-top:20px}
.g-thumb.sticker{width:100%;padding:0;font:inherit;color:inherit;cursor:pointer}
.g-thumb.is-model img{object-fit:cover;padding:0}
.g-thumb[aria-current="true"]{transform:none;outline:2px solid var(--ice);outline-offset:4px}
.g-thumb[aria-current="true"]:hover{transform:scale(1.04)}

/* ---------- info ---------- */
.pdp-info{position:sticky;top:90px;padding-top:12px}
.pdp-title{margin-top:var(--sp-4);font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;font-size:clamp(36px,4.1vw,60px);line-height:.92;letter-spacing:-.01em;color:var(--wing);text-wrap:balance}
.pdp-cw{display:block;margin-top:var(--sp-3);font-size:12.5px;font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:.2em;line-height:1.3;color:var(--stone)}
.pdp-verse{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);min-height:34px;margin-top:var(--sp-5)}
.pdp-verse .sw-cite{margin-left:14px}
.pdp-motif{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--ice)}
.pdp-desc{margin-top:var(--sp-5);max-width:54ch;font-size:15.5px;line-height:1.72;color:rgba(242,239,233,.88)}
.size-lab{display:block;margin-top:var(--sp-6);margin-bottom:var(--sp-3)}
.size-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.size-pill{display:inline-flex;align-items:center;justify-content:center;width:56px;height:52px;padding:0;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--wing);font-size:13px;font-weight:800;font-variation-settings:"wdth" 112;letter-spacing:.06em;transition:border-color .2s,background .2s,color .2s}
.size-pill:hover{border-color:var(--wing)}
.size-pill[aria-pressed="true"]{background:var(--wing);border-color:var(--wing);color:#000}
.pdp-cta{width:100%;margin-top:var(--sp-5);padding:19px 24px}
.spec{margin-top:var(--sp-6);border-top:1px solid var(--line)}
.spec li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--line-2)}
.spec .k{padding-top:3px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--stone)}
.spec .v{font-size:13.5px;line-height:1.55;color:var(--bone)}
.spec .v b{font-weight:700;color:var(--ice)}
.pdp-seen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--stone)}
.pdp-seen a{display:inline-flex;align-items:center;gap:8px;color:var(--wing);transition:color .2s}
.pdp-seen a:hover{color:var(--ice)}
.pdp-seen svg{width:15px;height:15px;fill:currentColor}

/* ---------- worn band: photo on the right half, tag sprayed across the seam ---------- */
.pdp-worn{display:flex;align-items:center;min-height:min(60vw,900px);overflow:hidden}
/* the photo fades INTO the wall texture (mask), not into black, so there is no seam */
.pw-img{position:absolute;top:0;right:0;bottom:0;z-index:0;width:54%;margin:0;background:var(--wall);-webkit-mask:linear-gradient(90deg,transparent 0,#000 40%);mask:linear-gradient(90deg,transparent 0,#000 40%)}
.pw-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:contrast(1.06) saturate(.92)}
.pw-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 68%,rgba(0,0,0,.72) 100%);pointer-events:none}
.pw-in{position:relative;z-index:1;width:100%}
.pw-copy{display:flex;flex-direction:column;align-items:flex-end;width:calc(46% + clamp(56px,8vw,140px));padding:var(--sp-7) 0;text-align:right}
.pw-line{margin-top:var(--sp-5);max-width:30ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--bone)}
.pw-copy .tlink{margin-top:var(--sp-5)}

/* ---------- sticky mobile bar ---------- */
.pdp-bar{display:none}

/* ============================================================
   RESPONSIVE
============================================================ */
/* PT-01: two columns only where the gallery column can actually carry the poster. Below 1100 the
   45fr info column squeezed .g-main to 348px and left 569px of empty column beside the spec list. */
@media (max-width:1100px){
  .pdp-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .pdp-gal{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-5);width:100%;max-width:600px;margin:0 auto}
  /* stacked gallery keeps an svh cap (300px floor for landscape phones) so frame + thumbs clear the sticky bar */
  .g-main{grid-column:1;grid-row:1;width:min(100%,max(300px,calc((100svh - 310px) * .8)))}
  .g-thumbs{grid-column:1;grid-row:2;grid-auto-flow:column;grid-auto-columns:clamp(62px,15vw,84px);justify-content:center;gap:clamp(18px,4.6vw,28px);padding:4px 0 0}
  .pdp-info{position:static;width:100%;max-width:640px;margin:0 auto;padding-top:0}
  /* sticky bar from the stacked breakpoint down, so tablet landscape always shows the name and buy slot */
  body{padding-bottom:72px}
  .pdp-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  /* MP-02 / SP-11: the bar is the buy slot for AFTER the real CTA has scrolled by. On landing it
     cut the title in half and covered the gallery thumbs, and mid-page it repeated the CTA already
     on screen. Armed by JS only, so with no JS the bar stays exactly as it was. */
  .js .pdp-bar{transform:translateY(100%);transition:transform .32s var(--ease)}
  .js .pdp-bar.on{transform:none}
  .pdp-bar .bar-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-width:0;overflow:hidden;font-size:11px;font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--wing)}
  .pdp-bar .bar-name i{font-style:normal;font-weight:700;color:var(--stone)}
  .pdp-bar .btn{flex:none;padding:13px 14px;font-size:10.5px;letter-spacing:.1em}
  .toast{bottom:88px}
}
@media (max-width:820px){
  .pdp-worn{display:block;min-height:0}
  .pw-img{position:relative;width:100%;height:auto;aspect-ratio:4/5;-webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 70%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 14%,#000 70%,transparent 100%)}
  .pw-img::after{background:none}
  .pw-copy{width:100%;align-items:flex-start;margin-top:-58px;padding:0 0 var(--sp-7);text-align:left}
}
@media (max-width:560px){
  .g-sheet.paste-sheet::before{left:-1.5%}
  .g-sheet.paste-sheet::after{right:-1.5%}
  .pdp-bar .bar-name i{display:none}
  .g-lab{font-size:9px;letter-spacing:.16em}
  .spec li{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .size-pill{width:54px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .g-slide,.g-slide.on,.size-pill,.pdp-seen a,.js .pdp-bar{transition:none}
}

/* PT-12: the social links were the smallest targets on the page at 15px tall. The band grows to
   29px while the container padding and row gap give the space back, so the row barely moves. */
@media (max-width:1100px),(hover:none){
  .pdp-seen{padding:8px 0;gap:0 14px}
  .pdp-seen a{padding:7px 0}
}