/* v2.css · the v2 page system (index-v2, roller-covers-v2, ...). Loaded AFTER brand.css + catalogue.css.
   One container, one left edge: every section aligns to .hw (1280px). Only photos and the map
   band are allowed to run full width, and their content still sits on the same edge.
   Built 2026-10-01 from the Claude + ChatGPT homepage review. */

:root{ --hw:1680px; --hg:clamp(20px,5vw,104px); }
/* Wide screens: the whole v2 system scales up with the viewport, so a 2200px+ monitor does not get a
   half-width page of small text. 16px root at 1440px and below, about 20px at 2200px, capped at 21px.
   Everything sized in rem (type, labels, buttons) grows with it. */
html:has(body.v2){font-size:clamp(16px, calc(.55vw + 8px), 21px)}
body.v2{font-size:1.06rem}
.hw{max-width:var(--hw);margin:0 auto;padding:0 var(--hg)}

/* top bar: aligned to the same container edge; Request is a filled button */
body.v2 .topbar-slim{padding-left:max(var(--hg), calc((100% - var(--hw)) / 2 + var(--hg)));
  padding-right:max(var(--hg), calc((100% - var(--hw)) / 2 + var(--hg)));justify-content:flex-start;gap:clamp(1rem,2.4vw,2.2rem)}
body.v2 .topbar-slim .tb-brand{margin-right:auto}
body.v2 .tb-cta{background:var(--ink);color:var(--cream);border:1px solid var(--ink);border-radius:3px;padding:.55em 1em;line-height:1;letter-spacing:.14em}
body.v2 .tb-cta:hover{opacity:1;background:var(--kraft);border-color:var(--kraft);color:var(--ink)}

/* section rhythm: one spacing value, used everywhere */
.hsec{padding-block:clamp(64px,9vw,128px)}
.hsec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:clamp(28px,3.6vw,48px)}
.hsec-head .display{font-size:clamp(2rem,4.2vw,3.2rem);margin:0;line-height:1}
.hsec-head p{margin:0;max-width:44ch;color:var(--ink-soft)}

/* ---- hero: two columns, product on the first screen ---- */
.hhero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center;
  padding-block:clamp(36px,6vw,88px) clamp(40px,6vw,80px)}
.hhero .eyebrow{margin-bottom:1.2rem}
.hhero h1{font-size:clamp(2.6rem,4.6vw,4.6rem);line-height:.94;margin:0}
.hhero .lede{margin-top:1.5rem;max-width:40ch;font-size:clamp(1.05rem,1.45vw,1.22rem)}
.hhero .actions{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:2rem}
.hhero .pic{aspect-ratio:4/3.4;background:#e8e2d7 center/cover no-repeat;border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;
  padding:1em 1.5em;border-radius:3px;border:1px solid var(--ink);text-decoration:none;line-height:1;transition:background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--ink);color:var(--cream)}
.btn.solid:hover{background:var(--kraft);border-color:var(--kraft);color:var(--ink)}
.btn.link{border:0;padding:1em 0;color:var(--ink);border-bottom:1px solid var(--line-2);border-radius:0}
.btn.link:hover{border-color:var(--ink)}

/* ---- proof: three honest numbers, same edge ---- */
.hproof{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hproof div{padding:clamp(20px,2.6vw,34px) 0}
.hproof div + div{padding-left:clamp(16px,3vw,40px);border-left:1px solid var(--line)}
.hproof .n{display:block;font-family:var(--display);font-size:clamp(2rem,3.6vw,3rem);line-height:1;color:var(--ink)}
.hproof .l{display:block;margin-top:.55rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--muted)}

/* ---- range: all 8 categories, one system ---- */
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px)}
.hcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.hcard .img{display:block;aspect-ratio:4/5;background:#e8e2d7 center/cover no-repeat;overflow:hidden;border-radius:2px;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.hcard .img-wrap{display:block;overflow:hidden;border-radius:2px}
.hcard:hover .img{transform:scale(1.04)}
.hcard .num{display:block;margin-top:1rem;font-family:var(--display);font-size:1.15rem;color:var(--kraft);line-height:1}
.hcard .nm{display:block;margin-top:.3rem;font-family:var(--display);font-size:clamp(1.45rem,1.9vw,1.75rem);line-height:1}
.hcard .ds{display:block;margin-top:.55rem;font-size:.98rem;line-height:1.5;color:var(--ink-soft)}
.hcard .more{display:inline-block;margin-top:auto;padding-top:.9rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--ink)}
.hcard .more span{border-bottom:1px solid var(--line-2);padding-bottom:.2em}
.hcard:hover .more span{border-color:var(--ink)}
.hcard .img.lift{filter:brightness(1.55) contrast(.92)}   /* Roller Frames photo is very dark; lift until a lighter shot exists */

/* ---- map band: full-width ground, text on the container edge ---- */
.hmap{position:relative;overflow:hidden;background:#ece4d6}
.hmap .pb-map{display:block;width:100%;height:auto;opacity:.16}
.hmap .pb-pins{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hmap .hw{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.hmap .bignum{font-family:var(--display);font-size:clamp(3.4rem,8vw,6.5rem);line-height:.92;margin:0;color:var(--ink)}
.hmap .stat{font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.15;max-width:22ch;margin:.6rem 0 0}
.hmap .countries{margin:1.1rem 0 0;max-width:46ch;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;line-height:1.8;color:var(--ink-soft)}

/* ---- stockists: the shelf story + what support exists ---- */
.hstock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.hstock .display{font-size:clamp(2rem,4.2vw,3.2rem);margin:0;line-height:1}
.hstock .lede{margin-top:1.3rem;max-width:44ch}
.hlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hlist li{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.hlist b{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.1;color:var(--ink)}
.hlist span{grid-column:1/-1;color:var(--ink-soft);font-size:.98rem;line-height:1.5}
.hlist .soon{font-style:normal;grid-column:auto;align-self:center;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--cream);background:var(--ink);border-radius:2px;padding:.3em .55em;line-height:1}

/* ---- founders ---- */
.hstory{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.hstory .pic{aspect-ratio:3/2;background:#e8e2d7 center 30%/cover no-repeat;border-radius:2px}
.hstory .display{font-size:clamp(2rem,4vw,3rem);margin:0;line-height:1}
.hstory .story p{margin:1.1rem 0 0;color:var(--ink-soft);max-width:48ch}
.hstory .signoff{font-family:var(--display);color:var(--ink);font-size:1.25rem;margin-top:1.4rem}

/* ---- closing CTA + footer ---- */
.hclose{background:var(--ink);color:var(--cream)}
.hclose .inner{display:flex;justify-content:space-between;align-items:center;gap:1.6rem 3rem;flex-wrap:wrap;padding-block:clamp(48px,6vw,84px)}
.hclose .display{color:var(--cream);font-size:clamp(2rem,4vw,3rem);margin:0;line-height:1;max-width:18ch}
.hclose p{margin:.9rem 0 0;color:rgba(244,239,232,.75);max-width:46ch}
.hclose .btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.hclose .btn.solid:hover{background:var(--kraft);border-color:var(--kraft)}
.hfoot{background:var(--ink);color:rgba(244,239,232,.6);border-top:1px solid rgba(244,239,232,.14)}
.hfoot .inner{display:grid;grid-template-columns:1.2fr 2fr;gap:2rem;padding-block:clamp(32px,4vw,52px);font-size:.92rem}
.hfoot img{height:54px;width:auto}
.hfoot nav{display:grid;grid-template-columns:repeat(4,auto);gap:.7rem 2rem;justify-content:end}
.hfoot a{color:rgba(244,239,232,.88);text-decoration:none;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.92rem}
.hfoot a:hover{color:var(--cream)}
.hfoot .legal{grid-column:1/-1;font-size:.88rem;margin:0;color:rgba(244,239,232,.7)}

/* ---- tablet ---- */
@media(max-width:980px){
  .hgrid{grid-template-columns:repeat(2,1fr)}
  .hstock,.hstory{grid-template-columns:1fr}
  .hfoot .inner{grid-template-columns:1fr}
  .hfoot nav{justify-content:start;grid-template-columns:repeat(2,auto)}
}
/* ---- phone ---- */
@media(max-width:720px){
  .hhero{grid-template-columns:1fr;padding-top:24px}
  .hhero .pic{order:-1;aspect-ratio:4/3}
  .hproof .n{font-size:1.7rem}
  .hproof .l{font-size:.72rem;letter-spacing:.1em}
  .hproof div + div{padding-left:12px}
  .hmap .pb-map{min-height:420px;object-fit:cover;object-position:68% 50%}
  .hmap .pb-pins{display:none}
  .hgrid{gap:28px 14px}
  .hcard .ds{display:none}
  .hcard .more{padding-top:.6rem}
}

/* ================= CATEGORY PAGE (v2) ================= */
.v2hero img{display:block;width:100%;aspect-ratio:21/9;min-height:280px;max-height:70vh;object-fit:cover}
.cintro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.cintro h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.94;margin:0}
.cintro .lede{margin-top:1.4rem;max-width:42ch}
.cintro h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;margin:0}
.cintro .body{margin-top:1rem;max-width:46ch}
/* nap scale: labels ABOVE the track, so the track always gets the full width */
.nscale{margin-top:2rem;max-width:520px}
.nscale .ends{display:flex;justify-content:space-between;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--muted)}
.nscale .track{position:relative;height:3px;margin:1rem 0 2.6rem;background:linear-gradient(90deg,#cdbfac,var(--kraft))}
.nscale .stop{position:absolute;top:-5px;transform:translateX(-50%);text-align:center}
.nscale .stop i{display:block;width:13px;height:13px;border-radius:50%;background:var(--kraft);margin:0 auto}
.nscale .stop b{display:block;margin-top:.55rem;font-family:var(--label);font-weight:500;letter-spacing:.08em;font-size:.95rem;color:var(--ink);white-space:nowrap}
.nscale .stop:first-child{transform:none;left:0!important;text-align:left} .nscale .stop:first-child i{margin:0}
.nscale .stop:last-child{transform:none;left:auto!important;right:0;text-align:right} .nscale .stop:last-child i{margin:0 0 0 auto}

/* fabric cards: five across the full container, equal height, arrow pinned to the bottom */
.fgrid2{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);align-items:stretch}
.fcard{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#efe9df;border-radius:3px;
  padding:clamp(18px,2vw,28px) clamp(14px,1.6vw,22px) clamp(16px,1.8vw,22px);transition:transform .28s ease,background .28s ease}
.fcard:hover{transform:translateY(-5px);background:#ebe3d6}
.fcard .mark{display:block;aspect-ratio:1/1.55;width:72%;margin:0 auto;background:center top/contain no-repeat;filter:drop-shadow(0 8px 12px rgba(35,31,32,.14))}
.fcard .nm{display:block;margin-top:1.2rem;font-family:var(--display);font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.02}
.fcard .ds{display:block;margin-top:.45rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;color:var(--kraft)}
.fcard .fu{display:block;margin-top:.6rem;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
.fcard .go{margin-top:auto;padding-top:1.1rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--ink)}
.fcard .go span{border-bottom:1px solid var(--line-2);padding-bottom:.2em}
.fcard:hover .go span{border-color:var(--ink)}
.fcard.featured{background:#e6ddcd;outline:1px solid var(--kraft);outline-offset:-1px}
.fcard .badge{position:absolute;top:10px;right:10px;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;
  background:var(--kraft);color:var(--paper);padding:.4em .6em;border-radius:2px;line-height:1}

/* prev / next pager on the container edge */
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:1.4rem;border-top:1px solid var(--line)}
.pager a{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;color:var(--ink);text-decoration:none}
.pager a:hover{color:var(--kraft)}

@media(max-width:980px){ .fgrid2{grid-template-columns:repeat(3,1fr)} }
@media(max-width:720px){
  .cintro{grid-template-columns:1fr}
  .fgrid2{grid-template-columns:repeat(2,1fr)}
  .fcard .fu{display:none}
}

/* contrast: kraft #b59779 is 2.39:1 on cream and FAILS AA as small text. Small kraft text on v2 pages
   uses the dark kraft; the light kraft stays for large display numbers, rules and fills only. */
:root{ --kraft-text:#7d5d3a; }
body.v2 .eyebrow, body.v2 .fcard .ds, body.v2 .hcard .num{color:var(--kraft-text)}
body.v2 .fcard .badge{background:var(--kraft-text)}

/* how-to-choose band (category pages): copy left, nap guide right, ruled top and bottom */
.howto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;
  padding-block:clamp(28px,3.4vw,48px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.howto h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;margin:0}
.howto .body{margin-top:.9rem;max-width:52ch}
.howto .nscale{margin-top:0;max-width:none}
.nscale .stop em{display:block;margin-top:.2rem;font-style:normal;font-size:.88rem;color:var(--ink-soft);white-space:nowrap}
.nscale .track{margin-bottom:3.6rem}
@media(max-width:720px){ .howto{grid-template-columns:1fr} .nscale .stop em{font-size:.78rem} }

/* ================= PRODUCT PAGE (v2) · fabric pages ================= */
.v2prod{background:var(--ground,transparent)}
.hhero .pic.cover-red{background-color:#c4262a}
.crumbline{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--kraft-text);margin:0 0 1.2rem}
.crumbline a{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .crumbline a:hover{border-color:currentColor}

/* best for + spec, side by side */
.bestspec{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start;
  padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bestspec h2{font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1;margin:0}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:1.6rem}
.uses .u b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.05;color:var(--ink)}
.uses .u .r{display:block;font-family:var(--body);font-weight:500;font-size:.95rem;color:var(--ink);margin-bottom:.35rem}
.uses .u > span:last-child{display:block;margin-top:.4rem;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
body.v2 .spec .k{color:var(--ink-soft);font-size:.86rem}
body.v2 .spec .v{font-size:1rem}
.bestspec .fav{margin-top:1.4rem;font-size:.95rem;color:var(--ink-soft)}
.bestspec .fav b{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--kraft-text);margin-right:.6rem}

/* range groups: one card per SKU */
.rgroup + .rgroup{margin-top:clamp(48px,6vw,88px)}
.rgroup-head{display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem 2rem;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,32px)}
.rgroup-head h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;margin:0}
.rgroup-head p{margin:0;color:var(--ink-soft);max-width:52ch}
.sgrid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:clamp(14px,1.8vw,24px)}
.scard{display:flex;flex-direction:column;background:#efe9df;border-radius:3px;padding:clamp(14px,1.6vw,22px)}
.scard .shot{display:block;aspect-ratio:1/1;background:center/contain no-repeat;filter:drop-shadow(0 14px 18px rgba(35,31,32,.12));margin-bottom:1rem}
.scard .sz{font-family:var(--display);font-size:clamp(1.6rem,2vw,1.9rem);line-height:1;color:var(--ink)}
.scard .meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.5rem;font-size:.95rem;color:var(--ink)}
.scard .meta span{white-space:nowrap}
.scard .sku{margin-top:auto;padding-top:.9rem;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--ink);border-top:1px solid var(--line);margin-top:1rem;user-select:all}
.scard .sku::before{content:"SKU";font-family:var(--label);letter-spacing:.14em;font-size:.75rem;color:var(--ink-soft);margin-right:.5rem}
.scard .tag{align-self:flex-start;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;background:var(--ink);color:var(--cream);padding:.35em .55em;border-radius:2px;line-height:1;margin-bottom:.6rem}
.scard .tag.ghost{visibility:hidden}
.rnotes{margin-top:1.4rem;display:grid;gap:.5rem;font-size:.95rem;color:var(--ink-soft)}

/* core explainer sits inside the sleeves group */
.corebox{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(28px,3vw,44px);
  padding:clamp(18px,2vw,28px);border:1px solid var(--line);border-radius:3px}
.corebox img{display:block;width:100%;height:auto;border-radius:2px}
.corebox h4{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.05;margin:0}
.corebox p{margin:.6rem 0 0;color:var(--ink-soft);max-width:62ch}

/* one editorial photo band */
.feature-photo{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:2px}

/* other fabrics: compact cross-links */
.otherfab{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.otherfab a{display:flex;gap:.9rem;align-items:flex-start;text-decoration:none;color:inherit;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:3px;transition:border-color .2s,background .2s}
.otherfab a:hover{border-color:var(--ink);background:#efe9df}
.otherfab i{flex:0 0 auto;width:10px;height:42px;border-radius:2px}
.otherfab b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.05}
.otherfab div > span{display:block;margin-top:.3rem;font-size:.92rem;line-height:1.4;color:var(--ink-soft)}

@media(max-width:980px){
  .bestspec{grid-template-columns:1fr}
  .sgrid{--cols:2!important} .otherfab{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .uses{grid-template-columns:1fr}
  .corebox{grid-template-columns:1fr}
  .corebox img{max-width:240px}
  .otherfab{grid-template-columns:1fr}
  .feature-photo{aspect-ratio:4/3}
}

.hclose .eyebrow{color:var(--kraft);margin:0 0 .8rem}   /* light kraft passes contrast on ink */
.hfoot .inner > a{display:block}
.hfoot .tagline{grid-column:1;grid-row:2;margin:-.6rem 0 0;font-family:var(--display);font-size:1.25rem;line-height:1.1;color:rgba(244,239,232,.85)}
.hfoot nav{grid-column:2;grid-row:1 / span 2;align-self:start}
@media(max-width:980px){ .hfoot .tagline{grid-row:auto;margin:0} .hfoot nav{grid-column:1;grid-row:auto} }

/* ---- product template refinements (2026-10-02, Claude + ChatGPT review) ---- */
.rgroup-head{display:block}
.rgroup-head p{margin-top:.6rem}
.scard .meta{font-weight:500}
.scard .tag small{display:block;margin-top:.3em;font-size:.85em;letter-spacing:.1em;opacity:.75}
.sgrid.sleeves .shot{aspect-ratio:16/10}
@media(max-width:1500px){ .sgrid.sleeves{--cols:3!important} }
.otherfab a{position:relative;padding-right:2.4rem}
.otherfab .arr{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink);transition:transform .2s}
.otherfab a:hover .arr{transform:translate(4px,-50%)}
/* top bar breadcrumb: always one line; hidden where it would crowd (the page repeats it under the title) */
body.v2 .tb-crumb{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:1280px){ body.v2 .tb-crumb{display:none} }
.subhead{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.86rem;font-weight:500;color:var(--ink-soft);margin:1.6rem 0 .8rem}
.rgroup-head + .subhead{margin-top:0}
.corebox + .corebox{margin-top:clamp(14px,1.6vw,20px)}
.hfoot .share{grid-column:1;margin:0;display:flex;align-items:center;gap:1rem}
.sharebtn{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--cream);background:none;
  border:1px solid rgba(244,239,232,.4);border-radius:3px;padding:.65em 1em;cursor:pointer;line-height:1}
.sharebtn:hover{border-color:var(--cream)}
.sharemsg{font-size:.88rem;color:rgba(244,239,232,.8)}

/* ================= homepage round 2 (2026-10-03, 8-review synthesis) ================= */
.nextstep{margin:1.1rem 0 0;max-width:44ch;font-size:.95rem;color:var(--ink-soft)}
.countries-line{margin:.9rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
/* category cards: ONE treatment, product cut-out on the same warm ground (until a matched reshoot) */
.hcard .img.cut{background-color:#ebe4d8;background-size:contain;background-origin:content-box;background-position:center;
  padding:16% 14%;filter:drop-shadow(0 0 0 transparent)}
.hcard .img.cut{box-shadow:inset 0 0 0 1px rgba(35,31,32,.04)}
.hcard .nm{margin-top:1rem}
.rangecta{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:clamp(36px,4vw,56px);padding:clamp(18px,2vw,26px) clamp(18px,2.4vw,32px);background:#ebe4d8;border-radius:3px}
.rangecta p{margin:0;font-family:var(--display);font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.05;color:var(--ink)}
.paths{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:clamp(8px,1vw,16px)}
.paths a{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.3rem;border:1px solid var(--line-2);border-radius:3px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.paths a:hover{border-color:var(--ink);background:#efe9df}
.paths b{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.05;color:var(--ink)}
.paths span{font-size:.95rem;color:var(--ink-soft)}
.paths em{font-style:normal;margin-top:.4rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--ink)}

/* mobile: card descriptions back on; sticky price-list bar once the hero button has scrolled away */
.mbar{display:none}
@media(max-width:720px){
  .hcard .ds{display:block;font-size:.88rem}
  .paths{grid-template-columns:1fr}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(35,31,32,.96);transform:translateY(110%);transition:transform .25s ease}
  .mbar.show{transform:none}
  .mbar a{flex:1;justify-content:center;background:var(--cream);color:var(--ink);border-color:var(--cream)}
  body.v2{padding-bottom:0}
  body.v2.mbar-on .hfoot{padding-bottom:72px}
  .to-top{bottom:84px}
}
.fcard .fsz{display:block;margin-top:.5rem;font-size:.9rem;font-weight:500;color:var(--ink)}

/* range: 6 tool categories big (3 across), merchandise + gift bags small underneath */
body.home .hgrid{grid-template-columns:repeat(3,1fr)}
body.home .hcard .img{aspect-ratio:4/3}
.alsolbl{margin:clamp(36px,4vw,56px) 0 1rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.86rem;color:var(--ink-soft)}
.hgrid-small{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.hcard.small{display:grid;grid-template-columns:minmax(120px,34%) 1fr;grid-template-rows:auto auto 1fr;column-gap:clamp(14px,1.8vw,24px);align-items:start}
.hcard.small .img-wrap{grid-row:1 / span 3}
.hcard.small .img{aspect-ratio:1/1}
.hcard.small .nm{margin-top:.2rem}
@media(max-width:980px){ body.home .hgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:720px){ .hgrid-small{grid-template-columns:1fr} }

/* homepage closing: the short request form inside the dark band */
.hclose-form .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.hc-more{font-size:.92rem}
.hc-more a{color:var(--cream)}
.hc-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.hc-form .hp{display:none}
.hc-form label{display:flex;flex-direction:column;gap:.4rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:rgba(244,239,232,.8)}
.hc-form input,.hc-form select{font-family:var(--body);font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--cream);
  border:1px solid transparent;border-radius:3px;padding:.75em .85em;min-height:46px}
.hc-form input:focus,.hc-form select:focus{outline:2px solid var(--kraft);outline-offset:1px}
.hc-form .wide{grid-column:1/-1}
.hc-form .btn.solid{justify-content:center;background:var(--cream);color:var(--ink);border-color:var(--cream);min-height:50px}
.hc-form .btn.solid:hover{background:var(--kraft);border-color:var(--kraft)}
@media(max-width:820px){ .hclose-form .inner{grid-template-columns:1fr} }
@media(max-width:520px){ .hc-form{grid-template-columns:1fr} }
.hcard .cnt{display:block;margin-top:.35rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--kraft-text)}

.hquote{margin:0;padding:clamp(36px,5vw,72px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.hquote blockquote{margin:0 auto;max-width:34ch;font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.12;color:var(--ink)}
.hquote figcaption{margin-top:1.2rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.84rem;color:var(--kraft-text)}
.hquote figcaption span{display:block;margin-top:.45rem;font-family:var(--body);text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--ink-soft)}

/* colour-stripe system, shown on the Roller Covers + Mini Rollers homepage cards */
.hcard .stripes{display:flex;align-items:center;gap:4px;margin-top:.55rem}
.hcard .stripes i{display:block;width:18px;height:6px;border-radius:1px}
.hcard .stripes em{font-style:normal;margin-left:.6rem;font-size:.85rem;color:var(--ink-soft)}

/* ================= Roller Covers: the 5-fabric comparison (replaces the card row) ================= */
.fcompare{border-top:1px solid var(--line-2)}
.fc-row{display:grid;grid-template-columns:minmax(220px,1.5fr) .55fr 1fr 1.5fr 1fr auto;gap:clamp(12px,1.6vw,28px);align-items:center;
  padding:clamp(12px,1.3vw,18px) clamp(8px,1vw,14px);border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.98rem;line-height:1.4;transition:background .2s}
a.fc-row:hover{background:#efe9df}
.fc-head{padding-top:.7rem;padding-bottom:.7rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--ink-soft)}
.fc-fab{display:flex;align-items:center;gap:1rem}
.fc-mark{flex:0 0 auto;display:block;width:38px;height:64px;background:center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(35,31,32,.15))}
.fc-fab b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.02}
.fc-fab em{display:block;font-style:normal;margin-top:.25rem;font-size:.9rem;color:var(--ink-soft)}
.fc-badge{display:inline-block;margin-top:.4rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;background:var(--ink);color:var(--cream);padding:.3em .5em;border-radius:2px;line-height:1}
.fc-row.pop{background:#ece4d6}
.fc-nap{font-weight:500}
.fc-go{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;white-space:nowrap;border-bottom:1px solid var(--line-2);padding-bottom:.15em}
a.fc-row:hover .fc-go{border-color:var(--ink)}
/* phones + narrow screens: each fabric becomes a stacked card, no sideways scrolling */
@media(max-width:900px){
  .fc-head{display:none}
  .fcompare{border-top:0;display:grid;gap:12px}
  .fc-row{grid-template-columns:1fr 1fr;gap:.6rem 1rem;align-items:start;border:1px solid var(--line);border-radius:3px;padding:16px}
  .fc-fab{grid-column:1/-1}
  .fc-nap{display:none}
  .fc-row [data-l]:not(.fc-nap)::before{content:attr(data-l);display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--ink-soft);margin-bottom:.15rem}
  .fc-go{grid-column:1/-1;justify-self:start}
}

/* fabric cards: two comparable facts in the same order on every card; ink "Most popular" badge */
.fcard .fspec{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:.35rem .7rem;font-size:.9rem;line-height:1.35}
.fcard .fspec dt{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--ink-soft);padding-top:.15em}
.fcard .fspec dd{margin:0;color:var(--ink)}
body.v2 .fcard .badge{background:var(--ink);color:var(--cream)}
.fcard.featured{outline-color:var(--ink)}
/* line the cards' rows up across all five (mark / name / label / use / paint+sleeves / link) so they compare at a glance */
@supports (grid-template-rows:subgrid){
  .fgrid2{grid-template-rows:repeat(6,auto);row-gap:0}
  .fgrid2 .fcard{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .fgrid2 .fcard .go{align-self:end}
}

/* how to choose v2: microfibre nap guide (3 separate steps, no "more coverage" ladder) + specialist fabrics by paint */
.howto2{align-items:start}
.howto2 h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.naps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-top:1.3rem}
.naps div{display:flex;flex-direction:column;gap:.2rem;padding:.9rem 1rem;background:#efe9df;border-radius:3px}
.naps i,.sp i{display:block;width:26px;height:6px;border-radius:1px;margin-bottom:.4rem}
.naps b{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1}
.naps div > span{font-weight:500;color:var(--ink)}
.naps em{font-style:normal;font-size:.9rem;color:var(--ink-soft)}
.special{padding-left:clamp(0px,3vw,48px);border-left:1px solid var(--line)}
.special h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;margin:0 0 1rem}
.sp{display:flex;gap:.9rem;align-items:flex-start;padding:.8rem 0;border-top:1px solid var(--line)}
.sp i{flex:0 0 auto;width:6px;height:38px;margin:0}
.sp b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.05}
.sp div > span{display:block;margin-top:.2rem;font-size:.95rem;color:var(--ink-soft)}
@media(max-width:720px){ .naps{grid-template-columns:1fr} .special{padding-left:0;border-left:0} }

/* pack-word legend (the word printed on every pack) */
.packwords{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 2rem;margin:0 0 clamp(18px,2vw,28px);padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:3px;font-size:.95rem;color:var(--ink-soft)}
.packwords .pw-l{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--ink-soft)}
.packwords b{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--ink);margin-right:.35rem;text-transform:uppercase}
.fcard .fspec dd b{font-weight:500;text-transform:uppercase;letter-spacing:.06em}
/* card facts stacked (label above value) so long values never squeeze */
.fcard .fspec{grid-template-columns:1fr;gap:0}
.fcard .fspec dt{padding-top:0;margin-top:.55rem}
.fcard .fspec dt:first-child{margin-top:0}
.fcard .fspec dd{margin-top:.1rem}
.packwords{gap:.4rem 1.6rem}

/* roller covers: sizes, packs and fit, stated once */
.fitfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px);margin-top:clamp(28px,3vw,44px)}
.fitfacts > div{padding:1rem 1.1rem;border-top:2px solid var(--ink)}
.fitfacts .ff-l{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--ink-soft)}
.fitfacts b{display:block;margin-top:.35rem;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.1;color:var(--ink)}
.fitfacts > div > span:last-child{display:block;margin-top:.35rem;font-size:.92rem;color:var(--ink-soft)}
@media(max-width:900px){ .fitfacts{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .fitfacts{grid-template-columns:1fr} }

/* "Goes with": related categories at the end of a category page */
.goeswith{margin-top:clamp(40px,5vw,72px)}
.gw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:.6rem}
.gw-grid a{display:flex;align-items:center;gap:1rem;padding:.9rem;border:1px solid var(--line);border-radius:3px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.gw-grid a:hover{border-color:var(--ink);background:#efe9df}
.gw-img{flex:0 0 auto;width:84px;height:84px;border-radius:2px;background:#ebe4d8 center/70% no-repeat}
.gw-grid b{display:block;font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.05}
.gw-grid em{display:block;font-style:normal;margin-top:.3rem;font-size:.92rem;color:var(--ink-soft)}
@media(max-width:820px){ .gw-grid{grid-template-columns:1fr} }
/* card link never splits its arrow onto its own line */
.fcard .go span{white-space:nowrap}
/* the page shows its own breadcrumb above the title, so the top bar does not repeat it */
body.v2 .tb-crumb{display:none}

/* sizes/packs/cores/end caps as the last row of "How to choose" */
.howto2 .fitfacts{grid-column:1/-1;margin-top:clamp(8px,1vw,16px)}
.sp-k{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--kraft-text);margin-bottom:.15rem}

/* pack-word legend v2: three equal columns */
.packwords2{margin:0 0 clamp(18px,2vw,28px)}
.packwords2 .pw-l{margin:0 0 .6rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--ink-soft)}
.pw-cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.pw-cols > div{padding:.9rem 1.1rem}
.pw-cols > div + div{border-left:1px solid var(--line)}
.pw-cols b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;text-transform:uppercase;color:var(--ink)}
.pw-cols span{display:block;margin-top:.35rem;font-size:.95rem;color:var(--ink-soft)}
@media(max-width:720px){ .pw-cols{grid-template-columns:1fr} .pw-cols > div + div{border-left:0;border-top:1px solid var(--line)} }

/* pack-word legend in the same card style as the nap guide */
.pw-naps{margin-top:0}
.pw-naps .bars{display:flex;gap:6px}
.pw-naps .bars i{margin-bottom:.4rem}
.pw-naps b{text-transform:uppercase}
.naps div > span.t{font-weight:500;color:var(--ink)}
#fabrics.hsec{padding-top:clamp(28px,3.4vw,52px)}   /* sits right under the "How to choose" band, no double gap */

/* For stockists: real shelf photo beside the copy */
.hstock-photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.shelfpic{min-height:520px;border-radius:2px;background:#ebe4d8 url(photos/shelf-wall.jpg) center 35%/cover no-repeat}
.hstock-photo .hlist{margin-top:1.6rem}
@media(max-width:980px){ .shelfpic{min-height:360px} }
.hfoot nav a:hover{color:var(--kraft)}   /* footer links hover to kraft, like the buttons */
.hfoot nav a{transition:color .2s}

/* homepage category photos: the original photos in greyscale, colour on hover (so 8 different
   backgrounds read as one set). Phones have no hover, so they always show colour. */
.hcard .img.mono{background-size:cover;background-position:center;padding:0;transition:filter .45s ease,transform .5s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){
  .hcard .img.mono{filter:grayscale(1) contrast(.95) brightness(1.04)}
  .hcard .img.mono.lift{filter:grayscale(1) brightness(1.5) contrast(.9)}
  .hcard:hover .img.mono,.hcard:focus-visible .img.mono{filter:none}
  .hcard:hover .img.mono.lift,.hcard:focus-visible .img.mono.lift{filter:brightness(1.45) contrast(.92)}
}
/* softer: most of the colour drained (not all), so the photos still match but keep a hint of life */
@media(hover:hover){
  .hcard .img.mono{filter:grayscale(.7) contrast(.97) brightness(1.03)}
  .hcard .img.mono.lift{filter:grayscale(.7) brightness(1.55) contrast(.9)}
}
.hquote mark{background:none;color:var(--kraft-text)}   /* the one line to remember */
.hquote mark{color:#b59779}   /* Chris chose the light kraft 2026-10-03 */

/* ================= fabric pages: full-size sleeve table (one row per length) ================= */
.stable{border-top:1px solid var(--line-2)}
.st-row{display:grid;grid-template-columns:minmax(150px,1.3fr) 1fr .8fr 1fr 1.25fr 1.25fr;gap:clamp(10px,1.4vw,24px);align-items:center;
  padding:clamp(10px,1vw,14px) clamp(6px,.8vw,12px);border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink)}
.st-head{padding-top:.6rem;padding-bottom:.6rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--ink-soft)}
.st-th i{display:block;height:58px;border-radius:2px;background:#efe9df center/contain no-repeat}
.st-len{font-family:var(--display);font-size:clamp(1.35rem,1.7vw,1.6rem);line-height:1}
.st-tag{display:block;width:max-content;margin-top:.35rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;background:var(--ink);color:var(--cream);padding:.32em .5em;border-radius:2px;line-height:1}
.st-row small{display:block;font-size:.82rem;color:var(--ink-soft)}
.st-sku{font-variant-numeric:tabular-nums;font-weight:500;font-size:1rem;user-select:all;white-space:nowrap}
.st-none{color:var(--ink-soft);font-size:.92rem}
.fitboxes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(24px,3vw,40px)}
.fitboxes .corebox{margin-top:0;grid-template-columns:minmax(0,150px) minmax(0,1fr)}
.fitboxes:has(.corebox:only-child){grid-template-columns:1fr}
@media(max-width:900px){
  .st-head{display:none}
  .stable{border-top:0;display:grid;gap:10px}
  .st-row{grid-template-columns:1fr 1fr;gap:.5rem 1rem;border:1px solid var(--line);border-radius:3px;padding:14px}
  .st-th{grid-column:1/-1} .st-th i{height:48px}
  .st-len{grid-column:1/-1}
  .st-row [data-l]::before{content:attr(data-l);display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--ink-soft);margin-bottom:.1rem}
  .fitboxes{grid-template-columns:1fr}
}

/* ================= fabric pages: wide sleeve cards (match the mini cards; both codes on each) ================= */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.wcard{display:flex;flex-direction:column;background:#efe9df;border-radius:3px;padding:clamp(14px,1.6vw,22px)}
.wcard .tag{align-self:flex-start;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;background:var(--ink);color:var(--cream);padding:.35em .55em;border-radius:2px;line-height:1;margin-bottom:.6rem}
.wcard .tag.ghost{visibility:hidden}
.w-shot{display:block;aspect-ratio:3/1;background:center/contain no-repeat;filter:drop-shadow(0 12px 16px rgba(35,31,32,.12));margin:.4rem 0 1rem}
.wcard .sz{font-family:var(--display);font-size:clamp(1.6rem,2vw,1.9rem);line-height:1;color:var(--ink)}
.w-meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.45rem;font-size:.95rem;font-weight:500;color:var(--ink)}
.w-codes{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:1rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);align-items:baseline}
.w-codes dt{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--ink-soft)}
.w-codes dd{margin:0;font-variant-numeric:tabular-nums;font-size:.98rem}
.w-codes b{font-weight:500;user-select:all;white-space:nowrap}
.w-codes em{font-style:normal;color:var(--ink-soft)}
@media(max-width:1100px){ .wgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .wgrid{grid-template-columns:1fr} }
/* sleeve card with a 3 pack: single + 3 pack photos side by side, labelled */
.w-shots{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;column-gap:clamp(8px,1vw,14px);margin:.4rem 0 1rem}
.w-shots .w-shot{margin:0;aspect-ratio:auto;height:clamp(70px,6.5vw,110px)}
.w-shots small{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--ink-soft);text-align:center;margin-top:.4rem}

/* ================= fabric pages: sleeves grouped by LENGTH (one shelf row per length, a tile per pack) ================= */
.lgroups{display:grid;gap:clamp(12px,1.4vw,18px)}
.lgroup{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:clamp(14px,2vw,32px);align-items:center;background:#efe9df;border-radius:3px;padding:clamp(14px,1.6vw,22px)}
.lg-head{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.lg-head .sz{font-family:var(--display);font-size:clamp(2rem,2.6vw,2.6rem);line-height:1;color:var(--ink)}
.lg-head .tag{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;background:var(--ink);color:var(--cream);padding:.35em .55em;border-radius:2px;line-height:1}
.lg-ends{font-size:.9rem;color:var(--ink-soft)}
.lg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)}
.lt{display:flex;flex-direction:column;background:var(--cream);border-radius:3px;padding:clamp(10px,1vw,14px)}
.lt-shot{display:block;height:clamp(80px,7vw,120px);background:center/contain no-repeat;filter:drop-shadow(0 10px 14px rgba(35,31,32,.12));margin-bottom:.7rem}
.lt-l{font-size:.9rem;font-weight:500;color:var(--ink)}
.lt-sku{margin-top:.25rem;font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--ink);user-select:all;white-space:nowrap}
@media(max-width:820px){
  .lgroup{grid-template-columns:1fr}
  .lg-head{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem}
  .lg-tiles{grid-template-columns:1fr 1fr}
}

/* ================= fabric pages: sleeves as a TO-SCALE size chart ================= */
.scale{background:#efe9df;border-radius:3px;padding:clamp(8px,1vw,14px) clamp(14px,1.8vw,26px)}
.sc-row{display:grid;grid-template-columns:minmax(170px,.9fr) 2.2fr 1.4fr minmax(200px,1fr);gap:clamp(12px,1.6vw,28px);align-items:center;padding:clamp(12px,1.2vw,18px) 0;border-bottom:1px solid var(--line)}
.sc-row:last-child{border-bottom:0}
.sc-head{padding:.5rem 0;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--ink-soft)}
.sc-len .sz{display:block;font-family:var(--display);font-size:clamp(1.6rem,2vw,2rem);line-height:1;color:var(--ink)}
.sc-len .tag{display:inline-block;margin-top:.4rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;background:var(--ink);color:var(--cream);padding:.32em .5em;border-radius:2px;line-height:1}
.sc-len small{display:block;margin-top:.4rem;font-size:.84rem;line-height:1.35;color:var(--ink-soft)}
.sc-img img{display:block;height:auto;filter:drop-shadow(0 8px 12px rgba(35,31,32,.14))}
.sc-codes{display:grid;gap:.3rem}
.sc-codes span{display:grid;grid-template-columns:3.6rem 1fr;align-items:baseline}
.sc-codes i{font-style:normal;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--ink-soft)}
.sc-codes b{font-weight:500;font-variant-numeric:tabular-nums;font-size:.97rem;user-select:all;white-space:nowrap}
.sc-codes em{font-style:normal;color:var(--ink-soft);font-size:.93rem}
.sc-note{margin:.6rem 0 0;font-size:.82rem;color:var(--ink-soft)}
@media(max-width:900px){
  .sc-head{display:none}
  .sc-row{grid-template-columns:1fr 1fr;gap:.7rem 1rem}
  .sc-len,.sc-codes{grid-column:1/-1}
}
/* length groups v2: fixed columns + images to scale */
.lg-colhead{display:grid;grid-template-columns:minmax(150px,220px) 1fr 1fr 1fr;column-gap:clamp(14px,2vw,32px);padding:0 clamp(14px,1.6vw,22px);
  font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink-soft)}
.lg-colhead span:not(:first-child){padding-left:clamp(10px,1vw,14px)}
.lgroup{grid-template-columns:minmax(150px,220px) 3fr}
.lg-tiles{column-gap:clamp(14px,2vw,32px)}
.lt-shot{display:flex;align-items:center;height:clamp(64px,5.5vw,96px);margin-bottom:.7rem}
.lt-shot img{display:block;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(35,31,32,.12))}
.lt-empty{background:none}
.lt-none{background:none;border:1px dashed var(--line-2);justify-content:center;align-items:center;color:var(--ink-soft);font-size:.9rem}
@media(max-width:820px){ .lg-colhead{display:none} .lt-empty{display:none} }
/* length groups v3: two columns (Single · 3 pack); 44mm shown inside the 230 single tile */
.lg-colhead{grid-template-columns:minmax(150px,220px) 1fr 1fr}
.lg-tiles{grid-template-columns:1fr 1fr}
.lt-44{display:block;margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line)}
.lt-44 i{display:block;font-style:normal;font-size:.82rem;color:var(--ink-soft)}
/* 3 packs drawn at the same scale as their single (no height cap shrinking them) */
.lt-shot{height:auto;min-height:clamp(64px,5.5vw,96px);align-items:center}
.lt-shot img{max-height:none}
.lg-tiles{align-items:stretch}
.lt{justify-content:flex-start}
.lt.lt-none{justify-content:center;align-items:center}
/* no 3 pack: the single tile spans both columns instead of an empty placeholder box */
.lt.lt-wide{grid-column:1 / -1}
.lt.lt-wide .lt-shot img{max-width:50%}
.lt-only{display:block;margin-top:.45rem;font-size:.84rem;color:var(--ink-soft)}
/* keep the wide (single-only) tile's picture on the same scale as the others */
.lt.lt-wide .lt-shot img{max-width:none}
.lt.lt-wide .lt-shot{width:calc((100% - clamp(14px,2vw,32px)) / 2)}
/* every length row the same height: a fixed picture area in every tile, images centred in it, scale kept */
.lgroups .lt-shot{height:clamp(140px,10.5vw,190px);min-height:0;align-items:center}
.lgroups .lt-shot img{max-height:100%}
.lgroups .lt{min-height:0}
.lgroups{grid-template-rows:auto;grid-auto-rows:1fr}   /* header row auto, every length row equal height */
.lgroups .lgroup{align-items:stretch} .lgroups .lg-head{justify-content:center} .lgroups .lg-tiles{align-items:stretch}
/* sleeves: no outer box; rows divided by a thin line; product tiles carry a faint tint of the fabric colour */
.lgroups{gap:0}
.lgroups .lgroup{background:none;border-radius:0;border-bottom:1px solid var(--line);padding-left:0;padding-right:0}
.lgroups .lgroup:first-of-type{border-top:1px solid var(--line)}
.lgroups .lt{background:var(--fab-tint,#efe9df)}
.lg-colhead{padding-left:0;padding-right:0}
/* tint dropped (Chris 2026-10-03): sleeve tiles match the mini cards */
.lgroups .lt{background:#efe9df}
/* fabric colour, more visible (Chris 2026-10-03): a light version of the real pack colour behind
   every product in the range (minis + sleeves), mixed from --fab so 5mm reads red, not pink */
body.v2[style*="--fab"] .scard,
body.v2[style*="--fab"] .lgroups .lt{background:color-mix(in srgb, var(--fab) 16%, #f4efe8)}
body.v2[style*="--fab"] .scard,
body.v2[style*="--fab"] .lgroups .lt{background:color-mix(in srgb, var(--fab) 26%, #eadfcd)}
/* LOOK B (compare): fabric colour on the PAGE background, product cards light. Add ?look=b to the URL. */
body.v2.look-b[style*="--fab"]{background:color-mix(in srgb, var(--fab) 22%, #eadfcd)}
body.v2.look-b .topbar-slim{background:color-mix(in srgb, var(--fab) 22%, #eadfcd)}
body.v2.look-b[style*="--fab"] .scard,
body.v2.look-b[style*="--fab"] .lgroups .lt{background:#f6f1e9}
body.v2.look-b .lgroups .lgroup,body.v2.look-b .lgroups .lgroup:first-of-type{border-color:rgba(35,31,32,.14)}
body.v2.look-b .bestspec,body.v2.look-b .corebox,body.v2.look-b .otherfab a{border-color:rgba(35,31,32,.16)}
/* LOOK B v2: no boxes on the coloured page; products float on the fabric colour, text below */
body.v2.look-b[style*="--fab"] .scard,
body.v2.look-b[style*="--fab"] .lgroups .lt{background:transparent;padding-left:0;padding-right:0;border-radius:0}
body.v2.look-b .scard .shot,body.v2.look-b .lgroups .lt-shot img{filter:drop-shadow(0 16px 20px rgba(35,31,32,.22))}
body.v2.look-b .scard .sku,body.v2.look-b .lt-44{border-color:rgba(35,31,32,.18)}
body.v2.look-b .sgrid{column-gap:clamp(24px,3vw,48px)}
body.v2.look-b .lgroups .lt-shot{justify-content:flex-start}
/* LOOK B v3: a shelf. Packs stand on a common baseline with a contact shadow and a darker ledge under them */
body.v2.look-b .scard .shot{background-position:center bottom;position:relative}
body.v2.look-b .scard .shot,
body.v2.look-b .lgroups .lt-shot{
  box-shadow:inset 0 -10px 0 -4px color-mix(in srgb, var(--fab) 34%, #8a7766);   /* the ledge */
  border-bottom:0;padding-bottom:10px}
body.v2.look-b .lgroups .lt-shot{align-items:flex-end;height:clamp(150px,11vw,200px)}
body.v2.look-b .scard .shot{filter:none}
body.v2.look-b .scard .shot{background-size:auto 86%;background-origin:content-box;padding-bottom:10px;
  -webkit-filter:drop-shadow(0 6px 4px rgba(35,31,32,.28)) drop-shadow(0 18px 18px rgba(35,31,32,.14))}
body.v2.look-b .lgroups .lt-shot img{filter:drop-shadow(0 6px 4px rgba(35,31,32,.28)) drop-shadow(0 18px 18px rgba(35,31,32,.14))}
/* fit + end caps: no white box on the coloured page */
body.v2.look-b .corebox{border:0;border-top:1px solid rgba(35,31,32,.18);border-radius:0;padding-left:0;padding-right:0}
body.v2.look-b .otherfab a{border-color:rgba(35,31,32,.18)}
/* LOOK B v4: no ledge; hard studio light, crisp cast shadow down-right (Chris's Dacron reference) */
body.v2.look-b .scard .shot,
body.v2.look-b .lgroups .lt-shot{box-shadow:none;padding-bottom:0}
body.v2.look-b .scard .shot{-webkit-filter:none;filter:drop-shadow(14px 12px 3px color-mix(in srgb, var(--fab) 55%, #2a1f1c))}
body.v2.look-b .lgroups .lt-shot img{filter:drop-shadow(14px 12px 3px color-mix(in srgb, var(--fab) 55%, #2a1f1c))}
body.v2.look-b{--cast:color-mix(in srgb, color-mix(in srgb, var(--fab) 35%, #000) 38%, transparent)}
body.v2.look-b .scard .shot{filter:drop-shadow(22px 16px 5px var(--cast))}
body.v2.look-b .lgroups .lt-shot img{filter:drop-shadow(22px 16px 5px var(--cast))}
/* look B v5: shadows are baked into the studio images, so no CSS shadow */
body.v2.look-b .scard .shot,body.v2.look-b .lgroups .lt-shot img{filter:none!important;-webkit-filter:none!important}
body.v2.look-b .lgroups .lt-shot{overflow:visible}
/* look B: back to a soft, natural shadow (generated cast shadows looked pasted on) */
body.v2.look-b .scard .shot{filter:drop-shadow(0 14px 18px rgba(35,31,32,.20))!important}
body.v2.look-b .lgroups .lt-shot img{filter:drop-shadow(0 14px 18px rgba(35,31,32,.20))!important}

/* ================= STUDIO prototype (?look=studio): one colour sweep, wall + floor ================= */
body.v2.look-studio{--floor:color-mix(in srgb, var(--fab) 34%, #d3c4ad)}
body.v2.look-studio .scard .shot,body.v2.look-studio .lgroups .lt-shot img{filter:none!important}
/* minis: cards touch so the floor runs as one strip; product stands on it */
body.v2.look-studio .sgrid{column-gap:0}
body.v2.look-studio .scard{padding:0;background:transparent}
body.v2.look-studio .scard > :not(.shot){margin-left:clamp(10px,1.2vw,18px);margin-right:clamp(10px,1.2vw,18px)}
body.v2.look-studio .scard .tag{margin-top:0}
body.v2.look-studio .scard .shot{aspect-ratio:1/1;margin-bottom:1rem;
  background-color:transparent;background-repeat:no-repeat;background-size:auto 78%;background-position:28% 92%}
body.v2.look-studio .scard .shot{box-shadow:inset 0 -26px 0 0 transparent}
body.v2.look-studio .sgrid{background:linear-gradient(to bottom, transparent 0, transparent 0)}
body.v2.look-studio .scard .shot{background-image:none}
/* the floor: drawn on the shot box itself (lower 26%), so every card's floor lines up into one strip */
body.v2.look-studio .scard .shot{position:relative}
body.v2.look-studio .scard .shot::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:var(--floor);z-index:0}
body.v2.look-studio .scard .shot::after{content:"";position:absolute;inset:0;background-image:var(--img);background-repeat:no-repeat;background-size:auto 78%;background-position:28% 90%;z-index:1}
/* sleeves: tiles touch, the floor runs under both columns */
body.v2.look-studio .lgroups .lg-tiles{column-gap:0}
body.v2.look-studio .lgroups .lt{background:transparent;padding:0}
body.v2.look-studio .lgroups .lt > :not(.lt-shot){margin-left:clamp(10px,1.2vw,18px);margin-right:clamp(10px,1.2vw,18px)}
body.v2.look-studio .lgroups .lt-shot{position:relative;height:clamp(170px,12vw,220px);align-items:flex-end;padding:0 0 4% clamp(10px,1.2vw,18px);
  background:linear-gradient(to bottom, transparent 0 68%, var(--floor) 68% 100%)}
body.v2.look-studio .lgroups .lt-shot img{position:relative;z-index:1}
/* studio v2: the floor continues to the bottom of each row (text sits on the floor), like the reference */
body.v2.look-studio .scard{overflow:hidden}
body.v2.look-studio .scard .shot::before{height:calc(26% + 2000px);bottom:-2000px}
body.v2.look-studio .scard > :not(.shot){position:relative;z-index:1}
body.v2.look-studio .lgroups .lt-shot{background:none}
body.v2.look-studio .lgroups .lgroup{border:0!important;margin-bottom:clamp(14px,1.6vw,22px);
  background:linear-gradient(to bottom, transparent calc(clamp(14px,1.6vw,22px) + clamp(170px,12vw,220px) * .70), var(--floor) 0)}
body.v2.look-studio .lgroups .lg-head{position:relative;z-index:1;padding-left:clamp(10px,1.2vw,18px)}

/* ================= STUDIO v3: full-bleed floors, deeper colour, tighter rows ================= */
body.v2.look-studio{background:color-mix(in srgb, var(--fab) 30%, #e6d9c4)!important;
  --floor:color-mix(in srgb, var(--fab) 44%, #cbb99f)}
body.v2.look-studio .topbar-slim{background:color-mix(in srgb, var(--fab) 30%, #e6d9c4)}
/* fade the floor out at the bottom instead of a hard edge */
body.v2.look-studio{--floorfill:linear-gradient(to bottom, var(--floor) 0, var(--floor) calc(100% - 70px), color-mix(in srgb, var(--floor) 0%, transparent) 100%)}

/* minis: one floor strip under the whole row, running off both screen edges */
body.v2.look-studio .scard{overflow:visible;position:relative;container-type:inline-size}
body.v2.look-studio .scard .shot::before{display:none}
body.v2.look-studio .scard .tag{height:1.2rem;margin-bottom:.6rem;box-sizing:border-box}
body.v2.look-studio .scard::before{content:"";position:absolute;left:0;right:0;bottom:0;top:calc(1.8rem + 70cqw);background:var(--floorfill);z-index:0}
body.v2.look-studio .scard:first-child::before{left:-100vmax}
body.v2.look-studio .scard:last-child::before{right:-100vmax}
body.v2.look-studio .scard .shot::after{background-position:30% 86%}
body.v2.look-studio .scard > *{position:relative;z-index:1}

/* sleeves: each length row's floor runs edge to edge; no forced equal heights (less empty floor) */
body.v2.look-studio .lgroups{grid-auto-rows:auto}
body.v2.look-studio .lgroups .lgroup{background:none!important;position:relative;padding-bottom:clamp(18px,2vw,28px)}
body.v2.look-studio .lgroups .lgroup::before{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;
  top:calc(clamp(14px,1.6vw,22px) + clamp(170px,12vw,220px) * .66);background:var(--floorfill);z-index:0}
body.v2.look-studio .lgroups .lgroup > *{position:relative;z-index:1}
body.v2.look-studio .lgroups .lt-shot{padding-bottom:7%}
body.v2.look-studio .lgroups .lt{min-height:0}

/* ================= STUDIO v4: ONE horizon. Wall above the minis, floor everywhere below it ================= */
body.v2.look-studio #range{position:relative;clip-path:inset(0 -100vmax 0 -100vmax)}
body.v2.look-studio .scard::before{background:var(--floor);bottom:-6000px}            /* floor runs down to the end of the range */
body.v2.look-studio .lgroups .lgroup::before{display:none}                          /* no more per-row walls */
body.v2.look-studio #range::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:90px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--floor) 0%, transparent), color-mix(in srgb, var(--fab) 30%, #e6d9c4))}
body.v2.look-studio .lgroups .lgroup{margin-bottom:0;border-bottom:1px solid rgba(35,31,32,.10)!important}
body.v2.look-studio .lg-colhead,body.v2.look-studio .rgroup-head{position:relative;z-index:1}
/* studio v5: no fade at the end; fit boxes above the floor; floor ends cleanly just after them */
body.v2.look-studio #range::after{display:none}
body.v2.look-studio .fitboxes,body.v2.look-studio .rnotes{position:relative;z-index:1}
body.v2.look-studio #range{padding-bottom:clamp(36px,4vw,56px)}
body.v2.look-studio .corebox{border-top-color:rgba(35,31,32,.14)}
/* studio: the length label lines up with the products in every row (not centred on rows of different height) */
body.v2.look-studio .lgroups .lgroup{align-items:start}
body.v2.look-studio .lgroups .lg-head{justify-content:flex-start;padding-top:calc(clamp(170px,12vw,220px) * .55)}
/* studio: the tag sits right under the pack, on the floor (not up in the empty wall space) */
body.v2.look-studio .scard{display:flex;flex-direction:column}
body.v2.look-studio .scard .shot{order:-1;margin-bottom:.9rem}
body.v2.look-studio .scard .tag{margin:0 0 .5rem}
/* cores: our own to-scale diagram instead of the photo with tiny icons */
.coresvg{display:block;width:100%;max-width:240px;height:auto;color:var(--ink)}
.coresvg text{font-family:var(--display);font-size:20px;fill:currentColor}
.coresvg text.sub{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:currentColor;opacity:.75}
.fitboxes .corebox{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
/* studio: room above "Other fabrics"; label column a little narrower so the singles sit closer */
body.v2.look-studio #range + section{padding-top:clamp(40px,5vw,72px)}
body.v2.look-studio .lgroup{grid-template-columns:minmax(130px,170px) 3fr}
body.v2.look-studio .lg-colhead{grid-template-columns:minmax(130px,170px) 1fr 1fr}
.coresvg{max-width:320px} .fitboxes .corebox{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
/* one line above fitment, lighter core diagram */
body.v2.look-studio .fitboxes .corebox{border-top:0}
.coresvg{max-width:240px;color:var(--ink-soft)}
.coresvg circle[stroke-width="7"]{stroke-width:4}
.fitboxes .corebox{grid-template-columns:minmax(0,240px) minmax(0,1fr)}

/* title etch: the hairline stroke must match the coloured page, not cream (it showed as white speckles) */
body.v2.look-b .etch{-webkit-text-stroke-color:color-mix(in srgb, var(--fab) 22%, #eadfcd)}
body.v2.look-studio .etch{-webkit-text-stroke-color:color-mix(in srgb, var(--fab) 30%, #e6d9c4)}

/* Best for: stacked rows (size | job + description), so it fills its column like the details table */
.bestspec .uses{grid-template-columns:1fr;gap:0;margin-top:1.4rem;border-top:1px solid var(--line)}
.bestspec .uses .u{display:grid;grid-template-columns:minmax(110px,30%) 1fr;column-gap:1.2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.bestspec .uses .u .r{grid-row:1 / span 2;margin:0;font-size:1.05rem}
.bestspec .uses .u b{font-size:1.5rem}
.bestspec .uses .u > span:last-child{margin-top:.3rem}
body.v2.look-b .bestspec .uses,body.v2.look-b .bestspec .uses .u{border-color:rgba(35,31,32,.14)}

/* ROWS variant (?look=studio&rows): every sleeve length gets its own wall + floor, like the minis */
body.v2.look-rows .lgroups .lgroup::before{display:block;content:"";position:absolute;left:-100vmax;right:-100vmax;top:0;bottom:0;z-index:0;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--fab) 30%, #e6d9c4) 0, color-mix(in srgb, var(--fab) 30%, #e6d9c4) calc(clamp(14px,1.6vw,22px) + clamp(170px,12vw,220px) * .62), var(--floor) 0)}
body.v2.look-rows .lgroups .lgroup{border-bottom:0!important;padding-top:clamp(14px,1.6vw,22px)}
body.v2.look-rows .lg-colhead{padding-bottom:.4rem}
/* rows variant: the minis' floor ends under the minis, so "Full-size sleeves" sits on the wall */
body.v2.look-rows .scard::before{bottom:calc(-1 * clamp(18px,2vw,28px))}
body.v2.look-rows .rgroup + .rgroup{margin-top:clamp(64px,7vw,104px)}
/* studio: % padding is measured from the WIDTH, so wide (single-only) tiles lifted their pack onto the wall.
   Use a fixed share of the picture height instead: every pack's base sits at the same depth on the floor. */
body.v2.look-studio .lgroups .lt-shot{padding-bottom:calc(clamp(170px,12vw,220px) * .16)}
/* minis floor at any width: every card's floor runs edge to edge from its own photo's horizon,
   so a 2x2 (or 1-up) grid still gets one clean wall/floor line per row */
body.v2.look-studio .scard::before{left:-100vmax!important;right:-100vmax!important;top:calc(100cqw * .62)}
body.v2.look-studio .sgrid{row-gap:0}
body.v2.look-studio .scard{padding-bottom:clamp(18px,2vw,28px)}

/* ===== studio: reviewer fixes (2026-10-03) ===== */
/* 1 · the one horizon behind the minis is a soft sweep, not a hard line */
body.v2.look-studio .scard::before{top:calc(100cqw * .62 - 40px)!important;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--floor) 0%, transparent) 0, var(--floor) 80px)!important}
/* 2 · less space between the minis and the first sleeve row */
body.v2.look-studio .rgroup + .rgroup{margin-top:clamp(28px,3vw,44px)}
body.v2.look-studio .rgroup-head{margin-bottom:.4rem}
body.v2.look-studio .lg-colhead{margin-bottom:-.4rem}
/* 3 · secondary text darker and a touch larger, readable on the coloured floor */
body.v2.look-studio .lg-ends,body.v2.look-studio .lt-44 i,body.v2.look-studio .lg-colhead,
body.v2.look-studio .scard .sku::before,body.v2.look-studio .rgroup-head p{color:rgba(35,31,32,.82)}
body.v2.look-studio .lg-ends{font-size:.95rem}
/* 4 · "Single only" sits quietly in the empty 3-pack column, on the same lines as the 3-pack text */
.lt.lt-single-only{background:transparent!important}
.lt-single-only .lt-l{color:var(--ink-soft)}
.lt-single-only .lt-sku{color:var(--ink-soft);user-select:none}
/* horizon: back to a crisp line (only 6px soft) - the 80px sweep made the minis look like they float */
body.v2.look-studio .scard::before{top:calc(100cqw * .62 - 3px)!important;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--floor) 0%, transparent) 0, var(--floor) 6px)!important}
/* minis: pack anchored left (never cropped), its floor shadow runs on past the card edge */
body.v2.look-studio .scard .shot{overflow:visible}
body.v2.look-studio .scard .shot::after{left:4%;right:-75%;background-position:left 90%;background-size:auto 78%}
/* details table: wider values (no wrapping), pack-word chip */
body.v2 .bestspec .spec .row{grid-template-columns:minmax(110px,32%) 1fr}
.pwchip{display:inline-block;width:22px;height:7px;border-radius:1px;margin-right:.6rem;vertical-align:.18em}
.pwv{font-weight:500;text-transform:uppercase;letter-spacing:.06em}
/* frames: per-row line + matching-frames strip */
.lg-frame{display:block;font-size:.9rem;color:rgba(35,31,32,.82);margin-top:.15rem}
.mframes{padding-block:clamp(36px,4vw,60px) 0}
.mf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(12px,1.6vw,22px)}
.mf-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:1rem;border:1px solid rgba(35,31,32,.14);border-radius:3px;transition:border-color .2s}
.mf-card:hover{border-color:var(--ink)}
.mf-shot{display:block;aspect-ratio:4/3;background:center/contain no-repeat;margin-bottom:.8rem;filter:drop-shadow(0 10px 12px rgba(35,31,32,.18))}
.mf-card b{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.05}
.mf-sz{margin-top:.3rem;font-size:.92rem;color:var(--ink)}
.mf-sku{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(35,31,32,.14);font-size:.88rem;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.mf-grid{grid-template-columns:repeat(var(--n,5),1fr)}
.mf-card{border:0;padding:0}
.mf-shot{aspect-ratio:1/1;margin-bottom:1rem}
.mframes{padding-bottom:clamp(40px,5vw,72px)}
@media(max-width:900px){ .mf-grid{grid-template-columns:repeat(2,1fr)} }
/* frames: studio images with the same baked floor shadow; stand on a common baseline */
.mf-shot{filter:none!important;background-position:20% bottom;background-size:contain;aspect-ratio:5/4}
/* frames: back to the plain cut-outs (studio floor shadows looked fake on hanging frames) */
.mf-shot{background-position:center;aspect-ratio:1/1;filter:drop-shadow(0 10px 12px rgba(35,31,32,.16))!important}
.mf-shot{filter:none!important}
/* frames float above the studio floor; their shadows lie on it */
body.v2.look-studio .mframes{position:relative}
body.v2.look-studio .mframes::before{content:"";position:absolute;left:-100vmax;right:-100vmax;top:0;bottom:0;background:var(--floor);z-index:0}
body.v2.look-studio .mframes > *{position:relative;z-index:1}
.mf-shot{aspect-ratio:4/5;background-position:30% bottom;background-size:contain}
.mf-shot{background-position:center 70%}
.mf-shot{background-position:25% bottom}
/* products on the floor (minis, sleeves, frames); information on the wall colour (fitment, other fabrics) */
body.v2.look-studio .mframes{padding-top:0}
.fitsec{padding-block:clamp(48px,6vw,88px) 0}
.fitsec .fitboxes{margin-top:0}
.fitsec .corebox{grid-template-columns:minmax(0,200px) minmax(0,1fr)!important;border-top:1px solid rgba(35,31,32,.14)!important;padding-top:1.4rem}
.fitsec .corebox p{max-width:none}
.fitsec + section{padding-top:clamp(56px,6vw,96px)}
.mf-shot{background-position:25% bottom!important;aspect-ratio:3/4}
/* frames: centre the FRAME (not frame+shadow) over its text column */
.mf-shot{position:relative;background:none!important}
.mf-shot img{position:absolute;bottom:0;left:50%;width:auto;max-width:none}
.mf-shot img{left:0}   /* frames line up with the text on the left */
/* frames: their own studio set. Heading on the wall, frames stand on the floor (horizon just behind their bases) */
body.v2.look-studio .mframes::before{display:none}
body.v2.look-studio .mframes{padding-top:clamp(56px,6vw,96px)}
body.v2.look-studio .mf-card{position:relative;container-type:inline-size}
body.v2.look-studio .mf-card::before{content:"";position:absolute;z-index:0;left:-100vmax;right:-100vmax;
  top:calc(100cqw * 4 / 3 * .80);bottom:calc(-1 * clamp(40px,5vw,72px));background:var(--floor)}
body.v2.look-studio .mf-card > *{position:relative;z-index:1}
body.v2.look-studio .mf-grid{position:relative;z-index:0}
/* "Single" / "3 pack" column labels: clearly readable on the coloured floor */
body.v2 .lg-colhead{font-size:.95rem;font-weight:600;letter-spacing:.16em;color:var(--ink)!important}
body.v2.look-studio .scard .shot::after{right:-40%}
/* PREVIEW (&big): rows sized to their content, packs on a fixed larger real-world scale */
body.v2.look-big .lgroups .lt-shot{height:auto!important;min-height:0;padding-bottom:clamp(10px,1vw,16px)!important;padding-top:clamp(18px,2vw,30px)}
body.v2.look-big .lgroups{grid-auto-rows:auto!important}
body.v2.look-big .lgroups .lt{overflow:visible}
body.v2.look-big .lgroups .lt-shot img{max-height:none!important}
/* pack type reads from each tile's own label (column headings removed) */
.lt-l b{font-weight:700;letter-spacing:.02em;font-size:1.06em;color:var(--ink)}

/* ================= Roller Frames page (v2 studio) ================= */
.rf-range .mf-shot{aspect-ratio:3 / var(--rf-aspect,4)}
.rf-range .mf-shot img{left:0!important;transform:none!important}
.rf-group{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.9rem);margin:clamp(28px,3vw,44px) 0 1rem;position:relative;z-index:1}
.rf-note{display:block;margin-top:.3rem;font-size:.88rem;color:var(--ink-soft)}
.rf-card .tag{position:absolute;top:0;left:0;z-index:2}
body.v2.look-studio .rf-range .mf-card::before{top:calc(100cqw * var(--rf-aspect,4) / 3 * .80)}
.rf-feat .corebox img{aspect-ratio:1/1;object-fit:cover}
.otherfab:has(a:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
/* full-size sleeves: label their codes "SKU" the same way as the minis */
.lgroups .lt-sku::before{content:"SKU";font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--ink-soft);margin-right:.5rem}
.lgroups .lt-single-only .lt-sku::before{content:none}
/* frames page: each row's floor ends just under that row, so the next group heading sits on the wall */
body.v2.look-studio .rf-range .mf-card::before{bottom:calc(-1 * clamp(18px,2vw,28px))}
.rf-range .rf-group{margin-top:clamp(56px,6vw,88px)}
/* every product code on every v2 page gets the small "SKU" label (frames, 44mm lines, all) */
.mf-sku::before,.lt-44 .lt-sku::before{content:"SKU";font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--ink-soft);margin-right:.5rem}
.fitsec .corebox{align-items:start}   /* text starts level with the top of its photo, so both columns line up */
/* coming-soon badge (Rust Converter) */
.soonbadge{display:inline-block;margin:0 0 .8rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;background:var(--ink);color:var(--cream);padding:.4em .7em;border-radius:2px}
.fitsec .corebox img[src*="mpa-approved"]{object-fit:contain;background:transparent}
.fitsec .corebox img{aspect-ratio:1/1;object-fit:cover;width:100%}
.rf-group a{color:inherit;text-decoration:none} .rf-group a:hover{color:var(--kraft-text)}
.rf-soon-line{position:relative;z-index:1;margin:0 0 clamp(24px,3vw,40px);color:var(--ink-soft)}
.rf-soon-line a{color:var(--ink)}
.fitsec .fitboxes:has(.corebox:nth-child(3)){grid-template-columns:repeat(3,1fr)}
.fitsec .fitboxes:has(.corebox:nth-child(3)){grid-template-columns:1fr 1fr}   /* 3 features: wrap to 2 columns, not 3 cramped ones */
.rf-soon .mf-shot{display:flex;align-items:flex-end;justify-content:flex-start}
.rf-card .mf-sku:empty{display:none}
/* hub: one pack per product, sized to sit inside its own column */
.rf-hub .mf-shot img{height:auto!important;max-height:88%;max-width:78%}
/* horizon higher behind the products, so they stand well INTO the floor instead of on its front edge */
body.v2.look-studio .rf-range .mf-card::before{top:calc(100cqw * var(--rf-aspect,4) / 3 * .62)}
.fitsec .corebox{grid-template-columns:minmax(0,220px) minmax(0,1fr)!important}

/* car-test video link + QR (Fussy Filla features) */
.corebox .watchlink{display:inline-flex;align-items:center;gap:12px;margin-top:1rem;text-decoration:none;color:inherit}
.corebox .watchlink .qr{width:72px!important;height:72px!important;aspect-ratio:1;object-fit:contain;background:#fff;padding:4px;border-radius:4px;flex:none}
.corebox .watchlink b{display:block;text-decoration:underline;text-underline-offset:3px}
.corebox .watchlink small{display:block;opacity:.7;font-size:.85em;margin-top:2px}
@media (max-width:700px){.corebox .watchlink .qr{display:none}}

/* feature boxes: one per row on narrower screens (the !important 2-col rules above beat the old media queries) */
@media (max-width:1100px){
  .fitsec .fitboxes,.fitsec .fitboxes:has(.corebox:nth-child(3)){grid-template-columns:1fr}
  .fitsec .corebox{grid-template-columns:minmax(0,200px) minmax(0,1fr)!important}
}
@media (max-width:560px){
  .fitsec .corebox{grid-template-columns:1fr!important}
  .fitsec .corebox img{max-width:260px}
}

/* data sheets strip (Fussy Filla, Easy Flow Plus): laid out like one more feature row, so it sits on the
   same rule, the same gap and the same text column as the rows above; QR the same size as the video QR */
section.hw.dsheets{padding-top:clamp(14px,1.6vw,22px)!important;padding-bottom:0!important}
.dsheets .ds-inner{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;
  border-top:1px solid rgba(35,31,32,.14);padding-top:1.4rem}
.dsheets .eyebrow{margin:0}
.dsheets .ds-row{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px)}
.dsheets .watchlink{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.dsheets .watchlink .qr{width:72px;height:72px;background:#fff;padding:4px;border-radius:4px;flex:none}
.dsheets .watchlink b{display:block;text-decoration:underline;text-underline-offset:3px}
.dsheets .watchlink small{display:block;opacity:.7;font-size:.85em;margin-top:2px}
@media (min-width:1101px){.dsheets .ds-inner{grid-template-columns:minmax(0,220px) minmax(0,1fr)}}
@media (max-width:700px){.dsheets .watchlink .qr{display:none}}
@media (max-width:560px){.dsheets .ds-inner{grid-template-columns:1fr;gap:12px}}
/* feature text: readable line length; badge sits at the top of its box like the photos */
.fitsec .corebox p{max-width:48ch}   /* "ch" is the width of a 0, so 48ch is about 70 real characters */
.fitsec .corebox img[src*="mpa-approved"]{object-position:top}

/* cut-out product details (Heavy-Duty Scraper) sit straight on the kraft page: no square, no cover crop */
.fitsec .corebox img[src*="tools__hds"]{object-fit:contain;background:transparent;border-radius:0}

/* Heavy-Duty front + back pair: a wide image, so its feature row gives the picture more room */
.fitsec .corebox:has(img[src*="hds-front-back"]){grid-template-columns:minmax(0,420px) minmax(0,1fr)!important}
.fitsec .corebox img[src*="hds-front-back"]{aspect-ratio:auto;object-fit:contain;background:transparent;border-radius:0}
@media (max-width:560px){.fitsec .corebox:has(img[src*="hds-front-back"]){grid-template-columns:1fr!important}
  .fitsec .corebox img[src*="hds-front-back"]{max-width:100%}}
/* on that page every feature row is full width with the same picture column, so the text lines up */
.fitsec .fitboxes:has(img[src*="hds-front-back"]){grid-template-columns:1fr!important}
.fitsec .fitboxes:has(img[src*="hds-front-back"]) .corebox{grid-template-columns:minmax(0,420px) minmax(0,1fr)!important}
.fitsec .fitboxes:has(img[src*="hds-front-back"]) .corebox img[src*="award"]{max-width:220px;justify-self:center}
.fitsec .fitboxes:has(img[src*="hds-front-back"]) .corebox p{max-width:48ch!important}
@media (max-width:700px){
  .fitsec .fitboxes:has(img[src*="hds-front-back"]) .corebox{grid-template-columns:1fr!important}
  .fitsec .fitboxes:has(img[src*="hds-front-back"]) .corebox img{max-width:100%}
  .fitsec .fitboxes:has(img[src*="hds-front-back"]) .corebox img[src*="award"]{max-width:200px}
}

/* small country flag in a product line (230mm UK frame, 44mm core) */
.mf-sz .flag{display:inline-block;width:1.5em;height:.75em;vertical-align:-.02em;margin-right:.45em;border-radius:1px;box-shadow:0 0 0 1px rgba(35,31,32,.15)}

/* Merchandise: soft goods on the kraft panel (no studio floor), one soft shadow under each */
.mx-range{padding-block:clamp(48px,6vw,88px) clamp(24px,3vw,40px)}
.mx-range .rf-group{margin-top:clamp(28px,3vw,44px)}
.mx-note{margin:.2rem 0 1rem;color:var(--ink-soft)}
.mx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.mx-card{display:flex;flex-direction:column}
.mx-shot{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:color-mix(in srgb,var(--fab) 22%,var(--cream,#f4efe6));border-radius:2px;margin-bottom:.8rem}
.mx-shot img{max-width:80%;max-height:80%;width:auto;height:auto;filter:drop-shadow(0 12px 14px rgba(35,31,32,.22))}
.mx-card b{font-family:var(--display);font-weight:400;font-size:1.25rem;text-transform:uppercase}
@media (max-width:900px){.mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Gift bags: styled photographs, cotton and hemp side by side per bundle */
.gb-range{padding-block:clamp(48px,6vw,88px) clamp(24px,3vw,40px)}
.gb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.gb-card{display:flex;flex-direction:column}
.gb-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:.9rem}
.gb-pair figure{margin:0}
.gb-pair img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.gb-pair figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:.4rem}
.gb-pair .mf-sku{font-size:.85em}
.gb-card b{font-family:var(--display);font-weight:400;font-size:1.4rem;text-transform:uppercase}
@media (max-width:800px){.gb-grid{grid-template-columns:1fr}}
.mx-shot{position:relative;display:block}
.mx-shot img{position:absolute;inset:0;margin:auto;max-width:80%;max-height:80%}

/* the studio floors are pseudo-elements that run far below their section (bottom:-6000px), and clip-path
   hides them but still lets the page scroll past the footer. Clip vertically only, so floors stay full-bleed. */
body.v2 #range,body.v2 .mframes,body.v2 .lgroups{overflow-y:clip}

/* the sticky top bar matched the page colour, so once you scrolled it was hard to see it was there.
   After the first few px of scroll it turns cream with a shadow, so it reads as a bar over the page. */
body.v2 .topbar-slim{transition:background-color .2s ease, box-shadow .2s ease, border-color .2s ease}
body.v2.tb-scrolled .topbar-slim{background:rgba(250,246,238,.94)!important;box-shadow:0 2px 14px rgba(35,31,32,.14);border-bottom-color:transparent;
  -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}

/* Why our microfibre (point-of-difference page) */
.pod-draft{margin:0;padding:.55rem 1rem;background:#231f20;color:#f4efe6;font-size:.85rem;text-align:center;letter-spacing:.02em}
.pod-points{padding-block:clamp(48px,6vw,88px) clamp(24px,3vw,40px)}
.pod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px) clamp(28px,4vw,64px)}
.pod-pt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;border-top:1px solid rgba(35,31,32,.16);padding-top:1.1rem}
.pod-n{font-family:var(--display);font-size:2.2rem;line-height:1;color:#7d5d3a}
.pod-pt h3{font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.05;margin:0 0 .45rem;text-transform:uppercase}
.pod-pt p{margin:0;color:var(--ink-soft);max-width:48ch}
.pod-lineup{padding-block:clamp(16px,2vw,28px)}
.pod-lineup img{display:block;width:100%;height:auto;border-radius:2px}
.pod-cap{margin:.7rem 0 0;color:var(--ink-soft);font-size:.95rem}
.pod-fabrics,.pod-videos{padding-block:clamp(48px,6vw,80px) clamp(16px,2vw,28px)}
.pod-fabgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pod-fab{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:inherit}
.pod-shot{display:block;aspect-ratio:16/8;background:center/cover no-repeat;border-radius:2px;margin-bottom:.6rem}
.pod-key{display:flex;align-items:center;gap:.5rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:#7d5d3a}
.pod-key i{display:inline-block;width:10px;height:22px;border-radius:2px}
.pod-fab b{font-family:var(--display);font-weight:400;font-size:1.4rem;text-transform:uppercase}
.pod-fab span:last-child{color:var(--ink-soft)}
.pod-vidgrid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.pod-vid{margin:0}
.pod-frame{position:relative;aspect-ratio:16/9;background:#231f20;border-radius:2px;overflow:hidden}
.pod-vid.is-short .pod-frame{aspect-ratio:9/16;max-height:640px;margin-inline:auto}
.pod-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pod-vid figcaption{margin-top:.8rem;display:flex;flex-direction:column;gap:.2rem}
.pod-vid figcaption > b{font-family:var(--display);font-weight:400;font-size:1.35rem;text-transform:uppercase}
.pod-vid figcaption > span{color:var(--ink-soft)}
.pod-vid .watchlink{display:inline-flex;align-items:center;gap:12px;margin-top:.7rem;text-decoration:none;color:inherit}
.pod-vid .watchlink .qr{width:64px;height:64px;background:#fff;padding:4px;border-radius:4px}
.pod-vid .watchlink b{display:block;text-decoration:underline;text-underline-offset:3px}
.pod-vid .watchlink small{display:block;opacity:.7;font-size:.85em}
@media (max-width:900px){.pod-grid,.pod-fabgrid,.pod-vidgrid{grid-template-columns:1fr}.pod-vid .watchlink .qr{display:none}}
.pod-ev{margin:.55rem 0 0!important;font-size:.9rem;color:#7d5d3a!important;font-style:italic}
/* videos: a 9:16 short beside a 16:9 film. Columns in the ratio 81:256 make both frames the SAME height,
   so the two captions and QR codes start on one line, and the short sits flush left (no floating gap). */
.pod-vidgrid{grid-template-columns:minmax(0,81fr) minmax(0,256fr)!important;column-gap:clamp(20px,2.4vw,36px)}
.pod-vid.is-short .pod-frame{max-height:none!important;margin-inline:0!important}
.pod-vid figcaption > span{max-width:42ch}
@media (max-width:900px){.pod-vidgrid{grid-template-columns:1fr!important}.pod-vid.is-short .pod-frame{max-width:360px}}
.pod-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#231f20}

/* homepage band linking to "Why our microfibre" */
.podband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;text-decoration:none;color:inherit;
  border:1px solid rgba(35,31,32,.16);border-radius:2px;overflow:hidden;margin-block:clamp(16px,2vw,28px)}
.podband-img{display:block;min-height:260px;background:center/cover no-repeat}
.podband-txt{display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding:clamp(22px,3vw,44px)}
.podband-txt b{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1;text-transform:uppercase}
.podband-txt > span:not(.eyebrow){color:var(--ink-soft);max-width:44ch}
.podband-txt em{font-style:normal;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;margin-top:.4rem}
.podband:hover em{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.podband{grid-template-columns:1fr}.podband-img{min-height:200px}}