/* GEKX storefront: achromatic paper/ink, one vermillion for the primary action, 8px radius,
   carbon display bands, manifest tables, no shadows. Brand colors and fonts from PRD v2 section 3. */

/* Self-hosted fonts (SIL OFL, licenses in assets/fonts/), latin subset */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#FFFFFF; --vellum:#F5F5F4; --ink:#101828; --slate:#4A5565; --frost:#E5E7EB; --iron:#8A8A8A;
  --carbon:#0F0E12; --on-carbon:#F5F5F5; --on-carbon-muted:#B2B2B2;
  --accent:#E42B0C; --accent-press:#C2240A;   /* primary action fill ONLY */
  --r:8px; --maxw:1200px;
  --head:"Instrument Sans","Inter",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
img,svg{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);font-weight:500;letter-spacing:-0.025em;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,56px);line-height:1.06}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12}
h3{font-size:clamp(20px,2vw,24px);line-height:1.25}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
@media(max-width:640px){.wrap{padding-inline:16px}}
.eyebrow{font:500 12px/1.4 var(--body);letter-spacing:.025em;text-transform:uppercase;color:var(--slate)}
.lede{font-size:18px;color:var(--slate);max-width:56ch}
.muted{color:var(--slate)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* announcement + header */
.announce{background:var(--ink);color:var(--on-carbon);font:500 12px/1.4 var(--body);text-align:center;padding:9px 16px;letter-spacing:.01em}
.site-head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--frost)}
.site-head .wrap{display:flex;align-items:center;gap:28px;min-height:64px}
.logo{display:inline-flex;text-decoration:none}
.site-head .logo{min-height:44px;align-items:center}
.logo svg{height:30px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;font-size:14px}
.nav a{text-decoration:none;color:var(--slate);padding-block:11px;min-width:44px;text-align:center}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px}
.cart-link{display:inline-flex;align-items:center;min-height:44px;gap:7px;text-decoration:none;font-size:14px;border:1px solid var(--frost);border-radius:var(--r);padding:7px 11px}
.cart-link:hover{border-color:var(--ink)}
.cart-count{font:600 12px/1 var(--body);min-width:20px;height:20px;border-radius:6px;display:inline-grid;place-items:center;background:var(--ink);color:#fff;padding:0 5px}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--frost);border-radius:var(--r);padding:7px 11px;font-size:14px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;padding:8px 16px 16px}
.menu nav::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 1px);height:100vh;height:100dvh;background:rgba(16,24,40,.32)}
.site-head:has(.menu[open]){z-index:50}
.menu nav a{padding:12px 0;border-bottom:1px solid var(--frost);text-decoration:none}
.menu nav a:last-child{border-bottom:0}
.menu[open] summary{background:var(--vellum)}
@media(max-width:860px){.nav{display:none}.menu{display:block}.site-head .wrap{gap:12px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 15px/1 var(--body);border-radius:var(--r);padding:14px 22px;text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:#fff}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-press);border-color:var(--accent-press);color:#fff}
.btn-light{border-color:var(--on-carbon);color:var(--on-carbon)}
.btn-light:hover{background:var(--on-carbon);color:var(--carbon)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--vellum);border-color:var(--frost);color:var(--iron);cursor:not-allowed}
.btn-block{width:100%}
.textlink{font-size:15px;font-weight:500;display:inline-flex;align-items:center;min-height:44px}

/* sections */
.sec{padding-block:64px}
.sec-alt{background:var(--vellum)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;max-width:62ch}
@media(max-width:640px){.sec{padding-block:48px}}

/* hero */
.hero{padding-block:56px 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:18px}
.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:6px}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:32px}.hero{padding-block:36px 48px}}
/* tablets: the hero photo is capped at 560 px, like the featured and pallet photos */
@media(min-width:641px) and (max-width:860px){.hero .photo{max-width:560px;width:100%;margin-inline:auto}}

/* photos: every crop already has its slot's ratio (tools/images.py), so the box is sized
   before the file arrives (no layout shift) and object-fit never trims the subject.
   --pos is the focal point; --pos-m the focal point of the phone crop. */
.photo{display:block;position:relative;overflow:hidden;border-radius:var(--r);background:var(--vellum)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.photo.on-dark{background:#17161B}
.ratio-1{aspect-ratio:1/1}.ratio-45{aspect-ratio:4/5}.ratio-169{aspect-ratio:16/9}.ratio-43{aspect-ratio:4/3}
@media(max-width:640px){.photo img{object-position:var(--pos-m,var(--pos,50% 50%))}.hero .photo{aspect-ratio:4/5}}
/* the featured shot's printed label stays small: never wider than 700 px */
.featured-photo{max-width:700px;width:100%}
@media(max-width:860px){#featured .buy{order:-1}.featured-photo{max-width:560px;margin-inline:auto}}

/* spec strip */
/* equal columns, but no value ever breaks: a column never gets narrower than its one-line text */
.specs{display:grid;grid-template-columns:repeat(5,minmax(max-content,1fr));border:1px solid var(--frost);border-radius:var(--r);overflow:hidden}
.specs div{padding:16px 18px;border-right:1px solid var(--frost);display:flex;flex-direction:column;gap:4px}
.specs div:last-child{border-right:0}
.specs b{font:500 20px/1.2 var(--head);letter-spacing:-0.02em}
@media(max-width:860px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}.specs div{border-bottom:1px solid var(--frost)}.specs div:nth-child(2n){border-right:0}}

/* benefits / trust */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:960px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.grid3,.grid2{grid-template-columns:1fr}}
@media(max-width:520px){.grid4{grid-template-columns:1fr}}
.tile{border:1px solid var(--frost);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.tile p{color:var(--slate);font-size:15px}
.icon{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trust{display:flex;align-items:flex-start;gap:12px;font-size:14px}
.trust .icon{flex:none;width:24px;height:24px}

/* manifest tables (Freitag) */
.manifest{border:1px solid var(--frost);border-radius:var(--r);overflow-x:auto;background:var(--paper)}
.manifest table{border-collapse:collapse;width:100%;font-size:14px;min-width:480px}
.manifest th,.manifest td{padding:12px 16px;border-bottom:1px solid var(--frost);text-align:left}
.manifest th{font:500 12px/1.3 var(--body);letter-spacing:.025em;text-transform:uppercase;color:var(--slate);background:var(--vellum)}
.manifest tr:last-child td{border-bottom:0}
.manifest td.r,.manifest th.r{text-align:right;font-variant-numeric:tabular-nums}
.manifest tr.sel td{background:var(--vellum);font-weight:500}
.manifest.kv table{min-width:0}
.manifest.kv td:first-child{font:500 12px/1.5 var(--body);text-transform:uppercase;letter-spacing:.025em;color:var(--slate);width:42%;vertical-align:top}
.manifest td{font-variant-numeric:tabular-nums}
.manifest td+td,.manifest th+th{border-left:1px solid var(--frost)}
.manifest .sub-box{display:none}

/* carbon band */
.band{background:var(--carbon);color:var(--on-carbon)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:64px}
.band p{color:var(--on-carbon-muted)}
.band .eyebrow{color:var(--on-carbon-muted)}
.band dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:22px 0 26px;border-top:1px solid #2B2A32}
.band dl div{padding:12px 0;border-bottom:1px solid #2B2A32}
.band dt{font:500 12px/1.3 var(--body);letter-spacing:.025em;text-transform:uppercase;color:var(--on-carbon-muted)}
.band dd{margin:4px 0 0;font:500 17px/1.3 var(--head)}
@media(max-width:860px){.band .wrap{grid-template-columns:1fr;gap:28px;padding-block:48px}}

/* FAQ */
.faq{border-top:1px solid var(--frost)}
.faq details{border-bottom:1px solid var(--frost)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:500 16px/1.4 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+" / "";font:400 22px/1 var(--body);color:var(--slate)}
.faq details[open] summary::after{content:"−" / ""}
.faq .a{padding:0 0 22px;color:var(--slate);max-width:72ch;display:flex;flex-direction:column;gap:10px}

/* product page */
.pdp{padding-block:40px 64px}
.pdp .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:900px){.pdp .wrap{grid-template-columns:minmax(0,1fr);gap:28px}.pdp{padding-block:20px 48px}}
.gallery{display:flex;flex-direction:column;gap:12px;min-width:0}
/* gallery thumbnails: buttons that swap the main photo (gekx.js); the ring is drawn on top,
   so the active state never moves anything */
.thumbs{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px}
.thumb{position:relative;display:block;width:100%;padding:0;border:0;margin:0;background:none;cursor:pointer;border-radius:var(--r)}
.thumb::after{content:"";position:absolute;inset:0;border:1px solid var(--frost);border-radius:var(--r);pointer-events:none}
.thumb:hover::after{border-color:var(--iron)}
.thumb[aria-current="true"]::after{border:2px solid var(--ink)}
.buy{display:flex;flex-direction:column;gap:18px}
/* sticky only when the whole gallery (88 + 574 + 12 + 136 px) fits the screen height */
@media(min-width:901px) and (min-height:840px){.pdp .gallery{position:sticky;top:88px}}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price b{font:500 clamp(24px,2.2vw,28px)/1 var(--body);letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.price span{color:var(--slate);font-size:14px;font-variant-numeric:tabular-nums}
.pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.packset{border:0;margin:0;padding:0;min-width:0}
.packset .fieldlabel{margin-bottom:18px}
.pill{position:relative;display:block;min-width:0}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.pill span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:11px 8px;text-align:center;font:500 14px/1 var(--body);border:1px solid var(--iron);background:var(--paper);color:var(--ink);border-radius:var(--r);font-variant-numeric:tabular-nums}
.pill:hover span{border-color:var(--ink)}
.pill input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.pill input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.fieldlabel{font:500 13px/1.4 var(--body);color:var(--slate);display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:10px}
.fieldlabel>:first-child{white-space:nowrap}
.fieldlabel>:last-child{margin-left:auto;text-align:right}
.pickup{display:flex;gap:10px;align-items:flex-start;font-size:14px;border:1px solid var(--frost);border-radius:var(--r);padding:14px}
.pickup .icon{width:22px;height:22px;flex:none}
.acc details{border-top:1px solid var(--frost)}
.acc details:last-child{border-bottom:1px solid var(--frost)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:16px 0;font:500 16px/1.4 var(--body)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+" / "";font:400 22px/1 var(--body);color:var(--slate)}
.acc details[open] summary::after{content:"−" / ""}
.acc .a{padding:0 0 18px;color:var(--slate);font-size:15px;display:flex;flex-direction:column;gap:10px}
.note{font-size:14px;color:var(--slate)}
.inline-msg{font-size:14px;border:1px solid var(--frost);border-radius:var(--r);padding:12px 14px;background:var(--vellum)}
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--paper);border-top:1px solid var(--frost);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:none;align-items:center;gap:14px}
.sticky-atc .s-price{font:500 18px/1.2 var(--head);font-variant-numeric:tabular-nums}
.sticky-atc .s-sub{font-size:12px;color:var(--slate)}
.sticky-atc .btn{margin-left:auto;padding:13px 18px;min-height:44px}
@media(max-width:900px){.sticky-atc.show{display:flex}html.has-sticky{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form .full{grid-column:1/-1}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:500 14px/1.4 var(--body)}
.field .req{color:var(--slate);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--iron);border-radius:var(--r);padding:12px 13px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.err{font-size:13px;color:var(--ink);font-weight:500}
.err::before{content:"! " / "";font-weight:700}
.field.bad :is(input,select,textarea){border-color:var(--ink);border-width:2px;padding:11px 12px}
/* spam trap (PRD 10.2): off screen, not display:none, so simple bots still fill it */
.honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form[aria-busy="true"] .btn[disabled]{cursor:progress}
.form-done{font-size:16px;padding:16px 18px}
.steps3{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.steps3 li{list-style:none;border-top:1px solid var(--frost);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.steps3 li b{font:500 12px/1 var(--body);letter-spacing:.025em;font-variant-numeric:tabular-nums;color:var(--slate)}
@media(max-width:760px){.steps3{grid-template-columns:1fr}}
ol.steps3{padding:0;margin:0}

/* page header for inner pages */
.phead{padding-block:48px 8px;display:flex;flex-direction:column;gap:12px}
.prose{max-width:72ch;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.prose p{color:var(--slate)}
.prose h2{font-size:24px;margin-top:18px}
.addr{font-style:normal;line-height:1.7}

/* cart */
.cart-lines{border-top:1px solid var(--frost)}
.cart-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--frost)}
.cl-art{aspect-ratio:1/1;display:block;position:relative;overflow:hidden;border:1px solid var(--frost);border-radius:var(--r);background:var(--vellum)}
.cl-art picture{position:absolute;inset:0}
.cl-art img{width:100%;height:100%;object-fit:cover;object-position:50.5% 50.4%}
.cart-line .rm{background:none;border:0;color:var(--slate);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px;padding:0}
.summary{border:1px solid var(--frost);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}

/* footer (Carbon) */
.site-foot{background:var(--carbon);color:var(--on-carbon);padding-block:56px 28px;margin-top:0}
.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
@media(max-width:860px){.site-foot .cols{grid-template-columns:1fr 1fr}}
.site-foot h4{font:500 12px/1.3 var(--body);letter-spacing:.025em;text-transform:uppercase;color:var(--on-carbon-muted);margin-bottom:12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;font-size:14px}
.site-foot li{display:flex}
.site-foot ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.site-foot .logo{min-height:44px;align-items:center}
.site-foot a{text-decoration:none;color:var(--on-carbon)}
.site-foot a:hover{text-decoration:underline}
.site-foot p{color:var(--on-carbon-muted);font-size:14px}
.legal{margin-top:44px;padding-top:20px;border-top:1px solid #2B2A32;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--on-carbon-muted)}

/* utility + responsive overrides for inline two-column grids */
[hidden]{display:none!important}
@media(max-width:860px){#featured,#quoteGrid,#contactGrid,#cartRoot{grid-template-columns:1fr!important;gap:28px!important}}

/* ---- layout refinements ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.phead+.sec{padding-top:32px}
.buy-title{font-size:clamp(30px,3.4vw,44px);line-height:1.1}
.buy-title.as-h2{font-size:clamp(26px,2.8vw,34px)}
.faq{max-width:860px}
.band+.site-foot{border-top:1px solid #2B2A32}
.site-foot :focus-visible,.band :focus-visible,.announce :focus-visible{outline-color:var(--on-carbon)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:8px 12px;border-radius:var(--r);border:1px solid var(--ink)}
.skip:focus{left:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot-h{font:500 12px/1.3 var(--body);letter-spacing:.025em;text-transform:uppercase;color:var(--on-carbon-muted);margin:0 0 2px}
.inline-msg:empty{display:none}
.cart-line .rm{padding:6px 0;min-height:44px}
.paynote{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px;font-size:14px;color:var(--slate)}
.paynote span{display:inline-flex;align-items:center;gap:8px}
.paynote .icon{width:20px;height:20px;flex:none}
@media(max-width:900px){body.has-sticky .site-foot{padding-bottom:calc(28px + 66px + env(safe-area-inset-bottom,0px))}}
@media(max-width:860px){.specs div:last-child{grid-column:1/-1;border-bottom:0}}
@media(max-width:640px){
  .manifest table{min-width:0}
  .manifest .col-len,.manifest .col-box{display:none}
  .manifest .sub-box{display:block;font-size:12px;color:var(--slate);font-weight:400;margin-top:2px}
  .thumbs{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max(56px,calc((100% - (var(--n,5) - 1) * 8px) / var(--n,5)));gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px;margin:-4px;scroll-padding-inline:4px}
  .thumb{scroll-snap-align:start}
}
/* Safari draws a native select unless appearance is reset */
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101828' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:38px}
.field.bad select{padding-right:37px}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
@media(max-width:640px){.gallery .photo.ratio-45{aspect-ratio:1/1}}

/* ---- v2: common uses, cart quantity, forms, footer ---- */
.use{display:flex;flex-direction:column;gap:10px}
.use .photo{margin-bottom:6px}
.use p{color:var(--slate);font-size:15px}
.cl-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.cl-link{display:inline-flex;align-items:center;min-height:44px;color:var(--slate);font-size:14px}
@media(max-width:400px){.cart-line{grid-template-columns:48px minmax(0,1fr) auto;gap:12px}.cart-line .note{font-size:13px}}
.summary .btn[aria-disabled="true"]{pointer-events:none}
.hint{font-size:13px;color:var(--slate)}
.list{margin:0;padding-left:20px;color:var(--slate);display:flex;flex-direction:column;gap:6px}
.prose .list{color:var(--slate)}
.lead{font-size:18px;color:var(--ink)!important}
.as-h3{font-size:clamp(20px,2vw,24px);line-height:1.25;margin-bottom:18px}
.quote h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:20px}
.nowrap{white-space:nowrap}
.foot-brand{display:flex;flex-direction:column;gap:14px}
.site-foot address{font-style:normal;color:var(--on-carbon-muted);font-size:14px;line-height:1.7}
.site-foot address a{color:var(--on-carbon)}
.foot-contact{display:flex;flex-wrap:wrap;column-gap:18px}
.foot-contact a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:640px){.site-foot .foot-brand{grid-column:1/-1}.site-foot .cols>:last-child{grid-column:1/-1}}
/* phones: the Legal list in two columns that line up with Shop and Help (same 32 px gap) */
@media(min-width:375px) and (max-width:640px){.site-foot .cols>:last-child ul{display:block;columns:2;column-gap:32px}.site-foot .cols>:last-child li{break-inside:avoid}}
.prose .photo{margin-block:6px}
.buy .textlink{align-self:flex-start}
.buy .textlink+.textlink{margin-top:-18px}
.tap{display:inline-block;padding-block:12px;margin-block:-12px}
/* contact photo sits under the form */
.contact-photo{margin-top:28px;max-width:552px}
/* pallet photo on tablets: capped so the 1120 px source covers 2x screens */
@media(min-width:641px) and (max-width:900px){.gallery-pallet{max-width:560px;width:100%;margin-inline:auto}}
/* product photo on tablets: capped like the pallet photo, so the thumbnails stay near the first screen */
@media(min-width:641px) and (max-width:900px){.pdp .gallery:not(.gallery-pallet){max-width:560px;width:100%;margin-inline:auto}}

/* QA round 3 */
.phead--solo{padding-bottom:96px}
@media(min-width:641px){.menu nav{padding-inline:24px}}
.manifest td{overflow-wrap:anywhere}
.thumb:focus-visible{outline:3px solid var(--accent-press);outline-offset:3px}
@media (forced-colors:active){.pill input:checked+span{outline:3px solid CanvasText;outline-offset:-4px}}


/* ---- landing (shopgekx.com): build.py appends this to the v2 stylesheet above ----
   The v2 rules are unchanged. These add the header "Shop" link (an outlined .btn, like the v2
   header's Cart control: the accent stays on the page's primary action), the contact section and
   the classes that replace the v2 inline style="" attributes (the CSP allows no inline styles). */
.site-head .head-shop{min-height:44px;padding:7px 16px;font-size:14px;flex:none}
.band-h{margin-top:10px}
.band-lead{margin-top:12px;max-width:48ch}
.contact-copy{display:flex;flex-direction:column}
.contact-copy .sec-head{margin-bottom:24px}
.contact-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
/* Price table: a price, a pack name or a length never breaks inside ("$23.9" + "9", "2" + "rolls").
   v2's .manifest td{overflow-wrap:anywhere} lets a cell shrink to one character, so the table
   squeezed these columns at 300 to 422 px and 642 to 670 px. The table still fits from 304 px. */
#packTableHome td.r,#packTableHome .rolls,#packTableHome td.col-len{white-space:nowrap;overflow-wrap:normal}
/* Contact table on phones: each label above its value, so the email address and the pickup
   sentence get the full width (two columns broke "contact@nexuswh." + "com" below 357 px). */
@media(max-width:480px){
  #contact .manifest.kv td{display:block;width:auto}
  #contact .manifest.kv td:first-child{padding-bottom:0}
  #contact .manifest.kv tr td:first-child{border-bottom:0}
  #contact .manifest.kv td+td{border-left:0;padding-top:4px}
}
/* Contact table links: v2's .tap pads the link 12 px above and below (a 44 px tap area), and the
   focus ring follows that padded box, so it ran through the label or the address line above.
   Here the link box hugs its text (the ring sits 2 px out, as on every other inline link) and an
   empty ::after, part of the link, keeps the 44 px tap area. */
#contact .tap{padding-block:0;margin-block:0;position:relative}
#contact .tap::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
/* "Open in a map" sits 6 px below the address, so its ring clears the "United States" line too. */
#contact .addr+.tap{margin-top:6px}
/* Buy box below 360 px: "Ships in Box B + Box A (two parcels)" (5 to 8 rolls) wraps to a second
   line, which moved the pills and the Buy button 18 px down right after a tap (the next pill slid
   under the finger; v2 does the same). The second line is kept for every pack, so nothing moves. */
@media(max-width:359px){.buy .fieldlabel{min-height:calc(2 * 1.4em)}}
/* photo focal points (build.py, from data/images.json) */
.photo[data-slot="home.band.pallet"] img{--pos:36.0% 49.9%}
.photo[data-slot="home.featured"] img{--pos:51.5% 46.5%}
.photo[data-slot="home.hero"] img{--pos:50.7% 50.4%;--pos-m:50.7% 50.0%}
.photo[data-slot="home.uses.bundling"] img{--pos:50.0% 42.7%}
.photo[data-slot="home.uses.moving"] img{--pos:30.0% 40.0%}
.photo[data-slot="home.uses.pallet"] img{--pos:39.0% 40.0%}
.photo[data-slot="home.uses.storage"] img{--pos:35.0% 45.4%}