/* ============================================================
   Stanford Marsh — home page
   Dark, image-led brand world carried over from "In the Room",
   with the commerce furniture (categories, offers, product cards,
   basket, brand shop) folded into the same visual language.

   House rules observed throughout:
   · no text-transform:uppercase and no letter-spacing anywhere —
     labels are separated from body copy by size, weight and colour
   · soft corners on every surface, driven by one radius scale
   · flat colour, not gradients
   · titles and subtitles are bold; body copy is not
   · pink is reserved for the key action in any given block, and
     secondary actions take the muted treatment
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

:root{
  /* identity */
  --void:#030e20;
  --ink:#051d41;
  --ink-up:#0a2a55;
  --panel:#08203f;      /* card / panel surface — flips on light bands */
  --well:#08203f;       /* product image well — stays deep navy everywhere,
                           so the press shots read the same on either band */
  --head:#ffffff;       /* heading + emphasis colour */
  --pink:#d3007e;        /* kept for the occasional splash, not the default */
  --pink-hot:#ee2a9b;
  --sky:#b2dff1;

  /* light blue now leads: primary actions, banners and hover states */
  --blue:#b2dff1;        /* Pantone 2975 — the fill, always with navy type */
  --navy:#051d41;        /* the brand navy, fixed — never flips with the band */
  --on-blue:var(--navy); /* type on a blue fill */
  --blue-hot:#8ed2ee;
  --blue-deep:#0f6d9c;   /* for marks that would vanish at the pale end */
  --text:#dce9f4;
  --text-dim:#93aec8;
  --hair:rgba(178,223,241,.18);
  --hair-2:rgba(178,223,241,.32);
  --gold:#ffc24a;
  --green:#37d39b;

  /* muted surface, for recessive controls */
  --muted:rgba(178,223,241,.08);
  --muted-up:rgba(178,223,241,.15);

  /* radius scale */
  --r-xs:9px;
  --r-sm:13px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;
  --pill:100px;

  --wrap:1320px;
  --gut:clamp(20px,5vw,72px);

  /* the sticky header: bar (86) + nav row (56) + hairline.
     Everything that sticks below it offsets from here. */
  --header-h:143px;
  --stick:calc(var(--header-h) + 20px);

  /* type scale — every font-size in the sheet snaps to one of these */
  --fs-xs:.78rem;        /* badges, counts, captions */
  --fs-sm:.86rem;        /* meta, table body, notes */
  --fs-base:.94rem;      /* body copy, links, buttons, nav */
  --fs-md:1.05rem;       /* emphasis, card titles */
  --fs-lg:1.2rem;        /* small headings */
  --fs-xl:1.4rem;        /* block headings */

  /* supporting colours, so they stop drifting as loose hex */
  --ink-soft:#1c456e;    /* body copy on the pale blue band */
  --ink-mute:#1a4a75;    /* eyebrow on the pale blue band */
  --green:#12a97a;       /* in stock */
  --red:#d2362f;         /* out of stock */
  --green-deep:#0e8a63;
  --placeholder:rgba(146,173,199,.62);

  /* one modern sans, nothing else */
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:var(--r-xs)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sect{padding-block:clamp(64px,9vw,132px)}
.sect--tight{padding-block:clamp(52px,7vw,100px)}

/* ---------- type: titles and subtitles bold, body regular ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.032em;line-height:1.06;
  text-wrap:balance;color:var(--head)}
.d1{font-size:clamp(2.6rem,7vw,5.8rem);line-height:1.02}
.d2{font-size:clamp(2rem,4.6vw,3.6rem)}
.d3{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.18}
.d4{font-size:var(--fs-lg);font-weight:600}
strong,.semi{font-weight:700}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.04rem,1.35vw,1.18rem);color:var(--text);max-width:58ch;
  line-height:1.62;font-weight:400}
.dim{color:var(--text-dim)}

/* eyebrow — a pink rule and the sky blue carry it, not tracked capitals */
.tag{
  font-size:var(--fs-base);font-weight:600;color:var(--head);
  display:flex;align-items:center;gap:13px;margin:0 0 20px;
}
.tag::before{content:"";width:32px;height:2px;border-radius:2px;background:var(--blue);flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:var(--pill);border:1px solid transparent;
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}

/* key action — light blue with navy type */
.btn--primary{background:var(--blue);color:var(--on-blue);font-weight:700}
.btn--primary:hover{background:var(--blue-hot);color:var(--on-blue)}

/* the occasional splash, kept for the few places that should shout */
.btn--pink{background:var(--pink);color:#fff}
.btn--pink:hover{background:var(--pink-hot)}

/* secondary action — recessive by default, lifts on hover */
.btn--muted{background:var(--muted);border-color:var(--hair);color:var(--text-dim);font-weight:500}
.btn--muted:hover{background:var(--muted-up);border-color:var(--hair-2);color:#fff}

/* secondary action sitting on photography, where the muted fill would vanish */
.btn--wire{background:rgba(3,14,32,.42);border-color:rgba(255,255,255,.28);
  color:var(--text);font-weight:500;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--wire:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(3,14,32,.6)}

/* secondary action on the one light band */
.btn--ink-wire{background:rgba(5,29,65,.07);border-color:rgba(5,29,65,.22);
  color:var(--ink-soft);font-weight:500}
.btn--ink-wire:hover{border-color:rgba(5,29,65,.45);background:rgba(5,29,65,.12);color:var(--ink)}

.btn--sm{padding:11px 20px;font-size:var(--fs-sm)}
.btn--block{width:100%}
.arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(4px)}

.ulink{display:inline-flex;align-items:center;gap:9px;font-weight:500;color:var(--head);
  padding-bottom:5px;border-bottom:1px solid var(--hair);transition:border-color .2s ease}
.ulink:hover{border-color:var(--blue-deep)}
.ulink:hover .arrow{transform:translateX(4px)}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   HEADER
   ============================================================ */
.topbars{position:relative;z-index:70;background:var(--void)}

.nav{position:sticky;top:0;z-index:80;
  background:rgba(3,14,32,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
  transition:background .3s ease,box-shadow .3s ease}
/* only the shadow changes on stick — the height never does, so the header
   cannot shrink the page, move the scroll position and re-trigger itself */
.nav.is-stuck{background:rgba(3,14,32,.97);box-shadow:0 12px 34px -24px rgba(0,0,0,.9)}

/* utility bar */
.util{border-bottom:1px solid var(--hair);background:rgba(3,14,32,.4);
  font-size:var(--fs-sm);color:var(--text-dim)}
.util .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:9px}
.util-loc{margin:0}
.util-loc a{color:var(--text);font-weight:500}
.util-loc a:hover{color:#fff}
.util-act{margin-left:auto;display:flex;align-items:center;gap:22px}
.util-act a{display:inline-flex;align-items:center;gap:7px;transition:color .18s ease}
.util-act a:hover{color:#fff}
.util-key{color:var(--sky)}
@media (max-width:980px){.util{display:none}}

/* main bar: logo · search · account actions */
.bar{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);
  min-height:86px;padding-block:14px}
.brand{flex:none}
.brand img{height:48px;width:auto}

.search{flex:1;min-width:0;display:flex;align-items:center;
  background:var(--muted);border:1px solid var(--hair);border-radius:var(--pill);
  transition:border-color .2s ease,background .2s ease}
.search:focus-within{border-color:var(--sky);background:var(--muted-up)}
.search-cat{flex:none;position:relative;display:flex;align-items:center}
.search-cat select{appearance:none;-webkit-appearance:none;background:transparent;border:0;
  color:var(--text);font:inherit;font-size:var(--fs-sm);padding:14px 32px 14px 22px;
  cursor:pointer;border-right:1px solid var(--hair);border-radius:0}
.search-cat select:focus{outline:none}
.search-cat select option{background:var(--ink);color:#fff}
.search-cat svg{position:absolute;right:14px;pointer-events:none;color:var(--text-dim)}
.search input{flex:1;min-width:0;background:transparent;border:0;color:#fff;
  font:inherit;font-size:var(--fs-base);padding:14px 18px}
.search input::placeholder{color:var(--placeholder)}
.search input:focus{outline:none}
.search-go{flex:none;width:44px;height:44px;margin:4px;border:0;border-radius:50%;
  background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease}
.search-go:hover{background:var(--pink-hot);transform:scale(1.06)}

.bar-act{flex:none;display:flex;align-items:center;gap:4px}
.iconbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 13px;border:0;background:transparent;color:var(--text);border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:500;transition:color .18s ease,background .18s ease}
.iconbtn:hover{color:#fff;background:var(--muted)}
.iconbtn .pip{position:absolute;top:2px;right:7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--pill);background:var(--pink);color:#fff;font-size:var(--fs-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.bar-act .btn{margin-left:10px;padding:12px 24px;font-size:var(--fs-sm)}
@media (max-width:1180px){.iconbtn span:last-child{display:none}.iconbtn{gap:0;padding:11px}}
@media (max-width:760px){.brand img{height:40px}}
@media (max-width:900px){
  .search{order:5;flex:1 1 100%;margin-top:6px}
  .search-cat{display:none}
  .bar{flex-wrap:wrap;padding-bottom:16px}
  .bar-act{margin-left:auto}
}
@media (max-width:640px){.bar-act .btn{display:none}}

/* navigation row */
.navrow{border-top:1px solid var(--hair)}
.navrow .wrap{display:flex;align-items:stretch;gap:0;min-height:56px}

/* "Shop by category" opener */
.catbtn{display:inline-flex;align-items:center;gap:11px;background:var(--pink);color:#fff;
  border:0;border-radius:var(--pill);padding:0 24px;margin:8px 28px 8px 0;
  font-size:var(--fs-base);font-weight:600;transition:background .2s ease}
.catbtn:hover,.catbtn[aria-expanded="true"]{background:var(--pink-hot)}
.catbtn .chev{transition:transform .22s ease}
.catbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}

.nav-links{display:flex;align-items:stretch;gap:30px;font-size:var(--fs-base);font-weight:500}
.nav-links > a,.nav-top{display:inline-flex;align-items:center;gap:6px;color:var(--text);
  position:relative}
.nav-links > a::after,.nav-top::after{content:"";position:absolute;left:0;bottom:15px;
  width:0;height:2px;border-radius:2px;background:var(--pink);transition:width .25s ease}
.nav-links > a:hover::after,.nav-top:hover::after,
.nav-links > a[aria-current="page"]::after{width:100%}
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-top .chev{opacity:.65;transition:transform .22s ease,opacity .2s ease}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg);opacity:1}
.nav-help{margin:0 0 0 auto;display:flex;align-items:center;gap:10px;
  font-size:var(--fs-sm);color:var(--text-dim);align-self:center}
.nav-help b{color:#fff;font-weight:600}
.nav-help svg{color:var(--sky)}

/* dropdown panels */
.subm{position:absolute;top:100%;left:-22px;z-index:90;padding-top:6px;
  opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1),visibility .22s}
.nav-item:hover .subm,.nav-item:focus-within .subm{opacity:1;visibility:visible;transform:none}
.subm-in{background:rgba(3,14,32,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:0 34px 64px -34px rgba(0,0,0,.95);padding:26px 30px;display:flex;gap:46px}
.subm--sm .subm-in{gap:0}
.subm-col{display:flex;flex-direction:column;gap:11px}
.subm-h{font-size:var(--fs-sm);font-weight:600;color:var(--sky);margin-bottom:3px}
.subm a{font-size:var(--fs-base);color:var(--text);white-space:nowrap;font-weight:400;
  transition:color .16s ease,transform .16s ease}
.subm a:hover{color:#fff;transform:translateX(3px)}
.subm a::after{display:none}
.subm-feat{max-width:236px;border-left:1px solid var(--hair);padding-left:30px}
.subm-feat p{font-size:var(--fs-sm);line-height:1.5;color:var(--text-dim);margin:0 0 14px;white-space:normal}

/* full-width category mega panel */
.megacat{position:absolute;left:0;right:0;top:100%;z-index:95;
  background:rgba(3,14,32,.985);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hair);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.95);
  animation:nav-drop .28s cubic-bezier(.22,.61,.36,1)}
.megacat .wrap{padding-block:32px 36px}
.megacat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:28px clamp(18px,2.4vw,38px)}
.megacat-col h4{font-size:var(--fs-base);font-weight:600;color:var(--sky);margin-bottom:14px}
.megacat-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.megacat-col a{font-size:var(--fs-base);color:var(--text);transition:color .16s ease,transform .16s ease;
  display:inline-flex;align-items:center;gap:8px}
.megacat-col a:hover{color:#fff;transform:translateX(3px)}
.megacat-col .new{font-size:var(--fs-xs);font-weight:600;color:#fff;background:var(--pink);
  border-radius:var(--pill);padding:2px 9px;line-height:1.5}
.megacat-foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:var(--fs-sm);color:var(--text-dim)}
@media (max-width:1200px){.megacat{display:none}}
@media (max-width:1260px){.megacat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@keyframes nav-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* burger + mobile panel */
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;
  background:var(--muted);color:#fff;align-items:center;justify-content:center;transition:.18s ease}
.nav-burger:hover{border-color:var(--hair-2);background:var(--muted-up)}
@media (max-width:1200px){
  .navrow{display:none}
  .nav-burger{display:flex}
}
.mmenu{border-top:1px solid var(--hair);background:rgba(3,14,32,.98);
  max-height:min(74vh,640px);overflow:auto;animation:nav-drop .28s cubic-bezier(.22,.61,.36,1)}
.mmenu .wrap{display:block;padding-block:8px}
.mm-row{border-bottom:1px solid var(--hair)}
.mm-row > a,.mm-row > button{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:12px;padding:15px 2px;background:none;border:0;color:#fff;font:inherit;font-size:var(--fs-md);
  font-weight:500;text-align:left;cursor:pointer}
.mm-row > button .chev{transition:transform .22s ease;opacity:.7}
.mm-row.is-open > button .chev{transform:rotate(180deg)}
.mm-sub{display:none;padding:0 2px 16px;flex-direction:column;gap:13px}
.mm-row.is-open .mm-sub{display:flex}
.mm-sub a{color:var(--text-dim);font-size:var(--fs-base)}
.mm-sub a:hover{color:#fff}
.mm-act{display:flex;gap:10px;flex-wrap:wrap;padding:18px 0 10px}
@media (min-width:1201px){.mmenu{display:none!important}}

/* ---------- basket drawer ---------- */
.scrim{position:fixed;inset:0;z-index:110;background:rgba(3,14,32,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fade-in .25s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:12px;right:12px;bottom:12px;z-index:120;width:min(420px,calc(100% - 24px));
  background:var(--ink);border:1px solid var(--hair);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  animation:drawer-in .32s cubic-bezier(.22,.61,.36,1)}
@keyframes drawer-in{from{transform:translateX(104%)}to{transform:none}}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 24px;border-bottom:1px solid var(--hair);background:#fff}
.drawer-top h3{font-size:var(--fs-lg);color:var(--navy)}
.drawer-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);
  background:var(--muted);color:var(--navy);display:flex;align-items:center;justify-content:center;
  transition:.18s ease}
.drawer-close:hover{background:var(--muted-up);border-color:var(--hair-2)}
.drawer-body{flex:1;overflow:auto;padding:8px 24px;background:#fff}
.dline{display:flex;gap:14px;align-items:center;padding-block:18px;
  border-bottom:1px solid var(--hair)}
.dline .im{flex:none;width:68px;height:68px;border:1px solid rgba(5,29,65,.1);
  border-radius:var(--r-sm);background:#f3f8fc;
  display:flex;align-items:center;justify-content:center;padding:7px}
.dline .im img{width:100%;height:100%;object-fit:contain}
.dline b{display:block;color:var(--navy);font-weight:600;font-size:var(--fs-base);margin-bottom:3px}
.dline small{color:var(--text-dim);font-size:var(--fs-xs)}
.dline .price{margin-left:auto;color:var(--navy);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.drawer-empty{padding:48px 0;text-align:center;color:var(--text-dim)}
.drawer-foot{border-top:1px solid var(--hair);padding:22px 24px;background:var(--void)}
.drawer-sum{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:7px;font-size:var(--fs-base);color:var(--text-dim)}
.drawer-sum.total{font-size:var(--fs-lg);color:#fff;margin-bottom:18px}
.drawer-sum.total b{font-weight:700;font-variant-numeric:tabular-nums}
.drawer-note{margin:14px 0 0;font-size:var(--fs-xs);color:var(--text-dim);text-align:center}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(78vh,680px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.hero video,
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(3,14,32,.7)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(56px,7vw,92px)}
.hero .rot{color:var(--sky);display:block;white-space:nowrap}
.hero .lead{margin:26px 0 34px;color:#fff}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:36px;
  font-size:var(--fs-sm);font-weight:500;color:#fff}
.hero-meta span{display:flex;align-items:center;gap:9px}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--blue);flex:none}

/* ---------- trust strip ---------- */
.trust{background:var(--ink);border-bottom:1px solid var(--hair)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding-block:clamp(24px,3vw,34px)}
.trust-item{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  display:flex;align-items:center;gap:14px;padding:20px 20px;min-height:84px;
  transition:border-color .25s ease,transform .25s ease}
.trust-item:hover{border-color:var(--hair-2);transform:translateY(-3px)}
.trust-item .ic{flex:none;width:46px;height:46px;border-radius:var(--r-sm);
  background:var(--muted);color:var(--sky);
  display:flex;align-items:center;justify-content:center;transition:.25s ease}
.trust-item:hover .ic{background:var(--blue);color:var(--on-blue)}
.trust-item > span{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.trust-item b{display:block;color:var(--head);font-weight:700;font-size:var(--fs-base);letter-spacing:-.018em;line-height:1.25;white-space:nowrap}
.trust-item span span{font-size:var(--fs-sm);color:var(--text-dim);line-height:1.35}
@media (max-width:1040px){.trust .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.trust .wrap{grid-template-columns:1fr}}

/* ---------- manufacturer strip ---------- */
.brands{border-bottom:1px solid var(--hair);background:var(--ink)}
.brands .wrap{padding-block:clamp(32px,4vw,52px)}
.brands-label{font-size:var(--fs-base);font-weight:500;color:var(--text-dim);
  text-align:center;margin:0 0 clamp(20px,2.4vw,30px)}
.brand-row{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  justify-content:center;gap:clamp(24px,6vw,76px);flex-wrap:wrap}
.brand-row li{display:flex}
.brand-row .blogo{display:block;width:clamp(96px,10vw,132px);aspect-ratio:260/96;
  background-color:var(--head);
  -webkit-mask-image:var(--logo);mask-image:var(--logo);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:background-color .28s ease,transform .28s ease}
.brand-row li:hover .blogo{background-color:var(--blue-deep);transform:translateY(-3px)}
@media (max-width:520px){.brand-row{gap:26px 34px}.brand-row .blogo{width:88px}}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.disp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:34px}
.disp-head .d2{margin:0}

/* ============================================================
   CATEGORIES
   ============================================================ */
.catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1100px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.catgrid{grid-template-columns:repeat(2,1fr)}}
.cat{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  padding:26px 18px 22px;display:flex;flex-direction:column;align-items:center;gap:13px;
  text-align:center;transition:border-color .25s ease,transform .25s ease,background .25s ease}
.cat:hover{border-color:var(--blue-deep);transform:translateY(-4px);background:var(--ink-up)}
.cat .ic{width:62px;height:62px;border-radius:var(--r);background:var(--muted);
  color:var(--sky);display:flex;align-items:center;justify-content:center;transition:.25s ease}
.cat:hover .ic{background:var(--blue);color:var(--on-blue)}
.cat span{font-size:var(--fs-xs);color:var(--text-dim)}
/* every category card carries the same two lines, so the grid stays even */
.cat b{color:var(--head);font-weight:600;font-size:var(--fs-base);letter-spacing:-.015em;
  line-height:1.28;min-height:2.5em;display:flex;align-items:center;justify-content:center}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{background:var(--ink)}
.statement .d2{max-width:20ch}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.trio > div{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:34px 30px 32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  transition:border-color .25s ease,transform .25s ease}
.trio > div:hover{border-color:var(--hair-2);transform:translateY(-4px)}
.trio h3{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.trio p{font-size:var(--fs-base);color:var(--text-dim);margin:0;flex:1}
@media (max-width:860px){.trio{grid-template-columns:1fr}}

/* ============================================================
   MACHINE GRID
   The range, browsable by what the machine is for. Replaces the
   one-at-a-time carousel: six cards, filtered in place, so the
   whole range is visible instead of one machine at a time.
   ============================================================ */
.fbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.fbar button{background:var(--muted);border:1px solid var(--hair);color:var(--text-dim);
  border-radius:var(--pill);padding:10px 20px;font-size:var(--fs-sm);font-weight:500;
  transition:.18s ease}
.fbar button:hover{border-color:var(--hair-2);color:var(--head)}
.fbar button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);
  color:var(--on-blue);font-weight:700}
.fcount{margin-left:auto;font-size:var(--fs-sm);color:var(--text-dim);font-variant-numeric:tabular-nums}

.lspecs{display:flex;gap:7px;flex-wrap:wrap}
.lspecs span{font-size:var(--fs-xs);color:var(--text-dim);font-variant-numeric:tabular-nums;
  border:1px solid var(--hair);background:var(--muted);border-radius:var(--pill);
  padding:4px 12px;white-space:nowrap}
.lspecs b{color:var(--head);font-weight:600}
.gate{color:var(--text-dim);display:flex;align-items:center;gap:7px;font-size:var(--fs-sm)}

/* ---- one machine at a time ---- */
.mshow{position:relative}
.mshow-frame{position:relative}
.mstage{position:relative;width:100%;display:grid}

.mcard{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  background:#fff;border:1px solid rgba(5,29,65,.12);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateX(22px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1),visibility .5s}
.mcard.is-active{opacity:1;visibility:visible;transform:none}

.mcard .im{position:relative;min-height:clamp(280px,32vw,400px);background:#fff;
  border-right:1px solid rgba(5,29,65,.1);
  display:flex;align-items:center;justify-content:center}
@media (max-width:860px){.mcard .im{border-right:0;border-bottom:1px solid rgba(5,29,65,.1)}}
.mcard .im img{width:100%;height:100%;object-fit:contain;padding:9% 8%;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.mcard:hover .im img{transform:scale(1.04)}

.mcard .bd{padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;
  justify-content:center;gap:13px}
.mcard .wish{background:rgba(5,29,65,.05);border-color:rgba(5,29,65,.14);color:var(--text-dim)}
.mcard .wish:hover{background:rgba(15,109,156,.12);border-color:var(--blue-deep);color:var(--blue-deep)}
.mcard h3{font-size:clamp(1.45rem,2.5vw,2.05rem)}
.mcard .meta{font-size:var(--fs-md);color:var(--text-dim);margin:0;max-width:44ch;line-height:1.55}
.mcard .price{margin-top:4px;padding-top:0}
.mcard .pfoot{margin-top:6px}
.mcard .pfoot .btn{align-self:flex-start}
@media (max-width:860px){
  .mcard{grid-template-columns:1fr}
  .mcard .im{min-height:240px}
}

.mnav{position:absolute;top:50%;z-index:5;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--hair);background:var(--muted);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(-50%);
  transition:background .2s ease,border-color .2s ease,margin .2s ease}
.mnav:hover{background:var(--muted-up);border-color:var(--hair-2)}
/* the gutter either side of the wrap is where these live on a wide screen */
.mnav.prev{right:calc(100% + 20px)}
.mnav.next{left:calc(100% + 20px)}
.mnav.prev:hover{margin-left:-3px}
.mnav.next:hover{margin-left:3px}

/* no room outside the container — drop them onto their own row beneath it */
@media (max-width:1259px){
  .mshow-frame{display:grid;grid-template-columns:1fr auto auto;gap:18px 10px;align-items:center}
  .mstage{grid-column:1 / -1}
  .mnav{position:static;transform:none;width:46px;height:46px}
  .mnav.prev{grid-column:2}
  .mnav.next{grid-column:3}
  .mnav.prev:hover,.mnav.next:hover{margin-left:0}
}

.mshow-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:24px}
.mdots{display:flex;gap:9px}
.mdot{width:30px;height:26px;padding:0;border:0;background:none;display:flex;
  align-items:center;justify-content:center}
.mdot i{display:block;width:100%;height:3px;border-radius:3px;background:var(--hair-2);
  transition:background .25s ease}
.mdot:hover i{background:var(--text-dim)}
.mdot.is-on i{background:var(--blue-deep)}
.mcount{font-size:var(--fs-sm);color:var(--text-dim);font-variant-numeric:tabular-nums}
.mcount b{color:#fff;font-weight:600}

/* ============================================================
   PRODUCT CARDS — the commerce unit
   ============================================================ */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* three across wherever a sidebar is eating the width */
.pgrid--3{grid-template-columns:repeat(3,1fr)}
/* breakpoints set so a card is never too narrow for the trade pill (label + Apply on one line) */
@media (max-width:1199px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1240px){.pgrid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:899px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){.pgrid{grid-template-columns:1fr}}

.pcard{position:relative;background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,opacity .22s ease}
.pcard:hover{border-color:var(--blue-deep);transform:translateY(-5px);
  box-shadow:0 26px 48px -32px rgba(0,0,0,.9)}
.pcard .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--well)}
.light .pcard .im{border-bottom:1px solid rgba(5,29,65,.1)}
.pcard .im img{width:100%;height:100%;object-fit:contain;padding:10% 12%;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.pcard:hover .im img{transform:scale(1.06)}
.pcard .bd{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard h3{font-size:var(--fs-md);font-weight:600;line-height:1.32;letter-spacing:-.018em}
.pcard h3 a:hover{color:var(--sky)}
.pcard .meta{font-size:var(--fs-sm);color:var(--text-dim);margin:0}

/* badges */
.pflags{position:absolute;top:13px;left:13px;z-index:2;display:flex;flex-direction:column;
  gap:6px;align-items:flex-start}
.flag{font-size:var(--fs-xs);font-weight:600;color:var(--on-blue);background:var(--blue);
  border-radius:var(--pill);padding:4px 12px;line-height:1.45}
/* --sky deepens inside a light band, which left this badge dark on dark.
   --blue holds its pale value everywhere, so the type stays readable. */
.flag--sky{background:var(--blue-hot);color:var(--on-blue)}
.flag--wire{background:rgba(3,14,32,.82);border:1px solid rgba(255,255,255,.3);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.flag--gold{background:var(--gold);color:#3d2600}

/* wishlist */
.wish{position:absolute;top:13px;right:13px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(3,14,32,.6);color:var(--text-dim);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;transition:.2s ease}
.wish:hover{color:#fff;border-color:var(--pink);background:rgba(211,0,126,.32)}
.wish[aria-pressed="true"]{color:var(--pink-hot);border-color:var(--pink)}
.light .wish{background:rgba(5,29,65,.05);border-color:rgba(5,29,65,.14);color:var(--text-dim)}
.light .wish:hover{background:rgba(15,109,156,.12);border-color:var(--blue-deep);color:var(--blue-deep)}
.wish[aria-pressed="true"] svg{fill:var(--pink)}

/* rating */
.rate{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--text-dim)}
.stars{display:inline-flex;gap:2px;color:var(--gold)}
.stars svg{width:13px;height:13px}
.stars .off{color:var(--hair-2)}

/* price block */
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.price .now{font-size:var(--fs-lg);font-weight:700;color:var(--head);letter-spacing:-.028em;
  font-variant-numeric:tabular-nums}
.price .was{font-size:var(--fs-sm);color:var(--text-dim);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.price .vat{font-size:var(--fs-xs);color:var(--text-dim);width:100%;margin-top:-1px}

.pfoot{margin-top:14px}
.stock{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text-dim)}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.stock--order::before{background:var(--gold)}
.stock--low::before{background:var(--pink-hot)}

/* ============================================================
   OFFERS
   ============================================================ */
.offers{background:var(--ink);border-block:1px solid var(--hair)}
.offers-head{margin-bottom:34px}
.offers-head .lead{max-width:66ch}

/* ============================================================
   SUPPORT BLEED
   ============================================================ */
.bleed{position:relative;display:flex;align-items:center;overflow:hidden;
  padding-block:clamp(76px,10vw,136px);background:var(--ink)}
.bleed img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0;background:rgba(3,14,32,.8)}
.bleed .wrap{position:relative;z-index:2;width:100%}
.bleed-inner{max-width:60ch}
.bleed-inner .lead{margin-top:22px;margin-bottom:0}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:36px 0 34px}
.metric{background:rgba(3,14,32,.5);border:1px solid var(--hair);border-radius:var(--r);
  padding:22px 22px 20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.metric b{display:block;font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:700;color:var(--sky);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.metric span{font-size:var(--fs-sm);color:var(--text-dim);display:block;margin-top:9px;line-height:1.4}
@media (max-width:680px){.metrics{grid-template-columns:1fr 1fr}}
@media (max-width:360px){.metrics{grid-template-columns:1fr}}

/* ============================================================
   APPLICATIONS
   ============================================================ */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.appcell{background:var(--panel);position:relative;min-height:360px;overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--r-lg);display:flex;align-items:flex-end;
  transition:border-color .25s ease,transform .25s ease}
.appcell:hover{border-color:var(--hair-2);transform:translateY(-4px)}
.appcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  transition:opacity .4s ease,transform .7s ease}
.appcell:hover img{opacity:.72;transform:scale(1.05)}
.appcell::after{content:"";position:absolute;inset:0;background:rgba(3,14,32,.6)}
.appcell > div{position:relative;z-index:2;padding:28px}
.appcell h3{font-size:var(--fs-lg);margin-bottom:8px}
.appcell p{font-size:var(--fs-base);color:var(--text);margin:0;max-width:40ch}
.appcell .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:var(--fs-sm);font-weight:600;color:var(--sky)}
.appcell:hover .go .arrow{transform:translateX(4px)}
@media (max-width:560px){.apps{grid-template-columns:1fr}}

/* ============================================================
   PLOTTER HEALTH CHECK — the one light band
   ============================================================ */
.health{background:var(--sky);color:var(--ink);position:relative;overflow:hidden}
.health::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../img/health-texture.gif) 88% -30px/240px repeat;opacity:.07}
.health .wrap{position:relative;z-index:1;padding-block:clamp(56px,7vw,104px)}
.health-top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,64px);
  align-items:end;margin-bottom:clamp(32px,4vw,52px)}
@media (max-width:860px){.health-top{grid-template-columns:1fr;align-items:start}}
.health .tag{color:var(--ink-mute)}
.health .tag::before{background:var(--pink)}
.health h2{color:var(--ink)}
.health .free{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font-size:var(--fs-sm);font-weight:600;padding:7px 17px;border-radius:var(--pill);margin-bottom:20px}
.health .lead{color:var(--ink-soft);max-width:52ch}
.health-top .lead,.health-top h2{margin-bottom:0}
.health-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.health-item{background:rgba(255,255,255,.4);border:1px solid rgba(5,29,65,.1);
  border-radius:var(--r);padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px;
  transition:background .25s ease,transform .25s ease}
.health-item:hover{background:rgba(255,255,255,.72);transform:translateY(-4px)}
.health-item .n{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.health-item h3{color:var(--ink);font-size:var(--fs-md);line-height:1.24}
.health-item p{font-size:var(--fs-base);color:var(--ink-soft);margin:0}
@media (max-width:1040px){.health-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.health-grid{grid-template-columns:1fr}}
.health-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,40px)}
.health-foot .note{font-size:var(--fs-base);color:var(--ink-soft)}

/* ============================================================
   BRAND SHOP
   ============================================================ */
.brandshop{display:grid;grid-template-columns:.85fr 2.15fr;gap:16px;align-items:stretch}
@media (max-width:900px){.brandshop{grid-template-columns:1fr}}
.brandshop-say{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.brandshop-say h2{font-size:clamp(1.55rem,2.5vw,2.1rem)}
.brandshop-say p{font-size:var(--fs-base);color:var(--text-dim);margin:0}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:760px){.bgrid{grid-template-columns:repeat(2,1fr)}}
.btile{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:18px 14px;
  transition:border-color .25s ease,transform .25s ease,background .25s ease}
.btile:hover{border-color:var(--blue-deep);transform:translateY(-4px);background:var(--ink-up)}
.btile img{width:clamp(72px,7vw,96px);height:auto;opacity:.62;transition:opacity .25s ease}
.btile:hover img{opacity:1}
.btile b{color:var(--head);font-weight:600;font-size:var(--fs-md)}
.btile span{font-size:var(--fs-xs);color:var(--text-dim)}

/* ============================================================
   PARTNERS
   ============================================================ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
@media (max-width:880px){.two{grid-template-columns:1fr}}
.checks{list-style:none;margin:24px 0 30px;padding:0;display:flex;flex-direction:column;gap:13px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:var(--fs-base);color:var(--text)}
.frame{border:1px solid var(--hair);border-radius:var(--r-lg);padding:9px;background:var(--panel)}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--ink)}
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.route{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:30px 30px 28px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .25s ease,transform .25s ease}
.route:hover{border-color:var(--blue-deep);transform:translateY(-4px)}
.route .n{font-size:var(--fs-sm);font-weight:600;color:var(--text-dim)}
.route h3{font-size:var(--fs-xl)}
.route p{font-size:var(--fs-base);color:var(--text-dim);margin:0 0 20px;max-width:46ch}
/* the key action sits at the foot of both cards, so they end level */
.route .btn{margin-top:auto;align-self:flex-start}
@media (max-width:700px){.routes{grid-template-columns:1fr}}
.cform{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(26px,3.5vw,42px);margin-top:16px}
.cfield{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.cfield label{font-size:var(--fs-sm);font-weight:600;color:var(--text-dim)}
.cfield input,.cfield textarea{font:inherit;font-size:var(--fs-base);background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:13px 18px;color:var(--head);width:100%;
  transition:border-color .18s ease,background .18s ease}
.cfield input{border-radius:var(--pill)}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--placeholder)}
.cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--sky);
  background:var(--muted-up)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--hair);padding-block:clamp(48px,6vw,76px) 0;
  font-size:var(--fs-base);color:var(--text-dim)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
.foot h4{font-size:var(--fs-base);color:#fff;margin-bottom:16px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a:hover{color:#fff}
.foot img.flogo{height:72px;width:auto;margin-bottom:20px}
.social{display:flex;gap:9px;margin-top:20px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);
  background:var(--muted);display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);transition:.2s ease}
.social a:hover{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.foot-bar{margin-top:50px;border-top:1px solid var(--hair);padding-block:24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;
  font-size:var(--fs-sm)}
.foot-legal{flex:1 1 300px;min-width:0;line-height:1.7}
.pay{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.pay span{font-size:var(--fs-sm);color:var(--text-dim);white-space:nowrap}
.pay ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:7px}
.pay li{flex:none;display:flex}
.pay img{width:44px;height:29px;border-radius:5px;opacity:.85;transition:opacity .2s ease,transform .2s ease}
.pay li:hover img{opacity:1;transform:translateY(-2px)}
@media (max-width:560px){.pay{flex-wrap:wrap}.pay ul{flex-wrap:wrap}}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;
  display:flex;align-items:center;gap:12px;background:var(--ink);border:1px solid var(--hair);
  border-radius:var(--pill);box-shadow:0 20px 44px -26px rgba(0,0,0,.95);
  padding:14px 26px;font-size:var(--fs-base);font-weight:500;color:#fff;opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1);max-width:min(430px,90vw)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast svg{color:var(--blue-deep);flex:none}

/* ============================================================
   MOTION
   ============================================================ */
.will-rise{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.has-risen{opacity:1;transform:none}
.will-enter{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.has-entered{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .will-rise,.will-enter{opacity:1!important;transform:none!important}
  .pcard.is-out{opacity:1;transform:none}
}

/* ============================================================
   LIGHT BANDS
   The commerce sections — categories, offers, consumables, new
   arrivals and the enquiry form — run on white, so the page
   alternates rather than staying dark the whole way down.
   Everything inside is driven by the same tokens, so only the
   values change here, never the component rules.
   ============================================================ */
.light,.oncard{
  --ink:#ffffff;
  --ink-up:#ffffff;      /* hover keeps the card white, only the edge and icon move */
  --panel:#ffffff;
  --head:#051d41;
  --text:#21486f;
  --text-dim:#5d7b99;
  --sky:#0f6d9c;
  --hair:rgba(5,29,65,.12);
  --hair-2:rgba(5,29,65,.26);
  --muted:rgba(5,29,65,.045);
  --muted-up:rgba(5,29,65,.09);
  --well:#ffffff;        /* product shots sit on white, as the manufacturers show them */
}
.light{
  background:#f3f8fc;
  color:var(--text);
  border-block:1px solid rgba(5,29,65,.1);
}
.oncard{color:var(--text)}
.light + .light{border-top:0}

/* white cards need a touch more definition than a hairline on white */
.light .pcard,
.light .cat,
.light .btile,
.light .route,
.light .trust-item,
.light .cform,
.light .brandshop-say,
.light .frame,
.light .trio > div{box-shadow:0 2px 10px -6px rgba(5,29,65,.22)}
.light .pcard:hover,
.light .cat:hover,
.light .btile:hover,
.light .route:hover{box-shadow:0 22px 40px -26px rgba(5,29,65,.42)}

/* the brand-shop tiles keep white knockout marks, so they invert on a white band */
.light .btile img{filter:invert(1)}

/* the secondary button reads as a soft navy outline here */
.light .btn--muted,.oncard .btn--muted{color:var(--text-dim)}
.light .btn--muted:hover{color:var(--head)}

/* pale blue accents would disappear, so the marks go deeper */
.light .stock::before,.oncard .stock::before{background:var(--green)}
.light .stock--out::before,.oncard .stock--out::before{background:var(--red)}
.light .toast{color:#fff}

/* keep the white surfaces off the section ground so cards still read */
.light .pcard .bd,
.light .route,
.light .trio > div{background:var(--panel)}



/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumb{border-bottom:1px solid var(--hair);font-size:var(--fs-sm);color:var(--text-dim)}
.crumb .wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-block:12px}
.crumb a{font-weight:500}
.crumb a:hover{color:var(--blue-deep)}
.crumb span[aria-current]{color:var(--head);font-weight:600}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.cathead .wrap{padding-block:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px)}
.cathead h1{margin-bottom:0}
.cathead .lead{max-width:62ch}

.shop .wrap{padding-block:clamp(22px,2.6vw,32px) clamp(52px,7vw,96px)}
.shop-grid{display:grid;grid-template-columns:272px minmax(0,1fr);gap:clamp(22px,2.6vw,38px);
  align-items:start}
@media (max-width:980px){.shop-grid{grid-template-columns:1fr}}

/* ---- sidebar ---- */
.facets{position:sticky;top:var(--stick);display:flex;flex-direction:column;gap:12px}
@media (max-width:980px){.facets{position:static}}
.facets-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px}
.facets-top h2{font-size:var(--fs-lg)}
.facets-clear{font-size:var(--fs-sm);font-weight:500;color:var(--pink);border-bottom:1px solid transparent}
.facets-clear:hover{border-bottom-color:var(--pink)}

.facet{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  padding:6px 18px 14px;box-shadow:0 2px 10px -6px rgba(5,29,65,.22)}
.facet-h{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;padding:14px 0 10px;color:var(--head);font:inherit;
  font-size:var(--fs-base);font-weight:600;text-align:left}
.facet-h .chev{color:var(--text-dim);transition:transform .22s ease}
.facet.is-shut .facet-h .chev{transform:rotate(-90deg)}
.facet.is-shut .facet-b{display:none}
.facet-b{display:flex;flex-direction:column;gap:2px;padding-bottom:4px}

.fopt{display:flex;align-items:center;gap:10px;padding:7px 2px;cursor:pointer;
  font-size:var(--fs-base);border-radius:var(--r-xs);transition:color .16s ease}
.fopt:hover{color:var(--head)}
.fopt input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--pink);cursor:pointer}
.fopt span{flex:1;min-width:0}
.fopt em{font-style:normal;font-size:var(--fs-xs);color:var(--text-dim);font-variant-numeric:tabular-nums}
.fopt:has(input:checked){color:var(--head);font-weight:600}

.facet-note{margin:10px 0 2px;padding-top:12px;border-top:1px solid var(--hair);
  font-size:var(--fs-sm);color:var(--text-dim);display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
.facet-note a{color:var(--pink);font-weight:600;border-bottom:1px solid transparent}
.facet-note a:hover{border-bottom-color:var(--pink)}

.frange{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.frange label{flex:1;min-width:0}
.frange input{width:100%;background:var(--muted);border:1px solid var(--hair);
  border-radius:var(--pill);padding:10px 14px;font:inherit;font-size:var(--fs-sm);color:var(--head)}
.frange input:focus{outline:none;border-color:var(--sky);background:var(--muted-up)}

/* the one card in the sidebar that is selling something, so it inverts */
.facet--help{background:var(--navy);border-color:var(--navy);padding:22px 20px 20px;
  box-shadow:0 14px 28px -20px rgba(5,29,65,.6)}
.facet--help h3{font-size:var(--fs-md);color:#fff;margin-bottom:8px}
.facet--help p{font-size:var(--fs-sm);color:rgba(255,255,255,.74);margin:0 0 16px}

/* ---- results ---- */
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;min-height:44px;margin-bottom:14px}
.results-count{margin:0;font-size:var(--fs-base);color:var(--text-dim)}
.results-count b{color:var(--head);font-weight:700;font-variant-numeric:tabular-nums}
.results-sort{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-dim)}
.results-sort select{appearance:none;-webkit-appearance:none;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--pill);padding:10px 38px 10px 16px;
  font:inherit;font-size:var(--fs-sm);color:var(--head);font-weight:500;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.results-sort select:focus{outline:none;border-color:var(--sky)}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--pill);padding:7px 14px;
  font-size:var(--fs-sm);font-weight:500;color:var(--head);transition:.18s ease}
.chip:hover{border-color:var(--blue-deep);color:var(--blue-deep)}
.chip svg{opacity:.55}

.empty{text-align:center;padding:clamp(40px,7vw,88px) 0}
.empty h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:12px}
.empty p{color:var(--text-dim);max-width:46ch;margin:0 auto 24px}
.empty .actions{justify-content:center}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pdp .wrap{padding-block:clamp(28px,3.6vw,48px) clamp(34px,4.4vw,58px)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.4vw,52px);align-items:start}
@media (max-width:920px){.pdp-grid{grid-template-columns:1fr}}

.pshot{position:relative;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  aspect-ratio:4/3;overflow:hidden;box-shadow:0 2px 12px -6px rgba(5,29,65,.22)}
.pshot .gshot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:7%;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.pshot .gshot.is-on{opacity:1;visibility:visible}
/* the room photography fills the frame rather than floating in it */
.pshot .gshot[src*="/app-"],.pshot .gshot[src*="partners-"],.pshot .gshot[src*="support-"]{
  object-fit:cover;padding:0}

/* the assurances run the full width between the buy box and the tabs,
   with a matching hairline above and below */
/* the section's own .light rules draw the two hairlines; the row adds none,
   or the container-width border doubles up on the full-width one */
.assure{border-top:1px solid rgba(5,29,65,.1)}
.assure .wrap{padding-block:0}
.assure-row{list-style:none;margin:0;padding:16px 0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:12px clamp(26px,3.4vw,48px)}
.assure-row li{display:flex;align-items:center;gap:12px;
  font-size:var(--fs-base);font-weight:500;color:var(--text)}
.assure-row svg{flex:none;color:var(--blue-deep)}
@media (max-width:760px){
  .assure-row{gap:11px;padding:14px 0}
}

.pdp-buy .mk{display:block;margin-bottom:8px}
.pdp-buy h1{margin-bottom:10px}
.pdp-meta{margin:0 0 16px;font-size:var(--fs-base);color:var(--text-dim)}
.pdp-rate{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.pdp-blurb{font-size:var(--fs-md);line-height:1.6;color:var(--text);margin:0 0 22px;max-width:52ch}

.buybox{--buybox-pad:clamp(20px,2.4vw,28px);
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--buybox-pad);box-shadow:0 2px 12px -6px rgba(5,29,65,.22)}
.buybox .price{margin:0 0 18px;padding-top:0}
.buybox .price .now{font-size:2rem}

.buyrow{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.buyrow .btn{flex:1 1 200px}
.buyrow--gated .btn{flex:1 1 190px}

.qty{flex:none;display:flex;align-items:center;background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--pill);padding:4px}
.qty button{width:38px;height:38px;border-radius:50%;border:0;background:transparent;
  color:var(--text-dim);display:flex;align-items:center;justify-content:center;transition:.16s ease}
.qty button:hover{background:var(--muted-up);color:var(--head)}
.qty input{width:44px;border:0;background:transparent;text-align:center;font:inherit;
  font-size:var(--fs-base);font-weight:600;color:var(--head);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.qty input:focus{outline:none}

.buyalt{display:flex;gap:11px;flex-wrap:wrap;margin-top:12px}
.wish--wide{position:static;width:auto;height:auto;border-radius:var(--pill);
  padding:11px 20px;gap:9px;font-size:var(--fs-sm);font-weight:500}
.buynote{display:flex;align-items:flex-start;gap:8px;
  margin:var(--buybox-pad) calc(-1 * var(--buybox-pad)) calc(-1 * var(--buybox-pad));
  padding:15px 14px 15px var(--buybox-pad);
  border-top:1px solid var(--hair);background:var(--muted);
  border-radius:0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  font-size:var(--fs-xs);font-weight:500;color:var(--text)}
.buynote svg{flex:none;margin-top:1px;color:var(--blue-deep)}
.buynote a{color:var(--pink);font-weight:600;border-bottom:1px solid transparent}
.buynote a:hover{border-bottom-color:var(--pink)}

/* ---- the trade gate ---- */
.buybox--gated{border-color:rgba(211,0,126,.3);border-top:3px solid var(--pink)}
.price--gated{flex-direction:column;align-items:flex-start;gap:4px}
.price--gated .gate{font-size:var(--fs-md);font-weight:600;color:var(--head)}
.gatehead{display:flex;gap:15px;align-items:flex-start;margin-bottom:18px}
.gateic{flex:none;width:46px;height:46px;border-radius:var(--r-sm);
  background:rgba(15,109,156,.1);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center}
.gatehead b{display:block;color:var(--head);font-size:var(--fs-md);font-weight:700;margin-bottom:5px}
.gatehead p{margin:0;font-size:var(--fs-base);color:var(--text-dim)}
.gatelist{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.gatelist li{display:flex;align-items:flex-start;gap:11px;font-size:var(--fs-base)}
.gatelist svg{flex:none;margin-top:3px;color:var(--blue-deep)}

/* ---- detail ---- */
.pdp-detail{padding-block:clamp(20px,2.6vw,34px) 0}
.pdp-detail .wrap{padding-block:0 clamp(52px,7vw,96px)}
.pspec{margin:12px 0 0;display:grid;gap:0}
.pspec .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-sm)}
.pspec dt{color:var(--text-dim)}
.pspec dd{margin:0;text-align:right;color:var(--head);font-weight:600;
  font-variant-numeric:tabular-nums}

.callout{margin-top:28px;background:rgba(178,223,241,.26);
  border:1px solid rgba(178,223,241,.55);border-radius:var(--r);padding:22px 24px}
.callout h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-md);margin-bottom:10px}
.callout h3 svg{color:var(--blue-deep)}
.callout p{font-size:var(--fs-base);color:var(--text-dim);margin:0 0 14px}
.callout .ulink{font-size:var(--fs-base);color:var(--head)}

/* the account icon when a trade account is signed in */
.iconbtn.is-on{color:var(--sky)}
.util-signed{color:var(--sky);display:inline-flex;align-items:center;gap:7px}

/* ============================================================
   CATEGORY SEO + FAQ BLOCK
   ============================================================ */
.seo{background:var(--ink);border-top:1px solid var(--hair)}
.seo-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,4vw,64px);align-items:start}
@media (max-width:920px){.seo-grid{grid-template-columns:1fr}}
.seo-copy h2{margin-bottom:18px}
.seo-copy p{font-size:var(--fs-md);line-height:1.68;color:var(--text-dim);margin:0 0 16px;max-width:64ch}

.seo-faq h2{margin-bottom:18px}
.faqs{display:flex;flex-direction:column;gap:10px}
.faq{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s ease}
.faq[open]{border-color:var(--hair-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 20px;cursor:pointer;list-style:none;font-size:var(--fs-base);font-weight:600;
  color:var(--head);transition:color .18s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-deep)}
.faq summary .chev{flex:none;color:var(--text-dim);transition:transform .22s ease}
.faq[open] summary .chev{transform:rotate(180deg);color:var(--blue-deep)}
.faq p{margin:0;padding:0 20px 19px;font-size:var(--fs-base);line-height:1.6;color:var(--text-dim)}

/* ============================================================
   PRODUCT TABS
   ============================================================ */
.tablist{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;
  border-bottom:1px solid var(--hair);margin-bottom:clamp(26px,3vw,38px)}
.tab{position:relative;background:none;border:0;padding:15px 20px;
  font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--text-dim);
  border-radius:var(--r-sm) var(--r-sm) 0 0;transition:color .18s ease,background .18s ease}
.tab:hover{color:var(--head);background:var(--muted)}
.tab.is-on{color:var(--head)}
.tab::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:var(--blue-deep);transform:scaleX(0);
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.tab.is-on::after{transform:scaleX(1)}
.tab em{font-style:normal;margin-left:7px;font-size:var(--fs-xs);font-weight:600;
  background:var(--muted-up);color:var(--text-dim);border-radius:var(--pill);padding:2px 8px}
.tab.is-on em{background:var(--blue);color:var(--on-blue)}
@media (max-width:640px){.tab{padding:13px 14px;font-size:var(--fs-sm)}}

.tabpanel{animation:tab-in .35s cubic-bezier(.22,.61,.36,1)}
@keyframes tab-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabpanel{animation:none}}

/* ---- downloads ---- */
.dls{display:flex;flex-direction:column;gap:6px}
.dls--row{margin-top:22px}
.dl{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:8px 12px;transition:border-color .2s ease,transform .2s ease,background .2s ease}
.dl:hover{border-color:var(--blue-deep);transform:translateY(-2px);background:var(--ink-up)}
.dl-ic{flex:none;width:30px;height:30px;border-radius:var(--r-xs);background:var(--muted);
  color:var(--blue-deep);display:flex;align-items:center;justify-content:center}
.dl:hover .dl-ic{background:var(--blue);color:var(--on-blue)}
.dl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-t b{color:var(--head);font-weight:600;font-size:var(--fs-sm);line-height:1.25}
.dl-t small{color:var(--text-dim);font-size:var(--fs-xs)}
.dl-go{flex:none;color:var(--text-dim);transition:color .2s ease}
.dl:hover .dl-go{color:var(--blue-deep)}
.dls-note{margin:12px 0 0;font-size:var(--fs-xs);color:var(--text-dim);line-height:1.5}

/* ---- delivery & support panel ---- */
.infogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1040px){.infogrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.infogrid{grid-template-columns:1fr}}
.infogrid article{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  padding:24px 22px 26px;display:flex;flex-direction:column;gap:11px;
  transition:border-color .25s ease,transform .25s ease}
.infogrid article:hover{border-color:var(--hair-2);transform:translateY(-3px)}
.infogrid .ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--muted);
  color:var(--sky);display:flex;align-items:center;justify-content:center}
.infogrid h3{font-size:var(--fs-md)}
.infogrid p{margin:0;font-size:var(--fs-base);color:var(--text-dim);line-height:1.55}

/* ============================================================
   TRADE PORTAL
   ============================================================ */
.portal .wrap{padding-block:clamp(26px,3.4vw,42px) clamp(52px,7vw,96px)}

/* ---- signed-out gate ---- */
.signin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(30px,5vw,70px)}
@media (max-width:860px){.signin{grid-template-columns:1fr}}
.signin-card{background:var(--panel);border:1px solid var(--hair);border-top:3px solid var(--blue-deep);
  border-radius:var(--r-lg);padding:clamp(28px,3.4vw,42px);
  box-shadow:0 2px 14px -6px rgba(5,29,65,.24)}
.signin-card h1{margin:16px 0 12px}
.signin-card p{color:var(--text-dim);margin:0 0 24px}
.signin-note{display:flex;align-items:center;gap:8px;margin:20px 0 0!important;
  padding-top:18px;border-top:1px solid var(--hair);font-size:var(--fs-sm)}
.signin-note svg{color:var(--sky)}
.signin-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.signin-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.signin-list svg{grid-row:span 2;margin-top:4px;color:var(--blue-deep)}
.signin-list b{color:var(--head);font-weight:700;font-size:var(--fs-md)}
.signin-list span{font-size:var(--fs-base);color:var(--text-dim)}

/* ---- account bar ---- */
.pbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:20px 24px;margin-bottom:16px;box-shadow:0 2px 12px -6px rgba(5,29,65,.22)}
.pbar-id{display:flex;align-items:center;gap:16px;min-width:0}
.pbar-ic{flex:none;width:52px;height:52px;border-radius:var(--r-sm);
  background:rgba(15,109,156,.1);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center}
.pbar-id h1{font-size:clamp(1.2rem,2vw,1.6rem);margin-bottom:4px}
.pbar-id p{margin:0;font-size:var(--fs-sm);color:var(--text-dim)}
.pbar-me{display:flex;align-items:center;gap:12px;background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--pill);padding:8px 18px 8px 8px}
.pbar-me b{display:block;color:var(--head);font-weight:700;font-size:var(--fs-base);line-height:1.3}
.pbar-me small{display:block;font-size:var(--fs-xs);color:var(--text-dim)}

.pflash{display:flex;align-items:center;gap:10px;margin:0 0 16px;
  background:rgba(55,211,155,.12);border:1px solid rgba(55,211,155,.4);
  border-radius:var(--r-sm);padding:13px 18px;font-size:var(--fs-base);font-weight:500;color:var(--head)}
.pflash svg{color:var(--green);flex:none}

/* ---- layout ---- */
.portal-grid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.portal-grid{grid-template-columns:1fr}}

.pnav{display:flex;flex-direction:column;gap:4px;position:sticky;top:var(--stick)}
@media (max-width:980px){.pnav{position:static;flex-direction:row;flex-wrap:wrap}}
.pnav-i{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:var(--r-sm);
  font-size:var(--fs-base);font-weight:500;color:var(--text-dim);
  transition:background .18s ease,color .18s ease}
.pnav-i svg{flex:none;opacity:.8}
.pnav-i span{flex:1;min-width:0}
.pnav-i em{font-style:normal;font-size:var(--fs-xs);font-weight:600;background:var(--muted-up);
  border-radius:var(--pill);padding:2px 8px;color:var(--text-dim)}
.pnav-i:hover{background:var(--muted);color:var(--head)}
.pnav-i.is-on{background:var(--blue);color:var(--on-blue);font-weight:700}
.pnav-i.is-on svg{opacity:1}
.pnav-i.is-on em{background:rgba(5,29,65,.14);color:var(--on-blue)}

.pnav-am{margin-top:14px;background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:3px;
  box-shadow:0 2px 10px -6px rgba(5,29,65,.22)}
@media (max-width:980px){.pnav-am{flex:1 1 100%;margin-top:6px}}
.pnav-am-h{font-size:var(--fs-xs);color:var(--text-dim);margin-bottom:5px}
.pnav-am b{color:var(--head);font-weight:700;font-size:var(--fs-md)}
.pnav-am > span{font-size:var(--fs-sm);color:var(--text-dim)}
/* every contact line in the card reads the same: bold navy, blue icon */
.pnav-am a{display:inline-flex;align-items:center;gap:9px;margin-top:10px;
  font-size:var(--fs-base);font-weight:700;color:var(--head);transition:color .18s ease}
.pnav-am a:hover{color:var(--blue-deep)}
.pnav-am a svg{flex:none;color:var(--blue-deep)}

/* ---- blocks ---- */
.pmain{display:flex;flex-direction:column;gap:16px;min-width:0}
.pcard-block{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);box-shadow:0 2px 12px -6px rgba(5,29,65,.22)}
.pblock-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.pblock-h h2{font-size:var(--fs-lg)}
.pblock-note{font-size:var(--fs-sm);color:var(--text-dim)}

.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:820px){.pstats{grid-template-columns:repeat(2,1fr)}}
.pstat{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  padding:22px 22px 20px;box-shadow:0 2px 10px -6px rgba(5,29,65,.22)}
.pstat b{display:block;font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:700;color:var(--head);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.pstat span{display:block;margin-top:7px;font-size:var(--fs-sm);color:var(--text-dim)}

/* ---- tables ---- */
.ptable-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r)}
.ptable{width:100%;border-collapse:collapse;min-width:600px;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
.ptable thead th{text-align:left;padding:11px 13px;background:var(--muted);
  border-bottom:1px solid var(--hair);font-weight:600;font-size:var(--fs-xs);
  color:var(--text-dim);white-space:nowrap}
.ptable tbody tr{border-bottom:1px solid var(--hair);transition:background .16s ease}
.ptable tbody tr:last-child{border-bottom:0}
.ptable tbody tr:hover{background:var(--muted)}
/* dense by default — only the product column is allowed to wrap */
.ptable td{padding:11px 13px;vertical-align:middle;color:var(--text);white-space:nowrap}
.ptable td:has(.pline),.ptable td:has(.puser){white-space:normal}
.ptable td b{color:var(--head);font-weight:600}
.ptable td:first-child{font-weight:600}
.ptable td.dim{color:var(--text-dim)}
.ptable td.num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--head);font-weight:500}
.ptable td.right,.ptable .right{text-align:right}
.ptable tfoot td{padding:12px 13px;border-top:1px solid var(--hair-2);
  font-weight:600;color:var(--text-dim);background:var(--muted)}
.ptable tfoot td.total{color:var(--head);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.ptable .ulink{border-bottom-color:transparent;font-size:var(--fs-sm);color:var(--pink)}
.ptable .ulink:hover{border-bottom-color:var(--pink)}

.pline{display:flex;align-items:center;gap:11px;min-width:190px}
.pline .im{flex:none;width:40px;height:40px;border:1px solid var(--hair);border-radius:var(--r-xs);
  background:#fff;display:flex;align-items:center;justify-content:center;padding:4px}
.pline .im img{width:100%;height:100%;object-fit:contain}
.pline b{display:block;color:var(--head);font-weight:600}
.pline small{color:var(--text-dim);font-size:var(--fs-xs)}

.pstatus{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);
  padding:4px 11px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.pstatus::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pstatus.ok{background:rgba(18,169,122,.12);color:var(--green-deep)}
.pstatus.go{background:rgba(15,109,156,.12);color:var(--blue-deep)}
.pstatus.wait{background:rgba(211,0,126,.1);color:var(--pink)}

.pmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 22px}
@media (max-width:760px){.pmeta{grid-template-columns:repeat(2,1fr)}}
.pmeta dt{font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:4px}
.pmeta dd{margin:0;font-weight:600;color:var(--head);font-size:var(--fs-base)}
.pback{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-base);font-weight:500;
  color:var(--text-dim);margin-bottom:4px}
.pback:hover{color:var(--pink)}

/* ---- machines ---- */
.pmachines{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:760px){.pmachines{grid-template-columns:1fr}}
.pmachine{display:flex;flex-direction:column;background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px 14px;
  transition:border-color .22s ease,transform .22s ease}
.pmachine:hover{border-color:var(--hair-2);transform:translateY(-2px)}

.pmachine-top{display:flex;align-items:center;gap:14px;
  padding-bottom:13px;border-bottom:1px solid var(--hair)}
.pmachine .im{flex:none;width:64px;height:64px;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;padding:6px}
.pmachine .im img{width:100%;height:100%;object-fit:contain}
.pmachine-id{min-width:0}
.pmachine-id b{display:block;color:var(--head);font-weight:700;font-size:var(--fs-md);
  letter-spacing:-.015em;line-height:1.25;margin-bottom:3px}
.pmachine-id b a:hover{color:var(--pink)}
.pmachine-id span{font-size:var(--fs-sm);color:var(--text-dim)}

.pmachine-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:13px 0 0}
.pmachine-kv dt{font-size:var(--fs-xs);color:var(--text-dim);margin-bottom:3px}
.pmachine-kv dd{margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--head);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pmachine-next{display:flex;align-items:center;gap:8px;margin:13px 0 0;padding-top:12px;
  border-top:1px solid var(--hair);font-size:var(--fs-sm);color:var(--text-dim)}
.pmachine-next svg{flex:none;color:var(--sky)}

/* ---- assigned lines ---- */
.passigned{display:flex;flex-direction:column;gap:11px}
.passign{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--muted);border:1px solid var(--hair);border-left:3px solid var(--blue-deep);
  border-radius:var(--r);padding:14px 18px}
.passign .im{flex:none;width:62px;height:62px;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;padding:6px}
.passign .im img{width:100%;height:100%;object-fit:contain}
.passign .bd{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.passign .bd b{font-size:var(--fs-md);font-weight:700;color:var(--head)}
.passign .bd b a:hover{color:var(--pink)}
.passign-why{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-dim)}
.passign-why svg{color:var(--green)}
.passign .ft{display:flex;align-items:center;gap:14px;margin-left:auto}
.passign .now{font-size:var(--fs-md);font-weight:700;color:var(--head);font-variant-numeric:tabular-nums}

/* ---- team ---- */
.puser{display:flex;align-items:center;gap:12px;min-width:250px}
.pav{flex:none;width:38px;height:38px;border-radius:50%;background:var(--blue);color:var(--on-blue);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-base)}
.puser-t{min-width:0}
.puser b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  color:var(--head);font-weight:600;font-size:var(--fs-base);line-height:1.3}
.puser b i{font-style:normal;font-size:var(--fs-xs);font-weight:600;background:var(--muted-up);
  color:var(--text-dim);border-radius:var(--pill);padding:2px 8px}
.puser b i.wait{background:rgba(211,0,126,.1);color:var(--pink)}
.puser small{display:block;font-size:var(--fs-xs);color:var(--text-dim);margin-top:2px}
/* the name column carries two lines, so it gets the room */
.ptable .w-name{width:36%;min-width:270px}
.prole{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-dim)}
.prole.is-admin{color:var(--pink);font-weight:600}
.prole-form select{appearance:none;-webkit-appearance:none;background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--pill);padding:7px 30px 7px 13px;
  font:inherit;font-size:var(--fs-sm);color:var(--head);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 51%,calc(100% - 10px) 51%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.prole-form select:focus{outline:none;border-color:var(--sky)}
.plink-danger{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-sm);font-weight:500;
  color:var(--text-dim);border-bottom:1px solid transparent}
.plink-danger:hover{color:var(--pink);border-bottom-color:var(--pink)}

.padd{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 16px;align-items:end}
.padd--assign{grid-template-columns:1.2fr 1.4fr auto}
.padd--3{grid-template-columns:1.3fr 1.6fr 1fr auto}
@media (max-width:900px){.padd,.padd--assign{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.padd,.padd--assign{grid-template-columns:1fr}}
.padd .cfield{margin-bottom:0}
.padd .btn{align-self:end}
.padd select{font:inherit;font-size:var(--fs-base);background:var(--muted);border:1px solid var(--hair);
  border-radius:var(--pill);padding:13px 18px;color:var(--head);width:100%;cursor:pointer}
.padd select:focus{outline:none;border-color:var(--sky)}

.pnotice{display:flex;gap:15px;align-items:flex-start;background:var(--muted);
  border:1px solid var(--hair);border-left:3px solid var(--blue-deep);border-radius:var(--r);
  padding:18px 20px}
.pnotice svg{flex:none;margin-top:3px;color:var(--blue-deep)}
.pnotice b{display:block;color:var(--head);font-weight:700;margin-bottom:4px}
.pnotice p{margin:0;font-size:var(--fs-base);color:var(--text-dim)}
.pnotice a{color:var(--pink);font-weight:600}
.pnotice--internal{border-left-color:var(--sky);background:rgba(15,109,156,.07)}
.pnotice--internal svg{color:var(--sky)}

/* downloads sit two-up beneath the specification table */
.dls--pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media (max-width:640px){.dls--pair{grid-template-columns:1fr}}

/* ============================================================
   PRICING — a figure or POA, and the account price alongside
   ============================================================ */
.price--poa .now{font-size:var(--fs-lg);letter-spacing:0}
.price--poa .vat{margin-top:2px}

/* the preferential price, promoted wherever a list price is shown */
.tradepromo{display:inline-flex;align-items:center;gap:8px;width:100%;margin-top:9px;
  background:var(--muted);border:1px solid var(--hair);border-radius:var(--pill);
  padding:7px 8px 7px 14px;font-size:var(--fs-xs);font-weight:500;color:var(--text-dim);
  white-space:nowrap;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.tradepromo svg{flex:none;color:var(--blue-deep)}
.tradepromo:hover{border-color:var(--blue-deep);background:rgba(15,109,156,.07);color:var(--head)}
.tradepromo-go{margin-left:auto;background:var(--blue);color:var(--on-blue);border-radius:var(--pill);
  padding:3px 12px;font-size:var(--fs-xs);font-weight:600}

/* in product cards the pill can be as narrow as ~214px (4-up full-width grid):
   compact sizing keeps the label and the Apply chip on one line */
.pcard .tradepromo{font-size:.72rem;gap:6px;padding:7px 6px 7px 13px}
.pcard .tradepromo svg{display:none}   /* no shield in cards — the label carries it */
.pcard .tradepromo-go{padding:3px 9px;font-size:.72rem}

/* the quote box that replaces a buy box on a POA line */
.buybox--poa{border-color:rgba(15,109,156,.28)}
.buybox--poa .price{margin-bottom:18px}
.buybox--poa .price .now{font-size:1.9rem}

/* on the product page the promo gets room to breathe */
.buybox .tradepromo{padding:11px 10px 11px 16px;font-size:var(--fs-sm)}

/* the savings badge keeps the magenta — the one place it should shout */
.flag--pink{background:var(--pink);color:#fff}

/* ============================================================
   GROUP STRIP — the sibling companies, on a light band so their
   own logos can run in full colour
   ============================================================ */
/* a solid tint rather than a translucent one — at 30% the pale blue
   desaturated against the page behind it and came out grey */
.group{border-top:1px solid rgba(5,29,65,.1);background:#e3f1fa}
.group .wrap{padding-block:clamp(30px,3.6vw,46px);display:flex;flex-direction:column;
  align-items:center;gap:clamp(16px,2vw,22px);text-align:center}
.group-label{margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--text-dim)}

.group-list{list-style:none;margin:0;padding:0;width:100%;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gco{display:flex;flex-direction:column;align-items:center;gap:14px;
  background:#fff;border:1px solid rgba(5,29,65,.08);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,30px);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.gco:hover{border-color:var(--blue-deep);transform:translateY(-3px);
  box-shadow:0 16px 30px -22px rgba(5,29,65,.45)}
/* the three lockups have very different proportions — a wide wordmark, a
   stacked mark and a square one — so each gets the height that makes it
   read at the same visual weight as the others */
.gco-logo{height:84px;display:flex;align-items:center;justify-content:center}
/* a definite height, so a logo whose file carries no intrinsic size still
   derives its width from the viewBox rather than collapsing to nothing */
.gco-logo img{width:auto;max-width:160px;object-fit:contain}
.gco-logo img[src*="cadspec"]{height:52px}
.gco-logo img[src*="tri-tech"]{height:78px}
.gco-logo img[src*="3d-print"]{height:64px}
/* the copy takes the slack so every card's actions sit on the same line */
.gco p{margin:0;flex:1;font-size:var(--fs-sm);color:var(--text);max-width:36ch}
.gco-go{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:2px}
.gco-site{font-size:var(--fs-sm);font-weight:600;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .2s ease}
.gco-site:hover{color:var(--blue-deep)}

.group-site{font-size:var(--fs-sm);font-weight:600;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color .2s ease}
.group-site:hover{color:var(--blue-deep)}
@media (max-width:880px){.group-list{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ============================================================
   ABOUT + HERITAGE
   ============================================================ */
.aboutstats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.aboutstats{grid-template-columns:1fr}}

.heritage{background:var(--ink)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
.tl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(18px,3vw,40px);
  background:var(--panel);padding:24px clamp(22px,3vw,34px);
  transition:background .22s ease}
.tl:hover{background:var(--ink-up)}
@media (max-width:640px){.tl{grid-template-columns:1fr;gap:8px}}
.tl-year{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:700;color:var(--blue);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.tl-bd h3{font-size:var(--fs-md);margin-bottom:7px}
.tl-bd p{margin:0;font-size:var(--fs-base);color:var(--text-dim);line-height:1.6;max-width:68ch}
.checks svg{flex:none;margin-top:4px;color:var(--blue-deep)}
.light .checks svg{flex:none;margin-top:4px;color:var(--blue-deep)}

/* supplies desk sits under the account manager */
.pnav-supplies{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:3px}


.pstats--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.pstats--3{grid-template-columns:1fr}}
.pstats--3 .pstat b{font-size:clamp(1.2rem,2vw,1.6rem)}

.plink-dl{display:inline-flex;align-items:center;gap:7px;background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--pill);padding:6px 13px;
  font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--text-dim);transition:.18s ease}
.plink-dl:hover{border-color:var(--blue-deep);color:var(--blue-deep)}

/* c1 — a manual stock flag, no counts */
.stock--out::before{background:var(--red)}
.stock--out{color:var(--text-dim)}

/* c2 — SKU sits with the brand on a card, and under the title on a PDP */
.mk{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:var(--fs-sm);font-weight:600;color:var(--head)}
.mk .sku{font-style:normal;font-size:var(--fs-xs);font-weight:500;color:var(--text-dim);
  letter-spacing:.01em}
.pdp-sku{margin:-10px 0 16px;font-size:var(--fs-sm);color:var(--text-dim)}
.pdp-sku b{color:var(--head);font-weight:600}

/* ============================================================
   LONG-FORM PRODUCT CONTENT
   A product that carries an `article` renders a proper editorial
   column with the specification pinned alongside it, so a page
   that has to rank can hold a thousand words without the buy
   box or the specs being pushed out of sight.
   ============================================================ */
.two--article{grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px)}
@media (max-width:980px){.two--article{grid-template-columns:1fr}}

.pdp-aside{position:sticky;top:var(--stick)}
@media (max-width:980px){.pdp-aside{position:static}}

.pdp-standfirst{font-size:clamp(1.1rem,1.5vw,1.26rem);line-height:1.55;font-weight:500;
  color:var(--head);margin:0 0 24px;max-width:60ch}

.pdp-toc{background:var(--muted);border:1px solid var(--hair);border-radius:var(--r);
  padding:18px 22px 20px;margin-bottom:34px}
.pdp-toc > span{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-dim);
  margin-bottom:10px}
.pdp-toc ol{margin:0;padding-left:1.15em;display:grid;gap:7px;
  grid-template-columns:1fr 1fr}
@media (max-width:620px){.pdp-toc ol{grid-template-columns:1fr}}
.pdp-toc a{font-size:var(--fs-base);font-weight:500;color:var(--text);
  border-bottom:1px solid transparent}
.pdp-toc a:hover{color:var(--blue-deep);border-bottom-color:var(--blue-deep)}

.pdp-sec{margin-bottom:34px;scroll-margin-top:var(--stick)}
.pdp-sec h3{font-size:clamp(1.18rem,1.9vw,1.45rem);margin-bottom:12px}
.pdp-sec p{font-size:var(--fs-md);line-height:1.68;color:var(--text-dim);margin:0 0 15px;max-width:68ch}
.pdp-ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pdp-ul li{display:flex;align-items:flex-start;gap:11px;font-size:var(--fs-base);color:var(--text)}
.pdp-ul svg{flex:none;margin-top:4px;color:var(--blue-deep)}
.pdp-sec .faqs{margin-top:4px}

/* d8 — the utility bar now leads with the email address */
.util-mail{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--text);
  transition:color .18s ease}
.util-mail:hover{color:#fff}
.util-mail svg{color:var(--sky)}

/* d9 — a block heading can carry a link and a button together */
.pblock-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* quick facts under the product shot */
.pills{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:nowrap;gap:7px}
.pills li{display:inline-flex;align-items:center;background:var(--muted);
  border:1px solid var(--hair);border-radius:var(--pill);padding:6px 13px;
  font-size:var(--fs-xs);font-weight:500;color:var(--text);white-space:nowrap}
@media (max-width:920px){.pills{flex-wrap:wrap}}

/* ============================================================
   PRODUCT GALLERY
   ============================================================ */
/* a compact rail of image-filled thumbnails, no captions; the arrows only
   appear when there are more shots than fit across */
.gnav{display:flex;align-items:center;gap:10px;margin-top:12px}
.gthumbs{list-style:none;margin:0;padding:2px;flex:1;min-width:0;
  display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.gthumbs::-webkit-scrollbar{display:none}
.gthumbs li{flex:0 0 auto;display:flex}

.gthumb{width:74px;height:74px;padding:0;overflow:hidden;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-sm);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.gthumb:hover{border-color:var(--blue-deep);transform:translateY(-2px)}
.gthumb.is-on{border-color:var(--blue-deep);box-shadow:0 0 0 2px var(--blue-deep) inset}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
/* a press shot on transparent needs breathing room; photography fills it */
.gthumb img[src$=".png"],.gthumb img[src$=".svg"]{object-fit:contain;padding:6px}

.garrow{flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--hair);background:var(--muted);color:var(--head);
  display:flex;align-items:center;justify-content:center;transition:.18s ease}
.garrow:hover{background:var(--muted-up);border-color:var(--blue-deep)}
.garrow[disabled]{opacity:.3;cursor:default}
.garrow[disabled]:hover{background:var(--muted);border-color:var(--hair)}

/* the video invitation sits over the bottom-right of the frame */
.watchvid{position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue);color:var(--on-blue);border:0;border-radius:var(--pill);
  padding:10px 18px;font-size:var(--fs-sm);font-weight:700;
  box-shadow:0 8px 18px -12px rgba(5,29,65,.5);
  transition:background .2s ease,transform .2s ease}
.watchvid:hover{background:var(--blue-hot);transform:translateY(-2px)}

/* the magnifier sits over the top-right, saying the shot opens larger */
.gzoom{position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(5,29,65,.14);background:rgba(255,255,255,.94);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -12px rgba(5,29,65,.5);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.gzoom:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.pshot .gshot.is-on{cursor:zoom-in}

/* ---- image lightbox ---- */
.ibox{position:fixed;inset:0;z-index:150;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(3,14,32,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:fade-in .25s ease}
/* nothing but the shot, as big as the viewport allows */
.ibox-in{position:relative;display:flex;width:min(1240px,100%);background:#fff;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}
/* sized from the card rather than the file, so a viewBox-only SVG shows up
   the same as a photograph */
.ibox img{display:block;width:100%;height:auto;max-height:86vh;
  object-fit:contain;background:#fff}
/* the arrows sit out on the scrim, clear of the shot itself */
.ibox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(3,14,32,.6);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.18s ease}
.ibox-nav:hover{background:#fff;color:var(--navy);border-color:#fff}
.ibox-nav.prev{left:clamp(8px,2.2vw,30px)}
.ibox-nav.next{right:clamp(8px,2.2vw,30px)}
.ibox .ibox-close{top:clamp(8px,2.2vw,30px);right:clamp(8px,2.2vw,30px)}
@media (max-width:620px){.ibox-nav{width:40px;height:40px}}

/* ---- video lightbox ---- */
.vbox{position:fixed;inset:0;z-index:150;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(3,14,32,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:fade-in .25s ease}
.vbox-in{position:relative;width:min(960px,100%);background:#000;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}
.vbox video{display:block;width:100%;height:auto;max-height:76vh;background:#000}
/* A YouTube or Vimeo embed has no intrinsic size, so give it the frame. */
.vbox iframe{display:block;width:100%;aspect-ratio:16/9;max-height:76vh;border:0;background:#000}
.vbox-close,.ibox-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(3,14,32,.6);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:.18s ease}
.vbox-close:hover,.ibox-close:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ============================================================
   WORDPRESS & WOOCOMMERCE
   Everything below covers markup the static prototype never had:
   the real basket, checkout and account area, the WordPress
   furniture (pagination, 404, Contact Form 7) and the handful of
   home-page blocks that gained fields in the CMS.

   Same house rules as the rest of the sheet: no uppercase, no
   letter-spacing, soft corners from the radius scale, flat
   colour, bold titles and regular body copy.
   ============================================================ */

/* ---------- home: category tiles ----------
   The design reserves two lines for every card title so the grid stays even,
   but centres the text in that space, which leaves the one-line names sitting
   between the two rows. Top-aligning them and holding the measure to a little
   over half the card puts every title on two lines and lines the counts up
   across the row. */
.catgrid .cat b{align-items:flex-start;max-width:16ch;margin-inline:auto}

/* ---------- FAQ hover ----------
   The design hovers the question to --blue-deep, which is a mid blue on a navy
   card and reads as the text fading out rather than lifting. The hover colour
   has to follow the band it is on: the pale blue lifts off navy and vanishes
   on white, and --blue-deep does the reverse. */
.faq summary:hover,
.faq summary:hover .chev{color:var(--blue)}
.light .faq summary:hover,
.light .faq summary:hover .chev{color:var(--blue-deep)}

/* ---------- home: statement figures ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(34px,4vw,52px);
  padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--hair)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;color:var(--blue);font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.05}
.stat span{display:block;margin-top:7px;font-size:var(--fs-sm);color:var(--text-dim)}

/* ---------- home: support band ---------- */
.bleed .hero-img,
.bleed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed-card{position:relative;z-index:2;max-width:62ch}
.bleed-card .lead{margin-top:20px}
.ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;align-items:flex-start;gap:11px;color:var(--text);font-size:var(--fs-base)}
.ticks li svg{flex:0 0 auto;margin-top:3px;color:var(--blue)}
.bleed-card .actions{margin-top:30px}

/* ---------- home: trade band ---------- */
.tradeband .signin-list{margin:0}

/* ---------- contact blocks ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-copy .lead{margin-top:18px}

/* On the contact page the form card sits in one column of the grid, so the
   two-column split the design gives it on the full-width home band would
   leave the fields in half of a half. One column here, and the card lines its
   top up with the heading beside it. */
.contact-form .cform{margin-top:0}
.contact-form .cform .two{grid-template-columns:1fr;gap:0;align-items:start}
.contact-form .cform .two > div:first-child h3{margin-bottom:22px}
.contact-copy .cdetails{margin-top:26px}

.cdetails{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.cdetails li{display:flex;align-items:flex-start;gap:14px}
.cdetails .ic{flex:0 0 42px;width:42px;height:42px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--muted);color:var(--blue)}
.cdetails li > span:last-child{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);
  color:var(--text-dim);line-height:1.55}
.cdetails b{color:var(--head);font-size:var(--fs-base);font-weight:600}
.cdetails a{color:var(--text)}
.cdetails a:hover{color:var(--blue)}

.enquiry-about{margin:0 0 18px;padding:12px 15px;border-radius:var(--r-sm);
  background:var(--muted);font-size:var(--fs-sm);color:var(--text-dim)}
.enquiry-about strong{color:var(--head)}

/* The pale band flips the recessive surfaces. */
.light .cdetails .ic{background:rgba(5,29,65,.07);color:var(--blue-deep)}
.light .cdetails li > span:last-child{color:var(--ink-soft)}
.light .cdetails b{color:var(--navy)}
.light .cdetails a{color:var(--ink-soft)}
.light .cdetails a:hover{color:var(--blue-deep)}
.light .enquiry-about{background:rgba(5,29,65,.06);color:var(--ink-soft)}
.light .enquiry-about strong{color:var(--navy)}

/* ---------- Contact Form 7 ----------
   The design's .cform / .cfield styling already covers a plain form. These
   rules cover only what Contact Form 7 adds on top of it: a wrapping <span>
   around every control, a <fieldset> of hidden inputs, a spinner and the
   validation tips. */

/* CF7 wraps every control in a span, which breaks the field's own column
   layout unless the span is told to fill it. */
.wpcf7 .cfield .wpcf7-form-control-wrap{display:block}

/* The hidden-inputs fieldset renders as an empty bordered bar otherwise. */
.wpcf7 .hidden-fields-container{display:none}

/* CF7's summary of the result is a live region for screen readers. It must
   stay in the accessibility tree — display:none would stop it being
   announced — so it is hidden the same way .sr-only is. Owning this here
   means it is right whether or not CF7's own stylesheet is loaded. */
.screen-reader-response{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Selects were not in the design's own form; match the text inputs so any
   field added in CF7 later still looks right. */
.cfield select{font:inherit;font-size:var(--fs-base);background:var(--muted);
  color:var(--head);border:1px solid var(--hair);border-radius:var(--pill);
  padding:13px 16px;width:100%;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cfield select:focus{outline:none;border-color:var(--sky)}
.light .cfield select{background-color:#fff;color:var(--navy);border-color:rgba(5,29,65,.16)}

/* The submit control is an <input>, so it needs the flex button rules the
   design writes for <a> and <button>. */
.wpcf7 input[type=submit].btn{display:block;width:100%;border:0;cursor:pointer;
  font:inherit;font-weight:700}

.wpcf7-spinner{margin:10px auto 0;display:block}
.wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--pink-hot)}
.light .wpcf7-not-valid-tip{color:var(--red)}
.wpcf7 .wpcf7-not-valid input,
.wpcf7 .wpcf7-not-valid textarea,
.wpcf7 .wpcf7-not-valid select{border-color:var(--pink-hot)}

/* Every response message: one block, fitted to its content, primary brand
   fill, navy type (checked for contrast against Pantone 2975), and no margin
   except 20px above. */
.wpcf7 form .wpcf7-response-output{
  display:block;
  width:fit-content;
  max-width:100%;
  margin:20px 0 0;
  padding:.75rem 1rem;
  border:0;
  border-radius:var(--r-sm);
  background:var(--blue);
  color:var(--navy);
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:1.5;
  overflow-wrap:break-word;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output{display:none}

/* ---------- the filter panel on a narrow screen ----------
   Wide, the filters are the sidebar the design draws. Narrow, that sidebar
   would push the products most of a screen down, so the same form becomes a
   panel over the results, opened from a button in the results bar. The form is
   not duplicated: it is the one form, moved. */
.results-filter{display:none;gap:9px}
.results-filter em{font-style:normal;display:grid;place-items:center;
  min-width:20px;height:20px;padding:0 5px;border-radius:var(--pill);
  background:var(--blue);color:var(--navy);font-size:var(--fs-xs);font-weight:700}
.facets-x,
.facets-foot{display:none}
.filters-scrim{display:none}

@media (max-width:980px){
  .results-filter{display:inline-flex}

  /* The bar follows you down the list, so filtering and sorting stay a tap
     away instead of a scroll back to the top. It pins under the header, whose
     real height the script publishes as --sm-head because the stylesheet's
     --header-h only knows the desktop figure. The count goes: on a phone the
     two controls are worth more than the number, which the list shows anyway. */
  .results-bar{position:sticky;top:var(--sm-head,143px);z-index:40;
    margin-inline:calc(var(--gut) * -1);padding:11px var(--gut);
    margin-bottom:16px;background:#f3f8fc;
    border-bottom:1px solid rgba(5,29,65,.1);flex-wrap:nowrap}
  .results-count{display:none}
  .results-filter{order:-1}
  .results-sort{margin-left:auto;min-width:0}
  .results-sort label{flex:none}
  .results-sort select{min-width:0}

  .facets{position:fixed;z-index:80;top:0;bottom:0;left:0;
    width:min(390px,90vw);gap:0;background:#fff;overflow-y:auto;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .26s ease,visibility .26s ease;
    box-shadow:0 0 60px -14px rgba(5,29,65,.55)}
  .filters-open .facets{transform:none;visibility:visible}

  .facets-top{position:sticky;top:0;z-index:2;margin:0;padding:17px 20px;
    background:#fff;border-bottom:1px solid rgba(5,29,65,.1)}
  .facets-x{display:grid;place-items:center;flex:none;width:34px;height:34px;
    padding:0;border:0;border-radius:50%;background:rgba(5,29,65,.05);
    color:var(--ink-mute);cursor:pointer;transition:.16s ease}
  .facets-x:hover{background:rgba(5,29,65,.1);color:var(--navy)}

  .facets > .facet{margin:14px 20px 0}
  .facets > .facet:last-of-type{margin-bottom:18px}

  .facets-foot{display:block;position:sticky;bottom:0;z-index:2;
    padding:15px 20px;background:#fff;border-top:1px solid rgba(5,29,65,.1)}

  .filters-scrim{display:block;position:fixed;inset:0;z-index:79;
    background:rgba(3,14,32,.55);backdrop-filter:blur(2px)}
}

/* ---------- what a sticky column clears ----------
   --stick is built from --header-h, which is the one-row desktop header. The
   real header is two stacked rows on a phone and carries the category bar on a
   wide screen, so anything pinned to --stick slid underneath it and lost its
   first line. The script measures the header and publishes --sm-head; this is
   that plus the design's own breathing room, falling back to the stylesheet's
   figure for the moment before the script runs. */
:root{--sm-stick:calc(var(--sm-head, var(--header-h)) + 20px)}

.pdp-aside{top:var(--sm-stick)}
.pdp-sec{scroll-margin-top:var(--sm-stick)}
@media (min-width:981px){.facets{top:var(--sm-stick)}}

/* ---------- fixed overlays under the admin bar ----------
   The admin bar is a fixed strip at the top of the window, and a fixed overlay
   is positioned against the window, not the document, so it slides underneath
   it and loses its own heading. Only a signed-in editor ever sees the bar, but
   that is exactly who is reviewing these pages. */
.admin-bar .drawer{top:44px}
.admin-bar .filters-scrim{top:32px}
@media (max-width:980px){.admin-bar .facets{top:32px}}
@media (max-width:782px){
  .admin-bar .drawer{top:58px}
  .admin-bar .filters-scrim{top:46px}
  .admin-bar .facets{top:46px}
}

/* The trade bar and the buy button are a pair — one says there is a better
   price, the other is how you take it — so they sit closer together than the
   price block's usual gap. Only where the bar is actually there. */
.price:has(.tradepromo) + .pfoot{margin-top:9px}

/* The VAT note belongs beside the figure it qualifies, not under it. The
   design gives .vat width:100%, which is what pushed it onto a line of its
   own. A POA note is a sentence rather than a qualifier, so it keeps its line. */
.price:not(.price--poa) .vat{width:auto;margin-top:0}

/* The SKU now sits straight under the title rather than under the spec line,
   so the negative top margin that used to close that gap would pull it flush
   against the heading. Its bottom margin goes: brand, title and SKU are a
   block of their own now, and the gap below them is the block's to set — kept
   as it is, the two stacked and left twice the space the design draws above
   the stock line. */
.pdp-sku{margin-top:11px;margin-bottom:0}

/* ---------- no rule under the last row ----------
   A divider separates two rows, so the one after the last row is drawing a
   line under nothing. The design already does this for .ptable; these are the
   lists that were missed. */
.pspec .r:last-child{border-bottom:0}
.drawer-body .dline:last-child{border-bottom:0}
.woocommerce-orders-table tbody tr:last-child th,
.woocommerce-orders-table tbody tr:last-child td,
.woocommerce-table--order-details tbody tr:last-child th,
.woocommerce-table--order-details tbody tr:last-child td{border-bottom:0}

/* The showcase arrows drop onto a row of their own below the card, where the
   design pins them to the right behind a wide empty column. On a phone that
   reads as two buttons stranded in a corner, so the pair is centred under the
   card it steps through. */
/* display:contents takes the group out of layout entirely, so on a wide screen
   the two buttons still position themselves against .mshow-frame either side
   of the card, exactly as the design draws them. */
.mnav-group{display:contents}

@media (max-width:1259px){
  /* Below the design's own breakpoint the buttons drop onto a row under the
     card. As two separate grid cells they were placed independently, so the
     pair sat wherever the columns left them — and off-centre the moment one of
     them was hidden. One flex group keeps them side by side and centred as a
     pair whatever happens to either button. */
  .mnav-group{display:flex;align-items:center;justify-content:center;gap:10px;
    grid-column:1/-1}
  .mshow-frame{grid-template-columns:1fr}
}

/* The hero's rotating line is white-space:nowrap so the phrase stays on one
   line as it changes, and .d1 clamps at 2.6rem, so on a phone the longest
   phrase ("Powered by Technology.") is 458px wide in 335px of room and runs
   off the screen. Only that line scales down, since the fixed line above it
   wraps happily; min() means it never touches the size the design gives it
   on a wider screen. */
@media (max-width:780px){
  .hero .rot{font-size:min(1em,7.2vw)}
}

/* ---------- footer ----------
   The logo is given a fixed height with max-width:100%, so in a narrow column
   the width is capped while the height is not and the mark is squeezed. Both
   axes are left to the browser inside a box, which keeps the shape whatever
   the column does. The link columns go full width sooner, since two columns
   of four links each is cramped long before 520px. */
.foot img.flogo{width:auto;height:auto;max-width:100%;max-height:72px}
@media (max-width:780px){.foot-grid{grid-template-columns:1fr}}

/* Three assurances share a row on a wide screen. On a phone two of them
   crowd onto the first line and the third sits alone under them, so each
   takes a line of its own. */
@media (max-width:780px){
  .assure-row{display:grid;grid-template-columns:1fr;gap:12px}
  .assure-row li{width:100%}
}

/* A seven-column table does not fit a phone. The two counts are the least
   useful of them — both are on the account's own page — so they are the ones
   that go, leaving the account, its number, its discount and its spend. */
@media (max-width:780px){
  .ptable .col-detail{display:none}
}

/* The design stacks .padd and .padd--assign on a narrow screen but never
   added .padd--3, so the rule forms kept four columns on a phone. All of them
   stack, and the button takes the width rather than sitting half-way across. */
@media (max-width:780px){
  .padd,
  .padd--assign,
  .padd--3{grid-template-columns:1fr}
  .padd .btn{width:100%;justify-content:center}
}

/* The machine's name in the showcase leads to the machine. */
.mcard h3 a{color:inherit}
.mcard h3 a:hover{color:var(--blue-deep)}

/* ---------- the mobile menu ----------
   The design rules every row off, which on a short menu reads as a table. The
   rows lose their rules and only the actions keep one. */
.mmenu .mm-row{border-bottom:0}

/* The panel takes the window below the header, so the links scroll and the
   two actions stay put at the bottom where a thumb is.

   The header carries a backdrop-filter, which makes it the containing block
   for anything fixed inside it. So "bottom:0" would mean the bottom of the
   header, not of the window — it collapsed the panel to nothing. top:100% is
   the header's own lower edge, and the height is measured from the window. */
.mmenu{position:fixed;left:0;right:0;z-index:70;
  top:var(--sm-head,var(--header-h));bottom:0;max-height:none;
  display:flex;flex-direction:column;border-top:0;
  background:var(--void);animation:none}
/* .wrap carries margin:0 auto, which in a column flex container makes it
   shrink to its content and sit in the middle instead of filling the panel. */
.mmenu .wrap{flex:1 1 auto;width:100%;max-width:none;margin-inline:0;
  min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-block:8px 0}
body.menu-open{overflow:hidden}

/* The actions sit outside the scrolling list, so they hold the bottom of the
   panel however far the list runs. */
.mmenu .mm-act{flex:none;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));
  background:var(--void);border-top:1px solid var(--hair)}
.mmenu .mm-act .btn{width:100%;justify-content:center}

/* A group's heading is a label, not a destination. It is told apart by being
   smaller, dimmer and not reacting to a tap — the links keep the panel's own
   left edge rather than being stepped in from it. */
.mm-sub--cats{gap:0;padding-bottom:14px}
.mm-sub--cats > a{display:block;padding:9px 0;color:var(--text)}
.mm-sub--cats > a:hover{color:#fff}
.mm-sub-head{display:block;margin:18px 0 2px;
  font-size:var(--fs-xs);font-weight:600;color:var(--text-dim);cursor:default}
.mm-sub-head:first-child{margin-top:6px}

/* ---------- the underlined arrow link ----------
   It is inline-flex, so on its own it hugs its text. Several of the cards it
   sits in are column flex containers, which stretch it to the full width and
   draw its rule right across the card. It keeps its own width instead. */
.ulink{align-self:start;justify-self:start}

/* ---------- stat figures ----------
   The unit belongs on the figure's line. Both bands style their caption with
   a bare `span` descendant selector, which also catches the unit inside the
   <b> and turns it into a block of its own, dropping it onto a second line
   with the caption's top margin under it. It is put back inline here, and
   capitalised to match the rest of the site's labelling. */
.metric b .u,
.stat b .u{display:inline;margin:0;font-size:.6em;font-weight:600;
  letter-spacing:-.01em;line-height:inherit;text-transform:capitalize}

/* ---------- home: the support band's measure ----------
   The paragraph ran to four lines with its last word stranded alone on the
   fourth, so the measure widens enough to carry it up onto the third. */
.bleed-inner{max-width:68ch}
.bleed-inner .lead{max-width:66ch}

/* ---------- mobile: blocks that should fill the column ----------
   Three places where a grid built for a desktop row left something stranded
   at half width or inset from the container on a phone. */

/* The eyebrow is a flex row with its rule drawn beside the text, so centring
   the text around it does nothing — the row itself has to centre. */
.empty .tag{justify-content:center}

/* Backed by Experts: three figures in a two-column grid leave the third on a
   row of its own at half width. It takes the whole row instead. */
@media (max-width:680px){
  .metrics .metric:last-child:nth-child(odd){grid-column:1/-1}
}

/* The application cards carry a 360px-tall image each; two of those side by
   side on a phone are too narrow to read, so they stack sooner. */
@media (max-width:780px){.apps{grid-template-columns:1fr}}

/* The group companies cap their single column at 460px so one card does not
   stretch across a tablet. On a phone that cap is narrower than the container
   and the cards sit inset from everything above them. */
@media (max-width:620px){.group-list{max-width:none}}

/* ---------- 404 ----------
   With the category grid gone the page holds one short block, which left it
   sitting under a band of empty space at the top. It fills what is left of the
   window below the header instead, with the block centred in it. */
.error404 .sect{display:grid;place-items:center;
  min-height:calc(100svh - var(--sm-head, var(--header-h)));
  padding-block:clamp(40px,6vw,72px)}
.error404 .empty{padding:0}

/* Delivery & Support: four cards of prose two-up on a phone leaves each one
   a very narrow measure, so they take the width one at a time. */
@media (max-width:780px){.infogrid{grid-template-columns:1fr}}

/* ---------- contact page ----------
   The banner sat straight under the breadcrumb with nothing above its
   eyebrow; the column heading was set two steps larger than the form heading
   beside it, so the two sides of the same row disagreed; and the form heading
   was followed by the grid's own row gap as well as its margin.

   The contact band used to carry the same top padding as the banner. Now that
   a section following the banner opens with less of its own, that extra was
   the difference between a gap and a hole, so it has gone. */
.cathead .wrap{padding-top:clamp(26px,3.4vw,44px)}
.contact-copy h2.d2{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.18}
.contact-form .cform .two > div:first-child{margin-bottom:0}
.contact-form .cform .two > div:first-child h3{margin-bottom:18px}

/* 54: on a phone each assurance takes its own line, centred under the card
   rather than ranged left against nothing. */
@media (max-width:780px){
  .assure-row{justify-items:center}
  .assure-row li{width:auto;justify-content:center}
}

/* ---------- product page: the head block ----------
   Brand, title and SKU are their own block so a phone can show them before
   the photograph. On a wide screen the grid puts them back exactly where the
   design has them: the top of the buying column beside the image. */
.pdp-head{grid-column:2;grid-row:1}
.pdp-media{grid-column:1;grid-row:1 / span 2}
.pdp-buy{grid-column:2;grid-row:2}
/* The photograph spans both rows, so when the buying column is short — a
   sold-out line has no quantity or basket button — the grid handed the
   surplus height to the first row and dropped a 40px hole under the SKU.
   Row one is sized by its own content; whatever is left goes to row two. */
.pdp-grid{row-gap:0;grid-template-rows:min-content 1fr}
.pdp-head + .pdp-buy{margin-top:16px}

@media (max-width:920px){
  /* One column: the key facts, then the photograph, then the buying panel.
     The spec line repeats what the title and the panel already say, and on a
     phone that is a line of noise between the two. */
  .pdp-head,
  .pdp-media,
  .pdp-buy{grid-column:1}
  .pdp-head{grid-row:1}
  .pdp-media{grid-row:2}
  .pdp-buy{grid-row:3}
  .pdp-grid{row-gap:clamp(20px,3vw,30px)}
  .pdp-head + .pdp-buy{margin-top:0}
}

/* ---------- product page: highlights and stock ----------
   The design keeps the highlight pills on one line and only wraps them below
   920px, which assumes four short ones. Four real ones overrun the media
   column and slide under the buy card beside it, so they wrap at any width —
   the row is a list of claims, not a carousel.

   WooCommerce also prints its own availability line inside the add-to-cart
   form, which repeats the badge this template already shows above it and
   carries its own class names, so the dot stayed green on a sold-out line.
   The duplicate goes, and its classes are coloured properly for anywhere else
   WooCommerce prints one. */
.pills{flex-wrap:wrap}

.buybox > .stock{display:none}
.stock.out-of-stock::before,
.light .stock.out-of-stock::before,
.oncard .stock.out-of-stock::before{background:var(--red)}
.stock.available-on-backorder::before,
.light .stock.available-on-backorder::before,
.oncard .stock.available-on-backorder::before{background:var(--gold)}

/* ---------- product page: the trade-account band ----------
   The way in was a link buried at the end of a sentence, with the sentence's
   full stop stranded after it. It is a button on the end of the row instead,
   and the shield centres against the whole sentence rather than hanging off
   its first line. On a narrow card the button drops to its own full-width
   line so it is still a target rather than a scrap of the row. */
.buynote--apply{align-items:center;gap:12px;padding-right:var(--buybox-pad)}
.buynote--apply > svg{margin-top:0}
/* A zero basis, so when the row wraps the sentence is measured as shrinkable
   and stays on the shield's line instead of starting a new one below it. The
   measure is capped and the lines balanced, so the sentence breaks into two
   of roughly equal length rather than one long line and a stub. */
.buynote--apply > span{flex:1 1 0;min-width:0;max-width:38ch;text-wrap:balance}
/* The design colours every link in this band pink, which on a pink button is
   a label you cannot read — the button states its own colours instead. */
.buynote--apply .btn{flex:none;margin-left:auto;padding:9px 20px;
  font-size:var(--fs-xs);color:#fff;border-bottom:0}
.buynote--apply .btn:hover{color:#fff;border-bottom:0}

@media (max-width:520px){
  /* Only the button drops: the shield stays beside the sentence it belongs to
     rather than being orphaned on a line of its own. */
  .buynote--apply{flex-wrap:wrap}
  .buynote--apply .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- the save control ----------
   Two things were wrong with a saved heart. The design's light-band rule
   (.light .wish) is written after the pressed rule and has the same weight, so
   on a pale band a saved heart quietly lost its colour; and the heart symbol
   carried fill="none" of its own, which sits inside the <use> shadow tree where
   no stylesheet can reach it, so the fill never landed. The symbol no longer
   declares a fill, which means it inherits one from the <svg> the theme owns:
   an outline by default, solid once saved. */
svg:has(use[href="#i-heart"]){fill:none}

.light .wish[aria-pressed="true"],
.mcard .wish[aria-pressed="true"],
.wish[aria-pressed="true"]{color:var(--pink);border-color:var(--pink);
  background:rgba(211,0,126,.1)}
.light .wish[aria-pressed="true"]:hover,
.mcard .wish[aria-pressed="true"]:hover,
.wish[aria-pressed="true"]:hover{color:var(--pink-hot);border-color:var(--pink-hot);
  background:rgba(211,0,126,.18)}
.wish[aria-pressed="true"] svg{fill:currentColor}

/* ---------- basket drawer additions ---------- */

/* The text block takes the space between the thumbnail and the remove control,
   which is what pushes that control to the edge of the panel. */
.dline-t{flex:1 1 auto;min-width:0}

/* The stepper and the line total share a row, so the two read against each
   other rather than the price floating against the whole line. */
.dline-foot{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:11px}
/* The stepper and the figure sit on one centre line. The price is a column
   now that it carries the VAT note under it, so it centres its own two lines
   against the stepper rather than hanging off a baseline. */
.dline-foot .price{margin-left:0;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:center;line-height:1.25;text-align:right}
.dline-foot .price .vat{font-size:var(--fs-xs);font-weight:400;
  color:var(--text-dim);margin-top:2px}

.dqty{display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:1px solid rgba(5,29,65,.14);border-radius:var(--pill);background:#fff}
.dqty-b{display:grid;place-items:center;width:27px;height:27px;padding:0;border:0;
  border-radius:50%;background:transparent;color:var(--ink-mute);cursor:pointer;
  transition:background .16s ease,color .16s ease}
.dqty-b:hover{background:rgba(5,29,65,.06);color:var(--navy)}
.dqty-i{width:34px;padding:0;border:0;background:transparent;text-align:center;
  color:var(--navy);font:inherit;font-size:var(--fs-sm);font-weight:600;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.dqty-i:focus{outline:none;color:var(--blue-deep)}
/* A line sold one at a time has nothing to step, so it just states the number. */
.dqty--fixed{border:0;background:none;padding:0;font-size:var(--fs-xs);
  color:var(--text-dim)}

/* The remove control is taken out of the row so the line total can sit at the
   panel's own right edge rather than stopping short of the button. */
.dline{position:relative}
/* Only the name and brand have the remove control beside them; the row below
   runs the full width so the line total finishes at the panel's edge. */
.dline-t > b,
.dline-t > small{padding-right:38px}
.dline-x{position:absolute;top:16px;right:0;display:grid;place-items:center;
  width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--text-dim);cursor:pointer;
  opacity:.55;transition:background .16s ease,color .16s ease,opacity .16s ease}
.dline:hover .dline-x,
.dline-x:focus-visible{opacity:1}
.dline-x:hover{background:rgba(210,54,47,.1);color:var(--red);opacity:1}

/* While a basket request is in flight the panel stops taking clicks, so a
   second tap cannot be sent the quantity the first one is about to replace. */
.drawer.is-busy .drawer-body{opacity:.55;pointer-events:none}

.basket-source{display:none}

/* ---------- basket page ---------- */
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,44px);
  align-items:start}
@media (max-width:1180px){.cart-grid{grid-template-columns:1fr}}

.cartpage .ptable td.product-name{min-width:260px}
.cartpage .ptable .actions{padding-top:22px}
.cartpage .ptable .actions .btn{margin-left:10px}
.cartpage .coupon{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.cartpage .coupon label{font-size:var(--fs-sm);color:var(--text-dim)}
.cartpage .coupon input{width:170px;padding:10px 13px;border:1px solid var(--hair);
  border-radius:var(--r-xs);background:var(--muted);color:var(--head);font:inherit;
  font-size:var(--fs-sm)}
.light .cartpage .coupon label{color:var(--ink-mute)}
.light .cartpage .coupon input{border-color:rgba(5,29,65,.16);background:#fff;color:var(--navy)}

.cart_totals{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(20px,2vw,26px)}
.light .cart_totals{background:#fff;border-color:rgba(5,29,65,.1)}
.cart_totals h2{font-size:var(--fs-lg);margin-bottom:16px}
.cart_totals table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.cart_totals th,
.cart_totals td{padding:10px 0;text-align:left;vertical-align:top;font-weight:400}
.cart_totals th{color:var(--text-dim)}
.cart_totals td{text-align:right;color:var(--head);font-variant-numeric:tabular-nums}
.light .cart_totals th{color:var(--ink-mute)}
.light .cart_totals td{color:var(--navy)}
.cart_totals .order-total th,
.cart_totals .order-total td{border-top:1px solid var(--hair);padding-top:14px;font-weight:700}
.light .cart_totals .order-total th,
.light .cart_totals .order-total td{border-top-color:rgba(5,29,65,.12)}
.cart_totals .order-total td{font-size:var(--fs-lg)}
.cart_totals .wc-proceed-to-checkout{margin-top:18px}
.cart_totals .checkout-button{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:15px 22px;border:0;border-radius:var(--pill);background:var(--pink);
  color:#fff;font-weight:600;font-size:var(--fs-base);text-align:center}
.cart_totals .checkout-button:hover{background:var(--pink-hot)}
.cart_totals .shipping-calculator-button{color:var(--blue);font-size:var(--fs-sm)}
.light .cart_totals .shipping-calculator-button{color:var(--blue-deep)}
.cart_totals .woocommerce-shipping-methods{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cart_totals .woocommerce-shipping-methods label{font-size:var(--fs-sm);cursor:pointer}

.cart-assure{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.cart-assure li{display:flex;align-items:flex-start;gap:12px}
.cart-assure svg{flex:0 0 auto;margin-top:3px;color:var(--blue)}
.light .cart-assure svg{color:var(--blue-deep)}
.cart-assure span{display:flex;flex-direction:column;gap:2px}
.cart-assure b{color:var(--head);font-size:var(--fs-sm);font-weight:600}
.cart-assure small{color:var(--text-dim);font-size:var(--fs-xs)}
.light .cart-assure b{color:var(--navy)}
.light .cart-assure small{color:var(--ink-soft)}

/* ---------- checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(24px,3vw,44px);align-items:start}
@media (max-width:1040px){.checkout-grid{grid-template-columns:1fr}}

.checkout-block{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px)}
.light .checkout-block{background:#fff;border-color:rgba(5,29,65,.1)}
.checkout-block + .checkout-block{margin-top:20px}
.checkout-block h3{font-size:var(--fs-lg);margin-bottom:18px}
.checkout-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px)}
@media (max-width:780px){.checkout-cols{grid-template-columns:1fr}}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3{font-size:var(--fs-md);margin-bottom:14px}
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{display:grid;gap:14px}

.form-row{margin:0}
.form-row label{display:block;margin-bottom:7px;font-size:var(--fs-sm);color:var(--text-dim)}
.light .form-row label{color:var(--ink-mute)}
.form-row .required{color:var(--pink-hot);text-decoration:none}
.form-row .input-text,
.form-row select,
.form-row textarea,
.select2-container .select2-selection--single{width:100%;padding:13px 15px;
  border:1px solid var(--hair);border-radius:var(--r-xs);background:var(--muted);
  color:var(--head);font:inherit;font-size:var(--fs-base);height:auto}
.light .form-row .input-text,
.light .form-row select,
.light .form-row textarea,
.light .select2-container .select2-selection--single{border-color:rgba(5,29,65,.16);
  background:#fff;color:var(--navy)}
.form-row .input-text::placeholder,
.form-row textarea::placeholder{color:var(--placeholder)}
.form-row-first,
.form-row-last{width:auto}
.woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;gap:10px;
  font-size:var(--fs-sm)}
.woocommerce-form__label-for-checkbox input{margin-top:3px}

.checkout-review .shop_table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.checkout-review .shop_table th,
.checkout-review .shop_table td{padding:11px 0;text-align:left;font-weight:400;
  border-bottom:1px solid var(--hair)}
.light .checkout-review .shop_table th,
.light .checkout-review .shop_table td{border-bottom-color:rgba(5,29,65,.1)}
.checkout-review .shop_table td{text-align:right;color:var(--head);
  font-variant-numeric:tabular-nums}
.light .checkout-review .shop_table td{color:var(--navy)}
.checkout-review .shop_table .product-name{text-align:left;color:var(--text)}
.light .checkout-review .shop_table .product-name{color:var(--ink-soft)}
.checkout-review .shop_table .order-total th,
.checkout-review .shop_table .order-total td{border-bottom:0;padding-top:15px;font-weight:700}
.checkout-review .shop_table .order-total td{font-size:var(--fs-lg)}

.wc_payment_methods{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.wc_payment_method > label{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--muted);
  color:var(--head);font-size:var(--fs-base);font-weight:500;cursor:pointer;
  transition:border-color .16s ease,background .16s ease}
.light .wc_payment_method > label{border-color:rgba(5,29,65,.14);background:#fff;color:var(--navy)}
.wc_payment_method > label:hover{border-color:var(--hair-2)}
.wc_payment_method > input:checked + label{border-color:var(--blue);background:var(--muted-up)}
.light .wc_payment_method > input:checked + label{border-color:var(--blue-deep);
  background:rgba(178,223,241,.22)}
.wc_payment_method img{max-height:24px;width:auto;margin-left:auto}
.payment_box{margin:2px 0 0;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--muted);font-size:var(--fs-sm);color:var(--text-dim);line-height:1.6}
.light .payment_box{background:rgba(5,29,65,.05);color:var(--ink-soft)}
.payment_box p:last-child{margin-bottom:0}
.smt-credit-terms{display:block;margin-top:6px;color:var(--text)}
.light .smt-credit-terms{color:var(--navy)}

.woocommerce-privacy-policy-text{margin-top:16px;font-size:var(--fs-xs);color:var(--text-dim)}
.light .woocommerce-privacy-policy-text{color:var(--ink-mute)}
#place_order{display:block;width:100%;margin-top:18px;padding:16px 24px;border:0;
  border-radius:var(--pill);background:var(--pink);color:#fff;font:inherit;font-weight:600;
  font-size:var(--fs-md)}
#place_order:hover{background:var(--pink-hot)}

.smt-po-field{margin-top:18px}
.smt-po-note{margin-top:14px;font-size:var(--fs-sm);color:var(--text-dim)}

/* ---------- WooCommerce notices ---------- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error{list-style:none;display:block;width:fit-content;
  max-width:100%;margin:0 0 20px;padding:.75rem 1rem;border:0;border-radius:var(--r-sm);
  background:var(--blue);color:var(--navy);font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.woocommerce-error{background:var(--pink);color:#fff}
.woocommerce-message a,
.woocommerce-info a{color:inherit;text-decoration:underline}
.woocommerce-message .button,
.woocommerce-info .button{margin-left:12px;text-decoration:none;font-weight:600}

/* Inside a .pnotice card the list is just the message, not the notice, so it
   drops the bar styling above and lets the card carry the look. */
.pnotice .woocommerce-error,
.pnotice .woocommerce-message,
.pnotice .woocommerce-info{margin:0;padding:0;background:none;border-radius:0;
  color:inherit;font-size:inherit;font-weight:inherit;width:auto;max-width:none}
.pnotice .woocommerce-error a,
.pnotice .woocommerce-message a,
.pnotice .woocommerce-info a{color:var(--blue-deep)}

/* ---------- sign-in gate ---------- */

/* The design's .signin grid puts the card beside a benefits list. WordPress
   also needs a registration form there, so the column holds both. */
.signin-aside{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px)}

.signin-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:4px 0 20px;font-size:var(--fs-sm)}
.signin-row label{display:flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  font-size:var(--fs-sm);color:var(--text-dim)}
.light .signin-row label{color:var(--ink-mute)}
.signin-row input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--pink)}

.signin-register{padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--hair)}
.light .signin-register{border-top-color:rgba(5,29,65,.12)}
.signin-register h2{margin-bottom:16px}

/* The design's .cfield covers the inputs; the sign-in forms only need the
   required marker and a little breathing room under the last field. */
.signin-card .cfield .required,
.signin-register .cfield .required{color:var(--pink-hot);text-decoration:none}
.signin-register .btn{margin-top:6px}

/* ---------- the account area ----------
   WooCommerce renders dashboard, orders, addresses and account details from
   its own templates. The theme drops WooCommerce's stylesheets, so every
   class those templates emit is covered here, in the design's language:
   card surfaces, pill fields, the design's buttons. The class names below are
   WooCommerce's, taken from what the endpoints actually output. */

/* Each endpoint's content sits on a card, like the portal's own blocks. */
.woocommerce-MyAccount-content > .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content > .woocommerce-Addresses,
.woocommerce-MyAccount-content > .woocommerce-orders-table,
.woocommerce-MyAccount-content > form:not(.cform),
.woocommerce-MyAccount-content > .woocommerce-order-details,
.woocommerce-MyAccount-content > .woocommerce-customer-details{
  background:#fff;border:1px solid rgba(5,29,65,.1);border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px)}

/* ---- one notice, everywhere ----
   Three systems used to say the same kinds of thing in three ways: the
   portal's .pnotice card, WooCommerce's coloured bars and the green .pflash.
   The notice templates in woocommerce/notices/ now emit the portal's card, so
   everything the account and trade areas say shares this shape: a white card
   with the status in the left edge, an icon, and any action on the right.
   The status colours are the ones used everywhere else — green for done, red
   for a problem, gold for something worth a look, blue for information. */
.pnotice,
.pflash{width:100%;margin:0 0 18px;padding:18px 22px;
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid rgba(5,29,65,.1);
  border-left:4px solid var(--blue-deep);border-radius:var(--r);
  color:var(--ink-soft);font-size:var(--fs-base);font-weight:400;line-height:1.55;
  box-shadow:0 2px 10px -6px rgba(5,29,65,.22)}
/* The message block is as tall as whatever sits in it — a button makes it
   taller than its own text — and it centres its contents. Centring the icon
   against the same block therefore puts it on the text's centre line. Pinning
   it to the top instead only looks right while the button has wrapped onto a
   line of its own, which is not the usual case. */
.pnotice > svg,
.pflash > svg{flex:none;display:block;margin-top:0;color:var(--blue-deep)}

/* The message, and anything it carries, laid out in the space beside the icon. */
.pnotice > div,
.pnotice > ul{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 16px;margin:0;padding:0;list-style:none}
.pnotice > div > *,
.pnotice p{margin:0;flex:1 1 auto}
/* A lead line is a direct child of the notice's text block. WooCommerce writes
   <strong>Error:</strong> inline inside its message, and that has to stay
   inline, so this is deliberately not every strong in the notice. */
.pnotice > div > b,
.pnotice > div > strong{display:block;width:100%;margin:0 0 3px;
  color:var(--navy);font-weight:700;font-size:var(--fs-md)}
.pnotice li strong,
.pnotice p strong{color:var(--navy);font-weight:700}
.pnotice a:not(.button):not(.btn){color:var(--blue-deep);font-weight:600;
  text-decoration:underline}
/* WooCommerce prints the action before the message it belongs to. Ordering it
   last puts the message first and the button against the right edge; on its own
   margin-left:auto only opened a gap in front of it, because it was still the
   first thing in the row. The message is a bare text run, which has no order of
   its own, so it stays where it is and the button moves around it. */
.pnotice .button,
.pnotice .btn{order:2;flex:0 0 auto;margin-left:auto}

/* On a phone the message and its button cannot share a row: the button wraps
   and lands right of a half-empty line, with the icon centred against the
   whole two-row block and stranded in the middle. Stacked instead — icon on
   the first line of the message, button full width underneath — and the icon
   goes back to the top, since the block is now taller than its first line.
   (1.55 is the notice's line-height: half the difference between a line of
   text and the 18px icon puts the icon on that line's centre.) */
@media (max-width:780px){
  .pnotice,
  .pflash{align-items:flex-start;padding:16px 18px}
  .pnotice > svg,
  .pflash > svg{margin-top:calc((1.55em - 18px) / 2)}
  .pnotice > div{flex-direction:column;align-items:stretch;gap:14px}
  .pnotice .button,
  .pnotice .btn{order:2;width:100%;margin-left:0;justify-content:center}
}

.pnotice--ok{border-left-color:var(--green)}
.pnotice--ok > svg{color:var(--green)}
.pnotice--bad{border-left-color:var(--red)}
.pnotice--bad > svg{color:var(--red)}
.pnotice--warn{border-left-color:var(--gold)}
.pnotice--warn > svg{color:var(--gold)}
.pnotice--internal{background:#fff;border-left-color:var(--blue-deep)}
.pnotice--internal > svg{color:var(--blue-deep)}
.pflash{border-left-color:var(--green)}
.pflash > svg{color:var(--green)}

/* Several errors in one notice stay a list, one per line. */
.pnotice--bad > ul{display:block}
.pnotice--bad > ul > li + li{margin-top:6px}

/* ---- WooCommerce's generic button ---- */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-Address .edit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border:0;border-radius:var(--pill);background:var(--blue);
  color:var(--navy);font:inherit;font-size:var(--fs-sm);font-weight:700;
  cursor:pointer;transition:background .16s ease;text-decoration:none}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-Address .edit:hover{background:var(--blue-hot);color:var(--navy)}

/* ---- account details form ---- */
.woocommerce-EditAccountForm .woocommerce-form-row{margin:0 0 18px}
.woocommerce-EditAccountForm .woocommerce-form-row--first,
.woocommerce-EditAccountForm .woocommerce-form-row--last{
  display:inline-block;width:calc(50% - 9px);vertical-align:top}
.woocommerce-EditAccountForm .woocommerce-form-row--first{margin-right:14px}
@media (max-width:640px){
  .woocommerce-EditAccountForm .woocommerce-form-row--first,
  .woocommerce-EditAccountForm .woocommerce-form-row--last{width:100%;margin-right:0}
}
.woocommerce-EditAccountForm label{display:block;margin-bottom:7px;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-mute)}
.woocommerce-EditAccountForm .required{color:var(--red);text-decoration:none}
.woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-EditAccountForm input[type=text],
.woocommerce-EditAccountForm input[type=email],
.woocommerce-EditAccountForm input[type=password]{
  width:100%;padding:13px 16px;border:1px solid rgba(5,29,65,.16);
  border-radius:var(--pill);background:#fff;color:var(--navy);font:inherit;
  font-size:var(--fs-base)}
.woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-EditAccountForm input:focus{outline:none;border-color:var(--blue-deep)}
.woocommerce-EditAccountForm span.description,
.woocommerce-EditAccountForm em{display:block;margin-top:7px;font-style:normal;
  font-size:var(--fs-xs);color:var(--ink-mute)}

/* The password-change group is a bare <fieldset><legend>, which carries a
   browser default border. Make it a section with a proper heading. */
.woocommerce-EditAccountForm fieldset{margin:8px 0 22px;
  padding:clamp(18px,2vw,24px);border:1px solid rgba(5,29,65,.1);
  border-radius:var(--r-sm);background:rgba(5,29,65,.02)}

/* A <legend> straddles the fieldset's top border by default, which cuts
   through it. Floating it takes it out of that flow so it reads as an
   ordinary heading at the top of the panel, like every other heading here. */
.woocommerce-EditAccountForm legend{float:left;width:100%;margin:0 0 18px;
  padding:0;font-size:var(--fs-lg);font-weight:700;color:var(--navy);
  letter-spacing:-.02em}
.woocommerce-EditAccountForm fieldset::after{content:"";display:table;clear:both}
.woocommerce-EditAccountForm .fieldset-note{clear:both;margin:0 0 18px;
  font-size:var(--fs-sm);color:var(--ink-mute)}

/* WooCommerce's reveal toggle is an unlabelled button, which otherwise shows
   as a small grey bar. A word is clearer than an icon and needs no glyph. */
.woocommerce-EditAccountForm .password-input,
.woocommerce-EditAccountForm .woocommerce-password-input{position:relative;display:block}
.woocommerce-EditAccountForm .show-password-input{position:absolute;right:6px;
  top:50%;transform:translateY(-50%);width:auto;height:auto;padding:7px 14px;
  border:0;border-radius:var(--pill);background:none;cursor:pointer;
  font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--ink-mute);
  transition:color .16s ease,background .16s ease}
.woocommerce-EditAccountForm .show-password-input::after{content:"Show"}
.woocommerce-EditAccountForm .show-password-input.display-password::after{content:"Hide"}
.woocommerce-EditAccountForm .show-password-input:hover{color:var(--blue-deep);
  background:rgba(5,29,65,.05)}
.woocommerce-EditAccountForm input[type=password]{padding-right:78px}

.woocommerce-EditAccountForm .clear{clear:both}
.woocommerce-EditAccountForm > p:last-of-type{margin-bottom:0}

/* ---- addresses ---- */
.woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,32px)}
@media (max-width:760px){.woocommerce-Addresses{grid-template-columns:1fr}}
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2,
.woocommerce-Addresses .u-column1,
.woocommerce-Addresses .u-column2{width:auto;float:none;margin:0}
.woocommerce-Address{display:flex;flex-direction:column;gap:12px;height:100%}
.woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.woocommerce-Address-title h2,
.woocommerce-Address-title .title h3{margin:0;font-size:var(--fs-lg);color:var(--navy)}
.woocommerce-Address address{font-style:normal;line-height:1.7;color:var(--ink-soft);
  font-size:var(--fs-base);margin:0}
.woocommerce-Address p,
.woocommerce-Address address:empty::before{color:var(--ink-mute);font-size:var(--fs-sm)}
.woocommerce-MyAccount-content > p:first-child{margin-top:0;color:var(--ink-soft)}

/* ---- the address form ----
   Its fields are plain <p class="form-row"> with no wrapping grid, so each
   needs its own spacing. The pairs that WooCommerce marks first/last sit
   side by side, and the second address line tucks under the first because
   they are one address, not two fields. */
.woocommerce-address-fields__field-wrapper{display:grid;
  grid-template-columns:1fr 1fr;column-gap:18px}
.woocommerce-address-fields .form-row,
.woocommerce-MyAccount-content form .form-row{margin:0 0 18px;grid-column:1/-1}
.woocommerce-address-fields .form-row-first{grid-column:1}
.woocommerce-address-fields .form-row-last{grid-column:2}
@media (max-width:640px){
  .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr}
  .woocommerce-address-fields .form-row-first,
  .woocommerce-address-fields .form-row-last{grid-column:1/-1}
}
/* The second address line continues the first, so it sits right under it with
   its label doing the explaining. */
.woocommerce-address-fields #billing_address_2_field,
.woocommerce-address-fields #shipping_address_2_field{margin-top:-6px}
.woocommerce-address-fields label{display:block;margin-bottom:7px;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-mute)}
.woocommerce-address-fields .optional{font-weight:400;color:var(--placeholder)}
.woocommerce-address-fields .required{color:var(--red);text-decoration:none}
.woocommerce-address-fields .input-text,
.woocommerce-address-fields select,
.woocommerce-address-fields .select2-selection--single{width:100%;
  padding:13px 16px;border:1px solid rgba(5,29,65,.16);border-radius:var(--pill);
  background:#fff;color:var(--navy);font:inherit;font-size:var(--fs-base);height:auto}
.woocommerce-address-fields .input-text:focus,
.woocommerce-address-fields select:focus{outline:none;border-color:var(--blue-deep)}
.woocommerce-address-fields .input-text::placeholder{color:var(--placeholder)}
.woocommerce-address-fields > p:last-of-type,
.woocommerce-MyAccount-content form > p:last-of-type{margin-bottom:0}
/* Endpoint headings only. Without the :not() this reached every h3 in the
   column, including the one inside a product card, which set card titles a
   size and a half larger than the same card on the shop page and wrapped
   them onto a second line. */
.woocommerce-MyAccount-content h3:not(.pcard *):not(.mcard *),
.woocommerce-MyAccount-content form > h2{font-size:var(--fs-xl);color:var(--navy);
  margin:0 0 22px;letter-spacing:-.025em}
/* The address forms put their heading straight above the first label, which
   needs more air than a heading above a paragraph. */
.woocommerce-MyAccount-content form > h2{margin-bottom:30px}

/* ---- the account column ---- */

/* See --sm-stick: the measured header height, not the stylesheet's estimate. */
.woocommerce-MyAccount-navigation.pnav{top:var(--sm-stick)}

/* The current page. WooCommerce writes is-active, the design's pill is is-on;
   the template carries both so the design's blue pill lands on the right item. */
.pnav-i.is-on svg{color:var(--navy);opacity:1}
.light .pnav-i:hover{background:rgba(5,29,65,.05);color:var(--navy)}

/* Below the two-column breakpoint the column becomes a row. Left as wrapping
   links it reads as a run of words, so each item keeps a card of its own and
   the account-manager panel drops underneath. */
@media (max-width:980px){
  /* Two to a row, not as many as fit: three across leaves "Trade Accounts"
     and "Account Details" wrapping onto two lines in a narrow cell. */
  .woocommerce-MyAccount-navigation.pnav{display:grid;
    grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
  .woocommerce-MyAccount-navigation .pnav-i{background:#fff;
    border:1px solid rgba(5,29,65,.1)}
  .woocommerce-MyAccount-navigation .pnav-i.is-on{background:var(--blue);border-color:transparent}
  .woocommerce-MyAccount-navigation .pnav-am{grid-column:1/-1}
}

/* The identity chip sat on the recessive surface, which is all but invisible
   once the band flips to white. Give it a surface of its own. */
.light .pbar-me{background:#fff;border-color:rgba(5,29,65,.14);
  box-shadow:0 2px 10px -6px rgba(5,29,65,.3)}
.light .pbar-me .pav{background:var(--blue);color:var(--navy);font-weight:700}
.light .pbar-me small{color:var(--ink-mute)}

/* ---- empty states ---- */
.pempty{background:#fff;border:1px solid rgba(5,29,65,.1);border-radius:var(--r);
  padding:clamp(34px,5vw,54px) clamp(22px,3vw,34px);text-align:center;
  box-shadow:0 2px 10px -6px rgba(5,29,65,.22)}
.pempty-ic{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 20px;
  border-radius:var(--r-sm);background:rgba(15,109,156,.1);color:var(--blue-deep)}
.pempty h3{font-size:var(--fs-xl);color:var(--navy);margin:0 0 10px;letter-spacing:-.025em}
.pempty p{margin:0 auto 26px;max-width:48ch;color:var(--ink-soft);font-size:var(--fs-base)}

/* ---- the country picker ----
   WooCommerce hands this field to Select2, which replaces the <select> with
   markup of its own and appends the dropdown to the end of the document. None
   of it can be scoped to a page, so the whole control is dressed here to match
   the pill fields it sits among, closed and open.

   Open, the control and the dropdown join into one shape: the control flattens
   the corners on the side the list appeared, and the list flattens the corners
   that meet it. */

.select2-container--default .select2-selection--single{
  width:100%;height:auto;padding:0;
  border:1px solid rgba(5,29,65,.16);border-radius:var(--pill);background:#fff}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:13px 42px 13px 17px;line-height:1.5;color:var(--navy);
  font-size:var(--fs-base)}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:var(--placeholder)}

/* Select2 draws the arrow as a CSS triangle, and re-declares its borders on
   the open state, so a chevron drawn on that element is overruled the moment
   the list opens. The triangle goes, and the chevron is drawn on the wrapper
   around it, which Select2 never restyles. */
.select2-container--default .select2-selection--single .select2-selection__arrow{
  top:0;right:17px;width:10px;height:100%}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  display:none}
.select2-container--default .select2-selection--single .select2-selection__arrow::after{
  content:"";position:absolute;top:50%;right:0;width:8px;height:8px;
  margin-top:-6px;border-right:1.7px solid var(--ink-mute);
  border-bottom:1.7px solid var(--ink-mute);transform:rotate(45deg);
  transition:transform .18s ease,margin-top .18s ease}
.select2-container--default.select2-container--open
  .select2-selection--single .select2-selection__arrow::after{
  margin-top:-2px;transform:rotate(-135deg)}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--blue-deep)}

/* selectWoo's own stylesheet squares off the corners that face the list when
   it opens. Left alone that gave a control with a flat top and a 100px pill
   bottom, which is the odd shape this field kept showing. The pill is kept
   whichever way the list opens, so the field never changes shape. */
.select2-container--default.select2-container--open.select2-container--above
  .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below
  .select2-selection--single{border-radius:var(--pill)}

/* The control keeps the pill it has closed, open or not, so it is the same
   shape as every other field on the form at all times. Joining it to the list
   was the wrong idea: --pill is 100px, so the corners that met the list stayed
   fully round against the list's 13px and the pair read as one bulbous blob.
   The list is its own panel instead, sitting just clear of the field. */
.select2-container--default .select2-dropdown{
  border:1px solid rgba(5,29,65,.16);border-radius:var(--r-sm);
  background:#fff;overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(5,29,65,.55)}
.select2-container--default .select2-dropdown--below{margin-top:6px}
.select2-container--default .select2-dropdown--above{margin-top:-6px}

.select2-container--default .select2-search--dropdown{padding:10px 10px 6px}
.select2-container--default .select2-search--dropdown .select2-search__field{
  padding:9px 15px;border:1px solid rgba(5,29,65,.12);border-radius:var(--pill);
  background:rgba(5,29,65,.03);color:var(--navy);font:inherit;
  font-size:var(--fs-sm);outline:none}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  border-color:var(--blue-deep);background:#fff}

.select2-container--default .select2-results__options{padding:6px;max-height:258px}
.select2-container--default .select2-results__option{
  padding:9px 13px;border-radius:var(--r-sm);color:var(--navy);
  font-size:var(--fs-sm);line-height:1.45}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true],
.select2-container--default .select2-results__option--selected{
  background:rgba(5,29,65,.06);color:var(--navy);font-weight:600}
/* Whatever the keyboard is on wins over whatever is already chosen. */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected=true]{
  background:var(--blue);color:var(--navy)}
.select2-container--default .select2-results__message{
  padding:12px 13px;color:var(--ink-mute);font-size:var(--fs-sm)}

/* ---- orders table ---- */
.woocommerce-orders-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.woocommerce-orders-table th,
.woocommerce-orders-table td{padding:14px 12px;text-align:left;
  border-bottom:1px solid rgba(5,29,65,.08);vertical-align:middle}
.woocommerce-orders-table th{font-weight:600;color:var(--ink-mute);font-size:var(--fs-xs)}
.woocommerce-orders-table td{color:var(--navy)}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions{text-align:right}
.woocommerce-orders-table .button{padding:9px 16px;font-size:var(--fs-xs)}

/* ---- order detail ---- */
.woocommerce-order-details__title,
.woocommerce-column__title{font-size:var(--fs-lg);color:var(--navy);margin-bottom:16px}
.woocommerce-order-details table,
.woocommerce-table--order-details{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td{padding:13px 10px;text-align:left;
  border-bottom:1px solid rgba(5,29,65,.08);color:var(--navy)}
.woocommerce-customer-details .woocommerce-columns{display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px)}
@media (max-width:760px){.woocommerce-customer-details .woocommerce-columns{grid-template-columns:1fr}}

/* ---------- account and portal additions ---------- */

/* ---- a row's edit and remove controls ---- */
.prow-actions{display:inline-flex;align-items:center;gap:4px}
.prow-actions .pinline-form{display:inline-flex;margin:0}
.prow-ic{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;
  border-radius:50%;background:transparent;color:var(--ink-mute);cursor:pointer;
  transition:background .16s ease,color .16s ease}
.prow-ic:hover{background:rgba(5,29,65,.07);color:var(--navy)}
.prow-ic--danger:hover{background:rgba(210,54,47,.1);color:var(--red)}

/* The category rule's row marker, where a product row carries a thumbnail. */
.pcat-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;
  border-radius:var(--r-sm);background:rgba(15,109,156,.1);color:var(--blue-deep)}

/* ---- the edit dialog ---- */
.smt-modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  padding:20px;background:rgba(3,14,32,.55);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);animation:fade-in .2s ease}
.smt-modal[hidden]{display:none}
.smt-modal-card{width:min(460px,100%);max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);
  box-shadow:0 40px 80px -40px rgba(3,14,32,.8)}
.smt-modal-h{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:10px}
.smt-modal-h h3{font-size:var(--fs-xl);color:var(--navy);letter-spacing:-.025em;margin:0}
.smt-modal-what{margin:0 0 30px;font-size:var(--fs-base);
  font-weight:600;color:var(--ink-soft)}
.smt-modal .cfield{margin-bottom:20px}
.smt-modal .cfield:last-of-type{margin-bottom:0}
.smt-modal .cfield label{margin-bottom:9px;color:var(--ink-mute);font-weight:600}
.smt-modal .cfield input,
.smt-modal .cfield select{width:100%;padding:13px 16px;border-radius:var(--pill);
  border:1px solid rgba(5,29,65,.16);background:#fff;color:var(--navy);
  font:inherit;font-size:var(--fs-base)}
.smt-modal .cfield input:focus,
.smt-modal .cfield select:focus{outline:none;border-color:var(--blue-deep)}
.smt-modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}
@media (max-width:480px){
  .smt-modal-foot{flex-direction:column-reverse}
  .smt-modal-foot .btn{width:100%}
}

/* wc_price() wraps the currency symbol in its own span, and at the stat tile's
   size that was breaking onto a line of its own. The amount is one thing, so
   it stays on one line, with the symbol sized down to read as a prefix rather
   than as part of the number. */
/* The design styles the tile's caption as `.pstat span` — display:block at
   label size. wc_price() wraps its figure and its currency symbol in spans of
   their own, so the caption rule was catching them: the £ became a block of
   its own above the number, at caption size. The spans inside the figure are
   put back to plain inline text at the figure's own size, which is what made
   the three tiles disagree. */
.pstat b{white-space:nowrap}
.pstat b span{display:inline;margin:0;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;color:inherit}
/* The currency symbol is part of the figure, so it is set at the figure's
   own size rather than shrunk to a prefix. */
.pstat b .woocommerce-Price-currencySymbol{font-size:inherit;font-weight:inherit}
.pstat b del,
.pstat b ins{text-decoration:none;background:none}
.pmeter{height:10px;border-radius:var(--pill);background:var(--muted);overflow:hidden}
.light .pmeter{background:rgba(5,29,65,.08)}
.pmeter span{display:block;height:100%;border-radius:var(--pill);background:var(--blue);
  transition:width .4s ease}

.pmanager{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pav--lg{width:58px;height:58px;font-size:1.3rem}
.pmanager-t{display:flex;flex-direction:column;gap:3px}
.pmanager-t b{font-size:var(--fs-lg);color:var(--head)}
.pmanager-t > span{color:var(--text-dim);font-size:var(--fs-sm)}
.light .pmanager-t b{color:var(--navy)}
.light .pmanager-t > span{color:var(--ink-mute)}
.pmanager .actions{margin-top:12px}

.pinline-form{display:inline}
.pnotice--warn{border-left-color:var(--gold)}
.pstatus.stop{background:rgba(210,54,47,.14);color:var(--red)}
.ptable td.is-loss{color:var(--red);font-weight:600}

.padd--inline{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cfield--sm{max-width:180px}
.cfield-unit{position:relative;display:block}
.cfield-unit em{position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-style:normal;color:var(--text-dim);font-size:var(--fs-sm);pointer-events:none}
.light .cfield-unit em{color:var(--ink-mute)}
.cfield-unit input{padding-right:38px}

/* ---------- catalogue additions ---------- */

/*
 * Each product category is its own URL, so those rows are links rather than
 * radio inputs — crawlable, and they open in a new tab like any other link.
 * The marker below reproduces the native radio the other facets use, so the
 * column reads as one control set.
 */
.fopt--link{text-decoration:none}
.fopt--link::before{content:"";flex:none;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--hair-2);background:transparent;transition:.16s ease}
.light .fopt--link::before{border-color:rgba(5,29,65,.3)}
.fopt--link:hover::before{border-color:var(--pink)}
.fopt--link.is-on{color:var(--head);font-weight:600}
.light .fopt--link.is-on{color:var(--navy)}
.fopt--link.is-on::before{border-color:var(--pink);background:var(--pink);
  box-shadow:inset 0 0 0 3px #fff}

.facet-note--quiet{opacity:.78;font-size:var(--fs-xs)}

/* Price range: the currency symbol sits inside the field and stays put, so it
   is still there once a figure has been typed. The design carried it in the
   placeholder, where it disappeared on first keystroke. */
.frange-field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.frange-unit{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:var(--fs-base);color:var(--text-dim);pointer-events:none;line-height:1}
.light .frange-unit{color:var(--ink-mute)}
.frange-field input{padding-left:28px!important;font-variant-numeric:tabular-nums}
.frange-field input::placeholder{color:var(--placeholder)}
.frange-sep{flex:none;color:var(--text-dim)}
.light .frange-sep{color:var(--ink-mute)}

/* Chrome and Safari put steppers on a number input, which crowd a field this
   narrow and are not much use for a price. */
.frange-field input::-webkit-outer-spin-button,
.frange-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.frange-field input{-moz-appearance:textfield}

/* ---------- WordPress furniture ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,56px)}
.pager .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 13px;
  border:1px solid var(--hair);border-radius:var(--r-xs);background:var(--muted);
  color:var(--text);font-size:var(--fs-sm);font-weight:500;transition:.16s ease}
.light .pager .page-numbers{border-color:rgba(5,29,65,.14);background:#fff;color:var(--ink-soft)}
.pager .page-numbers:hover{border-color:var(--hair-2);color:#fff}
.light .pager .page-numbers:hover{border-color:var(--blue-deep);color:var(--navy)}
.pager .page-numbers.current{background:var(--blue);border-color:var(--blue);color:var(--navy);
  font-weight:600}
.pager .page-numbers.dots{border-color:transparent;background:none}

.sect-figure{margin:0;border-radius:var(--r);overflow:hidden}
.sect-figure img{width:100%;height:auto;display:block}

.search404{max-width:520px;margin:30px auto 0}
.search404 .search{width:100%}

.pcard--post .im{aspect-ratio:16/10;background:var(--well)}
.pcard--post .pfoot{border-top:0;padding-top:4px}

.foot-legal-nav ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0}
.foot-legal-nav a{color:var(--text-dim);font-size:var(--fs-sm)}
.foot-legal-nav a:hover{color:#fff}

/* ---------- admin bar does not fight the sticky header ---------- */
body.admin-bar .nav{top:32px}
@media (max-width:782px){body.admin-bar .nav{top:46px}}

/* ============================================================
   VARIABLE PRODUCTS
   A product with variations has to ask two questions before it can be
   bought, and the design has no pattern for that — these are the shop's
   own fields, built to match the ones the checkout already uses.
   ============================================================ */

.vform{display:block}

.variations{display:grid;gap:14px;margin:0 0 18px}

.vrow{display:grid;gap:7px}
.vlabel{font-size:var(--fs-sm);font-weight:600;color:var(--head);letter-spacing:-.01em}
.light .vlabel{color:var(--navy)}

.vfield{position:relative}

/* The dropdown. selectWoo replaces it on the checkout but not here, so the
   native control is the one on screen and carries its own arrow. */
.variations select{font:inherit;font-size:var(--fs-base);width:100%;cursor:pointer;
  background:var(--muted);color:var(--head);
  border:1px solid var(--hair);border-radius:var(--pill);padding:13px 42px 13px 16px;
  appearance:none;-webkit-appearance:none;transition:border-color .16s ease}
.light .variations select{background:#fff;color:var(--navy);border-color:rgba(5,29,65,.16)}
.variations select:focus{outline:none;border-color:var(--sky)}
.light .variations select:focus{border-color:var(--blue-deep)}

.vfield::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;
  margin-top:-6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.55;pointer-events:none;color:var(--text-dim)}
.light .vfield::after{color:var(--ink-soft)}

/* "Clear" only matters once something has been picked, and WooCommerce
   shows and hides it itself; it sits under the fields rather than beside
   the last one, where it used to crowd the dropdown. */
.variations .reset_variations{justify-self:start;font-size:var(--fs-sm);font-weight:600;
  color:var(--pink);border-bottom:1px solid transparent}
.variations .reset_variations:hover{border-bottom-color:var(--pink)}

/* WooCommerce writes the chosen variation's price, stock and description
   into this block. The price block is the same one the rest of the page
   uses, so it only needs its spacing setting. */
.single_variation_wrap{display:block}
.woocommerce-variation{display:block}
.woocommerce-variation-description{font-size:var(--fs-sm);color:var(--text-dim);
  margin:0 0 12px;line-height:1.6}
.woocommerce-variation-price{margin:0 0 14px}
.woocommerce-variation-price .price{margin:0}
.woocommerce-variation-price .price .now{font-size:2rem}
.woocommerce-variation-availability{margin:0 0 14px}
.woocommerce-variation-availability .stock{margin:0}

/* An impossible combination: WooCommerce prints a bare paragraph, which
   reads as body copy dropped into the buy panel. */
.single_variation_wrap > p[role="alert"],
.woocommerce-variation > p[role="alert"]{display:flex;align-items:flex-start;gap:9px;
  margin:0 0 14px;padding:13px 15px;border-radius:var(--r);
  background:rgba(211,0,126,.08);border:1px solid rgba(211,0,126,.3);
  font-size:var(--fs-sm);color:var(--head)}
.light .single_variation_wrap > p[role="alert"],
.light .woocommerce-variation > p[role="alert"]{color:var(--navy)}

/* Until a variation is chosen there is nothing to add, and WooCommerce
   disables the button. Say so rather than leaving it looking broken. */
.variations_button .single_add_to_cart_button.disabled,
.variations_button .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed}
.variations_button .single_add_to_cart_button.disabled:hover,
.variations_button .single_add_to_cart_button:disabled:hover{background:var(--pink)}

/* The lowest of several prices is labelled, so "£78.30" is not read as the
   price of every tank in the range. */
/* Sits on the price's own baseline rather than floating in the middle of it,
   and close enough to read as one phrase. */
.pfrom{align-self:baseline;margin-right:0;font-size:var(--fs-sm);font-weight:600;
  color:var(--text-dim);text-transform:none}
.light .pfrom{color:var(--ink-soft)}
.pcard .pfrom,.mcard .pfrom{font-size:var(--fs-xs)}

/* Once a variation is chosen there is a real price under the fields, and the
   "From £x" above it is answering a question nobody is asking any more. */
.pdp-buy.has-variation .buybox > .price{display:none}

/* ============================================================
   THE ORDER PAGES
   Basket, checkout and confirmation. WooCommerce prints several of these
   parts as bare lists and native controls, which the rest of the shop has
   no pattern for; these give them one.
   ============================================================ */

/* ---------- choosing a delivery method ----------
   Both the basket totals and the checkout review print the same list. It is
   a set of choices, so it is drawn as one rather than as bulleted text. */
.woocommerce-shipping-methods{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.woocommerce-shipping-methods li{display:block}
.woocommerce-shipping-methods label{display:flex;align-items:center;gap:10px;
  padding:10px 13px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--muted);color:var(--head);
  font-size:var(--fs-sm);font-weight:500;line-height:1.35;cursor:pointer;
  transition:border-color .16s ease,background .16s ease}
.light .woocommerce-shipping-methods label{border-color:rgba(5,29,65,.12);
  background:#fff;color:var(--navy)}
.woocommerce-shipping-methods label:hover{border-color:var(--hair-2)}
.light .woocommerce-shipping-methods label:hover{border-color:var(--blue-deep)}
.woocommerce-shipping-methods .amount{margin-left:auto;font-weight:600;white-space:nowrap}
.woocommerce-shipping-methods input:checked + label{border-color:var(--blue);
  background:var(--muted-up)}
.light .woocommerce-shipping-methods input:checked + label{border-color:var(--blue-deep);
  background:rgba(178,223,241,.22)}

/* The radio itself, here and on the payment list: the browser's own control
   in the shop's colours rather than the operating system's blue. */
.woocommerce-shipping-methods input[type=radio],
.wc_payment_method > input[type=radio]{flex:none;appearance:none;-webkit-appearance:none;
  width:17px;height:17px;margin:0;border:1px solid var(--hair-2);border-radius:50%;
  background:transparent;cursor:pointer;transition:border-color .16s ease}
.light .woocommerce-shipping-methods input[type=radio],
.light .wc_payment_method > input[type=radio]{border-color:rgba(5,29,65,.3)}
.woocommerce-shipping-methods input[type=radio]:checked,
.wc_payment_method > input[type=radio]:checked{border-color:var(--pink);
  border-width:5px}
.woocommerce-shipping-methods input[type=radio]:focus-visible,
.wc_payment_method > input[type=radio]:focus-visible{outline:2px solid var(--blue-deep);
  outline-offset:2px}

/* The radio sits inside the row it belongs to rather than beside it. */
.woocommerce-shipping-methods li{position:relative}
.woocommerce-shipping-methods input[type=radio]{position:absolute;left:13px;top:50%;
  margin-top:-8px;z-index:1;pointer-events:none}
.woocommerce-shipping-methods label{padding-left:40px}

/* Where it is going, and the way to change that. */
.woocommerce-shipping-destination{margin:12px 0 0;font-size:var(--fs-sm);color:var(--text-dim)}
.light .woocommerce-shipping-destination{color:var(--ink-mute)}
.woocommerce-shipping-destination strong{color:var(--head);font-weight:600}
.light .woocommerce-shipping-destination strong{color:var(--navy)}
.shipping-calculator-button{display:inline-block;margin-top:10px;
  font-size:var(--fs-sm);font-weight:600;color:var(--pink);
  border-bottom:1px solid transparent}
.shipping-calculator-button:hover{border-bottom-color:var(--pink)}
.shipping-calculator-form{display:grid;gap:12px;margin-top:14px}
.shipping-calculator-form .button{width:100%}

/* ---------- the promotion code ----------
   WooCommerce floats these two rows. The panel is a single row of a field
   and its button, and on a phone they stack. */
.checkout_coupon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  align-items:end;margin:0 0 22px;padding:clamp(16px,2vw,22px);
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r)}
.light .checkout_coupon{background:#fff;border-color:rgba(5,29,65,.1)}
.checkout_coupon .form-row{float:none;width:auto;margin:0;padding:0}
.checkout_coupon .form-row-first,
.checkout_coupon .form-row-last{width:auto}
.checkout_coupon .clear{display:none}
.checkout_coupon .button{white-space:nowrap}
@media (max-width:520px){
  .checkout_coupon{grid-template-columns:1fr}
  .checkout_coupon .button{width:100%}
}

/* The prompt above it is a notice, not a band across the page. */
.woocommerce-form-coupon-toggle{margin:0 0 20px}
.woocommerce-form-coupon-toggle .pnotice{margin:0}

/* ---------- deliver somewhere else ----------
   WooCommerce makes this an <h3> wrapped round a checkbox, so it inherits
   heading type it does not want. */
#ship-to-different-address{margin:0 0 14px;font-size:var(--fs-md)}
#ship-to-different-address label{display:flex;align-items:center;gap:10px;
  margin:0;font-size:var(--fs-md);font-weight:600;color:var(--head);cursor:pointer}
.light #ship-to-different-address label{color:var(--navy)}
/* Every checkbox WooCommerce prints on these pages: the delivery toggle, the
   create-account toggle, remember me and the terms. One control, one look. */
#ship-to-different-address input[type=checkbox],
.woocommerce-form__input-checkbox,
.woocommerce-terms-and-conditions-wrapper input[type=checkbox]{flex:none;
  appearance:none;-webkit-appearance:none;width:19px;height:19px;margin:0;
  cursor:pointer;border:1px solid var(--hair-2);border-radius:5px;
  background:transparent;transition:background .16s ease,border-color .16s ease}
.light #ship-to-different-address input[type=checkbox],
.light .woocommerce-form__input-checkbox,
.light .woocommerce-terms-and-conditions-wrapper input[type=checkbox]{
  border-color:rgba(5,29,65,.3)}
#ship-to-different-address input[type=checkbox]:checked,
.woocommerce-form__input-checkbox:checked,
.woocommerce-terms-and-conditions-wrapper input[type=checkbox]:checked{
  background:var(--pink);border-color:var(--pink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}
#ship-to-different-address input[type=checkbox]:focus-visible,
.woocommerce-form__input-checkbox:focus-visible,
.woocommerce-terms-and-conditions-wrapper input[type=checkbox]:focus-visible{
  outline:2px solid var(--blue-deep);outline-offset:2px}

/* ---------- terms, and the small print under the button ---------- */
.woocommerce-terms-and-conditions-wrapper{margin-top:16px}
.woocommerce-terms-and-conditions-wrapper .form-row{margin:0}
.woocommerce-terms-and-conditions-wrapper label{display:flex;align-items:flex-start;gap:10px;
  font-size:var(--fs-sm);color:var(--text)}
.light .woocommerce-terms-and-conditions-wrapper label{color:var(--ink-soft)}
.woocommerce-terms-and-conditions{margin-top:12px;padding:14px 16px;max-height:200px;
  overflow:auto;border-radius:var(--r-sm);background:var(--muted);font-size:var(--fs-sm)}
.light .woocommerce-terms-and-conditions{background:rgba(5,29,65,.05)}
.place-order{margin:0}

/* The basket's own update control sits beside the promotion code rather than
   under it, and reads as the secondary action it is. */
.coupon{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.coupon label{margin:0;font-size:var(--fs-sm);color:var(--text-dim)}
.light .coupon label{color:var(--ink-mute)}
.coupon .input-text{flex:1 1 180px;min-width:0;padding:11px 15px;font:inherit;
  font-size:var(--fs-sm);border:1px solid var(--hair);border-radius:var(--pill);
  background:var(--muted);color:var(--head)}
.light .coupon .input-text{border-color:rgba(5,29,65,.16);background:#fff;color:var(--navy)}
.coupon .input-text::placeholder{color:var(--placeholder)}

/* The delivery row is a single cell across both columns (see the
   cart-shipping template), so the choices get the full width of the panel
   rather than the width of the product column. */
.cart_totals td.shiprow,
.checkout-review .shop_table td.shiprow,
.shiprow{text-align:left;padding:14px 0}
.shiprow-head{display:block;margin-bottom:9px;font-size:var(--fs-sm);
  font-weight:600;color:var(--head)}
.light .shiprow-head{color:var(--navy)}
.shiprow .woocommerce-shipping-methods{width:100%}

/* A line in the review: the name wraps, its count does not get orphaned. */
.checkout-review .shop_table .product-name{line-height:1.45}
.checkout-review .shop_table .product-quantity{white-space:nowrap;font-weight:600}

/* ---------- order received ----------
   The page a customer forwards to whoever signs off the purchase, so the
   order number and what happens next come before the itemised table. */
.ordpage{display:block}
.ordone{max-width:62ch;margin:0 auto 34px;text-align:center}
.ordone .tag{justify-content:center}
.ordone h1{margin:0 0 14px;text-wrap:balance}
.ordone .lead{margin:0 auto;max-width:56ch}
.ordone .actions{justify-content:center;margin-top:26px}

.ordone-mark{display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;margin-bottom:22px;border-radius:50%;
  background:rgba(0,154,106,.12);color:var(--green,#009a6a)}
.light .ordone-mark{background:rgba(0,154,106,.14)}
.ordone-mark--bad{background:rgba(211,0,126,.12);color:var(--pink)}

/* The five facts, as a row of tiles rather than a bulleted list. */
.ordfacts{list-style:none;margin:0 0 28px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ordfacts li{display:flex;flex-direction:column;gap:5px;
  padding:16px 18px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--hair)}
.light .ordfacts li{background:#fff;border-color:rgba(5,29,65,.1)}
.ordfacts span{font-size:var(--fs-xs);font-weight:500;color:var(--text-dim);
  letter-spacing:.02em}
.light .ordfacts span{color:var(--ink-mute)}
.ordfacts strong{font-size:var(--fs-md);font-weight:700;color:var(--head);
  letter-spacing:-.02em;overflow-wrap:anywhere}
.light .ordfacts strong{color:var(--navy)}
.ordfacts .amount{font-size:inherit}
/* An address is long and has no spaces, so it sets smaller and breaks where
   it can rather than splitting a word down the middle. */
.ordfacts .email strong{font-size:var(--fs-sm);line-height:1.45;overflow-wrap:break-word}

/* The gateway's instructions and the order table, in the shop's own card. */
.ordbody{display:grid;gap:20px}
.ordbody > *{margin:0}
.ordbody h2,
.ordbody h3{font-size:var(--fs-lg);color:var(--head);margin:0 0 16px;letter-spacing:-.025em}
.light .ordbody h2,
.light .ordbody h3{color:var(--navy)}

/* A gateway that prints its payment instructions as a heading, a paragraph
   and a list gets the card the rest of the page is made of. */
.ordbody .woocommerce-bacs-bank-details,
.ordbody .wc-bacs-bank-details-heading,
.ordbody .wc-bacs-bank-details-account-name,
.ordbody .woocommerce-order-details,
.ordbody .woocommerce-customer-details{padding:0}
.ordbody .woocommerce-bacs-bank-details{list-style:none;margin:0;padding:0;
  display:grid;gap:9px}
.ordbody .bacs_details{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px;
  font-size:var(--fs-sm);color:var(--text)}
.light .ordbody .bacs_details{color:var(--ink-soft)}
.ordbody .bacs_details strong{color:var(--head);font-weight:600}
.light .ordbody .bacs_details strong{color:var(--navy)}

.ordcard,
.ordbody .woocommerce-order-details,
.ordbody .woocommerce-customer-details,
.ordbody > .woocommerce-bacs-bank-details,
.ordbody > p:first-child{background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r);padding:clamp(20px,2.4vw,30px)}
.light .ordcard,
.light .ordbody .woocommerce-order-details,
.light .ordbody .woocommerce-customer-details,
.light .ordbody > .woocommerce-bacs-bank-details,
.light .ordbody > p:first-child{background:#fff;border-color:rgba(5,29,65,.1)}

/* The itemised table, matching the checkout review it mirrors. */
.woocommerce-table--order-details{width:100%;border-collapse:collapse;
  font-size:var(--fs-sm)}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td{padding:12px 0;text-align:left;font-weight:400;
  border-bottom:1px solid var(--hair);vertical-align:top}
.light .woocommerce-table--order-details th,
.light .woocommerce-table--order-details td{border-bottom-color:rgba(5,29,65,.1)}
.woocommerce-table--order-details thead th{font-size:var(--fs-xs);font-weight:600;
  color:var(--text-dim);letter-spacing:.02em}
.light .woocommerce-table--order-details thead th{color:var(--ink-mute)}
.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-table--order-details th:last-child,
.woocommerce-table--order-details td:last-child{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.woocommerce-table--order-details .woocommerce-table__product-name a{color:var(--head);
  font-weight:600}
.light .woocommerce-table--order-details .woocommerce-table__product-name a{color:var(--navy)}
.woocommerce-table--order-details .woocommerce-table__product-name a:hover{color:var(--pink)}
.woocommerce-table--order-details .product-quantity{color:var(--text-dim);font-weight:600}
.woocommerce-table--order-details .wc-item-meta{list-style:none;margin:6px 0 0;padding:0;
  display:grid;gap:3px;font-size:var(--fs-xs);color:var(--text-dim)}
.light .woocommerce-table--order-details .wc-item-meta{color:var(--ink-mute)}
.woocommerce-table--order-details .wc-item-meta li{display:flex;gap:5px}
.woocommerce-table--order-details .wc-item-meta p{margin:0}
.woocommerce-table--order-details tfoot th{font-weight:500;color:var(--text)}
.light .woocommerce-table--order-details tfoot th{color:var(--ink-soft)}
.woocommerce-table--order-details tfoot td{color:var(--head);font-weight:600}
.light .woocommerce-table--order-details tfoot td{color:var(--navy)}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0;padding-top:15px;
  font-size:var(--fs-lg);font-weight:700}

/* Where it is going and who it is billed to. */
.woocommerce-customer-details .woocommerce-columns{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,2.4vw,36px);
  margin:0}
.woocommerce-customer-details .woocommerce-column__title{font-size:var(--fs-md);
  margin:0 0 10px}
.woocommerce-customer-details address{font-style:normal;font-size:var(--fs-sm);
  line-height:1.7;color:var(--text)}
.light .woocommerce-customer-details address{color:var(--ink-soft)}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email{display:block;
  margin:8px 0 0;font-size:var(--fs-sm);color:var(--text-dim)}
.light .woocommerce-customer-details .woocommerce-customer-details--phone,
.light .woocommerce-customer-details .woocommerce-customer-details--email{color:var(--ink-mute)}

.ordactions{margin-top:28px;justify-content:center}

/* The total is the row that matters, so it is the one that is set large.
   Payment method and actions follow it and read as footnotes. */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0}
.woocommerce-table--order-details tfoot .ordrow th,
.woocommerce-table--order-details tfoot .ordrow td{font-size:var(--fs-sm);font-weight:500}
.woocommerce-table--order-details tfoot .ordrow--order-total th,
.woocommerce-table--order-details tfoot .ordrow--order-total td{padding-top:15px;
  font-size:var(--fs-lg);font-weight:700}
.woocommerce-table--order-details tfoot .ordrow--payment-method td,
.woocommerce-table--order-details tfoot .ordrow--note td{font-weight:600;
  white-space:normal}
.woocommerce-table--order-details tfoot .ordrow--actions td{white-space:normal}
.woocommerce-table--order-details tfoot .ordrow--actions .btn{margin-left:8px}

/* The code field takes the space it needs, not all of it, so Apply stays on
   its line and Update Basket sits beside the pair. */
.coupon .input-text{flex:0 1 200px}
.cart-lines .coupon{margin:0}
.cart-lines .coupon + .btn,
.cart-lines .coupon ~ button[name=update_cart]{margin-left:auto}

/* The basket's narrow column cannot hold a label, a field and two buttons on
   one line. The placeholder already says what the field is, so the label goes
   to the screen reader only and the update control takes the line below. */
.cart-lines .coupon label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cart-lines .coupon{flex:1 1 100%;margin:0}
.cart-lines .coupon .input-text{flex:1 1 auto}
.cart-lines .actions{align-items:center}
.cart-lines .actions > [name=update_cart]{margin-left:auto}

/* ---------- the order pages on a phone ----------
   Both grids drop to one column below their breakpoint, and a plain 1fr
   track is minmax(auto,1fr): it refuses to go narrower than its content's
   min-content width, which for a 600px-wide line table is the whole table.
   That is what pushed the basket off the side of the screen. */
.cart-grid > *,
.checkout-grid > *,
.pdp-grid > *{min-width:0}

/* And rather than leaving a line table to scroll sideways on a phone, each
   line becomes a block. WooCommerce already labels every cell with the
   column it came from, which is exactly what this needs. */
@media (max-width:780px){
  .cartpage .ptable-wrap{overflow-x:visible}
  .cartpage .ptable{min-width:0}
  .cartpage .ptable thead{display:none}
  .cartpage .ptable,
  .cartpage .ptable tbody,
  .cartpage .ptable tr,
  .cartpage .ptable td{display:block;width:auto}
  .cartpage .ptable tbody tr{position:relative;padding:16px 15px 14px;
    border-bottom:1px solid var(--hair)}
  .cartpage .ptable tbody tr:hover{background:none}
  .cartpage .ptable td{display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:5px 0;border:0;white-space:normal;text-align:right}
  .cartpage .ptable td::before{content:attr(data-title);flex:none;
    font-size:var(--fs-xs);font-weight:500;color:var(--text-dim);text-align:left}
  .light .cartpage .ptable td::before{color:var(--ink-mute)}
  .cartpage .ptable td.product-name{display:block;min-width:0;padding:0 34px 8px 0;
    text-align:left}
  .cartpage .ptable td.product-name::before{display:none}
  .cartpage .ptable td.product-remove{position:absolute;top:14px;right:13px;
    padding:0;width:auto}
  .cartpage .ptable td.product-remove::before{display:none}
  .cartpage .ptable td.product-quantity .qty{margin-left:auto}
  .cartpage .ptable tr.actions{display:block;padding:16px 15px}
  .cartpage .ptable tr.actions td{display:block;padding:0;text-align:left}
  .cartpage .ptable tr.actions td::before{display:none}
  .cartpage .ptable td.product-name{min-width:0}
}

/* ---------- the checkout's own column ----------
   Billing in one half and a checkbox in the other left the fields squeezed
   into half the width with an empty column beside them. The blocks stack,
   and the fields pair up inside the full width instead. */
.checkout-cols{grid-template-columns:1fr}

/* The stacked grid already puts its row gap above this block; a margin on top
   of that was doubling the space over the delivery checkbox while leaving it
   sitting on the heading underneath. The checkbox gets the same gap either
   side instead. */
#ship-to-different-address{margin:0 0 clamp(20px,2.4vw,36px)}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr 1fr;
  gap:16px 20px}
.woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-shipping-fields__field-wrapper > .form-row-wide{grid-column:1 / -1}
@media (max-width:640px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}
}

/* ---------- less dead space under the breadcrumb ----------
   A full section's top padding under a breadcrumb bar pushes the heading of
   every inner page most of the way down the screen. */
.crumb + section.sect--tight,
.crumb + div > section.sect--tight,
.crumb + .woocommerce > section.sect--tight{padding-top:clamp(28px,3vw,44px)}
.crumb + section.sect,
.crumb + div > section.sect{padding-top:clamp(34px,4vw,56px)}

/* The footer's payment row is flex:0 0 auto, so on a phone it kept its full
   content width and pushed every page 24px sideways. It wraps there already;
   it just needed permission to be narrower than its contents. */
@media (max-width:560px){
  .foot-bar .pay{flex:1 1 100%;min-width:0}
  .foot-bar .pay ul{min-width:0}
}

/* WooCommerce prints these two with its own bare .button class, and they are
   the only controls on these pages the theme does not render itself. */
.checkout_coupon .button,
.shipping-calculator-form .button{display:inline-flex;align-items:center;
  justify-content:center;gap:9px;padding:13px 24px;border:0;border-radius:var(--pill);
  background:var(--blue);color:var(--navy);font:inherit;font-size:var(--fs-sm);
  font-weight:700;cursor:pointer;transition:background .16s ease;text-decoration:none}
.checkout_coupon .button:hover,
.shipping-calculator-form .button:hover{background:var(--blue-hot);color:var(--navy)}

/* ---------- one order, in the account ----------
   The three facts WooCommerce states as a sentence with highlighter-yellow
   <mark> tags in it. Here they are a header strip, with the same status pill
   the orders list uses. */
.ordstate{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 24px;padding:16px 20px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--hair)}
.light .ordstate{background:#fff;border-color:rgba(5,29,65,.1)}
.ordstate-main{display:grid;gap:3px;min-width:0}
.ordstate-no{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--head);
  letter-spacing:-.02em}
.light .ordstate-no{color:var(--navy)}
.ordstate-when{margin:0;font-size:var(--fs-sm);color:var(--text-dim)}
.light .ordstate-when{color:var(--ink-mute)}
.ordstate .pstatus{flex:none}

/* A plugin that rewrites the sentence still gets printed, so its <mark> tags
   need somewhere to go other than the browser default. */
.ordstate--plain{display:block;font-size:var(--fs-base);color:var(--text)}
.light .ordstate--plain{color:var(--ink-soft)}
.ordstate--plain mark{background:none;color:var(--head);font-weight:600}
.light .ordstate--plain mark{color:var(--navy)}

/* The orders list calls its pill .ostat; it is the same thing. */
.ostat{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);
  padding:4px 11px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
  background:rgba(94,114,145,.14);color:var(--text)}
.ostat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ostat.ok,.pstatus.ok{background:rgba(18,169,122,.12);color:var(--green-deep)}
.ostat.go,.pstatus.go{background:rgba(15,109,156,.12);color:var(--blue-deep)}
.ostat.wait,.pstatus.wait{background:rgba(234,160,0,.16);color:#8a5d00}
.ostat.stop,.pstatus.stop{background:rgba(211,0,126,.1);color:var(--pink)}

.ordupdates{margin:28px 0 0}
.ordupdates h2{font-size:var(--fs-lg);color:var(--head);margin:0 0 16px}
.light .ordupdates h2{color:var(--navy)}
.woocommerce-OrderUpdates{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.woocommerce-OrderUpdate{padding:16px 20px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--hair)}
.light .woocommerce-OrderUpdate{background:#fff;border-color:rgba(5,29,65,.1)}
.woocommerce-OrderUpdate-meta{margin:0 0 6px;font-size:var(--fs-xs);color:var(--text-dim)}
.light .woocommerce-OrderUpdate-meta{color:var(--ink-mute)}
.woocommerce-OrderUpdate-description p{margin:0;font-size:var(--fs-sm);line-height:1.65}

/* ---------- notices keep to the page's measure ----------
   WooCommerce prints this wrapper as a direct child of <main> on the product,
   shop and account pages, so a confirmation drew a band right across the
   screen. Inside a container that already has the gutters, it stands down. */
.woocommerce-notices-wrapper{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut)}
.wrap .woocommerce-notices-wrapper,
.checkoutpage .woocommerce-notices-wrapper,
.cartpage .woocommerce-notices-wrapper{max-width:none;padding-inline:0}

/* The basket's line table is a card of the same kind as the summary beside
   it, rather than an outline on the page background. */
.light.cartpage .ptable-wrap{background:#fff;border-color:rgba(5,29,65,.1);
  border-radius:var(--r)}
.light.cartpage .ptable thead th{background:transparent;
  border-bottom:1px solid rgba(5,29,65,.1)}
.cartpage .ptable thead th{background:transparent;
  border-bottom:1px solid var(--hair)}
.cartpage .ptable tbody tr:hover{background:transparent}
.cartpage .ptable thead th:first-child{padding-left:18px}
.cartpage .ptable thead th:last-child{padding-right:18px}
.cartpage .ptable tbody td:first-child{padding-left:18px}
.cartpage .ptable tbody td:last-child{padding-right:18px}
.cartpage .ptable tr.actions td{padding-left:18px;padding-right:18px}

/* The basket's remove control is the same bin as the trade tables use. It
   was borrowing the drawer's, which is absolutely positioned and only shows
   on hover — in a table row that put a ghost bin wherever the nearest
   positioned ancestor happened to be. */
.cartpage .ptable td.product-remove{width:1%;white-space:nowrap}
.cartpage .ptable td.product-remove .remove{margin-left:auto}

/* The product page's notice strip.
   .pdp puts the section's padding on .wrap rather than on the section, so a
   second .wrap for the notices collected a whole band of it — 106px of empty
   page above the product whether or not there was anything to say. It carries
   none of its own, and takes a little space above only when a notice is there;
   the grid's own padding below it does the rest. */
.pdp .wrap.pdp-top{padding-block:0}
.pdp .wrap.pdp-top:has(.pnotice){padding-top:clamp(18px,2vw,26px)}

/* Phone is not an address field, so it is outside the locale data that pairs
   the rest, and WooCommerce builds it wide whatever the field filter says.
   It sits beside the postcode by id, which nothing downstream rewrites. */
#billing_phone_field,
#shipping_phone_field{grid-column:span 1}
@media (max-width:640px){
  #billing_phone_field,
  #shipping_phone_field{grid-column:1 / -1}
}

/* ---------- a payment method and its description are one thing ----------
   WooCommerce prints the label and its explanation as two boxes, which met
   edge to edge with a 2px seam between them. Where a method has something to
   say, the two join into a single card; where it has not, the label keeps its
   own shape. */
.wc_payment_method:has(> .payment_box) > input:checked + label{
  border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom-color:transparent;padding-bottom:12px}
.wc_payment_method > input:checked ~ .payment_box{
  margin:0;padding:0 16px 15px;border:1px solid var(--blue);border-top:0;
  border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--muted-up)}
.light .wc_payment_method > input:checked ~ .payment_box{
  border-color:var(--blue-deep);background:rgba(178,223,241,.22);
  color:var(--ink-soft)}
.wc_payment_method > input:checked ~ .payment_box > p:first-child{margin-top:0}

/* ---------- the basket's update control ----------
   On the right of its row, and only blue once a quantity has actually
   changed — until then there is nothing for it to do. */
.cart-lines .actions{align-items:center;row-gap:14px}
.cart-lines .actions > .cart-update{margin-left:auto}
.cart-update:disabled{background:var(--muted-up);color:var(--text-dim);
  cursor:not-allowed}
.light .cart-update:disabled{background:rgba(5,29,65,.06);color:var(--ink-mute)}
.cart-update:disabled:hover{background:var(--muted-up)}
.light .cart-update:disabled:hover{background:rgba(5,29,65,.06)}

/* The update control sits at the end of its row. The design's own rule for
   buttons in this cell sets a 10px left margin, which is more specific than
   a class on the button alone. */
.cartpage .ptable .actions > .cart-update{margin-left:auto}

/* The account's order table is a card like the panels around it, not an
   outline on the page background. */
.light .woocommerce-MyAccount-content .ptable-wrap{background:#fff;
  border-color:rgba(5,29,65,.1)}
.woocommerce-MyAccount-content .ptable-wrap{background:var(--panel)}
.light .woocommerce-MyAccount-content .ptable thead th{background:transparent;
  border-bottom:1px solid rgba(5,29,65,.1)}
.woocommerce-MyAccount-content .ptable thead th{background:transparent;
  border-bottom:1px solid var(--hair)}
.woocommerce-MyAccount-content .ptable tbody tr:hover{background:transparent}
.woocommerce-MyAccount-content .ptable thead th:first-child,
.woocommerce-MyAccount-content .ptable tbody td:first-child{padding-left:18px}
.woocommerce-MyAccount-content .ptable thead th:last-child,
.woocommerce-MyAccount-content .ptable tbody td:last-child{padding-right:18px}

/* The chosen variation's price goes into the slot above the fields, so
   WooCommerce's own copy underneath them would be the same figure twice. */
.woocommerce-variation-price{display:none}

/* The trade bar is a line of its own under the price, not a chip beside it. */
.price .tradepromo{flex:1 1 100%}

/* ---------- the price sits in the same place on every card ----------
   The design pushes .price to the bottom of the card body, so a block with
   less in it — a quoted line has no trade bar — floats lower than the priced
   cards beside it. The button is what should be pinned to the bottom; the
   price follows the stock line, and all three line up. */
.pcard .price{margin-top:0}
.pcard .pfoot{margin-top:auto;padding-top:14px}

/* ---------- a result set with nothing in it ----------
   Floating in the middle of the grid column it reads as a gap in the page.
   In a card it reads as an answer. */
.empty--card{background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px)}
.light .empty--card{background:#fff;border-color:rgba(5,29,65,.1)}

/* The promotion code and the update control share a line, with the control
   at the end of it. The flex row lives on the wrapper inside the cell, not on
   the cell itself. */
.cartpage .ptable td.actions{display:table-cell}
.cart-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cart-actions .coupon{flex:0 1 auto;margin:0}
.cart-actions .coupon .input-text{flex:0 1 240px}
.cart-actions > .cart-update{margin-left:auto}

/* ---------- the "updating" veil ----------
   WooCommerce's blockUI gives its overlay an inline z-index of 1000, which is
   above everything this theme owns — so while the totals refreshed it was
   drawn over the sticky header as well. It sits under the header instead, and
   takes the shop's own colour rather than blockUI's grey. */
.blockUI.blockOverlay,
.blockUI.blockMsg{z-index:60 !important}
.blockUI.blockOverlay{background:var(--paper,#f3f8fc) !important;opacity:.72 !important}
.light .blockUI.blockOverlay{background:#f3f8fc !important}

/* ---------- the page header band ----------
   The lead sat straight on the baseline of the heading above it, and the
   section after the band opened with a full section's padding on top of a
   band that already had space of its own. */
.cathead .lead{margin-top:14px}
.cathead + section.sect--tight,
.cathead + section.sect{padding-top:clamp(34px,4vw,56px)}

/* WooCommerce's float clearers and its order-attribution element carry no
   content, but in a grid or flex form they become items and draw a small
   empty box between the fields. */
.woocommerce-form .clear,
.woocommerce-account-fields .clear,
.checkout .clear,
.signin-card .clear{display:none}
wc-order-attribution-inputs{display:none}
.woocommerce-privacy-policy-text:empty{display:none}

/* ============================================================
   SIGNING IN, AND CREATING AN ACCOUNT
   WooCommerce prints three forms here — the checkout's inline login, the
   create-account toggle under the billing fields, and the register form on
   the account page — and styles none of them. These give them the shop's.
   ============================================================ */

/* ---------- the checkout's returning-customer form ---------- */
.checkoutpage .woocommerce-form-login{display:grid;grid-template-columns:1fr 1fr;
  gap:16px 20px;margin:0 0 22px;padding:clamp(20px,2.4vw,30px);
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r)}
.light .checkoutpage .woocommerce-form-login{background:#fff;
  border-color:rgba(5,29,65,.1)}
.checkoutpage .woocommerce-form-login > p:first-child{grid-column:1 / -1;margin:0;
  font-size:var(--fs-sm);color:var(--text-dim);line-height:1.6}
.light .checkoutpage .woocommerce-form-login > p:first-child{color:var(--ink-mute)}
.checkoutpage .woocommerce-form-login .form-row{float:none;width:auto;margin:0}
.checkoutpage .woocommerce-form-login .form-row-first,
.checkoutpage .woocommerce-form-login .form-row-last{width:auto}
.checkoutpage .woocommerce-form-login > .form-row:not(.form-row-first):not(.form-row-last){
  grid-column:1 / -1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.checkoutpage .woocommerce-form-login .lost_password{grid-column:1 / -1;margin:0;
  font-size:var(--fs-sm)}
.checkoutpage .woocommerce-form-login .lost_password a{color:var(--pink);
  font-weight:600;border-bottom:1px solid transparent}
.checkoutpage .woocommerce-form-login .lost_password a:hover{border-bottom-color:var(--pink)}
@media (max-width:640px){
  .checkoutpage .woocommerce-form-login{grid-template-columns:1fr}
}

/* Remember me, and the buttons WooCommerce leaves bare. */
.woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:10px;
  margin:0;font-size:var(--fs-sm);color:var(--text);cursor:pointer}
.light .woocommerce-form-login__rememberme{color:var(--ink-soft)}
.woocommerce-form-login__submit:not(.btn),
.woocommerce-form-register__submit:not(.btn){display:inline-flex;align-items:center;
  justify-content:center;gap:9px;padding:13px 26px;border:0;border-radius:var(--pill);
  background:var(--blue);color:var(--navy);font:inherit;font-size:var(--fs-sm);
  font-weight:700;cursor:pointer;transition:background .16s ease}
.woocommerce-form-login__submit:not(.btn):hover,
.woocommerce-form-register__submit:not(.btn):hover{background:var(--blue-hot)}

/* ---------- create an account, under the billing fields ----------
   The same control as "Deliver to a different address?", because it asks the
   same kind of question in the same place. */
.woocommerce-account-fields{margin:clamp(20px,2.4vw,30px) 0 0}
.woocommerce-account-fields .create-account > label,
.woocommerce-account-fields > .create-account > label{display:flex;align-items:center;
  gap:10px;margin:0;font-size:var(--fs-md);font-weight:600;color:var(--head);
  cursor:pointer}
.light .woocommerce-account-fields .create-account > label{color:var(--navy)}
.woocommerce-account-fields > p.create-account{margin:0}
.woocommerce-account-fields > div.create-account{margin-top:16px;display:grid;gap:16px}
.woocommerce-account-fields + #ship-to-different-address{margin-top:clamp(20px,2.4vw,30px)}

/* ---------- the account page's register form ---------- */
.signin-aside .woocommerce-form-register{display:grid;grid-template-columns:1fr 1fr;
  gap:16px 20px}
.signin-aside .woocommerce-form-register > .form-row{float:none;width:auto;margin:0}
.signin-aside .woocommerce-form-register > .cfield:not(.form-row-first):not(.form-row-last),
.signin-aside .woocommerce-form-register > .woocommerce-privacy-policy-text,
.signin-aside .woocommerce-form-register > button{grid-column:1 / -1}
.signin-aside .woocommerce-form-register .cfield{margin-bottom:0}
@media (max-width:640px){
  .signin-aside .woocommerce-form-register{grid-template-columns:1fr}
}

/* ---------- show the password ----------
   WooCommerce's script wraps a password field and drops a bare <button> after
   it, relying on its own stylesheet for the eye. Without that the button is a
   16x6 grey stub floating under the field. It becomes the control it is,
   inside the field where it belongs. */
.password-input{position:relative;display:block}
.password-input > .input-text{width:100%;padding-right:46px}
.show-password-input{position:absolute;top:50%;right:8px;transform:translateY(-50%);
  display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;
  border-radius:50%;background:transparent;cursor:pointer;opacity:.6;
  transition:opacity .16s ease,background .16s ease}
.show-password-input:hover{opacity:1;background:rgba(5,29,65,.06)}
.show-password-input:focus-visible{outline:2px solid var(--blue-deep);outline-offset:0}
.show-password-input::after{content:"";width:19px;height:19px;background-color:currentColor;
  -webkit-mask:var(--eye) center / 19px no-repeat;mask:var(--eye) center / 19px no-repeat}
.show-password-input{--eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  color:var(--text-dim)}
.light .show-password-input{color:var(--ink-mute)}
.show-password-input.display-password{--eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='m4 20 16-16'/%3E%3C/svg%3E");
  opacity:1}