/* =====================================================================
   EvoTechnik — PUBLIC SITE LAYOUT
   Layer 4 of 4 · Sprint 2 · 14 August 2026

   Public-facing page furniture only: top bar, header, two-level nav,
   mobile drawer, hero, fitment strip, category grid, product rows,
   vehicle strip, trust block, testimonials, partner band, footer,
   floating WhatsApp.

   Reusable UI (buttons, cards, badges, forms, modal) is in
   components.css and is NOT repeated here.

   RE-THEMED FROM GOLD TO BLUE.
   The Home design predates the logo and used a dark/gold palette. The
   full old-to-new colour mapping is recorded in brand.md §3 and has
   been applied throughout this file: gold accents became var(--blue),
   the near-black grounds became var(--bg-dark), and the warm greys
   became var(--white) or var(--grey-light) on dark.

   No retired palette value appears anywhere in this file, deliberately
   including these comments — a grep for the old hex codes across the
   generated CSS must return nothing.

   Layout, spacing and structure are unchanged. Only the palette moved.

   The site is LIGHT-DOMINANT: dark header and footer, white and
   --bg-soft body sections, blue as the single accent.

   Load order: tokens -> base -> components -> public
   ===================================================================== */


/* =====================================================================
   1. TOP BAR — thin dark strip above the header
   ===================================================================== */

.topbar {
  background: var(--bg-dark);
  color: var(--grey-light);
  font-size: var(--fs-small);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-24);
  padding-block: var(--sp-8);
}

.topbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-24);
}

.topbar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 28px;
  color: var(--grey-light);
}

.topbar__link:hover {
  color: var(--white);
  text-decoration: none;
}

.topbar__link--strong {
  color: var(--white);
  font-weight: var(--fw-semibold);
}

/* The gold dot became a blue dot. */
.topbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}

.topbar__cta {
  display: flex;
  align-items: center;
  min-height: 28px;
  color: var(--blue-soft);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar__cta:hover {
  color: var(--white);
  text-decoration: none;
}

/* Below 640px the top bar is one centred row — the email is dropped to
   keep the phone number and CTA on a single line. */
@media (max-width: 639px) {
  .topbar__email { display: none; }
  .topbar__inner { justify-content: center; }
}


/* =====================================================================
   2. HEADER — dark, sticky. brand.md §4.
   ===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(30, 103, 176, 0.28);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  transition: padding var(--t-base), box-shadow var(--t-base);
  padding-block: var(--sp-12);
}

/* .is-stuck is toggled by main.js past 10px of scroll. */
.site-header.is-stuck {
  padding-block: var(--sp-8);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}

/* Logo sits in a white chip so the dark-on-transparent PNG stays legible
   on the dark header — same treatment as the original design. */
/* The wordmark PNG is 1661x214, so at height:24px it renders ~186px wide.
   D-56 recorded the original 320px squeeze: chip padding + gap + a 40px
   monogram + a 48px burger needed 310px against 288px available.
   Sprint 12E removed the monogram from the header, which returns 52px of
   that budget and is why the wordmark now holds its full width down to
   320px without shrinking. See D-145 and D-147. */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  /*
   * Sprint 12D: flex-shrink 0, was 1.
   *
   * The brand block is now fixed-width content (a 186px wordmark and a
   * 40px monogram, both flex-shrink: 0), so letting the PARENT shrink
   * only made its children overflow it — at 1024 the monogram was
   * hanging 219px outside its own box and landing on top of "Home".
   *
   * Whatever room the header is short of now comes out of the nav,
   * which is the element that can actually give it: see the desktop-nav
   * breakpoint, raised in the same sprint.
   */
  flex-shrink: 0;
}

/*
 * Sprint 12D. The wordmark does NOT shrink.
 *
 * .site-logo is flex-shrink: 1 so the brand block can give way when the
 * header is tight, and with min-width: 0 here the thing that gave way
 * was the logo image itself — at 1366 with nine nav items it was
 * rendering 7px wide, an unreadable blue sliver where the company name
 * should be. It looked fine until a ninth item existed, which is why it
 * survived this long.
 *
 * The tagline is the correct thing to sacrifice: it is supporting copy,
 * it already disappears entirely on small screens, and losing its tail
 * costs nothing next to losing the name of the company.
 */
/* =====================================================================
   ITEM 1 — TRADEMARK MARK ON THE LOGO (Sprint 13)
   TEMPORARY: delete this whole block and the <sup> in header.php when
   the real ™ logo asset arrives. Nothing else depends on it.

   position: absolute keeps it OUT OF FLOW, so it cannot shift the
   header layout by a single pixel -- verified at 1366 / 375 / 320.

   Sized and offset in `em`, which resolves against the chip's inherited
   font-size, so the mark keeps its proportion to the wordmark at every
   breakpoint rather than being pinned to one pixel value.
   ===================================================================== */
.site-logo__chip { position: relative; }

.site-logo__tm {
  position: absolute;
  top: -0.30em;
  right: -1.25em;
  /*
   * 1em, up from 0.62em, which rendered at 9.6px and was too small to
   * read on the dark header. A trademark mark nobody can see is not
   * doing the job it exists for.
   *
   * Still `em`, so it holds its proportion to the wordmark. The offsets
   * moved with it: a larger glyph needs to sit further out to clear the
   * white pill's rounded corner rather than crowding it.
   */
  font-size: 1em;
  font-weight: var(--fw-h-black);
  line-height: 1;
  color: var(--white);
  /* The logo sits on the dark header; on a light ground it would need
     --ink. There is only one header, so one colour is correct here. */
  pointer-events: none;
}

.site-logo__chip {
  flex-shrink: 0;
  min-width: auto;
}

.site-logo__img  { max-width: 100%; }

.site-logo__chip {
  display: inline-flex;
  padding: var(--sp-8) var(--sp-12);
  background: var(--white);
  border-radius: var(--r-md);
}

.site-logo__img {
  display: block;
  height: 24px;
  width: auto;
}

/* The 3E monogram mark from the logo. */
.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: var(--fw-h-black);
  font-size: 15px;
  letter-spacing: -0.04em;
}

.monogram--lg {
  width: 46px;
  height: 46px;
  font-size: 16px;
}

/* Sprint 12E: the <400px rule that hid .site-header .monogram is gone
   with the monogram itself — the header no longer renders one. .monogram
   stays defined above because about.php, index.php, the admin sidebar
   and the admin login all still use it. */


/* =====================================================================
   3. DESKTOP NAV — hidden below 1024px
   ===================================================================== */

.nav-main { display: none; }

/*
 * Sprint 12D: the desktop nav starts at 1200px, was 1024px.
 *
 * MEASURED, not guessed. With the per-element rect sweep (doc.scrollWidth
 * lies here — html{overflow-x:hidden} was hiding this) the English nav
 * already overflowed the viewport at 1024 with EIGHT items, before this
 * sprint. Adding "Second Hand EVs" made it nine and pushed the failure
 * up to 1100.
 *
 * So this is not a new bug being papered over: it is an old one that the
 * ninth item made impossible to keep missing. Between 1024 and 1199 the
 * mobile drawer takes over, and the drawer already carries every item
 * including this one.
 */
@media (min-width: 1200px) {
  .nav-main { display: block; }
}

/*
 * Sprint 12E: logo left, nav right, the conventional arrangement.
 *
 * .site-header__inner is justify-content: space-between, so with the
 * burger hidden above 1200px the two remaining children already sit at
 * the two ends. margin-left: auto states it outright instead of relying
 * on there happening to be exactly two flex children — the header has
 * gained and lost items twice in two sprints.
 */
.nav-main { margin-left: auto; }

.nav-main__list {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav state is signalled by COLOUR ONLY — brand.md §4.
   No underline, no border-bottom, no box-shadow, no pseudo-element rule,
   no background tint. White at rest, --blue-on-dark on hover and on the
   current page.

   text-decoration: none is declared explicitly at EVERY state, including
   at rest, so no element-level default or inherited rule can reintroduce
   an underline. */
.nav-main__link {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  /*
   * Sprint 12D. Two changes, one cause: adding "Second Hand EVs" took
   * the desktop nav past the width it had.
   *
   * nowrap is the real fix. A top-level nav item that breaks across
   * three lines is a defect at any width, and "Partner With Us" had
   * been doing it since before this sprint — the new item only made it
   * impossible to keep ignoring. Measured at 1366: the nine links need
   * 898px of a 882px row, so the flex row was solving the shortfall by
   * wrapping the text and squeezing the logo.
   *
   * The padding pays for it: 8px a side over nine links, against the
   * original 16px. That clears the shortfall AND buys back the tagline
   * at 1366 in all three languages, which 12px did not.
   *
   * 8px is the floor. Below it the links start reading as one run-on
   * strip, and the min-height: 44px above is what keeps the tap target
   * legal regardless.
   */
  white-space: nowrap;
  padding: 0 var(--sp-8);
  color: var(--white);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: 0;
  box-shadow: none;
  background: none;
  transition: color var(--t-fast);
}

.nav-main__link:hover,
.nav-main__link:focus,
.nav-main__link:active,
.nav-main__link[aria-current="page"] {
  color: var(--blue-on-dark);
  text-decoration: none;
  border: 0;
  box-shadow: none;
  background: none;
}

/* Belt and braces: nothing may draw a line under a nav item. */
.nav-main__link::before,
.nav-main__link::after {
  content: none;
}

.nav-main__caret {
  font-size: 11px;
  color: var(--blue-soft);
  transition: transform var(--t-fast);
}

.dropdown.is-open .nav-main__caret,
.dropdown:hover .nav-main__caret {
  transform: rotate(180deg);
}


/* =====================================================================
   4. TWO-LEVEL CATEGORY DROPDOWN
   Main categories, each with its sub-categories and product counts.
   The panel itself is .dropdown__panel in components.css.
   ===================================================================== */

/*
 * OPEN-24 FIX — the mega-menu panel is anchored to the header CONTAINER,
 * not to the Products item.
 *
 * THE BUG: .dropdown__panel is absolutely positioned with left: 0
 * against .dropdown, which is the Products <li>. Where that <li> sits
 * depends on how wide the preceding labels are — so it moves with the
 * LANGUAGE. In Hindi and Marathi it sits further right, and at 1400+
 * where the panel widens to 820px the panel ran 73px and 66px past the
 * viewport edge and was clipped by html { overflow-x: hidden }.
 *
 * English was fine, which is exactly why it survived: the bug was
 * invisible in the language it was built in.
 *
 * THE FIX: give the panel a positioning context that does not move.
 * .site-header__inner is the container — fixed width, centred, the same
 * in every language — so left: 0 against it puts the panel in the same
 * place regardless of what the labels say. The panel is 820px inside a
 * container of at least 1140px (the nav only exists from 1200px up), so
 * it cannot reach either edge.
 *
 * :hover still works across the gap: the panel is still a DOM child of
 * the <li>, and :hover follows the DOM, not the visual box.
 *
 * There is exactly one dropdown in this project (the Products mega-menu,
 * header.php line ~409), so this is scoped to .nav-main and changes
 * nothing else.
 */
.site-header__inner { position: relative; }

.nav-main .dropdown { position: static; }

.nav-main .dropdown__panel {
  left: 0;
  right: auto;
}

.catmenu {
  min-width: 640px;
  padding: var(--sp-16);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-24);
}

@media (min-width: 1400px) {
  .catmenu {
    min-width: 820px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.catmenu__group { break-inside: avoid; }

.catmenu__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-sm);
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: var(--fw-h-bold);
  letter-spacing: var(--ls-heading);
}

.catmenu__main:hover {
  background: var(--blue-soft);
  color: var(--blue);
  text-decoration: none;
}

.catmenu__subs {
  margin: 0;
  padding: 0 0 var(--sp-12);
  list-style: none;
}

.catmenu__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  min-height: 34px;
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 13.5px;
}

.catmenu__sub:hover {
  background: var(--bg-soft);
  color: var(--blue);
  text-decoration: none;
}

.catmenu__count {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--grey-light);
}

.catmenu__foot {
  grid-column: 1 / -1;
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
}


/* =====================================================================
   5. BURGER + MOBILE DRAWER
   ===================================================================== */

.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
}

.burger:hover { background: rgba(255, 255, 255, 0.1); }

.burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
}

@media (min-width: 1024px) {

}

/*
 * Sprint 12D: the burger hides at 1200, the same width where the desktop
 * nav appears. The two MUST share the number - with the nav starting at
 * 1200 and the burger stopping at 1024 there was a 176px band with no
 * navigation on the page at all.
 *
 * Placed after .burger's base rule on purpose: equal specificity, so
 * source order decides, and the original rule worked for exactly that
 * reason.
 */
@media (min-width: 1200px) {
  .burger { display: none; }
}

/* --- drawer ------------------------------------------------------ */

.drawer {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-drawer);
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bg-dark);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-base), visibility var(--t-base);
}

.drawer.is-open {
  transform: translateY(0);
  visibility: visible;
}

@media (min-width: 1024px) {
  .drawer { display: none; }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
}

.drawer__close:hover { background: rgba(255, 255, 255, 0.12); }

.drawer__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--sp-8) 0 var(--sp-16);
  list-style: none;
}

.drawer__link,
.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 0 var(--sp-20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  transition: color var(--t-fast);
}

/* Same colour-only rule as the desktop nav.
   The border-bottom above is a ROW DIVIDER from the original design, not
   a state indicator — it is identical on every row, active or not, which
   is the test recorded in brand.md §4. Approved to keep. */
.drawer__link:hover,
.drawer__link:focus,
.drawer__toggle:hover,
.drawer__toggle:focus,
.drawer__link[aria-current="page"] {
  color: var(--blue-on-dark);
  text-decoration: none;
  box-shadow: none;
}

.drawer__link::before,
.drawer__link::after,
.drawer__toggle::before,
.drawer__toggle::after {
  content: none;
}

.drawer__caret {
  font-size: 12px;
  color: var(--blue-soft);
  transition: transform var(--t-fast);
}

.drawer__toggle[aria-expanded="true"] .drawer__caret {
  transform: rotate(180deg);
}

/* --- two-level accordion, tap only (no hover) --------------------- */

.drawer__accordion {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(0, 0, 0, 0.28);
}

.drawer__accordion.is-open { display: block; }

/* Level 2 — main category, itself a toggle for its children. */
.drawer__l2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 var(--sp-20) 0 var(--sp-32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: var(--fw-semibold);
  text-align: left;
}

.drawer__l2:hover,
.drawer__l2:focus,
.drawer__l2[aria-expanded="true"] {
  color: var(--blue-on-dark);
  text-decoration: none;
}

/* Level 3 — sub-categories. */
.drawer__l3-list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(0, 0, 0, 0.25);
}

.drawer__l3-list.is-open { display: block; }

.drawer__l3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  min-height: 46px;
  padding: 0 var(--sp-20) 0 var(--sp-40);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--grey-light);
  font-size: 14.5px;
}

.drawer__l3:hover,
.drawer__l3:focus {
  color: var(--blue-on-dark);
  text-decoration: none;
}

.drawer__count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: 0 var(--sp-20) var(--sp-24);
}

/* Scrim behind the drawer. */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(11, 14, 19, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .drawer-scrim { display: none; }
}

/* Lock the page behind an open drawer or modal. */
body.is-locked { overflow: hidden; }


/* =====================================================================
   6. HERO — dark band. Gold accents became blue.
   ===================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(96deg,
      rgba(11, 14, 19, 0.96) 0%,
      rgba(11, 14, 19, 0.86) 44%,
      rgba(11, 14, 19, 0.40) 100%),
    url("../../images/hero-electric-scooter-rider.svg");
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
}

.hero__inner {
  padding-block: clamp(60px, 9vw, 128px) clamp(48px, 7vw, 96px);
}

.hero__content { max-width: 700px; }

.hero__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(36px, 7.4vw, 68px);
  font-weight: var(--fw-h-black);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 560px;
  margin-top: var(--sp-20);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 2.2vw, 19.5px);
  line-height: 1.62;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-12);
  max-width: 620px;
  margin-top: var(--sp-40);
}

.hero__stat {
  padding: var(--sp-16);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
}

.hero__stat-value {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: var(--fw-h-bolder);
  letter-spacing: var(--ls-heading);
  color: var(--white);
}

.hero__stat-label {
  margin-top: 2px;
  font-size: var(--fs-label);
  color: var(--grey-light);
}


/* =====================================================================
   7. FITMENT STRIP — "Fits popular Indian e-scooters"
   ===================================================================== */

.fitment {
  background: var(--bg-dark-soft);
  border-top: 1px solid rgba(30, 103, 176, 0.24);
}

.fitment__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8) var(--sp-24);
  padding-block: var(--sp-16);
}

.fitment__label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

.fitment__brand {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--blue-soft);
}


/* =====================================================================
   8. CATEGORY GRID — 8 main categories, sub-category links beneath
   2 / 3 / 4 columns. brand.md §7 says 2/3/6 for a plain category grid,
   but these cards carry sub-links so they need more width; 4-up at
   desktop keeps the sub-links readable rather than truncated.
   ===================================================================== */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}

.cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-20);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: box-shadow var(--t-base), transform var(--t-base),
              border-color var(--t-base);
}

.cat-card:hover {
  box-shadow: var(--sh-2);
  border-color: var(--blue-line);
  transform: translateY(-3px);
}

.cat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-16);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  overflow: hidden;
}

.cat-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-card__title {
  margin: 0 0 var(--sp-4);
  font-size: 17px;
}

.cat-card__title a { color: var(--black); }
.cat-card__title a:hover { color: var(--blue); text-decoration: none; }

.cat-card__count {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--blue);
}

.cat-card__subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  margin: var(--sp-12) 0 0;
  padding: var(--sp-12) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.cat-card__sub {
  font-size: var(--fs-small);
  color: var(--grey);
}

.cat-card__sub:hover { color: var(--blue); }


/* =====================================================================
   9. PRODUCT GRID — featured products. 1 / 2 / 4 per brand.md §7.
   ===================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}


/* =====================================================================
   10. CATEGORY PRODUCT ROW — the e-commerce section
   Markup lives in exactly one place: includes/product-row.php
   ===================================================================== */

.product-row + .product-row { margin-top: var(--sp-40); }

.product-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-bottom: var(--sp-20);
  padding-bottom: var(--sp-12);
  border-bottom: 2px solid var(--line);
}

.product-row__title {
  margin: 0;
  font-size: clamp(19px, 2.6vw, 24px);
}

.product-row__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}


/* =====================================================================
   11. VEHICLE STRIP — browse parts by scooter model
   ===================================================================== */

.vehicle-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 42vw);
  gap: var(--sp-12);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-8);
  -webkit-overflow-scrolling: touch;
}

.vehicle-track > * { scroll-snap-align: start; }

@media (min-width: 640px) {
  .vehicle-track { grid-auto-columns: minmax(160px, 24vw); }
}

@media (min-width: 1024px) {
  .vehicle-track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--sp-12);
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-12);
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast);
}

.vehicle-card:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  text-decoration: none;
}

.vehicle-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-heading);
  font-weight: var(--fw-h-bolder);
  font-size: 14px;
}

.vehicle-card__brand {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--grey);
}

.vehicle-card__model {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: var(--fw-h-bold);
  color: var(--black);
  letter-spacing: var(--ls-heading);
}


/* =====================================================================
   12. SERVICES STRIP — dark band. Numbered cards.
   ===================================================================== */

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  height: 100%;
  padding: var(--sp-24) var(--sp-20);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}

.service-card:hover { border-color: var(--blue); }

.service-card__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  border: 1px solid rgba(30, 103, 176, 0.5);
  border-radius: var(--r-sm);
  background: rgba(30, 103, 176, 0.18);
  color: var(--blue-soft);
  font-family: var(--font-heading);
  font-weight: var(--fw-h-bolder);
  font-size: 14px;
}

.service-card__title {
  margin: 0;
  font-size: 17.5px;
  color: var(--white);
}

.service-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--grey-light);
}

.service-card__price {
  margin-top: var(--sp-4);
  font-size: 14.5px;
  font-weight: var(--fw-bold);
  color: var(--blue-soft);
}

.service-card__action { margin-top: auto; padding-top: var(--sp-12); }


/* =====================================================================
   13. TRUST BLOCK — why choose us
   ===================================================================== */

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}

.trust-card {
  height: 100%;
  padding: var(--sp-24) var(--sp-20);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.trust-card__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-16);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-heading);
  font-weight: var(--fw-h-bolder);
  font-size: 14px;
}

.trust-card__title { margin: 0 0 var(--sp-8); font-size: 17px; }

.trust-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--grey);
}


/* =====================================================================
   14. TESTIMONIALS
   ===================================================================== */

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  height: 100%;
  margin: 0;
  padding: var(--sp-24);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.testimonial__stars {
  color: var(--blue);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.testimonial__quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

.testimonial__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-top: auto;
  padding-top: var(--sp-8);
}

.testimonial__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-dark);
  color: var(--blue-soft);
  font-family: var(--font-heading);
  font-weight: var(--fw-h-bold);
  font-size: 15px;
}

.testimonial__name {
  display: block;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.testimonial__city {
  display: block;
  font-size: 13.5px;
  color: var(--grey);
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.rating-pill__stars {
  color: var(--blue);
  letter-spacing: 0.08em;
}


/* =====================================================================
   15. CTA BAND — was a gold gradient, now blue on near-black
   ===================================================================== */

.cta-band {
  background: linear-gradient(100deg,
    var(--bg-dark) 0%,
    var(--bg-dark) 52%,
    var(--blue-dark) 190%);
  border-top: 3px solid var(--blue);
  padding-block: clamp(44px, 7vw, 76px);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
}

.cta-band__text { max-width: 660px; }

.cta-band__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.12;
}

.cta-band__lede {
  margin-top: var(--sp-12);
  color: var(--grey-light);
  font-size: 16.5px;
  line-height: 1.55;
}


/* =====================================================================
   16. PARTNER BAND — already blue in the original design
   ===================================================================== */

.partner-band {
  background: var(--black);
  border-top: 3px solid var(--blue);
  padding-block: clamp(44px, 6vw, 78px);
}

.partner-band__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(24px, 3.6vw, 36px);
}

.partner-band__title em {
  font-style: normal;
  color: var(--blue-soft);
}

.partner-band__lede {
  margin-top: var(--sp-12);
  color: var(--grey-light);
  font-size: 16.5px;
  line-height: 1.55;
}

.partner-band__rule {
  width: 56px;
  height: 3px;
  margin: var(--sp-20) 0 var(--sp-32);
  background: var(--blue);
}

.partner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}

.partner-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  height: 100%;
  padding: var(--sp-24);
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--blue);
  border-radius: var(--r-md);
}

.partner-card__title {
  margin: 0;
  color: var(--white);
  font-size: 21px;
}

.partner-card__text {
  margin: 0;
  color: var(--grey-light);
  font-size: 15.5px;
  line-height: 1.6;
}

.partner-card__action {
  align-self: flex-start;
  margin-top: var(--sp-12);
}


/* =====================================================================
   17. FOOTER — dark. brand.md §4.
   ===================================================================== */

.site-footer {
  background: var(--bg-dark);
  color: var(--grey-light);
  padding-block: clamp(48px, 7vw, 76px) 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-32) var(--sp-24);
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: span 1; }
}

.site-footer__about {
  max-width: 300px;
  margin-top: var(--sp-16);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Footer column headings use h6 — uppercase eyebrow, brand.md §5. */
.site-footer h6 {
  margin-bottom: var(--sp-12);
  color: var(--white);
  letter-spacing: 0.16em;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}

.site-footer__link { color: var(--grey-light); }
.site-footer__link:hover { color: var(--blue-soft); text-decoration: none; }

.site-footer__address {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
}

.site-footer__phone {
  color: var(--white);
  font-weight: var(--fw-bold);
}

.site-footer__social {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-20);
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
  color: var(--grey-light);
  font-size: 12px;
  font-weight: var(--fw-bold);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.site-footer__social a:hover {
  border-color: var(--blue);
  color: var(--blue-soft);
  text-decoration: none;
}

.site-footer__map {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
}

.site-footer__map img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-20);
  margin-top: var(--sp-40);
  padding-block: var(--sp-16) var(--sp-24);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-small);
}

.site-footer__bar strong { color: var(--blue-soft); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-20);
}


/* =====================================================================
   18. FLOATING WHATSAPP
   Sits above the header but below modals.
   ===================================================================== */

.wa-float {
  position: fixed;
  right: var(--sp-16);
  bottom: var(--sp-16);
  z-index: calc(var(--z-header) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa-green);
  box-shadow: var(--sh-3);
  transition: background-color var(--t-fast), transform var(--t-fast);
}

.wa-float:hover {
  background: var(--wa-green-hover);
  transform: scale(1.06);
}

.wa-float svg { width: 30px; height: 30px; }


/* =====================================================================
   19. PAGE BANNER — short dark band at the top of an inner page
   Same treatment as the hero, less vertical weight.
   ===================================================================== */

.page-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(96deg,
      rgba(11, 14, 19, 0.96) 0%,
      rgba(11, 14, 19, 0.84) 50%,
      rgba(11, 14, 19, 0.45) 100%),
    url("../../images/banner-escooter-parts.svg");
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
}

.page-banner__inner { padding-block: clamp(34px, 5vw, 60px); }

.page-banner__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(30px, 5.4vw, 50px);
  font-weight: var(--fw-h-black);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.page-banner__lede {
  max-width: 620px;
  margin-top: var(--sp-12);
  color: var(--grey-light);
  font-size: clamp(15.5px, 2vw, 18px);
  line-height: 1.6;
}

/* --- breadcrumb --------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-12);
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--grey);
}

.breadcrumb a {
  color: var(--grey-light);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--blue-on-dark); }

.breadcrumb__sep {
  color: var(--grey);
  opacity: 0.6;
}

.breadcrumb__current {
  color: var(--blue-on-dark);
  font-weight: var(--fw-semibold);
}


/* =====================================================================
   20. FILTER BAR — chips + search + sort
   ===================================================================== */

/* --- second-hand filters (Sprint 12D) -----------------------------
   The catalogue has a sidebar for its 40 categories. Second-hand EVs
   have three short filters, so they sit in stacked rows above the grid
   instead: a whole sidebar for six vehicles would be furniture.

   Each row is its own scroller. That is deliberate -- at 320px the
   price band labels are the widest thing on the page, and letting one
   row scroll is better than shrinking the type or wrapping a band
   label onto two lines.
   ------------------------------------------------------------------ */
.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
}

.filter-group + .filter-group {
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
}

.filter-group__label {
  flex: 0 0 auto;
  min-width: 104px;
  margin: 0;
  color: var(--grey);
}

/* minmax(0, 1fr), never a bare 1fr: the chip row must be allowed to
   become narrower than its content, otherwise it widens the card and
   the page scrolls sideways (the Sprint 9B lesson). */
.filter-group__chips {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--sp-8);
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.filter-group__chips .chip { flex-shrink: 0; }

/* --- Sprint 13: multi-column field rows ---------------------------
   City / District / State side by side from 640px up. minmax(0, 1fr),
   never a bare 1fr: a <select> holding "Dadra and Nagar Haveli and
   Daman and Diu" would otherwise set the column's minimum width and
   push the modal wider than the viewport (the Sprint 9B lesson).
   ------------------------------------------------------------------ */
/* --- Sprint 13: franchise tier cards (item 14) ---------------------
   Three cards, driven by the franchise_tiers table. auto-fit with a
   minmax floor rather than a fixed 3-column grid, so a client who adds
   a fourth tier or deactivates one gets a sensible layout without a CSS
   change -- the whole point of putting the tiers in a table.
   ------------------------------------------------------------------ */
.tier-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-16);
  margin: 0 0 var(--sp-24);
  padding: 0;
  list-style: none;
}

@media (min-width: 860px) {
  .tier-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}

.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-24);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* The client's chosen tier, not a hardcoded middle card. */
.tier-card--popular {
  border-color: var(--blue);
  box-shadow: var(--sh-2);
}

.tier-card__flag {
  position: absolute;
  top: calc(var(--sp-12) * -1);
  left: var(--sp-24);
}

.tier-card__name {
  margin: 0;
  font-size: 18px;
  font-weight: var(--fw-h-bold);
}

.tier-card__price {
  margin: 0;
  font-size: 30px;
  font-weight: var(--fw-h-black);
  line-height: 1.1;
  color: var(--blue);
}

.tier-card__unit {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--grey);
}

.tier-card__tagline {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--grey);
}

/* Push the CTA to the bottom so buttons line up across uneven cards. */
.tier-card__features {
  flex: 1;
  margin: var(--sp-8) 0 var(--sp-16);
}

/* --- Sprint 13: application fee note (item 9) ---------------------- */
.fee-note {
  padding: var(--sp-16) var(--sp-24);
  margin: 0 0 var(--sp-24);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-md);
}

.fee-note__amount {
  margin: 0;
  font-size: 17px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.fee-note__detail {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* Inline download cards on the partner page sit tighter than the
   dedicated downloads page, which has nothing else competing. */
.download-cards--inline {
  margin-bottom: var(--sp-24);
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
}

@media (min-width: 640px) {
  .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The select must be allowed to be narrower than its longest option. */
.field-row .select,
.field-row .input { width: 100%; min-width: 0; }

.filter-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-16);
  margin-bottom: var(--sp-24);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12);
  margin-bottom: var(--sp-24);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.filter-bar__chips {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--sp-8);
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.filter-bar__chips .chip { flex-shrink: 0; }

.filter-bar__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
}

.filter-bar__search {
  min-width: 200px;
  flex: 1;
}

.filter-bar__sort { min-width: 172px; }

/* Sidebar toggle — mobile only. */
@media (min-width: 1024px) {
  .filter-bar__toggle { display: none; }
}


/* =====================================================================
   21. CATALOG LAYOUT — sidebar + results
   ===================================================================== */

.catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
}

@media (min-width: 1024px) {
  .catalog {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--sp-32);
  }
}

/* Collapsible below 1024px, always open above it. */
.catalog__sidebar { display: none; }
.catalog__sidebar.is-open { display: block; }

@media (min-width: 1024px) {
  .catalog__sidebar { display: block; }
}

.catalog__sidebar-inner {
  padding: var(--sp-16);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

@media (min-width: 1024px) {
  .catalog__sidebar-inner {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.catalog__aside-title {
  margin: 0 0 var(--sp-12);
  color: var(--grey);
}


/* =====================================================================
   22. CATEGORY TREE — two levels, counts, active branch highlighted
   ===================================================================== */

.cat-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-tree__main,
.cat-tree__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: 40px;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.cat-tree__main {
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: var(--fw-h-bold);
  letter-spacing: var(--ls-heading);
}

.cat-tree__sub {
  min-height: 34px;
  padding-left: var(--sp-16);
  color: var(--ink-2);
  font-size: 13.5px;
}

.cat-tree__main:hover,
.cat-tree__sub:hover {
  background: var(--bg-soft);
  color: var(--blue);
  text-decoration: none;
}

/* Active leaf. */
.cat-tree__main.is-active,
.cat-tree__sub.is-active {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: var(--fw-bold);
}

/* Parent of the active sub-category — the whole branch reads as active,
   not just the leaf, so you can see where you are in the tree. */
.cat-tree__main.is-branch { color: var(--blue); }

.cat-tree__subs {
  margin: 0 0 var(--sp-8);
  padding: 0;
  list-style: none;
}

.cat-tree__count {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--grey-light);
}

.cat-tree__main.is-active .cat-tree__count,
.cat-tree__sub.is-active .cat-tree__count { color: var(--blue); }

.catalog__aside-block {
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
}

.vehicle-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* =====================================================================
   23. RESULTS HEADER + ACTIVE FILTER PILLS
   ===================================================================== */

.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}

.results-head__count { margin: 0; color: var(--grey); }
.results-head__count strong { color: var(--ink); }
.results-head__note { margin: 0; color: var(--grey-light); font-size: 13.5px; }

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}

.filter-pills__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--grey);
}

/* A pill with an x that removes just this one filter and keeps the
   others — not a "clear all" in disguise. */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 34px;
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-12);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.filter-pill:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  text-decoration: none;
}

.filter-pill__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(30, 103, 176, 0.14);
  font-size: 13px;
  line-height: 1;
}

.filter-pill:hover .filter-pill__x { background: rgba(255, 255, 255, 0.25); }


/* =====================================================================
   24. CATALOG PRODUCT GRID — 1 / 2 / 3 / 4
   Narrower than the home grid because the sidebar takes 268px.
   ===================================================================== */

.catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}

@media (min-width: 1400px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* =====================================================================
   25. EMPTY STATE — rendered INSTEAD of the grid, never alongside it
   ===================================================================== */

.empty-state {
  padding: var(--sp-56) var(--sp-24);
  text-align: center;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

.empty-state__title { margin: 0 0 var(--sp-8); }

.empty-state__text {
  margin: 0 auto var(--sp-20);
  max-width: 460px;
  color: var(--grey);
}

.empty-state__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-20);
}


/* =====================================================================
   26. PAGINATION FOOTNOTE
   ===================================================================== */

.pagination-wrap { margin-top: var(--sp-32); }

.pagination-note {
  margin: var(--sp-12) 0 0;
  text-align: center;
  color: var(--grey-light);
  font-size: 13px;
}


/* =====================================================================
   27. PRODUCT DETAIL — two columns, stacking on mobile
   ===================================================================== */

.pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
}

@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-40);
    align-items: start;
  }
}

/* --- gallery ------------------------------------------------------ */

.pdp-gallery__main {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.pdp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  margin: var(--sp-12) 0 0;
  padding: 0;
  list-style: none;
}

/* Thumbnails are buttons, not links — they swap the main image rather
   than navigating, and must be reachable by keyboard. */
.pdp-thumb {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.pdp-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pdp-thumb:hover { border-color: var(--blue-line); }

.pdp-thumb[aria-current="true"] {
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}

/* --- info column -------------------------------------------------- */

.pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.pdp-info__cat { align-self: flex-start; }

.pdp-info__title {
  margin: 0;
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pdp-info__sku {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--grey-light);
}

.pdp-info__summary {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.pdp-price {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-16);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.pdp-actions .btn {
  flex: 1;
  min-width: 210px;
}

/* Trust row under the buttons. */
.pdp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-24);
  margin: 0;
  padding: var(--sp-16) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pdp-trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
}

.pdp-trust__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
}


/* =====================================================================
   28. DESCRIPTION + SPECIFICATIONS + FITMENT
   ===================================================================== */

.pdp-prose {
  max-width: 760px;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}

.spec-table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  border-collapse: collapse;
}

.spec-table caption {
  padding: 0 0 var(--sp-12);
  text-align: left;
  color: var(--grey);
  font-size: var(--fs-small);
}

.spec-table th[scope="col"] {
  padding: var(--sp-12) var(--sp-16);
  background: var(--bg-dark);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  font-weight: var(--fw-h-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
}

.spec-table th[scope="row"] {
  width: 40%;
  padding: var(--sp-12) var(--sp-16);
  color: var(--grey);
  font-weight: var(--fw-semibold);
  text-align: left;
  vertical-align: top;
}

.spec-table td {
  padding: var(--sp-12) var(--sp-16);
  color: var(--ink);
  font-weight: var(--fw-medium);
  vertical-align: top;
}

/* Zebra striping. */
.spec-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.spec-table tbody tr + tr { border-top: 1px solid var(--line); }

.fitment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* =====================================================================
   29. NOT FOUND — 404 inside the normal layout
   ===================================================================== */

.notfound {
  max-width: 560px;
  margin-inline: auto;
  padding-block: var(--sp-56);
  text-align: center;
}

.notfound__code {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: var(--fw-h-black);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--blue-soft);
}

.notfound__text {
  margin: var(--sp-12) auto var(--sp-24);
  color: var(--grey);
}


/* =====================================================================
   30. SERVICES — cards with optional "From ₹X" line
   ===================================================================== */

.service-card--light {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  height: 100%;
  padding: var(--sp-24) var(--sp-20);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: box-shadow var(--t-base), transform var(--t-base),
              border-color var(--t-base);
}

.service-card--light:hover {
  box-shadow: var(--sh-2);
  border-color: var(--blue-line);
  transform: translateY(-3px);
}

.service-card--light .service-card__no {
  border-color: var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue);
}

.service-card--light .service-card__title { color: var(--black); }
.service-card--light .service-card__text  { color: var(--grey); }
.service-card--light .service-card__price { color: var(--blue); }

.service-card__media {
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-12);
  border-radius: var(--r-sm);
  border: 1px solid var(--blue-line);
  background: var(--blue-soft);
  overflow: hidden;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =====================================================================
   31. HOW IT WORKS — numbered step strip
   ===================================================================== */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-20);
  }
}

.step {
  position: relative;
  padding: var(--sp-24) var(--sp-20);
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--r-md);
}

.step__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-12);
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: var(--fw-h-black);
  font-size: 15px;
}

.step__title { margin: 0 0 var(--sp-8); font-size: 16.5px; }
.step__text  { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--grey); }


/* =====================================================================
   32. ABOUT — story, facts, stats, mission/vision
   ===================================================================== */

.story {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
  align-items: center;
}

@media (min-width: 1024px) {
  .story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-40);
  }
}

.story__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.story__prose p { margin-bottom: var(--sp-16); color: var(--ink-2); }
.story__prose p:last-child { margin-bottom: 0; }

/* --- company facts: a definition list, because that is what it is --- */

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  justify-content: space-between;
  padding: var(--sp-16);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.facts__row:nth-child(even) { background: var(--bg-soft); }

.facts__key {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--grey);
}

.facts__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--fw-h-bold);
  color: var(--black);
  text-align: right;
}

/* --- stats band --------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  padding: var(--sp-20);
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: var(--fw-h-black);
  letter-spacing: var(--ls-heading);
  color: var(--white);
}

.stat__label {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--grey-light);
}

/* --- mission / vision --------------------------------------------- */

.mv {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-20);
}

@media (min-width: 768px) {
  .mv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mv-card {
  padding: var(--sp-24);
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
}

.mv-card__title { margin: 0 0 var(--sp-8); }
.mv-card__text  { margin: 0; color: var(--grey); line-height: 1.65; }


/* =====================================================================
   33. CONTACT — info cards, form, map
   ===================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: var(--sp-40);
  }
}

.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-card {
  display: flex;
  gap: var(--sp-12);
  height: 100%;
  padding: var(--sp-16);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.contact-card:hover {
  border-color: var(--blue-line);
  box-shadow: var(--sh-1);
}

/* Holds an inline SVG from contactIcon(). currentColor on the <svg>
   means the icon inherits this rule's colour like text would. */
.contact-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue);
}

.contact-card__mark svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* The card is an <a> for phone/email/WhatsApp, so the icon must follow
   the link's hover state rather than staying flat. */
a.contact-card:hover .contact-card__mark {
  background: var(--blue);
  color: var(--white);
}

.contact-card__body { min-width: 0; }

.contact-card__label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--grey);
}

.contact-card__value {
  display: block;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: break-word;
}

a.contact-card__value:hover { color: var(--blue); text-decoration: none; }

/* --- form --------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24);
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--r-md);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- map ---------------------------------------------------------- */

.map-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* Shown when the map_embed setting is empty — a deliberate placeholder,
   never a broken iframe. */
.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 260px;
  padding: var(--sp-32);
  text-align: center;
  color: var(--grey);
}


/* =====================================================================
   34. LEGAL PAGES — single column prose
   ===================================================================== */

.legal {
  max-width: 760px;
  margin-inline: auto;
}

.legal h2 {
  margin-top: var(--sp-40);
  margin-bottom: var(--sp-12);
  font-size: clamp(20px, 2.6vw, 26px);
}

.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  margin-top: var(--sp-24);
  margin-bottom: var(--sp-8);
  font-size: 17px;
}

.legal p,
.legal li { color: var(--ink-2); line-height: 1.7; }

.legal p { margin-bottom: var(--sp-16); }

.legal ul {
  margin: 0 0 var(--sp-16);
  padding-left: var(--sp-24);
}

.legal li { margin-bottom: var(--sp-8); }

.legal__updated {
  padding: var(--sp-12) var(--sp-16);
  margin-bottom: var(--sp-32);
  background: var(--bg-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--grey);
}


/* =====================================================================
   35. TABS — partner.php franchise / vendor
   The tabs are real links, so they work with JS off; main.js upgrades
   them to switch panels without a reload.
   ===================================================================== */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-24);
  padding: var(--sp-4);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.tabs__tab {
  flex: 1;
  min-width: 180px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: var(--fw-h-bold);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.tabs__tab:hover {
  background: var(--bg);
  color: var(--blue);
  text-decoration: none;
}

.tabs__tab.is-active {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--sh-1);
}

.tabs__tab.is-active:hover { color: var(--white); }

/* Panels are hidden by class, not by [hidden], so the tab links still
   scroll to them if JS is off and the browser follows the anchor. */
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }


/* =====================================================================
   36. PARTNER FORM LAYOUT
   ===================================================================== */

.partner-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
  align-items: start;
}

@media (min-width: 1024px) {
  .partner-form-grid {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--sp-40);
  }
}

.partner-form-aside {
  padding: var(--sp-24);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.partner-form-aside h3 {
  margin: var(--sp-24) 0 var(--sp-12);
  font-size: 16.5px;
}

.partner-form-aside h3:first-child { margin-top: 0; }

.tick-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tick-list li {
  position: relative;
  padding-left: var(--sp-24);
  margin-bottom: var(--sp-8);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--grey);
}

/* Tick drawn in CSS rather than an icon — decorative, and it must not
   be read out as a bullet by a screen reader. */
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}


/* =====================================================================
   37. CONSENT CHECKBOX, FIELDSET, FILE INPUT
   ===================================================================== */

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}

.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.consent--compact { font-size: 14px; }

.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.fieldset legend {
  padding: 0;
  margin-bottom: var(--sp-12);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8) var(--sp-16);
}

@media (min-width: 640px) {
  .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .checkbox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A file input cannot be styled internally, so only the box is themed. */
.file-input {
  padding: var(--sp-8);
  line-height: 1.4;
  cursor: pointer;
}

.file-input::file-selector-button {
  margin-right: var(--sp-12);
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.file-input::file-selector-button:hover {
  border-color: var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue);
}


/* =====================================================================
   38. FLASH MESSAGES
   Rendered after every POST/Redirect/GET — see includes/flash.php.
   ===================================================================== */

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-bottom: var(--sp-24);
}

.alert-info {
  background: var(--blue-soft);
  border-color: var(--blue-line);
  color: var(--blue);
}


/* =====================================================================
   404 — page not found
   Sprint 10B. Replaces the development rewrite that made every bad URL
   return the home page with HTTP 200 (OPEN-9).
   ===================================================================== */

.notfound {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-32) 0 var(--sp-56);
  text-align: center;
}

/* Decorative, and aria-hidden in the markup — the <h1> carries the
   meaning for a screen reader. */
.notfound__code {
  margin: 0 0 var(--sp-16);
  font-family: var(--font-heading);
  font-weight: var(--fw-h-bolder);
  /* 14vw not 18vw: at 320px the numeral was crowding the heading below
     it, because line-height 1 leaves no descender room. */
  font-size: clamp(56px, 14vw, 128px);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--blue-soft);
}

.notfound__title {
  margin: 0 0 var(--sp-12);
  font-size: clamp(22px, 5vw, 32px);
}

.notfound__lead {
  margin: 0 auto var(--sp-16);
  max-width: 46ch;
  color: var(--grey);
}

/* The requested path is untrusted text — it must wrap rather than push
   the page sideways at 320px. Same lesson as D-86. */
.notfound__path {
  margin: 0 auto var(--sp-24);
  max-width: 100%;
  color: var(--grey);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.notfound__path code {
  padding: 2px var(--sp-8);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  justify-content: center;
  margin-bottom: var(--sp-32);
}

.notfound__links {
  padding-top: var(--sp-24);
  border-top: 1px solid var(--line);
}

.notfound__links-title {
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.notfound__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-24);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* =====================================================================
   LANGUAGE SWITCHER — Sprint 11
   Three plain links, not a <select>: works with JS off, keyboard
   navigable for free, and crawlable so the hreflang tags mean something.
   ===================================================================== */

.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
}

.langswitch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  /* 30px keeps the top bar its original height; the switcher sits beside
     the phone number, not in the main nav, so the 44px touch minimum is
     met by the drawer variant below where thumbs actually reach. */
  min-height: 30px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.langswitch__opt:hover,
.langswitch__opt:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  text-decoration: none;
}

/* Active state is colour + fill, never an underline — brand.md §4. */
.langswitch__opt.is-active {
  background: var(--blue);
  color: var(--white);
}

.topbar__group--end {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

/* --- drawer variant --------------------------------------------------
   Full width, taller targets: this one is used with a thumb. */
.langswitch--drawer {
  display: flex;
  width: 100%;
  margin-bottom: var(--sp-12);
  border-color: rgba(255, 255, 255, 0.25);
}

.langswitch--drawer .langswitch__opt {
  flex: 1 1 0;
  min-height: 44px;
  font-size: 14px;
}

/* Below 640px the top bar hides its email to make room; the switcher
   stays, because it is the only way to change language up there. */
@media (max-width: 639px) {
  .langswitch__opt {
    min-width: 30px;
    padding: 0 6px;
    font-size: 12px;
  }
}


/* =====================================================================
   LOCATIONS + DOWNLOADS + SOCIAL — Sprint 12B
   ===================================================================== */

/* --- office cards on contact.php ------------------------------------- */
.contact-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-16);
  margin: 0 0 var(--sp-32);
  padding: 0;
  list-style: none;
}

.location-card {
  min-width: 0;
  padding: var(--sp-20);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.location-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.location-card__name {
  margin: 0;
  font-size: 16px;
}

/* Addresses are free text and can contain a long unbroken token. */
.location-card__address {
  margin: 0 0 var(--sp-12);
  color: var(--grey);
  font-style: normal;
  overflow-wrap: anywhere;
}

.location-card__link {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- offices strip on about.php -------------------------------------- */
.offices-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-32);
  margin: 0 0 var(--sp-16);
  padding: 0;
  list-style: none;
}

.offices-strip__item {
  min-width: 0;
  padding-left: var(--sp-12);
  border-left: 3px solid var(--blue-line);
}

.offices-strip__name {
  display: block;
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.offices-strip__city {
  display: block;
  color: var(--grey);
  font-size: var(--fs-small);
}

/* --- downloads page --------------------------------------------------- */
.download-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.download-card {
  display: flex;
  gap: var(--sp-16);
  min-width: 0;
  padding: var(--sp-24);
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--r-md);
}

/* A card with no file is visibly inert rather than looking clickable. */
.download-card--unavailable {
  border-top-color: var(--line);
  background: var(--bg-soft);
}

.download-card__mark {
  flex-shrink: 0;
  color: var(--blue);
}

.download-card--unavailable .download-card__mark { color: var(--grey-light); }

.download-card__body { min-width: 0; }

.download-card__title {
  margin: 0 0 var(--sp-8);
  font-size: 17px;
}

.download-card__desc {
  margin: 0 0 var(--sp-8);
  color: var(--grey);
  overflow-wrap: anywhere;
}

.download-card__meta {
  margin: 0 0 var(--sp-16);
  color: var(--grey);
  font-size: var(--fs-small);
}

/* --- footer social icons ---------------------------------------------
   The markup changed from two-letter text marks to inline SVG in 12B;
   these rules size the new svg and keep the old hover behaviour. */
.site-footer__social a svg { display: block; }

.mt-32 { margin-top: var(--sp-32); }


/* =====================================================================
   TAGLINE + CAREERS — Sprint 12C
   ===================================================================== */

/* --- brand tagline ---------------------------------------------------
   Sits under the wordmark in the header and under the logo in the
   footer. Small and quiet: it supports the mark, it does not compete
   with it. */
.site-logo__tagline {
  display: none;                 /* hidden on small screens — no room */
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--grey-light);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  /*
   * Sprint 12D. Was 1024px. The ninth nav item ("Second Hand EVs") took
   * the header past what 1366 can hold: logo + tagline + nine links +
   * the Get a Quote button. Something had to go, and between the
   * company's NAME rendering as a 7px sliver and its tagline waiting
   * for a wider screen, the tagline waits.
   *
   * Hidden deliberately rather than squeezed: an ellipsised tagline
   * ("One Stop EV Ca...") reads as a bug, an absent one reads as a
   * layout. At 1440 and above it is back, unchanged.
   *
   * ARCHITECT: if you would rather keep the tagline at 1366, the
   * alternative is a shorter nav label - "Used EVs" fits with room to
   * spare. That is a copy decision, so it is yours, not mine.
   */
  .site-logo__tagline { display: none; }
}

/*
 * The tagline returns once the header actually has room for it.
 * Sprint 12D — see the note in the 1024px block above.
 */
@media (min-width: 1024px) {
  /*
   * BACK TO 1024 — the value it had before Sprint 12D, so that
   * regression is now fully undone rather than merely mitigated.
   *
   * The journey, kept because each number was measured and two were
   * wrong (D-145):
   *   1024  original
   *   1440  12D guess. Broke 1440 in English.
   *   1600  12D, correct for the old label and 12px padding.
   *   1280  12D after "Used EVs" and 8px padding.
   *   1024  12E, after the 3E monogram and the header Get a Quote
   *         button were removed. Verified in en, hi AND mr.
   *
   * The measured FLOOR is actually 480px — the header fits a tagline
   * well below this. It stays at 1024 because 480-1023 is phone and
   * tablet, where the design drops the tagline on purpose and the
   * header is a wordmark and a burger. Fitting is not the same as
   * belonging.
   */
  .site-logo__tagline { display: inline-block; }
}

.site-footer__tagline {
  margin: 0 0 var(--sp-8);
  color: var(--blue-on-dark);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
}

.page-banner__tagline {
  margin: 0 0 var(--sp-8);
  color: var(--blue-on-dark);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- current openings ------------------------------------------------ */
/* --- the application form panel -------------------------------------- */
.form-panel {
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--r-md);
}

/* Devanagari labels run longer; the grid already wraps, this just keeps
   the file upload control from forcing its parent wide on small screens. */
.career-form .file-input { max-width: 100%; }


/* =====================================================================
   SPRINT 14 — payment details block (item 3) and visitor counter (item 4)
   ===================================================================== */

/* Payment block: QR beside the bank details from 560px up, stacked
   below it. The QR is the thing people use on a phone, so on a narrow
   screen it comes FIRST rather than after six lines of bank detail. */
.payment-block {
  margin: var(--sp-24) 0 0;
  padding: var(--sp-16) var(--sp-24) var(--sp-24);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-md);
}

.payment-block__title {
  margin: 0 0 var(--sp-12);
  font-size: 17px;
}

.payment-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

@media (min-width: 560px) {
  .payment-block__body {
    flex-direction: row;
    align-items: flex-start;
  }
  .payment-block__details { flex: 1 1 auto; }
}

.payment-block__qr {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}

/* width/height are on the <img> for CLS; this keeps it from overflowing
   a 320px screen, where 220px plus padding is already tight. */
.payment-block__qr img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-radius: var(--r-md);
}

.payment-block__qr figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.payment-block__amount {
  margin: 0 0 var(--sp-12);
  font-size: 17px;
}

.payment-block__amount .label { margin-right: var(--sp-8); }

.payment-block__list {
  margin: 0;
  display: grid;
  gap: var(--sp-8);
}

.payment-block__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-12);
  align-items: baseline;
}

.payment-block__row dt {
  flex: 0 0 9.5rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.payment-block__row dd {
  flex: 1 1 12rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: baseline;
}

/* An account number or IFSC is read digit by digit — tabular figures
   stop 1 and 7 from shifting the line as the eye moves along it. */
.payment-block__value {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.payment-block__copy {
  padding: 2px var(--sp-8);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
}

.payment-block__copy:hover { background: #fff; }

.payment-block__copy.is-copied {
  color: var(--ink);
  border-color: var(--ink-2);
}

.payment-block__note {
  margin: var(--sp-12) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* Visitor counter in the footer bar. Sprint 14, item 4. */
.site-footer__visits {
  font-variant-numeric: tabular-nums;
}

.site-footer__visits-today {
  opacity: 0.75;
}


/* =====================================================================
   SPRINT 14 — HERO SLIDER (item 7)

   Slides are stacked in a grid cell and cross-faded with opacity, not
   translated: no layout is recalculated per frame, and a fade degrades
   to an instant swap under prefers-reduced-motion without leaving a
   half-slid panel on screen.
   ===================================================================== */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
}

.hero-slider__viewport {
  display: grid;
}

.hero-slider__slide {
  grid-area: 1 / 1;                 /* every slide in the same cell */
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease;
}

.hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Without JS nothing adds .is-active beyond the first slide, and the
   first slide already carries it server-side, so the hero still shows. */
.hero-slider:not(.is-ready) .hero-slider__slide:not(.is-active) {
  display: none;
}

.hero-slider__image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 72vh;
  object-fit: cover;
  object-position: center;
}

/* The caption sits over the image, with a gradient scrim so white text
   stays legible whatever photograph the client uploads. The scrim is
   the reason the spec says "no text baked into the image" and "subject
   in the right third": the words go here, on the left. */
.hero-slider__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-image: linear-gradient(96deg,
    rgba(11, 14, 19, 0.92) 0%,
    rgba(11, 14, 19, 0.78) 44%,
    rgba(11, 14, 19, 0.25) 100%);
}

/* This element carries BOTH .container and .hero-slider__caption-inner.
   It used to override the container's max-width with 34rem, which left
   a 544px box with `margin-inline: auto` — so the whole caption sat in
   the middle of the screen instead of on the site's left gutter.

   The text hero solves this correctly and this now matches it: the
   container keeps its full width and gutter, and the CHILDREN carry the
   reading-width limit. The headline then starts on the same vertical
   line as the logo and the nav. */
.hero-slider__caption-inner {
  color: #fff;
  padding-block: var(--sp-32);
}

.hero-slider__caption-inner > * {
  max-width: 34rem;
}

.hero-slider__title {
  margin: 0 0 var(--sp-12);
  color: #fff;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.12;
}

.hero-slider__lede {
  margin: 0 0 var(--sp-24);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.6vw, 18px);
}

.hero-slider__actions { margin: 0; }

/* --- controls: hidden until JS says it can drive them --------------- */
.hero-slider__arrow,
.hero-slider__dots {
  display: none;
}

.hero-slider.is-ready .hero-slider__arrow {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;                       /* 44px: the minimum comfortable
                                        touch target */
  height: 44px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(11, 14, 19, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.hero-slider.is-ready .hero-slider__arrow:hover {
  background: rgba(11, 14, 19, 0.8);
}

.hero-slider__arrow--prev { left: var(--sp-12); }
.hero-slider__arrow--next { right: var(--sp-12); }

.hero-slider.is-ready .hero-slider__dots {
  display: flex;
  gap: var(--sp-8);
  position: absolute;
  left: 50%;
  bottom: var(--sp-16);
  transform: translateX(-50%);
}

.hero-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}

.hero-slider__dot.is-active {
  width: 26px;
  background: #fff;
}

/* Keyboard focus must stay visible on top of a photograph. */
.hero-slider__arrow:focus-visible,
.hero-slider__dot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* Portrait crop on phones; the caption moves to the lower half so it
     never covers the subject of the picture. */
  .hero-slider__image { max-height: 76vh; }

  .hero-slider__caption {
    align-items: flex-end;
    background-image: linear-gradient(180deg,
      rgba(11, 14, 19, 0.15) 0%,
      rgba(11, 14, 19, 0.55) 45%,
      rgba(11, 14, 19, 0.92) 100%);
  }

  .hero-slider__caption-inner { padding-bottom: var(--sp-40); }

  /* Arrows are for pointers. On a phone the slider is swipeable and the
     dots are both the control and the position indicator. */
  .hero-slider.is-ready .hero-slider__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Autoplay is already disabled in JS; this covers the manual moves. */
  .hero-slider__slide { transition: none; }
}

/* The payment block must survive being dropped into a narrow column.
   It is full width on all three partner tabs today, but a ~300px aside
   made the account number wrap mid-number — so the stacked layout is
   pinned here rather than left to depend on viewport width. */
.partner-form-aside .payment-block__body { flex-direction: column; }
.partner-form-aside .payment-block__row  { display: block; }
.partner-form-aside .payment-block__row dt { margin-bottom: 2px; }