/* Product pages (tenderworld.co/products/…). Loaded after style.css, which supplies the nav, banner, cart, base options,
   newsletter and footer. Paper and ink as on the shop; Geist for text, Exposure for headings.
   Layout after wooj.design (gallery + buy box, made-to-order reminders) and craighill.co (numbered callouts, figures, FAQ). */
.pdp{--ink:#24211d;--paper:#f4f2ed;--tile:#e6e2d9;--line:rgba(36,33,29,.16);--soft:rgba(36,33,29,.62);--pad:clamp(16px,2.5vw,36px);
 display:block;background:var(--paper);color:var(--ink);font:400 15px/1.55 "Geist",system-ui,sans-serif;letter-spacing:-.003em;
 padding-top:calc(var(--promo-h) + clamp(64px,6vw,84px))}
.pdp a{color:inherit}
.pdp :focus-visible{outline-color:var(--ink)}
.pdp h1,.pdp h2,.pdp p,.pdp figure,.pdp ul,.pdp ol,.pdp dl,.pdp dd{margin:0}
.pdp img,.pdp video{display:block;max-width:100%;height:auto}
.h2{font:400 clamp(28px,3.2vw,46px)/1.06 "Exposure",Georgia,serif;font-variation-settings:"EXPO" -30;letter-spacing:-.01em;text-wrap:balance}

.crumbs{display:flex;gap:8px;max-width:1320px;margin:0 auto;padding:0 var(--pad) 14px;font-size:13px;color:var(--soft)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- 1. buy box ---- */
.buybox{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);max-width:1320px;margin:0 auto;padding:0 var(--pad) clamp(56px,7vw,112px);align-items:start}
.gallery{position:relative;min-width:0}
.gal-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--tile);border-radius:6px;outline-offset:4px}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always;background:var(--tile)}
.gal-slide img,.gal-slide video{width:100%;height:100%!important;object-fit:cover}
.gal-arrow{position:absolute;top:calc(50% - 60px);width:44px;height:44px;border:0;border-radius:50%;background:rgba(244,242,237,.86);color:var(--ink);font:400 18px/1 "Geist",system-ui,sans-serif;cursor:pointer;opacity:0;transition:opacity .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gal-prev{left:12px}.gal-next{right:12px}
.gallery:hover .gal-arrow,.gal-arrow:focus-visible{opacity:1}
.gal-arrow:disabled{opacity:0!important;pointer-events:none}
.gal-thumbs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:10px}
.gal-thumbs button{position:relative;aspect-ratio:4/5;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--tile);cursor:pointer;opacity:.55;transition:opacity .2s}
.gal-thumbs button:hover{opacity:.85}
.gal-thumbs button[aria-current=true]{opacity:1;box-shadow:0 0 0 1.5px var(--ink)}
.gal-thumbs img{width:100%;height:100%!important;object-fit:cover}
.gal-thumbs .is-video:after{content:"";position:absolute;left:50%;top:50%;translate:-40% -50%;border:7px solid transparent;border-left:11px solid #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}

.info{position:sticky;top:calc(var(--promo-h) + 72px);display:flex;flex-direction:column}
.pdp-title{margin-top:10px!important;font:400 clamp(30px,3vw,44px)/1.04 "Exposure",Georgia,serif;font-variation-settings:"EXPO" -30;letter-spacing:-.01em;text-wrap:balance}
.pdp-edition{display:block;color:var(--soft)}
.pdp-price{display:flex;align-items:baseline;gap:10px;margin-top:18px!important;font-size:20px;font-weight:500}
.pdp-price s{font-weight:400;color:rgba(36,33,29,.42)}
.pdp-sale{align-self:center;padding:3px 9px;border-radius:999px;background:#23863f;color:#fff;font-size:12px;font-weight:500;letter-spacing:.01em}
.pdp-lede a{text-underline-offset:3px;text-decoration-color:rgba(36,33,29,.35)}
.pdp-lede{margin-top:14px!important;max-width:44ch;font-size:16px;color:rgba(36,33,29,.85)}
.pdp-label{margin-top:22px!important;margin-bottom:8px!important;font-size:13px;font-weight:500;color:var(--soft)}
.info .options--bases{margin:0}
.info .options--bases .option{padding:6px 12px 6px 6px;font-size:14px}
.info .buy{margin-top:14px;padding:14px 16px;font-size:15px;font-weight:500}
.pdp-mto{display:flex;gap:10px;align-items:baseline;margin-top:12px!important;font-size:13.5px;line-height:1.45;color:rgba(36,33,29,.75)}
.pdp-mto .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#e2a93b;box-shadow:0 0 0 3px rgba(226,169,59,.2);animation:pdp-pulse 2.4s ease-in-out infinite}
@keyframes pdp-pulse{50%{box-shadow:0 0 0 6px rgba(226,169,59,0)}}
.pdp-trust{list-style:none;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 18px;margin-top:16px!important;padding:14px 0 0;border-top:1px solid var(--line);font-size:13px;color:var(--soft)}
.pdp-trust a{text-decoration:none}
.pdp-trust a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* accordions */
.acc{margin-top:18px}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font-weight:500;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";font-weight:400;font-size:20px;line-height:1;transition:rotate .2s}
.acc details[open] summary:after{rotate:45deg}
.acc details>:not(summary){margin-bottom:16px!important;color:rgba(36,33,29,.8)}
.acc details p+p{margin-top:.6em}
.plain{list-style:none;padding:0}
.plain li:before{content:"— ";color:var(--soft)}
.specs div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:5px 0}
.specs dt{color:var(--soft)}

/* ---- sections ---- */
.band{max-width:1320px;margin:0 auto;padding:clamp(56px,7vw,112px) var(--pad);border-top:1.5px dotted rgba(36,33,29,.22)}

/* 4. photo strip, edge to edge */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:clamp(8px,1vw,14px);overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--pad) clamp(56px,7vw,112px);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:var(--tile)}
figcaption{margin-top:8px;font-size:13px;color:var(--soft)}
figcaption span{margin-right:.5em;font-variant-numeric:tabular-nums;color:var(--ink)}

/* the makers: drawn heads side by side over the line, as on moonstonelamp.com; then the workbench videos */
.makers{text-align:center}
.founders{display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,5vw,40px)}
.founder{position:relative;display:block;text-decoration:none}
.founder img{width:auto;height:clamp(111px,21vw,168px)!important;transition:transform .25s ease}
.founder-handle{position:absolute;top:calc(100% - 4px);left:50%;translate:-50% 0;white-space:nowrap;font-size:13px;color:#b0402c;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
.founder.is-on img{transform:translateY(-3px) scale(1.03)}
.founder.is-on .founder-handle{opacity:1;transform:none}
.makers-title{margin-top:clamp(22px,2.4vw,32px)}
.founder-name{text-decoration:none;transition:color .2s}
.founder-name:hover,.founder-name.is-on{color:#b0402c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em}
@media(hover:none){.founder-handle{opacity:1;transform:none}.makers-title{margin-top:34px}}
.figs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(36px,5vw,64px);text-align:left}
.figs-grid video,.figs-grid img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;background:var(--tile)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:clamp(32px,6vw,96px)}
.acc--faq{margin-top:0}
.acc--faq summary{font-size:16px}
.acc--faq a{text-underline-offset:3px}

/* customer love: cards in a sideways row: their photo or video, both 2:3 (wide:tall), who said it, then their words */
.love-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.love-head p{font-size:clamp(15px,1.2vw,17px);color:var(--soft)}
.love-head a{color:var(--ink);text-underline-offset:3px}
.love-nav{display:inline-flex;gap:6px;margin-left:16px;vertical-align:middle}
.love-nav button{width:36px;height:36px;border:0;border-radius:50%;background:#fffdf8;box-shadow:0 0 0 1px var(--line);color:var(--ink);font:400 16px/1 "Geist",system-ui,sans-serif;cursor:pointer}
.love-nav button:hover{background:var(--ink);color:var(--paper)}
.love-nav button:disabled{opacity:.35;pointer-events:none}
@media(hover:none){.love-nav{display:none}}
.love-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,25vw,340px);gap:clamp(12px,1.4vw,20px);margin:clamp(24px,3vw,40px) calc(-1 * var(--pad)) 0;padding:2px var(--pad) 6px;align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
.love-row::-webkit-scrollbar{display:none}
.love-card{display:flex;flex-direction:column;scroll-snap-align:start;border-radius:10px;background:#fffdf8;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.love-media{display:block;background:var(--tile)}
.love-media img,.love-media video{width:100%;aspect-ratio:2/3;object-fit:cover}
.love-quote{margin:0;padding:0 16px 18px}
.love-quote p{font-size:14.5px;line-height:1.45;color:var(--ink)}
.love-who{display:flex;align-items:center;gap:9px;margin:0;padding:14px 16px 10px;font-size:12.5px;color:var(--soft)}
.love-who img{width:28px;height:28px!important;border-radius:50%;flex:none}
.love-initial{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;background:var(--tile);color:var(--ink);font-weight:500;font-size:13px}
.love-who>span:not(.love-initial){display:flex;flex-direction:column;min-width:0;line-height:1.25}
.love-who b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.love-who>span:not(.love-initial) a{text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.love-who>span:not(.love-initial) a:hover{color:var(--ink)}
.love-cap{margin:0;padding:14px 16px 18px;font-size:14.5px;line-height:1.45;color:var(--ink)}

/* 10. why tenderworld + more */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);align-items:start}
.why-text{display:grid;gap:.8em;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:rgba(36,33,29,.85)}
.why-text .h2{color:var(--ink)}
.why-text a{text-underline-offset:3px}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.more-card{display:flex;flex-direction:column;text-decoration:none}
.more-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:var(--tile);transition:opacity .2s}
.more-card:hover img{opacity:.88}
.more-row{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:14.5px}
.more-row b{font-weight:500}
.more-row span{white-space:nowrap;color:var(--soft)}
.more-row s{margin-right:.3em;opacity:.6}
.more-desc{margin-top:2px;font-size:13.5px;color:var(--soft)}

/* the newsletter after the page sits on a dotted rule like the other sections */
.pdp~.studio{border-top:1.5px dotted rgba(36,33,29,.22);padding-top:clamp(48px,6vw,88px)}

/* ---- tablet / phone ---- */
@media(max-width:900px){
 .buybox{grid-template-columns:1fr}
 .info{position:static}
 .gal-thumbs{grid-template-columns:repeat(8,52px);overflow-x:auto;scrollbar-width:none}
 .faq,.why{grid-template-columns:1fr}
 .faq .h2{margin-bottom:20px}
 .figs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .pdp{padding-top:calc(var(--promo-h) + 76px)}
 .crumbs{padding-bottom:10px}
 .buybox{padding-inline:0}
 .gal-track{border-radius:0}
 .gal-thumbs{padding:0 16px}
 .info{padding:0 16px}
 .gal-arrow{display:none}
 .more{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
 .more-card{scroll-snap-align:start}
 .strip{grid-auto-columns:72%}
 .love-row{grid-auto-columns:82%}
 .pdp-trust{grid-template-columns:1fr;gap:6px}
}
@media(prefers-reduced-motion:reduce){.pdp-mto .dot{animation:none}.founder img,.gal-arrow{transition:none}}