/* v32 product page — shares /assets/site/til.css tokens */
.pd{padding:0 var(--gut) 120px;max-width:1440px;margin:0 auto}
.pd-top{display:grid;grid-template-columns:1fr;gap:0;padding-top:clamp(18px,3vw,36px)}
.pd-title{order:1;padding-bottom:16px}
.pd-gal{order:2;position:relative;min-width:0}
.pd-buy{order:3;padding-top:22px;min-width:0}
@media (min-width:900px){
  .pd-top{grid-template-columns:minmax(0,58fr) minmax(0,42fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,72px)}
  .pd-gal{grid-column:1;grid-row:1 / span 2}
  .pd-title{grid-column:2;grid-row:1;padding-bottom:18px}
  .pd-buy{grid-column:2;grid-row:2;padding-top:0;position:sticky;top:calc(var(--head-h) + 20px);align-self:start}
}
.pd-crumb{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text3)}
.pd-crumb a{color:var(--text3)}.pd-crumb a:hover{color:var(--text)}
.pd-crumb span{color:var(--text2)}
.pd-kicker{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.pd-name{margin-top:8px;font-family:var(--serif);font-weight:600;font-size:clamp(40px,5.4vw,72px);line-height:.94;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.pd-rate{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.pd-rate:hover{color:var(--text)}
.pd-stars{color:var(--text);letter-spacing:.14em;font-size:13px}
.pd-stars--lg{font-size:18px}

.pd-photo{position:relative;aspect-ratio:4/5;border-radius:var(--r-img);overflow:hidden;background:var(--elev)}
.pd-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--t-fast) var(--ease)}
.pd-zoom{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.pd-count{position:absolute;right:12px;bottom:12px;padding:5px 9px;border-radius:2px;background:rgba(9,9,9,.72);font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--text);pointer-events:none}
.pd-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.pd-thumbs::-webkit-scrollbar{display:none}
.pd-thumbs button{flex:0 0 auto;width:64px;aspect-ratio:4/5;padding:0;border:1px solid transparent;border-radius:4px;overflow:hidden;background:var(--elev);scroll-snap-align:start;transition:opacity var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.pd-thumbs button{width:76px}}
.pd-art{position:absolute;left:-12%;top:14%;width:44%;z-index:-1;pointer-events:none;opacity:.06}
.pd-art img{width:100%;height:auto}
@media (max-width:899px){.pd-art{display:none}}

.pd-price{font-family:var(--sans);font-weight:500;font-size:24px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pd-deliv{margin-top:8px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text2)}
.pd-edition{margin-top:16px;font-size:13px;line-height:1.7;color:var(--text2)}
.pd-edition span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.pd-size-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.pd-size-h>span{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.pd-guide{min-height:44px;padding:0;background:none;border:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(241,236,227,.4)}
.pd-guide--solo{margin-top:14px}
.pd-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.pd-sizes:empty{display:none}
.pd-sz{min-height:52px;border:1px solid var(--border);border-radius:2px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pd-sz:hover{border-color:var(--text)}
.pd-sz[aria-pressed="true"]{box-shadow:0 0 0 1px var(--text) inset}
.pd-cta{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}
.pd-add{min-height:54px}
.pd-add[aria-disabled="true"]{cursor:not-allowed}
.pd-save{transition:color 200ms cubic-bezier(.22,1,.36,1),transform 200ms cubic-bezier(.22,1,.36,1)}.pd-save[aria-pressed="true"]{animation:pdSaved 320ms cubic-bezier(.22,1,.36,1)}@keyframes pdSaved{40%{transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.pd-save[aria-pressed="true"]{animation:none}}
.pd-save{min-height:54px;padding:0 14px;background:none;border:0;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.pd-note{margin-top:8px;min-height:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--text2)}
.pd-buy>.tl-btn--ghost{margin-top:6px}
.pd-free{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}
.pd-free+.pd-pay{margin-top:10px;border-top:0;padding-top:0}
.pd-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--text2)}
.pd-ap{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:600}
.pd-ap__mark{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 7px;border-radius:4px;background:#fff;color:#000;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:-.01em;line-height:1}
.pd-pay__sep{width:1px;height:12px;background:var(--border)}
.pd-exch{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text2)}
.pd-story{margin-top:20px;font-size:15px;line-height:1.7;color:var(--text);max-width:52ch}
.pd-acc{margin-top:22px;border-top:1px solid var(--line)}
.pd-acc details{border-bottom:1px solid var(--line)}
.pd-acc summary,.pd-revs__more summary,.pd-write summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.pd-acc summary::-webkit-details-marker,.pd-revs__more summary::-webkit-details-marker,.pd-write summary::-webkit-details-marker{display:none}
.pd-acc i,.pd-revs__more i,.pd-write i{position:relative;width:11px;height:11px;flex:0 0 auto}
.pd-acc i::before,.pd-acc i::after,.pd-revs__more i::before,.pd-revs__more i::after,.pd-write i::before,.pd-write i::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:currentColor;transition:transform var(--t-acc) var(--ease)}
.pd-acc i::after,.pd-revs__more i::after,.pd-write i::after{transform:rotate(90deg)}
details[open]>summary i::after{transform:rotate(0)}
.pd-acc p{padding:0 0 18px;font-size:14px;line-height:1.75;color:var(--text2);max-width:60ch}
.pd-acc p+p{margin-top:-8px}
.pd-acc a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.pd-specs{margin:0;padding:0 0 18px;list-style:none;display:grid;gap:6px}
.pd-specs li{font-size:14px;color:var(--text2);padding-left:14px;position:relative}
.pd-specs li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:1px;background:var(--text3)}
.pd-code{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text3)}
.pd-share{display:flex;gap:22px;margin-top:10px}
.pd-share a,.pd-share button{background:none;border:0;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text2)}
.pd-share a:hover,.pd-share button:hover{color:var(--text)}

.pd-revs{margin-top:clamp(56px,8vw,110px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.pd-revs__head h2,.pd-more h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1}
.pd-revs__grid{display:grid;gap:26px;margin-top:24px}
@media (min-width:900px){.pd-revs__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px}.pd-revs__sum{order:2}}
.pd-revs__sum{align-self:start;padding:22px;border:1px solid var(--line);border-radius:var(--r-img);background:var(--surface)}
.pd-revs__avg{font-family:var(--serif);font-weight:600;font-size:56px;line-height:1}
.pd-revs__n{margin-top:6px;font-size:13px;color:var(--text2)}
.pd-rbars{margin-top:16px;display:grid;gap:7px}
.pd-rb{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text2)}
.pd-rb i{height:3px;background:var(--elev);border-radius:2px;overflow:hidden}
.pd-rb b{display:block;height:100%;background:var(--text)}
.pd-rb span:last-child{text-align:right}
.pd-revs__list{display:grid;gap:12px;align-content:start}
.pd-rev{padding:20px 0;border-bottom:1px solid var(--line);display:grid;gap:10px}
.pd-rev:first-child{padding-top:0}
.pd-rev__t{font-size:15px;line-height:1.7;color:var(--text);max-width:64ch}
.pd-rev__img{width:120px;aspect-ratio:1;object-fit:cover;border-radius:4px}
.pd-rev__by{display:flex;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}
.pd-revs__photos{margin-top:30px}
.pd-revs__photos>div{display:flex;gap:8px;overflow-x:auto;margin-top:12px}
.pd-revs__photos img{width:96px;aspect-ratio:1;object-fit:cover;border-radius:4px}
.pd-revs__more,.pd-write{margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-revs__rest{display:grid;gap:4px;padding-bottom:10px}
.pd-write__f{display:grid;gap:10px;padding:0 0 20px;max-width:560px}
.pd-write__lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text2)}
.pd-write__lbl input{display:block;margin-top:6px;min-height:44px;font-size:13px;color:var(--text)}
.pd-write__ok{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text2)}
.pd-write__ok input{width:22px;height:22px;margin:0;accent-color:var(--text)}
.pd-write .tl-btn{justify-self:start}
.rv-in{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-btn);color:var(--text);padding:13px 14px;font:inherit;font-size:16px}
.rv-in:focus{outline:none;border-color:var(--text)}
.pd-restock{margin-top:18px;padding:18px;border:1px solid var(--border);border-radius:var(--r-img);max-width:560px}
.pd-restock>p:first-child{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.pd-restock>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pd-restock .rv-in{flex:1 1 200px}

.pd-more{margin-top:clamp(56px,8vw,110px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.pd-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
@media (min-width:900px){.pd-more__grid{gap:24px;max-width:1000px}}
.pd-more__img{aspect-ratio:4/5;border-radius:var(--r-img);overflow:hidden;background:var(--elev)}
.pd-more__img img{width:100%;height:100%;object-fit:cover}
.pd-more__nm{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;min-height:3.2em}   /* M9 — two lines held, prices level across the row */
.pd-more__pr{margin-top:2px;font-size:13px}

.pd-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(10,9,10,.96);border-top:1px solid var(--line)}
.pd-bar{transition:transform var(--t-drawer) var(--ease)}
/* the phone buy bar only appears once the visitor has scrolled past the main ADD TO BAG */
.pd-bar{transform:translateY(110%)}body.pd-cta-past .pd-bar{transform:none}body.pd-cta-in .pd-bar{transform:translateY(110%)}
.pd-bar__t{flex:1;min-width:0}
.pd-bar__t p:first-child{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-bar__t p:last-child{margin-top:2px;font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums}
.pd-bar .tl-btn{min-height:46px;padding:0 20px;font-size:11px}
.pd-gone{max-width:720px;margin:clamp(40px,8vw,100px) auto;text-align:center;display:grid;gap:16px;justify-items:center}
/* the product page's own dialogs, restyled to the system */
[role="dialog"][aria-label="Size guide"]{border-radius:var(--r-img)!important;background:var(--surface)!important}
[role="dialog"] button{border-radius:var(--r-btn)!important}
@media (max-width:520px){.pd-pay__sep{display:none}.pd-ap{flex-basis:100%}}

/* a missing size: the row lights up once, quietly */
.pd-sizes--ask .pd-sz{border-color:var(--text)!important;transition:border-color 180ms ease}
/* the phone buy bar steps away while the bag is open */
html.tl-bag-open .pd-bar{transform:translateY(110%)!important}

/* ---- v32 ---- */
.pd-tprice{display:none;margin-top:12px;font-family:var(--sans);font-weight:500;font-size:20px;letter-spacing:.01em}
@media (max-width:899px){.pd-tprice{display:block}}
.pd-price .tl-price__le{font-size:13px}
.pd-sz[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--text) inset}
.pd-low{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-amore)}
.pd-eta{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.pd-eta>span:first-child{font-size:8px;color:var(--text3)}
.pd-trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--text2)}
.pd-trust li{display:inline-flex;align-items:center;gap:6px}
.pd-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text3)}
.pd-ap__mark svg{width:10px;height:10px;fill:currentColor;margin-top:-1px}

/* ======================= v39 — Gallery dark product page ======================= */
.pd-photo,.pd-thumbs button,.pd-more__img,.pd-revs__sum,.pd-restock,.pd-rev__img,.pd-revs__photos img{border-radius:0}
.pd-kicker{color:var(--text2)!important;font-family:var(--sans);font-size:13px;letter-spacing:.02em;text-transform:none}
.pd-name{color:rgb(var(--acc,241,236,227));font-size:clamp(30px,3vw,40px);line-height:1.02;letter-spacing:.02em}
.pd-stars{color:rgb(var(--gold))}
.pd-rate{font-family:var(--sans);font-size:13px;letter-spacing:.02em;text-transform:none}
.pd-count{border-radius:0;background:rgba(8,8,8,.55);font-size:11px;letter-spacing:.12em}
.pd-sz{border-radius:0;min-height:48px;border-color:rgba(241,236,227,.28)}
.pd-sz[aria-pressed="true"]{border-color:rgb(var(--gold))!important;box-shadow:inset 0 0 0 1px rgb(var(--gold));background:rgba(var(--gold),.14)!important;color:var(--text)!important}
.pd-fit{margin-top:10px;font-size:13px;color:var(--text2)}
.pd-add{min-height:52px}
.pd-code{font-size:11px;letter-spacing:.12em}
.pd-acc summary,.pd-revs__more summary,.pd-write summary{font-size:13px;font-weight:600;letter-spacing:.08em}
.pd-guide{font-family:var(--sans);font-size:13px;letter-spacing:.02em;text-transform:none;text-decoration-color:rgba(var(--gold),.7)}
.pd-stack{display:none}
.pd-stack__i{display:block;width:100%;padding:0;border:0;background:var(--elev);cursor:zoom-in}
.pd-stack__i img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (max-width:899px){
  .pd{padding-top:0}
  .pd-top{padding-top:0}
  .pd-gal{order:1;margin:0 calc(var(--gut) * -1)}
  .pd-photo{width:100%;max-height:52svh;aspect-ratio:4/5}   /* the photo leads, and SIZE + ADD TO BAG still reach the first phone screen */
  .pd-thumbs{display:none}
  .pd-title{order:2;padding:18px 0 0;display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline}
  .pd-title>.pd-crumb{grid-column:1/-1;margin-bottom:10px}
  .pd-title>.pd-name{grid-column:1;margin-top:0}
  .pd-title>.pd-tprice{grid-column:2;grid-row:2;margin-top:0;font-size:17px;white-space:nowrap}
  .pd-title>.pd-kicker{grid-column:1;grid-row:3;margin-top:8px}
  .pd-title>.pd-rate{grid-column:2;grid-row:3;margin-top:8px;justify-self:end}
  .pd-title>.pd-tprice.is-sold{grid-column:1/-1;grid-row:4;justify-self:start;white-space:normal;margin-top:10px}   /* v39.7 — a long sold-out line gets its own row */
  .pd-title--solo{column-gap:0}   /* v39.8 — sold-out SOLUS: no rating, so no second column (shell and app set the class) */
  .pd-title--solo>.pd-rate{display:none!important}
  .pd-title>.pd-rate{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}   /* v39.8 — a narrow phone puts the whole count under the stars, flush right; '5.0 · 46 reviews' never splits (impeccable review) */
  .pd-title>.pd-rate>span+span{white-space:nowrap}
  @media (max-width:319px){   /* v39.8 — a phone zoomed to 200 % (195 px): one column in the same reading order (name, price, kicker, rating, sold-out line), nothing off-screen */
    .pd-title{grid-template-columns:minmax(0,1fr)}
    .pd-title>.pd-name,.pd-title>.pd-tprice,.pd-title>.pd-kicker,.pd-title>.pd-rate{grid-column:1;justify-self:start}
    .pd-title>.pd-name{grid-row:2;font-size:24px;overflow-wrap:anywhere}
    .pd-title>.pd-tprice{grid-row:3}
    .pd-title>.pd-kicker{grid-row:4}
    .pd-title>.pd-rate{grid-row:5}
    .pd-title>.pd-tprice.is-sold{grid-row:6}
  }
  .pd-buy{order:3;padding-top:4px;display:flex;flex-direction:column}
  .pd-buy>*{flex:0 0 auto}
  .pd-buy>.pd-price{display:none}
  .pd-title{padding-top:14px}
  .pd-title>.pd-crumb{margin-bottom:6px}
  .pd-title>.pd-tprice{justify-self:end}
  .pd-size-h{margin-top:8px}
  /* the buy path first: size → Add to bag; the delivery line and the rest follow */
  .pd-deliv{order:1;border-bottom:0;padding-bottom:0;margin-top:14px}
  .pd-eta,.pd-trust,.pd-pay,.pd-story,.pd-acc,.pd-code,.pd-share{order:2}
}
@media (min-width:900px){
  .pd{padding-top:0}
  .pd-top{grid-template-columns:minmax(0,1fr) 380px;column-gap:56px}
  .pd-gal .pd-thumbs{display:none}
  .pd-stack{display:grid;gap:8px;margin-top:8px}
  .pd-photo{aspect-ratio:4/5}
  .pd-buy{top:calc(var(--head-h) + 32px)}
  .pd-title .pd-kicker{margin-top:10px}
}

/* v39 — stars: bright gold (owner) */
.rev__st,.rv__st,.pd-stars,.rv-stars,[data-stars],.tl-card__stars{color:#E8B93A!important;text-shadow:0 0 10px rgba(232,185,58,.25)}
.tl-card__stars span,.pd-rate>span+span{text-shadow:none}

/* v39.1 — whole photos: the frame keeps its size, the picture is never cropped (contain). The space around it is not
   flat: the same photo, blurred and dimmed, fills the frame (no extra download — same file), with the hero's dark
   scrim on the top and bottom edges, and the real photo sits on it with a soft drop shadow. */
.pd-photo{background:#0b0b0b;isolation:isolate}
.pd-photo::before{content:"";position:absolute;inset:-8%;z-index:0;background:var(--pd-bg,none) center/cover no-repeat;
  filter:blur(24px) brightness(.55);transform:scale(1.1);pointer-events:none}
.pd-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,8,8,.62) 0%,rgba(8,8,8,0) 22%,rgba(8,8,8,0) 78%,rgba(8,8,8,.62) 100%)}
.pd-photo img{z-index:2;object-fit:contain;object-position:50% 50%;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}
.pd-photo .pd-zoom{z-index:3}.pd-photo .pd-count{z-index:4}
.pd-stack__i img,.pd-thumbs img{object-fit:contain;object-position:50% 50%}
.pd-stack__i,.pd-thumbs button{background:#fff}
.pd-more__img img{object-position:50% 0}
/* the full-screen viewer letterboxes too: same blurred fill behind the whole photo */
[data-pdswipe="zoom"]{position:relative;isolation:isolate}
[data-pdswipe="zoom"]::before{content:"";position:absolute;inset:-8%;z-index:0;background:var(--pd-bg,none) center/cover no-repeat;filter:blur(28px) brightness(.4);transform:scale(1.1);pointer-events:none}
[data-pdswipe="zoom"]>img{position:relative;z-index:1;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}
@media (prefers-reduced-transparency:reduce){.pd-photo::before,[data-pdswipe="zoom"]::before{filter:brightness(.55)}}