/* =====================================================================
   DMT DESIGN SYSTEM — dmt-system.css  (v1)
   Source of truth: extracted from dmt-home.html (Sept 2026).
   Shared by every commerce page (shop, product, checkout, account…).
   dmt-home.html keeps its own inline copy and is NOT affected by this file.

   Structure
     1. Tokens        — color, type, borders, spacing, motion
     2. Base          — reset, type, layout primitives
     3. Chrome        — announce bar, header/nav, mobile menu, footer
     4. Core parts    — buttons, eyebrow, section-head, tags, badges
     5. Commerce      — product card, funding meter, swatches, size picker,
                        cart drawer, modal, accordion, forms, steps, tables
     6. Responsive
   Migration note: section 1 maps 1:1 to a Tailwind theme / CSS vars in the
   Replit build; section 5 maps to React components of the same names.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Neutrals */
  --black:#0a0a0a; --ink:#111111;
  --grey-900:#1a1a1a; --grey-700:#4d4d4d; --grey-500:#6b6b6b; /* was #8c8c8c — darkened for 5:1 text contrast */
  --grey-300:#c7c7c7; --grey-100:#e9e9e9; --grey-050:#f5f5f4;
  --white:#ffffff;
  /* Brand accents (pixel-sampled from the wave background) */
  --m-red:#f94e20; --m-teal:#00749d; --m-yellow:#fbb70b; --m-blue:#0a4166;
  --m-deep:#004056;            /* deep teal panel used in hero slides */
  --m-grey:#a1b5ce;
  --accent:var(--m-red); --accent-light:var(--m-yellow);
  --header-bg:#F3F4F4;         /* footer / light panels */
  /* Semantic */
  --ok:#1f7a3a; --warn:var(--m-yellow); --danger:#c0341d;
  /* Type */
  --sans:'Archivo', Helvetica, Arial, sans-serif;   /* 900 uppercase display */
  --mono:'JetBrains Mono','Courier New',monospace;  /* 700 uppercase labels */
  --fs-label:10px; --fs-meta:11px; --fs-small:12px; --fs-body:16px;
  --fs-h3:19px; --fs-h2:clamp(30px,4vw,52px); --fs-h1:clamp(34px,4.6vw,64px);
  /* Borders — the core DMT gesture: hard black rules, no radius */
  --border-w:3px; --border-w-lg:6px; --border-thin:1.5px; --radius:0;
  /* Layout + spacing (8pt) */
  --maxw:1320px; --gutter:32px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:.15s; --t-med:.35s;
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{font-family:var(--sans); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100vw;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
h1,h2,h3{font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.95;}
.mono{font-family:var(--mono);}
[hidden]{display:none !important;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:3px solid var(--m-yellow); outline-offset:2px;}

/* ---------- 3. CHROME ---------- */
.announce{background-color:var(--m-teal); background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)); color:var(--white); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:9px 16px; border-bottom:1px solid var(--grey-700);}
.announce b{color:var(--m-red); font-weight:700;}

header.site{position:sticky; top:0; z-index:50; background-color:var(--m-teal); border-bottom:var(--border-w-lg) solid var(--m-teal);}
.nav-row{display:flex; align-items:stretch; justify-content:space-between; padding:0 32px; max-width:var(--maxw); margin:0 auto; gap:6px; height:76px; min-height:76px;}
.nav-row > .nav-logo{align-self:stretch; display:flex; align-items:stretch; padding:8px 0; flex-shrink:1; min-width:0; overflow:hidden;}
.nav-logo img{height:100%; width:auto; object-fit:contain; display:block; flex-shrink:0;}
.main-nav{display:flex; align-items:stretch; gap:6px;}
.main-nav a{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; display:flex; align-items:center; padding:0 22px; background:var(--white); color:var(--black); border:1px solid var(--black); transition:background var(--t-fast) ease, color var(--t-fast) ease;}
.main-nav a:hover,.main-nav a[aria-current="page"]{background:var(--black); color:var(--white);}
.nav-right{display:flex; align-items:stretch; gap:6px;}
.icon-btn{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:0 18px; display:flex; align-items:center; gap:8px; background:var(--m-yellow); color:var(--black); border:none; cursor:pointer; transition:background var(--t-fast) ease, color var(--t-fast) ease;}
.icon-btn:hover{background:var(--black); color:var(--m-red);}
.cart-count{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; background:var(--m-red); color:var(--white); font-size:10px;}
.cart-count[data-count="0"]{background:var(--grey-300); color:var(--black);}
.cart-btn.bump{animation:cartBump .5s var(--ease-out);}
@keyframes cartBump{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}

.audio-toggle{width:auto; aspect-ratio:1; align-self:stretch; flex-shrink:0; display:flex; align-items:center; justify-content:center; background-color:#F94E20; background-image:url('https://designmotiontexture.com/wp-content/uploads/2026/09/Guavana-Circle-scaled.png'); background-size:calc(100% - 10px) calc(100% - 10px); background-position:center; background-repeat:no-repeat; color:var(--white); cursor:pointer; padding:0; border:none; -webkit-tap-highlight-color:transparent;}
.audio-icon-play{width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid currentColor; margin-left:2px;}
.audio-toggle[aria-pressed="true"] .audio-icon-play{display:none;}
.audio-toggle.is-loading .audio-icon-play{animation:audioLoadPulse 1s ease-in-out infinite;}
.audio-toggle.resume-hint{animation:audioLoadPulse 1.2s ease-in-out infinite;} /* browser blocked auto-resume: tap to continue */
@keyframes audioLoadPulse{0%,100%{opacity:1}50%{opacity:.3}}
.audio-eq{display:none; align-items:flex-end; gap:3px; height:14px;}
.audio-toggle[aria-pressed="true"] .audio-eq{display:flex;}
.audio-eq span{width:3px; background:currentColor; height:4px; animation:eqBounce .9s ease-in-out infinite;}
.audio-eq span:nth-child(2){animation-delay:.15s;} .audio-eq span:nth-child(3){animation-delay:.3s;}
@keyframes eqBounce{0%,100%{height:4px}50%{height:14px}}

.menu-toggle{display:none; width:76px; flex-shrink:0; align-self:stretch; background:var(--m-teal); color:var(--white); align-items:center; justify-content:center; padding:0; border:none; cursor:pointer; margin-right:-32px; -webkit-tap-highlight-color:transparent;}
.menu-toggle .bars{position:relative; width:22px; height:16px;}
.menu-toggle .bars span{position:absolute; left:0; width:100%; height:2px; background:currentColor; transition:transform .25s var(--ease-out), opacity .2s ease, top .25s var(--ease-out);}
.menu-toggle .bars span:nth-child(1){top:0} .menu-toggle .bars span:nth-child(2){top:7px} .menu-toggle .bars span:nth-child(3){top:14px}
.menu-toggle[aria-expanded="true"]{background:var(--m-yellow); color:var(--black);}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1){top:7px; transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3){top:7px; transform:rotate(-45deg);}

/* Scrim + slide panels (mobile menu AND cart drawer share this pattern) */
.scrim{position:fixed; inset:0; z-index:90; background:rgba(10,10,10,.55); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;}
.scrim.is-open{opacity:1; visibility:visible; transition:opacity .3s ease;}
body.no-scroll{overflow:hidden;}
.panel{position:fixed; top:0; right:0; bottom:0; z-index:91; width:min(86vw,420px); background:var(--white); border-left:var(--border-w-lg) solid var(--black); transform:translateX(100%); transition:transform var(--t-med) var(--ease-out); display:flex; flex-direction:column; overflow-y:auto;}
.panel.is-open{transform:translateX(0);}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:var(--border-w) solid var(--black);}
.panel-label{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.x-btn{width:40px; height:40px; border:var(--border-w) solid var(--black); background:var(--white); color:var(--black); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; font-family:var(--mono); font-size:18px; line-height:1;}
.x-btn:hover{background:var(--m-yellow);}
.mm-links{display:flex; flex-direction:column;}
.mm-link{font-family:var(--mono); font-size:17px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--black); padding:22px 20px; border:var(--border-w) solid var(--black); border-top:none; transition:background var(--t-fast) ease, color var(--t-fast) ease, padding-left var(--t-fast) ease;}
/* Menu color rule: white = page link · black + red edge = current page · red button = cart (only when it has items) · yellow = sign-up action */
.mm-link{background:var(--white);}
.mm-link:first-child{border-top:var(--border-w) solid var(--black);}
.mm-cart-n{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 6px; background:var(--white); color:var(--m-red); font-weight:700;}
.mm-link[aria-current="page"]{background:var(--black); color:var(--white); box-shadow:inset 6px 0 0 var(--m-red);}
.mm-link.mm-highlight{background:var(--m-yellow); color:#0a0a0a;}
.mm-link:hover{background:var(--black); color:var(--white); padding-left:26px;}
.mm-cta-wrap{padding:20px 20px 4px;}

footer.site{background:var(--header-bg); border-top:var(--border-w) solid var(--black); padding:72px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px;}
.footer-col h4{font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; color:var(--grey-700);}
.footer-col a{display:block; font-size:14px; padding:6px 0; color:var(--ink);}
.footer-col a:hover{text-decoration:underline;}
.footer-bottom{border-top:1px solid var(--grey-300); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:11px; color:var(--grey-700); text-transform:uppercase; letter-spacing:.04em;}

/* ---------- 4. CORE PARTS ---------- */
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-700);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:16px 28px; border:var(--border-w) solid var(--black); background:var(--black); color:var(--white); cursor:pointer; transition:background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;}
.btn:hover{background:var(--white); color:var(--black);}
.btn.outline{background:var(--white); color:var(--black);}
.btn.outline:hover{background:var(--black); color:var(--white);}
.btn.accent{background:var(--m-red); border-color:var(--black); color:var(--white);}
.btn.accent:hover{background:var(--black); color:var(--m-red);}
.btn.small{padding:11px 18px; font-size:11px;}
.btn.block{width:100%;}
.btn[disabled]{opacity:.4; cursor:not-allowed;}
.link{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; background:none; border:none; cursor:pointer; padding:0;}
.link:hover{color:var(--m-red);}

.section{padding:96px 0;} .section.tight{padding:64px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:24px; flex-wrap:wrap; border-bottom:var(--border-w) solid var(--black); padding-bottom:24px;}
.section-head h1,.section-head h2{font-size:var(--fs-h2);}
.section-head .eyebrow{margin-bottom:10px;}
.section-head .desc{font-family:var(--mono); font-size:12px; color:var(--grey-700); max-width:340px; text-transform:uppercase; letter-spacing:.03em; line-height:1.6;}

.tag{display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; background:var(--m-red); color:#fff;}
.tag.teal{background:var(--m-teal);} .tag.yellow{background:var(--m-yellow); color:#0a0a0a;} .tag.black{background:var(--black);} .tag.ok{background:var(--ok);}
.save-badge{display:inline-block; font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; background:var(--m-red); color:#fff; padding:3px 8px;}

/* Drop status strip (from home .drop-strip) */
.drop-strip{border:var(--border-w) solid var(--black); background:var(--grey-050); display:grid; grid-template-columns:repeat(4,1fr);}
.drop-cell{padding:20px 22px; border-right:1px solid var(--grey-300); font-family:var(--mono);}
.drop-cell:last-child{border-right:none;}
.drop-cell .k{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-700); margin-bottom:6px;}
.drop-cell .v{font-size:15px; font-weight:700; text-transform:uppercase;}
.drop-cell .v.live::before{content:""; display:inline-block; width:8px; height:8px; background:var(--m-red); margin-right:8px; vertical-align:1px; animation:audioLoadPulse 1.6s ease-in-out infinite;}

/* How-it-works + note band (from home) */
.hiw-grid{display:grid; grid-template-columns:repeat(3,1fr); border:var(--border-w) solid var(--black);}
.hiw-step{padding:32px 28px; border-right:var(--border-w) solid var(--black);}
.hiw-step:last-child{border-right:none;}
.hiw-num{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--grey-500); letter-spacing:.08em; margin-bottom:14px;}
.hiw-step h3{font-size:19px; margin-bottom:10px;}
.hiw-step p{font-family:var(--mono); font-size:12px; color:var(--grey-700); line-height:1.7;}
.note-band{background:var(--black); color:var(--white); padding:56px 0;}
.note-band .wrap{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.note-band h3{color:var(--white); font-size:clamp(22px,3vw,32px); max-width:560px;}
.note-band p{font-family:var(--mono); font-size:12px; color:var(--grey-300); max-width:420px; line-height:1.7; text-transform:uppercase; letter-spacing:.02em;}

/* ---------- 5. COMMERCE COMPONENTS ---------- */
/* Filter bar */
.filter-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:32px 0 24px;}
.seg{display:inline-flex; border:var(--border-w) solid var(--black);}
.seg button{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:12px 18px; background:var(--white); border:none; border-right:var(--border-w) solid var(--black); cursor:pointer;}
.seg button:last-child{border-right:none;}
.seg button[aria-pressed="true"]{background:var(--black); color:var(--white);}
.seg button .n{opacity:.6; margin-left:6px;}
.chips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; background:var(--white); border:var(--border-thin) solid var(--black); cursor:pointer;}
.chip[aria-pressed="true"]{background:var(--m-yellow);}

/* Product card (shop grid) */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); border:var(--border-w) solid var(--black);}
.product-card{border-right:var(--border-w) solid var(--black); display:flex; flex-direction:column; background:var(--white);}
.product-grid .product-card:nth-child(4n){border-right:none;}
.pc-media{aspect-ratio:3/4; background:var(--grey-050); border-bottom:var(--border-w) solid var(--black); position:relative; overflow:hidden; display:block;}
.pc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s ease, transform .6s var(--ease-out);}
.pc-media img.alt{opacity:0;}
.product-card:hover .pc-media img.alt{opacity:1;}
.product-card:hover .pc-media img{transform:scale(1.03);}
.pc-media .tag{position:absolute; top:12px; left:12px; z-index:2;}
.pc-media .pc-fit-flag{position:absolute; top:12px; right:12px; left:auto; z-index:2;}
.pc-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.pc-name{font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em;}
.pc-name a:hover{color:var(--m-red);}
.pc-desc{font-family:var(--mono); font-size:11.5px; color:var(--grey-700); line-height:1.6;}
.pc-price{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-family:var(--mono); font-weight:700; font-size:14px; margin-top:auto; padding-top:10px;}
.pc-price .amt{font-size:1.7em;}
.pc-price .was{color:var(--grey-500); font-weight:400; font-size:.8em; text-decoration:line-through; width:100%;}
.pc-cta{width:100%;}

/* Swatches */
.swatches{display:flex; gap:7px; align-items:center; flex-wrap:wrap;}
.swatch{width:22px; height:22px; border:var(--border-thin) solid var(--black); padding:0; cursor:pointer;}
.swatch[aria-pressed="true"]{outline:2px solid var(--black); outline-offset:2px;}
.swatches.lg .swatch{width:34px; height:34px;}
.opt-label{font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--grey-700);}
.opt-label b{color:var(--black);}

/* Funding meter — the Gustin mechanic */
.meter{width:100%; height:8px; background:var(--grey-100); border:1px solid var(--black); overflow:hidden;}
.meter > span{display:block; height:100%; background:var(--m-red); width:0; transition:width 1.1s var(--ease-out);}
.meter.lg{height:14px; border-width:var(--border-thin);}
.meter.funded > span{background:var(--ok);}
.meter-row{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-700); margin-top:6px;}
.meter-row b{color:var(--black);}
.ship-est{font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-500);}

/* Fit + size picker */
.fit-toggle{display:inline-flex; align-self:flex-start; border:var(--border-thin) solid var(--black);}
.fit-toggle button{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:9px 16px; background:var(--white); border:none; cursor:pointer;}
.fit-toggle button + button{border-left:var(--border-thin) solid var(--black);}
.fit-toggle button[aria-pressed="true"]{background:var(--black); color:var(--white);}
.size-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px;}
.size-btn{font-family:var(--mono); font-size:12px; font-weight:700; padding:12px 6px; background:var(--white); border:var(--border-thin) solid var(--black); cursor:pointer; text-align:center;}
.size-btn:hover{background:var(--grey-050);}
.size-btn[aria-pressed="true"]{background:var(--black); color:var(--white);}
.size-btn .sub{display:block; font-size:9px; font-weight:400; opacity:.7; margin-top:2px;}

/* Qty stepper */
.qty{display:inline-flex; border:var(--border-thin) solid var(--black); align-items:stretch;}
.qty button{width:34px; background:var(--white); border:none; cursor:pointer; font-family:var(--mono); font-weight:700; font-size:14px;}
.qty button:hover{background:var(--m-yellow);}
.qty span{min-width:30px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px; border-left:var(--border-thin) solid var(--black); border-right:var(--border-thin) solid var(--black);}

/* Charge-later notice */
.notice{border:var(--border-w) solid var(--black); background:var(--grey-050); padding:14px 16px; font-family:var(--mono); font-size:11.5px; line-height:1.6; display:flex; gap:12px; align-items:flex-start;}
.notice .ico{flex-shrink:0; min-width:22px; height:22px; padding:0 4px; background:var(--m-yellow); border:var(--border-thin) solid var(--black); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}
.notice b{text-transform:uppercase; letter-spacing:.04em;}
.notice.teal{background:var(--m-teal); color:#fff;}

/* Accordion */
.acc{border-top:var(--border-w) solid var(--black);}
.acc details{border-bottom:var(--border-thin) solid var(--black);}
.acc summary{list-style:none; cursor:pointer; padding:16px 0; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; display:flex; justify-content:space-between; align-items:center;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+"; font-size:18px;}
.acc details[open] summary::after{content:"–";}
.acc .acc-body{padding:0 0 18px; font-size:14.5px; line-height:1.7; color:var(--grey-900);}
.acc .acc-body ul{padding-left:18px;}
.spec-rows{font-family:var(--mono); font-size:12px; text-transform:uppercase; display:flex; flex-direction:column; gap:6px;}
.spec-rows .row{display:flex; gap:14px;}
.spec-rows .lab{width:110px; flex-shrink:0; font-weight:700;}

/* Modal (size guide etc.) */
.modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;}
.modal.is-open{opacity:1; visibility:visible; transition:opacity .25s ease;}
.modal-bg{position:absolute; inset:0; background:rgba(10,10,10,.7);}
.modal-box{position:relative; z-index:2; background:var(--white); border:var(--border-w-lg) solid var(--black); width:min(760px,100%); max-height:88vh; overflow:auto;}
.modal-box .panel-head{position:sticky; top:0; background:var(--white); z-index:2;}
.modal-body{padding:24px;}

/* Tables */
.tbl{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px;}
.tbl th,.tbl td{border:var(--border-thin) solid var(--black); padding:10px 12px; text-align:center;}
.tbl th{background:var(--black); color:var(--white); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;}
.tbl td:first-child{font-weight:700; background:var(--grey-050);}
.tbl-scroll{overflow-x:auto;}

/* Cart drawer lines */
.cart-lines{flex:1; overflow-y:auto;}
.cart-line{display:grid; grid-template-columns:78px 1fr auto; gap:14px; padding:16px 20px; border-bottom:var(--border-thin) solid var(--grey-300);}
.cart-line img{width:78px; height:100px; object-fit:cover; border:var(--border-thin) solid var(--black);}
.cl-name{font-weight:900; text-transform:uppercase; font-size:14px; line-height:1.1;}
.cl-meta{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; color:var(--grey-700); margin:6px 0 10px; line-height:1.5;}
.cl-price{font-family:var(--mono); font-weight:700; font-size:13px; text-align:right;}
.cl-remove{margin-top:8px; display:block;}
.cart-empty{padding:40px 20px; text-align:center; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-700); display:flex; flex-direction:column; gap:18px; align-items:center;}
.cart-foot{border-top:var(--border-w) solid var(--black); padding:18px 20px 22px; display:flex; flex-direction:column; gap:12px; background:var(--white);}
.sum-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
.sum-row.big{font-size:15px; font-weight:700;}
.sum-row.due{background:var(--m-yellow); padding:10px 12px; border:var(--border-thin) solid var(--black); font-weight:700;}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
.field input,.field select{font-family:var(--mono); font-size:14px; padding:14px 14px; border:var(--border-thin) solid var(--black); background:var(--white); border-radius:0; outline:none; width:100%;}
.field input:focus,.field select:focus{border-color:var(--m-teal); box-shadow:inset 0 0 0 2px var(--m-teal);}
.field input.invalid{border-color:var(--danger); box-shadow:inset 0 0 0 2px var(--danger);}
.field .hint{font-family:var(--mono); font-size:10.5px; color:var(--grey-700);}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.fgrid .full{grid-column:1/-1;}
.check{display:flex; gap:10px; align-items:flex-start; font-family:var(--mono); font-size:11.5px; line-height:1.5; cursor:pointer;}
.check input{width:18px; height:18px; accent-color:var(--black); flex-shrink:0; margin-top:1px;}

/* Step blocks (checkout) */
.step{border:var(--border-w) solid var(--black); margin-bottom:20px; background:var(--white);}
.step-head{display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:var(--border-w) solid var(--black); background:var(--grey-050);}
.step-num{width:30px; height:30px; background:var(--black); color:var(--white); font-family:var(--mono); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center;}
.step-head h3{font-size:17px;}
.step-body{padding:20px;}
.mock-card{border:var(--border-thin) dashed var(--black); padding:14px; font-family:var(--mono); font-size:13px; display:flex; justify-content:space-between; align-items:center; background:var(--grey-050); gap:12px; flex-wrap:wrap;}
.mock-card .brand{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--m-blue); color:#fff; padding:4px 8px;}

/* Status timeline (confirmation / account) */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); border:var(--border-w) solid var(--black);}
.tl-step{padding:18px 16px; border-right:var(--border-w) solid var(--black); font-family:var(--mono); position:relative;}
.tl-step:last-child{border-right:none;}
.tl-step .k{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-500); margin-bottom:6px;}
.tl-step .v{font-size:13px; font-weight:700; text-transform:uppercase;}
.tl-step .d{font-size:10.5px; color:var(--grey-700); margin-top:6px; line-height:1.5;}
.tl-step.done{background:var(--m-yellow);}
.tl-step.done .k{color:var(--black);}

/* Toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,calc(100% + 60px)); visibility:hidden; z-index:130; background:var(--black); color:var(--white); border:var(--border-w) solid var(--m-yellow); padding:14px 20px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:transform .35s var(--ease-out), visibility 0s linear .35s;}
.toast.show{transform:translate(-50%,0); visibility:visible; transition:transform .35s var(--ease-out);}

/* Page head + breadcrumb */
.page-head{padding:56px 0 0;}
.page-head h1{font-size:var(--fs-h1); margin-top:10px;}
.crumbs{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--grey-700); padding:20px 0; display:flex; gap:8px; flex-wrap:wrap;}
.crumbs a:hover{color:var(--m-red); text-decoration:underline;}

/* ---------- 5b. RUNS + ORDERS (v2) ---------- */
.run-prev{display:flex; gap:8px; align-items:flex-start; margin-top:8px; font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ok); line-height:1.5;}
.run-prev .ck{flex-shrink:0; width:16px; height:16px; background:var(--ok); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px;}
.you-box{border-left:6px solid var(--m-red); background:var(--grey-050); padding:10px 12px; font-family:var(--mono); font-size:11.5px; line-height:1.6; margin-top:12px;}
.you-box b{text-transform:uppercase; letter-spacing:.03em;}
.cl-run{font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--m-teal); margin:-4px 0 10px; line-height:1.45;}
.cl-run.locks{color:var(--ok);}
.tl-mini{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:12px 0 8px;}
.tl-seg span{display:block; height:8px; background:var(--grey-100); border:1px solid var(--black);}
.tl-seg.on span{background:var(--m-yellow);}
.tl-seg.now span{background:var(--m-red);}
.tl-seg em{display:block; font-style:normal; font-family:var(--mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--grey-500); margin-top:5px; line-height:1.3;}
.tl-seg.on em{color:var(--black);}
.oline{display:grid; grid-template-columns:78px 1fr; gap:16px; padding:18px 0; border-bottom:var(--border-thin) solid var(--grey-300);}
.oline:last-child{border-bottom:none;}
.oline > img{width:78px; height:100px; object-fit:cover; border:var(--border-thin) solid var(--black);}
.oline-top{display:flex; justify-content:space-between; gap:12px;}
.oline-top .cl-meta{margin-bottom:0;}
.oline-status{font-family:var(--mono); font-size:11.5px; line-height:1.6;}
.oline-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px;}
.oline-actions select{font-family:var(--mono); font-size:12px; font-weight:700; padding:8px 10px; border:var(--border-thin) solid var(--black); background:var(--white); border-radius:0; margin-left:6px;}
.order{border:var(--border-w) solid var(--black); margin-bottom:20px; background:var(--white);}
.order.cancelled{opacity:.55;}
.order-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 20px; background:var(--grey-050); border-bottom:var(--border-w) solid var(--black);}
.order .order-lines{padding:0 20px;}
.demo-step{display:flex; align-items:center; gap:10px;}
.seg.small{border-width:var(--border-thin);}
.seg.small button{padding:7px 11px; font-size:10.5px; border-right-width:var(--border-thin);}
.tag.teal{background:var(--m-teal);}
/* Fit guide */
.fit-result{border:var(--border-w) solid var(--black); padding:18px; background:var(--white); margin-top:18px;}
.fr-head{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.fr-grid{display:grid; grid-template-columns:repeat(4,1fr); border:var(--border-thin) solid var(--black);}
.fr-grid a{padding:14px; border-right:var(--border-thin) solid var(--black); display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.fr-grid a:last-child{border-right:none;}
.fr-grid a b{font-family:var(--sans); font-size:28px; font-weight:900;}
.fr-grid a:hover{background:var(--m-yellow);}
/* Run dots (how it works) */
.dots{display:grid; grid-template-columns:repeat(17,1fr); gap:6px; max-width:620px;}
.dots i{aspect-ratio:1; border:var(--border-thin) solid var(--black); background:var(--white);}
.dots i.on{background:var(--m-teal);}
.dots i.you{background:var(--m-red); animation:audioLoadPulse 1.4s ease-in-out infinite;}
.dots i.next{background:var(--m-yellow); outline:3px solid var(--black); outline-offset:2px;}
.you-k,.next-k{display:inline-block; width:12px; height:12px; border:1.5px solid var(--black); vertical-align:-1px;}
.you-k{background:var(--m-red);} .next-k{background:var(--m-yellow);}
@media (max-width:980px){
  .fr-grid{grid-template-columns:1fr 1fr;}
  .fr-grid a:nth-child(2){border-right:none;}
  .fr-grid a:nth-child(-n+2){border-bottom:var(--border-thin) solid var(--black);}
  .tl-seg em{font-size:8px;}
  .acct-only-desk{display:none !important;}
}
@media (max-width:560px){ .dots{grid-template-columns:repeat(10,1fr);} .tl-seg em{display:none;} }

/* ---------- 5c. QUICK-ADD CARD ---------- */
.err{font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--danger);}
.pc-qa{display:flex; flex-direction:column; gap:8px;}
.fit-toggle.sm button{padding:6px 12px; font-size:10px;}
.pc-sizes-grid{display:flex; flex-wrap:wrap; gap:6px;}
.pc-sizes-grid .size-btn{flex:1 0 44px; max-width:72px; padding:8px 0; font-size:11px;}
.pc-sg{align-self:flex-start; font-size:10.5px;}
.pc-details{align-self:flex-start; font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; text-decoration:underline; text-underline-offset:3px;}
.pc-details:hover{color:var(--m-red);}
@media (max-width:980px){
  .pc-sizes-grid .size-btn{min-height:44px;}
  .fit-toggle.sm button{min-height:40px; padding:0 16px;}
  .swatches .swatch{width:32px; height:32px;}
  .pc-cta{min-height:48px;}
  .pc-details{padding:8px 0;}
}

/* ---------- 5d. JEANS LENGTH + CUSTOM HEM ---------- */
.pc-hint{font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--m-teal); line-height:1.5;}
.size-grid.waist{grid-template-columns:repeat(4,1fr);}
.len-opts{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.len-btn{display:flex; flex-direction:column; gap:4px; text-align:left; padding:12px 14px; background:var(--white); border:var(--border-thin) solid var(--black); cursor:pointer; font-family:var(--mono);}
.len-btn b{font-size:12px; text-transform:uppercase; letter-spacing:.05em;}
.len-btn span{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-700);}
.len-btn[aria-pressed="true"]{background:var(--black); color:var(--white);}
.len-btn[aria-pressed="true"] span{color:var(--grey-300);}
.len-note{font-family:var(--mono); font-size:11px; line-height:1.65; background:var(--grey-050); border-left:6px solid var(--m-teal); padding:10px 12px;}
.len-note b{text-transform:uppercase; letter-spacing:.03em;}
.cl-hem{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:-2px 0 10px; cursor:pointer;}
.cl-hem input{width:16px; height:16px; accent-color:var(--black);}
.cl-hem span{flex-basis:100%; font-weight:400; color:var(--grey-700); font-size:9.5px; padding-left:24px;}
.ins-input{width:84px; font-family:var(--mono); font-size:12px; font-weight:700; padding:8px; border:var(--border-thin) solid var(--black); margin-left:6px; border-radius:0;}
@media (max-width:980px){ .len-btn{min-height:56px;} }

/* ---------- 6. RESPONSIVE ---------- */
@media (min-width:981px){
  .audio-toggle{border:3px solid var(--white); border-radius:50%; background-color:transparent; background-size:100% 100%;}
  .icon-btn{background:var(--white); color:var(--black); border:1px solid var(--black);}
  .icon-btn:hover{background:var(--m-red); color:var(--white);}
  .main-nav a,.audio-toggle,.icon-btn{margin:8px 0;}
  header.site{border-bottom:3px solid var(--black);}
}
@media (max-width:980px){
  :root{--gutter:20px;}
  .announce{font-size:10px;} .announce-extra{display:none;}
  header.site{border-bottom:5px solid var(--m-teal);}
  .main-nav{display:none;}
  .menu-toggle{display:flex; aspect-ratio:1; width:auto; margin-right:-16px; background:rgba(0,64,86,.78);}
  .nav-row{padding:0 16px;}
  .audio-toggle{background:rgba(0,64,86,.78); background-image:none;}
  .nav-right{flex-shrink:0; gap:0;}
  .icon-btn{padding:0 16px; font-size:10px; gap:6px; white-space:nowrap; background:rgba(255,255,255,.8);}
  .product-grid{grid-template-columns:repeat(2,1fr); gap:20px; border:none;}
  .product-card{border:var(--border-w) solid var(--black) !important;}
  .drop-strip{grid-template-columns:repeat(2,1fr);}
  .drop-cell:nth-child(2){border-right:none;}
  .drop-cell:nth-child(-n+2){border-bottom:1px solid var(--grey-300);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hiw-grid{grid-template-columns:1fr; border:none;}
  .hiw-step{border-right:none; border-bottom:var(--border-w) solid var(--black); padding:28px 4px;}
  .hiw-step:last-child{border-bottom:none;}
  .section{padding:64px 0;}
  .timeline{grid-template-columns:1fr 1fr;}
  .tl-step:nth-child(2){border-right:none;}
  .tl-step:nth-child(-n+2){border-bottom:var(--border-w) solid var(--black);}
}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr;}
  .drop-strip{grid-template-columns:1fr;}
  .drop-cell{border-right:none !important; border-bottom:1px solid var(--grey-300);}
  .fgrid{grid-template-columns:1fr;}
  .filter-bar{flex-direction:column; align-items:stretch;}
  .seg{display:flex;} .seg button{flex:1;}
}
@media (max-width:400px){
  .nav-row{padding:0 12px; gap:4px;}
  .audio-toggle{width:38px;}
  .icon-btn{padding:0 10px; font-size:9px; letter-spacing:.02em;}
  .menu-toggle{margin-right:-12px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} }
.icon-btn[aria-current="page"]{background:var(--black) !important; color:var(--white) !important;}

/* ---- Direct-price note (replaces compare-at pricing) ---- */
.pc-direct{display:block; width:100%; font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-700); margin-top:4px;}
.notify-done{display:flex; flex-direction:column; gap:6px; max-width:480px; margin:0 auto; padding:18px 20px; background:rgba(0,0,0,.4); font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.03em; line-height:1.6; text-align:center; outline:none;}
.notify-done b{font-weight:700; font-size:14px;}
/* ---- Legal pages ---- */
.legal{max-width:780px; padding:8px 0 96px;}
.legal-head{border-bottom:var(--border-w) solid var(--black); padding-bottom:20px; margin-bottom:28px;}
.legal-head h1{font-size:var(--fs-h2); margin-top:10px;}
.legal-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.legal-nav a{font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:8px 12px; border:var(--border-thin) solid var(--black);}
.legal-nav a[aria-current=page]{background:var(--black); color:var(--white);}
.legal-lede{font-size:18px; line-height:1.6; margin-bottom:8px;}
.legal h2{font-size:22px; margin:32px 0 10px;}
.legal p,.legal li{font-size:15.5px; line-height:1.7; color:var(--ink);}
.legal ul{padding-left:20px; display:flex; flex-direction:column; gap:8px;}
.legal a{text-decoration:underline; text-underline-offset:3px;}
.legal-nav a{text-decoration:none;}
.legal-grid{display:grid; grid-template-columns:repeat(3,1fr); border:var(--border-w) solid var(--black); margin:24px 0 8px;}
.legal-grid > div{padding:16px; border-right:var(--border-w) solid var(--black); display:flex; flex-direction:column; gap:4px; font-family:var(--mono);}
.legal-grid > div:last-child{border-right:none; background:var(--m-yellow);}
.legal-grid b{font-family:var(--sans); font-weight:900; font-size:26px; text-transform:uppercase;}
.legal-grid span{font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
@media (max-width:640px){ .legal-grid{grid-template-columns:1fr;} .legal-grid > div{border-right:none; border-bottom:var(--border-w) solid var(--black);} .legal-grid > div:last-child{border-bottom:none;} }
.footer-legal{display:flex; gap:16px; flex-wrap:wrap;}
.footer-legal a{text-decoration:underline; text-underline-offset:3px;}

/* ---------- In stock ---------- */
.size-btn[disabled]{opacity:.32; cursor:not-allowed; text-decoration:line-through; background:var(--white); color:var(--black);}
.size-btn[disabled]:hover{background:var(--white);}
.cl-run.stock{color:var(--ok);}
.stock-left{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ok); margin-top:4px;}
.product-card.in-stock .pc-media::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 3px var(--ok); pointer-events:none;}
#pBuy .len-btn span{text-transform:none; letter-spacing:.02em;}