/* Product landing pages + standalone cart/success. Requires dhad.css */
body.pdp{background:var(--deep);--ch:var(--t-stars);--deep:var(--night)}
body.pdp[data-product=we]{--ch:var(--t-we);--deep:var(--rose)}
body.pdp[data-product=coffee]{--ch:var(--t-coffee);--deep:var(--umber)}
.pdp-top{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:8px var(--gutter);background:linear-gradient(rgba(0,0,0,.45),transparent)}
.pdp-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:100svh}
.pdp-gal{position:relative;padding:84px var(--gutter) 40px;display:grid;gap:clamp(14px,2vw,26px);align-content:start;background:var(--ch);isolation:isolate}
.pdp-gal::before{content:attr(data-glyph);position:absolute;inset:0;display:grid;place-items:start center;padding-top:14vh;font-family:var(--f-ar-display);font-weight:700;font-size:min(80vw,760px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--deep);opacity:.2;z-index:-1;pointer-events:none}
.slide{margin:0;position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:min(78vh,720px)}
.slide.cut{padding:10px 0 0}
.slide.cut img{height:min(76vh,700px);width:auto;filter:drop-shadow(0 22px 26px rgba(18,16,14,.38))}
.slide.cut.pair img+img{margin-inline-start:-12%}
.slide.photo{background:var(--bone);padding:10px 10px 36px;min-height:0;display:block;box-shadow:0 14px 30px rgba(18,16,14,.28);transform:rotate(var(--r,0deg))}
.slide.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.slide.photo.sq img{aspect-ratio:1}
.slide.photo figcaption{position:absolute;inset:auto 10px 8px;text-align:center;font-family:var(--f-ar-hand);color:var(--mark);font-size:17px}
.slide .cap{position:absolute;top:10px;inset-inline-start:0;background:var(--ink);color:var(--bone);padding:3px 12px;font-size:12px;font-weight:600;z-index:2}
.pdp-info{background:var(--paper);color:var(--ink);padding:100px clamp(22px,4vw,64px) 60px;position:relative}
.pdp-info-in{position:sticky;top:84px;max-width:520px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.pdp-info::before{content:"";position:absolute;inset-block:0;inset-inline-start:-14px;width:28px;background:var(--paper);clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 96%,60% 92%,10% 88%,70% 84%,20% 80%,80% 76%,10% 72%,60% 68%,0 64%,70% 60%,20% 56%,80% 52%,10% 48%,70% 44%,0 40%,60% 36%,20% 32%,80% 28%,10% 24%,70% 20%,0 16%,60% 12%,20% 8%,80% 4%);z-index:2}
.crumb{font-size:13px;opacity:.7;text-decoration:none}
.crumb:hover{text-decoration:underline}
.pdp-info h1{font-size:clamp(64px,8vw,110px);margin:0}
html[lang=en] .pdp-info h1{font-size:clamp(64px,7vw,100px)}
.pdp-quote{font-family:var(--f-ar-display);font-size:clamp(21px,2vw,27px);line-height:1.5;margin:0}
html[lang=en] .pdp-quote{font-family:var(--f-latin);font-style:italic}
.pdp-story{margin:0;opacity:.82}
.pdp-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
.pdp-price{font-size:34px;font-weight:600;font-variant-numeric:tabular-nums}
.pdp-price.pending{font-size:17px;font-weight:500}
.pdp-vat{font-size:13px;opacity:.7}
.run{font-size:14px;font-weight:600;color:var(--mark)}
.size-head{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.link{background:none;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:4px;font-size:14px;font-weight:500;color:inherit}
.sizes{display:flex;flex-wrap:wrap;gap:10px}
.sizes button{position:relative;min-width:64px;min-height:56px;padding:0 14px;background:transparent;border:1.5px solid var(--ink);font-size:17px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.sizes button small{font-size:11px;font-weight:500;opacity:.75;margin-top:3px}
.sizes button[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.sizes button[disabled]{opacity:.4;cursor:not-allowed}
.sizes button[disabled]::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--ink) 50%,transparent calc(50% + 1px))}
.stock{margin:0;font-size:14px;min-height:1.5em}
.buy{display:grid;gap:10px;margin-top:4px}
.buy .btn{width:100%;min-height:58px;font-size:17px}
.pdp-info .btn{border-color:var(--ink);color:var(--ink)}
.pdp-info .btn.solid{background:var(--ink);color:var(--bone)}
.pdp-info .btn.solid:hover{background:var(--mark);border-color:var(--mark)}
.pdp-info .btn:hover{background:var(--ink);color:var(--bone)}
.pdp-info .btn[disabled]:hover{background:transparent;color:var(--ink)}
.setup-note{background:var(--paper-2);border-inline-start:3px solid var(--mark);padding:12px 14px;font-size:14px;margin:0}
.facts{list-style:none;padding:0;margin:8px 0 0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts b{font-weight:600}
.facts span{opacity:.85}
.also{display:flex;gap:10px;margin-top:12px}
.also a{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 12px;text-decoration:none;font-weight:600;font-size:14px}
.also a:hover{border-color:var(--ink)}
.also img{width:36px;height:46px;object-fit:contain;background:var(--ink);padding:2px}
.mbar{position:fixed;inset:auto 0 0 0;z-index:95;display:none;gap:12px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--bone);color:var(--ink);border-top:2px solid var(--ink)}
.mbar .p{flex:1;line-height:1.25}
.mbar .p b{display:block;font-size:19px}
.mbar .p small{font-size:12px;opacity:.75}
.mbar .btn{border-color:var(--ink);background:var(--ink);color:var(--bone);min-height:52px;padding:0 24px}
.modal{position:fixed;inset:0;z-index:310;display:grid;place-items:center;background:rgba(0,0,0,.65);padding:20px}
.modal[hidden]{display:none}
.modal>div{background:var(--paper);color:var(--ink);max-width:520px;width:100%;padding:28px;position:relative;max-height:86vh;overflow:auto}
.modal h2{font-size:34px;margin-bottom:12px}
.modal .x{position:absolute;top:10px;inset-inline-end:10px}
.modal p{white-space:pre-line}
@media(max-width:900px){
  .pdp-main{display:block}
  .pdp-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:72px 0 28px;scrollbar-width:none;align-items:flex-end}
  .pdp-gal::-webkit-scrollbar{display:none}
  .pdp-gal::before{position:fixed;display:none}
  .slide{flex:0 0 84%;scroll-snap-align:center;min-height:0;margin:0}
  .slide:first-child{margin-inline-start:8%}.slide:last-child{margin-inline-end:8%}
  .slide.cut img{height:min(58vh,520px)}
  .slide.photo{transform:none}
  .pdp-info{padding:34px 20px 120px}
  .pdp-info::before{display:none}
  .pdp-info-in{position:static}
  .mbar{display:flex}
  .facts li{grid-template-columns:96px 1fr}
}
.dots{display:none;justify-content:center;gap:8px;padding:6px 0 0;background:var(--ch)}
@media(max-width:900px){.dots{display:flex}}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(18,16,14,.25)}
.dots i.on{background:var(--ink)}

/* standalone cart / success */
body.standalone{background:var(--paper);color:var(--ink)}
.cartpage{max-width:640px;margin:0 auto;padding:30px var(--gutter) 80px}
.cartpage h1{font-size:clamp(44px,8vw,72px);margin:20px 0 6px}
.cartpage .btn{border-color:var(--ink);color:var(--ink);width:100%;margin-top:14px}
.cartpage .btn.solid{background:var(--ink);color:var(--bone)}
.standalone .product-mark{display:inline-flex;gap:8px;align-items:baseline;padding:18px var(--gutter) 0;text-decoration:none;font-family:var(--f-ar-display);font-size:38px;font-weight:700}
.standalone .product-mark small{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em}
/* reserve space for content that arrives from /api/products (no layout shift) */
.sizes{min-height:58px}.run{min-height:1.6em}.pdp-price-row{min-height:60px}.buy .btn{min-height:58px}
html[data-ab~="pdp_lead-b"] #wornSlide{order:-1}
.sizes.nudge{animation:nudge .45s}
@keyframes nudge{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* closed store: outlined, not grey-filled */
.pdp-info .btn.solid[disabled]{background:transparent;color:var(--ink);border-style:dashed;opacity:.7}
.story-pill{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;min-height:56px;padding:6px 18px 6px 6px;border:1.5px solid var(--ink);background:transparent;border-radius:40px;font-weight:600;font-size:15px;color:var(--ink);--tint:var(--ch)}
html[dir=rtl] .story-pill{padding:6px 6px 6px 18px}
.story-pill:hover{background:var(--ink);color:var(--bone)}
.story-pill .ring{position:static;width:48px;height:48px;padding:2px;box-shadow:none;background:conic-gradient(var(--deep),var(--ch),var(--deep))}
.story-pill .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--paper)}

/* v5.4 deep gallery with a light behind the piece; solid ghost letter */
.pdp-gal{background:radial-gradient(80% 55% at 50% 30%,var(--ch) 0%,var(--deep) 75%)}
.pdp-gal::before{-webkit-text-stroke:0;color:rgba(248,243,233,.05);opacity:1}
.slide .cap{background:var(--bone);color:var(--ink)}
.dots{background:var(--deep)}
.dots i{background:rgba(248,243,233,.3)}.dots i.on{background:var(--bone)}
.slide.cut img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))}
#wornSlide img{filter:sepia(.25) saturate(.88) contrast(1.05) brightness(1.03) hue-rotate(-6deg)}
#wornSlide img{aspect-ratio:1/1}
.story-pill .ring{background:conic-gradient(var(--ch),#fff,var(--ch))}
/* Mobile ad landing: fit identity above the persistent purchase bar. */
@media(max-width:900px){
 .pdp-gal{--gi:min(50vh,440px);--sw:min(78%,calc(var(--gi) - 16px));padding:64px 0 14px}
 @supports(height:1svh){.pdp-gal{--gi:clamp(260px,calc(100svh - 304px - env(safe-area-inset-bottom,0px)),min(50svh,440px))}}
 .slide{flex:0 0 78%}
 .slide.cut img{height:var(--gi)}
 .slide.photo{flex:0 0 var(--sw)}
 .slide:first-child{margin-inline-start:11%}
 .slide:last-child{margin-inline-end:calc((100% - var(--sw)) / 2)}
 html[data-ab~="pdp_lead-b"] .slide:first-child{margin-inline-start:0}
 html[data-ab~="pdp_lead-b"] #wornSlide{margin-inline:calc((100% - var(--sw)) / 2) 0}
 html[data-ab~="pdp_lead-b"] .slide:nth-last-child(2){margin-inline-end:calc((100% - var(--sw)) / 2)}
 .pdp-info{padding-top:18px}
 .pdp-info-in{gap:12px}
 .pdp-info .crumb{display:none}
 .pdp-info h1,html[lang=en] .pdp-info h1{font-size:clamp(44px,12vw,54px)}
 .mbar .p{min-width:0}
 .mbar .p small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.assure{list-style:none;margin:-4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--ink);opacity:.8}
.assure[hidden]{display:none}
.assure li{display:inline-flex;align-items:center;gap:7px}
.assure li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mark)}
.fit-note{margin:-10px 0 0;font-size:13.5px;opacity:.78}
.fit-note [hidden]{display:none}
/* Visible controls for mouse users; touch swiping still works. */
.gallery-wrap{position:relative;min-width:0}
.gallery-arrow{display:none}
@media(max-width:900px){
 .gallery-arrow{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:var(--bone);color:var(--ink);font-size:24px;line-height:1;box-shadow:0 3px 12px rgba(0,0,0,.3)}
 .gallery-prev{inset-inline-start:10px}.gallery-next{inset-inline-end:10px}
 .gallery-arrow:disabled{opacity:.35;cursor:default}
 .dots{gap:0;padding:0;align-items:center}
 .dots button{width:28px;height:28px;padding:0;border:0;background:transparent;display:grid;place-items:center}
 .dots button::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(248,243,233,.3)}
 .dots button.on::after{background:var(--bone)}
 .dots button:focus-visible,.gallery-arrow:focus-visible{outline:2px solid var(--mark-lt);outline-offset:2px}
}
.delivery-form{display:grid;gap:18px;margin-top:24px}
.delivery-form label{display:grid;gap:7px;font-size:15px}
.delivery-form input:not([type=checkbox]),.delivery-form select{width:100%;min-height:48px;padding:10px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);font:inherit;border-radius:0}
.delivery-form .email-consent{display:flex;align-items:center;gap:10px}
.delivery-form input[type=checkbox]{width:22px;height:22px}

/* Keep portrait story covers inside a fixed circular flex item. */
.story-pill .ring{flex:0 0 48px;min-width:48px;min-height:48px;overflow:hidden;box-sizing:border-box;display:block}
.story-pill .ring img{display:block;width:100%;height:100%;min-height:0;max-width:100%;aspect-ratio:1;object-fit:cover;box-sizing:border-box}

/* A consistent image window for every carousel card. */
.slide.photo img,.slide.photo.sq img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center}

