/* Coldex Kitchen - foundation.
 *
 * Direction: industrial and bold. Heavy machinery sold to people who run
 * kitchens for a living, so the page should feel built rather than decorated -
 * deep navy grounds, steel-tinted neutrals, one amber accent used sparingly,
 * and type that carries weight.
 *
 * Palette sampled from the client's own logo:
 *   navy #20437D · ink #0F2242 · orange #EF9321 · cyan #119BD3 · yellow #FDC20E
 */

/* ---------- Poppins, self-hosted (38 KB for five weights) ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/poppins-800.woff2) format('woff2')}

:root{
  /* brand */
  --navy:#20437D;
  --navy-dark:#17305C;
  --ink:#0F2242;
  --ink-deep:#0A1730;
  --orange:#EF9321;
  --orange-dark:#D9821A;
  --amber:#FDC20E;
  --cyan:#119BD3;

  /* neutrals, biased a few degrees toward the navy so nothing reads as dead grey */
  --body:#4A5B75;
  --muted:#7185A0;
  /* Same hue as --muted, dark enough to clear 4.5:1 on both white and --paper
     (5.17 and 4.85). For secondary text that still has to be read rather than
     merely noticed - a price, a tax line, a legal note. --muted stays as it is;
     this is the one to reach for when the words carry money or meaning. */
  --muted-strong:#5B6E8E;
  --line:#DDE4EF;
  --line-strong:#C4D0E1;
  --tint:#EAF0FA;
  --paper:#F5F8FC;
  --white:#fff;

  --wrap:1280px;
  --radius:10px;
  --radius-lg:16px;

  /* Layered rather than a single blur - gives cards a sense of weight. */
  --shadow-sm:0 1px 2px rgba(15,34,66,.06);
  --shadow:0 1px 2px rgba(15,34,66,.05), 0 8px 24px rgba(15,34,66,.07);
  --shadow-lg:0 2px 4px rgba(15,34,66,.06), 0 18px 44px rgba(15,34,66,.13);

  --sans:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
/* scrollbar-gutter reserves the bar's space whether or not there is one to show.
   Three things on this site lock the page by setting body{overflow:hidden} - the quote
   dialog, the image lightbox and the mobile drawer - and on a classic scrollbar (Windows
   Chrome, ~15px) that removes the bar and slides the whole page sideways as the overlay
   opens. It also stops a short page sitting 15px off from a long one. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}

/* The page's own scrollbar, in the site's colours. The sliders and the product-page
   thumb rail already style theirs, so the browser default was the one piece of chrome
   left looking like it belonged to a different site.
   scrollbar-color is the standards property (Firefox, and Chrome 121+); the -webkit
   rules below cover older Chrome and Safari.

   Scoped to html, NOT written bare. A bare `::-webkit-scrollbar` applies to every
   scroller on the page, and the inner ones already have their own sizes - the product
   gallery's thumb rail is a 5px bar, and the 3px inset border below would have been
   thicker than the bar itself. */
html{scrollbar-color:var(--line-strong) var(--paper);scrollbar-width:thin}
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:var(--paper)}
html::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;
  /* A transparent border with background-clip is what gives the thumb its inset -
     padding does nothing on a scrollbar part. */
  border:3px solid var(--paper);background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}

/* One number for "how far down an anchor has to start". The header is sticky and 126px
   tall (97px on a phone), so anything less than that lands the target underneath it -
   which is exactly what the per-component values did: the product tabs used 110px and
   the blog headings 96px, and both were hidden by the header they were meant to clear.
   Everything that needs it now reads --anchor-top, so there is one number to change if
   the header ever grows. */
:root{--anchor-top:140px}
@media (max-width:860px){ :root{--anchor-top:110px} }
:target{scroll-margin-top:var(--anchor-top)}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--orange)}

h1,h2,h3,h4,h3.as-h2{color:var(--ink);margin:0 0 .5em;line-height:1.12;font-weight:700;
  letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,52px);font-weight:800}
h2,h3.as-h2{font-size:clamp(24px,3vw,38px)}
h3{font-size:20px;letter-spacing:-.01em}
h4{font-size:16px;letter-spacing:0}
p{margin:0 0 1em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--white);padding:10px 16px;z-index:99;border-radius:6px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Uppercase micro-label used above headings throughout the site. */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);border-radius:2px}

/* ---------- buttons ---------- */
/* Sized against the product card's Add to cart, which is the button the rest were
   measured to. That one is 46px tall on .btn-sm (12px/22px at 12.5px); the base was
   61px on 17px/34px at 14px, so every button outside a card sat 15px taller than the
   one the site uses most and read as oversized for the layout around it.
   .btn-sm is deliberately left alone - it is the reference. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  /* Explicit, not `normal`. Left to inherit, a button took its line box from whatever
     container it sat in - the same .btn-sm rendered 46px inside a product card and 49px
     in the sidebar help card, because that card sets a reading line-height. A control's
     size must not depend on where it is placed. */
  line-height:1.45;
  padding:13px 26px;border-radius:4px;border:2px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),
             transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn-primary{background:var(--navy);color:var(--white);box-shadow:0 6px 18px rgba(32,67,125,.26)}
.btn-primary:hover{background:var(--ink);color:var(--white);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(32,67,125,.34)}
.btn-accent{background:var(--orange);color:var(--ink);box-shadow:0 6px 18px rgba(239,147,33,.32)}
.btn-accent:hover{background:var(--amber);color:var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--navy);color:var(--white);border-color:var(--navy);transform:translateY(-2px)}
.btn-sm{padding:12px 22px;font-size:12.5px}

/* On dark grounds the ghost button inverts. */
.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.32)}
.on-dark .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- top bar ----------
   Brand navy, same family as the category strip below the header, so the two
   dark bands read as one system instead of a near-black stripe over a blue one. */
.topbar{background:var(--navy);color:rgba(255,255,255,.78);font-size:13px}
.topbar-in{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:20px}
.topbar a{color:rgba(255,255,255,.86);display:inline-flex;align-items:center;gap:9px}
.topbar a:hover{color:#fff}

/* One weight for both, split by a hairline rule instead of one being bold -
   a bold phone next to a regular email read as an accident. */
.topbar-links{display:flex;align-items:center;flex-wrap:wrap}
.topbar-links a{font-weight:500;letter-spacing:.01em;padding:0 20px;position:relative}
.topbar-links a:first-child{padding-left:0}
.topbar-links a + a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:rgba(255,255,255,.22);
}
.topbar-links i{font-size:12.5px;opacity:.6;transition:opacity .18s var(--ease)}
.topbar-links a:hover i{opacity:1;color:var(--amber)}

/* Filled by default, outline on hover. The border is always present but
   transparent at rest, so switching to the outline state cannot nudge the row. */
.topbar-social{display:flex;align-items:center;gap:7px;flex:none}
/* --orange, and --amber on hover: the same pair the "Kitchen Equipments" trigger uses.
   These were on --amber (#FDC20E) while the trigger sits on --orange (#EF9321), so the
   two accents in the header were a visibly different colour from each other. */
.topbar-social a{
  width:30px;height:30px;justify-content:center;border-radius:7px;
  background:var(--orange);color:var(--ink);border:1.5px solid transparent;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.topbar-social a:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.topbar-social i{font-size:14px;line-height:1}

/* ---------- header ----------
   No bottom border: the navy category strip is the header's own edge, and a
   light rule under it read as a stray white line. */
.head{background:var(--white);position:sticky;top:0;z-index:60}
/* Three tracks so the search sits on the page's centre line rather than being
   pushed along by however wide the logo happens to be. */
/* The centre track is sized here, not on .hsearch - inside an `auto` column a
   percentage width resolves against a column that is itself sizing to content,
   and the box collapses well under its intended width. */
.head-in{display:grid;grid-template-columns:1fr minmax(0,520px) 1fr;align-items:center;
  gap:24px;min-height:76px}
.brand{display:flex;align-items:center;justify-self:start}
.brand-logo{height:50px;width:auto}

.hsearch{position:relative;justify-self:stretch;display:flex;align-items:stretch;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
.hsearch:focus-within{border-color:var(--navy);background:var(--white);
  box-shadow:0 0 0 3px rgba(32,67,125,.12)}
/* Search within one category - the selector every marketplace puts here. */
.hsearch-scope{
  flex:none;max-width:150px;border:0;outline:0;cursor:pointer;appearance:none;
  background:transparent;color:var(--body);border-right:1px solid var(--line);
  border-radius:7px 0 0 7px;font-family:inherit;font-size:12.5px;font-weight:600;
  padding:0 26px 0 14px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
}
.hsearch input{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:none;
  font-family:inherit;font-size:14px;color:var(--ink);padding:10px 14px;
}
.hsearch input::placeholder{color:var(--muted)}
.hsearch input::-webkit-search-cancel-button{cursor:pointer}
/* An inset pill rather than a full-height navy block - the slab made a modest
   search box look like a form from an intranet. */
.hsearch button{
  flex:none;width:36px;margin:4px;border:0;cursor:pointer;border-radius:6px;
  background:var(--navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease);
}
.hsearch button:hover{background:var(--orange);color:var(--ink)}
.hsearch button i{font-size:14px}

/* Suggestions. Sits above the mega panel (z-index 55) so a dropdown opened while
   the category menu is up is not painted behind it. */
.hsuggest{
  position:absolute;left:-2px;right:-2px;top:calc(100% + 6px);z-index:58;
  list-style:none;margin:0;padding:6px;max-height:none;
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 18px 40px rgba(15,34,66,.16);
}
.hsuggest[hidden]{display:none}
.hsuggest a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:6px;
  color:var(--body)}
.hsuggest li.is-active a,.hsuggest a:hover{background:var(--paper);color:var(--navy)}
.hsuggest img{width:40px;height:40px;flex:none;object-fit:contain;background:var(--white);
  border:1px solid var(--line);border-radius:5px;padding:2px;mix-blend-mode:multiply}
.hsuggest b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.hsuggest small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.hsuggest-all{display:block;text-align:center;padding:9px;margin-top:4px;
  border-top:1px solid var(--line);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}

/* Row two: the category strip. Navy so the header has a base to sit on and the
   whole thing reads as one solid block. */
.catbar{background:var(--navy);color:rgba(255,255,255,.86)}
.catbar-in{display:flex;align-items:stretch;min-height:50px}

/* Left-aligned. No negative margin: the wrap's padding already puts the trigger
   on the same vertical line as the logo above it. */
.mainnav{display:flex;align-items:stretch}
.navitem{display:flex}
.navlink{
  display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.03em;
  color:rgba(255,255,255,.86);padding:0 22px;position:relative;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease);
}
/* Hairline between the plain links only - the orange block already separates
   itself, and a rule butted against it read as a seam. */
.mainnav > a.navlink + a.navlink::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:rgba(255,255,255,.22);
}
.navlink:hover,.navlink.is-on{background:rgba(255,255,255,.1);color:#fff}
/* Current page gets a bar on the strip's bottom edge, so you can tell where you
   are without relying on a background tint alone. */
.mainnav > a.navlink::after{
  content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.mainnav > a.navlink.is-on::after{transform:scaleX(1)}

/* The category trigger is the primary action on this strip. */
.has-mega .navlink-btn{background:var(--orange);color:var(--ink);font-weight:700;
  padding:0 26px 0 28px;letter-spacing:.02em}
.has-mega .navlink-btn:hover,.has-mega.is-open .navlink-btn{background:var(--amber);color:var(--ink)}
.grid-ic{font-size:14px}
.caret{font-size:12px;transition:transform .22s var(--ease)}
.has-mega.is-open .caret{transform:rotate(180deg)}

/* ---------- mega menu ----------
   Every category lives here, so nothing is duplicated in the bar and there is
   one obvious place to look.

   Constrained to the same 1280px container as the top bar, header and strip -
   running edge to edge made it the one element in the header that ignored the
   grid. left/right:0 plus auto inline margins centre it without a transform,
   which matters: a transform would promote the panel to its own compositing
   layer and it would lose the paint order against the hero below. */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;margin-inline:auto;
  /* The wrap's 28px gutters are subtracted so the card's edge lands on the same
     line as the logo and the orange trigger, not 28px outside them. */
  width:min(calc(var(--wrap) - 56px),calc(100% - 56px));
  top:100%;background:var(--paper);
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow:hidden;                     /* keeps children inside the rounded corners */
  box-shadow:0 24px 48px rgba(15,34,66,.14);z-index:55;
}
/* No open animation here on purpose. A transform/opacity keyframe promotes the
   panel to its own compositing layer, and the hero image below it is already
   composited by its drop-shadow filter - the two ended up in the wrong order and
   the hero showed straight through the panel. */
/* The panel carries no accent rule of its own - the active nav link's orange bar
   sits directly above it, and two orange elements competed. The tint plus the
   drop shadow already separate it from the page. */
.mega[hidden]{display:none}
.mega-in{display:grid;grid-template-columns:1fr 300px;gap:40px;padding-top:30px;padding-bottom:34px}

.mega-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.mega-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0}
.mega-all{display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
.mega-all i{font-size:13px;transition:transform .2s var(--ease)}
.mega-all:hover{color:var(--orange)}
.mega-all:hover i{transform:translateX(4px)}

.mega-cats ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px}
/* Scoped to the list: .mega-all is a sibling, and an unscoped `.mega-cats a`
   outranks it on specificity and would stretch it to the full column width. */
.mega-cats ul a{
  display:flex;align-items:center;gap:13px;padding:8px 10px;border-radius:8px;
  border:1px solid transparent;color:var(--body);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.mega-cats ul a:hover{background:var(--white);border-color:var(--line);
  box-shadow:0 6px 16px rgba(15,34,66,.07)}

/* The photos are cut-outs on white, so the tile stays white and multiply drops
   the last of the background out. */
.mega-thumb{
  width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line);border-radius:7px;padding:3px;
  transition:border-color .18s var(--ease);
}
.mega-cats ul a:hover .mega-thumb{background:var(--white);border-color:var(--line-strong)}
.mega-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mega-thumb-ph{font-size:19px;color:var(--muted);opacity:.45}

.mega-cat-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-cat-txt b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.mega-cats ul a:hover .mega-cat-txt b{color:var(--navy)}
.mega-cat-txt em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}

/* The card is the only thing in this column now, so it fills it and the two
   halves of the panel match in height. The old border-left divider went with the
   featured product - on its own it ran the full height past a short card and
   left the column looking unfinished. */
.mega-side{display:flex;flex-direction:column;align-items:stretch}
.mega-help{position:relative;overflow:hidden;background:var(--ink);border-radius:var(--radius);
  padding:26px;color:rgba(255,255,255,.72);
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
/* Same warm glow the dark sections use, so the card reads as part of the brand. */
.mega-help::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(239,147,33,.28),transparent 70%)}
.mega-help > *{position:relative}
.mega-help strong{display:block;color:#fff;font-size:15.5px;margin-bottom:6px}
.mega-help p{font-size:13.5px;line-height:1.6;margin:0 0 16px}

/* ---------- icon actions ---------- */
.head-actions{display:flex;align-items:center;gap:10px;justify-self:end}
/* Navy discs with white glyphs. White on the brand orange is about 2:1 and
   unreadable; on navy it is 8.6:1, so the icons can actually be white. */
.iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--navy);color:#fff;
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.iconbtn:hover{background:var(--ink);color:#fff;transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(32,67,125,.32)}
/* :not(.cart-n) because `.iconbtn > i` is class+type and would otherwise beat
   the badge's own font-size, blowing it up to the glyph size. */
.iconbtn > i:not(.cart-n){font-size:17px;line-height:1}
/* Tucked to the disc's top-right corner rather than floating off it. The white
   ring is what separates the orange from the navy underneath; without it the two
   saturated colours vibrate against each other. Ink on orange, not white - white
   on #EF9321 is about 2:1 and a 10px numeral disappears. */
.cart-n{
  position:absolute;top:-4px;right:-4px;display:inline-flex;align-items:center;justify-content:center;
  /* Tight horizontal padding so a single digit stays a true circle; two digits
     push it out into a pill on their own. */
  min-width:17px;height:17px;padding:0 2px;border-radius:100px;background:var(--orange);
  color:var(--ink);font-size:10px;font-weight:800;font-style:normal;line-height:1;
  font-variant-numeric:tabular-nums;border:2px solid var(--white);
}

/* ---------- signed-in account menu ----------
   The signed-out control is a 42px navy circle. Signed in, the same control grows into a
   pill carrying the first name, because the whole point is that the two states must not
   look alike. Everything else about it - navy ground, white mark, the hover lift - is
   inherited from .iconbtn so the two sit as one family beside the cart. */
.hacct{position:relative}
.hacct-btn{
  width:auto;padding:0 14px 0 12px;gap:8px;border-radius:100px;
  cursor:pointer;list-style:none;      /* Safari and Firefox each draw their own marker */
}
.hacct-btn::-webkit-details-marker{display:none}
.hacct-btn::marker{content:""}
/* 14ch, measured rather than guessed. Only the first name is ever shown, and Indian first
   names run long - Priyadarshini is 13, Chandrashekhar 14 - so a tighter cap turns ordinary
   names into "Chandrash...". The header has far more room than it looks: at 990px, the
   narrowest width where the name is still on screen, nothing gives until the pill reaches
   320px, and 14ch caps it at about 190px against a 520px search box. Past that the ellipsis
   takes over, which is the right outcome for a name nobody could read at a glance anyway -
   and the dropdown underneath always spells it out in full. */
.hacct-name{font-size:14px;font-weight:700;line-height:1;white-space:nowrap;max-width:14ch;
  overflow:hidden;text-overflow:ellipsis}
.hacct-caret{font-size:10px;opacity:.8;transition:transform .2s var(--ease)}
.hacct[open] .hacct-caret{transform:rotate(180deg)}
/* The pill must not lift on hover the way the circles do - it is wider, so the same 2px
   rise reads as the whole header wobbling. */
.hacct-btn:hover{transform:none;box-shadow:none;background:var(--ink)}
.hacct-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.hacct-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  min-width:230px;padding:6px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
/* The panel is drawn by [open], so it needs no [hidden] guard - but it DOES need a stop
   against the arrow key opening it while the pill is off screen on a phone. */
/* --body, not --muted. --muted on 12px text measures 3.77:1 on white, under AA, and this
   file has already been caught doing it four times. Measured here at 6.90:1. */
.hacct-who{margin:0;padding:10px 12px 12px;font-size:12px;line-height:1.5;color:var(--body);
  border-bottom:1px solid var(--line)}
.hacct-who strong{display:block;margin-top:2px;font-size:14px;color:var(--ink)}
.hacct-menu a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;
  color:var(--body);text-decoration:none}
.hacct-menu a:hover,.hacct-menu a:focus-visible{background:var(--tint);color:var(--ink)}
.hacct-menu a:first-of-type{margin-top:6px}
.hacct-out{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 7px 7px;
  padding-top:12px !important;color:#96271B !important;font-weight:600}
.hacct-out:hover,.hacct-out:focus-visible{background:#FDEDEB !important;color:#7A1C13 !important}

@media (prefers-reduced-motion:reduce){
  .hacct-caret{transition:none}
}
/* Below the header's own breakpoint the pill collapses back to a circle: the name would
   crowd the search box, and the mobile drawer already names the account. The menu itself
   stays, so signing out never needs a trip to the account page. */
@media (max-width:980px){
  .hacct-btn{width:42px;padding:0;gap:0}
  .hacct-name,.hacct-caret{display:none}
}

/* ---------- burger + scrim ---------- */
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0;color:var(--ink);font-size:20px}
.burger .burger-close{display:none}
.burger[aria-expanded="true"] .burger-open{display:none}
.burger[aria-expanded="true"] .burger-close{display:inline-block}
/* The scrim must sit above the sticky header (z-index 60) and the WhatsApp FAB,
   and the header is lifted above the scrim while the drawer is open - the drawer
   lives inside .head, so it can only clear the scrim by riding the header up. */
.nav-scrim{position:fixed;inset:0;background:rgba(10,23,48,.45);z-index:65;
  animation:scrimIn .2s var(--ease)}
.nav-scrim[hidden]{display:none}
body.nav-open .head{z-index:80}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
/* Everything the mobile drawer adds is off by default. The desktop strip and the drawer
   share one <nav>, so a piece that only makes sense in the drawer has to be hidden here
   rather than duplicated into a second markup block that would then drift. */
.nav-mobile-actions,.nav-close,
.nav-m-top,.nav-m-acct,.nav-m-eyebrow,.nav-m-foot,.nav-m-search{display:none}

/* ---------- flash ---------- */
.flash{margin:18px 0;padding:15px 20px;border-radius:var(--radius);font-size:15px;border:1px solid}
.flash-success{background:#EDF7EE;border-color:#BFE0C4;color:#245C2E}
.flash-error{background:#FCECEA;border-color:#F0C2BC;color:#8C2B21}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section-tint{background:var(--paper)}

/* The dark section is the signature of this design - used for the hero, the
   band before the footer, and anywhere the page needs to feel heavier. */
.section-dark{
  background:var(--ink);color:rgba(255,255,255,.76);position:relative;overflow:hidden;
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h3.as-h2{color:#fff}
.section-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 82% 12%, rgba(32,67,125,.55), transparent 62%),
    radial-gradient(700px 520px at 8% 92%, rgba(239,147,33,.10), transparent 60%);
}
/* Faint engineering grid - reads as texture, not decoration. */
.section-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);
  mask-image:linear-gradient(160deg,#000,transparent 70%);
}
.section-dark .wrap{position:relative;z-index:1}

.section-head{margin-bottom:44px;max-width:62ch}
.section-head p:last-child{margin-bottom:0}

/* ---------- slider ----------
   A scroll-snap track, not a JS carousel: it scrolls natively with a trackpad,
   a touch swipe or the keyboard, and every card stays in the DOM for crawlers.
   The arrows are progressive enhancement - they are hidden until JS shows them. */
/* Full container width, no reading-measure cap: at 88ch the intro left a ragged
   third line and broke "12-month" across it. */
.cat-head{max-width:none}
.cat-intro{font-size:16px;line-height:1.75;color:var(--body);margin:14px 0 0;max-width:none}
/* Keeps hyphenated pairs like "12-month" from splitting at the line end. */
.nowrap{white-space:nowrap}

/* Arrows straddle the track's left and right edges, vertically centred on the
   cards. 18px of overhang, which fits inside the wrap's 20px minimum gutter, so
   they never push the page sideways. */
.slider-nav[hidden]{display:none}
.slider-btn{
  position:absolute;top:calc(50% - 22px);z-index:2;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line-strong);color:var(--navy);font-size:14px;
  box-shadow:var(--shadow);
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),opacity .18s var(--ease);
}
.slider-prev{left:-18px}
.slider-next{right:-18px}
.slider-btn:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
/* Hidden rather than dimmed at the ends - a disabled control floating over the
   cards is just clutter. */
.slider-btn:disabled{opacity:0;pointer-events:none}

.slider{position:relative}
/* overflow-x:auto makes the vertical axis clip too, so the hover shadow was
   being sliced off by a hard horizontal edge. The track carries enough vertical
   padding for the lift and the blur, and negative margins take that space back
   out of the layout so section spacing is unchanged. */
.slider-track{
  list-style:none;margin:-12px 0 -44px;padding:12px 0 44px;
  display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{display:none}
.slider-track > li{flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start}
.slider-track .card{height:100%}
@media (prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto}}

/* Fewer per view as the viewport narrows. Below 980 the last card is left part
   in view on purpose - a half-visible card is what tells a touch user to swipe. */
@media (max-width:1180px){
  .slider-track > li{flex:0 0 calc((100% - 40px) / 3)}
}
@media (max-width:980px){
  .slider-track > li{flex:0 0 calc((100% - 26px) / 2.3)}
}
@media (max-width:640px){
  .slider-track{gap:14px}
  .slider-track > li{flex:0 0 78%}
  .cat-intro{font-size:15px}
  /* Touch swipes here, and an overlaid arrow would sit on top of a card that is
     already only 78% wide. */
  .slider-nav{display:none}
}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
  margin-bottom:40px;flex-wrap:wrap}
.head-row .section-head{margin-bottom:0}

/* ---------- category cards ---------- */
.grid{display:grid;gap:20px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
/* Softer than --shadow-lg: that one throws 44px of blur 18px down, which needs
   more room than a scrolling track can give without a visible gap. */
.card:hover{transform:translateY(-6px);border-color:var(--line-strong);
  box-shadow:0 10px 26px rgba(15,34,66,.12)}

/* The photo runs edge to edge on a tint. The old version boxed a bordered white
   well inside a white card - two borders and no contrast between them, which is
   what made the set read flat. */
.card-img{
  position:relative;display:block;background:var(--paper);
  aspect-ratio:4/3;padding:20px;overflow:hidden;border-bottom:1px solid var(--line);
}
.card-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .4s var(--ease)}
.card:hover .card-img img{transform:scale(1.07)}

/* Count sits on the photo as a chip - it is the number a shopper scans for, and
   moving it off the body leaves the name and description room to breathe. */
.card-count{
  position:absolute;left:14px;top:14px;
  background:var(--white);color:var(--navy);border:1px solid var(--line);
  border-radius:100px;padding:5px 11px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}

/* Name on the left, affordance on the right - one row, so every card is the same
   height whatever the name length, and nothing is left to wrap awkwardly. */
.card-body{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px}
.card h3{font-size:17.5px;margin:0;color:var(--ink);letter-spacing:-.015em;line-height:1.3}
.card-go{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--navy);font-size:12px;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.card:hover .card-go{background:var(--orange);color:var(--ink);transform:translateX(3px)}

/* Categories the client hasn't photographed yet keep the well so the row's
   rhythm holds, and say so rather than showing an empty frame. */
.card-noimg .card-img{display:flex;align-items:center;justify-content:center}
.card-img-soon{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- footer ----------
   No brand block and no logo - both taken out on request. Contact cards on top,
   three link columns, then a slim base row. The first pass had all of this as bare
   text on a flat ground and read as weak; the panels and the texture below are what
   give it structure. */
.foot{position:relative;background:var(--ink-deep);color:rgba(255,255,255,.62);
  padding:0;margin-top:0;overflow:hidden;
  /* A hairline of accent along the very top edge, so the footer starts on a line
     rather than a colour change. */
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,var(--orange),rgba(239,147,33,.15) 42%,transparent 72%) 1;
}
/* Same glow language as .section-dark. */
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 500px at 84% 0%, rgba(32,67,125,.5), transparent 62%),
    radial-gradient(560px 400px at 3% 4%, rgba(239,147,33,.08), transparent 66%);
}
/* The same faint grid .section-dark uses - it stops the ground reading as flat
   paint behind the type. */
.foot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);
  background-size:64px 64px;
}
.foot > *{position:relative;z-index:1}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{color:rgba(255,255,255,.62);transition:color .2s var(--ease)}
.foot a:hover{color:var(--orange)}

/* ---- contact cards ----
   Panels rather than three lots of text separated by hairlines. The address runs to
   three lines and the other two to one, so as loose text the row was mostly empty
   space; a bordered box gives each one the same footprint. */
.foot > .foot-reach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;padding-top:44px;padding-bottom:40px}
/* Centred, not top-aligned: the address runs to three lines and the other two to
   one, so with flex-start the first two cards had all their content stuck to the
   top with 40px of nothing under it. */
.foot-reach-item{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.foot-reach-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.foot-ic{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;
  background:rgba(239,147,33,.14);color:var(--orange);font-size:15px;
  transition:background .22s var(--ease),color .22s var(--ease);
}
.foot-reach-item:hover .foot-ic{background:var(--orange);color:var(--ink)}
.foot-reach-txt{min-width:0}
.foot-lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:5px}
/* overflow-wrap:anywhere, because the email is one unbreakable 288px word and the box it
   sits in is narrower than that on nearly every phone. It needs about a 432px viewport to
   fit whole - so a Moto G35 at 432 was clear and a OnePlus 11R at 413 spilled out of the
   card, along with an iPhone SE, an iPhone 14 and a Pixel. This was reported as a OnePlus
   problem; it was almost every phone, and the one wide handset hid it.

   `anywhere`, not `break-word`: break-word does not reduce the element's min-content width,
   so the grid cell still sizes itself to the full 288px and the text still overflows. Only
   `anywhere` lets the cell shrink. Same fix, same reason, as .way-val on the contact page -
   this element was simply missed at the time. */
.foot-reach-txt a{display:inline-block;font-size:15px;font-weight:700;color:#fff;
  overflow-wrap:anywhere}
.foot-reach-txt a:hover{color:var(--orange)}
.foot-addr{display:block;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6)}

/* ---- link columns ----
   Four tracks. The category list keeps two sub-columns (nine names come out 5 + 4),
   and the three short lists take one track each - with only three columns the
   category block left a wide hole across the middle of the row. */
.foot > .foot-grid{display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:40px;padding-top:42px;padding-bottom:44px;
  border-top:1px solid rgba(255,255,255,.07)}

.foot h4{color:#fff;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  margin:0 0 20px;padding-bottom:12px;position:relative}
.foot h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;
  background:var(--orange);border-radius:2px}

.foot-links li + li{margin-top:2px}
/* columns:150px 2 rather than a plain 2 - 150px is the width "Bread & Bun Toaster"
   needs on one line, so the browser drops to a single sub-column by itself wherever
   two will not fit. No breakpoint to keep in sync with the category names. */
.foot-links-2{columns:150px 2;column-gap:28px}
.foot-links-2 li{break-inside:avoid}
/* A short marker that grows on hover instead of the text sliding on its own - the
   list then has a left edge to read down. */
.foot-links a{position:relative;display:inline-block;font-size:14.5px;line-height:1.6;
  padding:5px 0 5px 0;transition:color .2s var(--ease),padding-left .22s var(--ease)}
.foot-links a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:0;height:1.5px;background:var(--orange);border-radius:2px;
  transition:width .22s var(--ease);
}
.foot-links a:hover{padding-left:16px}
.foot-links a:hover::before{width:10px}

/* ---- base row ---- */
.foot > .foot-base{display:flex;align-items:center;justify-content:space-between;
  gap:16px 26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.07);
  /* padding-block, not the padding shorthand: this element is also a .wrap, and
     `.wrap{padding:0 20px}` in the 760 block would otherwise zero the vertical
     padding, which it did until this was scoped. */
  padding-block:20px;
  font-size:13px;color:rgba(255,255,255,.48)}
/* Copyright and the build credit share the left side and the socials take the
   right, so the row reads as two blocks rather than three loose items. */
.foot-legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.foot-credit{color:rgba(255,255,255,.4)}
.foot-credit a{color:rgba(255,255,255,.6);font-weight:600}
.foot-credit a:hover{color:var(--orange)}

/* Filled by default, border-only on hover - the topbar behaves the same way. */
.foot-social{display:flex;gap:9px}
.foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;font-size:13px;
  background:rgba(255,255,255,.08);border:1px solid transparent;color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease),transform .2s var(--ease);
}
.foot-social a:hover{background:transparent;border-color:var(--orange);color:var(--orange);
  transform:translateY(-2px)}

/* Footer breakpoints live here rather than in the shared blocks below, so the whole
   component reads in one place. Values are measured, not guessed. */
@media (max-width:1080px){
  /* Three contact cards stop fitting once each is under ~300px - the address needs
     four lines below that. */
  .foot > .foot-reach{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-reach-item:last-child{grid-column:1 / -1}
}
@media (max-width:980px){
  /* Categories take a full row of their own and the three short lists sit in one
     row of three underneath - that keeps the footer short without cramping any
     column. */
  .foot > .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px;
    padding-top:38px;padding-bottom:40px}
  .foot-col-cats{grid-column:1 / -1}
}
@media (max-width:860px){
  .foot > .foot-reach{grid-template-columns:minmax(0,1fr);gap:14px;
    padding-top:36px;padding-bottom:32px}
  .foot-reach-item:last-child{grid-column:auto}
}
@media (max-width:660px){
  .foot > .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 28px}
}
@media (max-width:520px){
  .foot > .foot-base{justify-content:flex-start;gap:14px 20px}
}
@media (max-width:359px){
  /* 360, re-measured 26 Aug 2026. The old cut was 420, taken from a measurement that
     only checked 430 - it never asked how far DOWN two columns survive. They survive to
     360: at 360 the columns are 145px and not one link wraps. At 320 three do - "Create
     an Account", "Returns & Refunds", "Terms & Conditions" - so that is the real floor.

     The measurement that set 420 also had a false negative worth remembering. These links
     are block elements, so `a.getClientRects().length` returns ONE rect however the text
     inside wraps, and every width looked clean. Count line boxes with a Range over the
     text instead - `range.selectNodeContents(a).getClientRects().length`.

     Why it mattered: 420 fell between two ordinary phones. A OnePlus 11R is 413 CSS px
     and got one cramped column; a Moto G35 is 432 and got two. */
  .foot > .foot-grid{grid-template-columns:minmax(0,1fr);gap:30px}
}
/* ---------- whatsapp ---------- */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:60;background:#25D366;color:#fff;
  padding:14px 22px;border-radius:100px;font-size:14px;font-weight:600;
  box-shadow:0 10px 28px rgba(37,211,102,.42);transition:transform .2s var(--ease);
}
.wa:hover{color:#fff;transform:translateY(-3px)}

/* ---------- back to top ----------
   A navy disc with the page's scroll progress drawn round it. z-index sits under the
   product page's sticky buy bar (60), and the script lifts the button above the bar
   rather than letting the two share a corner. */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:55;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-size:15px;cursor:pointer;
  box-shadow:0 8px 24px rgba(15,34,66,.28);
  /* Hidden state lives here rather than on [hidden] alone: the button animates in, so
     it needs a from-state to animate out of. */
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .26s var(--ease), transform .26s var(--ease),
             visibility 0s linear .26s, bottom .22s var(--ease),
             background .18s var(--ease);
}
/* The attribute still has to be honoured, or the button flashes on before the script
   runs and on any page where the script never gets to it. */
.totop[hidden]{display:none}
.totop.is-in{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
  transition:opacity .3s var(--ease), transform .34s cubic-bezier(.34,1.4,.5,1),
             visibility 0s, bottom .22s var(--ease), background .18s var(--ease);
}
.totop:hover{background:var(--ink)}
.totop:hover i{transform:translateY(-2px)}
.totop:active{transform:translateY(0) scale(.94)}
.totop i{position:relative;z-index:1;transition:transform .18s var(--ease)}

/* Above the product page's sticky buy bar when that is showing. Set by the script,
   because the bar's height is not a constant the stylesheet knows. */
.totop.is-lifted{bottom:calc(22px + var(--totop-lift, 0px))}

.totop-ring{position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);pointer-events:none}
/* Geometry stays on the elements as attributes - repeating cx/cy/r here as CSS geometry
   properties would be a second source of truth for the same numbers. */
.totop-ring circle{fill:none;stroke-width:3}
.totop-ring-bg{stroke:rgba(255,255,255,.22)}
/* dasharray is the full circumference (2 * pi * 21). The script only moves the offset,
   so the ring never reflows and the browser can keep it on the compositor. */
.totop-ring-fg{stroke:var(--orange);stroke-linecap:round;
  stroke-dasharray:131.95;stroke-dashoffset:131.95;
  transition:stroke-dashoffset .12s linear}

@media (max-width:560px){
  .totop{right:14px;bottom:14px;width:44px;height:44px}
  .totop.is-lifted{bottom:calc(14px + var(--totop-lift, 0px))}
}

/* No entrance animation, no springy scale and no smooth scroll for anyone who has asked
   the system for less movement. The button still works, it just appears. */
@media (prefers-reduced-motion: reduce){
  .totop,.totop.is-in{transition:opacity .01s, visibility 0s;transform:none}
  .totop:active{transform:none}
  .totop-ring-fg{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .head-in{gap:18px}
  .navlink{padding:0 13px;font-size:12.5px}
  .mega-in{grid-template-columns:1fr 270px;gap:30px}
}
@media (max-width:1040px){
  /* Typed selector on purpose: plain `.topbar-mail` loses to `.topbar a`, which
     is a class + type and therefore more specific, so the email never hid. */
  a.topbar-mail{display:none}
  .topbar-links a:first-child{padding-left:0}
}
@media (max-width:980px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
  .section{padding:64px 0}
  /* Single column: the card sits under the tiles and stops filling height. */
  .mega-in{grid-template-columns:1fr;gap:24px}
  .mega-help{flex:0 0 auto}
}

/* ---------- mobile drawer ---------- */
@media (max-width:860px){
  /* The cart and the burger sit next to each other but were drawn from two different
     vocabularies: a solid navy 42px circle beside a bare 44px icon with no container at
     all. Side by side they read as two unrelated bits of design, which is most of why
     the header looked unfinished. Same size, same radius, same family now - the cart
     stays filled because it is the one carrying state and a badge, and the burger is its
     quieter sibling rather than a different species. */
  .burger{display:inline-flex;margin:0;width:42px;height:42px;border-radius:50%;
    background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:18px;
    transition:background .2s var(--ease),border-color .2s var(--ease)}
  .burger:hover,.burger[aria-expanded="true"]{background:var(--tint);
    border-color:var(--line-strong)}
  .brand-logo{height:44px}
  .topbar{font-size:12.5px}
  /* 32, not the 26 this used to shrink to. Three icons sitting 7px apart at 26px square
     are under the size a thumb can hit reliably, and they are the one place on the page
     where three separate targets are that close together. 32 still reads as compact and
     the row does not grow, because the phone link beside them is now the taller item. */
  .topbar-social a{width:32px;height:32px}
  .topbar-social i{font-size:13px}
  /* The phone number was a 21px-tall target - the height of the text and nothing more.
     Padding gives it a thumb-sized band without moving anything visually, since the row
     is centred and already at least this tall. */
  .topbar-links a{padding-top:8px;padding-bottom:8px}

  /* Search drops to its own full-width row under the brand, the way every phone
     storefront does it. Explicit order because the burger sits after the search
     input in the markup. */
  /* Back to flex: the drawer is position:fixed and takes no grid slot, so a
     3-track grid would put the burger and the actions in the wrong columns. */
  .head-in{display:flex;flex-wrap:wrap;gap:10px 12px;min-height:0}
  /* Written as `.head > .head-in`, and the extra class is the whole point.
     This element is also a .wrap, and `.wrap{padding:0 20px}` in the 760 block is a
     shorthand that zeroes the vertical padding. Same specificity and later in the file,
     so it wins - which is why the header had no vertical padding at all on a phone and
     sat 44px tall around a 44px logo, the two touching top and bottom.
     padding-block alone does NOT fix it; the selector has to outrank .wrap. The footer
     hit this same trap - see the note on .foot-base. */
  .head > .head-in{padding-block:11px}
  .brand{order:1;justify-self:auto}
  .head-actions{order:2;margin-left:auto;justify-self:auto}
  .burger{order:3}
  /* Search leaves the header on a phone and lives at the top of the drawer instead.
     It was taking a full third row under the brand and the burger, which made the header
     three stacked bands before any page content began. .head-in .hsearch, so this hides
     the header copy only and not the drawer's - they share the class deliberately, to
     share the suggestion script. */
  .head-in > .hsearch{display:none}
  .hsearch input{padding:10px 14px;font-size:14px;border-radius:6px 0 0 6px}
  .hsearch button{width:48px}
  /* The scope selector needs 190px it does not have on a phone; it would leave
     the input too narrow to show its own placeholder. Search covers everything
     here instead. */
  .hsearch-scope{display:none}

  /* ---- the drawer's search box ---- */
  .nav-m-search{display:flex;position:relative;flex:none;margin:14px 16px 0;
    border:1px solid var(--line);border-radius:10px;background:var(--paper);
    overflow:visible;max-width:none;width:auto}
  .nav-m-search input{flex:1 1 auto;min-width:0;border:0;background:none;
    padding:11px 12px;border-radius:10px 0 0 10px}
  .nav-m-search input:focus{outline:none}
  .nav-m-search:focus-within{border-color:var(--navy);background:var(--white)}
  .nav-m-search button{flex:none;width:46px;border:0;border-radius:0 9px 9px 0;
    background:var(--navy);color:#fff;cursor:pointer}
  .nav-m-search button:hover{background:var(--ink)}
  /* The suggestion list has to sit above the account chips below it. */
  .nav-m-search .hsuggest{top:calc(100% + 6px);left:0;right:0;z-index:5}

  /* The strip collapses: its only child on small screens is the drawer, which is
     position:fixed. Hiding .catbar itself would hide the drawer with it. */
  .catbar{background:none}
  .catbar-in{min-height:0;padding:0}

  /* Three bands: a brand header that does not move, a scrolling middle, and a contact
     block sitting on the floor of the panel. The old drawer was one scrolling column with
     84px of blank padding at the top and about two thirds of its height empty below the
     last link. Wider too - 320px left the category rows cramped once the thumbnails and
     the model counts were both in them. */
  .mainnav{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);z-index:70;
    background:var(--white);flex-direction:column;align-items:stretch;gap:0;
    padding:0;overflow-y:auto;margin-right:0;
    box-shadow:-18px 0 44px rgba(15,34,66,.2);
    /* The desktop track styling has to come off, or the drawer inherits an
       inset panel border and a tinted background. */
    border:0;border-radius:0;
    transform:translateX(100%);transition:transform .28s var(--ease);
  }

  /* ---- band 1: brand + close, on navy ----
     sticky rather than a fixed band in a wrapper: the drawer and the desktop strip share
     one <nav>, so introducing a scrolling middle element would mean a wrapper div that
     becomes a single flex child on the desktop bar and collapses the row. Sticky gives
     the same result with no markup the other layout has to survive. */
  .nav-m-top{display:flex;align-items:center;justify-content:space-between;flex:none;
    position:sticky;top:0;z-index:2;
    gap:12px;padding:14px 16px;background:var(--navy)}
  .nav-m-logo{height:38px;width:auto;display:block;
    /* The logo is drawn for a white header; on navy its dark wordmark disappears. */
    background:#fff;border-radius:8px;padding:5px 9px}

  /* ---- band 2: everything that scrolls ---- */
  /* The nav's own children are the bands, so the middle one has to be a real element.
     .navitem, the links and the eyebrows are all direct children, so instead of wrapping
     them in new markup the nav itself scrolls between the two fixed bands. */
  /* width:auto matters. .navitem and .navlink already carry width:100% for the old
     full-bleed drawer, and 100% of the panel plus a 16px margin put them 16px past its
     right edge - the hairlines ran off the side of the panel. As stretch-aligned flex
     children they fill what is left on their own. */
  .mainnav > .navitem,
  .mainnav > a.navlink,
  .mainnav > .nav-m-eyebrow,
  .mainnav > .nav-m-acct,
  .mainnav > .nav-mobile-actions{flex:none;width:auto;margin-left:16px;margin-right:16px}

  /* ---- the account and cart chips ---- */
  .nav-m-acct{display:flex;gap:8px;margin-top:14px;margin-bottom:4px}
  .nav-m-chip{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;
    justify-content:center;gap:7px;position:relative;
    padding:11px 10px;border:1px solid var(--line);border-radius:10px;
    background:var(--paper);color:var(--ink);font-size:14px;font-weight:600;
    text-decoration:none}
  .nav-m-chip i{font-size:14px;color:var(--navy)}
  .nav-m-chip:hover,.nav-m-chip:focus-visible{border-color:var(--navy);color:var(--navy)}
  .nav-m-n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
    display:inline-flex;align-items:center;justify-content:center;border-radius:100px;
    background:var(--orange);color:var(--ink);font-size:11px;font-weight:800;
    font-style:normal;line-height:1}

  /* ---- section eyebrows ---- */
  .nav-m-eyebrow{display:block;margin:18px 0 2px;font-size:12px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

  /* ---- band 3: contact block on the floor of the panel ----
     margin-top:auto drops it to the bottom when the list is short, which is the case that
     left two thirds of the drawer empty. sticky keeps it in view once the categories are
     expanded and the list is longer than the screen. */
  .nav-m-foot{display:block;flex:none;margin-top:auto;padding:14px 16px 16px;
    position:sticky;bottom:0;z-index:2;
    background:var(--paper);border-top:1px solid var(--line)}
  .nav-m-foot-k{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .nav-m-cta{display:flex;gap:8px}
  .nav-m-call,.nav-m-wa{flex:1 1 0;display:inline-flex;align-items:center;
    justify-content:center;gap:7px;padding:12px 8px;border-radius:10px;
    font-size:14px;font-weight:700;text-decoration:none;min-width:0}
  .nav-m-call{background:var(--navy);color:#fff}
  .nav-m-call:hover,.nav-m-call:focus-visible{background:var(--ink)}
  .nav-m-wa{background:#1FA855;color:#fff}
  .nav-m-wa:hover,.nav-m-wa:focus-visible{background:#188944}
  .nav-m-out{color:var(--muted-strong) !important;font-weight:600}
  .nav-m-out i{margin-right:7px}
  .mainnav.is-open{transform:translateX(0)}
  /* The drawer is a reading list on white, not a navy bar - the strip's white
     link colour and its orange trigger both have to be undone here or the text
     disappears into the panel. */
  .navitem{display:block;width:100%}
  .navlink{width:100%;justify-content:space-between;padding:15px 4px;
    font-size:16px;letter-spacing:0;color:var(--ink);background:none;
    border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
  /* The strip's vertical hairline has no meaning in a stacked list. */
  .mainnav > a.navlink::before{display:none}
  .navlink:hover{background:transparent;box-shadow:none;color:var(--navy)}
  .navlink.is-on,.has-mega.is-open .navlink{background:transparent;color:var(--navy)}
  .has-mega .navlink-btn{background:none;color:var(--ink);font-weight:600;padding:15px 4px}
  .has-mega .navlink-btn:hover,.has-mega.is-open .navlink-btn{background:none;color:var(--navy)}
  .grid-ic{display:none}

  /* Inside the drawer the mega becomes a single-column accordion. Thumbnails
     stay - they are the reason the drawer is worth scrolling. */
  .has-mega{position:relative}
  /* Inside the drawer it is just a list, so the card treatment comes off. */
  .mega{position:static;width:auto;border:0;border-radius:0;overflow:visible;
    box-shadow:none;background:transparent}
  .mega-in{display:block;padding:6px 0 14px}
  .mega .wrap{padding:0;max-width:none}
  /* Head stays so "View every product" survives; only its label goes. */
  .mega-head{padding-bottom:10px;margin-bottom:6px}
  .mega-label{display:none}
  .mega-all{padding-left:4px}
  .mega-cats ul{grid-template-columns:1fr;gap:0}
  .mega-cats ul a{padding:9px 4px;border-radius:0;border:0;
    border-bottom:1px solid var(--paper);box-shadow:none}
  .mega-cats ul a:hover{background:transparent;box-shadow:none}
  .mega-thumb{width:46px;height:46px}
  .mega-side{display:none}

  /* The drawer covers the burger, so it carries its own close control. It sits in the
     navy band now rather than floating over the list, so it is a light-on-dark target
     instead of a white circle on white. 40px square: it is the one control a thumb
     reaches for by position rather than by reading. */
  .nav-close{display:inline-flex;position:static;flex:none;
    width:40px;height:40px;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.28);border-radius:10px;
    background:rgba(255,255,255,.08);color:#fff}
  .nav-close i{font-size:17px}
  .nav-close:hover,.nav-close:focus-visible{background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.5)}

  .head-actions{margin-left:auto}
  .nav-mobile-actions{display:block;margin-top:22px}
  .nav-mobile-actions .navlink{border-bottom:0}
}
@media (max-width:760px){
  /* `.wrap{padding:0 20px}` is a shorthand and resets padding-top/bottom to 0.
     The footer rows are .wrap elements too, which is why their vertical padding
     is written as `.foot > ...` - see the footer block above. */
  .grid-4,.grid-3{grid-template-columns:1fr}
  .topbar-links{gap:16px}
  .section{padding:52px 0}
  .wrap{padding:0 20px}
}
/* The account icon used to be dropped below 420px to save room. It was not needed:
   measured with the icon forced on, the gap between the logo and the actions is still
   19px at 320px wide and nothing overlaps at any width down to there.

   420 was also the worst possible place to cut, because it runs straight through the
   middle of the phones people actually own. A CSS viewport is physical pixels divided by
   the device pixel ratio, so more pixels can mean a NARROWER page: a OnePlus 11R is 1240px
   at DPR 3 and lands on 413, while a Moto G35 is 1080px at DPR 2.5 and lands on 432. Same
   size phone in the hand, opposite sides of the line - one showed the account icon and the
   other did not, and there was no way to tell from the device which you would get.

   Nothing replaces this rule. Both icons now show at every width. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
}

/* ---------- typing on a phone ----------
   iOS Safari zooms the whole page in whenever focus lands on a control whose text is
   under 16px, and it does not zoom back out afterwards - the visitor is left on a
   magnified page halfway through a form, with the rest of it off to the side. Every
   field on this site was 14px or 15px, so it happened on contact, login, register, the
   cart quantity box and the product enquiry alike.

   16px only at touch widths; the desktop sizes are untouched, where 15px reads better
   and no browser does this. Checkboxes, radios and buttons are excluded - they carry no
   text cursor, so they never trigger it, and resizing them would move the layout.

   !important, deliberately. Bare element selectors lose to `.enq-form input` and
   `.checkout-form input`, and store.css loads after this file, so without it the rule was
   overridden on exactly the forms that matter most. Naming those classes here instead
   would work today and silently regress the first time a new form is written. This is a
   guard against a platform bug, not a style preference, so it should win. */
@media (max-width:860px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select,
  textarea{font-size:16px !important}
}