/* ---------- v1.css ---------- */
/* ARG FLEX LTD - Design v1 "Industrial Precision" */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#0b1220; --ink-2:#16203a; --steel:#5b6880; --line:#e3e7ee;
  --bg:#ffffff; --bg-soft:#f4f6fa; --brand:#c34515; --brand-d:#9c360f; --brand-bright:#ff5a1f;
  --ok:#0f9d58; --radius:14px;
  --shadow:0 1px 2px rgba(11,18,32,.06),0 12px 32px -12px rgba(11,18,32,.18);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1240px;
  /* topbar 40 + header 81 + nav 53 — everything stacked above the hero */
  --chrome:174px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:800}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:.55rem;border:0;cursor:pointer;
  font:600 15px/1 var(--font);padding:15px 26px;border-radius:10px;transition:.18s ease;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px -8px rgba(195,69,21,.7)}
.btn-primary:hover{background:var(--brand-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.eyebrow{font:700 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}

/* Topbar */
.topbar{background:var(--ink);color:#c4ccdb;font-size:13.5px}
/* min-height, not height: a fixed 40px with no wrapping made four items fight
   over 335px on a phone, and the losers spilled above and below the bar and
   sat on top of each other. Growing is the correct failure. */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:40px;gap:8px 16px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.topbar a:hover{color:#fff}
.topbar .tb-l,.topbar .tb-r{display:flex;gap:22px;align-items:center;min-width:0}
.topbar span,.topbar a{white-space:nowrap}
/* Dropped in the order they stop being worth the width. The hours go first —
   they are on the contacts page. Then the email, which nobody types off a
   phone screen. The delivery note last. The number stays: it is the one thing
   on this bar somebody on a phone actually presses. */
@media(max-width:860px){.topbar .tb-l span:nth-child(2){display:none}}
@media(max-width:720px){.topbar .tb-r a[href^="mailto"]{display:none}}
@media(max-width:560px){
  .topbar .tb-l{display:none}
  .topbar .wrap{justify-content:center}
}

/* Header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:grid;grid-template-columns:1fr minmax(0,560px) 1fr;align-items:center;gap:24px;height:80px}
/* flex:none, and object-fit as a second lock. In the mobile layout .hdr .wrap
   becomes a flex row, and a flex item shrinks below its content by default —
   which squeezed the logo horizontally into a taller, narrower version of
   itself. width:auto alone does not prevent that; refusing to shrink does. */
.logo{justify-self:start;display:inline-flex;flex:none}
.logo img{height:40px;width:auto;object-fit:contain}

/* Search */
.search{position:relative;width:100%}
.search .mag{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:var(--steel);
  pointer-events:none;transition:.18s}
.search input{width:100%;height:50px;border:1.5px solid var(--line);border-radius:99px;
  padding:0 118px 0 48px;font:400 15px var(--font);color:var(--ink);background:var(--bg-soft);
  outline:0;transition:.2s;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#8b97ab}
.search input:hover{border-color:#cfd6e2}
.search input:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(195,69,21,.13)}
.search:focus-within .mag{color:var(--brand)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search button{position:absolute;right:5px;top:5px;height:40px;padding:0 20px;border:0;border-radius:99px;
  background:var(--brand);color:#fff;font:600 14px var(--font);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.18s;letter-spacing:.01em}
.search button:hover{background:var(--ink)}
.search button svg{flex:none}
@media(max-width:1180px){.search button span{display:none}.search button{padding:0 14px}.search input{padding-right:64px}}

.hdr-act{display:flex;align-items:center;gap:8px;justify-self:end}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--ink-2);position:relative;transition:.15s}
.icon-btn:hover{background:var(--bg-soft)}
.badge{position:absolute;top:5px;right:5px;min-width:17px;height:17px;border-radius:9px;background:var(--brand);
  color:#fff;font:700 10px/17px var(--font);text-align:center;padding:0 4px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink)}
@media(max-width:1000px){
  :root{--chrome:113px} /* nav is hidden, header drops to 72px */
  .hdr .wrap{display:flex;justify-content:space-between;height:72px}
  .search{display:none}
  .burger{display:grid;place-items:center}
}
/* On a phone the header was giving up 40px of a 375px screen to padding and
   another 20 to a row of 44px targets it did not need at that size. The
   targets stay comfortably above the 24px minimum; the logo is not touched
   beyond a proportional step down. */
@media(max-width:560px){
  :root{--chrome:102px}
  .wrap{padding:0 14px}
  .hdr .wrap{height:62px;gap:10px}
  .logo img{height:30px}
  .hdr-act{gap:0}
  .icon-btn,.burger{width:38px;height:38px}
  .badge{top:2px;right:2px}
}

/* Nav */
.nav{border-bottom:1px solid var(--line);background:#fff}
.nav .wrap{display:flex;align-items:center;gap:4px;height:52px;overflow-x:auto;scrollbar-width:none;
  justify-content:center;justify-content:safe center}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{font:600 14px var(--font);padding:10px 14px;border-radius:8px;color:var(--ink-2);white-space:nowrap;transition:.15s}
.nav a:hover{background:var(--bg-soft);color:var(--brand)}
.nav a.on{color:var(--brand)}
@media(max-width:1000px){.nav{display:none}}

/* Hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  display:flex;align-items:center;
  min-height:calc(100vh - var(--chrome));
  min-height:calc(100svh - var(--chrome))}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,18,32,.96) 0%,rgba(11,18,32,.82) 42%,rgba(11,18,32,.35) 100%)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero .wrap{position:relative;z-index:2;width:100%;padding:56px 20px}
.hero-in{max-width:640px}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.05rem);margin:18px 0 20px;letter-spacing:-.035em}
.hero .eyebrow{color:var(--brand-bright)}
.hero h1 em{font-style:normal;color:var(--brand-bright)}
.hero p{color:#c0c9d9;font-size:clamp(1rem,1.6vw,1.14rem);max-width:52ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.hero-tags span{font:600 12.5px var(--font);letter-spacing:.04em;padding:8px 14px;border-radius:99px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#dbe2ee}
/* keep the first screen scroll-free on shorter laptops */
@media(max-height:820px){
  .hero .wrap{padding:38px 20px}
  .hero h1{font-size:clamp(2rem,4.4vw,3.2rem);margin:14px 0 16px}
  .hero p{font-size:1rem}
  .hero-cta{margin-top:26px}
  .hero-tags{margin-top:28px;padding-top:20px}
}
@media(max-height:700px){
  .hero .wrap{padding:28px 20px}
  .hero h1{font-size:clamp(1.85rem,4vw,2.6rem);margin:12px 0 14px}
  .hero-tags{display:none}
  .hero-cta{margin-top:22px}
}

/* Trust strip */
.trust{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.trust .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.trust .c{background:var(--bg-soft);padding:26px 22px;display:flex;gap:14px;align-items:flex-start}
.trust svg{flex:none;color:var(--brand-bright)}
.trust b{display:block;font-size:15px;margin-bottom:2px}
.trust small{color:var(--steel);font-size:13.5px;line-height:1.45;display:block}
@media(max-width:900px){.trust .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.trust .grid{grid-template-columns:1fr}}

/* Ticker */
.tick{background:var(--ink);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.tick .row{display:flex;white-space:nowrap;width:max-content;animation:tick-run 38s linear infinite}
.tick i{font:700 14px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#8d99b0;font-style:normal;
  padding:17px 28px;display:inline-flex;align-items:center;gap:28px}
.tick i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-bright);display:block}
.tick:hover .row{animation-play-state:paused}
@keyframes tick-run{to{transform:translateX(-50%)}}
@media(max-width:640px){.tick i{font-size:12.5px;padding:14px 20px;gap:20px}}

/* Industries */
.inds{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ind{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 16px;text-align:center;
  transition:.18s;display:block}
.ind:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow)}
.ind svg{margin:0 auto 13px;color:var(--brand-bright)}
.ind b{font-size:14.5px;display:block;font-weight:700}
.ind small{display:block;color:var(--steel);font-size:12.5px;margin-top:5px}
.ind:hover small{color:var(--steel)}
@media(max-width:1000px){.inds{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.inds{grid-template-columns:repeat(2,1fr)}}

/* Sections */
section{padding:76px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.sec-head p{color:var(--steel);margin-top:10px;max-width:56ch}
.link-more{font:700 14px var(--font);color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.link-more:hover{gap:10px}

/* Categories */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:.22s ease;display:flex;flex-direction:column}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfd6e2}
.cat .ph{aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden}
.cat .ph img{width:100%;height:100%;object-fit:cover;transition:.4s}
.cat:hover .ph img{transform:scale(1.06)}
.cat .bd{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.cat h2,.cat h3{font-size:1.22rem;margin-bottom:8px}
.cat h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.cat li a,.cat .go{position:relative;z-index:2}
.cat:hover h3 a{color:var(--brand)}
.cat .cnt{font:700 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.cat ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cat li a{font-size:13px;color:var(--steel);background:var(--bg-soft);padding:5px 11px;border-radius:99px;display:block;transition:.15s}
.cat li a:hover{background:var(--ink);color:#fff}
.cat .go{margin-top:auto;font:700 14px var(--font);color:var(--ink);display:inline-flex;gap:7px;align-items:center}
.cat:hover .go{color:var(--brand)}
@media(max-width:960px){.cats{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cats{grid-template-columns:1fr}}

/* Products */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filters button{font:600 13.5px var(--font);padding:9px 17px;border-radius:99px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink-2);cursor:pointer;transition:.16s}
.filters button:hover{border-color:var(--ink)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#cfd6e2}
.card .ph{position:relative;aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.35s}
/* The second photograph, cross-faded in on hover. Laid over the first rather
   than swapping the src, so there is nothing to load at the moment of the
   hover and no flash of an empty frame on a slow line. */
.card .ph .ph-alt{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.card:hover .ph .ph-alt,.card:focus-within .ph .ph-alt{opacity:1}
/* Somebody who has asked for less motion gets the picture without the fade. */
@media(prefers-reduced-motion:reduce){.card .ph .ph-alt{transition:none}}
.card:hover .ph img{transform:scale(1.05)}
.tag{position:absolute;top:12px;left:12px;font:700 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:5px 10px;border-radius:6px}
.tag.o{background:var(--brand)}
.card .bd{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;gap:8px}
.card .cat-l{font:600 11.5px var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--steel)}
.card h2,.card h3{font-size:1rem;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.card .price{margin-top:auto;font-weight:800;font-size:1.05rem;color:var(--ink)}
.card .price small{font-weight:600;font-size:11.5px;color:var(--steel);display:block;margin-top:3px;letter-spacing:.04em}
.card-buy{display:flex;gap:8px;align-items:stretch;margin-top:12px}
.card .add{margin-top:0;flex:1;min-width:0;justify-content:center;padding:12px;font-size:14px}
/* Square, and the same height as the button beside it, so the pair reads as
   one control rather than two things that happen to be adjacent. */
.card-heart{flex:none;width:46px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-soft);color:var(--ink-2);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:.15s}
.card-heart:hover{border-color:#c9d2e0;background:#fff;color:var(--brand)}
.card-heart.on{color:var(--brand);border-color:var(--brand);background:#fff}
.card-heart.on svg{fill:currentColor}
@media(max-width:1040px){.prods{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.prods{grid-template-columns:1fr}}

/* Split about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .ph{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:14px 0 18px}
.split p{color:var(--steel);margin-bottom:14px}
.checks{list-style:none;padding:0;margin:22px 0 30px;display:grid;gap:12px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.checks svg{flex:none;color:var(--ok);margin-top:2px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}.split .ph{order:-1}}

/* Stats */
.stats{background:var(--ink);color:#fff}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stats .n{font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.04em;color:var(--brand-bright)}
.stats .l{color:#9fabc2;font-size:14px;margin-top:6px}
@media(max-width:760px){.stats .grid{grid-template-columns:1fr 1fr;gap:34px}}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.2s;overflow:hidden;
  display:flex;flex-direction:column}
.post:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#cfd6e2}
.post .ph{aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:.4s}
.post:hover .ph img{transform:scale(1.05)}
.post .bd{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column}
.post .d{font:700 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.post h2,.post h3{font-size:1.1rem;margin-bottom:10px;line-height:1.35}
.post p{color:var(--steel);font-size:14.5px;margin-bottom:18px}
.post .r{margin-top:auto;font:700 13.5px var(--font);color:var(--ink);display:inline-flex;gap:6px;align-items:center}
.post:hover .r{color:var(--brand)}
@media(max-width:900px){.posts{grid-template-columns:1fr}}

/* CTA */
.cta{background:linear-gradient(120deg,var(--brand-bright) 0%,#ff8a3d 100%);color:var(--ink);border-radius:20px;
  padding:56px 48px;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.6rem,3vw,2.2rem);max-width:22ch}
.cta p{margin-top:12px;color:rgba(11,18,32,.86);max-width:46ch}
.cta .btn{background:#fff;color:var(--ink);box-shadow:0 6px 18px -8px rgba(11,18,32,.5)}
.cta .btn:hover{background:var(--ink);color:#fff}

/* Footer */
.ftr{background:var(--ink);color:#9fabc2;padding:64px 0 0}
.ftr .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:48px}
.ftr img{height:38px;margin-bottom:18px;filter:brightness(0) invert(1)}
/* The level here has moved twice for the sake of the heading order, so the
   style follows the tag rather than assuming one. Left as h4 it matched
   nothing: the column headings rendered at 24px with no space under them. */
.ftr h2,.ftr h3,.ftr h4{color:#fff;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 18px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:14.5px}
.ftr a:hover{color:var(--brand-bright)}
.ftr .c-row{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:14.5px;line-height:1.5}
.ftr .c-row svg{flex:none;color:var(--brand-bright);margin-top:3px}
.ftr .bot{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13.5px}
.soc{display:flex;gap:10px}
.soc a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.16s}
.soc a:hover{background:var(--brand);color:#fff}
@media(max-width:900px){.ftr .cols{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:540px){.ftr .cols{grid-template-columns:1fr}}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:100;overflow:hidden;visibility:hidden;opacity:0;transition:.2s}
.drawer.open{visibility:visible;opacity:1}
.drawer .sc{position:absolute;inset:0;background:rgba(11,18,32,.5)}
.drawer .pn{position:absolute;top:0;right:0;bottom:0;width:min(88vw,340px);background:#fff;padding:24px;
  transform:translateX(100%);transition:.25s;overflow-y:auto}
.drawer.open .pn{transform:none}
.drawer nav{display:grid;gap:4px;margin-top:24px}
.drawer nav a{padding:13px 12px;border-radius:9px;font-weight:600}
.drawer nav a:hover{background:var(--bg-soft)}
.drawer .x{border:0;background:var(--bg-soft);width:40px;height:40px;border-radius:10px;cursor:pointer}

/* On a phone the menu takes the whole screen.

   A 340px panel with the page still showing behind it is a desktop idea: on
   a narrow screen it leaves a strip of unreadable content down one side and
   the menu itself cramped. Full width gives the links room to be tapped and
   nothing to be distracted by.

   100dvh, not 100vh — on iOS the address bar counts against vh, so the last
   item sat under it and the quote button was unreachable. */
@media(max-width:640px){
  .drawer .pn{width:100%;max-width:none;height:100dvh;padding:20px 22px 24px;
    display:flex;flex-direction:column;overflow-y:auto}
  .drawer .sc{display:none}                    /* nothing left to dim */
  .drawer nav{gap:2px;margin-top:20px}
  .drawer nav a{padding:15px 12px;font-size:17px}
  .drawer .dr-search{margin-top:18px}
  /* the quote button sits at the foot of the screen, not under the last link */
  .drawer .pn > .btn{margin-top:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- pages.css ---------- */
/* ARG FLEX LTD — inner page styles (appended to site.css at build time) */

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;margin:0;padding:14px 0;display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--steel)}
.crumbs li{display:flex;gap:8px;align-items:center}
.crumbs li+li::before{content:"/";color:#b8c1d1}
.crumbs a:hover{color:var(--brand)}
.crumbs li[aria-current]{color:var(--ink);font-weight:600}

/* ---------- page head ---------- */
.pg-head{padding:52px 0 8px}
.pg-head h1{font-size:clamp(1.9rem,3.8vw,2.85rem);margin:14px 0 14px}
.pg-head p{color:var(--steel);max-width:70ch}
.pg-head a{color:var(--brand);font-weight:600}
.wrap.narrow{max-width:820px}

/* ---------- shop layout ---------- */
.shop{padding-top:34px}
.shop-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:34px;align-items:start}
.side-box{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;background:#fff}
.side-box h2,.side-box h3{font:700 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:14px}
.side-cats{list-style:none;margin:0;padding:0;font-size:14.5px}
.side-cats>li{margin-bottom:4px}
.side-cats a{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;transition:.15s}
.side-cats a:hover{background:var(--bg-soft);color:var(--brand)}
.side-cats a.on{background:var(--ink);color:#fff}
.side-cats a span{color:var(--steel);font-size:12.5px}
.side-cats a.on span{color:rgba(255,255,255,.65)}
.side-cats ul{list-style:none;margin:3px 0 8px;padding:0 0 0 12px;border-left:1px solid var(--line)}
.side-cats ul a{font-size:13.5px;padding:5px 10px}
.rng{display:flex;align-items:center;gap:12px}
.rng input[type=range]{flex:1;accent-color:var(--brand)}
.rng output{font-weight:700;font-size:14px;min-width:56px;text-align:right}
.clear{display:block;text-align:center;margin-top:12px;font-size:13.5px;color:var(--steel);text-decoration:underline}
.clear:hover{color:var(--brand)}
.side-note{font-size:13.5px;color:var(--steel);margin-bottom:14px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line);font-size:14px;color:var(--steel)}
.sorter{display:flex;align-items:center;gap:10px}
.sorter label{font-weight:600;color:var(--ink-2)}
.sorter select,.compare-pick select,.p-buy select{border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;
  font:500 14px var(--font);background:#fff;color:var(--ink);outline:0;cursor:pointer;
  /* a select is sized by its longest option unless told otherwise */
  max-width:100%;text-overflow:ellipsis}
.compare-pick select,.p-buy select{width:100%}
.fld,.compare-pick .fld{min-width:0}
.sorter select:focus,.compare-pick select:focus,.p-buy select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(195,69,21,.12)}
.prods.cols-3{grid-template-columns:repeat(3,1fr)}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:56px 24px;text-align:center;background:var(--bg-soft)}
.empty h2,.empty h3{font-size:1.25rem;margin-bottom:10px}
.empty p{color:var(--steel);margin-bottom:20px}
@media(max-width:1000px){.shop-grid{grid-template-columns:1fr}.prods.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prods.cols-3{grid-template-columns:1fr}}

/* ---------- subcategory chips ---------- */
.subcats{display:flex;gap:12px;flex-wrap:wrap}
.subcats a{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;background:#fff;
  min-width:150px;transition:.18s}
.subcats a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.subcats b{display:block;font-size:15px}
.subcats span{font-size:12.5px;color:var(--steel)}

/* ---------- product page ---------- */
.product{padding:44px 0 20px}
.p-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
/* The right column carries far more content than the left, so the photo
   follows the scroll instead of leaving a tall empty gap beside it.
   96px clears the sticky header (81px) plus a little breathing room. */
.p-media{position:sticky;top:96px;align-self:start}
/* Fixed frame at the ratio 42 of the 56 product photos already use (540x420),
   so the common case fills it edge to edge with no letterboxing. The few wider
   shots sit inside it on white, which is invisible against their own white
   backgrounds — and nothing gets cropped. */
.p-main{overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.p-main img{display:block;width:100%;aspect-ratio:27/21;object-fit:contain;background:#fff}
.p-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.p-thumbs button{width:80px;height:62px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;
  background:#fff;cursor:pointer;padding:0;transition:.16s}
.p-thumbs button.on,.p-thumbs button:hover{border-color:var(--brand)}
.p-thumbs img{width:100%;height:100%;object-fit:cover}
.p-info h1{font-size:clamp(1.6rem,3vw,2.25rem);margin:10px 0 6px}
/* Price, what it is per, and whether it is in stock, on one line. They were
   three stacked blocks, which cost about 90px above the fold and told the
   reader nothing extra for it. It wraps rather than shrinks on a phone. */
.p-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  padding:8px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.p-price b{font-size:1.7rem;letter-spacing:-.02em}
.p-price small{color:var(--steel);font-size:13px}
.p-price .p-stock{margin:0}
.p-price .p-stock::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:middle}
/* Short description. The source copy is free text — only some products follow
   the "Label: value" pattern — so it is set as prose with the labels picked
   out, rather than forced into a grid that half the catalogue cannot fill. */
.p-facts{margin:0 0 26px;padding:20px 22px 20px 24px;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 12px 12px 0;background:var(--bg-soft);font-size:14.5px;line-height:1.65;color:var(--steel)}
.p-facts p{margin:0 0 9px}
.p-facts p:last-child{margin-bottom:0}
.p-facts b,.p-facts strong{color:var(--ink);font-weight:700}
.p-facts ul{margin:8px 0;padding-left:20px}
.p-facts li{margin-bottom:5px}
.p-facts br{content:"";display:block;margin-bottom:5px}
/* variant swatches */
.swatches{display:grid;gap:10px;margin-bottom:18px}
.sw-row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.sw-label{font:700 13.5px var(--font);color:var(--ink-2);min-width:112px;flex:none}
.sw-label::after{content:" :";color:var(--steel)}
.sw-opts{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 0;min-width:0}
.sw{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:9px 15px;cursor:pointer;
  font:600 14px var(--font);color:var(--ink-2);transition:.15s;min-width:52px}
.sw:hover{border-color:var(--ink-2);color:var(--ink)}
.sw.on{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* A bore sold as a separate listing. It has to look pickable — it is the same
   model, and the customer should not have to care how the shop files it — but
   not identical to a bore that changes the price in place, because pressing it
   loads another page. The arrow is the whole difference. */
a.sw-away{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  border-style:dashed;color:var(--steel)}
a.sw-away::after{content:"↗";font-size:11px;line-height:1;opacity:.75}
a.sw-away:hover{border-style:solid;border-color:var(--ink-2);color:var(--ink);background:var(--bg-soft)}
.sw.out{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.sw.out:hover{border-color:var(--line);color:var(--ink-2)}
/* A length we DO make that is off the shelf today. Deliberately not the same
   as .out above: it stays pickable, at full contrast, because the customer
   pressing it is asking which one is sold out and deserves an answer rather
   than a control that ignores them. The rule under the swatches says the
   rest. */
.sw.oos{border-style:dashed;color:var(--steel)}
.sw.oos::after{content:"·";display:inline-block;margin-left:7px;color:#c0392b;
  font-weight:900;transform:translateY(-1px)}
.sw.oos.on{border-style:solid}
.sw-oos{background:#fff5f0;border:1px solid #ffd6c2;border-radius:9px;padding:11px 14px;
  font-size:13.5px;color:var(--ink-2);margin-bottom:18px}
.sw-oos a{color:var(--brand);text-decoration:underline}
.sw-clear{border:0;background:none;cursor:pointer;font:600 13.5px var(--font);color:var(--steel);
  display:inline-flex;align-items:center;gap:6px;padding:4px 2px;justify-self:start}
.sw-clear:hover{color:var(--brand)}
.sw-none{background:#fff5f0;border:1px solid #ffd6c2;border-radius:9px;padding:11px 14px;
  font-size:13.5px;color:var(--ink-2);margin-bottom:18px}
.sw-none a{color:var(--brand);text-decoration:underline}
@media(max-width:560px){.sw-row{gap:8px;flex-wrap:wrap}.sw-label{min-width:100%}}

/* Add to cart, when the length chosen is off the shelf. The popup already
   dimmed its own button this way; the product page had no way to say no. */
.p-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.p-buy{margin-bottom:20px}
.p-buy .fld{display:grid;gap:7px;margin-bottom:16px}
.p-buy label{font:700 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.p-buy select{width:100%}
.p-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* 50px, the height the stepper and the pill already are: the button came out
   at 45 from its own padding, which left all three on slightly different
   baselines in a row whose whole job is to look like one control. */
.p-actions .btn{flex:1;min-width:150px;height:50px;justify-content:center}
/* Share earns its place in this row but not any of its width: the stepper and
   the share button keep to their content so everything left over goes to the
   button people actually came to press. */
.p-actions .pill{flex:none;height:50px;padding:0 16px}
/* On a phone the three will not fit across, and Share wrapping to a line of
   its own at 107px reads as something left behind rather than something
   placed. On its own line it takes the whole line. */
@media(max-width:560px){.p-actions .pill{flex:1 0 100%;justify-content:center}}
.p-actions .pill svg{color:var(--steel)}
.p-actions .pill:hover svg{color:inherit}
/* Narrower than it was. Three digits still fit, and the width it gave up goes
   to Add to cart rather than to a number that is 1 on almost every order. */
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;height:50px;flex:none}
.qty button{width:32px;height:100%;border:0;background:#fff;font-size:17px;cursor:pointer;color:var(--ink-2)}
.qty button:hover{background:var(--bg-soft);color:var(--brand)}
.qty input{width:40px;height:100%;border:0;text-align:center;font:700 15px var(--font);outline:0;
  -moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.p-total{margin-top:14px;font-size:14.5px;color:var(--steel)}
.p-total b{color:var(--ink);font-size:1.1rem}
.p-actions-2{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:16px 0;border-top:1px solid var(--line);margin-top:6px}
/* Share, compare and wishlist are the same kind of thing, so they look the
   same: quiet pills rather than a row of underlined links. */
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-soft);cursor:pointer;
  font:600 13.5px var(--font);color:var(--ink-2);transition:.15s;white-space:nowrap}
.pill:hover{border-color:#c9d2e0;background:#fff;color:var(--ink)}
.pill.icon-only{padding:0;width:40px;justify-content:center}
.pill.on{color:var(--brand);border-color:var(--brand)}
.pill svg{flex:none}

/* Carriage for what is chosen, filled in by the server. Hidden until the
   answer arrives, so it is never a guess that has to be corrected. */
.p-ship{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg-soft);font-size:13.5px}
.p-ship svg{flex:none;margin-top:2px;color:var(--steel)}
.p-ship b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin-bottom:3px}
.p-ship i{font-style:normal;color:var(--steel)}
.p-ship [data-ship-lines]{color:var(--ink);font-weight:650;line-height:1.7}
.p-ship .sep{color:var(--line);margin:0 8px}
.p-ship em{display:block;font-style:normal;font-size:12.5px;color:var(--steel);font-weight:400}

.btn-wa{width:100%;justify-content:center;margin-top:12px;
  background:#fff;color:#128c3f;border:1.5px solid #128c3f}
.btn-wa:hover{background:#128c3f;color:#fff}
.p-wa-note{margin:7px 0 0;font-size:12.5px;color:var(--steel);text-align:center}
.linkish{display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  font:600 14px var(--font);color:var(--ink-2);padding:0;transition:.15s}
.linkish:hover{color:var(--brand)}
.linkish.on{color:var(--brand)}
.linkish.on svg{fill:var(--brand)}
.p-meta{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14px}
.p-meta li{display:flex;gap:14px}
.p-meta span{color:var(--steel);min-width:96px}
.p-meta b{font-weight:600}
.p-meta a:hover{color:var(--brand)}
@media(max-width:900px){
  .p-grid{grid-template-columns:1fr;gap:32px}
  .p-media{position:static}   /* one column — nothing to stick beside */
}

/* ---------- tabs ---------- */
.p-tabs{padding:26px 0 76px}
.tabs-nav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:26px}
.tabs-nav button{border:0;background:none;font:700 14.5px var(--font);color:var(--steel);padding:14px 18px;
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tabs-nav button:hover{color:var(--ink)}
.tabs-nav button.on{color:var(--brand);border-bottom-color:var(--brand)}
.tab-panel{display:none}
.tab-panel.on{display:block}
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec-table th,.spec-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table thead th{background:var(--bg-soft);font:700 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.spec-table tbody th{width:32%;font-weight:700;background:var(--bg-soft);color:var(--ink-2)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table a{color:var(--brand)}
.pt-h{margin:30px 0 14px;font-size:1.15rem}
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.rich table{min-width:420px}
.rich .table-scroll table{margin:0}
.rich .table-scroll{margin:20px 0}
.compare-table th a{color:var(--ink)}
.compare-table th a:hover{color:var(--brand)}
.compare-pick{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.compare-pick .fld{display:grid;gap:7px}
.compare-pick label{font:700 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
@media(max-width:700px){.compare-pick{grid-template-columns:1fr}}

/* rich text */
.rich{color:var(--ink-2);font-size:16px;line-height:1.75}
.rich h2{font-size:1.5rem;margin:34px 0 14px;color:var(--ink)}
.rich h3{font-size:1.18rem;margin:26px 0 12px;color:var(--ink)}
.rich h2:first-child,.rich h3:first-child{margin-top:0}
.rich p{margin:0 0 16px}
.rich ul,.rich ol{margin:0 0 18px;padding-left:22px}
.rich li{margin-bottom:8px}
.rich a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.rich img{border-radius:12px;margin:20px 0}
.rich strong,.rich b{color:var(--ink)}
.rich table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
.rich th,.rich td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.rich th{background:var(--bg-soft)}
.rich blockquote{margin:22px 0;padding:16px 22px;border-left:3px solid var(--brand);background:var(--bg-soft);border-radius:0 10px 10px 0}
.policy h2{padding-top:8px}

/* ---------- article ---------- */
.article{padding:48px 0 70px}
.article h1{font-size:clamp(1.9rem,4vw,3rem);margin:14px 0 18px}
.article .lede{font-size:1.12rem;color:var(--steel);margin-bottom:30px}
.article-hero{border-radius:16px;overflow:hidden;margin-bottom:36px;border:1px solid var(--line);background:var(--bg-soft)}
.article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.article-body{margin-bottom:34px}
.share{display:flex;align-items:center;gap:10px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share span{font:700 11.5px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-right:4px}
.share a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);transition:.16s}
.share a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.pager a{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:.18s;background:#fff}
.pager a:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.pager span{display:block;font:700 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:7px}
.pager b{font-size:15px;line-height:1.4;font-weight:700}
.p-next{text-align:right}
@media(max-width:700px){.pager{grid-template-columns:1fr}.p-next{text-align:left}}

/* lead post */
.lead-post{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:#fff;transition:.2s}
.lead-post:hover{box-shadow:var(--shadow);border-color:#cfd6e2}
.lead-post .ph{overflow:hidden;background:var(--bg-soft)}
.lead-post .ph img{width:100%;height:100%;object-fit:cover;min-height:280px}
.lead-post .bd{padding:38px}
.lead-post .d{font:700 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.lead-post h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:12px 0 14px}
.lead-post p{color:var(--steel);margin-bottom:20px}
.lead-post .r{font:700 14px var(--font);display:inline-flex;gap:7px;align-items:center;color:var(--ink)}
.lead-post:hover .r{color:var(--brand)}
.posts.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.lead-post{grid-template-columns:1fr}.lead-post .ph img{min-height:200px}.lead-post .bd{padding:26px}
  .posts.cols-3{grid-template-columns:1fr}}

/* ---------- contacts ---------- */
/* Both columns stretch to the taller of the two, and the four cards share
   that height evenly so the stack ends level with the form. */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:stretch}
.c-cards{display:grid;gap:14px;grid-auto-rows:1fr}
/* Icon sits in its own column and spans both text rows, so the label and
   the value line up beside it rather than under it. */
.c-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:#fff;transition:.18s;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
a.c-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.c-card svg{grid-row:1 / span 2;align-self:center;box-sizing:content-box;padding:11px;margin:0;
  background:#fff4ee;border-radius:11px;color:var(--brand)}
.c-card b{grid-column:2;align-self:end;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin-bottom:4px}
.c-card span{grid-column:2;align-self:start;font-size:15.5px;font-weight:600;line-height:1.5}
.c-form{border:1px solid var(--line);border-radius:16px;padding:32px;background:#fff}
.c-form h2{font-size:1.35rem;margin-bottom:20px}
.c-about{background:var(--bg-soft);border-radius:9px;padding:11px 14px;font-size:14px;margin-bottom:18px}
.c-about a{color:var(--brand);text-decoration:underline;margin-left:8px;font-size:13px}
.fld{display:grid;gap:7px;margin-bottom:16px}
.fld label{font:700 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
/* SELECT belongs in this list. It was left out, so the one dropdown on the
   checkout — Country — kept the browser's own square box and grey arrow in a
   column of rounded fields, and looked like a piece of the page that had not
   loaded. Same border, same radius, same padding, same focus ring. */
.fld input,.fld textarea,.fld select{border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;
  font:400 15px var(--font);color:var(--ink);background:#fff;outline:0;transition:.16s;width:100%}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(195,69,21,.12)}

/* The native arrow is drawn by the operating system and cannot be reached by
   any of the above, so it is replaced: appearance:none takes the box away and
   an inline SVG chevron is painted in its place, in the same steel as the
   labels. Room is left for it on the right, and on the LEFT in a right-to-left
   locale. background-image rather than a pseudo-element because a select
   cannot carry one. */
.fld select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6880' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
}
.fld select:hover{border-color:#c9d2e0}
/* Firefox keeps a dotted ring on the text inside a focused select. */
.fld select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--ink)}
.fld select::-ms-expand{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-note{font-size:12.5px;color:var(--steel);margin-top:14px}
.map-box{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-soft)}
.map-box iframe{width:100%;height:380px;border:0;display:block}
.map-link{position:absolute;right:14px;top:14px;background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:9px 14px;font:600 13px var(--font);box-shadow:var(--shadow);
  display:inline-flex;align-items:center;gap:7px;transition:.16s}
.map-link svg{color:var(--brand)}
.map-link:hover{color:var(--brand);border-color:var(--brand)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.two{grid-template-columns:1fr}.c-form{padding:24px}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:#fff}
.step .num{font:800 13px var(--mono);letter-spacing:.1em;color:var(--brand)}
.step h2,.step h3{font-size:1.08rem;margin:12px 0 10px}
.step p{color:var(--steel);font-size:14px}
@media(max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- cart ---------- */
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.cart-table{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cart-table th,.cart-table td{padding:14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table thead th{background:var(--bg-soft);font:700 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.cart-table img{width:66px;height:52px;object-fit:cover;border-radius:8px;background:var(--bg-soft)}
.cart-table .ct-name{font-weight:700}
.cart-table .ct-opt{color:var(--steel);font-size:13px;display:block;margin-top:3px}
.cart-table .qty{height:40px}
.cart-table .qty button{width:32px}
.cart-table .qty input{width:44px;font-size:14px}
.ct-remove{border:0;background:none;cursor:pointer;color:var(--steel);font-size:19px;line-height:1;padding:6px}
.ct-remove:hover{color:var(--brand)}
.cart-side{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;position:sticky;top:100px}
.cart-side h2,.cart-side h3{font-size:1.1rem;margin-bottom:18px}
/* A line the shop can no longer sell. Stated where the money is, because the
   figure beside it is the one that changed — and marked on the line itself,
   so "one line" is not a puzzle to solve. */
.cart-dropped{margin:0 0 14px;background:#fff5f0;border:1px solid #ffd6c2;border-radius:9px;
  padding:9px 12px;font-size:13px;color:var(--ink-2)}
tr.refused td,li.refused{opacity:.55}
tr.refused td b,li.refused b{text-decoration:line-through}
li.refused::after,tr.refused td:nth-child(2)::after{content:"Out of stock";display:block;
  margin-top:3px;font:700 11px var(--font);letter-spacing:.04em;color:#c0392b;
  text-transform:uppercase;opacity:1}
.cart-side .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14.5px;color:var(--steel)}
.cart-side .row b{color:var(--ink);font-weight:700}
.cart-side .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-size:16px;color:var(--ink)}
.cart-side .row.total b{font-size:1.3rem}
.cart-side .hint{font-size:12.5px;color:var(--steel);margin:12px 0 18px}
.btn-out{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-out:hover{border-color:var(--ink)}
.cart-empty{border:1px dashed var(--line);border-radius:var(--radius);padding:60px 24px;text-align:center;background:var(--bg-soft)}
.cart-empty svg{color:#b8c1d1;margin:0 auto 18px}
.cart-empty h2,.cart-empty h3{font-size:1.25rem;margin-bottom:10px}
.cart-empty p{color:var(--steel);margin-bottom:22px}
@media(max-width:900px){.cart-grid{grid-template-columns:1fr}.cart-side{position:static}
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{border-bottom:1px solid var(--line);padding:12px 0;position:relative}
  .cart-table td{border:0;padding:6px 14px}}

/* ---------- account ---------- */
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.acc-box{border:1px solid var(--line);border-radius:16px;padding:32px;background:#fff}
.acc-box.alt{background:var(--bg-soft)}
.acc-box h2{font-size:1.3rem;margin-bottom:20px}
.acc-box p{color:var(--steel);margin-bottom:16px}
@media(max-width:820px){.account-grid{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.notfound-search{max-width:520px;margin:28px auto 0}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  background:var(--ink);color:#fff;border-radius:12px;padding:14px 20px;font:600 14.5px var(--font);
  display:flex;align-items:center;gap:11px;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:.24s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{color:var(--brand);flex:none}
.toast a{color:var(--brand);text-decoration:underline}

/* drawer search */
.dr-search{margin-top:20px}
.dr-search input{width:100%;height:44px;border:1.5px solid var(--line);border-radius:99px;padding:0 18px;
  font:400 15px var(--font);background:var(--bg-soft);outline:0}
.dr-search input:focus{border-color:var(--brand);background:#fff}

/* cart badge hidden when zero */
.badge[hidden]{display:none}

/* enquiry form result + honeypot */
.c-ok{background:#e9f8f0;border:1px solid #bfe8d3;color:#0a6b40;border-radius:10px;
  padding:12px 15px;font-size:14.5px;font-weight:600;margin-bottom:18px}
.c-bad{background:#fef1f1;border:1px solid #f6cdcd;color:#a01b1f;border-radius:10px;
  padding:12px 15px;font-size:14.5px;font-weight:600;margin-bottom:18px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:0 0 16px}

/* out of stock */
.tag.out{background:var(--steel)}
.p-oos{background:#fff5f0;border:1px solid #ffd6c2;border-radius:9px;padding:11px 14px;
  font-size:13.5px;color:var(--ink-2);margin:0 0 18px}

/* ---------- sale prices and stock ---------- */
.card{position:relative}
.price s,.p-price s{color:var(--steel);font-weight:400;margin-right:6px;text-decoration-thickness:1px}
.flash-sale,.flash-low{position:absolute;top:12px;left:12px;z-index:2;border-radius:99px;
  padding:4px 11px;font:700 11.5px var(--font);letter-spacing:.02em;color:#fff;background:var(--brand)}
.flash-low{background:#0f9d58;left:auto;right:12px}
.p-save{display:inline-block;margin-left:10px;border-radius:99px;padding:3px 10px;
  font:700 12px var(--font);color:#fff;background:var(--brand);vertical-align:middle}
.p-stock{margin:0 0 14px;font-size:13.5px;font-weight:650;color:#0a6b40}
/* Reached when the option chosen is sold out but the product is not, so the
   line has to be able to contradict the green dot it opened with. */
.p-stock.out{color:#c0392b}
.p-stock.low{color:#a35400}
.p-stock.backorder{color:var(--steel)}
.p-stock.preorder{color:var(--ink-2)}
.p-stock::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:1px}

/* ---------- cross-sells under the cart ---------- */
.cross{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.cross .sec-head{margin-bottom:22px}

/* ---------- ratings and reviews ---------- */
.stars{display:inline-flex;gap:1px;vertical-align:middle}
.stars svg{display:block}
.stars svg.on path{fill:#f5a623}
.stars svg.off path{fill:#dfe3ea}
.card-rating{display:flex;align-items:center;gap:6px;margin:-2px 0 8px}
.card-rating em{font-style:normal;font-size:12.5px;color:var(--steel)}
.p-rating{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;text-decoration:none}
.p-rating span{font-size:13.5px;color:var(--steel);border-bottom:1px solid var(--line)}
.p-rating:hover span{color:var(--ink)}

.rv-note{border-radius:10px;padding:12px 16px;margin:0 0 22px;font-size:14.5px;font-weight:600;
  background:#eefaf2;color:#0a6b40;border:1px solid #bfe8d3}
.rv-note.bad{background:#fff5f0;color:#a01b1f;border-color:#ffd6c2}

.rv-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.rv-score{text-align:center}
.rv-score b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.rv-score .stars{margin:6px 0 4px}
.rv-score span{display:block;font-size:13px;color:var(--steel)}
.rv-spread{display:grid;gap:5px;min-width:0}
.rv-bar{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:10px;align-items:center;
  font-size:12.5px;color:var(--steel)}
.rv-bar i{display:block;height:7px;border-radius:99px;background:var(--line-2);overflow:hidden}
.rv-bar i b{display:block;height:100%;background:#f5a623;border-radius:99px}
.rv-bar em{font-style:normal;text-align:right}

.rv-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:20px}
.rv-list li{padding-bottom:20px;border-bottom:1px solid var(--line)}
.rv-list li:last-child{border-bottom:0;padding-bottom:0}
.rv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.rv-head b{font-size:14.5px}
.rv-head time{font-size:12.5px;color:var(--steel);margin-left:auto}
.rv-verified{font:700 11px var(--font);letter-spacing:.02em;color:#0a6b40;background:#eefaf2;
  border:1px solid #bfe8d3;border-radius:99px;padding:2px 9px}
.rv-list p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.rv-none{margin:0 0 26px;color:var(--steel);font-size:14.5px}

.rv-form{border-top:1px solid var(--line);padding-top:24px;max-width:620px}
.rv-form h2,.rv-form h3{font-size:1.05rem;margin:0 0 18px}
.rv-stars{margin-bottom:18px}
.rv-label{display:block;font:700 11.5px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin-bottom:8px}
/* laid out in reverse so the CSS sibling selector can light up the ones before */
.rv-pick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.rv-pick input{position:absolute;opacity:0;width:1px;height:1px}
.rv-pick label{cursor:pointer;line-height:0;padding:2px}
.rv-pick svg path{fill:#dfe3ea;transition:fill .12s}
.rv-pick label:hover svg path,
.rv-pick label:hover ~ label svg path,
.rv-pick input:checked ~ label svg path{fill:#f5a623}
.rv-pick input:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:640px){
  .rv-top{grid-template-columns:1fr;gap:20px}
  .rv-head time{margin-left:0;width:100%}
}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:38px 0 10px}
.pg-step{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;
  border:1.5px solid var(--line);font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;
  transition:.15s;background:#fff}
.pg-step:hover{border-color:var(--ink-2)}
.pg-step.off{opacity:.4;pointer-events:none}
.pg-nums{display:flex;align-items:center;gap:4px;margin:0 6px}
.pg-num{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 10px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink);
  text-decoration:none;transition:.15s}
.pg-num:hover{background:var(--bg-soft)}
.pg-num.on{background:var(--brand);color:#fff}
.pg-gap{padding:0 2px;color:var(--steel)}
.pg-count{text-align:center;margin:0 0 8px;font-size:13.5px;color:var(--steel)}
@media(max-width:520px){
  .pg-step span,.pg-step{padding:9px 12px}
  .pg-nums{margin:0 2px}
  .pg-num{min-width:34px;height:34px}
}

/* ---------- customer account ---------- */
.account-grid.one{grid-template-columns:minmax(0,460px);justify-content:center}
.acc-note{border-radius:10px;padding:12px 16px;margin:0 0 24px;font-size:14.5px;font-weight:600;
  background:#eefaf2;color:#0a6b40;border:1px solid #bfe8d3}
.acc-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--steel)}
.acc-bar a{font-weight:600;color:var(--ink)}
.acc-bar a:hover{color:var(--brand)}
.acc-orders{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.acc-orders li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:#fff}
.acc-orders b{display:block;font:700 13.5px var(--mono);letter-spacing:.02em}
.acc-orders span{display:block;font-size:12.5px;color:var(--steel);margin-top:2px}
.acc-order-right{text-align:right;flex:none}
.acc-order-right b{font:800 15px var(--font);letter-spacing:-.01em}
.acc-status{display:inline-block;margin-top:3px;border-radius:99px;padding:2px 9px;
  font:700 11px var(--font);background:var(--bg-soft);color:var(--steel)}
.acc-status.shipped{background:#eefaf2;color:#0a6b40}
.acc-status.cancelled,.acc-status.refunded{background:#fdeaea;color:#a01b1f}
/* Whether their money arrived. Prose rather than a badge: the unpaid case has
   to explain what happens next, and a pill has no room to say anything. */
.acc-paid{margin:10px 0 18px;padding:10px 13px;border-radius:9px;font-size:13.5px;
  background:#eefaf2;color:#0a6b40;border:1px solid #cdead9}
.acc-paid.unpaid{background:var(--bg-soft);color:var(--ink-2);border-color:var(--line)}
.acc-paid.part{background:#fff6ec;color:#a35400;border-color:#ffdcb8}
.acc-paid.refunded{background:#fdeaea;color:#a01b1f;border-color:#f6cccc}
.acc-pw{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.acc-pw h2,.acc-pw h3{font-size:1rem;margin:0 0 14px}

/* ---------- the customer's account ---------- */
/* A sidebar rather than one long page: the orders list is what people come
   back for, and it should not be below a form they filled in once. */
.acc-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start}
.acc-nav{display:grid;gap:2px;border:1px solid var(--line);border-radius:14px;
  padding:10px;background:#fff;position:sticky;top:16px}
.acc-nav a,.acc-out button{display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 13px;border:0;border-radius:9px;background:none;cursor:pointer;text-align:left;
  font:600 14px var(--font);color:var(--ink-2);transition:.15s}
.acc-nav a:hover,.acc-out button:hover{background:var(--bg-soft);color:var(--ink)}
.acc-nav a.on{background:var(--ink);color:#fff}
.acc-nav svg{flex:none}
.acc-nav .tally{margin-left:auto;font:700 11.5px var(--font);font-style:normal;
  background:var(--bg-soft);color:var(--steel);border-radius:99px;padding:2px 8px}
.acc-nav a.on .tally{background:rgba(255,255,255,.18);color:#fff}
.acc-out{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.acc-out button{color:var(--brand)}
.acc-body{display:grid;gap:22px;min-width:0}
.acc-body .acc-box{margin:0}

.acc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.acc-tile{display:grid;gap:4px;padding:20px 18px;border:1px solid var(--line);border-radius:14px;
  background:#fff;transition:.15s}
.acc-tile:hover{border-color:var(--brand);box-shadow:0 10px 24px -18px rgba(11,18,32,.5)}
.acc-tile svg{color:var(--brand);margin-bottom:6px}
.acc-tile b{font-size:15px;color:var(--ink)}
.acc-tile span{font-size:12.5px;color:var(--steel)}

.acc-lines{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:14px}
.acc-lines th,.acc-lines td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--line-2)}
.acc-lines thead th{font:700 11.5px var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--steel)}
.acc-lines td:last-child,.acc-lines tfoot th+td,.acc-lines th:last-child{text-align:right}
.acc-lines small{display:block;font-size:12.5px;color:var(--steel);margin-top:2px}
.acc-lines tfoot th{font-weight:600;color:var(--steel)}
.acc-lines tfoot .tot th,.acc-lines tfoot .tot td{font-weight:800;color:var(--ink);font-size:15px}
.acc-addr{color:var(--steel);line-height:1.75;margin-bottom:16px}
.acc-box h3{font-size:1rem;margin:0 0 8px}
.acc-orders a{color:inherit}
.acc-orders a:hover b{color:var(--brand)}

@media(max-width:820px){
  .acc-layout{grid-template-columns:1fr}
  .acc-nav{position:static;display:flex;flex-wrap:wrap;gap:4px}
  .acc-nav a,.acc-out button{width:auto}
  .acc-out{margin:0;padding:0;border:0}
}

/* ---------- search suggestions ---------- */
/* Sits under the box in the header, so it must outrank the sticky header and
   anything on the page below it. */
.search-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 20px 44px -20px rgba(11,18,32,.45),0 2px 6px rgba(11,18,32,.06);
  max-height:min(70vh,470px);overflow-y:auto}
.sd-item{display:flex;align-items:center;gap:13px;padding:11px 15px;border-bottom:1px solid var(--line-2)}
.sd-item:last-of-type{border-bottom:0}
.sd-item.on,.sd-item:hover{background:var(--bg-soft)}
.sd-item img,.sd-noimg{flex:none;width:46px;height:46px;border-radius:9px;object-fit:cover;
  background:var(--bg-soft);border:1px solid var(--line-2)}
.sd-txt{flex:1;min-width:0}
.sd-txt b{display:block;font:650 14px var(--font);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-txt em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--steel);margin-top:2px}
.sd-price{flex:none;text-align:right;font:700 13.5px var(--font);color:var(--ink)}
.sd-price i{display:block;font-style:normal;font-weight:600;font-size:11.5px;color:var(--brand);margin-top:2px}
.sd-all{display:block;padding:12px 15px;text-align:center;background:var(--bg-soft);
  border-top:1px solid var(--line);font:700 13.5px var(--font);color:var(--ink-2)}
.sd-all:hover{color:var(--brand)}
.sd-none{margin:0;padding:18px 18px;font-size:13.5px;color:var(--steel);line-height:1.65}
.sd-none b{color:var(--ink)}
.sd-none a{color:var(--brand);text-decoration:underline}
@media(max-width:640px){
  .sd-item{padding:10px 12px;gap:10px}
  .sd-item img,.sd-noimg{width:40px;height:40px}
  .sd-price{font-size:12.5px}
}

/* ---------- quick view ---------- */
/* A native <dialog>: Escape, the backdrop and a focus trap come free, and a
   hand-rolled overlay gets all three subtly wrong. */
.qv{width:min(920px,calc(100vw - 32px));max-height:min(88vh,760px);padding:0;border:0;
  border-radius:18px;background:#fff;color:var(--ink);overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(11,18,32,.6)}
.qv::backdrop{background:rgba(11,18,32,.55)}
.qv-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  max-height:inherit;overflow:hidden}
.qv-pic{background:var(--bg-soft);display:flex;align-items:center;justify-content:center;padding:22px}
.qv-pic img{width:100%;height:auto;max-height:420px;object-fit:contain}
.qv-info{padding:26px 28px;overflow-y:auto}
.qv-info h2{font-size:1.35rem;margin:6px 0 12px;line-height:1.25}
.qv-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.qv-price b{font-size:1.45rem;letter-spacing:-.02em}
.qv-price small{color:var(--steel);font-size:12.5px}
.qv .p-facts{margin-bottom:16px;padding:14px 16px 14px 18px;font-size:13.5px}
.qv-chips{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.qv-chips span{font:700 11.5px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);flex:none;min-width:52px}
.qv-chips i{font-style:normal;font:600 12.5px var(--font);color:var(--ink-2);
  border:1px solid var(--line);border-radius:7px;padding:3px 9px}
.qv-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.qv-acts .btn{flex:1;min-width:150px;justify-content:center}
.qv-x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;padding:0;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:50%;background:#fff;color:var(--ink-2);cursor:pointer}
.qv-x:hover{border-color:var(--ink-2);color:var(--ink)}
.qv-wait{margin:0;padding:48px 28px;text-align:center;color:var(--steel);font-size:14px}
.qv-wait a{color:var(--brand);text-decoration:underline}
@media(max-width:720px){
  .qv-body{grid-template-columns:1fr;overflow-y:auto}
  .qv-pic{padding:16px}
  .qv-pic img{max-height:220px}
  .qv-info{padding:20px}
}

/* the popup's own picker */
.qv-spec{margin:0 0 16px;border:1px solid var(--line);border-radius:11px;background:var(--bg-soft)}
.qv-spec summary{cursor:pointer;padding:11px 15px;font:700 12.5px var(--font);letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);list-style:none}
.qv-spec summary::-webkit-details-marker{display:none}
.qv-spec summary::after{content:"+";float:right;font-size:15px;line-height:1;color:var(--steel)}
.qv-spec[open] summary::after{content:"–"}
.qv-spec summary:hover{color:var(--ink)}
.qv-spec .p-facts{margin:0;border:0;border-radius:0;border-top:1px solid var(--line);
  border-left:3px solid var(--brand);background:transparent}
.qv-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.qv-row>span{font:700 11.5px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);flex:none;min-width:62px}
.qv-row>div{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 0;min-width:0}
.qv-sw{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;cursor:pointer;
  font:600 13px var(--font);color:var(--ink-2);transition:.15s}
.qv-sw:hover{border-color:var(--ink-2);color:var(--ink)}
.qv-sw.on{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);cursor:default}
.qv-sw.out{opacity:.4;cursor:not-allowed;text-decoration:line-through}
/* A bore that lives on another listing: pressing it swaps the popup, so it
   says so rather than looking like one more value of the same control. */
.qv-sw.away{border-style:dashed;color:var(--steel)}
.qv-sw.away::after{content:" ↗";font-size:10px;opacity:.75}
.qv-sw.away:hover{border-style:solid;color:var(--ink)}
/* Reachable, but off the shelf today — see .sw.oos on the product page. */
.qv-sw.oos{border-style:dashed;color:var(--steel)}
.qv-sw.oos::after{content:"·";margin-left:5px;color:#c0392b;font-weight:900}
.qv-sw.oos.on{border-style:solid}
.qv-none,.qv-oos{margin:0 0 12px;background:#fff5f0;border:1px solid #ffd6c2;border-radius:9px;
  padding:9px 12px;font-size:13px;color:var(--ink-2)}
.qv-none a,.qv-oos a{color:var(--brand);text-decoration:underline}
.qv-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.qv-acts .qty{height:44px}
.qv-acts .qty button{width:30px}
.qv-acts .qty input{width:38px}
.qv-acts .btn{flex:1;min-width:150px;justify-content:center;height:44px}
.qv-acts .btn:disabled{opacity:.45;cursor:not-allowed}
.qv-total{margin:12px 0 0;font-size:14px;color:var(--steel)}
.qv-total b{color:var(--ink);font-size:1.05rem}
.qv-more{display:inline-block;margin-top:14px;font:600 13.5px var(--font);color:var(--brand)}
.qv-more:hover{text-decoration:underline}

/* Buy now with a named gateway. Below Add to cart and visually secondary to
   it: the shop takes proforma orders as well, and a card button that outranks
   the basket implies card is the only way. */
.btn-pay{width:100%;justify-content:center;margin-top:8px;height:44px;
  background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.btn-pay:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff}

/* The delivery block on a product: two speeds, pickable. */
.p-ship-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
.p-ship-opt{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:9px;padding:7px 12px;background:#fff;
  font-size:13px;transition:.15s}
.p-ship-opt:hover{border-color:var(--ink-2)}
.p-ship-opt input{accent-color:var(--brand);margin:0}
.p-ship-opt i{font-style:normal;color:var(--steel)}
.p-ship-opt b{color:var(--ink);font-weight:700}
.p-ship-opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.p-ship-opt:has(input:checked) i{color:var(--ink)}
.p-ship-note{display:block;margin-top:7px;font-style:normal;font-size:12.5px;color:var(--steel)}
.p-ship-sum{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;
  background:#fff}
.p-ship-sum p{margin:0 0 4px;display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;font-size:14px;color:var(--steel)}
.p-ship-sum p b{color:var(--ink);font-size:1.1rem}
.p-ship-vat{display:block;font-size:12px;margin-bottom:12px}
.p-ship-sum .btn{width:100%;justify-content:center}

/* An axis with more options than chips can hold. Sized to its content rather
   than the row, so a list of bores does not stretch across the panel. */
.qv-sel{min-width:150px;max-width:100%;height:36px;padding:0 30px 0 11px;
  border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  font:600 13.5px var(--font);cursor:pointer;outline:0;transition:.15s;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6880' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.qv-sel:hover{border-color:var(--ink-2)}
.qv-sel:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(195,69,21,.12)}

/* The same rule as the popup: past six options a swatch row becomes a list. */
.sw-sel{min-width:160px;max-width:100%;height:44px;padding:0 34px 0 14px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
  font:600 14px var(--font);cursor:pointer;outline:0;transition:.15s;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235b6880' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.sw-sel:hover{border-color:var(--ink-2)}
.sw-sel:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(195,69,21,.12)}

/* Only reaches a reader with JavaScript off; the select carries the same
   sizes for everyone else. */
.sw-also{font-size:13px;color:var(--steel)}
.sw-also a{color:var(--brand);text-decoration:underline}

/* ---------- cookie consent ---------- */
/* Only rendered when the shop has actually entered an analytics id, and only
   until somebody answers. Bottom-left rather than a full-width bar: it has to
   be noticed and answered, not to hold the page hostage. */
.consent{position:fixed;left:16px;bottom:16px;z-index:200;width:min(420px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 20px 50px -20px rgba(11,18,32,.45)}
.consent p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--steel)}
.consent-acts{display:flex;gap:9px;flex-wrap:wrap}
.consent-acts .btn{flex:1;min-width:120px;justify-content:center;height:40px;font-size:14px}
@media(max-width:520px){.consent{left:12px;right:12px;bottom:12px;width:auto}}

/* ---------- checkout.css ---------- */
/* ARG FLEX LTD — mini cart and checkout */

/* ---------- mini cart ---------- */
.mini{position:fixed;inset:0;z-index:110}
.mini[hidden]{display:none}
.mini .mini-sc{position:absolute;inset:0;background:rgba(11,18,32,.5);opacity:0;transition:.24s}
.mini.on .mini-sc{opacity:1}
.mini-pn{position:absolute;top:0;right:0;bottom:0;width:min(92vw,400px);background:#fff;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 50px -30px rgba(11,18,32,.6)}
.mini.on .mini-pn{transform:none}
.mini-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;
  border-bottom:1px solid var(--line)}
.mini-hd h2{font-size:1.05rem;display:flex;align-items:center;gap:9px}
.mini-hd svg{color:var(--ok);flex:none}
.mini-x{border:0;background:var(--bg-soft);width:34px;height:34px;border-radius:9px;cursor:pointer;
  font-size:20px;line-height:1;color:var(--ink-2);flex:none}
.mini-x:hover{background:var(--line)}
.mini-body{flex:1;overflow-y:auto;padding:8px 22px}
.mini-rows{list-style:none;margin:0;padding:0}
.mini-rows li{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.mini-rows li:last-child{border-bottom:0}
.mini-rows img,.mini-rows .ph{width:56px;height:44px;object-fit:cover;border-radius:8px;background:var(--bg-soft);display:block}
.mini-rows a{font-weight:700;font-size:14px;line-height:1.35;display:block}
.mini-rows a:hover{color:var(--brand)}
.mini-rows .opt,.mini-rows .qty-line{display:block;font-size:12.5px;color:var(--steel);margin-top:3px}
.mini-rows b{font-size:14.5px;white-space:nowrap}
.mini-rm{border:0;background:none;cursor:pointer;color:var(--steel);font-size:18px;line-height:1;padding:2px 4px}
.mini-rm:hover{color:var(--brand)}
.mini-none{padding:40px 0;text-align:center;color:var(--steel)}
.mini-ft{border-top:1px solid var(--line);padding:20px 22px;background:var(--bg-soft)}
.mini-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.mini-sum b{font-size:1.3rem;letter-spacing:-.02em}
.mini-note{font-size:12.5px;color:var(--steel);margin:4px 0 16px}
.mini-cont{border:0;background:none;cursor:pointer;width:100%;margin-top:12px;padding:6px;
  font:600 13.5px var(--font);color:var(--steel);text-decoration:underline}
.mini-cont:hover{color:var(--brand)}

/* ---------- checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:start}
.co-box{border:1px solid var(--line);border-radius:14px;padding:26px;background:#fff;margin:0 0 20px;min-width:0}
.co-box legend,.co-box h3{font-size:1.12rem;font-weight:700;padding:0 8px;margin-left:-8px;letter-spacing:-.02em}
.co-box h2,.co-box h3{padding:0;margin:0 0 12px}
.co-pay p{color:var(--steel);font-size:14.5px;margin-bottom:10px}
.co-pay .muted{font-size:13.5px;color:var(--steel);margin:0}
.fld.bad input,.fld.bad textarea{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.12)}
.form-error{border:1px solid #ffd6c2;background:#fff5f0;border-radius:12px;padding:16px 20px;margin-bottom:24px}
.form-error b{display:block;margin-bottom:6px}
.form-error ul{margin:0;padding-left:20px;font-size:14px;color:var(--ink-2)}
.form-error li{margin-bottom:4px}

.co-side{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;position:sticky;top:100px}
.co-side h2,.co-side h3{font-size:1.1rem;margin-bottom:16px}
.co-lines{list-style:none;margin:0 0 16px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.co-lines li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 0;font-size:14px}
.co-lines .n{color:var(--steel);font-weight:600}
.co-lines .t{line-height:1.4}
.co-lines em{display:block;font-style:normal;font-size:12.5px;color:var(--steel);margin-top:2px}
.co-lines b{white-space:nowrap}
.co-side .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14.5px;color:var(--steel)}
.co-side .row b{color:var(--ink);font-weight:700}
.co-side .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:16px;color:var(--ink)}
.co-side .row.total b{font-size:1.3rem}
.co-side .hint{font-size:12.5px;color:var(--steel);margin:10px 0 16px}
.co-empty{text-align:center;color:var(--steel)}
.co-empty p{margin-bottom:16px;font-size:14.5px}
@media(max-width:920px){
  .checkout-grid{grid-template-columns:1fr}
  .co-side{position:static;order:-1}

  /* The payment chooser is moved in beside the card fields on a narrow screen
     — see payWithTheCard() in site.js. A bordered card sitting inside the
     summary card reads as a mistake, so in here it becomes a section of it. */
  .co-side .co-pay{border:0;border-radius:0;background:none;padding:18px 0 0;
    margin:18px 0 0;border-top:1px solid var(--line)}
  .co-side .co-pay h2,.co-side .co-pay h3{font-size:1rem;margin-bottom:10px}
}

/* ---------- order placed ---------- */
.next-steps{list-style:none;counter-reset:step;margin:0 0 30px;padding:0;display:grid;gap:14px}
.next-steps li{counter-increment:step;border:1px solid var(--line);border-radius:14px;padding:20px 22px 20px 64px;
  position:relative;background:#fff}
.next-steps li::before{content:counter(step);position:absolute;left:22px;top:20px;width:28px;height:28px;
  border-radius:50%;background:var(--brand);color:#fff;font:800 13px var(--font);display:grid;place-items:center}
.next-steps b{display:block;margin-bottom:4px}
.next-steps span{color:var(--steel);font-size:14.5px}
.done-box{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--bg-soft)}
.done-box p{margin-bottom:16px;font-size:15px}
.done-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- the receipt on the thank-you page ---------- */
/* Shown only to the browser that placed the order — receipt_allowed(). */
.receipt{border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:22px;background:#fff}
.receipt h2{font-size:19px;margin:0 0 16px}
.receipt h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--steel);
  margin:0 0 6px;font-weight:700}
.receipt-lines{width:100%;border-collapse:collapse;font-size:14.5px}
.receipt-lines td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.receipt-lines small{display:block;color:var(--steel);font-size:13px;margin-top:2px}
.receipt-lines .qty{white-space:nowrap;color:var(--steel);padding-left:14px;text-align:right}
.receipt-lines .money{white-space:nowrap;text-align:right;padding-left:14px;font-variant-numeric:tabular-nums}
.receipt-lines tfoot td{border-bottom:0;padding:6px 0;color:var(--steel)}
.receipt-lines tfoot td.money{color:var(--ink)}
.receipt-lines tfoot tr:first-child td{padding-top:14px}
.receipt-lines tfoot .total td{padding-top:12px;border-top:1px solid var(--line);
  font-weight:700;font-size:17px;color:var(--ink)}
.receipt-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:24px;
  padding-top:22px;border-top:1px solid var(--line)}
.receipt-cols p{margin:0 0 16px;font-size:14.5px;line-height:1.7}
@media (max-width:560px){.receipt-cols{grid-template-columns:1fr;gap:20px}}


/* ---------- payment methods and the delivery zone note ---------- */
.fld-note{margin:7px 0 0;font-size:13px;color:var(--steel)}
.fld-note b{color:var(--ink)}
.pay-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pay-opt{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:11px;cursor:pointer;transition:.15s;background:#fff}
.pay-opt:hover{border-color:var(--ink-2)}
.pay-opt input{margin:2px 0 0;accent-color:var(--brand);flex:none}
.pay-opt:has(input:checked){border-color:var(--brand);background:#fff8f5}
.pay-opt b{display:block;font-size:14.5px}
.pay-opt em{display:block;font-style:normal;font-size:13.5px;color:var(--steel);margin-top:3px;line-height:1.5}

/* ---------- discount codes ---------- */
.coupon{margin:16px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.coupon label{display:block;font:700 11.5px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin-bottom:7px}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1;min-width:0;text-transform:uppercase}
.coupon-row .btn{flex:none;padding-left:18px;padding-right:18px}
.coupon-msg{margin:9px 0 0;font-size:13.5px;color:#c0392b}
.coupon-on{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;
  background:#eefaf2;border:1px solid #bfe8d3;border-radius:9px;padding:9px 12px;font-size:13.5px}
.coupon-on b{font:700 12px var(--mono);letter-spacing:.04em;background:#0f9d58;color:#fff;
  padding:3px 8px;border-radius:5px}
.coupon-on span{color:#0a6b40}
.coupon-on button{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font:600 13px var(--font);color:var(--steel);text-decoration:underline}
.coupon-on button:hover{color:var(--ink)}
.row.disc b{color:#0f9d58}

/* Delivery choice.
   A basket can travel as two consignments, each charged on its own, so this
   is a group of groups. The headings are the shop's own — they say "1-2 days"
   even where the rates under them include the slower option. */
.ship-h{font:800 15px var(--font);letter-spacing:-.01em;margin:0 0 14px}
.ship-pkg{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 12px}
.ship-pkg:last-child{margin-bottom:0}
.ship-pkg legend{font:700 12px var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:0 6px}
.ship-opt{display:flex;align-items:center;gap:11px;padding:9px 4px;cursor:pointer;border-radius:8px}
.ship-opt:hover{background:var(--bg-soft)}
.ship-opt input{flex:none;margin:0;accent-color:var(--brand)}
.ship-name{flex:1;font:500 14px var(--font)}
.ship-cost{font:700 14px var(--font);white-space:nowrap}
.ship-no{color:var(--brand);font:600 14px var(--font);margin:0}

/* Paying by card or PayPal.
   The card fields are Stripe's own iframe and the PayPal button is theirs;
   both size themselves, so this only gives them room and a place to put an
   error where the customer is already looking. */
.pay-fields{margin:0 0 14px}
.pay-fields:empty{margin:0}
.pay-error{margin:0 0 12px;padding:11px 14px;border-radius:var(--r);
  background:#fff4ee;border:1px solid var(--brand);color:var(--brand);
  font:600 14px var(--font)}

/* The picture on an order line.
   Reading your own order back as a list of names is the last place to make
   somebody do that, and the cart has carried the image all along. */
.co-thumb{width:40px;height:40px;flex:none;object-fit:contain;border-radius:6px;
  background:var(--bg-soft)}
.co-thumb.ph{display:block}
.co-lines .n{align-self:center}

/* ---------- a11y.css ---------- */
/* Accessibility, built last on purpose.
   Everything here has to outrank what came before. The five `outline:0`
   declarations that switch the browser's focus ring off score 0-1-1, the
   same as `input:focus-visible`, so the only thing separating them is
   order — and pages.css used to come after v1.css and win. Keeping these
   rules in their own file, appended at the end, settles that for good. */

/* Straight past the navigation, for anyone arriving by keyboard. Parked
   off-screen until it has focus, which is the whole of its behaviour. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font:700 15px var(--font);text-decoration:none}
.skip:focus{left:0}
main:focus,main:focus-visible{outline:none}

/* A keyboard user has to be able to see where they are. Five fields switch
   the browser's own ring off so they can colour their border instead, and
   the quantity box did so without putting anything back — you could type
   into it with no sign it was the thing listening. This catches that case
   and any future one, and shows only for a keyboard, never a mouse click. */
:focus-visible{outline:2px solid var(--brand-bright);outline-offset:2px;border-radius:3px}

/* The same ring again, spelled out. The bare rule above scores 0-1-0, and
   the five `outline:0` declarations that turn the browser's ring off score
   0-1-1, so they beat it and the ring never appeared where it was needed
   most. These tie on specificity and come later, so they win. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand-bright);outline-offset:2px}
.qty input:focus-visible{outline-offset:-2px}
.btn:focus-visible,.icon-btn:focus-visible{outline-offset:3px}