/* Shop: product page. Uses the tokens defined in site.css. The bag is css/cart.css. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* product page: photos left and held in view, the configurator scrolls beside them */
.pdp{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,min(480px,40vw));grid-template-areas:"crumbs crumbs" "gallery buy";
  column-gap:clamp(28px,4vw,72px);row-gap:clamp(12px,1.4vw,20px);align-items:start;
  max-width:1440px;margin:0 auto;padding:clamp(14px,1.8vw,22px) var(--pad) clamp(48px,6vw,88px);
}
.pdp-crumbs{grid-area:crumbs;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.pdp-crumbs a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.pdp-crumbs [aria-current]{color:var(--ink)}

/* A thumbnail rail beside one frame that swipes. The frame is sized so the
   whole photo fits the window under the header. */
.gallery{
  grid-area:gallery;position:sticky;top:calc(var(--hdr) + 16px);
  display:grid;grid-template-columns:68px minmax(0,calc((100vh - var(--hdr) - 56px) * .8));gap:14px;justify-content:center;
}
@supports(height:100svh){.gallery{grid-template-columns:68px minmax(0,calc((100svh - var(--hdr) - 56px) * .8))}}
.gal-rail{display:flex;flex-direction:column;gap:8px;height:0;min-height:100%;overflow-y:auto;scrollbar-width:none}
.gal-rail::-webkit-scrollbar{display:none}
.gal-rail button{flex:0 0 auto;aspect-ratio:4/5;padding:0;border:1px solid transparent;background:var(--stage);cursor:pointer;opacity:.7;transition:opacity .2s,border-color .2s}
.gal-rail button:hover{opacity:1}
.gal-rail button[aria-current="true"]{border-color:var(--ink);opacity:1}
.gal-rail img{width:100%;height:100%;object-fit:cover}
.gal-stage{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;overscroll-behavior-x:contain;scrollbar-width:none;background:var(--stage)}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline-offset:-2px}
.gal-slide{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--stage);scroll-snap-align:start;scroll-snap-stop:always;container-type:inline-size}
.gal-slide img{width:100%;height:100%;object-fit:cover}
.gal-count{position:absolute;right:12px;bottom:12px;padding:4px 8px;background:rgba(255,255,255,.86);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink)}
@media(max-width:940px){
  .pdp{grid-template-columns:minmax(0,1fr);grid-template-areas:"crumbs" "gallery" "buy";row-gap:16px}
  .gallery{position:static;grid-template-columns:minmax(0,1fr);gap:8px}
  .gal-stage{order:-1}
  .gal-rail{flex-direction:row;height:auto;min-height:0;overflow-x:auto}
  .gal-rail button{width:52px}
  .buy{max-width:none}
}

/* Initials in gold foil, drawn on the photo. --cap is the cap height as a
   share of the frame width, measured on the stamped letters in the photo;
   Libre Caslon's capitals are .77 of its size. */
.mono-ink{
  position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);margin-top:.03em;
  font-family:var(--serif);font-weight:400;font-size:calc(var(--cap,4) * 1cqw / .77);line-height:1;letter-spacing:.01em;white-space:nowrap;
  color:#BFA25C;   /* the median gold of the stamped letters in the photo */
  text-shadow:0 .02em 0 rgba(255,255,255,.65),0 -.014em 0 rgba(110,82,34,.3);   /* pressed into the leather */
  pointer-events:none;user-select:none;
}

.buy{grid-area:buy;max-width:480px}
.buy .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px;font-weight:400}

.form-msg{font-size:12.5px;color:var(--ink-2);margin:10px 0 0;min-height:1.3em;line-height:1.5}
.form-msg:empty{margin:0;min-height:0}

.acc{margin-top:24px;border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.acc summary::-webkit-details-marker{display:none}
.acc .acc-body{padding:0 0 18px;font-size:14px;color:var(--ink-2);font-weight:300;line-height:1.7}
.acc .acc-body p{margin:0 0 11px}
.acc .acc-body p:last-child{margin:0}
.acc .acc-body strong{color:var(--ink);font-weight:500}

dialog.sizeguide{border:1px solid var(--rule);background:var(--white);color:var(--ink);padding:0;max-width:560px;width:calc(100% - 32px)}
dialog.sizeguide::backdrop{background:rgba(17,17,16,.55)}
.sg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--rule)}
.sg-head h3{font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0;font-weight:600}
.sg-body{padding:18px 20px 22px;font-size:13.5px;color:var(--ink-2);font-weight:300}
.sg-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:12.5px}
.sg-body th,.sg-body td{border:1px solid var(--rule);padding:8px 10px;text-align:left;color:var(--ink)}
.sg-body th{background:var(--ground-2);font-weight:500;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}


/* ── the ladder and the subscription toggle ── */
.tbd{color:var(--ink-3);border-bottom:1px dotted var(--rule-2);cursor:help}

.specs{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0;font-size:13.5px}
.specs dt{color:var(--ink-3)}
.specs dd{margin:0;color:var(--ink)}
.sg-body .cm{color:var(--ink-3)}

/* FAQ, below the buy block */
.faq{max-width:780px;margin:0 auto;padding:clamp(40px,5vw,72px) var(--pad)}
.faq h2{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.1vw,30px);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;text-align:center}
.faq .acc{margin-top:18px}




/* content pages: shop, about, faq, contact, policy */
.page{max-width:1240px;margin:0 auto;padding:clamp(34px,5vw,64px) var(--pad) clamp(52px,7vw,96px)}
.page-hero{max-width:760px;margin:0 auto clamp(26px,4vw,44px);text-align:center}
.page-hero .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;font-weight:400}
.page-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:.08em;text-transform:uppercase;margin:0;text-wrap:balance}
.prose{max-width:680px;margin:0 auto;font-size:15.5px;line-height:1.75;color:var(--ink-2);font-weight:400}
.prose p{margin:0 0 16px}
.prose h2{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.prose .link{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;color:var(--ink);font-weight:600}
.prose .muted{font-size:13px;color:var(--ink-3)}
.prose .acc{margin-top:0}
/* held open while the policy loads from Shopify, so the footer stays below the screen */
.policy-body:has(> .cat-note.is-loading){min-height:100vh;min-height:100svh}
.policy-body h1,.policy-body h2,.policy-body h3{font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);margin-top:26px;padding-top:26px;border-top:1px solid var(--rule)}
@media(max-width:640px){.contact-grid{grid-template-columns:1fr}}
.shop-grid{max-width:1240px;margin:0 auto}
.cat-note{grid-column:1/-1;text-align:center;color:var(--ink-3);font-size:14px;padding:30px 0;margin:0}

/* current page in the nav */
.nav > a[aria-current="page"]::after,.nav-item > a[aria-current="page"]::after{transform:scaleX(1)}

/* ── gallery layout (products tagged "layout-gallery") ───────────────── */
.pdg{padding:clamp(14px,2vw,22px) clamp(12px,1.6vw,20px) clamp(40px,6vw,90px)}
.pdg-top{display:grid;grid-template-columns:1.32fr 1fr .86fr;gap:20px;align-items:start}
.pdg-hero{position:sticky;top:calc(var(--hdr) + 14px);border-radius:8px;overflow:hidden;background:#E8E7E3}
.pdg-hero img{width:100%;aspect-ratio:688/1024;object-fit:cover;display:block}
.pdg-stack{display:flex;flex-direction:column;gap:20px}
.pdg-stack figure{margin:0;border-radius:8px;overflow:hidden;background:#E8E7E3}
.pdg-stack img{width:100%;aspect-ratio:688/1024;object-fit:cover;display:block}
.pdg-stack figure:first-child{display:none}           /* the hero already shows it on desktop */
.pdg-panel{position:sticky;top:calc(var(--hdr) + 14px);padding:6px clamp(4px,1.4vw,26px) 0 clamp(8px,2vw,36px)}
.pdg-title{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.08;letter-spacing:.06em;text-transform:uppercase;margin:0 0 20px}
.pdg-desc{font-size:13.5px;line-height:1.6;color:var(--ink-2);font-weight:300;max-width:46ch}
.pdg-desc p{margin:0 0 10px}
.pdg-price{font-size:17px;font-weight:500;margin:22px 0 16px;letter-spacing:.01em}
.pdg-colors{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.pdg-swatches{display:flex;gap:10px}
.pdg-swatch{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-2);background:var(--sw);cursor:pointer;padding:0;box-shadow:inset 0 0 0 3px var(--ground);transition:box-shadow .2s,border-color .2s}
.pdg-swatch[aria-pressed="true"]{border:1.5px solid var(--ink)}
.pdg-colorname{font-size:12px;color:var(--ink-3)}
.pdg-sizehead{display:flex;justify-content:flex-end;margin-bottom:8px}
.pdg-sg{background:none;border:0;padding:4px 0;font-family:var(--sans);font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pdg-sizes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.pdg-size{position:relative;border:1px solid var(--rule-2);background:var(--white);padding:0 10px;min-height:36px;font-family:var(--sans);font-size:12px;color:var(--ink);cursor:pointer;white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s}
.pdg-size:hover{border-color:var(--ink-3)}
.pdg-size.out{color:var(--ink-3);background:linear-gradient(to top right,transparent calc(50% - .5px),var(--rule-2) calc(50% - .5px),var(--rule-2) calc(50% + .5px),transparent calc(50% + .5px)) var(--white)}
.pdg-size[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pdg-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;margin-bottom:12px;transition:background-color .2s,border-color .2s}
.pdg-btn:hover:not(:disabled){border-color:var(--ink)}
.pdg-btn.primary{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pdg-btn.primary:disabled{background:transparent;color:var(--ink-3);border-color:var(--rule-2);cursor:not-allowed}
.pdg-btn span{opacity:.7}

.pdg-section{max-width:1760px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(16px,4vw,58px) 0;border-top:1px solid var(--rule);margin-top:clamp(40px,5vw,64px)}
.pdg-section h2{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:.08em;text-transform:uppercase;margin:0 0 34px}
.pdg-details{margin:0;max-width:720px}
.pdg-details div{display:grid;grid-template-columns:minmax(150px,260px) 1fr;gap:16px;padding:11px 0;border-bottom:1px dotted var(--rule-2)}
.pdg-details div:last-child{border-bottom:0}
.pdg-details dt{font-weight:500;font-size:14px}
.pdg-details dd{margin:0;font-size:14px;color:var(--ink-2)}
.pdg-features{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2);line-height:1.9}
.pdg-galhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.pdg-galhead h2{margin:0}
.pdg-arrows{display:flex;gap:10px}
.pdg-arrows button{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:var(--white);display:grid;place-items:center;cursor:pointer}
.pdg-arrows svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.6}
.pdg-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pdg-gallery::-webkit-scrollbar{display:none}
.pdg-gallery figure{margin:0;scroll-snap-align:start;border-radius:6px;overflow:hidden}
.pdg-gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}

.notify .sg-body{display:flex;flex-direction:column;gap:12px}
.notify-input{border:1px solid var(--rule-2);height:46px;padding:0 14px;font-family:var(--sans);font-size:14px}

@media(max-width:1100px){
  .pdg-top{grid-template-columns:1fr 1fr;gap:16px}
  .pdg-hero{display:none}
  .pdg-stack figure:first-child{display:block}
}
@media(max-width:760px){
  .pdg-top{display:block}
  .pdg-stack{position:static;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -12px 20px;padding:0 12px;scrollbar-width:none}
  .pdg-stack::-webkit-scrollbar{display:none}
  .pdg-stack figure{flex:0 0 84%;scroll-snap-align:center}
  .pdg-panel{position:static;padding:0}
  .pdg-gallery{grid-auto-columns:78%}
}

/* ── homepage: collection that adapts to how many products exist ─────── */
.collection-grid{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:repeat(4,1fr)}
.collection-grid[data-count="1"]{grid-template-columns:minmax(0,560px);justify-content:center}
.collection-grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.collection-grid[data-count="3"]{grid-template-columns:repeat(3,1fr)}
.collection-grid[data-count="6"]{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.collection-grid,.collection-grid[data-count="3"],.collection-grid[data-count="6"]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.collection-grid[data-count="2"],.collection-grid[data-count="1"]{grid-template-columns:1fr}}
.collection-grid[data-count="1"] .card :is(h2,h3),.collection-grid[data-count="2"] .card :is(h2,h3){font-size:clamp(14px,1.15vw,17px);letter-spacing:.1em;margin-bottom:6px}
.collection-grid[data-count="1"] .card .price,.collection-grid[data-count="2"] .card .price{font-size:14px}
.collection-grid[data-count="1"] .card-body,.collection-grid[data-count="2"] .card-body{padding-top:18px}

/* product cards: hover swap to the second image, sold-out badge on the photo */
.card figure{position:relative;overflow:hidden}
.card figure img{transition:opacity .45s ease,transform .8s ease}
.card .card-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.card a:hover figure.has-alt img:first-child{opacity:0}
.card a:hover figure.has-alt .card-alt{opacity:1}
.card a:hover figure:not(.has-alt) img{transform:scale(1.03)}
.card-badge{position:absolute;top:12px;left:12px;background:var(--white);color:var(--ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;font-weight:700}
@media (prefers-reduced-motion:reduce){.card figure img{transition:none}}

/* the homepage "Buy 2, get 1 free" link lands here, clear of the sticky header */

/* ── collection page, after the reference: a short photo banner with the
   title centred on it, the story, a count bar, the pieces, then where the
   collection carries on. The banner has a fixed height at every width, so
   it always spans the window. ──────────────────────────────────────────── */
.coll-banner{
  position:relative;display:grid;place-items:center;height:clamp(250px,24vw,460px);
  overflow:hidden;background:var(--ph-dark);color:#fff;text-align:center;
}
.coll-banner picture{position:absolute;inset:0}   /* out of the grid, so the title stays centred */
.coll-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%}
/* An even veil, a little deeper behind the words, so white type reads on any
   crop (measured: the eyebrow stays above 4.5:1 on its brightest pixel). */
.coll-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 80% at 50% 50%,rgba(10,10,9,.52) 0,rgba(10,10,9,.36) 55%,rgba(10,10,9,.24) 100%);
}
@media(max-width:560px){   /* a phone crop puts a glove behind every word */
  .coll-banner::after{background:radial-gradient(58% 80% at 50% 50%,rgba(10,10,9,.66) 0,rgba(10,10,9,.5) 55%,rgba(10,10,9,.32) 100%)}
}
.coll-copy{position:relative;z-index:1;padding:0 var(--pad)}
.coll-copy .hero-eyebrow{margin-bottom:14px}
.coll-title{
  margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,3.1vw,46px);
  line-height:1.1;letter-spacing:.18em;text-transform:uppercase;text-wrap:balance;
  text-shadow:0 1px 18px rgba(10,10,9,.3);
}
.page.is-collection{max-width:1440px;padding-top:clamp(36px,4.4vw,60px)}
/* A collection page is known before it paints (html.is-coll, set in shop.html):
   the banner's fixed height is held, the page's own layout is used from the
   start, and the page shows once its pieces are in (html.coll-ready), so
   nothing appears in one place and then jumps to another. */
.is-coll #shopHero{display:none!important}
.is-coll #collBanner[hidden]{display:grid!important;visibility:hidden}
.is-coll .page{max-width:1440px;padding-top:clamp(36px,4.4vw,60px)}
.is-coll:not(.coll-ready) main.page{visibility:hidden;min-height:100vh;min-height:100svh}
.coll-story{max-width:58ch;margin:0 auto clamp(30px,3.6vw,46px);text-align:center;font-size:16px;line-height:1.75;color:var(--ink-2);text-wrap:balance}
.coll-story p{margin:0}
.coll-story p + p{margin-top:12px}
/* Hairlines above and below, as on the reference: how many, and the stock. */
.coll-bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;
  margin:0 0 clamp(24px,2.6vw,34px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.is-collection .collection-grid{max-width:none;column-gap:clamp(14px,1.8vw,26px);row-gap:clamp(34px,4vw,56px)}

/* colourway cards: the design small, the colour large, stock in words */
.card-split figure img,.card-split .card-alt{object-fit:contain}
.card-split .card-body{padding-top:20px;text-align:center}
.card-kicker{margin:0 0 7px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.card-split :is(h2,h3){margin-bottom:9px;font-size:clamp(15px,1.25vw,18px);letter-spacing:.18em}
.card-split .price{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px}
.card-state{
  padding-left:12px;border-left:1px solid var(--rule-2);line-height:1.1;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

/* after a sold-out collection: the photo beside where it carries on */
.coll-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ground-2)}
.coll-next-img{position:relative;margin:0;min-height:clamp(400px,36vw,640px);overflow:hidden;background:var(--ph-dark)}
.coll-next-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:24% 40%}
.coll-next-copy{align-self:center;justify-self:center;width:100%;max-width:520px;padding:clamp(44px,5vw,76px) var(--pad)}
.coll-next-copy h2{
  margin:0 0 18px;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.7vw,42px);
  line-height:1.1;letter-spacing:.14em;text-transform:uppercase;text-wrap:balance;
}
.coll-next-copy > p:not(.eyebrow){margin:0;font-size:16px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.coll-next-btns{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:30px}
@media(max-width:860px){
  .coll-next{grid-template-columns:1fr}
  .coll-next-img{min-height:0;aspect-ratio:1/1}
  .coll-next-img img{object-position:26% 40%}
  .coll-next-copy{justify-self:start;max-width:600px;padding:36px var(--pad) 56px}
}

/* ── Original Collection product page (tag "layout-original") ────────── */
.pdo{max-width:1440px;margin:0 auto;padding:clamp(14px,1.8vw,22px) var(--pad) clamp(56px,7vw,100px)}
.pdo-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 clamp(16px,2vw,26px);font-size:13px;color:var(--ink-3)}
.pdo-crumbs a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.pdo-crumbs [aria-current]{color:var(--ink)}
.pdo-top{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"media info" "acc info";
  column-gap:clamp(28px,3.4vw,56px);row-gap:clamp(18px,2vw,28px);align-items:start;
}
.pdo-media{grid-area:media}
.pdo-info{grid-area:info;position:sticky;top:calc(var(--hdr) + 24px)}
.pdo-acc{grid-area:acc;margin-top:0}
/* Cut-out photos on the shared stage colour: same frame, whole glove, every colour. */
.pdo-main{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stage);cursor:pointer}
.pdo-main img{width:100%;height:100%;object-fit:contain}
.pdo-thumbs{display:flex;gap:10px;margin-top:12px}
.pdo-thumbs button{width:74px;aspect-ratio:4/5;padding:0;border:1px solid transparent;background:var(--stage);overflow:hidden;cursor:pointer}
.pdo-thumbs button[aria-current="true"]{border-color:var(--ink)}
.pdo-thumbs img{width:100%;height:100%;object-fit:contain}
.pdo-eyebrow{margin:0 0 12px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.pdo-title{margin:0 0 14px;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:.16em;text-transform:uppercase;text-wrap:balance}
.pdo-price{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pdo-price > span:first-child{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.08em}
.pdo-badge{padding:5px 10px;background:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pdo-lede p{margin:0 0 22px;max-width:52ch;font-size:15px;line-height:1.65;color:var(--ink-2)}
.pdo-field{position:relative;min-width:0;margin:0 0 20px;padding:0;border:0}
.pdo-label{margin:0 0 10px;padding:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pdo-label b{font-family:var(--sans);font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--ink-2)}
/* six to a row at up to 60px, shrinking together on a phone */
.pdo-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,60px));gap:8px}
.pdo-swatch{display:block;aspect-ratio:1;overflow:hidden;border:1px solid transparent;background:var(--stage);transition:border-color .2s}
.pdo-swatch:hover{border-color:var(--rule-2)}
.pdo-swatch[aria-current="page"]{border-color:var(--ink)}
.pdo-swatch img{width:100%;height:100%;object-fit:contain;padding:3px}
.pdo-opts{display:flex;flex-wrap:wrap;gap:8px}
.pdo-opt{min-height:40px;padding:0 16px;border:1px solid var(--rule-2);background:transparent;font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer;transition:border-color .2s}
.pdo-opt:hover{border-color:var(--ink-3)}
.pdo-opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.pdo-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pdo-chart{display:inline-flex;align-items:center;gap:6px;padding:0 0 10px;background:none;border:0;font-family:var(--sans);font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pdo-chart svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3}
.pdo-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:6px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.pdo-btn span{opacity:.72;font-weight:400}
.pdo-note{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.pdo-next{margin-top:28px;padding-top:22px;border-top:1px solid var(--rule)}
.pdo-next-card{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.pdo-next-card img{width:96px;height:96px;object-fit:cover;object-position:50% 55%;background:var(--stage)}
.pdo-next-card span{display:flex;flex-direction:column;gap:4px}
.pdo-next-card b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.pdo-next-card i{font-style:normal;font-size:14px;color:var(--ink-2)}
.pdo-next-card i s{margin-right:4px;color:var(--ink-3)}
.pdo-next-card u{margin-top:4px;font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-underline-offset:3px}
.pdo-next-card:hover b{text-decoration:underline;text-underline-offset:4px}
.pdo-inline{padding:0;background:none;border:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:900px){
  .pdo-top{grid-template-columns:1fr;grid-template-areas:"media" "info" "acc"}
  .pdo-info{position:static}
}

/* ── below the product: personalization, details, the glove in use, the gift ── */
.mono-craft,.mono-gift{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mono-craft{background:var(--white);border-top:1px solid var(--rule)}
.mono-gift{background:var(--ground-2)}
.mc-img,.mg-img{position:relative;margin:0;min-height:clamp(440px,46vw,760px);overflow:hidden;background:var(--ph-dark)}
.mc-img img,.mg-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-img img{object-position:50% 42%}
.mc-copy,.mg-copy{align-self:center;justify-self:center;width:100%;max-width:560px;padding:clamp(48px,6vw,96px) var(--pad)}
.mc-copy h2,.mg-copy h2{
  margin:0 0 26px;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,40px);
  line-height:1.1;letter-spacing:.12em;text-transform:uppercase;text-wrap:balance;
}
.mc-steps{list-style:none;counter-reset:mc;margin:0 0 32px;padding:0}
.mc-steps li{counter-increment:mc;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:16px 0;border-top:1px solid var(--rule)}
.mc-steps li:last-child{border-bottom:1px solid var(--rule)}
.mc-steps li::before{content:counter(mc,decimal-leading-zero);grid-row:span 2;padding-top:2px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.mc-steps b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.mc-steps span{margin-top:4px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.mg-copy > p:not(.eyebrow){margin:0;font-size:16px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.mg-copy > p.mg-note{margin-top:14px;font-size:14px;color:var(--ink-3)}
.mg-copy .btn{margin-top:30px}

.mono-details{max-width:1440px;margin:0 auto;padding:0 var(--pad) clamp(64px,7vw,110px)}
.md-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.md-grid figure{margin:0 0 18px;aspect-ratio:4/5;overflow:hidden;background:var(--stage)}
.md-grid img{width:100%;height:100%;object-fit:cover}
.md-stage img{transform:scale(1.9);transform-origin:50% 26%}   /* the perforated fingers, close up */
.md-grid h3{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.md-grid p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

.mono-band{position:relative;height:clamp(420px,44vw,760px);overflow:hidden;background:var(--ph-dark);color:#fff}
.mono-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.mono-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,9,.6) 0,rgba(10,10,9,.22) 40%,rgba(10,10,9,0) 62%),
             linear-gradient(to right,rgba(10,10,9,.34) 0,rgba(10,10,9,0) 52%);
}
.mb-copy{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:clamp(30px,4.2vw,64px);max-width:680px}
.mb-title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,50px);line-height:1.06;letter-spacing:.12em;text-transform:uppercase;text-wrap:balance;text-shadow:0 1px 18px rgba(10,10,9,.25)}

@media(max-width:900px){.md-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}
@media(max-width:560px){   /* a phone crop brings the white glove close to the words */
  .mono-band::after{background:linear-gradient(to top,rgba(10,10,9,.72) 0,rgba(10,10,9,.3) 42%,rgba(10,10,9,0) 66%),linear-gradient(to right,rgba(10,10,9,.34) 0,rgba(10,10,9,0) 60%)}
}
@media(max-width:860px){
  .mono-craft,.mono-gift{grid-template-columns:minmax(0,1fr)}
  .mc-img,.mg-img{min-height:0;aspect-ratio:4/5}
  .mg-img{order:-1}
  .mc-copy,.mg-copy{justify-self:start;max-width:620px;padding:36px var(--pad) 56px}
}

/* ── proof: rating line, quotes, featured review, members, the full list ── */
.rv-stars{position:relative;display:inline-block;width:88px;height:17px;flex:0 0 auto;line-height:0}
.rv-stars svg{width:88px;height:17px;display:block}
.rv-stars-base svg{fill:var(--rule-2)}
.rv-stars-fill{position:absolute;inset:0;width:var(--fill,100%);overflow:hidden}
.rv-stars-fill svg{fill:var(--gold)}
.rv-line-wrap{margin:0 0 10px}
.rv-line{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.rv-line b{color:var(--ink);font-weight:700}
.rv-line span:last-child{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-2)}
.rv-line:hover span:last-child{text-decoration-color:var(--ink)}

.rv-mini-wrap{margin:4px 0 16px}
.rv-mini-track{display:grid}
.rv-mini{grid-area:1/1;display:flex;gap:12px;align-items:center;margin:0;padding:11px 12px;border:1px solid var(--rule);background:var(--white);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.rv-mini.is-on{opacity:1;visibility:visible;transition:opacity .5s ease}
.rv-mini img{width:52px;height:52px;object-fit:cover;flex:0 0 52px;background:var(--stage)}
.rv-mini figcaption{min-width:0;display:flex;flex-direction:column;gap:3px}
.rv-mini .rv-stars,.rv-mini .rv-stars svg{width:70px;height:13px}
.rv-mini q{font-size:13px;line-height:1.45;color:var(--ink)}
.rv-mini q::before,.rv-mini q::after{content:none}
.rv-mini cite{font-style:normal;font-size:12px;color:var(--ink-3)}
.rv-mini-dots{display:flex;justify-content:center;gap:4px;margin-top:6px}
.rv-mini-dots button{width:24px;height:18px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.rv-mini-dots button::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rule-2);transition:background-color .2s}
.rv-mini-dots button[aria-pressed="true"]::before{background:var(--ink);width:16px;border-radius:3px}

.rv-verified{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.rv-verified svg{width:14px;height:14px;fill:var(--green)}
.rv-verified .tick{fill:none;stroke:#fff;stroke-width:2}

.rv-feature-wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad) clamp(56px,6vw,96px)}
.rv-feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--white);border:1px solid var(--rule)}
.rv-feature figure{margin:0;min-height:340px;background:var(--stage)}
.rv-feature figure img{width:100%;height:100%;object-fit:cover;object-position:58% 60%}
.rv-feature-copy{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.rv-feature-title,.rv-feature-copy h3{margin:4px 0 2px;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1.2;letter-spacing:.04em;text-wrap:balance}
.rv-feature-copy p{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-2);max-width:62ch}
.rv-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--rule)}
.rv-by b{font-weight:600;font-size:14px}
.rv-by span:not(.rv-verified){font-size:13px;color:var(--ink-3)}
.rv-by .rv-verified{flex-basis:100%}
@media(max-width:760px){.rv-feature{grid-template-columns:1fr}.rv-feature figure{min-height:0;aspect-ratio:16/10}}

.rv-members-wrap{padding:clamp(64px,7vw,104px) 0 clamp(60px,6vw,96px);background:var(--ground-2)}
.rv-members-head{text-align:center;padding:0 var(--pad);margin-bottom:clamp(26px,3vw,40px)}
.rv-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.rv-members-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,42px);letter-spacing:.1em;text-transform:uppercase;text-wrap:balance}
.rv-sub{margin:12px 0 0;color:var(--ink-2)}
.rv-members-rail{position:relative}
.rv-members{--edge:max(var(--pad),calc((100vw - 1440px) / 2 + var(--pad)));display:grid;grid-auto-flow:column;grid-auto-columns:min(320px,78vw);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--edge);padding:4px var(--edge) 8px;scrollbar-width:none}
.rv-members::-webkit-scrollbar{display:none}
.rv-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule)}
.rv-card figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--stage)}
.rv-card figure img{width:100%;height:100%;object-fit:cover}
.rv-card-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px}
.rv-card-body > p{margin:0;flex:1;font-size:14.5px;line-height:1.65;color:var(--ink)}
.rv-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-2);background:var(--white);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 12px rgba(17,17,16,.08)}
.rv-arrow svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6}

.rv-all{max-width:1080px;margin:0 auto;padding:clamp(40px,5vw,72px) var(--pad) clamp(64px,7vw,110px);border-top:1px solid var(--rule)}
.rv-all h2{margin:0 0 22px;text-align:center;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.1vw,30px);letter-spacing:.08em;text-transform:uppercase}
.rv-sample{margin:-8px 0 20px;text-align:center;font-size:12.5px;color:#8A5A1F}
.rv-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,4vw,56px);align-items:center;padding:0 0 26px;border-bottom:1px solid var(--rule)}
.rv-avg{display:grid;justify-items:start;gap:6px}
.rv-avg b{font-family:var(--display);font-weight:500;font-size:44px;line-height:1}
.rv-avg span{font-size:13px;color:var(--ink-2)}
.rv-bars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rv-bars li{display:grid;grid-template-columns:52px minmax(0,1fr) 48px;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rv-bars i{display:block;height:8px;background:var(--stage)}
.rv-bars em{display:block;height:100%;background:var(--green)}
.rv-list{list-style:none;margin:0;padding:0}
.rv-list li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;padding:22px 0;border-bottom:1px solid var(--rule)}
.rv-list li b{font-weight:600;font-size:14px}
.rv-list li .rv-verified{grid-column:2}
.rv-list li p{grid-column:1/-1;margin:2px 0 0;font-size:15px;line-height:1.7;color:var(--ink-2)}
.rv-pages{display:flex;justify-content:center;gap:6px;margin-top:22px}
.rv-pages button{min-width:40px;height:40px;border:1px solid var(--rule-2);background:var(--white);cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--ink)}
.rv-pages button[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:700px){.rv-summary{grid-template-columns:1fr}.rv-summary .btn{justify-self:start}}

.size-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;max-width:1440px;margin:0 auto;padding:clamp(40px,5vw,64px) var(--pad);border-top:1px solid var(--rule)}
.size-band-copy{max-width:640px}
.size-band h2{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,36px);letter-spacing:.1em;text-transform:uppercase;text-wrap:balance}
.size-band-copy > p:last-child{margin:0;color:var(--ink-2)}

.mono-ink{font-size:calc(var(--cap,4) * var(--fit,1) * 1cqw / .77)}

/* the rotating quotes can be paused */
.rv-mini-dots{align-items:center}
.rv-mini-pause{width:28px!important;height:28px!important;margin-left:4px;border-radius:50%;border:1px solid var(--rule-ctl)!important;background:var(--white)!important}
.rv-mini-pause::before{content:none!important}
.rv-mini-pause svg{width:12px;height:12px;fill:var(--ink);stroke:var(--ink);stroke-width:2}
.rv-arrow:disabled{opacity:.35;cursor:default}

/* keyboard and scrolling */
html{scroll-padding-top:calc(var(--hdr) + 16px)}
.gal-rail button:focus-visible{outline-offset:-3px}
@media(min-width:941px){
  .gallery:has(> .gal-rail[hidden]){grid-template-columns:minmax(0,calc((100vh - var(--hdr) - 56px) * .8))}
}

/* members carousel: arrows under the cards */
.rv-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}
.icon-btn:focus:not(:focus-visible){outline:none}
/* small alignment fixes */
@media(max-width:600px){.mono-band img{object-position:75% 40%}}

/* Enlarge button on the main photo, and the full-screen photo viewer. */
.gal-zoom{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--rule);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:zoom-in;transition:background .2s,border-color .2s}
.gal-zoom:hover{background:#fff;border-color:var(--ink)}
.gal-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.gal-track .gal-slide{cursor:zoom-in}
.zoom{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--stage);color:var(--ink)}
@supports(height:100dvh){.zoom{height:100dvh}}
.zoom::backdrop{background:rgba(17,17,16,.5)}
.zoom[open]{display:grid;place-items:center}
.zoom-stage{display:grid;place-items:center;width:100%;height:100%;padding:56px 72px;touch-action:pan-y}
.zoom-stage .gal-slide{width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:4/5;cursor:default}
.zoom-btn{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--rule-2);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.zoom-btn:hover{border-color:var(--ink)}
.zoom-btn[hidden]{display:none}
.zoom-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zoom-close{top:12px;right:12px}
.zoom-prev{left:14px;top:50%;translate:0 -50%}
.zoom-next{right:14px;top:50%;translate:0 -50%}
.zoom-count{position:absolute;bottom:16px;left:50%;translate:-50% 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-2)}
@media(max-width:640px){
  .zoom-stage{padding:60px 0}
  .zoom-stage .gal-slide{width:100%;height:auto}
  .zoom-prev,.zoom-next{top:auto;bottom:8px;translate:none}
}

/* Phones and tablets: every photo shows as a thumbnail in one row under the
   big one, and arrows sit on the photo, so nobody takes it for the only one.
   The thumbnails say where you are, so the counter steps aside. */
.gal-track{position:relative}
.gal-arrow{display:none}
@media(max-width:940px){
  .gal-track{grid-auto-columns:100%;column-gap:0;background:none}
  .gal-count{display:none}
  .gal-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(40px,64px);gap:6px;justify-content:center;overflow-x:auto}
  .gal-rail[hidden]{display:none}
  .gal-rail button{width:auto}
  .gal-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--rule);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer}
  .gal-arrow[hidden]{display:none}
  .gal-prev{left:12px}
  .gal-next{right:12px}
  .gal-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
}