/* ============================================================================
   Public catalogue — visual layer. Loaded after app.css.

   Built for the phone first: nine out of ten retailers open this on a handset,
   standing in a shop, deciding whether to WhatsApp an order. So the search box
   is pinned to the top of the screen, categories are a wall of photographs
   rather than a list of words, and everything sits on a one-pixel grid — the
   same dense, squared-off rate-sheet look a wholesale counter runs on.

   Structure is fixed. Colour is a theme the owner picks in Site settings.
   ============================================================================ */

@import url("/static/fonts/fonts.css");

:root {
  /* ---- default: Trade Red. Overridden per theme below. ---- */
  --mast:       #101010;   /* masthead band */
  --mast-ink:   #FFFFFF;
  --mast-2:     #2A2A2A;   /* hairlines and hovers inside the band */
  --accent:     #C8102E;   /* the one loud colour: search, CTAs, live state */
  --accent-ink: #FFFFFF;
  --accent-2:   #A50D26;   /* pressed */
  --link:       #0B5FA5;

  --paper:      #FFFFFF;
  --panel:      #F3F3F3;   /* section bands and empty image wells */
  --card:       #FFFFFF;
  --ink:        #171717;
  --ink-2:      #4A4A4A;
  --ink-3:      #6B6B6B;   /* clears WCAG AA 4.5:1 on white */
  --rule:       #D5D5D5;
  --rule-2:     #E8E8E8;

  --ok:         #17693F;
  --ok-bg:      #DCF0E4;
  --warn:       #8A5410;
  --warn-bg:    #F8EEDC;

  --r:          2px;       /* near-square. Trade catalogues are not soft. */

  /* Typeface. The owner picks a pairing in Site settings; the body[data-font]
     blocks below swap these three. --sk rescales every heading, because a
     condensed face and a normal-width face at the same rem size are nowhere
     near the same length -- without it, "SWITCHGEAR & ELECTRICAL ACCESSORIES"
     overflows its tile the moment the display font stops being condensed.
     Noto Sans Devanagari rides at the end of every stack so Hindi keywords and
     Hindi voice-search results render properly instead of as boxes. */
  --sk:   1;
  --sans: "Barlow Semi Condensed", "Noto Sans Devanagari", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===========================================================================
   THEMES — picked in Site settings. Each one only moves the masthead and the
   accent; the grid, the type and the spacing never change.
   =========================================================================== */

body[data-theme="teal"]   { --mast: #0E4F4A; --mast-2: #2B6A65; --accent: #0F766E; --accent-2: #0B5C56; --link: #0F766E; }
body[data-theme="blue"]   { --mast: #12285C; --mast-2: #2C427A; --accent: #1D4ED8; --accent-2: #1740B0; --link: #1D4ED8; }
body[data-theme="copper"] { --mast: #2C1A10; --mast-2: #4A3223; --accent: #B4531F; --accent-2: #934116; --link: #9A4C22; }
body[data-theme="green"]  { --mast: #10361F; --mast-2: #2A5138; --accent: #15803D; --accent-2: #106431; --link: #15803D; }
body[data-theme="slate"]  { --mast: #14181C; --mast-2: #2E353B; --accent: #37474F; --accent-2: #263238; --link: #2A6BA8; }

/* ===========================================================================
   TYPEFACE — also picked in Site settings, independent of the colour theme.
   "trade" is the :root default above and therefore has no block of its own.
   --sk keeps headings the same physical length as the condensed original.
   =========================================================================== */

body[data-font="sharp"] {
  --sk: .9;
  --sans: Archivo, "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
  --body: Inter, "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
}
body[data-font="premium"] {
  --sk: .92;
  --sans: Outfit, "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
  --body: Manrope, "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
}
body[data-font="friendly"] {
  --sk: .87;
  --sans: Poppins, "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
  --body: Poppins, "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif;
}

/* Wide geometric faces need the air taken out of uppercase runs, and Poppins
   sits low on the line -- both look wrong at the defaults tuned for Barlow. */
body[data-font="sharp"]    { letter-spacing: -.005em; }
body[data-font="premium"]  { letter-spacing: -.004em; }
body[data-font="friendly"] { letter-spacing: -.012em; }

body {
  background: var(--paper);
  font-family: var(--body);
  color: var(--ink);
}
body.has-bar { padding-bottom: 64px; }

/* ===========================================================================
   MASTHEAD
   Two stacked bands inside one black block, pinned to the top. Row one is who
   you are; row two is the search, which is the reason most people opened this.
   =========================================================================== */

.mast {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--mast);
  color: var(--mast-ink);
}
.mast a { color: var(--mast-ink); }
.mast a:hover { text-decoration: none; }

.mast-top .wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 50px;
}

/* --- three-line browse button, far left, as asked for --- */
.burger {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  margin-left: -.55rem;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 8px;
  background: transparent; border: 0; cursor: pointer; border-radius: var(--r);
}
.burger span {
  display: block; height: 2.5px; border-radius: 1px;
  background: var(--mast-ink);
}
.burger:hover { background: var(--mast-2); }
.burger:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* --- wordmark: heavy condensed caps over a red rule, the trade-counter sign --- */
.mark {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .5rem;
}
.mark img { height: 30px; width: auto; flex: 0 0 auto; }
.mark-text { min-width: 0; display: block; }
.mark b {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  /* Scales with the screen because the shop name is set in whatever face the
     owner picked, and a normal-width face runs about a third longer than the
     condensed one this masthead was drawn for. Without the clamp it truncates
     to "JAGRATI ELECTRIC..." on a 375px handset. */
  font-size: calc(clamp(.92rem, 4.2vw, 1.12rem) * var(--sk));
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 3px;
}
.mark i {
  display: none;                 /* the tagline is desktop-only; see below */
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
  margin-top: .3rem;
}

/* ----------------------------------------------------------------- search */
.mast-search { padding-bottom: .55rem; }
.mast-search form { display: flex; }
.mast-search input {
  flex: 1; min-width: 0;
  height: 44px;
  padding: 0 .7rem;
  border: 0;
  border-radius: var(--r) 0 0 var(--r);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;               /* under 16px, iOS zooms the whole page in */
  -webkit-appearance: none;
}
.mast-search input::placeholder { color: #7A7A7A; }
.mast-search input:focus {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.mast-search button {
  flex: 0 0 54px;
  height: 44px;
  border: 0;
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mast-search button:hover { background: var(--accent-2); }
.mast-search button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ===========================================================================
   SECTION FURNITURE
   =========================================================================== */

main { padding-bottom: 3rem; }

.crumbs {
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper);
}
.crumbs .wrap {
  display: flex; align-items: center; gap: .35rem;
  padding-top: .5rem; padding-bottom: .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-3);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.crumbs .wrap::-webkit-scrollbar { display: none; }
.crumbs a { color: var(--ink-3); }
.crumbs b { color: var(--ink); font-weight: 600; }

.sec-head {
  display: flex; align-items: baseline; gap: .5rem;
  padding: 1.15rem 0 .6rem;
}
.sec-head h1, .sec-head h2 {
  margin: 0;
  flex: 1; min-width: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(1.5rem * var(--sk));
  line-height: 1.1;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.sec-head.sm h2 { font-size: 1.12rem; }
.sec-count {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--panel);
  padding: .18rem .45rem;
  border-radius: var(--r);
}

/* ===========================================================================
   THE PHOTO WALL
   Tiles butt against each other with a single hairline between them, so the
   grid reads as one printed sheet rather than a scatter of floating cards.
   That one-pixel grid is the through-line of the whole page.
   =========================================================================== */

/* The hairlines are drawn by each cell's own 1px ring, which meets its
   neighbour's inside the 1px gap. Painting them as a grid background instead
   would leave a solid grey block wherever a row runs short. */
.tilegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;                  /* room for the outermost ring */
}
.tile {
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
  display: flex; flex-direction: column;
  padding: .55rem .55rem .7rem;
  color: var(--ink) !important;
  text-align: center;
  min-width: 0;
}
.tile:hover { background: #FAFAFA; text-decoration: none; }
.tile:hover .tile-name { color: var(--accent); }

.tile-shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--panel);
  margin-bottom: .5rem;
  overflow: hidden;
}
/* Category pictures are scene shots, not cut-outs, so they fill the frame
   edge to edge. Product photos below still use contain -- there you have to
   see the whole part. */
.tile-shot img { width: 100%; height: 100%; object-fit: cover; }
.tile-icon { font-size: 2.4rem; color: #CFCFCF; line-height: 1; }

.tile-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(.98rem * var(--sk));
  line-height: 1.25;              /* a clamped box any tighter shaves the tails
                                     off g, y and p in the rounder faces */
  letter-spacing: .005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Two lines' worth whether the name needs them or not, so the item counts
     line up across a row instead of stepping up and down. */
  min-height: 2.3em;
}
.tile-n {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: .25rem;
}

/* ===========================================================================
   BRAND STRIP — a sideways scroller, so a long brand list costs one row
   =========================================================================== */

.brandrow { margin-top: .4rem; }
.chips {
  display: flex; gap: .35rem;
  padding: .1rem 0 .2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px;
  padding: .3rem .75rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink) !important;
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(1rem * var(--sk));
  white-space: nowrap;
}
.chips a:hover { border-color: var(--ink-3); text-decoration: none; }
.chips a.on { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.chips a .n {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  line-height: 1; align-self: center; opacity: .55;
}

/* applied filters, each one a tap away from being removed */
.applied { display: flex; flex-wrap: wrap; gap: .3rem; padding-bottom: .5rem; }
.applied a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .55rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--card);
  color: var(--accent) !important;
  font-size: .8rem; font-weight: 600;
}
.applied a:hover { background: var(--accent); color: #fff !important; text-decoration: none; }
.applied b { font-weight: 700; }

/* ===========================================================================
   PRODUCT GRID — same hairline grid as the tiles
   =========================================================================== */

.plist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
}

.pcard {
  background: var(--card);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--rule);
  display: flex; flex-direction: column;
  position: relative;
  min-width: 0;
}

.pcard .shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  height: auto; flex: 0 0 auto;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--rule-2);
  position: relative;
}
.pcard .shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .45rem;
}
.pcard .shot .noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: calc(1.9rem * var(--sk));
  letter-spacing: .06em; color: #CFCFCF;
}
.pcard .shot .badge { position: absolute; left: .4rem; top: .4rem; }

.pcard .body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: .5rem .55rem .55rem;
}

.brandline {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: .18rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pcard .nm {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(1.02rem * var(--sk));
  line-height: 1.25;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard .nm:hover { color: var(--accent); text-decoration: none; }

.pcard .sku {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin: .22rem 0 .4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pcard .price {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink);
}
.pcard .plabel {
  font-family: var(--body); font-weight: 400; font-size: .78rem; color: var(--ink-3);
}
.pcard .mrp {
  display: block;
  font-size: .7rem; font-weight: 400; color: var(--ink-3);
  text-decoration: line-through;
}
.pcard .margin {
  font-family: var(--sans); font-size: calc(.8rem * var(--sk)); font-weight: 700; color: var(--ok);
}

.pcard label.pick {
  display: flex; align-items: center; gap: .45rem;
  min-height: 44px;
  margin: .5rem -.55rem -.55rem;
  padding: .4rem .55rem;
  border-top: 1px solid var(--rule-2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(.95rem * var(--sk));
  color: var(--ink-2);
  cursor: pointer;
}
.pcard label.pick:hover { background: #FAFAFA; }
.pcard label.pick input {
  width: 19px; height: 19px; flex: 0 0 19px;
  accent-color: var(--accent);
}
.pcard:has(.sel:checked) { box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 2px var(--accent); }
.pcard:has(.sel:checked) label.pick { color: var(--accent); }

/* --------------------------------------------------------------- stock tag */
.tag {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(.72rem * var(--sk));
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r);
  padding: .16rem .4rem;
  display: inline-block;
}
.tag.in_stock { background: var(--ok-bg); color: var(--ok); }
.tag.order    { background: var(--warn-bg); color: var(--warn); }

/* ===========================================================================
   PAGER, EMPTY STATE
   =========================================================================== */

.pager {
  display: flex; align-items: center; gap: .35rem;
  padding: 1rem 0 1.5rem;
}
.pager a, .pager span {
  font-family: var(--sans); font-weight: 600; font-size: calc(1rem * var(--sk));
  min-height: 44px; display: inline-flex; align-items: center;
  padding: .3rem .8rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink);
}
.pager a:hover { border-color: var(--ink); text-decoration: none; }
.pager .on {
  flex: 1; justify-content: center;
  background: var(--panel); border-color: var(--rule);
  font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--ink-3);
}

.empty {
  text-align: center;
  padding: 3rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--panel);
}
.empty h2 {
  font-family: var(--sans); font-weight: 700; font-size: calc(1.4rem * var(--sk));
  text-transform: uppercase; color: var(--ink);
}
.empty p { color: var(--ink-2); max-width: 34ch; margin: 0 auto 1rem; }

/* Buttons and links on the public side follow the chosen theme, not the
   admin-side brand colour that app.css sets up. */
main a { color: var(--link); }
main .btn {
  border-radius: var(--r);
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: calc(1rem * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
  min-height: 44px; padding: .5rem 1.1rem;
}
main .btn:hover { background: var(--accent-2); border-color: var(--accent-2); filter: none; }
main .btn.ghost { background: #fff; color: var(--ink); border-color: var(--rule); }

/* ===========================================================================
   ORDER BAR — the running WhatsApp basket
   =========================================================================== */

.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--mast);
  color: var(--mast-ink);
  border-top: 3px solid var(--accent);
  padding: .55rem 0;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .2);
}
.orderbar .wrap { display: flex; align-items: center; gap: .5rem; }
.orderbar b {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-weight: 600; font-size: calc(1.05rem * var(--sk));
  text-transform: uppercase; letter-spacing: .02em;
}
.orderbar .btn {
  font-family: var(--sans); font-weight: 700; font-size: calc(1rem * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
  min-height: 44px; padding: .4rem 1rem;
  border-radius: var(--r);
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.orderbar .btn:hover { background: var(--accent-2); border-color: var(--accent-2); filter: none; }
.orderbar .btn.ghost {
  background: transparent; color: var(--mast-ink);
  border-color: rgba(255, 255, 255, .35);
  font-size: .88rem; padding: .4rem .7rem;
}

/* ------------------------------------------------------- quantity sheet */
.sheet { border-radius: var(--r) var(--r) 0 0; }
.sheet header h2 {
  font-family: var(--sans); font-size: calc(1.3rem * var(--sk)); font-weight: 700; text-transform: uppercase;
}
.qline .who b { font-family: var(--sans); font-size: calc(1.02rem * var(--sk)); font-weight: 600; line-height: 1.2; }
.qline .who span { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .02em; }
.qline input {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600;
  border: 1px solid var(--rule); border-radius: var(--r);
  min-height: 44px; font-size: 16px;
}
.qline input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.qline .unit { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; }
.sheet footer .btn {
  min-height: 48px; border-radius: var(--r);
  font-family: var(--sans); font-weight: 700; font-size: calc(1.02rem * var(--sk)); text-transform: uppercase;
}
.sheet footer .btn:first-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.sheet footer .btn.ghost { background: #fff; color: var(--ink); border-color: var(--rule); }

/* ===========================================================================
   PRODUCT PAGE
   =========================================================================== */

.pdp-shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin: .8rem 0 1rem;
  overflow: hidden;
}
.pdp-shot img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.pdp-shot .noimg {
  font-family: var(--sans); font-weight: 700; font-size: calc(3rem * var(--sk));
  letter-spacing: .06em; color: #CFCFCF;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: .3rem;
}
.pdp h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(1.5rem * var(--sk));
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0 0 .5rem;
}
.idrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pdp .sku {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .02em;
  color: var(--ink-2); background: var(--panel);
  padding: .2rem .45rem; border-radius: var(--r);
}

.pricebox {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--r);
  padding: .9rem;
  margin-bottom: 1.2rem;
  background: var(--card);
}
.bigprice {
  font-family: var(--mono);
  font-size: 2rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.bigprice em {
  font-family: var(--body); font-style: normal; font-weight: 400;
  font-size: .85rem; color: var(--ink-3); margin-left: .3rem;
}
.bigprice.ask { font-family: var(--sans); font-size: calc(1.35rem * var(--sk)); letter-spacing: 0; color: var(--ink-2); }
.pricebox .sub { font-size: .85rem; color: var(--ink-3); margin-top: .25rem; }
.pricebox .sub b { color: var(--ok); }

.terms {
  list-style: none; margin: .8rem 0 0; padding: .7rem 0 0;
  border-top: 1px solid var(--rule-2);
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .82rem; color: var(--ink-2);
}
.terms li::before { content: "▪"; color: var(--accent); margin-right: .35rem; }

.buyrow { display: flex; gap: .5rem; align-items: flex-end; margin-top: .9rem; }
.qtyfield { flex: 0 0 88px; }
.qtyfield label {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); margin-bottom: .2rem;
}
.qtyfield input {
  height: 50px; text-align: center; font-size: 16px;
  font-family: var(--mono); font-weight: 600;
  border: 1px solid var(--rule); border-radius: var(--r);
}
.btn.buy {
  flex: 1;
  min-height: 50px;
  border-radius: var(--r);
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: calc(1.1rem * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
}
.btn.buy:hover { background: var(--accent-2); border-color: var(--accent-2); filter: none; }
.callthrough {
  display: block; text-align: center; margin-top: .6rem;
  font-size: .85rem; color: var(--ink-3) !important;
}

.pdp .desc { color: var(--ink-2); line-height: 1.55; margin-bottom: 1.2rem; }

.specs h2 {
  font-family: var(--sans); font-weight: 700; font-size: calc(1.15rem * var(--sk));
  text-transform: uppercase; margin-bottom: .4rem;
}
.spec { border: 1px solid var(--rule); border-radius: var(--r); }
.spec td { padding: .5rem .6rem; border-bottom: 1px solid var(--rule-2); font-size: .92rem; }
.spec tr:last-child td { border-bottom: 0; }
.spec td:first-child {
  width: 45%;
  font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
  background: #FBFBFB;
}
.spec td:last-child { font-family: var(--sans); font-weight: 600; font-size: calc(1rem * var(--sk)); }

/* ===========================================================================
   FOOTER
   =========================================================================== */

.pub-foot {
  background: var(--mast);
  color: rgba(255, 255, 255, .78);
  border-top: 3px solid var(--accent);
  padding: 1.5rem 0 5rem;
  font-size: .88rem;
}
.pub-foot b {
  display: block;
  font-family: var(--sans); font-weight: 700; font-size: calc(1.3rem * var(--sk));
  text-transform: uppercase; color: #fff; margin-bottom: .4rem;
}
.pub-foot p { margin: 0 0 .35rem; }
.pub-foot a { color: #fff; font-family: var(--mono); font-size: .88rem; }
.pub-foot .callrow { display: flex; gap: 1rem; flex-wrap: wrap; }
.pub-foot .fine {
  margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid var(--mast-2);
  font-size: .78rem; color: rgba(255, 255, 255, .55);
}

/* ===========================================================================
   BROWSE DRAWER
   =========================================================================== */

.menu-bg {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 90;
}
.menu-bg.show { opacity: 1; pointer-events: auto; }

.sidemenu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 310px; max-width: 86vw;
  background: #fff; z-index: 95;
  transform: translateX(-100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
  box-shadow: 2px 0 22px rgba(0, 0, 0, .25);
}
.sidemenu.show { transform: translateX(0); }

.sm-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem;
  background: var(--mast); color: var(--mast-ink);
  border-bottom: 3px solid var(--accent);
}
.sm-head b {
  font-family: var(--sans); font-size: calc(1.2rem * var(--sk)); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.sm-x {
  background: transparent; border: 0; color: var(--mast-ink);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  width: 42px; height: 42px; border-radius: var(--r);
}
.sm-x:hover { background: var(--mast-2); }

.sm-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2rem; }

.sm-all {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 50px; padding: .7rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-weight: 700; font-size: calc(1.05rem * var(--sk));
  text-transform: uppercase;
  color: var(--ink) !important;
}
.sm-all:hover { background: var(--rule-2); text-decoration: none; }

.sm-title {
  font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
  padding: 1rem 1rem .3rem;
}

.sm-list { list-style: none; margin: 0; padding: 0; }
.sm-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule-2); }
.sm-row a {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 46px; padding: .5rem 1rem;
  font-family: var(--sans); font-size: calc(1.02rem * var(--sk)); font-weight: 600; line-height: 1.2;
  color: var(--ink) !important;
}
.sm-row a:hover { background: var(--panel); text-decoration: none; }
.sm-row .n {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: .68rem; font-weight: 500; color: var(--ink-3);
}
.sm-toggle {
  flex: 0 0 48px; width: 48px;
  background: transparent; border: 0; border-left: 1px solid var(--rule-2);
  font-size: 1.3rem; line-height: 1; color: var(--ink-2); cursor: pointer;
}
.sm-toggle:hover { background: var(--panel); }

/* Sub-levels stay closed until asked for, so a long tree is not overwhelming. */
.sm-sub { list-style: none; margin: 0; padding: 0; display: none; background: #FAFAFA; }
.sm-sub.open { display: block; }
.sm-sub .sm-row a { padding-left: 1.9rem; font-size: calc(.96rem * var(--sk)); font-weight: 500; }
.sm-sub .sm-sub .sm-row a { padding-left: 2.8rem; font-size: calc(.92rem * var(--sk)); }

/* ===========================================================================
   LARGER SCREENS — the phone layout is the real one; this just lets it breathe
   =========================================================================== */

@media (min-width: 640px) {
  .mast-top .wrap { min-height: 62px; gap: .9rem; }
  .mark b { font-size: calc(1.7rem * var(--sk)); }
  .mark i { display: block; }
  .iconbtn { width: 44px; height: 44px; }
  .mast-search { padding-bottom: .7rem; }
  .mast-search form { max-width: 620px; }

  .tilegrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .plist    { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
  .sec-head h1, .sec-head h2 { font-size: calc(1.7rem * var(--sk)); }

  .pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
  .pdp-shot { margin-top: 1.2rem; position: sticky; top: 130px; }
  .pdp h1 { font-size: calc(2.1rem * var(--sk)); }
  .pdp-main { padding-top: 1.2rem; }
}

/* Very narrow phones: two columns still beat one, but the type has to give. */
@media (max-width: 360px) {
  .mark b { font-size: .98rem; }
  .tile-name, .pcard .nm { font-size: .94rem; }
}

/* Keyboard users must always be able to see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Some retailers will have motion turned down; honour it. */
@media (prefers-reduced-motion: reduce) {
  *, .sidemenu, .menu-bg { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   HEADER ACTIONS — call, WhatsApp, cart
   =========================================================================== */

.acts { flex: 0 0 auto; display: flex; align-items: center; gap: .1rem; }

.iconbtn {
  position: relative;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r);
  color: var(--mast-ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.iconbtn:hover { background: var(--mast-2); }
.iconbtn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.iconbtn.wa { color: #4AE168; }          /* WhatsApp's own green, so it is recognised */
.iconbtn.cart { color: var(--mast-ink); }

.cartcount {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--mast);
}
.cartcount[hidden] { display: none; }

/* Two shop numbers behind one button. */
.callwrap { position: relative; }
.callmenu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 190px; z-index: 80;
  background: #fff; color: var(--ink);
  border-radius: var(--r);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  padding: .35rem;
  display: none;
}
.callmenu.show { display: block; }
.callmenu b {
  display: block; padding: .35rem .6rem .3rem;
  font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
}
.callmenu a {
  display: block; padding: .6rem;
  border-radius: var(--r);
  font-family: var(--mono); font-size: 1rem; font-weight: 500;
  color: var(--ink) !important;
}
.callmenu a:hover { background: var(--panel); text-decoration: none; }

/* ===========================================================================
   OFFER STRIP — the swiping banner under the search bar

   A colour panel of words beside a photograph, split down the middle. Nothing
   is printed on top of the picture, so a headline can never land on a box lid
   and vanish.
   =========================================================================== */

.offers { padding: 0; }
.offer-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.offer-track::-webkit-scrollbar { display: none; }

/* One photograph, edge to edge, darkened from the left so the words on top of
   it can be read. The dark is plain black, not a colour -- a tint mixed from
   the picture's own edge was tried and looked like a panel stuck on the front
   of the photo. This gradient reaches across the whole banner and is almost
   gone by the right-hand side, so there is no edge anywhere.

   Earlier attempts, and why they went:
     1. Words centred over an untreated photo -- unreadable, the headline
        landed on a box lid or a coil of wire and disappeared.
     2. Solid colour block beside the photo, half and half -- looked like two
        pictures glued together, and the words reached the middle.
     3. Quarter colour block sampled off the photo -- still read as a block
        bolted on the front. */
.offer {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16 / 10;
  max-height: 300px;
  overflow: hidden;
  display: flex; align-items: stretch;
  background: var(--bnr-bg, #141414);
  color: var(--bnr-ink, #fff) !important;
}
.offer:hover { text-decoration: none; }

/* Right three quarters. margin-left rather than a spacer element, so the flat
   quarter is simply .offer's own background showing through. */
/* The whole banner. No margin, no split -- the picture is the banner. */
.offer-bg {
  position: relative; z-index: 0;
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* The fade. Blurs and washes the left quarter of the picture and then lets go,
   so there is no edge anywhere -- the mask takes the whole effect, tint and
   blur together, down to nothing by the time it reaches the middle. */
.offer.has-photo::after {
  content: "";
  position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(90deg,
              rgba(0, 0, 0, .88) 0%,
              rgba(0, 0, 0, .74) 38%,
              rgba(0, 0, 0, .32) 72%,
              rgba(0, 0, 0, .05) 100%);
  pointer-events: none;
}

.offer-in {
  order: 1;
  flex: 1 1 100%;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: .7rem .9rem;
}
/* White, always: the scrim is black, so the scheme's own ink does not apply. */
.offer.has-photo { color: #fff !important; }

/* A quarter of the banner, as asked -- the words never reach the middle. It is
   a narrow column, so the type below is sized for it rather than for a
   full-width headline. */
.offer.has-photo .offer-in {
  position: absolute; z-index: 2;
  left: 0; top: 0; bottom: 0; width: 25%;
  padding: .45rem .5rem;
  overflow: hidden;          /* a hair of overflow must clip at the box, never
                                spill a half-cut line over the picture */
}


.offer b {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: calc(clamp(1rem, 5vw, 1.55rem) * var(--sk));
  line-height: 1.06; letter-spacing: -.015em; text-transform: uppercase;
  text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.offer i {
  display: block; font-style: normal;
  font-size: clamp(.7rem, 3.1vw, .88rem);
  margin-top: .35rem; opacity: .9;
  line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Narrow column: smaller type, more lines. A headline that fits a full-width
   banner does not fit a third of one. */
/* A quarter of a phone screen is about 94px wide -- but it is the FULL height
   of the banner, around 234px, and the first version of this used less than
   half of it. In a column this narrow, bigger type means more lines rather
   than wider lines, and there is plenty of room downwards for them. So the
   type is sized to fill the height, and the clamps are set high enough that
   the extra lines are allowed to exist. */
.offer.has-photo b {
  font-size: calc(clamp(.95rem, 4.45vw, 1.35rem) * var(--sk));
  line-height: 1.08;
  -webkit-line-clamp: 5;
  overflow-wrap: break-word; text-wrap: wrap;
}
.offer.has-photo i {
  font-size: clamp(.7rem, 3vw, .88rem);
  line-height: 1.3;
  -webkit-line-clamp: 5;
  margin-top: .3rem;
  opacity: .95;
  overflow-wrap: break-word;
}
.offer.has-photo .offer-cta {
  margin-top: .45rem; padding: .25rem .5rem; border-width: 2px;
  font-size: calc(clamp(.68rem, 2.9vw, .82rem) * var(--sk));
  letter-spacing: .02em;
  white-space: normal; overflow-wrap: break-word;
}
.offer-cta {
  align-self: flex-start;
  margin-top: .6rem;
  padding: .3rem .7rem;
  border: 2px solid currentColor; border-radius: var(--r);
  font-family: var(--sans); font-weight: 700;
  font-size: calc(clamp(.72rem, 3.2vw, .86rem) * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}

/* Colour presets -- must match db.BANNER_SCHEMES. These are the fallback: a
   banner with a photo overrides --bnr-bg inline with its own sampled tone.
   They are variables and not plain backgrounds because the gradient above
   reads --bnr-bg back out. */

.bnr-red   { --bnr-bg: #C8102E; --bnr-ink: #FFFFFF; }
.bnr-black { --bnr-bg: #141414; --bnr-ink: #FFFFFF; }
.bnr-amber { --bnr-bg: #F2B705; --bnr-ink: #1A1A1A; }
.bnr-green { --bnr-bg: #15803D; --bnr-ink: #FFFFFF; }
.bnr-blue  { --bnr-bg: #12448C; --bnr-ink: #FFFFFF; }
.bnr-cream { --bnr-bg: #F3EDE1; --bnr-ink: #1A1A1A; }


.offer-dots { display: flex; justify-content: center; gap: .3rem; padding: .55rem 0 .1rem; }
.offer-dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%; background: var(--rule);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.offer-dots button.on { width: 20px; border-radius: 4px; background: var(--accent); }

/* ===========================================================================
   BRAND CIRCLES — a slow belt of round brand buttons
   =========================================================================== */

/* The belt is scrolled by script, not by a CSS animation -- an animation
   cannot be grabbed and dragged, and a customer who swipes it expects it to
   follow their finger. See the drift loop in base.html. */
.beltwrap {
  overflow-x: auto;
  padding: .1rem 0 .3rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.beltwrap::-webkit-scrollbar { display: none; }
.beltwrap.dragging { cursor: grabbing; scroll-behavior: auto; }
.belt { display: flex; width: max-content; }
.belt-run { display: flex; gap: .75rem; padding: 0 .375rem; }

/* With only a handful of brands there is nothing to scroll past -- a drifting
   belt would just be fidgeting. Centre them and leave them alone. */
.beltwrap.still .belt { margin: 0 auto; }
.beltwrap.still .belt-run:last-child { display: none; }

.orb {
  flex: 0 0 auto;
  width: 78px;
  display: flex; flex-direction: column; align-items: center;
  color: var(--ink) !important;
  text-align: center;
}
.orb:hover { text-decoration: none; }

.orb-face {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--orb);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.orb:hover .orb-face { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, .24); }
.orb-face img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: .3rem; }
.orb-face em {
  font-style: normal;
  font-family: var(--sans); font-weight: 700; font-size: calc(.84rem * var(--sk));
  line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  color: #fff; padding: 0 .25rem;
  overflow-wrap: anywhere;
}
.orb.on .orb-face { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }

.orb-name {
  font-family: var(--sans); font-weight: 600; font-size: calc(.82rem * var(--sk));
  line-height: 1.25; margin-top: .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;   /* two lines' worth, so the circles stay on one baseline */
}

.clearbrand {
  flex: 0 0 auto;
  font-family: var(--sans); font-weight: 600; font-size: calc(.88rem * var(--sk));
  color: var(--link) !important;
}

/* ------------------------------------------- product page: add to order */
.btn.addbtn {
  width: 100%; margin-top: .5rem; min-height: 46px;
  background: #fff; color: var(--ink); border: 1.5px solid var(--ink);
  border-radius: var(--r);
  font-family: var(--sans); font-weight: 700; font-size: calc(1rem * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
}
.btn.addbtn:hover { background: var(--panel); filter: none; }
.btn.addbtn.added { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }

.eyebrow .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: .35rem; vertical-align: baseline;
}

/* Removing a line from the order sheet. */
.qdrop {
  flex: 0 0 30px; width: 30px; height: 30px;
  background: transparent; border: 0; border-radius: var(--r);
  color: var(--ink-3); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.qdrop:hover { background: var(--panel); color: var(--accent); }

@media (min-width: 640px) {
  .offer { aspect-ratio: 32 / 9; max-height: 340px; }
  .offer-in { padding: 0 2.4rem; }
  .offer.has-photo .offer-in { width: 25%; padding: 0 1.4rem; }
  .offer b { font-size: calc(2.3rem * var(--sk)); -webkit-line-clamp: 2; }
  .offer i { font-size: 1.02rem; }
  .offer.has-photo b { font-size: calc(1.7rem * var(--sk)); -webkit-line-clamp: 3; }
  .offer.has-photo i { font-size: .92rem; }
  .offer.has-photo .offer-cta { font-size: calc(.82rem * var(--sk)); padding: .3rem .7rem; }
  .orb { width: 92px; }
  .orb-face { width: 78px; height: 78px; }
}

/* ===========================================================================
   VOICE SEARCH — speak instead of type
   =========================================================================== */

/* Sits inside the white input, not beside the red search button -- so it has
   to out-rank the `.mast-search button` rule that paints that one red. */
.mast-search button.micbtn {
  flex: 0 0 46px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--rule-2);
  border-radius: 0;
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mast-search button.micbtn:hover { color: var(--accent); background: var(--panel); }
.mast-search button.micbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.voice-bg {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0, 0, 0, .6);
  display: none; align-items: flex-end; justify-content: center;
}
.voice-bg.show { display: flex; }

.voice {
  background: #fff;
  width: 100%; max-width: 460px;
  border-radius: var(--r) var(--r) 0 0;
  padding: 1.2rem 1.2rem 1.6rem;
  text-align: center;
}

.voice-langs {
  display: flex; gap: .3rem; justify-content: center;
  margin-bottom: 1.2rem;
}
.voice-langs button {
  padding: .4rem 1.1rem; min-height: 40px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff; color: var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: calc(1rem * var(--sk));
  cursor: pointer;
}
.voice-langs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.voice-orb {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 0;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.voice-orb:hover { background: var(--accent-2); }

/* A ring that keeps pulsing while the microphone is actually open, so it is
   obvious the phone is listening and not just sitting there. */
.voice-orb.live::before,
.voice-orb.live::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid var(--accent);
  animation: mic 1.8s ease-out infinite;
}
.voice-orb.live::after { animation-delay: .9s; }
@keyframes mic {
  from { transform: scale(1);   opacity: .7; }
  to   { transform: scale(1.8); opacity: 0; }
}

.voice-state {
  margin: 1rem 0 0;
  font-family: var(--sans); font-weight: 600; font-size: calc(1.15rem * var(--sk));
  color: var(--ink);
}
.voice-heard {
  margin: .4rem 0 0; min-height: 1.5em;
  font-size: 1.05rem; color: var(--ink-2);
}
.voice-x {
  margin-top: 1.1rem;
  background: transparent; border: 0;
  font-family: var(--sans); font-weight: 600; font-size: calc(.95rem * var(--sk));
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); cursor: pointer;
  min-height: 44px; padding: 0 1rem;
}
.voice-x:hover { color: var(--ink); }

@media (min-width: 560px) {
  .voice-bg { align-items: center; }
  .voice { border-radius: var(--r); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-orb.live::before, .voice-orb.live::after { animation: none; opacity: .4; }
}

/* ===========================================================================
   CART PAGE — the enquiry list on its own page
   =========================================================================== */

.cartlede { color: var(--ink-2); margin: -.2rem 0 1rem; max-width: 52ch; }

.cartgrid { display: grid; gap: 1rem; align-items: start; }

.cartlist {
  display: grid; gap: 1px;
  padding: 1px;
}
.cartrow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: .8rem;
  padding: .8rem;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
}

.cshot {
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--rule-2);
  overflow: hidden;
}
.cshot img { width: 100%; height: 100%; object-fit: contain; padding: .25rem; }
.cshot .noimg {
  font-family: var(--sans); font-weight: 700; font-size: calc(1.5rem * var(--sk));
  color: #CFCFCF; letter-spacing: .05em;
}

.cbody { min-width: 0; }
.cbrand {
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; color: var(--accent);
}
.cname {
  display: block; margin-top: .1rem;
  font-family: var(--sans); font-weight: 600; font-size: calc(1.1rem * var(--sk));
  line-height: 1.2; color: var(--ink) !important;
}
.cname:hover { color: var(--accent) !important; text-decoration: none; }
.csku {
  font-family: var(--mono); font-size: .66rem; color: var(--ink-3);
  margin-top: .2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cstock {
  display: inline-block; margin-top: .35rem;
  font-family: var(--sans); font-weight: 700; font-size: calc(.7rem * var(--sk));
  text-transform: uppercase; letter-spacing: .04em;
  padding: .12rem .4rem; border-radius: var(--r);
}
.cstock.in_stock { background: var(--ok-bg); color: var(--ok); }
.cstock.order    { background: var(--warn-bg); color: var(--warn); }

.cprice {
  margin-top: .45rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; color: var(--ink);
}
.cprice .per { font-family: var(--body); font-size: .78rem; color: var(--ink-3); margin-left: .25rem; }
.cprice .was { font-size: .75rem; color: var(--ink-3); text-decoration: line-through; margin-left: .4rem; }
.cprice .mrplabel { font-family: var(--body); font-size: .78rem; color: var(--ink-3); }
.cprice .askrate { font-family: var(--body); font-size: .9rem; color: var(--ink-3); }

/* Steppers, because typing a number on a phone keyboard mid-aisle is a chore. */
.cqty { display: flex; align-items: center; gap: .3rem; margin-top: .6rem; }
.cqty label {
  font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); margin: 0 .2rem 0 0;
}
.cqty .step {
  width: 38px; height: 38px; flex: 0 0 38px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff; color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.cqty .step:hover { border-color: var(--ink); }
.cqty input {
  width: 62px; flex: 0 0 62px; height: 38px;
  text-align: center; font-size: 16px;
  font-family: var(--mono); font-weight: 600;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 0;
}
.cqty input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.cunit { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; color: var(--ink-3); }
.cmoq { font-size: .76rem; color: var(--warn); margin-top: .3rem; }

.cdrop {
  margin-top: .5rem;
  background: transparent; border: 0; padding: .3rem 0;
  font-family: var(--sans); font-weight: 600; font-size: calc(.88rem * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-3); cursor: pointer;
}
.cdrop:hover { color: var(--accent); }

/* ---------------------------------------------------------- the summary */
.cartsum {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: 1rem;
  background: var(--card);
}
.cartsum h2 {
  font-family: var(--sans); font-weight: 700; font-size: calc(1.25rem * var(--sk));
  text-transform: uppercase; margin: 0 0 .7rem;
}
.cartsum dl { margin: 0 0 .8rem; }
.cartsum dl > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .35rem 0; border-bottom: 1px solid var(--rule-2);
}
.cartsum dt { color: var(--ink-2); font-size: .9rem; }
.cartsum dd {
  margin: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink);
}
.cartsum .est dd { font-size: 1.15rem; }
.fineprint { font-size: .76rem; color: var(--ink-3); margin: 0 0 .9rem; line-height: 1.4; }

.btn.sendwa {
  width: 100%; min-height: 50px; margin-bottom: .45rem;
  border-radius: var(--r);
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: calc(1.1rem * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
}
.btn.sendwa:hover { background: var(--accent-2); border-color: var(--accent-2); filter: none; }
.cartsum .btn.ghost {
  width: 100%; min-height: 44px; border-radius: var(--r);
  background: #fff; color: var(--ink); border-color: var(--rule);
  font-family: var(--sans); font-weight: 600; font-size: calc(.95rem * var(--sk));
  text-transform: none; letter-spacing: 0;
}
.callalt { text-align: center; margin-top: .7rem; font-size: .85rem; color: var(--ink-3); }
.callalt a { font-family: var(--mono); }

.clearall {
  display: block; width: 100%; margin-top: .8rem;
  background: transparent; border: 0; min-height: 44px;
  font-family: var(--sans); font-weight: 600; font-size: calc(.9rem * var(--sk));
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-3); cursor: pointer;
}
.clearall:hover { color: var(--accent); }
.keepon {
  display: block; text-align: center; margin-top: .2rem;
  font-family: var(--sans); font-weight: 600; font-size: calc(.95rem * var(--sk));
}

.cartempty {
  text-align: center; padding: 3rem 1rem;
  border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink-2);
}
.cartempty h2 {
  font-family: var(--sans); font-weight: 700; font-size: calc(1.4rem * var(--sk));
  text-transform: uppercase; color: var(--ink);
}
.cartempty .btn { margin-top: .6rem; }

@media (min-width: 760px) {
  .cartgrid { grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; }
  .cartside { position: sticky; top: 130px; }
  .cartrow { grid-template-columns: 120px minmax(0, 1fr); }
  .cshot { width: 120px; height: 120px; }
}