/** Shopify CDN: Minification failed

Line 1034:0 Unexpected "}"

**/
/* ==========================================================================
   KTM Groceries — base styles
   Ported from ktm-groceries-prototype.html with the legacy token names
   (--crimson / --saffron) renamed per build spec §3.
   ========================================================================== */

:root{
  /* KTM brand */
  --brand-red:       #D81E28;
  --brand-red-dark:  #B51721;
  --brand-red-soft:  #FDEDEE;
  --brand-blue:      #1C74BC;
  --brand-blue-dark: #155C96;
  --brand-blue-soft: #E8F1FA;

  /* Mahal Mart-inspired semantic accents */
  --cta-green:       #0D893E;
  --cta-green-hover: #35A762;
  --star:  #F5A623;
  --green: #0D893E;
  --green-soft: #E8F6EE;
  --danger:#C62020;
  --danger-soft:#FDEBEB;
  --yellow:#FCCA2C;
  /* Brand red at full strength only reaches 2.6:1 on the --ink footer. Lightened
     for use on dark backgrounds, where it clears 4.5:1. */
  --brand-red-on-dark: #FF7A80;
  --accent-gold: #F3C14B;

  /* Neutrals — clean light-gray page, white cards */
  --ink:   #003333;
  --muted: #5A6B6B;
  --line:  #E8E8E8;
  --bg:    #F5F5F5;
  --card:  #FFFFFF;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow:    0 4px 18px rgba(0,51,51,.06);
  --shadow-lg: 0 12px 32px rgba(0,51,51,.10);
  --shadow-card: 0 2px 10px rgba(0,51,51,.05);
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

/*
 * The `hidden` attribute is only `display:none` in the UA stylesheet, so ANY
 * author rule that sets `display` silently defeats it. Several components here
 * are toggled via `el.hidden` in theme.js while also carrying display:flex/grid
 * (.cart-drawer, .cart-items, .badge-count) — without this rule the cart drawer
 * can never be closed. Keep this; it is load-bearing.
 */
[hidden]{display:none!important}

html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4,h5{font-family:var(--font);font-weight:700;letter-spacing:-.3px}

/* --- Accessibility (spec §7.2) ------------------------------------------ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brand-red);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --- Announcement bar ---------------------------------------------------- */
.announce{background:var(--brand-red-soft);color:var(--brand-red-dark);font-size:13px;font-weight:500;overflow:hidden;height:38px;display:flex;align-items:center;border-bottom:1px solid rgba(216,30,40,.08)}
.announce .track{display:flex;gap:48px;white-space:nowrap;animation:marquee 26s linear infinite;padding-left:48px}
.announce .track span{display:inline-flex;align-items:center;gap:8px}
.announce .track span b{color:var(--brand-red);font-weight:600}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Reduce Motion: stop the marquee, but keep ONE row the user can swipe. The old
   fallback wrapped instead, and because the items are emitted twice for the loop
   that produced a 434px stack of ten lines above the header on a 390px phone. */
@media (prefers-reduced-motion: reduce){
  /*
   * Show ONE message, complete and centred. Nothing moves, nothing is clipped
   * mid-word, and there is nothing that looks like it ought to be moving.
   *
   * This was a horizontal scroller: animation off, one row, swipe for the rest.
   * Reported from the owner's iPhone on 5 Sep 2026 — with Reduce Motion on, the
   * strip "is stuck in one place". It was working exactly as written, and that
   * was the problem: a marquee that has stopped is indistinguishable from a
   * marquee that is broken, and the swipe affordance was invisible. Turning
   * Reduce Motion off "fixed" it, which is how it was diagnosed.
   *
   * A marquee is motion-dependent UI, so the fallback cannot be "the same thing
   * without the motion" — it has to be a different thing. Showing every message
   * is the other option and it is worse: five items wrap to three rows and eat
   * the top of a 390px screen, which is the 434px bug this block was written to
   * fix in the first place.
   *
   * The other messages are not lost. The visually-hidden <p> below the track
   * carries all of them for screen readers, and every claim in the strip is
   * repeated in full further down the page — the USP row, the hero and the
   * footer. Nobody learns anything only from the marquee.
   *
   * Do not "restore" the scroller or the animation here. Both were tried.
   */
  .announce .track{animation:none;overflow:visible;padding:0;gap:0;
    width:100%;justify-content:center}
  .announce .track>span{display:none}
  .announce .track>span:first-child{display:inline-flex;flex:0 1 auto;min-width:0;
    padding:0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* --- Header -------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 0 rgba(0,51,51,.06)}
/* padding-top/bottom, NOT the `padding:16px 0` shorthand: .hbar is also .wrap, and
   the shorthand zeroed .wrap's 24px side padding. That left the logo and search
   sitting 24px left of the nav row and of every other section on the page. */
.hbar{display:flex;align-items:center;gap:22px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:48px;width:auto;display:block}
.search{flex:1;max-width:620px;display:flex;align-items:center;background:var(--bg);border:1.5px solid var(--line);border-radius:30px;padding:0 6px 0 20px;transition:.2s}
.search:focus-within{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(28,116,188,.12)}
.search input{flex:1;border:none;background:none;outline:none;padding:13px 10px;font-size:14px;color:var(--ink)}
.search button{background:var(--brand-red);color:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:16px;flex-shrink:0;transition:.15s}
.search button:hover{background:var(--brand-red-dark)}
.hactions{display:flex;align-items:center;gap:4px;margin-left:auto}
.iconbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border-radius:12px;color:var(--ink);font-size:11px;font-weight:600;transition:.15s;position:relative;min-width:44px}
.iconbtn:hover{background:var(--bg);color:var(--brand-red)}
.iconbtn .g{font-size:20px}
.badge-count{position:absolute;top:0;right:4px;background:var(--brand-red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
/* flex-shrink:0 — .hbar is a flex row, and without it the button was squeezed to
   ~21px on a 375px phone: under its declared 44px and under the 44px tap target. */
.hamburger{display:none;flex-shrink:0;align-items:center;justify-content:center;font-size:22px;padding:0;width:44px;height:44px;color:var(--ink);border-radius:10px;background:#fff;border:1.5px solid var(--line);cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation;box-shadow:var(--shadow-card);margin-left:-4px}
.hamburger:hover,.hamburger:active{background:var(--bg);border-color:var(--brand-red);color:var(--brand-red)}
/* Drawer-only chrome. These were styled solely inside the <=860px block, so on
   desktop the close ✕ rendered as a stray button in the red department bar. */
.menu-head,.menu-close,.nav-search{display:none}

/* --- Nav / mega menu ----------------------------------------------------- */
nav.main{background:var(--brand-red);position:sticky;top:0;z-index:55}
/*
 * 12 departments + Home + Specials measures ~2280px against a 1280px .wrap.
 * Wrapping solved the sideways-document bug but left a second row barely a third
 * full at every width. One row that scrolls instead: nothing is hidden, nothing
 * wraps, and the bar costs half the vertical space.
 *
 * overflow-x on the row makes it a scroll container, which would clip the mega
 * panels — hence .mega is position:fixed and placed by theme.js.
 */
.navwrap{position:relative}
.navrow{display:flex;flex-wrap:nowrap;align-items:stretch;gap:2px;overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.navrow::-webkit-scrollbar{display:none}
.navrow:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.navrow>li{position:relative;list-style:none;flex:0 0 auto}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--shadow-lg);font-size:22px;line-height:1;color:var(--ink);display:grid;place-items:center;transition:.15s;cursor:pointer}
.nav-arrow:hover{background:var(--brand-blue);color:#fff}
.nav-arrow.prev{left:6px}
.nav-arrow.next{right:6px}
/* line-height is explicit because <button> does not inherit it — the UA sheet
   forces `normal`, so department items with a dropdown rendered 4px shorter than
   plain links and sat on a different baseline. Same reason min-height is set:
   both element types must resolve to one row height. */
.navrow>li>a,.navrow>li>button.navlink{display:flex;align-items:center;gap:5px;color:#fff;font-weight:500;font-size:13px;line-height:1.55;min-height:44px;padding:12px 12px;white-space:nowrap;transition:.15s;background:none;border-radius:8px}
/* Specials gets the accent treatment wherever it comes from — our fallback pill or
   the merchant's own menu item. */
/* No margin and the same min-height as every other item: an inset pill sits on its
   own baseline, which is what made the row look ragged. Full height, just rounded. */
/* Specials: the blue pill is a hover state now, not a permanent one (client,
   31 Jul 2026). The geometry — radius and side padding — is applied at rest so
   the item does not resize and shove the rest of the row when the colour lands;
   only `background` changes. */
.navrow>li.nav-highlight>a,.navrow>li.nav-highlight>button.navlink{background:transparent;border-radius:22px;padding-left:18px;padding-right:18px;font-weight:700;transition:background .15s}
.navrow>li.nav-highlight>a:hover,.navrow>li.nav-highlight>a:focus-visible,
.navrow>li.nav-highlight>button.navlink:hover,.navrow>li.nav-highlight>button.navlink:focus-visible,
.navrow>li.nav-highlight>button.navlink[aria-expanded="true"]{background:var(--brand-blue)}
.navrow>li>a:hover,.navrow>li.open>a,
.navrow>li>button.navlink:hover,.navrow>li.open>button.navlink{background:rgba(0,0,0,.14)}
.navrow .chev{font-size:10px;opacity:.8;transition:transform .18s}
.navrow>li.open .chev{transform:rotate(180deg)}
.pill{background:var(--brand-blue)!important;border-radius:20px;margin:6px 4px;padding:8px 16px!important;font-weight:600!important;color:#fff!important}
/* Two rules here are load-bearing, both learned the hard way:
   1. The transition MUST NOT cover top/left. `transition:.18s` is shorthand for
      `all`, and once the panel became position:fixed that animated it in from the
      viewport's top-left corner on every open, straight over the header.
   2. No translateY. The panel hangs off the bar with nothing between them, so a
      lift animation held it ~8px clear of the bar for the whole transition. That
      strip is not part of the menu, so a pointer heading into the panel crossed
      dead ground, fired mouseleave, and closed the menu it was aiming for. */
.mega{position:fixed;top:0;left:0;background:#fff;color:var(--ink);min-width:560px;max-width:calc(100vw - 24px);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lg);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;opacity:0;visibility:hidden;transition:opacity .14s,visibility .14s;border-top:3px solid var(--brand-blue)}
.navrow>li.open .mega{opacity:1;visibility:visible}
/* Dropdown horizontal placement is set by theme.js (positionMega), because once
   .navrow wraps, CSS cannot tell whether an item ended up at the left or right of
   a row — a static nth-child rule pushed row-2 menus off-screen. */
.mega h5{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--brand-red);margin:6px 0 10px;font-weight:700}
.mega .col{padding:4px 0}
.mega a.item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-size:13.5px;color:var(--ink);transition:.12s}
.mega a.item:hover{background:var(--brand-blue-soft);color:var(--brand-blue-dark)}
.mega a.item .e{font-size:16px}
.mega a.item .e-img{width:36px;height:36px;object-fit:contain;border-radius:8px;background:var(--bg);flex-shrink:0}
.mega .promo{grid-column:1/-1;margin-top:10px;background:var(--brand-blue-soft);border-radius:var(--radius);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.mega .promo b{color:var(--brand-red)}
.mega .promo a{background:var(--brand-red);color:#fff;padding:9px 16px;border-radius:20px;font-weight:600;font-size:12.5px;white-space:nowrap;transition:.15s}
.mega .promo a:hover{background:var(--brand-red-dark)}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 500px at 85% 10%,rgba(28,116,188,.10),transparent),radial-gradient(600px 400px at 10% 110%,rgba(216,30,40,.08),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 24px 70px;position:relative}
.hero-copy{color:var(--ink);max-width:560px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--brand-red-soft);border:1px solid rgba(216,30,40,.12);color:var(--brand-red-dark);padding:7px 16px;border-radius:30px;font-size:12.5px;font-weight:600;margin-bottom:20px}
.eyebrow b{color:var(--brand-red)}
.hero h1{font-size:48px;line-height:1.08;font-weight:800;letter-spacing:-.8px;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--brand-red)}
.hero p{font-size:17px;color:var(--muted);margin-bottom:28px;max-width:480px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;padding:14px 26px;border-radius:30px;transition:.18s;border:1.5px solid transparent}
.btn-primary{background:var(--brand-red);color:#fff;border-color:var(--brand-red)}
.btn-primary:hover{background:var(--brand-red-dark);border-color:var(--brand-red-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(216,30,40,.22)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand-red);color:var(--brand-red)}
.hero-stats{display:flex;gap:32px;margin-top:34px}
.hero-stats div b{display:block;font-size:24px;font-weight:800;color:var(--brand-red)}
.hero-stats div span{font-size:13px;color:var(--muted)}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-lg)}
.method-tabs{display:flex;gap:6px;background:var(--bg);padding:5px;border-radius:12px;margin-bottom:18px;border:1px solid var(--line)}
.mtab{flex:1;color:var(--ink);font-size:13px;font-weight:600;padding:11px;border-radius:10px;transition:.15s;background:none}
.mtab[aria-selected="true"]{background:var(--brand-red);color:#fff}
.mtab:hover:not([aria-selected="true"]){background:#fff}
.hero-card h4,.hero-card h2{color:var(--ink);font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:8px;font-weight:700}
.postcode{display:flex;gap:10px;margin-bottom:16px}
.postcode input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;font-family:inherit;outline:none;background:var(--bg)}
.postcode input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(28,116,188,.10)}
.postcode button{background:var(--brand-blue);color:#fff;font-weight:700;padding:0 22px;border-radius:12px;font-size:14px;transition:.15s}
.postcode button:hover{background:var(--brand-blue-dark)}
/* Answer to the delivery check. Colour is a reinforcement, never the only signal:
   each state opens with its own wording and an emoji or plain lead-in. */
.postcode-result{font-size:13.5px;line-height:1.5;border-radius:12px;padding:12px 14px;margin:-6px 0 16px;border:1px solid transparent}
.postcode-result.yes{background:#eaf7ee;border-color:#bfe3c9;color:#1c6b32}
.postcode-result.no{background:#eef4fb;border-color:#c9dcf0;color:#1a4f7d}
.postcode-result.bad{background:var(--brand-red-soft);border-color:#f2c4c7;color:var(--brand-red-dark)}
/* Sitting on a zone boundary is neither a yes nor a no. Amber rather than green,
   so nobody reads "your address might qualify" as a confirmation. */
.postcode-result.maybe{background:#fdf6e3;border-color:#ecd9a4;color:#7a5a12}
@media (max-width:640px){.postcode{flex-wrap:wrap}.postcode button{flex:1 0 100%;padding:13px 22px}}
.hero-card ul{list-style:none;display:grid;gap:12px}
.hero-card li{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:10px}
.hero-card li .ck{background:var(--green-soft);color:var(--green);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex-shrink:0}

/* --- USP strip ----------------------------------------------------------- */
.usp{background:#fff;border-bottom:1px solid var(--line)}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 24px}
.usp .u{display:flex;align-items:center;gap:14px}
.usp .u .g{font-size:24px;width:50px;height:50px;background:var(--green-soft);border-radius:var(--radius);display:grid;place-items:center;flex-shrink:0}
.usp .u b{font-size:14px;display:block}
.usp .u span{font-size:12.5px;color:var(--muted)}

/* --- Section shells ------------------------------------------------------ */
section.blk{padding:64px 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:16px}
.head h2{font-size:30px;font-weight:800;letter-spacing:-.5px}
.head h2 small{display:block;font-size:12.5px;font-weight:600;color:var(--brand-red);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px}
.head p{color:var(--muted);font-size:15px;margin-top:6px}
.viewall{color:var(--brand-red);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.15s}
.viewall:hover{gap:10px}

/* --- How it works -------------------------------------------------------- */
.how{background:#fff}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 14px;text-align:center;transition:.2s;position:relative}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step .n{width:32px;height:32px;margin:0 auto 10px;border-radius:50%;background:var(--brand-red-soft);color:var(--brand-red);font-weight:800;display:grid;place-items:center;font-size:13px;border:2px solid rgba(216,30,40,.10)}
.step .g{font-size:26px;margin-bottom:6px}
.step h4,.step h3{font-size:14px;margin-bottom:4px;font-weight:700}
.step p{font-size:12px;color:var(--muted);line-height:1.45}

/* --- Shop by aisle ------------------------------------------------------- */
.aisles{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.aisle{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;text-align:center;transition:.2s;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.aisle:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--brand-red)}
/* Image-forward square tiles, sized like the benchmark's 300x300 category cards */
.aisle .ico{font-size:44px;position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--bg);overflow:hidden}
.aisle .ico img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.aisle:hover .ico img{transform:scale(1.06)}
.aisle .info{padding:16px 12px;position:relative;background:var(--card)}
.aisle b{font-size:15px;display:block;margin-bottom:4px;position:relative;font-weight:700}
.aisle span{font-size:12.5px;color:var(--muted);position:relative;display:inline-flex;align-items:center;gap:4px;background:var(--green-soft);color:var(--green);padding:3px 10px;border-radius:20px;font-weight:600}

/* --- Hot offers ---------------------------------------------------------- */
/* section.blk sets padding as element+class, so this needs the element too. */
section.offers-blk{padding-top:44px;padding-bottom:8px}
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.offer{border-radius:var(--radius-lg);padding:24px;color:#fff;position:relative;overflow:hidden;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s;box-shadow:var(--shadow-card)}
.offer:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.offer b{font-size:18px;font-weight:800;line-height:1.15}
.offer span{font-size:13px;opacity:.92;margin-top:4px;display:block}
.offer .go{font-size:13px;font-weight:600;margin-top:14px;display:inline-flex;gap:6px}
.offer .big{position:absolute;right:-6px;top:-10px;font-size:64px;opacity:.16}
.o1{background:linear-gradient(135deg,var(--brand-red),var(--brand-red-dark))}
.o2{background:linear-gradient(135deg,var(--cta-green),#0B6B34)}
.o3{background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark))}
.o4{background:linear-gradient(135deg,#3a2a6b,#2a1e50)}

/* --- Rewards ------------------------------------------------------------- */
.rewards{background:var(--bg)}
.rw-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rw{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:flex;gap:20px;align-items:center;box-shadow:var(--shadow-card)}
.rw .ic{width:64px;height:64px;flex-shrink:0;border-radius:var(--radius);display:grid;place-items:center;font-size:28px}
.rw.a .ic{background:var(--brand-blue-soft)}
.rw.b .ic{background:var(--green-soft)}
.rw h4,.rw h3{font-size:18px;margin-bottom:6px;font-weight:700}
.rw p{font-size:14px;color:var(--muted);margin-bottom:12px}
.rw .code{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--brand-red-dark);background:#fff;border:1.5px dashed var(--brand-red);border-radius:8px;padding:6px 12px}
.rw .lnk{color:var(--brand-red);font-weight:600;font-size:14px;display:inline-flex;gap:6px}

/* --- Product cards ------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s;position:relative}
.card:hover{border-color:rgba(216,30,40,.35)}
/* Product photography sits on plain white with no lift and no shadow (client,
   1 Aug 2026). The grey --bg plate behind each shot showed as a visible box
   around packets photographed on white, and the card's drop shadow plus the
   translateY hover competed with the product itself. Only the border reacts now.

   `padding` is smaller too: at 14px on a ~200px tile the photo was being
   rendered well under the size it was fetched at, which reads as soft. */
.card .thumb{aspect-ratio:1;position:relative;display:grid;place-items:center;overflow:hidden;background:#fff}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:8px;transition:transform .25s;image-rendering:auto}
.card:hover .thumb img{transform:scale(1.05)}
.card .thumb .emoji{font-size:64px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.10));transition:.25s}
.card:hover .thumb .emoji{transform:scale(1.08) rotate(-3deg)}
/* Ribbons, flush to the corner, rather than floating rounded pills — matches the
   benchmark site the client sent (31 Jul 2026). clip-path cuts the notch on the
   trailing edge so it reads as a swing tag; browsers without clip-path support
   just get a clean rectangle, which is a fine floor. */
.tags{position:absolute;top:10px;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:2}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 16px 5px 9px;border-radius:0 3px 3px 0;letter-spacing:.2px;color:#fff;line-height:1.25;box-shadow:0 1px 4px rgba(0,0,0,.18);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%)}
.tag .tag-ico{flex-shrink:0}
.tag.new{background:var(--brand-blue)}
.tag.sale{background:var(--brand-red)}
@media (max-width:640px){.tag{font-size:10.5px;padding:4px 14px 4px 7px}}
.wish{position:absolute;top:12px;right:12px;width:36px;height:36px;background:#fff;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:15px;z-index:2;transition:.15s;box-shadow:var(--shadow-card)}
.wish:hover{background:var(--brand-red-soft);border-color:var(--brand-red);transform:scale(1.1)}
.wish[aria-pressed="true"]{background:var(--brand-red-soft);border-color:var(--brand-red)}
.stock{position:absolute;bottom:12px;left:12px;font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;background:#fff;display:flex;align-items:center;gap:5px;z-index:2;box-shadow:var(--shadow-card);border:1px solid var(--line)}
.stock .dot{width:7px;height:7px;border-radius:50%}
.stock.in .dot{background:var(--green)}
.stock.low .dot{background:var(--yellow)}
.stock.out{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-soft)}
.stock.out .dot{background:var(--danger)}
.card .body{padding:16px;display:flex;flex-direction:column;flex:1}
.card .brand{font-size:11px;color:var(--brand-blue);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.card h3{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:8px;min-height:40px}
.card h3 a:hover{color:var(--brand-red)}
.rating{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-bottom:10px}
.rating.none{opacity:.5}
.stars{color:var(--star);letter-spacing:1px}
.priced{display:flex;align-items:baseline;gap:8px;margin-top:auto;margin-bottom:3px}
.price{font-size:19px;font-weight:800;color:var(--ink)}
.was{font-size:13px;color:var(--muted);text-decoration:line-through}
.unit{font-size:12px;color:var(--green);font-weight:600;margin-bottom:8px;min-height:18px}
/* The 18px above reserves a line so cards with and without a unit price still
   line up. On the real store NO product has one — the ktm.unit_price metafield
   has never been created — so that reservation was 18px of dead space on every
   card on every page. Collapse it when there is nothing to show; where some
   products do have one the reservation still does its job. */
.unit:empty{min-height:0;margin-bottom:0}
.multibuy{display:inline-flex;align-items:center;gap:5px;background:var(--brand-blue-soft);color:var(--brand-blue-dark);font-size:11px;font-weight:600;padding:4px 9px;border-radius:20px;margin-bottom:10px;width:fit-content}
.add{background:var(--ink);color:#fff;border-radius:10px;padding:12px;font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;width:100%;min-height:44px}
.add:hover{background:var(--brand-red)}
.add[disabled]{background:var(--line);color:var(--muted);cursor:not-allowed}
.add .g{font-size:16px}

/* --- Why KTM ------------------------------------------------------------- */
.why{background:#fff}
.why .head h2{color:var(--ink)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}
.cmp{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-card)}
.cmp.us{position:relative;border-color:rgba(13,137,62,.25);box-shadow:0 4px 20px rgba(13,137,62,.08)}
.cmp.us .crown{position:absolute;top:-14px;left:28px;background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:6px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.cmp.them{background:var(--bg)}
.cmp h4,.cmp h3{font-size:18px;margin-bottom:18px;display:flex;align-items:center;gap:9px;font-weight:700}
.cmp ul{list-style:none;display:grid;gap:14px}
.cmp li{display:flex;gap:12px;font-size:14.5px;align-items:flex-start}
.cmp.us li .m{color:var(--green);font-weight:800;font-size:16px;line-height:1.2}
.cmp.them li{color:var(--muted)}
.cmp.them li .m{color:var(--muted);font-weight:800;font-size:16px;line-height:1.2}

/* --- Reviews ------------------------------------------------------------- */
/* --- Reviews (Google Business Profile) ----------------------------------- */
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:10px}
.rv-head{display:flex;align-items:center;gap:10px}
.rv-avatar{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--brand-blue-soft);color:var(--brand-blue-dark);display:grid;place-items:center;font-weight:800;font-size:16px}
.rv-head b{display:block;font-size:14px;font-weight:700;line-height:1.2}
.rv-date{font-size:12px;color:var(--muted)}
.rv-stars{color:#f5a623;font-size:15px;letter-spacing:2px;line-height:1}
.rv-body{font-size:13.5px;color:var(--ink);line-height:1.5}
/* The owner reply is Google's nested reply, so it reads as an indented thread. */
.rv-reply{margin-top:auto;border-left:3px solid var(--line);padding:8px 0 2px 12px}
.rv-reply b{font-size:12px;font-weight:700;color:var(--ink)}
.rv-owner{font-weight:500;color:var(--muted)}
.rv-reply p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.reviews-head{align-items:flex-end}

/* --- Newsletter ---------------------------------------------------------- */
.news{background:var(--brand-red-soft)}
.news .wrap{text-align:center;padding:56px 24px}
.news h2{font-size:30px;font-weight:800;margin-bottom:10px;color:var(--ink)}
.news p{color:var(--muted);margin-bottom:24px;font-size:16px}
.news form{display:flex;gap:12px;max-width:480px;margin:0 auto;background:#fff;padding:6px;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow-card)}
.news input{flex:1;border:none;border-radius:24px;padding:14px 18px;font-size:15px;font-family:inherit;outline:none;background:transparent}
.news input:focus{box-shadow:none}
.news button{background:var(--brand-red);color:#fff;font-weight:600;padding:0 28px;border-radius:24px;min-height:44px;transition:.15s}
.news button:hover{background:var(--brand-red-dark)}

/* --- Footer -------------------------------------------------------------- */
/* Footer picks up the nav bar's palette (client, 1 Aug 2026): --brand-red behind
   it, #fff type, and rgba(0,0,0,.14) hovers — the same three values nav.main and
   .navrow>li>a use, referenced rather than re-typed so the two cannot drift.

   White on --brand-red measures 5.12:1, comfortably past AA for body text. That
   is why the type here is solid #fff or .92 alpha at the lightest: dropping to
   the .8-ish alphas that read as "secondary" on the old dark-green ground would
   fall under 4.5:1. Hierarchy comes from weight and size instead.

   Depth: the band was 52/34px when it had four columns. It has two. */
.site-footer{background:var(--brand-red);color:#fff;font-size:13px}
/* padding-top/bottom, NOT `padding:30px 0 18px`: .fgrid, .ftop and .fbot are all
   also .wrap, and the shorthand zeroes .wrap's 24px side padding — the logo,
   copyright and payment badges all sat flush against the viewport edge. Same
   trap as .hbar in the header; see the note there. */
.fgrid{display:grid;grid-template-columns:1fr 1.8fr;gap:24px;padding-top:20px;padding-bottom:10px}
.fbrand .logo{display:inline-flex;background:#fff;padding:5px 9px;border-radius:8px}
.fbrand .logo img{height:34px;width:auto;display:block}
.fbrand p{margin:9px 0;max-width:340px;line-height:1.5;color:rgba(255,255,255,.92)}
.fcontact{display:grid;gap:3px}
.fcontact a{display:flex;align-items:center;gap:8px;color:#fff}
.fcontact a .g{color:#fff}
.site-footer h5,.site-footer h2{color:#fff;font-size:13px;margin-bottom:8px;font-weight:700}
.site-footer ul{list-style:none;display:grid;gap:4px}
.site-footer ul a{color:#fff}
.site-footer ul a:hover{text-decoration:underline}
/* "More Information" can no longer be picked out in red - it sits on red now.
   Uppercase, tracking and weight mark it as a heading instead, which was already
   doing most of the work. */
.fpolicies h5,.fpolicies h2{text-transform:uppercase;letter-spacing:.9px;font-size:12px}

/* `.site-footer ul` sets display:grid and outweighs a bare `.socials`, which
   stacked the three icons into a vertical column. Match its specificity. */
.site-footer ul.socials{display:flex;gap:8px;margin-top:10px;list-style:none;padding:0}
.socials a{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;transition:background .15s,transform .15s}
/* Hover matches the nav's, which darkens rather than tints - a red hover on a
   red ground would not read at all. */
.socials a:hover{background:rgba(0,0,0,.18);transform:translateY(-2px)}
.socials svg{display:block;width:16px;height:16px}

/* Back to top shares the copyright row - see the note in footer.liquid. Its own
   bordered band cost 55px to hold one link, and stacked with the copyright's
   41px the last two rows of the site were 96px of pure chrome. */
.backtotop{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.3px;padding:6px 16px;border-radius:8px;min-height:36px;transition:background .15s}
.backtotop:hover{background:rgba(0,0,0,.14)}
.backtotop .chev{display:block;transition:transform .15s}
.backtotop:hover .chev{transform:translateY(-2px)}

/* Payment badges, own row above the copyright - see the note in footer.liquid
   for why they cannot live in the last row of the page. */
.fpay{border-top:1px solid rgba(255,255,255,.22);padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.fpay-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;color:#fff;font-weight:600}
/* Copyright left, Back to top right - one row doing the work of two. */
.fbot{border-top:1px solid rgba(255,255,255,.22);padding-top:6px;
  /* Extra room at the very bottom so the last line clears a phone's home
     indicator and any fixed bottom chrome. */
  padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pays{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center}
.pays .pay-icon{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:0;padding:0;transition:.15s}
.pays .pay-icon:hover{transform:translateY(-2px)}
/* Covers both paths: <img> for the bundled fallback, <svg> for the badges the
   store renders from shop.enabled_payment_types. */
.pays .pay-icon img,.pays .pay-icon svg{display:block;width:auto;height:23px}

/* --- Toast --------------------------------------------------------------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:12px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);z-index:200;display:flex;align-items:center;gap:10px;transition:.3s;opacity:0}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast .g{color:var(--green);font-size:18px}

/* --- Breadcrumbs / collection ------------------------------------------- */
.crumbs{font-size:12.5px;color:var(--muted);padding:18px 0 0}
.crumbs a:hover{color:var(--brand-red)}
.crumbs span{margin:0 6px;opacity:.5}
.coll-head{padding:18px 0 26px}
.coll-head h1{font-size:32px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.coll-head .count{color:var(--muted);font-size:13.5px}
.coll-head .intro{color:var(--muted);font-size:14px;max-width:760px;margin-top:12px;line-height:1.65}
.coll-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start;padding-bottom:60px}
/* The rail is hidden on every page at every width until Filter is pressed, and
   `.filters-open` is the single state that reveals it — the earlier pair of
   classes encoded opposite defaults either side of 860px, so "open" meant
   different things depending on the viewport and the button's resting label was
   wrong on one of them.

   Scoped to `.js` (set by an inline script in layout/theme.liquid): the button
   that reopens the rail is scripted, so with JavaScript off the rail must stay
   in the flow or filtering becomes unreachable. */
.js .coll-layout{grid-template-columns:1fr}
.js .coll-layout .facets{display:none}
.js .coll-layout.filters-open{grid-template-columns:250px 1fr}
.js .coll-layout.filters-open .facets{display:block}
.facets{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:120px}
.facets-head{display:none}
/* A facet group is a <details>: collapsible with no JavaScript, and it announces
   its own state. The chevron flips via [open]. */
.facet{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.facet>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;list-style:none;padding:2px 0;min-height:32px}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;border-radius:6px}
.facet .facet-chev{flex-shrink:0;color:var(--muted);transition:transform .18s}
.facet:not([open]) .facet-chev{transform:rotate(180deg)}
.facet-body{padding-top:10px}
.facet-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.facet-list li.over{display:none}
.facet-list.show-all li.over{display:block}
.facet-more{background:none;border:none;padding:6px 0;margin-top:4px;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;cursor:pointer;min-height:32px}
.facet-more:hover{color:var(--brand-red)}
.fl-label{flex:1;min-width:0}

/* Dual-range price slider. Two stacked range inputs — only the thumbs take
   pointer events, so both stay grabbable over a single shared track. */
.price-slider{position:relative;height:34px;margin-top:14px}
.price-slider .ps-track{position:absolute;top:50%;left:9px;right:9px;height:3px;
  transform:translateY(-50%);background:var(--line);border-radius:3px}
.price-slider .ps-fill{position:absolute;top:0;bottom:0;background:var(--ink);border-radius:3px}
.price-slider .ps-thumb{position:absolute;top:0;left:0;width:100%;height:34px;margin:0;
  background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.price-slider .ps-thumb:focus{outline:none}
.price-slider .ps-thumb::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:grab}
.price-slider .ps-thumb::-moz-range-thumb{pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:grab}
.price-slider .ps-thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(28,116,188,.35)}
.price-slider .ps-thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(28,116,188,.35)}
/* :last-of-type, not :last-child — a <noscript> .facet follows the groups, so
   :last-child never matched the last real one and left a divider hanging. */
details.facet:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.facet h4,.facet h2{font-size:15px;color:var(--ink);margin:0;font-weight:700;letter-spacing:-.1px}
.facet label{display:flex;align-items:center;gap:10px;font-size:14px;padding:6px 0;cursor:pointer;min-height:34px}
.facet label:hover{color:var(--brand-red)}
.facet input[type=checkbox]{accent-color:var(--ink);width:17px;height:17px;flex-shrink:0}
.facet .n{margin-left:auto;color:var(--muted);font-size:13px;flex-shrink:0}
/* Applied-filter chips. On a phone the rail collapses on reload, so these are the
   only visible evidence a filter is on and the only one-tap way to drop it. */
.facet.applied h4 .n{margin-left:8px;background:var(--brand-red);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;list-style:none;padding:0}
.chips a{display:inline-flex;align-items:center;gap:6px;background:var(--brand-red-soft);color:var(--brand-red-dark);border:1px solid #f2c4c7;border-radius:16px;padding:6px 11px;font-size:12.5px;line-height:1.3;text-decoration:none;min-height:32px}
.chips a:hover{background:var(--brand-red);color:#fff;border-color:var(--brand-red)}
.chips .x{font-size:15px;line-height:1;opacity:.75}

/* "Browse everything" — the catch-all collection, given its own route rather
   than sitting in the department grid as a 439-item tile. */
.browse-all{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--brand-blue-soft);border:1.5px solid #c9dcf0;border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;color:var(--brand-blue-dark);transition:background .15s,border-color .15s}
.browse-all:hover{background:#dcebf8;border-color:var(--brand-blue)}
.browse-all .ba-text{display:grid;gap:2px}
.browse-all .ba-text b{font-size:15px;color:var(--ink)}
.browse-all .ba-text span{font-size:13px;color:var(--muted)}
.browse-all .ba-go{font-size:20px;line-height:1;flex-shrink:0}

/* Department with nothing buyable in it. Amber rather than red: the shop is
   working fine, the shelf is just empty today. */
.coll-oos{display:flex;align-items:flex-start;gap:11px;background:#FFF6E5;border:1.5px solid #F3D08A;border-radius:var(--radius);padding:13px 16px;margin-bottom:20px;font-size:13.5px;line-height:1.55;color:#6B4E12}
.coll-oos .g{font-size:18px;line-height:1.3;flex-shrink:0}
.coll-oos b{display:block;color:#4A360A;margin-bottom:2px}
.coll-oos a{text-decoration:underline;color:inherit;font-weight:600}
/* The tile stays legible — dimming it would make the label harder to read than
   the count it replaces. Only the flag changes. */
.aisle .oos-flag{display:inline-flex;align-items:center;gap:6px;background:#FFF1D9;color:#8A6410;border-radius:20px;padding:3px 11px;font-size:12px;font-weight:600}
.aisle .oos-flag .dot{width:6px;height:6px;border-radius:50%;background:#C98A12;flex-shrink:0}
.aisle-oos .ico img{opacity:.72;transition:opacity .15s}
.aisle-oos:hover .ico img{opacity:1}

/* Saved-items drawer. Borrows the cart drawer's shell; only the empty state and
   the footer differ, so the differences are scoped rather than restated. */
.wish-drawer .wish-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:40px 24px;color:var(--muted);font-size:14px;line-height:1.6}
.wish-drawer .wish-empty .g{font-size:40px}
.wish-drawer .wish-note{font-size:12px;color:var(--muted);opacity:.85}
.wish-drawer .cart-item{align-items:center}
.wish-drawer .ci-remove{background:none;border:none;color:var(--muted);font-size:12.5px;text-decoration:underline;padding:6px;min-height:32px;cursor:pointer}
.wish-drawer .ci-remove:hover{color:var(--brand-red)}
.wish-foot{display:grid}
/* Toolbar — rebuilt to the client's reference (1 Aug 2026):
   [ Filter ⚙ ] | Sort by  Featured ⌄            View as  ☰ ▦
   Hairlines above and below, everything on one row, Filter present at all
   widths rather than mobile-only. */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:10px;padding-bottom:10px}
.toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.toolbar-sep{width:1px;align-self:stretch;min-height:26px;background:var(--line)}

.filter-toggle{display:inline-flex;align-items:center;gap:9px;background:none;border:none;
  color:var(--ink);font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.1px;
  padding:8px 10px;margin-left:-10px;border-radius:8px;min-height:40px;cursor:pointer;transition:background .15s}
.filter-toggle:hover{background:var(--bg)}
.filter-toggle .ft-ico{flex-shrink:0}
.filter-toggle .badge{background:var(--brand-red);color:#fff;border-radius:10px;padding:1px 7px;font-size:11.5px;font-weight:700}

.sortform{display:flex;align-items:center;gap:8px}
.sortlabel{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap}
/* The chevron is ours, so the native arrow is suppressed and the select padded
   to leave room for it. */
.sortwrap{position:relative;display:inline-flex;align-items:center}
.toolbar select{font-family:inherit;font-size:14px;color:var(--ink);padding:8px 30px 8px 4px;
  border:none;background:none;min-height:40px;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.toolbar select:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;border-radius:6px}
.sortchev{position:absolute;right:8px;pointer-events:none;color:var(--ink)}

.viewas{display:flex;align-items:center;gap:10px}
.viewas-label{font-weight:700;font-size:14px;color:var(--ink)}
.viewas-btns{display:flex;gap:2px}
.viewas-btns button{display:grid;place-items:center;width:36px;height:36px;border:none;background:none;
  border-radius:8px;color:#9aa5a5;cursor:pointer;transition:color .15s,background .15s}
.viewas-btns button:hover{background:var(--bg);color:var(--ink)}
.viewas-btns button[aria-pressed="true"]{color:var(--ink)}

/* List view. Same cards turned on their side — a row should read at a glance, so
   the fixed heights and stacked spacing that make a grid tile square are all
   unwound here, otherwise each row ran to ~400px tall. */
.grid.is-list{grid-template-columns:1fr;gap:10px}
.grid.is-list .card{flex-direction:row;align-items:center}
.grid.is-list .card .thumb{flex:0 0 128px;width:128px;aspect-ratio:1;align-self:center;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
/* Three columns — details | price | actions. Two columns put the price and the
   Add to cart button in the same cell, and the later element simply covered the
   price. */
.grid.is-list .card .body{flex:1;padding:12px 16px;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto auto;
  align-items:center;column-gap:20px;row-gap:2px}
.grid.is-list .card .brand{grid-column:1;grid-row:1}
.grid.is-list .card h3{grid-column:1;grid-row:2;font-size:15px;margin:0;min-height:0}
.grid.is-list .card .rating{grid-column:1;grid-row:3;margin:0}
.grid.is-list .card .priced{grid-column:2;grid-row:1/3;margin:0;justify-content:flex-end;align-self:end}
.grid.is-list .card .unit{grid-column:2;grid-row:3;margin:0;text-align:right;align-self:start}
.grid.is-list .card .multibuy{display:none}
.grid.is-list .card-actions{grid-column:3;grid-row:1/4;align-self:center;width:180px;margin:0}
.grid.is-list .view-details{display:none}
/* The stock pill is absolutely placed against the square tile; keep it inside. */
.grid.is-list .card .stock{bottom:8px;left:8px}
@media (max-width:640px){
  .grid.is-list .card .thumb{flex-basis:96px;width:96px}
  .grid.is-list .card .body{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;padding:10px 12px}
  .grid.is-list .card h3{font-size:14px}
  .grid.is-list .card .brand,.grid.is-list .card h3,.grid.is-list .card .priced,
  .grid.is-list .card .unit,.grid.is-list .card-actions{grid-column:1}
  .grid.is-list .card .priced{grid-row:3;justify-content:flex-start}
  .grid.is-list .card-actions{grid-row:4;width:100%}
  .grid.is-list .card .rating,.grid.is-list .card .unit,.grid.is-list .card .multibuy{display:none}
}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px;min-height:40px;display:grid;place-items:center;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;padding:0 12px}
.pagination a:hover{border-color:var(--brand-red);color:var(--brand-red)}
.pagination .current{background:var(--brand-red);color:#fff;border-color:var(--brand-red)}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .g{font-size:48px;display:block;margin-bottom:12px}

/* --- Product detail ------------------------------------------------------ */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:26px 0 60px;align-items:start}
.pdp-gallery{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:1;display:grid;place-items:center}
.pdp-gallery img{width:100%;height:100%;object-fit:contain;padding:24px}
.pdp-gallery .emoji{font-size:120px}
.pdp h1{font-size:28px;font-weight:800;letter-spacing:-.3px;margin:6px 0 10px;line-height:1.2}
.pdp .vendor{font-size:12px;color:var(--brand-blue);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.pdp .pdp-price{display:flex;align-items:baseline;gap:10px;margin:16px 0 4px}
.pdp .pdp-price .price{font-size:30px}
.pdp .desc{font-size:14px;color:var(--muted);line-height:1.7;margin:20px 0}
.pdp .desc p{margin-bottom:10px}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:10px;width:fit-content;overflow:hidden}
.qty button{width:44px;height:44px;font-size:18px;font-weight:700;background:var(--bg)}
.qty button:hover{background:var(--line)}
.qty input{width:56px;height:44px;text-align:center;border:none;outline:none;font-family:inherit;font-size:15px;font-weight:600}
/*
 * The stock pill is absolutely positioned inside a card thumbnail. On the PDP it
 * sits in normal flow instead, so it needs the positioning undone here rather
 * than via an inline style (spec §7.1 targets a CSP without inline anything).
 */
.pdp-stock{margin-top:14px}
.pdp-stock .stock{position:static;display:inline-flex}
.pdp-actions{display:flex;gap:12px;align-items:center;margin:20px 0}
.pdp-actions .add{width:auto;flex:1;padding:14px 28px}
.meta-list{display:grid;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px}
.meta-list div{display:flex;gap:10px;align-items:center;color:var(--muted)}
.meta-list b{color:var(--ink);font-weight:600}

/* --- Data-quality dev banner (local only) -------------------------------- */
.devbar{background:#2a1e50;color:#fff;font-size:12.5px;padding:8px 20px;text-align:center}
.devbar b{color:#ffd166}

/* --- Responsive ---------------------------------------------------------- */
.mobile-scrim{display:none}
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .aisles{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .offers{grid-template-columns:repeat(2,1fr)}
  .coll-layout{grid-template-columns:210px 1fr;gap:20px}
}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding:38px 20px 44px}
  .hero h1{font-size:34px}
  .usp .wrap{grid-template-columns:repeat(2,1fr)}
  /* Left drawer, not a full-bleed sheet. Full-bleed covered the scrim entirely,
     so "tap outside to close" had nothing left to tap. visibility (not display)
     keeps the panel out of the tab order while still allowing a slide. */
  nav.main{position:fixed;inset:0 auto 0 0;width:min(86vw,340px);background:#fff;z-index:200;
           overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
           box-shadow:var(--shadow-lg);padding-top:0;
           visibility:hidden;transform:translateX(-100%);
           transition:transform .24s ease,visibility 0s linear .24s}
  nav.main.show{visibility:visible;transform:none;transition:transform .24s ease}
  /* sticky, not absolute: the panel scrolls, and an absolute close button scrolled
     off the top of a 13-department menu. */
  .menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
             position:sticky;top:0;z-index:1;background:#fff;padding:12px 20px;
             border-bottom:1px solid var(--line)}
  .menu-title{font-weight:700;font-size:15px;color:var(--ink)}
  .nav-search{display:block}
  /* The shared row rule is space-between, for the department chevron. This row has
     no chevron, so the label would drift to the far edge away from its icon. */
  .navrow>li.nav-search>a{justify-content:flex-start;gap:10px;font-weight:600}
  /* The drawer is a vertical list, so undo the desktop scroll container. */
  .navrow{flex-direction:column;flex-wrap:wrap;overflow:visible;padding:0 0 24px}
  .nav-arrow{display:none}
  .navwrap{position:static}
  .navrow>li>a,.navrow>li>button.navlink{color:var(--ink);border-bottom:1px solid var(--line);justify-content:space-between;width:100%;padding:16px 20px;font-size:15px;min-height:52px;background:transparent}
  .navrow>li>button.navlink{cursor:pointer}
  .navrow>li>button.navlink:active{background:var(--bg)}
  .navrow .chev{font-size:14px;transition:transform .2s}
  .navrow>li.open .chev{transform:rotate(180deg)}
  .pill{margin:8px 20px}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;grid-template-columns:1fr;min-width:0;display:none;border-radius:0;background:var(--bg);margin:0 20px 8px;border-radius:var(--radius);border:1px solid var(--line);padding:10px 14px}
  .navrow>li.open .mega{display:grid}
  .mega h5{font-size:10.5px;margin:8px 0 6px}
  .mega a.item{padding:10px 8px;font-size:13.5px}
  .mega a.item .e-img{width:28px;height:28px}
  .mega .promo{padding:10px 12px;font-size:12px;gap:8px}
  .mega .promo a{padding:7px 12px;font-size:11px}
  .hamburger{display:flex}
  /* Search stays in the header on a phone rather than being buried in the drawer.
     This was `display:none` until 3 Sep 2026 — and because templates/search.liquid
     carried no input of its own, that left a phone with no way to type a query
     anywhere on the site. The owner reported it and rolled the theme back.
     Wrapped onto its own full-width row under the logo. */
  .hbar{flex-wrap:wrap;row-gap:10px}
  .search{order:3;flex:1 0 100%;max-width:none}
  .mobile-scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150}
  .menu-close{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-size:18px;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation}
  .menu-close:hover{background:var(--brand-red-soft);border-color:var(--brand-red);color:var(--brand-red)}
  .pdp{grid-template-columns:1fr;gap:24px}
  .coll-layout{grid-template-columns:1fr}
  /* Fixed panel, not a block in the flow — see the note in facets.liquid.
     `.js` only: unscripted, the drawer has no way to open, so it stays a block. */
  .js .facets{position:fixed;inset:0 auto 0 0;width:min(88vw,340px);max-width:100%;
    z-index:200;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border:none;border-radius:0;padding:0 20px 28px;display:none;
    box-shadow:var(--shadow-lg);animation:slideInLeft .2s ease}
  .js .facets.show{display:block}
  .js .facets-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;background:var(--card);z-index:1;
    padding:16px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .facets-title{font-size:17px;font-weight:800;color:var(--ink)}
  .facets-close{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
    background:var(--bg);border:1px solid var(--line);font-size:16px;color:var(--ink);cursor:pointer;
    -webkit-appearance:none;appearance:none}
  .facets-close:hover{background:var(--brand-red-soft);border-color:var(--brand-red);color:var(--brand-red)}
  @keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
  @media (prefers-reduced-motion: reduce){.facets{animation:none}}
  /* Open is open at both widths, but below 860 the rail overlays the page rather
     than taking a column, so the desktop `.filters-open` grid must be undone —
     it is the more specific selector and would otherwise win here. */
  .js .coll-layout.filters-open{grid-template-columns:1fr}
  .toolbar{gap:10px}
  .viewas-label{display:none}
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  nav.main,nav.main.show{transition:none}
}
@media(max-width:640px){
  .site-header{position:sticky;top:0;z-index:100}
  /* The search row (see the 860px block) makes the header two rows tall, and this
     header is sticky, so every pixel here is taken off the visible page for the
     whole session. Trimmed to pay for the second row. column-gap/row-gap, not the
     `gap` shorthand, which would otherwise reset the row-gap set at 860px. */
  .hbar{padding-top:8px;padding-bottom:8px;column-gap:8px;row-gap:8px}
  /* The account/wishlist/cart labels come off on a phone. Labelled, the three
     buttons are 193px wide, which would not fit beside the hamburger and logo and
     pushed .hactions onto a third row — a 182px sticky header on an 844px screen.
     Clipped rather than display:none: the label is the accessible name of each
     link, so it must stay in the accessibility tree. */
  .iconbtn .lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  .iconbtn{justify-content:center;min-height:44px;padding:8px 10px}
  .search{padding-left:16px}
  /* min-height, not padding: this project holds a 44px touch target (see the
     footer note below) and the taller row must not quietly undercut it. */
  .search input{padding:0 8px;min-height:44px}
  .logo img{height:38px}
  /* Section rhythm: 64px of padding per block is a desktop measure. On a phone it
     was most of a screen of nothing between every band of content. */
  section.blk{padding:34px 0}
  section.offers-blk{padding-top:18px;padding-bottom:4px}
  /* Touch targets. Measured on an iPhone 14, 1 Aug 2026: the footer's policy
     links were 16px tall and "View all →" 22px, well under the 44px guideline
     and awkward to hit with a thumb. Grown with padding, so nothing moves
     visually beyond the extra breathing room. */
  .site-footer ul a{display:inline-flex;align-items:center;min-height:34px}
  .site-footer ul.socials a{min-height:34px}
  .viewall,.lnk{display:inline-flex;align-items:center;min-height:34px}

  .head{margin-bottom:18px}
  .head p{font-size:13.5px;margin-top:4px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .offers{grid-template-columns:repeat(2,1fr);gap:10px}
  .offer{min-height:0;padding:13px}
  .offer b{font-size:15px}
  .offer span{font-size:12px}
  .offer .go{font-size:12px;margin-top:6px}
  .offer .big{font-size:40px;right:-4px;top:-6px}
  .aisles{grid-template-columns:repeat(3,1fr);gap:10px}
  .aisle .ico{font-size:30px}
  .aisle .info{padding:10px 8px}
  .aisle b{font-size:13px;margin-bottom:2px}
  .aisle span{font-size:11px;padding:2px 8px}
  /* Steps go sideways on a phone: number and icon on the left, text on the right.
     Stacked cards put the icon, number, heading and body on four separate lines
     each, five times over, which cost most of a screen for five short sentences. */
  .steps{grid-template-columns:1fr;gap:8px}
  .steps .step:last-child{grid-column:auto}
  .step{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;
        column-gap:11px;align-items:center;text-align:left;padding:10px 12px}
  .step .n{grid-column:1;grid-row:1/3;width:26px;height:26px;font-size:11.5px;margin:0}
  .step .g{grid-column:2;grid-row:1/3;font-size:20px;margin:0}
  .step h4{grid-column:3;grid-row:1;font-size:13px;margin:0}
  .step p{grid-column:3;grid-row:2;font-size:11.5px;margin:0;line-height:1.4}
  .step:hover{transform:none}
  .compare,.reviews,.rw-grid{grid-template-columns:1fr}
  .head h2{font-size:22px}
  /* One column on a phone. Two 1fr columns squeezed the address and the policy
     list into ~150px each and wrapped nearly every line. Tightened further on
     1 Aug 2026 — with the payment row added it had grown back to 631px.

     Client, 1 Aug 2026: "it pretty much takes the whole page". Measured at 412px
     it was 568px, 0.64 of a screen, and the four biggest costs were all vertical
     stacking rather than content:
       policies   173px  four links stacked, one per row
       blurb       74px  three wrapped lines of prose
       ftop+fbot   96px  two bordered rows holding one link and one line
       logo box    44px
     Policies now run two-up, the blurb's second sentence is dropped, and Back to
     top shares the copyright row. */
  .fgrid{grid-template-columns:1fr;gap:12px;padding-top:14px;padding-bottom:6px}
  .fbrand p{margin:6px 0}
  .fbrand .logo img{height:28px}
  .site-footer h5{margin-bottom:6px}
  /* Marketing prose at the bottom of an eight-screen page - see footer.liquid. */
  .f-long{display:none}
  /* Four policy links, two rows instead of four. The 34px tap target from the
     touch block above is kept, so this is height off the page rather than off
     the target. */
  .fpolicies ul{grid-template-columns:1fr 1fr;gap:0 14px}
  /* Copyright and Back to top side by side. They wrap to two centred lines if a
     narrow phone cannot fit them, which is why flex-wrap stays on. */
  .fbot{justify-content:space-between;gap:8px;font-size:11.5px}
  .fbot .backtotop{padding:6px 10px;font-size:12px;min-height:34px}
  .pays{justify-content:center}
  .fpay{padding-top:8px;padding-bottom:8px;gap:8px}
  .pays .pay-icon img,.pays .pay-icon svg{height:20px}
  /* Hero ran to roughly two screens on a phone before a single product appeared.
     Everything below is proportional trim, not removed content. */
  .hero .wrap{padding:22px 20px 26px;gap:20px}
  .eyebrow{font-size:11.5px;padding:5px 12px;margin-bottom:12px}
  .hero h1{font-size:27px;line-height:1.14;letter-spacing:-.4px;margin-bottom:10px}
  .hero p{font-size:14.5px;margin-bottom:16px}
  .hero-cta{gap:10px}
  /* Three content-sized flex columns let each label wrap: "free delivery radius"
     and "delivery over $49.99" both broke onto a second line, so the row read as
     six ragged lines instead of three tidy ones and cost 76px doing it. Equal
     grid columns and a smaller label keep each to one line. */
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
  .hero-stats div b{font-size:19px}
  .hero-stats div span{font-size:10.5px;line-height:1.3;display:block}
  .hero-card{padding:14px}
  .hero-card h4{font-size:15px;margin-bottom:8px}
  /* #methodList is 3 lines on the Delivery tab and 4 on Collect, at 37px each.
     Tightened rather than hidden: on Delivery it does echo the USP strip below,
     but on Collect it carries the pickup detail that appears nowhere else, and
     the two share one element. */
  .hero-card ul{gap:5px}
  .hero-card li{font-size:12.5px;line-height:1.35}
  .hero-card li .ck{width:19px;height:19px;font-size:11px}
  .news form{flex-direction:column}
  .coll-head h1{font-size:24px}

  /* "There are too many text only before you actually reach shopping menu."
     Measured at 412px: the first product card sat 2786px down, 3.12 screens, and
     1788px of that was hero + USP + offers + how-it-works before the department
     tiles even began. Two blocks were doing most of it.

     The USP strip: a 50px icon tile per claim, four of them two-up, 241px to say
     four short things. A 34px tile and tighter type keeps all four claims and
     halves the block. */
  .usp .wrap{gap:8px 12px;padding:12px 20px}
  .usp .u{gap:9px}
  .usp .u .g{font-size:16px;width:34px;height:34px;border-radius:9px}
  .usp .u b{font-size:12.5px;line-height:1.25}
  .usp .u span{font-size:11px;line-height:1.3;display:block}

  /* How it works: five steps of explanation, 542px, sitting between the customer
     and the shelves. The content stays - it is genuinely useful to a first-time
     buyer - but the heading block loses its subtitle and the rows tighten. */
  .how .head p{display:none}
  .how .steps{gap:6px}
  .how .step{padding:8px 12px}
  .how .step p{font-size:11px}
}

/* --- Predictive search (§6.5) -------------------------------------------- */
.search{position:relative}
.predictive{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;z-index:80;max-height:70vh;overflow-y:auto}
.predictive h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;padding:8px 10px 4px}
.ps-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;transition:.12s;min-height:44px}
.ps-item:hover,.ps-item.active,.ps-item:focus-visible{background:var(--brand-blue-soft)}
.ps-item img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:var(--bg);flex-shrink:0}
.ps-info{display:flex;flex-direction:column;min-width:0}
.ps-title{font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-meta{font-size:11.5px;color:var(--muted)}
.ps-dept{font-size:13.5px;font-weight:600;color:var(--brand-red)}
.ps-all{display:block;text-align:center;padding:11px;margin-top:6px;border-top:1px solid var(--line);color:var(--brand-red);font-weight:600;font-size:13px}
.ps-empty{padding:16px 10px 4px;font-size:13.5px;color:var(--muted);text-align:center}

/* --- Search landing / chips ---------------------------------------------- */
.search-landing{padding:8px 0 60px}
.search-landing h2{font-size:17px;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line);border-radius:30px;padding:9px 16px;font-size:13.5px;font-weight:500;transition:.15s;min-height:40px}
.chip:hover{border-color:var(--brand-red);color:var(--brand-red)}
.dept-hits{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 22px}
.dept-hits .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.dept-hits a{background:var(--brand-blue-soft);color:var(--brand-red-dark);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600}
.dept-hits a:hover{background:var(--brand-blue);color:#fff}
.facet-note{font-size:11.5px;color:var(--muted);margin-top:6px}
.price-range{display:flex;align-items:center;gap:10px}
.price-range label{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:14px;border:1.5px solid var(--line);border-radius:10px;padding:0 10px;min-height:44px}
.price-range label:focus-within{border-color:var(--brand-blue)}
.price-range .cur{color:var(--muted)}
.price-range .dash{color:var(--muted)}
.price-range input{width:100%;min-width:0;border:none;padding:8px 0;font-family:inherit;font-size:14px;outline:none;background:none}


/* --- Cart drawer (§6.6) --------------------------------------------------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:190}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--card);z-index:200;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.cart-drawer{animation:none}}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line);flex-shrink:0}
.cart-head h2{font-size:18px;font-weight:800}
.cart-close{width:40px;height:40px;border-radius:10px;font-size:16px;display:grid;place-items:center}
.cart-close:hover{background:var(--bg)}
.cart-drawer .cart-progress{padding:14px 20px;background:var(--brand-blue-soft);flex-shrink:0}
.cart-drawer .cart-progress p{font-size:12.5px;font-weight:600;margin-bottom:8px;color:var(--brand-red-dark)}
.cart-drawer .cart-progress p.won{color:var(--green)}
.cart-bar{height:7px;background:#fff;border-radius:5px;overflow:hidden}
.cart-bar i{display:block;height:100%;background:var(--green);transition:width .3s}
.cart-body{flex:1;overflow-y:auto;padding:8px 20px}
.cart-items{list-style:none;display:grid;gap:4px}
.cart-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:var(--bg);flex-shrink:0}
.ci-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ci-title{font-size:13.5px;line-height:1.35;font-weight:500}
.ci-title:hover{color:var(--brand-red)}
.ci-price{font-size:12px;color:var(--muted)}
.ci-controls{display:flex;align-items:center;gap:8px;margin-top:6px}
/* .ci-step, not `button`. Remove is also a button inside .ci-controls, so the bare
   element selector drew it as a 30x30 bordered stepper box with the word "Remove"
   spilling out of it. */
.ci-controls .ci-step{width:30px;height:30px;border:1.5px solid var(--line);border-radius:8px;font-size:15px;font-weight:700;display:grid;place-items:center}
.ci-controls .ci-step:hover{border-color:var(--brand-red);color:var(--brand-red)}
.ci-qty{font-size:13.5px;font-weight:600;min-width:20px;text-align:center}
.ci-remove{margin-left:auto;font-size:11.5px;color:var(--muted);text-decoration:underline}
.ci-remove:hover{color:var(--danger)}
.ci-total{font-size:14px;font-weight:800;flex-shrink:0}
.cart-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.cart-empty .g{font-size:44px;display:block;margin-bottom:14px}
.cart-empty b{color:var(--ink);display:block;margin-bottom:6px}
.cart-empty .btn{margin-top:20px}
.cart-drawer .cart-foot{border-top:1px solid var(--line);padding:18px 20px;flex-shrink:0;background:var(--card)}
.promo{display:flex;gap:8px;margin-bottom:12px}
.promo input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;font-family:inherit;font-size:13.5px;outline:none}
.promo input:focus{border-color:var(--brand-blue)}
.promo button{background:var(--ink);color:#fff;border-radius:10px;padding:0 18px;font-weight:600;font-size:13.5px;min-height:44px}
.promo button:hover{background:var(--brand-red)}
.promo-note{font-size:12px;color:var(--green);margin-bottom:12px;font-weight:500}
.cart-drawer .cart-total{display:flex;align-items:center;justify-content:space-between;font-size:15px;margin-bottom:4px}
.cart-drawer .cart-total b{font-size:22px;font-weight:800}
.cart-fineprint{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.cart-checkout{width:100%;justify-content:center}
@media(max-width:640px){
  .cart-drawer{width:100%}
  /* The dropdown was `position:fixed;left:12px;right:12px;top:auto` here. That was
     dead code for as long as the search input was display:none on mobile, and the
     moment the input came back (3 Sep 2026) it rendered the panel at the top of
     the viewport, over the header, because `top:auto` on a fixed box does not
     track the input. The default absolute positioning follows .search correctly
     and .search is now full-width on a phone anyway, so there is nothing left to
     escape. No ancestor clips it — .hbar and .site-header are both overflow
     visible, checked in Chrome. */
}

/* Slot booking styles lived here. Removed 3 Sep 2026 with the picker they
   dressed — PickEasy renders and styles its own widget on /cart. Do not add
   overrides for it here without checking INTEGRATION.md §7b first: the app
   redraws the picker on every cart change, so anything that targets its
   internals is fighting a re-render. */

}

/* --- Product carousel ---------------------------------------------------- */
.carousel{position:relative}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:thin}
.car-track>*{scroll-snap-align:start}
.car-track::-webkit-scrollbar{height:8px}
.car-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.car-track:focus-visible{outline:3px solid var(--brand-blue);outline-offset:4px}
.car-arrow{position:absolute;top:38%;z-index:5;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--shadow-lg);font-size:26px;line-height:1;color:var(--ink);display:grid;place-items:center;transition:.15s}
.car-arrow:hover{background:var(--brand-red);color:#fff}
.car-arrow.prev{left:-14px}
.car-arrow.next{right:-14px}
@media(max-width:860px){.car-arrow{display:none}}
@media (prefers-reduced-motion: reduce){.car-track{scroll-behavior:auto}}

/* --- Card actions: add-to-cart <-> quantity stepper ---------------------- */
.card-actions{position:relative}
.card-qty{display:flex;align-items:center;justify-content:space-between;background:var(--ink);border-radius:10px;min-height:44px;padding:0 6px}
.card-qty button{width:36px;height:40px;color:#fff;font-size:19px;font-weight:700;display:grid;place-items:center;border-radius:8px}
.card-qty button:hover{background:rgba(255,255,255,.16)}
.card-qty [data-card-qty-value]{color:#fff;font-weight:700;font-size:14.5px;min-width:24px;text-align:center}
.view-details{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:8px;text-decoration:underline}
.view-details:hover{color:var(--brand-red)}

/* --- Click & Collect address (single store, no picker) ------------------- */
.pickup-addr{font-style:normal;color:#fff;font-size:13.5px;line-height:1.6;background:rgba(0,0,0,.22);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.pickup-addr b{display:block;font-size:14.5px;margin-bottom:4px}
.pickup-addr .hrs{display:block;opacity:.85;font-size:12.5px;margin-top:4px}
.pickup-addr .ready{display:block;opacity:.85;font-size:12.5px;margin-top:2px}
.pickup-addr .callahead{display:block;margin-top:8px;font-size:12.5px;font-weight:600}
.pickup-addr .callahead a{color:#fff;text-decoration:underline}
.pickup-addr .maplink{display:inline-block;margin-top:10px;color:var(--brand-blue-mid);font-weight:600;font-size:13px}
.pickup-addr .maplink:hover{text-decoration:underline}
/* #e6ddd2 was a cream picked for the old dark-green footer. Left behind when the
   band went red, it put the street address at roughly 2.6:1 against --brand-red
   while every line around it was white - the one contrast failure the footer's
   colour guard missed, because that guard only listed .fbrand p, .fcontact a,
   .site-footer ul a and .fpay-label. The guard now checks .faddr too. */
.fcontact .faddr{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.92);line-height:1.5}
.fcontact .faddr .g{flex-shrink:0}

/* --- Cart page, 404, content pages --------------------------------------- */
/*
 * .btn-ghost is white-on-translucent, built for the dark hero. On these
 * light-background pages it would be invisible, so the cart gets its own pair.
 */
/* The cart drawer and the /cart page share three class names —
   .cart-progress, .cart-foot, .cart-total. The page rules sit later in this
   file, so they used to win inside the drawer: .cart-foot became a wrapping
   flex row 627px tall with a 24px top margin, which crushed .cart-body and
   pushed the Checkout button off the bottom of the screen. Both sides are
   scoped now; do not add an unscoped rule for any of these three. */
.cart-page{padding-bottom:60px}
.cart-page h1{font-size:30px;font-weight:800;letter-spacing:-.3px;margin:8px 0 18px}
.cart-page .cart-progress{font-size:13.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:20px}
.cart-page .cart-progress.done{color:var(--brand-blue);border-color:var(--brand-blue)}
.cart-table{width:100%;border-collapse:collapse;font-size:14px}
.cart-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:0 10px 10px;border-bottom:1px solid var(--line)}
.cart-table td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-prod{display:flex;gap:12px;align-items:center}
.cart-prod img{width:60px;height:60px;object-fit:contain;background:var(--card);border-radius:10px;flex-shrink:0}
.cart-prod a{font-weight:600;line-height:1.35}
.cart-prod a:hover{color:var(--brand-red)}
.cart-prod .variant{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cart-qty-input{width:70px;height:40px;text-align:center;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;font-weight:600}
.cart-page .cart-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:24px}
.cart-page .cart-total span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.cart-page .cart-total strong{font-size:26px;font-weight:800}
.cart-page .cart-total small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.cart-foot-actions{display:flex;gap:10px;flex-wrap:wrap}
.cart-foot-actions button{min-height:48px;padding:0 26px;border-radius:12px;font-weight:600;font-size:15px;font-family:inherit}
.cart-foot-actions .btn-primary{background:var(--brand-blue);color:#fff}
.cart-foot-actions .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.cart-foot-actions .btn-ghost:hover{border-color:var(--ink)}
@media(max-width:640px){
  .cart-table thead{display:none}
  .cart-table td{display:block;border:none;padding:4px 0}
  .cart-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .cart-page .cart-foot{flex-direction:column;align-items:stretch}
  .cart-foot-actions button{flex:1}
}

/* padding-top/bottom only — .notfound is also .wrap; see the note on .fgrid. */
.notfound{padding-top:50px;padding-bottom:70px;max-width:640px}
.notfound h1{font-size:32px;font-weight:800;letter-spacing:-.4px;margin-bottom:10px}
.notfound h2{font-size:15px;font-weight:700;margin:30px 0 12px}
.notfound p{color:var(--muted);font-size:14.5px;line-height:1.6}
.notfound-search{display:flex;gap:10px;margin:24px 0;flex-wrap:wrap}
.notfound-search input{flex:1;min-width:200px;min-height:48px;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px}
.notfound-search input:focus{outline:none;border-color:var(--brand-blue)}
.notfound-search button{min-height:48px;padding:0 24px;border-radius:12px;background:var(--brand-blue);color:#fff;font-weight:600;font-size:15px;font-family:inherit}
.notfound-depts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.notfound-depts a{display:inline-block;padding:8px 14px;border:1.5px solid var(--line);border-radius:20px;font-size:13.5px;font-weight:600;background:#fff}
.notfound-depts a:hover{border-color:var(--brand-red);color:var(--brand-red)}

.page-body{padding-bottom:70px;max-width:760px}
.page-body h1{font-size:30px;font-weight:800;letter-spacing:-.3px;margin:8px 0 18px}
.rte{font-size:15px;line-height:1.75;color:var(--ink)}
.rte p{margin-bottom:14px}
.rte h2{font-size:20px;font-weight:700;margin:28px 0 10px}
.rte h3{font-size:16.5px;font-weight:700;margin:22px 0 8px}
.rte ul,.rte ol{margin:0 0 14px 20px}
.rte li{margin-bottom:6px}
.rte a{color:var(--brand-blue);text-decoration:underline}
.rte code{background:var(--card);padding:2px 6px;border-radius:5px;font-size:13px}

/* --- Touch targets (mobile) ---------------------------------------------
 * WCAG 2.2 asks for 24x24 CSS px; these text links measured 15-20px tall on a
 * 390px viewport, so a fingertip had to land on a single line of type. Padding
 * rather than font-size keeps the visual design identical - only the hit area
 * grows. Scoped to the mobile breakpoint so desktop spacing is untouched.
 */
@media(max-width:640px){
  .card h3 a,
  .view-details,
  .crumbs a,
  .site-footer a[href^="tel:"],
  .site-footer a[href^="mailto:"],
  .meta-list a{display:inline-block;min-height:32px;padding-block:7px}
  .crumbs{padding-top:12px}
}

/* --- iOS zoom guard — keep this LAST ------------------------------------- */
/*
 * iOS Safari zooms the whole page when a form control smaller than 16px takes
 * focus, and leaves it zoomed. Tapping the search box made the header lurch, the
 * layout jump and the page overflow sideways — close to how "the search bar
 * doesn't work properly on mobile" would look to whoever hit it. Every control on
 * the site was 13.5–15px, so every one did it.
 *
 * This lives at the END of the file on purpose. The first attempt put it inside
 * the 860px block, which sits above `.notfound-search input{font-size:15px}` —
 * same specificity, later rule wins, and the /search input stayed at 15px while
 * the header search was fixed. Caught only by measuring the rendered page on the
 * real store. Anything added after this block must not re-declare a control's
 * font-size below 16px.
 *
 * Headless Chrome does not emulate the zoom, so no rendering test proves this
 * fixed; the smoke test asserts the rule exists and still wins the cascade.
 */
@media(max-width:860px){
  .search input,.postcode input,.news input,.toolbar select,.qty input,
  .price-range input,.promo input,.cart-qty-input,.notfound-search input,
  .facets input[type="text"],.facets input[type="number"],
  input[type="text"],input[type="search"],input[type="email"],
  input[type="number"],input[type="tel"],select,textarea{font-size:16px}
}