/* H&R Print and Embroidery Services. Option C "Full Tilt": one stylesheet for every page.
   Heavy italic capitals, one rising angle (4.5 degrees), flat full-strength colour. Every corner is square. */
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-latin-italic.woff2") format("woff2");font-weight:500 900;font-style:italic;font-display:swap}
:root{
  --night:#021612;--paper:#F4F2EA;--ink:#06201A;--ink-soft:rgba(6,32,26,.76);--muted:rgba(244,242,234,.84);
  --gold:#D9B074;--gold-deep:#CFA462;--white:#FFFFFF;--danger:#9A2B1B;
  --base:#021612;--accent:#D9B074;--plate:#F5EDDD;
  --slope:.0787;--rise:calc(100vw * var(--slope));
  --wrap:1180px;--pad:clamp(20px,4vw,52px);--gut:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --focus:#06201A;
}
.theme-workwear{--base:#0B4128;--accent:#B7E803;--plate:#EEF3DD}
.theme-office-wear{--base:#1B274A;--accent:#D7A13E;--plate:#F5EDDD}
.theme-gym-wear{--base:#0B0B0A;--accent:#B4E607;--plate:#ECEEE6}
/* ---- TEAM WEAR (concept, 2026-11-11): final tokens, designs/teamwear-concept-2026-11-11/TEAMWEAR-TOKENS.md ---- */
.theme-team-wear{--base:#A80E20;--accent:#8ED1FC;--plate:#F8EAE7}
.theme-team-wear{--label:rgba(244,242,234,.92)}
/* ---- end TEAM WEAR block ---- */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font:400 17px/1.5 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
button{cursor:pointer}
h1,h2,h3,p,figure,dl,dd,fieldset{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.wrap{width:min(var(--wrap),100% - 2*var(--pad));margin-inline:auto}
.display{font-family:Montserrat,Figtree,system-ui,sans-serif;font-style:italic;font-weight:900;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:0;padding:10px 14px;background:var(--gold);color:var(--ink);font-weight:700}
.skip:focus{left:16px;top:16px;z-index:99}

/* ---------- header ---------- */
.header{background:var(--paper);position:relative;z-index:10}
.header .wrap{height:88px;display:flex;align-items:center;gap:30px}
.brand{margin-right:auto;line-height:0}
.brand img{height:64px;width:auto}
.nav{display:flex;gap:30px;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.nav a{padding:14px 0;border-bottom:3px solid transparent;transition:border-color .2s}
.nav a:hover{border-color:var(--gold-deep)}
.nav a[aria-current=page]{border-color:var(--ink)}
.order{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:56px;height:48px;padding:0 14px;border:2px solid rgba(6,32,26,.62);background:transparent;color:var(--ink);font-weight:700;font-size:16px}
.order svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.order.has-items{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.menu{display:none;height:48px;padding:0 14px;border:2px solid rgba(6,32,26,.62);background:transparent;color:var(--ink);font-weight:700;font-size:16px}

/* ---------- buttons: gold sits on dark, ink sits on light ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:2px solid transparent;background:var(--gold);color:var(--ink);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:16px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;text-align:center;transform:skewX(-10deg);transition:transform .25s var(--ease),background .2s}
.btn>span{display:inline-block;transform:skewX(10deg)}
.btn:hover{background:var(--gold-deep);transform:skewX(-10deg) translateX(3px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#0B2E25}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent)}
.btn-line{background:var(--base);color:var(--accent)}
.btn-line:hover{background:var(--base)}
.btn.is-quiet,.btn.is-quiet:hover{background:transparent;border-color:var(--gold);color:var(--paper)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn[aria-busy=true]{opacity:1;cursor:progress}
.header .btn{min-height:48px;padding:0 24px;font-size:14px}
.quiet{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:48px;padding:0;border:0;border-bottom:2px solid var(--gold);background:none;color:var(--paper);font-size:16px;font-weight:700}
.quiet:hover{border-color:var(--paper)}
.link-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:16px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.link-btn:hover{text-decoration-color:var(--gold-deep)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- shared text pieces ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:14px;letter-spacing:.2em;text-transform:uppercase}
.eyebrow::before{content:"";flex:none;width:34px;height:3px;background:var(--accent);transform:skewX(-30deg)}
.lede{margin:0;font-size:20px;line-height:1.45}
.notice{font-size:16px;line-height:1.5;color:var(--ink-soft)}
.notice:empty{display:none}
.error{margin:8px 0 0;font-size:16px;font-weight:600;line-height:1.45;color:var(--danger)}
.error:empty{display:none}
.optional{font-weight:400;color:var(--ink-soft)}

/* ---------- home: the headline is the hero ---------- */
.hero-shell{position:relative}
.hero-shell::before{content:"";position:absolute;inset:0;background:var(--gold);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--rise)),0 100%)}
.hero{--focus:#D9B074;--kit:min(560px,45.5vw);overflow:hidden;position:relative;isolation:isolate;background:var(--night);color:var(--paper);padding:50px 0 228px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--rise) - 7px),0 calc(100% - 7px))}
/* The hero picture is the kit photograph, set on the hero's own colour so it sits straight on the band. The soft top and right edges hide the join on wide screens. */
.hero-photo{position:absolute;z-index:-1;right:calc(max(clamp(20px,4vw,52px),50vw - 590px) - var(--kit)*.06);bottom:156px;width:var(--kit);aspect-ratio:1/1}
.hero-photo img{display:block;width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4.5%,#000 95.5%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 4.5%,#000 95.5%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.hero-photo::before{content:"";position:absolute;z-index:-1;inset:-30%;background:radial-gradient(ellipse 50% 6% at 50% 70%,rgba(3,40,26,.9) 55%,rgba(2,22,18,0) 100%),radial-gradient(closest-side,rgb(0,29,20) 58%,rgba(2,22,18,0) 100%)}
.hero h1{margin:0 0 24px;font-size:min(8.6vw,124px);line-height:.9;letter-spacing:-.035em;white-space:nowrap}
.hero h1 span{color:var(--gold)}
br.m{display:none}
br.t{display:none}
@media (max-width:980px){br.t{display:inline}}
.hero-row{max-width:540px}
.hero .lede{margin-bottom:26px}
.hero-actions{display:flex;align-items:center;gap:26px}

/* the rising row */
.lines{position:relative;z-index:2;margin-top:calc(-207px - var(--rise) + 100px);padding-bottom:calc(64px + var(--rise))}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);align-items:start}
.panel{--base:#0B4128;--accent:#B7E803;--plate:#EEF3DD;--zone:#0B4128;--tag:#F4F2EA;--edge:#B7E803;
  position:relative;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size;border-top:6px solid var(--edge);
  background:var(--plate);color:var(--ink);
  box-shadow:0 34px 54px -34px rgba(6,32,26,.6);transition:transform .3s var(--ease)}
/* colour break: tracks the panel width so it always clears the lockup lettering */
.panel::before{content:"";position:absolute;inset:0;background:linear-gradient(175.5deg,var(--zone) 0,var(--zone) calc(min(68px,22cqw) + 2px + 25.2cqw),var(--plate) calc(min(68px,22cqw) + 2.8px + 25.2cqw))}
.panel.ow{--base:#1B274A;--accent:#D7A13E;--plate:#F5EDDD;--zone:#D7A13E;--tag:#1B274A;--edge:#1B274A}
.panel.gw{--base:#0B0B0A;--accent:#B4E607;--plate:#ECEEE6;--zone:#B4E607;--tag:#0B0B0A;--edge:#0B0B0A}
.panel.tw{--base:#A80E20;--accent:#8ED1FC;--plate:#F8EAE7;--zone:#8ED1FC;--tag:#A80E20;--edge:#A80E20}
.grid .panel.ww{margin-top:calc((100% + var(--gut)) * var(--slope) * 2)}
.grid .panel.ow{margin-top:calc((100% + var(--gut)) * var(--slope))}
a.panel:hover{transform:translateY(-8px)}
.tag{position:absolute;left:20px;top:10px;font-size:min(68px,22cqw);line-height:1;letter-spacing:-.04em;color:var(--tag);transition:transform .4s var(--ease)}
a.panel:hover .tag{transform:translateX(8px)}
.art{position:relative;z-index:1;display:block;margin-top:calc(min(68px,22cqw) + 6px);aspect-ratio:380/282}
.art img{position:absolute;left:26px;top:0;width:calc(100% - 52px);height:calc(100% - 12px);object-fit:contain}
.bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px 16px 22px;background:var(--base);color:var(--paper)}
.bar small{display:block;margin-bottom:3px;font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,242,234,.82)}
.bar strong{display:block;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:22px;line-height:1.1;letter-spacing:-.005em;text-transform:uppercase;color:var(--accent)}
.go{flex:none;display:grid;place-items:center;width:52px;height:44px;background:var(--accent);color:var(--base);transform:skewX(-10deg);transition:transform .3s var(--ease)}
.go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:skewX(10deg)}
a:hover .go{transform:skewX(-10deg) translateX(4px)}

/* closing band (every page); the footer is .foot, in the A16 build block at the end */
.band{background:var(--accent);color:var(--ink)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-block:46px}
.band h2{margin:0;font-size:clamp(30px,3.5vw,44px);line-height:1;letter-spacing:-.025em}
.band p{margin:10px 0 0;font-size:18px;font-weight:600}

/* ---------- inner pages: a slanted band in the page colours, then paper ---------- */
.page-shell{position:relative}
.page-shell::before{content:"";position:absolute;inset:0;background:var(--accent);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--rise)),0 100%)}
.page-band{--focus:#F4F2EA;position:relative;background:var(--base);color:var(--paper);padding:26px 0 calc(var(--rise) * .3 + 32px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--rise) - 7px),0 calc(100% - 7px))}
.page-band h1{margin:6px 0 16px;max-width:18ch;font-size:clamp(40px,5.2vw,70px);line-height:.94;letter-spacing:-.03em}
.page-band h1 span{color:var(--accent)}
.page-band .lede{max-width:44ch;font-size:19px;color:var(--muted)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-bottom:8px;font-size:16px;font-weight:600}
.crumb a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.crumb a:hover{text-decoration-color:var(--accent)}
.crumb span{color:var(--muted)}
.storage-notice{margin:0;padding:16px 0;color:var(--danger);font-weight:600}
.page-notes>*{margin:18px 0 0}

/* range page */
.line-hero{padding-bottom:calc(var(--rise) + 34px)}
.line-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:64px;align-items:center}
.line-hero .crumb{grid-column:1/-1}
.line-hero h1{margin-top:0;font-size:clamp(38px,4.6vw,62px)}
.line-hero .lede{margin-bottom:28px}
.line-hero .btn{margin-left:6px}
.panel-static{width:100%;max-width:420px;justify-self:end}
.panel-static .art{margin-bottom:12px}

.work{padding-top:52px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}
.section-head h2{font-size:clamp(32px,4vw,50px);line-height:.96;letter-spacing:-.03em}
.section-head>p{color:var(--ink-soft);font-size:17px;text-align:right}
.gallery-controls{display:flex;gap:12px;padding-right:6px}
.icon-btn{display:grid;place-items:center;width:54px;height:48px;padding:0;border:2px solid var(--ink);background:transparent;color:var(--ink);transform:skewX(-10deg);transition:background .2s}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:skewX(10deg)}
.icon-btn:hover{background:var(--white)}
.gallery-track{display:flex;gap:var(--gut);overflow-x:auto;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.gallery-track figure{flex:0 0 min(340px,76vw)}
.gallery-track img{width:100%;aspect-ratio:4/5;object-fit:cover;border-bottom:6px solid var(--accent)}
.gallery-track figcaption{margin-top:10px;font-size:16px;line-height:1.4;color:var(--ink-soft)}

.catalogue{padding:56px 0 84px}
.tools{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:22px 0;border-block:2px solid var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;padding-left:6px}
.filter{min-height:48px;padding:0 20px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;transform:skewX(-10deg);transition:background .2s,color .2s}
.filter>span{display:inline-block;transform:skewX(10deg)}
.filter:hover{background:var(--white)}
.filter.active{background:var(--base);border-color:var(--base);color:var(--accent)}
.search{flex:0 0 260px}
.search label{display:block;margin-bottom:6px;font-size:16px;font-weight:700}
.search input{width:100%;min-height:48px;padding:10px 14px;border:2px solid var(--ink);background:var(--white);font-size:17px}
.catalogue-meta{display:flex;justify-content:space-between;gap:18px;padding:16px 0 22px;font-size:16px;color:var(--ink-soft)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--gut)}
.product-card{min-width:0}
.product-card a{display:flex;flex-direction:column;height:100%}
.product-photo{position:relative;aspect-ratio:1/1.12;overflow:hidden;background:var(--white);border-bottom:6px solid var(--base)}
.product-photo img{width:100%;height:100%;padding:16px;object-fit:contain;transition:transform .3s var(--ease)}
.product-card a:hover .product-photo img{transform:scale(1.035)}
.product-photo .go{position:absolute;right:14px;bottom:12px;width:46px;height:38px;background:var(--base);color:var(--accent)}
.photo-code{display:grid;place-items:center;height:100%;padding:24px;font-weight:700;text-align:center}
.product-body{display:flex;flex:1;flex-direction:column;padding:14px 2px 0}
.product-meta{font-size:15px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft)}
.product-card h3{margin:4px 0 14px;font-size:20px;font-weight:700;line-height:1.22;letter-spacing:-.01em}
.product-cta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:auto;padding-top:12px;border-top:2px solid var(--ink);font-size:16px}
.product-cta span:first-child{color:var(--ink-soft)}
.product-cta span:last-child{font-weight:700}
.empty-state{padding:34px 0 0}
.catalogue .empty-state{margin-top:8px;border-top:2px solid var(--ink)}
.empty-state h2,.empty-state h3{margin-bottom:12px;font-size:clamp(30px,4vw,44px);line-height:.98;letter-spacing:-.03em}
.empty-state p{max-width:52ch;margin-bottom:24px;font-size:18px}
.empty-state .actions{padding-left:6px}
.empty-page{padding-bottom:88px}

/* product page */
.product-band{padding-bottom:calc(var(--rise) * .62 + 34px)}
.product-band h1{font-size:clamp(34px,4.2vw,56px)}
.product-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start;padding:40px 0 88px}
.product-visual{min-width:0}
.product-visual img{width:100%;aspect-ratio:1/1.08;padding:28px;object-fit:contain;background:var(--white);border-bottom:6px solid var(--base)}
.product-visual .notice{margin-top:14px}
.product-code-plate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:1/1.08;padding:24px;background:var(--white);border-bottom:6px solid var(--base);text-align:center}
.product-code-plate span{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:44px}
.product-info{min-width:0}
.price-line{margin-bottom:6px;font-size:22px;font-weight:700}
.field{margin:22px 0;min-width:0;padding:0;border:0}
.field label,.field legend{display:block;margin-bottom:8px;padding:0;font-size:17px;font-weight:700}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--ink);background:var(--white);font-size:17px;line-height:1.4}
.field textarea{min-height:120px;resize:vertical}
.field [aria-invalid=true]{border-color:var(--danger)}
/* L66: a refused field takes focus, and its focus ring (3px, 4px out) must not cut through the helper line under it */
.field [aria-invalid=true]:focus-visible+.hint{margin-top:10px}
.field .hint{display:block;margin:-2px 0 10px;font-size:16px;font-weight:400;color:var(--ink-soft)}
.quantity-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.quantity-row label{margin-bottom:6px;font-size:16px;overflow-wrap:anywhere}
.quantity-total{margin-top:14px;font-weight:700;color:var(--ink)}
.product-info .actions{margin-top:26px;padding-left:6px}
.add-status{margin-top:24px;padding:18px 20px;background:var(--white);border-left:6px solid var(--base);font-weight:600}
.add-status a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- order request: steps 3 to 6 ---------- */
.steps{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 20px;padding:0 0 0 6px;list-style:none}
.steps li{display:flex;border:2px solid rgba(244,242,234,.55);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;transform:skewX(-10deg)}
.steps li>*{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;transform:skewX(10deg)}
.steps li[aria-current=step]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.steps li.done{border-color:var(--gold);color:var(--gold)}
.steps svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.request-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start;padding:34px 0 88px}
.request-main{min-width:0}
.request-main>h2{margin-bottom:18px;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.saved-line{margin-bottom:14px}
.request-line{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;padding:22px 0;border-top:2px solid var(--ink)}
.request-line:last-child{border-bottom:2px solid var(--ink)}
.request-line img,.garment-code{width:104px;height:124px;padding:8px;object-fit:contain;background:var(--white)}
.garment-code{display:grid;place-items:center;font-weight:700;text-align:center;overflow-wrap:anywhere}
.line-code{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.request-line h3{margin:2px 0 8px;font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.request-line p{font-size:17px}
.line-controls{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:6px}
.remove-notice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-bottom:18px;padding:8px 18px;background:var(--white);border-left:6px solid var(--ink);font-weight:600}
.summary-card{--focus:#D9B074;position:sticky;top:24px;min-width:0;padding:26px 28px 30px;border-top:6px solid var(--gold);background:var(--night);color:var(--paper)}
.summary-card h2{margin-bottom:14px;font-size:22px;line-height:1.1;letter-spacing:-.01em}
.summary-count{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.summary-count strong{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:64px;line-height:.9;color:var(--gold)}
.summary-count span{font-size:19px;font-weight:600}
.summary-card p{color:var(--muted);font-size:16px}
.summary-card .btn{width:calc(100% - 12px);margin:22px 0 8px 6px}
.summary-rows{margin:6px 0 0}
.summary-card .actions{margin-top:6px}
.summary-card [data-logo-summary]{margin-top:14px}
.summary-rows div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 0;border-top:1px solid rgba(244,242,234,.28)}
.summary-rows div:first-child{border-top:0}
.summary-rows dt{min-width:0;overflow-wrap:anywhere;font-weight:600}
.summary-rows dd{flex:none}
.action-bar{--focus:#D9B074;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px;padding:24px 28px 24px 34px;border-top:6px solid var(--gold);background:var(--night);color:var(--paper)}
.action-bar p{flex-basis:100%;color:var(--muted);font-size:16px}
.upload-zone{padding:30px 24px;border:2px dashed var(--ink);background:var(--white);text-align:center;transition:background .2s}
.upload-zone label{display:block;font-size:20px;font-weight:700}
.upload-zone p{margin:6px 0 16px;color:var(--ink-soft)}
.upload-zone input[type=file]{display:block;width:100%;max-width:440px;min-height:48px;margin:0 auto;font-size:16px}
.upload-zone input::file-selector-button{min-height:48px;margin-right:14px;padding:0 18px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-weight:700;cursor:pointer}
.upload-zone[data-dragging]{border-style:solid;border-color:var(--gold-deep);background:var(--plate)}
.file-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 18px;align-items:center;margin-top:18px;padding:16px 18px;background:var(--white);border-left:6px solid var(--ink)}
.file-thumb{display:grid;place-items:center;grid-row:span 2;width:72px;height:72px;background:var(--paper)}
.file-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.file-thumb svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.file-card strong{display:block;overflow-wrap:anywhere}
.file-card .line-controls{margin:0}
.multi-note{margin-top:12px}
.choice{display:flex;align-items:center;gap:14px;min-height:48px;margin:18px 0 0;font-weight:600}
.choice input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-grid .full{grid-column:1/-1}
.form-grid .field{margin:0 0 20px}
.sent{max-width:680px;padding:34px 0 88px}
.sent-label{font-size:16px;font-weight:700;color:var(--ink-soft)}
.sent-ref{display:block;margin:2px 0 20px;font-size:clamp(34px,8vw,58px);font-weight:800;line-height:1.05;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.sent-copy{max-width:46ch;margin-bottom:28px;font-size:19px;overflow-wrap:anywhere}
.sent-lines{margin:0 0 30px;border-bottom:2px solid var(--ink)}
.sent-lines div{display:flex;justify-content:space-between;gap:8px 24px;padding:14px 0;border-top:2px solid var(--ink)}
.sent-lines dt{min-width:0;font-weight:700;overflow-wrap:anywhere}
.sent-lines dd{flex:none;max-width:45%;color:var(--ink-soft);text-align:right;overflow-wrap:anywhere}
.sent .actions{padding-left:6px}
.tick{display:inline-grid;place-items:center;width:58px;height:48px;margin:0 0 4px;background:var(--gold);color:var(--ink);transform:skewX(-10deg)}
.tick svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:skewX(10deg)}
.sent-band .wrap{display:flex;flex-direction:column;align-items:flex-start}
.sent-band .tick{margin-left:6px;margin-bottom:18px}

/* ---------- sheet (the customiser and "Add a logo" use it) ---------- */
dialog.sheet{width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-top:6px solid var(--gold);background:var(--paper);color:var(--ink);overflow:auto}
dialog.sheet::backdrop{background:rgba(2,22,18,.78)}
.sheet-inner{padding:26px 32px 32px}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.sheet-title{font-size:34px;line-height:1;letter-spacing:-.03em}
.sheet-close{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:2px solid var(--ink);background:none;color:var(--ink)}
.sheet-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sheet .field{margin:16px 0 0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices legend{grid-column:1/-1}
.choices .choice{display:flex;margin:0;padding:0 14px;border:2px solid var(--ink);background:var(--white)}
.choices .choice:has(input:checked){background:var(--plate)}
.sheet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px;padding-left:6px}
.status{margin:0;padding:12px 16px;background:var(--white);border-left:6px solid var(--ink);font-weight:600}

/* ---------- widths ---------- */
@media (min-width:981px){
  .product-visual{position:sticky;top:24px}
}
@media (max-width:980px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px var(--pad) 20px;background:var(--paper);box-shadow:0 18px 24px -12px rgba(2,22,18,.35)}
  .nav.open{display:flex}
  .nav a{padding:14px 0;font-size:18px;border-bottom:1px solid rgba(6,32,26,.12)}
  .nav a[aria-current=page]{border-color:rgba(6,32,26,.12);text-decoration:underline;text-underline-offset:6px}
  .menu{display:block}
  .header .btn{display:none}
  .header .wrap{gap:12px}
  .line-hero .wrap{column-gap:32px}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tools{flex-direction:column;align-items:stretch}
  .search{flex-basis:auto;max-width:360px}
  .product-layout{gap:32px}
  .request-layout{gap:32px}
  .quantity-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:701px) and (max-width:980px){
  .bar{padding:12px 16px 14px}
  .bar strong{font-size:19px}
  .grid .go{display:none}
  .art img{left:12px;width:calc(100% - 24px)}
}
@media (max-width:700px){
  :root{--rise:36px}
  .header .wrap{height:76px}
  .brand img{height:48px}
  .eyebrow{font-size:16px;letter-spacing:.14em}
  .hero{padding:34px 0 104px}
  .hero-photo{position:relative;z-index:0;display:block;right:auto;bottom:auto;width:100%;aspect-ratio:1194/970;margin-top:20px}
  .hero-photo img{object-fit:cover;object-position:50% 51%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}
  .hero-photo::before{content:none}
  .hero h1{font-size:19vw;white-space:normal;margin-bottom:20px}
  br.m{display:inline}
  br.d{display:none}
  .hero-row{display:block}
  .lede{font-size:18px}
  .hero .lede{margin-bottom:22px}
  .hero-actions{flex-wrap:wrap;gap:10px 22px}
  .hero-actions .btn{width:calc(100% - 12px);margin-left:6px}
  .lines{margin-top:-96px;padding-bottom:calc(52px + var(--rise))}
  .grid{grid-template-columns:1fr;gap:18px}
  .grid .panel.ww,.grid .panel.ow{margin-top:0}
  .panel::before{background:linear-gradient(175.5deg,var(--zone) 0,var(--zone) 142px,var(--plate) 142.8px)}
  .tag{font-size:60px;left:18px;top:8px}
  .art{margin-top:64px;aspect-ratio:335/236}
  .art img{left:40px;width:calc(100% - 80px)}
  .bar small{font-size:16px;letter-spacing:.08em}
  .bar strong{font-size:19px;white-space:nowrap}
  .band .btn{width:calc(100% - 12px);margin-left:6px}

  .page-band{padding:12px 0 calc(var(--rise) + 22px)}
  .page-band h1,.line-hero h1,.product-band h1{font-size:clamp(32px,10.4vw,46px);max-width:none}
  .page-band .lede{font-size:18px}
  .line-hero{padding-bottom:calc(var(--rise) + 26px)}
  .line-hero .wrap{display:block}
  .line-hero .btn{width:calc(100% - 12px)}
  .panel-static{max-width:none;margin-top:34px}
  .work{padding-top:40px}
  .section-head{display:block;margin-bottom:20px}
  .section-head>p{margin-top:10px;text-align:left}
  .gallery-controls{margin-top:16px;padding:0 0 0 6px}
  .catalogue{padding:40px 0 56px}
  .filters{gap:10px 12px}
  .filter{padding:0 14px}
  .search{max-width:none}
  .catalogue-meta{flex-direction:column;gap:4px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .product-photo img{padding:8px}
  .product-photo .go{right:10px;bottom:8px;width:40px;height:34px}
  .product-meta{font-size:16px;letter-spacing:0;overflow-wrap:anywhere}
  .product-card h3{font-size:18px;overflow-wrap:anywhere}
  .product-layout{grid-template-columns:1fr;gap:26px;padding:26px 0 56px}
  .product-visual img,.product-code-plate{aspect-ratio:1/.95;padding:18px}
  .quantity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-info .actions{flex-direction:column;align-items:stretch;padding-left:0}
  .product-info .actions .btn{width:calc(100% - 12px);margin-left:6px}
  .steps li>*{padding:0 12px}
  .request-layout{grid-template-columns:1fr;gap:30px;padding:24px 0 56px}
  .request-line{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .request-line img,.garment-code{width:84px;height:104px}
  .summary-card{position:static;padding:24px 22px 28px}
  .action-bar{padding:22px 20px 22px 26px}
  .action-bar .btn{width:calc(100% - 6px)}
  .form-grid{grid-template-columns:1fr}
  .sent{padding:26px 0 56px}
  .sent-lines div{display:block}
  .sent-lines dd{max-width:none;text-align:left}
  .sent .actions,.empty-state .actions{flex-direction:column;align-items:stretch;padding-left:0}
  .sent .actions .btn,.empty-state .actions .btn{width:calc(100% - 12px);margin-left:6px}
  .empty-page{padding-bottom:56px}
  .sheet-inner{padding:22px 20px 26px}
  .sheet-title{font-size:28px}
  .choices{grid-template-columns:1fr}
  .sheet-actions{flex-direction:column;align-items:stretch;padding-left:0}
  .sheet-actions .btn{width:calc(100% - 12px);margin-left:6px}
}
@media (min-width:1500px){:root{--rise:118px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* header links never wrap; between the menu breakpoint and 1100 the gaps tighten instead */
.nav a,.header .btn{white-space:nowrap}
@media (min-width:981px) and (max-width:1100px){.header .wrap{gap:20px}.nav{gap:20px}}
/* 981 to 1180: five links and the quote button no longer fit beside the logo, and the logo gave way (25px wide at 981). The logo keeps its size; the links tighten instead. */
.brand{flex:none}
@media (min-width:981px) and (max-width:1220px){.header .wrap{gap:12px}.nav{gap:clamp(10px,1.5vw,22px);font-size:13px;letter-spacing:.03em}.header .btn{padding:0 16px;font-size:13px}}
/* mid widths: the two hero actions stack so the link stays clear of the photo */
@media (min-width:701px) and (max-width:900px){.hero-actions{flex-direction:column;align-items:flex-start;gap:6px}}
/* logo file picker: the whole button is the file input, so the browser never shows its own "No file chosen" text */
.file-pick{position:relative;display:inline-block}
.upload-zone .file-pick input[type=file]{position:absolute;inset:0;width:100%;max-width:none;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.file-pick:focus-within .btn{outline:3px solid var(--ink);outline-offset:4px}
.file-pick:has(input:disabled) .btn{opacity:.55}
/* Dropdowns: the browser's own arrow is replaced by a square-cut one in ink, so the control matches the rest of the form. */
.field select{appearance:none;-webkit-appearance:none;padding-right:48px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:right 23px center,right 16px center;background-size:7px 7px,7px 7px;background-repeat:no-repeat;cursor:pointer}
/* ============================================================
   H&R shop build-out: NEW rules only. Append to shop.css after its last line, unchanged.
   Plan 2026-11-10-hr-shops-build-out, leg L1. Spec: SPEC.md beside this file.
   Same language as option C "Full Tilt": flat colour, square corners, one lean (skewX -10deg),
   6px bars in the shop's base or accent colour. No gradients, no rounded corners, no new colours.
   ============================================================ */



/* product and bundle pages: the shop's short lockup on a small plate, same place */
.range-chip{position:absolute;z-index:2;right:max(var(--pad),calc(50% - var(--wrap)/2));bottom:calc(var(--rise) - 34px);width:176px;margin:0;padding:12px 14px 10px;background:var(--chip-bg,var(--plate));border-top:6px solid var(--accent);box-shadow:0 26px 40px -28px rgba(6,32,26,.6)}
.range-chip img{width:100%;height:auto}
.theme-gym-wear{--chip-bg:#0B0B0A}

/* ---------- 2. bundles on a shop page ---------- */
.bundles{padding-top:56px}
.kind{display:inline-block;padding:6px 12px 5px;border:2px solid currentColor;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:14px;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;transform:skewX(-10deg)}
.kind>span{display:inline-block;transform:skewX(10deg)}
.bundle-lead{--focus:#F4F2EA;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);background:var(--base);color:var(--paper)}
.bundle-lead-body{display:flex;flex-direction:column;align-items:flex-start;padding:34px 36px 32px}
.bundle-lead .kind{margin-left:6px;color:var(--accent)}
.bundle-lead h3{margin:18px 0 8px;font-size:clamp(34px,3.7vw,50px);line-height:.94;letter-spacing:-.03em;color:var(--accent)}
.bundle-lead-body>p{max-width:36ch;color:var(--muted)}
.kit-list{width:100%;margin:18px 0 0;padding:0;list-style:none}
.kit-list li{display:flex;gap:10px;padding:8px 0;border-top:1px solid rgba(244,242,234,.28);font-weight:600}
.kit-list b{flex:none;min-width:30px;font-weight:800;color:var(--accent)}
.bundle-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;width:100%;margin-top:auto;padding:24px 0 0 6px}
.kit-lineup{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:12px;align-items:end;align-content:center;margin:0;padding:34px 34px 34px 6px}
.kit-tile{position:relative;margin:0 0 calc(var(--i,0) * 18px);background:var(--white);border-bottom:6px solid var(--accent)}
.kit-tile img{width:100%;aspect-ratio:1/1.25;padding:8px;object-fit:contain}
.kit-times{position:absolute;left:0;top:0;padding:5px 9px 4px;background:var(--accent);color:var(--ink);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:15px;line-height:1}
a.bundle-lead:hover .btn{transform:skewX(-10deg) translateX(3px)}
.bundle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gut);margin-top:40px}
.bundle-card a{display:flex;flex-direction:column;height:100%}
.bundle-strip{position:relative;display:flex;justify-content:center;aspect-ratio:2.3/1;margin:0;overflow:hidden;background:var(--white);border-bottom:6px solid var(--base)}
.bundle-strip img{width:100%;height:100%;padding:10px 6px;object-fit:contain;transition:transform .3s var(--ease)}
.bundle-strip span{position:relative;flex:0 1 calc(100% / max(var(--n,4),3));min-width:0}
.bundle-card a:hover .bundle-strip img{transform:scale(1.035)}
.bundle-card .kit-times{background:var(--base);color:var(--accent)}
.bundle-card .product-meta{display:flex;flex-wrap:wrap;gap:4px 10px}
.bundle-card h3{margin:4px 0 6px;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:26px;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.bundle-card .product-body>p:not(.product-meta){margin-bottom:14px;font-size:16px;color:var(--ink-soft)}

/* ---------- 3. garment card: how many colours ---------- */
.card-colours{display:flex;align-items:center;gap:8px;margin:-6px 0 14px;font-size:15px;color:var(--ink-soft)}
.dots{display:inline-flex;gap:4px;padding-left:2px}
.dots i{width:14px;height:14px;background:var(--c);border:1px solid rgba(6,32,26,.32);transform:skewX(-10deg)}
.filter small{margin-left:6px;font-size:14px;font-weight:800;opacity:.72}

/* ---------- 4. colour chooser (product page and bundle page) ---------- */
.colour-field{margin:22px 0;min-width:0;padding:0;border:0}
.colour-now{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 12px;font-size:17px}
.colour-now b{font-weight:700}
.chip{flex:none;display:inline-block;width:30px;height:30px;background:var(--c,transparent);border:1px solid rgba(6,32,26,.32);transform:skewX(-10deg)}
.colour-now .chip{width:36px;height:36px;margin-left:4px}
.swatches{display:flex;flex-wrap:wrap;gap:10px 14px;padding-left:6px}
.swatch{position:relative;display:inline-flex}
.swatch input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.swatch-face{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 9px;border:2px solid var(--ink);font-size:16px;font-weight:600;line-height:1.2;transform:skewX(-10deg);transition:background .2s,color .2s}
.swatch-face .chip{transform:none}
.swatch-name{display:inline-block;transform:skewX(10deg)}
.swatch:hover .swatch-face{background:var(--white)}
.swatch input:checked+.swatch-face{background:var(--base);border-color:var(--base);color:var(--accent)}
.swatch input:checked+.swatch-face .chip{border-color:rgba(244,242,234,.75)}
.swatch input:focus-visible+.swatch-face{outline:3px solid var(--focus);outline-offset:4px}
.swatch.no-chip .swatch-face{padding-left:16px}
/* more than 12 colours: a rack of chips. The names stay in the page for screen readers and show in the "Colour:" line */
.swatches.is-rack{gap:10px}
.is-rack .swatch-face{justify-content:center;width:44px;min-height:44px;padding:0;border-color:rgba(6,32,26,.32);background:var(--c)}
.is-rack .swatch-face .chip{display:none}
.is-rack .swatch-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.is-rack .swatch:hover .swatch-face{background:var(--c)}
.is-rack .swatch input:checked+.swatch-face{background:var(--c);border-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.is-rack .swatch input:checked+.swatch-face::after{content:"";width:15px;height:8px;margin-top:-4px;border:solid var(--tick,#fff);border-width:0 0 3px 3px;transform:skewX(10deg) rotate(-45deg)}
.is-rack .swatch input:focus-visible+.swatch-face{outline-offset:9px}
.is-rack .swatch.no-chip .swatch-face{width:auto;padding:0 14px;border-color:var(--ink);background:transparent}
.is-rack .swatch.no-chip .swatch-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.is-rack .swatch.no-chip input:checked+.swatch-face{background:var(--base);border-color:var(--base);box-shadow:none}
.is-rack .swatch.no-chip input:checked+.swatch-face::after{content:none}
.colour-field .link-btn{margin-top:8px}

/* the bar under the product photo: what the photo shows, and what was picked */
.product-visual.has-bar img,.product-visual.has-bar .product-code-plate{border-bottom:0}
.photo-bar{display:flex;background:var(--base);color:var(--paper)}
.photo-bar>div{flex:1 1 50%;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 18px 13px}
.photo-bar>div+div{border-left:2px solid rgba(244,242,234,.28)}
.photo-bar small{display:block;white-space:nowrap;margin-bottom:3px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,234,.82)}
.photo-bar strong{display:block;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:19px;line-height:1.1;text-transform:uppercase;color:var(--accent);overflow-wrap:anywhere}
.photo-bar .chip{width:34px;height:34px;margin-left:4px;border-color:rgba(244,242,234,.75)}
.also-in{margin-top:22px;font-size:16px;color:var(--ink-soft)}
.also-in a{display:inline-flex;align-items:center;min-height:44px;margin-left:6px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- 5. line flag ---------- */
.line-flag{display:inline-block;margin-left:10px;padding:3px 9px 2px;background:var(--ink);color:var(--paper);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}

/* ---------- 6. bundle page ---------- */
.kit-layout .request-main>h2{margin-bottom:6px}
.kit-layout .request-main>.notice{margin-bottom:18px}
.kit-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;padding:22px 0;border-top:2px solid var(--ink)}
.kit-row:last-of-type{border-bottom:2px solid var(--ink)}
.kit-row>img{width:104px;height:124px;padding:8px;object-fit:contain;background:var(--white)}
.kit-row h3{margin:2px 0 0;font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.kit-row .line-flag{background:var(--base);color:var(--accent)}
.kit-row .colour-field{margin:14px 0 0}
.kit-row .colour-now{margin-bottom:10px;font-size:16px}
.kit-row .colour-now .chip{width:30px;height:30px}
.kit-row .field{margin:16px 0 0;max-width:260px}
.kit-row .one{margin-top:14px;font-size:16px;color:var(--ink-soft)}
.summary-card.kit-card{--focus:#F4F2EA;background:var(--base);border-top-color:var(--accent)}
.kit-card .summary-count strong{color:var(--accent)}
.kit-card .field{margin:18px 0 0}
.kit-card .field input,.kit-card .field select{border-color:var(--white);color:var(--ink)}
.kit-card .field .hint{color:var(--muted)}
.kit-card .btn{margin-top:14px}
.kit-card .error{color:#FFD9D0}
.kit-card .add-status,.kit-card .add-status p{color:var(--ink)}

/* ---------- 7. a bundle on the order request and on the sent screen ---------- */
.kit-group{padding:22px 0 14px;border-top:2px solid var(--ink)}
.kit-group:last-child{border-bottom:2px solid var(--ink)}
.kit-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.kit-head h3{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:26px;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.kit-head .kind{margin-left:6px;font-size:13px;padding:5px 10px 4px}
.kit-group>p{margin-top:6px;font-size:17px}
.kit-lines{margin:14px 0 0;padding:0;list-style:none;border-left:6px solid var(--gold)}
.kit-lines li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;padding:10px 0 10px 18px;border-top:1px solid rgba(6,32,26,.2)}
.kit-lines li:first-child{border-top:0}
.kit-lines img,.kit-lines .colour-tile{width:64px;height:76px;padding:5px;object-fit:contain;background:var(--white)}
.kit-lines strong{display:block;font-size:17px;line-height:1.25}
.kit-lines li>div>span{display:block;font-size:16px;color:var(--ink-soft)}
.kit-group .line-controls{margin-top:8px;padding-left:24px}
/* a line whose colour has no photo of its own: the colour and the code, never another colour's photo */
.colour-tile{display:grid;place-items:center;align-content:center;gap:8px;width:104px;height:124px;padding:8px;background:var(--white);font-size:14px;font-weight:700;text-align:center;overflow-wrap:anywhere}
.colour-tile .chip{width:44px;height:44px}
.kit-lines .colour-tile>span{display:none}
.kit-lines .colour-tile .chip{width:34px;height:34px}
.request-line p .chip,.kit-lines li>div>span .chip{width:16px;height:16px;margin:0 8px 0 2px;vertical-align:-2px}
.sent-lines .sent-kit dt{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;text-transform:uppercase}
.sent-lines .in-kit{padding-left:18px;border-top:1px solid rgba(6,32,26,.2);border-left:6px solid var(--gold)}
.sent-lines .in-kit dt{font-weight:600}

/* ---------- 8. small pieces ---------- */
.colour-field legend,.colour-label{display:block;margin:0 0 8px;padding:0;font-size:17px;font-weight:700}
.colour-now span,.colour-count{font-size:16px;font-weight:400;color:var(--ink-soft)}
.colour-count{margin-left:8px}
.kit-card .kind{margin:0 0 14px 6px;color:var(--accent)}
.summary-card .line-flag{background:var(--gold);color:var(--ink)}
.request-main>h2+.kit-group,.request-main>h2+.request-line{margin-top:0}

/* ---------- widths ---------- */
@media (max-width:980px){
  .bundle-lead{grid-template-columns:1fr}
  .kit-lineup{order:-1;padding:26px 26px 0}
  .bundle-lead-body{padding:26px 26px 28px}
  .bundle-grid{gap:34px 16px}
  .bundle-card h3{font-size:22px}
}
@media (max-width:700px){
  .range-chip{right:var(--pad);bottom:calc(var(--rise) - 30px);width:124px;padding:9px 10px 7px}
  .page-band.has-chip{padding-bottom:calc(var(--rise) + 70px)}
  .bundles{padding-top:44px}
  .kit-lineup{gap:6px;padding:20px 20px 0}
  .kit-tile{margin-bottom:calc(var(--i,0) * 6px)}
  .kit-tile img{padding:4px}
  .kit-times{font-size:14px;padding:4px 6px 3px}
  .bundle-lead-body{padding:22px 20px 26px}
  .bundle-foot{flex-direction:column;align-items:stretch;gap:12px;padding-left:0}
  .bundle-foot .btn{width:calc(100% - 12px);margin-left:6px}
  .bundle-grid{grid-template-columns:1fr;gap:34px;margin-top:34px}
  .card-colours{font-size:16px;flex-wrap:wrap}
  .swatches{gap:10px 12px}
  .swatch-face{padding-right:14px}
  .photo-bar{flex-direction:column}
  .photo-bar>div{padding:10px 14px;gap:10px}
  .photo-bar>div+div{border-left:0;border-top:2px solid rgba(244,242,234,.28)}
  .photo-bar span{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .photo-bar small{margin:0;font-size:16px;letter-spacing:.06em}
  .photo-bar strong{font-size:18px}
  .photo-bar .chip{width:26px;height:26px}
  .line-flag{font-size:14px}
  .kit-row{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .kit-row>img{width:84px;height:104px}
  .kit-row .field{max-width:none}
  .kit-head .kind{font-size:14px}
  .kit-lines li{grid-template-columns:56px minmax(0,1fr);gap:12px;padding-left:12px}
  .kit-lines img,.kit-lines .colour-tile{width:56px;height:68px}
  .kit-group .line-controls{padding-left:18px}
  .colour-tile{width:84px;height:104px}
}

/* L9 (2026-11-10): design card "phone text is never under 16px" wins over the design pack's 13-14px tags. Phone only; desktop keeps the pack's sizes. */
@media (max-width:600px){
  .kind,.kit-head .kind,.line-flag,.kit-times,.filter small,.colour-tile{font-size:16px}
  .kind,.kit-head .kind{padding:5px 10px 4px}
  .line-flag{padding:3px 8px 2px}
}

/* D21 (2026-11-10, lead's design commit): the note for a saved request that held garments no longer listed. */
.remove-notice.unlisted-notice{padding:14px 18px}

/* ============================================================
   A16 build (2026-11-10): the home page, the header on colour, The Gallery and the footer.
   Design source: designs/range-landing-2026-11-10/range-landing.css with SPEC.md section 15 beside it. Plan ask A16.
   No glass, no smoke, no frosting, no gradient: flat colour, square corners, one lean, 6px bars, the rising diagonal.
   Copied rule for rule, except three things held back:
     - the labelled picture frame (design pages only: the shop never shows one);
     - the kits shelf and the picks, which belong to the range landing pages and are not built yet. The shelf names its
       card .shelf-kit (renamed from .kit-card 2026-11-10, which is the kit card on a bundle page).
   body.on-colour  the header sits on the page's own dark colour, with the light-word lockup
   .range-top      a top on the page colour; .is-slim is the short top of The Gallery (and, later, of a shop page)
   .showcase       a dark band of pictures; .is-stacked when another follows it
   .band-rise      the home page's closing band, rising straight out of the three collections
   .foot           the footer, on every page
   ============================================================ */
.theme-home,.theme-workwear,.theme-office-wear,.theme-gym-wear{--label:rgba(244,242,234,.92)}

/* ---------- 1. the header on colour: no pale bar (his 09:57Z pin), no glass ---------- */
.on-colour .header{background:var(--base);color:var(--paper);--focus:#F4F2EA}
.on-colour .nav a:hover{border-color:var(--accent)}
.on-colour .nav a[aria-current=page]{border-color:var(--paper)}
.on-colour .order,.on-colour .menu{border-color:rgba(244,242,234,.66);color:var(--paper)}
.on-colour .order.has-items{background:var(--paper);border-color:var(--paper);color:var(--ink)}
/* the outlined button takes the page's accent: a range's accent on its own pages, the house gold on the home page */
.on-colour .header .btn-ink,.on-colour .header .btn-ink:hover{background:transparent;border-color:var(--accent);color:var(--paper)}
.on-colour .header .btn-ink:hover{background:rgba(244,242,234,.12)}

/* ---------- 2. a range's top: the words on its colour, the garment pile beside them ---------- */
.range-top .top-stage{padding:30px 0 calc(var(--rise) * .45 + 36px)}
.top-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 40px;align-items:center}
.stage-copy .eyebrow{margin-bottom:14px}
/* sized so the longest single word ("WORKWEAR") stays inside its column at every width, clear of the picture */
.range-top .top-stage h1{margin:0 0 20px;max-width:none;font-size:clamp(46px,5.2vw,70px);line-height:.92;letter-spacing:-.035em}
.range-top .top-stage .lede{max-width:36ch;font-size:19px;color:var(--paper)}
.stage-actions{display:flex;flex-wrap:wrap;gap:14px 20px;margin:28px 0 0 6px}
.range-top .btn.is-quiet,.range-top .btn.is-quiet:hover{border-color:var(--accent)}
/* the picture is lifted clear of the rising cut on its side of the page */
.stage-art{min-width:0;margin-bottom:calc(var(--rise) * .6)}
/* The approved pile pictures carry their own lit ground, with the pile right of centre and empty ground on the left. So the
   picture runs the height of the top, behind the words, and its empty left side fades into the range colour: no box, no seam.
   It stops short of the foot of the top so the rising cut hides its lower edge and clears the lowest garment. */
.has-pile .stage-copy{position:relative;z-index:1}
.stage-art img{position:absolute;top:0;right:max(0px,calc(50vw - 640px));display:block;width:auto;max-width:none;height:calc(100% - var(--rise) * .55);aspect-ratio:3/2;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 36%,#000 96%,transparent),radial-gradient(ellipse 56% 76% at 66% 50%,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 2%,#000 36%,#000 96%,transparent),radial-gradient(ellipse 56% 76% at 66% 50%,#000 70%,transparent);mask-composite:intersect}
/* the picture no longer needs its own column, so the words take the wider one and a long heading keeps to two lines */
@media (min-width:981px){.has-pile .top-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
/* the picture may sit in a <picture> that swaps in a tall file on a phone; the wrapper takes no box of its own */
.stage-art picture{display:contents}
/* a tall picture, where one is approved (to 560 wide): the pile fills a phone's width. Only empty background above the pile is trimmed. */
@media (max-width:560px){.stage-art.has-tall img{width:100%;margin-left:0;aspect-ratio:10/11;object-position:50% 100%}}
/* the short top: the built page band, with the same headline scale as the shop's other pages */
.is-slim .top-stage{padding:26px 0 calc(var(--rise) * .3 + 32px)}
.is-slim .top-stage h1{margin:6px 0 16px;font-size:clamp(40px,5.2vw,70px);line-height:.94;letter-spacing:-.03em}
.is-slim .top-stage .lede{max-width:44ch}
.is-slim .crumb span{color:var(--paper)}

.picks-more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--base)}
.picks-more:hover{text-decoration-color:var(--gold-deep)}

/* ---------- 5. showcase: a band in the range colour whose top edge rises on the same angle ---------- */
.showcase{--focus:#F4F2EA;margin-top:44px;padding:calc(var(--rise) + 52px) 0 72px;background:var(--base);color:var(--paper);clip-path:polygon(0 var(--rise),100% 0,100% 100%,0 100%)}
.showcase .section-head>p{color:var(--muted)}
.showcase .picks-more{text-decoration-color:var(--accent)}
.showcase-grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--gut);margin:0;padding:0}
.showcase-grid figure{margin:0}
.showcase-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-bottom:6px solid var(--accent)}
.showcase-grid figcaption{margin-top:10px;font-size:16px;line-height:1.4;color:var(--muted)}
.showcase+.band{margin-top:0}
/* The Gallery: one band per range, each rising out of the one above */
.showcase.is-stacked{padding-bottom:calc(72px + var(--rise))}
.showcase.is-stacked+.showcase{margin-top:calc(var(--rise) * -1)}
/* The Gallery: the first band meets the short top on its gold line, with no paper between the two darks */
.range-top+.showcase{margin-top:calc(var(--rise) * -1)}

/* ---------- 6. closing bands ---------- */
.band.enter-shop .wrap{padding-block:52px}
/* the home page: the three collections run straight into "Ready to wear your brand?" */
/* --tuck lifts the band towards the panels: the built section leaves 64px + the rise under them, which read as an empty strip */
.band-rise{--tuck:20px;position:relative;z-index:2;margin-top:calc(var(--rise) * -1 - var(--tuck));padding-top:var(--rise);clip-path:polygon(0 var(--rise),100% 0,100% 100%,0 100%)}
@media (min-width:701px){.band-rise{--tuck:48px}}
/* 981 to 1180 wide: a two-line panel label makes that panel 20px taller, and at 96px the edge came within 2px of its corner */
@media (min-width:981px){.band-rise{--tuck:72px}}
@media (min-width:1181px){.band-rise{--tuck:96px}}

/* ---------- 7. the footer ---------- */
.foot{--focus:#F4F2EA;background:var(--night);color:var(--paper)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding-top:64px}
.foot-brand{display:inline-block;line-height:0}
.foot-brand img{height:96px;width:auto}
.foot-line{margin:26px 0 0;font-size:clamp(26px,2.7vw,36px);line-height:.98;letter-spacing:-.025em}
.foot-line span{color:var(--gold)}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gut);align-content:start}
.foot-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;border-top:2px solid rgba(244,242,234,.3);font-size:clamp(21px,2.1vw,28px);line-height:1;letter-spacing:-.02em;transition:color .2s}
/* each range's own colour marks its link */
.foot-nav a::after{content:"";flex:none;width:34px;height:6px;margin-right:6px;background:var(--c);transform:skewX(-30deg);transition:width .25s var(--ease)}
.foot-nav a:hover{color:var(--c)}
.foot-nav a:hover::after{width:52px}
.foot-base{grid-column:1 / -1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-block:20px 26px;border-top:2px solid rgba(244,242,234,.3);font-size:16px;color:var(--muted)}

/* ---------- widths ---------- */
@media (max-width:980px){
  .on-colour .nav{background:var(--base);box-shadow:0 18px 24px -12px rgba(0,0,0,.5)}
  .on-colour .nav a{border-bottom-color:rgba(244,242,234,.16)}
  .on-colour .nav a[aria-current=page]{border-color:rgba(244,242,234,.16)}
  .range-top .top-stage{padding-bottom:calc(var(--rise) + 30px)}
  .top-grid{grid-template-columns:1fr}
  .range-top .top-stage h1{font-size:clamp(40px,7vw,60px)}
  .stage-art{margin-bottom:0}
  .has-pile .top-stage{padding-bottom:0}
  .range-top.no-pile .top-stage{padding-bottom:calc(var(--rise) + 30px)}
  .has-pile .stage-art{margin:4px calc(var(--pad) * -1) 0;overflow:hidden}
  .stage-art img{position:static;width:115%;margin-left:-15%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%);mask-image:linear-gradient(180deg,transparent,#000 12%)}
  .showcase-grid.is-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--gut)}
  .foot .wrap{grid-template-columns:1fr;gap:32px;padding-top:52px}
}
@media (max-width:700px){
  .range-top .top-stage h1{font-size:clamp(36px,10.6vw,44px)}
  .range-top .top-stage .lede{font-size:18px}
  .stage-actions{flex-direction:column;gap:12px;margin:22px 0 0}
  .stage-actions .btn{width:calc(100% - 12px);margin-left:6px}
  .stage-art img{width:130%;margin-left:-30%}
  .is-slim .top-stage h1{font-size:clamp(32px,9.6vw,40px)}
  .showcase{margin-top:52px;padding:calc(var(--rise) + 36px) 0 52px}
  .showcase.is-stacked{padding-bottom:calc(52px + var(--rise))}
  /* phone: three pictures are one full width with two under it; four are two by two. Nothing here scrolls sideways. */
  .showcase-grid,.showcase-grid.is-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .showcase-grid:not(.is-four) figure:first-child{grid-column:1 / -1}
  .showcase-grid:not(.is-four) figure:first-child img{aspect-ratio:4/3}
  .foot-brand img{height:76px}
  .foot-nav{grid-template-columns:1fr}
  .foot-nav a{min-height:64px}
}

/* ============================================================
   Range landing pages build (2026-11-10): the Office Wear and Gym Wear landing pages, their shop pages' kit pictures.
   Design source: designs/range-landing-2026-11-10/range-landing.css sections 3 and 4 (kits shelf, picks) and their widths, with
   SPEC.md 15.5 and 15.6. Left out: section 8 and the labelled picture-frame rules (design pages only, SPEC 15.10); every rule the A16 build above
   already holds. The kit-picture tiles below are new: a shop page bundle tile that has an approved kit picture shows it on white (15.6).
   ============================================================ */
/* ---------- 3. kits: a shelf straight under the top, tucked under the rising cut ---------- */
.kit-shelf{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 40px;align-items:start}
.kit-shelf-head{padding-top:30px}
.kit-shelf-head h2{margin:0 0 12px;font-size:clamp(32px,3.4vw,46px);line-height:.96;letter-spacing:-.03em;color:var(--base)}
.kit-shelf-head p{max-width:30ch;margin:0;color:var(--ink-soft)}
.kit-controls{display:flex;align-items:center;gap:12px;margin:22px 0 10px 6px}
.kit-controls[hidden]{display:none}
.kit-controls .icon-btn:disabled{opacity:.35;cursor:default}
.kit-controls .icon-btn:disabled:hover{background:transparent}
.kit-count{margin-left:10px;font-weight:700;font-variant-numeric:tabular-nums}
/* 4px of room all round so a focused card's outline is never clipped by the row */
.kit-rail{display:flex;gap:var(--gut);margin:calc(var(--rise) * -.3 - 4px) -4px -4px;padding:4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;overscroll-behavior-x:contain;scrollbar-width:none}
.kit-rail::-webkit-scrollbar{display:none}
.shelf-kit{flex:0 0 calc((100% - var(--gut)) / 2);scroll-snap-align:start}
.shelf-kit a{display:flex;flex-direction:column;height:100%;background:var(--base);color:var(--paper)}
.shelf-kit img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--white)}
.shelf-kit-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:22px 24px 14px;border-bottom:6px solid var(--accent)}
.shelf-kit .kind{margin-left:6px;color:var(--accent)}
.shelf-kit h3{margin:16px 0 6px;font-size:clamp(26px,2.5vw,34px);line-height:.96;letter-spacing:-.025em;color:var(--accent)}
.shelf-kit p{margin:0;color:var(--muted)}
.kit-go{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:auto;padding-top:10px;font-weight:700}
.kit-go svg,.pick-bar svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:2.2;transition:transform .25s var(--ease)}
.shelf-kit a:hover svg,.pick:hover svg{transform:translateX(4px)}

/* ---------- 4. picks: three to start with, each a white picture over a bar in the range colour ---------- */
.picks{padding-top:76px}
.picks .section-head h2{color:var(--base)}
.pick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.pick{display:flex;flex-direction:column;background:var(--white)}
.pick img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain}
/* the bar takes whatever height is left, so three bars end on one line when a name runs to two lines */
.pick-bar{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:16px 20px 14px;background:var(--base);color:var(--paper);border-bottom:6px solid var(--accent)}
.pick-bar small{font-size:16px;font-weight:600;color:var(--accent)}
.pick-bar strong{grid-column:1;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:clamp(19px,1.8vw,24px);line-height:1.05;letter-spacing:-.015em;text-transform:uppercase}
.pick-bar svg{grid-column:2;grid-row:1 / span 2}


/* the picks and the shelf at tablet and phone widths */
@media (max-width:980px){
  .kit-shelf{grid-template-columns:1fr}
  .kit-shelf-head{padding-top:26px}
  .kit-shelf-head p{max-width:none}
  .kit-rail{margin-top:-4px}
}
@media (max-width:700px){
  /* phone: one kit and the edge of the next, so the row reads as a row */
  .shelf-kit{flex-basis:86%}
  .picks{padding-top:52px}
  .pick-row{grid-template-columns:1fr;gap:14px}
  .pick img{aspect-ratio:4/3}
}

/* shop page bundle tiles that take a kit picture (clothing only, on white): the lead block and the cards */
.kit-lineup.is-picture{grid-template-columns:minmax(0,1fr);align-content:center}
.kit-lineup.is-picture .kit-tile{margin:0}
.kit-lineup.is-picture .kit-tile img{aspect-ratio:4/3;padding:0}
.bundle-strip.is-picture{aspect-ratio:4/3}
.bundle-strip.is-picture span{flex:1 1 100%}
.bundle-strip.is-picture img{padding:0}
/* the pictures carry width and height attributes (no layout shift); their shape comes from aspect-ratio, so the attribute height must not win */
.shelf-kit img,.pick img,.showcase-grid img,.kit-lineup.is-picture .kit-tile img{height:auto}
/* a garment with no approved picture yet: a plain tinted block in the picture's place, no text, no broken image (SPEC 15.8) */
.product-photo.is-blank{background:var(--plate,#E9E4D8)}
.product-code-plate.is-blank{background:var(--plate,#E9E4D8)}
.blank-slot{display:block;width:100%;background:var(--plate,#E9E4D8)}
.kit-tile .blank-slot{aspect-ratio:1/1.25}
.bundle-strip .blank-slot{position:absolute;inset:10px 6px;width:auto;flex:none}
.colour-tile.is-blank,.kit-lines .colour-tile.is-blank{background:var(--plate,#E9E4D8)}

/* ---- TEAM WEAR: four-panel home (concept, 2026-11-11), copied from the design page ---- */
/* 2. four panels. 1260 and up: four across, still stepped up the slope, Play highest. 701 to 1259: two by two. 700 and down: one column, as approved. */
@media (min-width:1260px){
  .grid.is-four{grid-template-columns:repeat(4,1fr)}
  .grid.is-four .panel.ww{margin-top:calc((100% + var(--gut)) * var(--slope) * 3)}
  .grid.is-four .panel.ow{margin-top:calc((100% + var(--gut)) * var(--slope) * 2)}
  .grid.is-four .panel.gw{margin-top:calc((100% + var(--gut)) * var(--slope))}
  .grid.is-four .panel.tw{margin-top:0}
  /* a panel is now about 280 wide, the width the three had from 981 to 1180: the bar takes the narrower measure the site already uses at 701 to 980 */
  .grid.is-four .bar{gap:10px;padding:12px 14px 14px 16px}
  .grid.is-four .bar small{letter-spacing:.08em}
  .grid.is-four .bar strong{font-size:19px}
  .grid.is-four .go{width:40px;height:38px}
  .grid.is-four .go svg{width:20px;height:20px}
  /* the closing band's rise is tuned to the panel height: the four panels are shorter, so it comes up further to keep the same paper under them */
  .band-rise{--tuck:104px}
}
@media (min-width:701px) and (max-width:1259px){
  .grid.is-four{grid-template-columns:repeat(2,1fr)}
  .grid.is-four .panel.ww,.grid.is-four .panel.gw{margin-top:calc((100% + var(--gut)) * var(--slope))}
  .grid.is-four .panel.ow,.grid.is-four .panel.tw{margin-top:0}
  /* two wide columns need none of the 701 to 980 squeezing */
  .grid.is-four .bar{padding:14px 20px 16px 22px}
  .grid.is-four .bar strong{font-size:22px}
  .grid.is-four .go{display:grid}
  .grid.is-four .art img,.grid.is-four .art-slot{left:26px;width:calc(100% - 52px)}
}
/* 1181 to 1259 (two by two, panels about 570 wide): the approved 96px step would leave under 20px of paper under the lower row, so it stays at the 72px of 981 to 1180 */
@media (min-width:1181px) and (max-width:1259px){.band-rise{--tuck:72px}}

/* the longer small line wraps evenly on a phone ("For your club / and team"), never one word on a line of its own */
.grid.is-four .bar small{text-wrap:balance}
/* CUT-OUT TOP (2026-11-11, SPEC 19.2): a range whose pile picture sits on a clear ground (Team Wear) shows it whole in the same slot as .has-pile and at about its height.
   The picture is never masked or cropped (contain), and fills its box, so the slot is 28px shorter than a picture with air round it would need, which keeps the band's slanted foot from cutting a garment; a soft glow in the range's accent stands behind the garments where Gym's picture has its glow painted in. */
.has-cutout .stage-copy{position:relative;z-index:1}
@media (min-width:981px){.has-cutout .top-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.stage-art.is-cutout img{top:6px;right:max(var(--pad),calc(50vw - 640px + var(--pad)));height:calc(100% - var(--rise) * .55 - 40px);max-width:44vw;aspect-ratio:var(--cut-ratio,966/1021);object-fit:contain;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 0 44px color-mix(in srgb,var(--accent) 55%,transparent))}
@media (max-width:980px){.has-cutout .stage-art.is-cutout{margin:16px 0 0}.stage-art.is-cutout img{position:static;width:min(100%,560px);max-width:none;height:auto;margin:0 auto}}

/* TEAM WEAR NAME TILE (2026-11-11, SPEC 16.3): a Team Wear garment with no made picture yet shows its category and name set as type on the range's plate.
   It fills the picture box the card already has (grid card and the garment page's large visual); the card heading and the page heading carry the name, so the tile is hidden from screen readers.
   Sizes follow the tile's own width (container units). The bottom is left clear; the card's arrow chip stays bottom right. */
.product-photo.is-blank,.product-code-plate.is-blank{container-type:inline-size}
.name-tile{display:block;box-sizing:border-box;width:100%;height:100%;padding:clamp(12px,7cqw,22px);text-align:left;color:var(--base)}
.name-tile small{display:block;font-family:Figtree,system-ui,sans-serif;font-weight:600;font-size:11px;line-height:1.25;letter-spacing:.12em;text-transform:uppercase;color:var(--base)}
.name-tile small::after{content:"";display:block;width:32px;height:4px;margin:10px 0;background:var(--accent)}
.name-tile b{display:block;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:clamp(17px,10.5cqw,30px);line-height:1.02;text-transform:uppercase;overflow-wrap:break-word;color:var(--base)}
.product-code-plate.is-blank{display:block;padding:0;text-align:left}
.product-code-plate .name-tile.is-large{padding:clamp(18px,7cqw,40px)}
.product-code-plate .name-tile.is-large small{font-size:13px}
.product-code-plate .name-tile.is-large b{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:clamp(28px,11cqw,64px);line-height:1.02}
/* the site never sets text under 16px on a phone (checked at 375), so the category is 16px there, a little less spaced; the name already starts at 17px */
@media (max-width:700px){.name-tile small,.product-code-plate .name-tile.is-large small{font-size:16px;letter-spacing:.06em}}
/* Services block and the names-or-numbers tick (landing-v3 SPEC.md section 24). Appended to shop.css as written; uses only the site's tokens. */

/* 1. The block: heading column on the left, four white strips two by two on the right (the kits shelf's head-left shape). */
.services{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px 56px;align-items:start;padding-block:76px 84px}
.services-head h2{margin:0;font-size:clamp(32px,4vw,50px);line-height:.96;letter-spacing:-.03em;color:var(--base)}
.services-head .actions{margin-top:26px;padding-left:6px}
.services-note{margin:18px 0 0}
.services-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin:0;padding:0;list-style:none}
.services-list li{padding:22px 24px 24px;background:var(--white);border-left:6px solid var(--base)}
.services-list h3{margin:0 0 10px;font-size:clamp(19px,1.8vw,24px);line-height:1.05;letter-spacing:-.015em;color:var(--base)}
.services-list p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.services+.band{margin-top:0}
@media (max-width:980px){.services{grid-template-columns:1fr;gap:26px;padding-block:56px 64px}}
@media (max-width:700px){.services-list{grid-template-columns:1fr}}

/* 2. The tick: a square box (no rounded corner), the real input kept for keyboard and screen readers. */
.field .check{display:flex;align-items:flex-start;gap:14px;min-height:44px;margin:0;padding-top:8px;cursor:pointer}
.field .check input{position:absolute;width:28px;min-height:0;height:28px;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.check-box{flex:none;position:relative;width:28px;height:28px;border:2px solid var(--ink);background:var(--white)}
.check input:checked+.check-box{background:var(--base);border-color:var(--base)}
.check input:checked+.check-box::after{content:"";position:absolute;left:8px;top:2px;width:7px;height:14px;border:solid var(--accent);border-width:0 3px 3px 0;transform:rotate(45deg)}
.check input:focus-visible+.check-box{outline:3px solid var(--focus);outline-offset:4px}
.check-text{font-size:17px;font-weight:700;line-height:1.6}
.field .check+.hint{margin:4px 0 0 42px}
/* on a kit card (the shop's base colour) */
.kit-card .check-box{border-color:var(--white)}
.kit-card .check input:checked+.check-box{background:var(--accent);border-color:var(--accent)}
.kit-card .check input:checked+.check-box::after{border-color:var(--ink)}

/* ============================================================
   A. shop.css (leg L19, till design pack SPEC.md section 3 to 5): shared pieces, strips, header, price, sale, finish, footer.
   Copied rule for rule from designs/shop-till-2026-11-13/till.css section A (lines 15 to 169).
   ============================================================ */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::selection{background:var(--gold);color:var(--ink)}
input,textarea{caret-color:var(--ink)}
.num{font-variant-numeric:tabular-nums}

/* A1. strips above the header. Order, top down: test, closed, offer. */
.shop-strip{position:relative;z-index:11;font-size:16px;line-height:1.35}
.shop-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:44px;padding-block:8px}
.shop-strip p{flex:1 1 200px;min-width:0}
.strip-tag{flex:none;margin-left:4px;padding:4px 10px 3px;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;transform:skewX(-10deg)}
.strip-tag>span{display:inline-block;transform:skewX(10deg)}
.shop-strip.is-test{background:var(--white);color:var(--ink);border-bottom:3px solid var(--ink);font-weight:600}
.is-test .strip-tag{background:var(--ink);color:var(--white)}
.shop-strip.is-closed{--focus:#F4F2EA;background:var(--ink);color:var(--paper);font-weight:600}
.is-closed .strip-tag{background:var(--paper);color:var(--ink)}
.shop-strip.is-sale{background:var(--gold);color:var(--ink);font-weight:700}
.is-sale .strip-tag{background:var(--ink);color:var(--gold)}
.strip-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.strip-link:hover{text-decoration-color:var(--white)}

/* A2. header: the account box sits beside the basket box and takes its shape. the old quote button is gone. */
.order.account{gap:10px;padding:0 16px}
.order-label{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.order.account:hover,.order.order-button:hover{background:var(--white)}
.order.has-items:hover{background:#0B2E25}
.on-colour .order.account:hover,.on-colour .order.order-button:hover{background:rgba(244,242,234,.12)}
.on-colour .order.has-items:hover{background:var(--white)}
.header .nav .nav-extra{display:none}
@media (max-width:980px){
  .header .nav .nav-extra{display:block}
  .order.account{padding:0 14px}
  .order-label{display:none}
}

/* A3. price. One shape everywhere: the figure in the display face, "was" struck through beside it. */
.price{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-variant-numeric:tabular-nums}
.price-now{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:21px;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.price-was{font-size:16px;font-weight:600;color:var(--ink-soft);text-decoration:line-through;text-decoration-thickness:2px}
.price.is-large .price-now{font-size:46px;letter-spacing:-.025em}
.price.is-large .price-was{font-size:20px}
.price-unit{font-size:16px;font-weight:600;color:var(--ink-soft)}
.price-block{margin-bottom:4px}
.price-block .sale-tag{margin:0 0 10px 4px}
.price-note{margin-top:6px;font-size:16px;color:var(--ink-soft)}
/* the figure has not arrived yet: a quiet block the size of a price, never a placeholder phrase */
.price.is-loading .price-now{width:4.2ch;height:.9em;background:rgba(6,32,26,.12);color:transparent}
/* on a card foot the price leads and "Choose options" follows */
.product-cta .price .price-now{color:var(--ink)}
.product-cta .price .price-was{font-weight:600}
.product-cta{align-items:baseline}
/* on the dark surfaces */
.bundle-lead .price-now,.summary-card .price-now,.shelf-kit .price-now{color:var(--paper)}
.bundle-lead .price-was,.summary-card .price-was,.shelf-kit .price-was,.bundle-lead .price-unit,.summary-card .price-unit{color:var(--muted)}
.bundle-lead .price-now{font-size:34px}
.bundle-foot .price-note,.kit-card .price-note{color:var(--muted)}
.kit-card .price-block{margin:14px 0 22px;padding-bottom:18px;border-bottom:1px solid rgba(244,242,234,.28)}
.kit-card .price-block .sale-tag{margin-bottom:12px}
.kit-card .kit-sum{margin-top:22px;border-top:1px solid rgba(244,242,234,.28)}
.kit-card .price.is-large .price-now{font-size:40px}

/* A4. the sale tag: ink with gold words on light, gold with ink words on dark. Its word comes from the offer record. */
.sale-tag{display:inline-block;padding:5px 10px 4px;background:var(--ink);color:var(--gold);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;transform:skewX(-10deg)}
.sale-tag>span{display:inline-block;transform:skewX(10deg)}
.product-photo .sale-tag,.bundle-strip .sale-tag,.kit-lineup .sale-tag{position:absolute;z-index:1;left:14px;top:12px}
.bundle-lead .sale-tag,.summary-card .sale-tag,.kit-lineup .sale-tag{background:var(--gold);color:var(--ink)}
.kit-lineup{position:relative}

/* A5. a choice of two (finish; delivery or collection). The picked one fills with the page colour and carries a tick. */
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:0 6px}
.opt{position:relative;display:flex;min-width:0}
.opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.opt-face{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:72px;padding:10px 46px 10px 18px;border:2px solid var(--ink);transform:skewX(-10deg);transition:background .2s,color .2s}
.opt-face>span{display:block;transform:skewX(10deg)}
.opt-name{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:17px;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
.opt-sub{font-size:16px;font-weight:600;line-height:1.3;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.opt:hover .opt-face{background:var(--white)}
.opt input:checked+.opt-face{background:var(--base);border-color:var(--base);color:var(--accent)}
.opt input:checked+.opt-face .opt-sub{color:var(--paper)}
.opt input:checked+.opt-face::after{content:"";position:absolute;right:18px;top:50%;width:16px;height:9px;margin-top:-8px;border:solid var(--accent);border-width:0 0 3px 3px;transform:skewX(10deg) rotate(-45deg)}
.opt input:focus-visible+.opt-face{outline:3px solid var(--focus);outline-offset:4px}
.opt input:disabled+.opt-face{opacity:.5;cursor:not-allowed}
/* on the kit card and the summary card (dark): pale lines, the picked one in the accent */
.kit-card .opts{grid-template-columns:1fr;gap:10px}
.kit-card .opt-face{min-height:60px;border-color:rgba(244,242,234,.8);color:var(--paper)}
.kit-card .opt-sub{color:var(--muted)}
.kit-card .opt:hover .opt-face{background:rgba(244,242,234,.12)}
.kit-card .opt input:checked+.opt-face{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.kit-card .opt input:checked+.opt-face .opt-sub{color:var(--ink)}
.kit-card .opt input:checked+.opt-face::after{border-color:var(--ink)}
.kit-card .field legend{color:var(--paper)}
/* the finish field sits straight under the price, so the two read as one thing */
.finish-field{margin:18px 0 26px}
.finish-one{margin:10px 0 22px;font-size:17px}
/* the finish, named the same way on the basket, the order, the staff card and the job sheet: a solid box for print, a stitched box for embroidery */
.finish-tag{display:inline-block;padding:3px 9px 2px;border:2px solid currentColor;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.finish-tag.is-embroidered{border-style:dashed}

/* A6. sums on paper: what is being added (product page), what was paid (order, confirmation) */
.totals{margin:22px 0 0;border-top:2px solid var(--ink)}
.totals div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(6,32,26,.2);font-size:17px}
.totals dt{min-width:0}
.totals dt small{display:block;font-size:16px;color:var(--ink-soft)}
.totals dd{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.totals .is-total{border-bottom:2px solid var(--ink)}
.totals .is-total dt{font-weight:700}
.totals .is-total dd{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:28px;line-height:1;letter-spacing:-.015em}

/* A7. the garment a kit row will carry logos on (bundle page), and the single-logo field (Workwear, Office Wear) */
.kit-logos{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:14px;font-size:16px}
.kit-logos b{font-weight:700}
.logo-field .file-card{margin-top:0}
.logo-field .upload-zone{padding:22px 18px}

/* A8. the footer's small links */
.foot-small{display:flex;flex-wrap:wrap;gap:0 24px}
.foot-small a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.foot-small a:hover{text-decoration-color:var(--gold)}
.foot-base{align-items:center}

/* A9. rev 2 (ruling A1). The product page on a computer: the photo holds its place while the right column scrolls.
   shop.css already pins it 24px down; this restates that with the header's height added, for a header that stays on
   screen. The header scrolls away with the page today, so --head-pinned is not set and the photo rests 24px from the
   top of the window. A window too short to show the whole photo lets it scroll with the page instead. */
@media (min-width:981px){
  .product-visual{position:sticky;top:calc(var(--head-pinned,0px) + 24px)}
}
@media (min-width:981px) and (max-height:699px){
  .product-visual{position:static}
}
/* A10. rev 2 (ruling A2). The colour bar with ONE part, when the picture is of the chosen colour: a single <div> inside
   .photo-bar fills it, so it needs no rule of its own. The chip leads when the colour has a swatch. */
/* A11. rev 2 (ruling A10). A line with no logo is allowed and flagged. Gold: something still to come, not something wrong. */
.line-flag.is-follow{margin-left:0;background:var(--gold);color:var(--ink)}
/* A12. rev 2 (ruling A11). The second button on a product page, "Save this design". The outline button was in section D
   (sign in); it is shared now, so it lives here. */
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--white)}
.btn-outline:disabled:hover{background:transparent}
.save-note{margin-top:14px}
.save-note a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

@media (max-width:700px){
  .strip-tag,.sale-tag,.finish-tag{font-size:16px}
  .shop-strip .wrap{padding-block:10px}
  .strip-link{flex-basis:100%}
  .price.is-large .price-now{font-size:40px}
  .opts{grid-template-columns:1fr;gap:10px}
  .opt-face{min-height:60px}
  .product-cta .price-now{font-size:19px}
  .foot-base{flex-direction:column;align-items:flex-start}
  .foot-small{flex-direction:column}
}

/* L98 (join-up): the numbered square and the small position guide, one copy for every page (it was repeated in shop-checkout.css and shop-customiser.css). */
.pin-n{flex:none;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;background:var(--ink);color:var(--paper);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:14px;line-height:1}
.guide{position:relative;display:block;background:var(--white);overflow:hidden}
.guide>img{display:block;width:100%;height:100%;padding:0;object-fit:contain}
.guide .g-logo{position:absolute;transform:translate(-50%,-50%)}
.guide .g-logo img{display:block;width:100%;height:auto;padding:0;background:none}
.guide.is-plain{background:var(--plate)}
.guide.is-blank>img{object-fit:cover}

/* L94 (design pass L91): G6 (S30). A range top with no picture (.range-top.no-pile). No stand-in: on a wide screen the words
   use the whole width, the heading on the left and the line and buttons on the right, level with the heading's
   first line (the top's foot rises to the right, so the right column hangs from the top and never meets the cut).
   On a phone it is as built. */
@media (min-width:981px){
  .range-top.no-pile .top-grid{grid-template-columns:minmax(0,1fr)}
  .range-top.no-pile .stage-copy{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;column-gap:40px;align-items:start}
  .range-top.no-pile .stage-copy .eyebrow{grid-column:1 / -1;grid-row:1}
  .range-top.no-pile .stage-copy h1{grid-column:1;grid-row:2 / span 2;margin-bottom:0}
  .range-top.no-pile .stage-copy .lede{grid-column:2;grid-row:2;margin-top:4px}
  .range-top.no-pile .stage-copy .stage-actions{grid-column:2;grid-row:3;margin-top:24px}
}