/* =========================================================================
   Ratshie Automotive - Premium Design System
   Brand: black / charcoal + gold accent (#f0a000)
   ========================================================================= */

:root {
  --ink: #0b0b0c;
  --ink-2: #101114;
  --coal: #15161a;
  --steel: #1c1e24;
  --steel-2: #23262e;
  --line: #2b2e37;
  --gold: #f0a000;
  --gold-2: #ffb41f;
  --gold-soft: rgba(240, 160, 0, 0.12);
  --gold-line: rgba(240, 160, 0, 0.45);
  --cream: #f6f4ef;
  --paper: #ffffff;
  --text: #16171b;
  --muted: #6c717b;
  --muted-on-dark: #9aa1ad;
  --green: #1f9d61;
  --red: #d94b3d;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.22);
  --font-display: "Sora", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Height of the fixed mobile bottom bar (excludes safe-area inset, which is
     added on top). Declared here so page padding and the floating buttons can
     all clear it from a single source. */
  --mbh: 63px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Horizontal-overflow guard. The real offenders are fixed below (header actions,
   product cards, filters bar); this is a backstop so no single wide element can
   make the page scroll sideways. `overflow-x: clip` is preferred over `hidden`
   because `hidden` turns the element into a scroll container, which would break
   `position: sticky` on `.nav`. Browsers without `clip` support keep `hidden`. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; font-weight: 700; }
p { margin: 0; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container--wide { max-width: 1440px; }
.section { padding: 88px 0; }
.section--dark { background: var(--ink); color: #f3f3f3; }
.section--coal { background: var(--ink-2); color: #f3f3f3; }
.section--cream { background: var(--cream); }

/* ---------- Utility ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 12px;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 26px; height: 2px; background: var(--gold); }
.section-title { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; }
.section-head { max-width: 760px; }
.section-head .section-title { margin-top: 14px; }
.section-head p.lead { margin-top: 16px; font-size: 17px; color: var(--muted); }
.section--dark p.lead, .section--coal p.lead { color: var(--muted-on-dark); }
.mt-0 { margin-top: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flow > * + * { margin-top: 16px; }

/* ---------- Legal prose (Terms, Privacy, Refunds, Shipping) ----------
   Constrain the reading measure and let long unbroken strings (URLs, reference
   codes) wrap instead of overflowing the container. The page-level
   `overflow-x: hidden` guard would otherwise silently clip the overflow, so the
   fix belongs here at the source. */
.legal-prose {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.legal-prose h2 { font-size: clamp(19px, 2.4vw, 26px); }
.legal-prose p,
.legal-prose li { color: var(--text); }
.legal-prose ul { padding-left: 20px; }
.legal-prose li + li { margin-top: 8px; }
.legal-prose a { color: var(--gold); text-decoration: underline; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 15px 26px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  white-space: nowrap; text-align: center; line-height: 1.2;
}
.btn:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.btn--gold { background: var(--gold); color: #161600; box-shadow: 0 8px 24px rgba(240,160,0,0.35); }
.btn--gold:hover { background: var(--gold-2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(240,160,0,0.4); }
.btn--dark { background: var(--steel); color: #fff; border-color: var(--line); }
.btn--dark:hover { background: var(--steel-2); border-color: var(--gold-line); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.btn--ghost-dark { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost-dark:hover { border-color: var(--gold); color: var(--gold); }
.btn--whatsapp { background: #25d366; color: #07330f; }
.btn--whatsapp:hover { background: #3bdb78; transform: translateY(-2px); }
.btn--outline-gold { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--outline-gold:hover { background: var(--gold); color: #161600; }
.btn--sm { padding: 10px 16px; font-size: 13px; border-radius: 10px; }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 32px; font-size: 16px; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn .ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Navbar ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-header, 60); background: var(--paper);
  border-bottom: 1px solid var(--line); transition: box-shadow 0.2s var(--ease); }
.nav__accent-line { display: block; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold)); opacity: 0.9; }
.nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; padding-right: 68px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img.logo-mark { height: 44px; width: auto; }
/* Logo resilience: if the static logo ever fails to load (slow connection,
   unavailable asset), the inline onerror handler hides the broken <img> and
   reveals the text wordmark that sits behind it. The [hidden] rule keeps the
   wordmark off by default so the image remains the primary brand mark. */
.logo-mark--failed { display: none; }
.brand-fallback {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-fallback[hidden] { display: none; }
.brand .brand-fallback { font-size: 18px; }
.footer__logo .brand-fallback { font-size: 16px; color: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 18px; letter-spacing: 0.02em; }
.brand-text .sub { color: var(--gold); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }
.nav__menu { display: flex; align-items: center; gap: 6px; }
.nav__link { color: var(--text); font-weight: 500; font-size: 14.5px; padding: 10px 12px; border-radius: 10px; transition: color 0.16s, background 0.16s; }
.nav__link:hover { color: var(--gold); background: var(--gold-soft); }
.nav__link.is-active { color: var(--gold); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__cta { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.nav__cta--outline { border: 1px solid var(--gold-line); color: var(--gold); background: transparent; }
.nav__cta--outline:hover { background: var(--gold-soft); color: #161600; }
.nav__cart { position: relative; color: var(--text); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 10px; border-radius: 10px; }
.nav__cart:hover { background: var(--cream); }
.cart-badge { position: absolute; top: 2px; right: 0; background: var(--gold); color: #161600; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--ink); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg .grid-lines { position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px; }
.hero__glow { position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,160,0,0.22), transparent 60%);
  top: -180px; right: -120px; filter: blur(10px); }
.hero__inner { position: relative; z-index: 2; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 60px 0; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-2); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; }
.hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--gold); }
.hero h1 { font-size: clamp(38px, 6.4vw, 76px); margin-top: 18px; letter-spacing: -0.03em; }
.hero h1 .accent { color: var(--gold); }
.hero__lead { max-width: 640px; margin-top: 22px; font-size: clamp(16px, 2vw, 19px); color: var(--muted-on-dark); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
.hero__trust .t-item { display: flex; align-items: center; gap: 12px; }
.hero__trust .t-value { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; }
.hero__trust .t-value .gold { color: var(--gold); }
.hero__trust .t-label { font-size: 13px; color: var(--muted-on-dark); }

/* ---------- Light Hero Variant ---------- */
.hero--light {
  background: var(--paper);
  color: var(--text);
}
.hero--light .grid-lines {
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
}
.hero--light .hero__glow { display: none; }
.hero--light .hero__inner { min-height: 0; }
.hero--light .hero__eyebrow { color: var(--gold); }
.hero--light .hero__eyebrow::before { background: var(--gold); }
.hero--light .hero h1 { color: var(--text); }
.hero--light .hero__lead { color: var(--muted); }
.hero--light .btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.hero--light .hero__trust { border-top-color: var(--line); }
.hero--light .hero__trust .t-value { color: var(--text); }
.hero--light .hero__trust .t-label { color: var(--muted); }
.hero--light .hero__trust .t-value .gold { color: var(--gold); }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--ink-2); border-bottom: 1px solid var(--line); }
.trustbar__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trustbar__item { padding: 26px 24px; border-right: 1px solid var(--line); text-align: center; }
.trustbar__item:last-child { border-right: 0; }
.trustbar__item .ico-wrap { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 12px; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.trustbar__item .ico-wrap svg { width: 28px; height: 28px; }
.trustbar__item .t-title { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.trustbar__item .t-sub { color: var(--muted-on-dark); font-size: 13.5px; margin-top: 4px; }

/* ---------- Services grid ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.service-card { position: relative; background: var(--paper); border: 1px solid #ece8e0; border-radius: var(--radius-lg); padding: 30px 26px; overflow: hidden; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.service-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon { width: 60px; height: 60px; border-radius: 14px; background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.service-card__icon svg { width: 32px; height: 32px; }
.service-card h3 { font-size: 19px; }
.service-card__desc { color: var(--muted); font-size: 14.5px; margin-top: 12px; }
.service-card__cta { display: flex; gap: 12px; align-items: center; margin-top: 22px; font-weight: 600; color: var(--gold); font-size: 14px; }
.service-card__cta .sep { color: var(--line); }

/* ---------- Category cards (shop) ---------- */
.shop-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.cat-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 400px; display: flex; align-items: flex-end; color: #fff; background: var(--coal); }
.cat-card__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cat-card__bg .big-svg { position: absolute; bottom: -40px; right: -30px; width: 280px; height: 280px; opacity: 0.5; color: var(--gold); }
.cat-card__bg .shine { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(240,160,0,0.08), transparent 40%), linear-gradient(to top, rgba(11,11,12,0.88), rgba(11,11,12,0.25) 55%, rgba(11,11,12,0.3)); }
.cat-card__body { position: relative; z-index: 1; padding: 34px; width: 100%; }
.cat-card__kicker { color: var(--gold-2); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; }
.cat-card h3 { font-size: 30px; margin-top: 12px; }
.cat-card__desc { color: var(--muted-on-dark); margin-top: 12px; max-width: 46ch; font-size: 15.5px; }
.cat-card__count { color: var(--gold); font-weight: 600; margin-top: 10px; font-size: 14px; }
.cat-card__cta { margin-top: 22px; }

/* ---------- Product cards ---------- */
/* `minmax(0, 1fr)` rather than `1fr`: a bare `1fr` track has an automatic
   minimum size, so one long word inside a card can push the track wider than
   the viewport and cause the whole page to scroll sideways. */
/* Shop catalogue: compact Takealot-style tiles — five columns on large
   desktops, scaling down to a comfortable two-column grid on phones.
   Columns are explicit (never auto-fill) so every row of cards keeps the
   exact same width, image area and spacing. */
.products-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.products-grid > * { min-width: 0; }
.product-card { position: relative; background: var(--paper); border: 1px solid #ece8e0; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }

/* Whole-card loading skeleton: one grey surface covering the full card until
   the product image has loaded, then the complete card is revealed together. */
.product-card__content { display: flex; flex-direction: column; flex: 1; min-height: 0; transition: opacity 200ms ease-out; }
.product-card--loading .product-card__content { opacity: 0; visibility: hidden; pointer-events: none; }
.product-card__skeleton {
  position: absolute; inset: 0; z-index: 1;
  background: #E5E7EB; border-radius: var(--radius-lg);
  animation: card-skeleton-pulse 1.6s ease-in-out infinite;
}
@keyframes card-skeleton-pulse {
  0%, 100% { background-color: #E5E7EB; }
  50% { background-color: #F3F4F6; }
}
.product-card--ready .product-card__skeleton { display: none; }
.product-card--ready .product-card__content { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .product-card__skeleton { animation: none; }
  .product-card--loading .product-card__content { transition: none; }
}
.product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card__media .svg-art { width: 74px; height: 74px; color: var(--gold); opacity: 0.9; }
.group-filter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.group-filter::-webkit-scrollbar { display: none; }
.group-filter__chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.group-filter__chip:hover { border-color: var(--gold); color: var(--text); }
.group-filter__chip.is-active { background: var(--gold); border-color: var(--gold); color: #161600; }
.shop-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.shop-result-head__clear { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.shop-result-head__clear:hover { color: var(--gold); }
/* Placeholder and real photography share the same white media surface so the
   grid reads as one consistent catalogue whether or not an image exists yet. */
.product-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); opacity: 0.75; background: var(--paper); }
.product-card__placeholder svg { width: 56px; height: 56px; stroke-width: 1.4; }
/* Real product photography must never be cropped, stretched or zoomed into.
   `contain` letterboxes the whole part inside the frame instead of cutting it
   off, and the padding keeps a consistent gutter around every image. */
.product-card__media img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 10px; transition: transform 0.45s var(--ease), opacity 0.2s; }
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(240,160,0,0.0); transition: box-shadow 0.22s; pointer-events: none; }
.product-card:hover .product-card__media::after { box-shadow: inset 0 0 0 1px rgba(240,160,0,0.28); }
/* Tags sit in the card body, above the title, never over the product image. */
.product-card__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.badge { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; }
.badge--gold { background: var(--gold); color: #161600; }
.badge--nyc { background: #111; color: #fff; }
.badge--green { background: #e6f7ee; color: #137a44; }
.badge--ink { background: var(--ink); color: #fff; }
/* Automatic stock badges (quantity is the only source of truth):
   1-9 -> Limited Stock, 0 -> Out of Stock, 10+ -> no badge at all. */
.badge--limited { background: #fff3e0; color: #b3560b; }
.badge--out { background: #fdecec; color: #c62828; }
.product-card__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.product-card__cat { color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.product-card h3 { font-size: 15px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__sku { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.product-card__desc { color: var(--muted); font-size: 12.5px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__avail { margin-top: 12px; font-size: 12.5px; font-weight: 600; }
.product-card__avail.in-stock { color: var(--green); }
.product-card__avail.on-request { color: #b9791a; }
.product-card__avail.out-of-stock { color: var(--red); }
.product-card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-card__price { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.product-card__price .enq { font-size: 13px; color: var(--gold); font-weight: 600; }
.product-card__actions { display: flex; gap: 8px; }
/* Compact "related products" rail on the product page: image + price only,
   kept deliberately tiny so it never competes with the main product. */
.products-grid.products-grid--compact { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.products-grid--compact .product-card { border: 0; background: transparent; border-radius: 0; }
.products-grid--compact .product-card:hover { transform: none; box-shadow: none; }
.products-grid--compact .product-card__badges,
.products-grid--compact .product-card__cat,
.products-grid--compact .product-card h3,
.products-grid--compact .product-card__desc,
.products-grid--compact .product-card__rating,
.products-grid--compact .product-card__actions,
.products-grid--compact .card-add,
.products-grid--compact .add-to-cart { display: none; }
.products-grid--compact .product-card__media { aspect-ratio: 1 / 1; border-radius: 12px; }
.products-grid--compact .product-card__body { padding: 8px 2px 0; }
.products-grid--compact .product-card__foot { margin-top: 0; padding-top: 6px; }
/* The related rail sits on a dark section, so the price needs light ink. */
.products-grid--compact .product-card__price { font-size: 13px; color: #fff; }
.products-grid--compact .product-card__price .now { color: #fff; }
.products-grid--compact .product-card__price .was { color: var(--muted-on-dark); }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.16s; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split__media { position: relative; }
.split__media-card { border-radius: var(--radius-lg); background: var(--steel); overflow: hidden; min-height: 460px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.split__media-card .svg-art { width: 120px; height: 120px; color: var(--gold); }
.split__media-card--img { position: relative; align-items: stretch; padding: 0; }
.split__media-card--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__media-flag {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(11, 11, 12, 0.72); color: #fff; backdrop-filter: blur(4px);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gold-line);
}
.split__benefits { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.split__benefits li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted-on-dark); }
.split__benefits li .check { color: var(--gold); flex: 0 0 auto; margin-top: 3px; }
.split__benefits li svg { width: 20px; height: 20px; }
.split__cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Combined feature columns ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.feature-col { background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; }

/* ---------- Why choose ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-grid--3 { grid-template-columns: repeat(3, 1fr); }
.why-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform 0.22s var(--ease), border-color 0.22s;
}
.why-card:hover { transform: translateY(-4px); border-color: var(--gold-line); }
.why-card__icon { width: 54px; height: 54px; border-radius: 13px; background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex: 0 0 auto; }
.why-card__icon svg { width: 28px; height: 28px; }
.why-card h3 { font-size: 18px; color: #fff; }
.why-card p { color: var(--muted-on-dark); font-size: 14.5px; margin-top: 10px; }

/* ---------- Vehicles ---------- */
.vehicles-strip { display: flex; flex-wrap: wrap; gap: 16px; }
.vehicle-chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 14px 22px; font-family: var(--font-display); font-weight: 600; color: var(--text); opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.2s, border-color 0.2s; }
.vehicle-chip.visible { opacity: 1; transform: translateY(0); }
.vehicle-chip:hover { color: var(--gold); border-color: var(--gold); }
.vehicle-chip svg { width: 22px; height: 22px; color: var(--gold); }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); margin-bottom: 14px; overflow: hidden; }
.faq-item__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; background: none; border: 0; color: #fff; cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; }
.faq-item__q .plus { color: var(--gold); font-size: 22px; transition: transform 0.25s var(--ease); flex: 0 0 auto; }
.faq-item.open .faq-item__q .plus { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.faq-item__a-inner { padding: 0 24px 22px; color: var(--muted-on-dark); }

/* ---------- Testimonials ---------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testimonial-card { background: #fff; border: 1px solid #ece8e0; border-radius: var(--radius-lg); padding: 28px; }
.testimonial-card__stars { color: var(--gold); letter-spacing: 2px; }
.testimonial-card__stars svg { width: 18px; height: 18px; }
.testimonial-card p { margin-top: 14px; color: var(--text); }
.testimonial-card__who { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.testimonial-card__who .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.testimonial-card__who .nm { font-weight: 700; }
.testimonial-card__who .veh { font-size: 12.5px; color: var(--muted); }

/* Empty state */
.empty-state { text-align: center; padding: 60px 24px; background: var(--cream); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.empty-state .svg-art { width: 64px; height: 64px; margin: 0 auto 16px; color: var(--gold); }
.empty-state h3 { font-size: 20px; }
.empty-state p { color: var(--muted); margin-top: 8px; }
.empty-state .btn { margin-top: 20px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.field .req { color: var(--gold); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field input[type="number"], .field input[type="date"], .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 11px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-family: inherit; font-size: 15px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.form-card { background: #fff; border: 1px solid #ece8e0; border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); }
.form-card--dark { background: var(--coal); border-color: var(--line); }

/* ---------- Alert / messages ---------- */
.alert { padding: 16px 18px; border-radius: 11px; font-weight: 500; margin-bottom: 20px; border: 1px solid; }
.alert--error { background: #fdeceb; color: #8e2418; border-color: #f5c6c1; }
.alert--success { background: #e8f7ef; color: #137a44; border-color: #b9e6cf; }
.alert--info { background: #eef2ff; color: #2f3f9f; border-color: #d6ddff; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--gold); color: #161600; padding: 44px 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 40px); }
.cta-band p { margin-top: 10px; font-weight: 500; }
.cta-band .btn.cb { background: #161600; color: #fff; }
.cta-band .btn.cb:hover { background: #000; transform: translateY(-2px); }
.cta-band .btn.cb-outline { border: 2px solid #161600; color: #161600; background: transparent; }
.cta-band .btn.cb-outline:hover { background: #161600; color: #fff; }
.cta-band--compact { padding: 24px 0; }
.cta-band--compact h2 { font-size: clamp(22px, 2.8vw, 30px); }
.cta-band--compact p { margin-top: 8px; }
.cta-band--center { padding: 24px 0; }
.cta-band--center .cta-band__inner { flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.cta-band--center h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 0; }
.cta-band--center p { margin-top: 2px; max-width: 54ch; }

/* Slim variant: compact paddings, smaller heading/body text and small buttons.
   Used for the "Can't find the part?" band on the shop page so it no longer
   dominates the page. */
.cta-band--slim { padding: 20px 0; }
.cta-band--slim .cta-band__inner { gap: 10px; }
.cta-band--slim h2 { font-size: clamp(18px, 2.2vw, 24px); }
.cta-band--slim p { margin-top: 4px; font-size: 13px; }
.cta-band--slim .btn { padding: 8px 16px; font-size: 13px; border-radius: 10px; gap: 8px; }
.cta-band--slim .btn.cb-outline { border-width: 1.5px; }

/* ---------- Page hero (inner) ---------- */
.page-hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero .grid-lines { position: absolute; inset: 0; opacity: 0.4; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 60px 60px; }
.page-hero__inner { position: relative; z-index: 1; padding: 40px 0; }
.page-hero h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; margin-top: 14px; }
.page-hero__crumb { color: var(--muted-on-dark); font-size: 14px; }
.page-hero__crumb a:hover { color: var(--gold-2); }
.page-hero__lead { max-width: 720px; margin-top: 18px; color: var(--muted-on-dark); font-size: 17px; }
.page-hero--center .page-hero__inner { text-align: center; }
.page-hero--center .crumb { justify-content: center; }
.page-hero--center .page-hero__lead { margin-left: auto; margin-right: auto; }

/* ---------- Shop Hero ---------- */
.shop-hero {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.shop-hero .grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}
.shop-hero__inner {
  position: relative;
  z-index: 1;
  padding: 48px 0 44px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.shop-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.shop-hero__text {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.shop-hero__text .eyebrow {
  margin-bottom: 10px;
  justify-content: center;
}
.shop-hero__text .eyebrow::before {
  width: 34px;
}
.shop-hero__text h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-top: 14px;
}
.shop-hero__lead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 15px;
  color: var(--muted-on-dark);
  justify-content: center;
}
.shop-hero__lead svg {
  color: var(--green);
  flex-shrink: 0;
}
.shop-hero__cta {
  margin-top: 20px;
  justify-content: center;
}
.shop-hero__visual {
  display: none;
}
@media (max-width: 1024px) {
  .shop-hero__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .shop-hero__text {
    max-width: 100%;
  }
  .shop-hero__text .eyebrow {
    justify-content: center;
  }
  .shop-hero__lead {
    justify-content: center;
  }
  .shop-hero__cta {
    justify-content: center;
  }
  .shop-hero__visual {
    display: none;
  }
}
@media (max-width: 768px) {
  .shop-hero__inner {
    padding: 34px 0 30px;
    min-height: auto;
  }
}

/* ---------- Cart Hero ---------- */
.cart-hero {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.cart-hero .grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cart-hero__inner {
  position: relative;
  z-index: 1;
  padding: 28px 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cart-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.cart-hero__text {
  max-width: 100%;
  text-align: center;
}
.cart-hero__text .eyebrow {
  margin-bottom: 14px;
  justify-content: center;
}
.cart-hero__text .eyebrow::before {
  width: 34px;
}
.cart-hero__text h1 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 8px;
}
.cart-hero__lead {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted-on-dark);
  justify-content: center;
}
.cart-hero__lead svg {
  color: var(--green);
  flex-shrink: 0;
}
.cart-hero__visual {
  display: none;
}
@media (max-width: 1024px) {
  .cart-hero__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cart-hero__text {
    max-width: 100%;
  }
  .cart-hero__text .eyebrow {
    justify-content: center;
  }
  .cart-hero__lead {
    justify-content: center;
  }
  .cart-hero__visual {
    display: none;
  }
}
@media (max-width: 768px) {
  .cart-hero__inner {
    padding: 24px 0;
    min-height: auto;
  }
}

/* ---------- Shared hero image backdrop ----------
   One faded, monochrome Ford Ranger photograph sits behind the public
   content/marketing heroes: inner pages (.page-hero), the shop/home band
   (.shop-hero) and the contact workshop band (.workshop-hero). The Ford
   Ranger is South Africa's best-selling Ford (built in Silverton) and the
   photo is a Ranger in KZN. It is an absolutely positioned,
   pointer-events-none pseudo-element, so it never affects hero height,
   layout or document flow. A radial mask fades the image at the edges and
   the low opacity keeps it subtle, so the heading, text, buttons and
   breadcrumbs all stay fully readable above it; hero content paints on top
   because each hero's inner wrapper is positioned with its own z-index.

   Deliberately excluded: the cart (.cart-hero), checkout and the auth/account
   heroes. Checkout opts out of this shared backdrop by passing plain=True to
   the page_hero include, which adds .page-hero--plain. */
.page-hero:not(.page-hero--plain)::before,
.shop-hero::before,
.workshop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/hero/hero-car.e944ecb12722.webp");
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: cover;
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(140% 165% at 50% 50%, #000 8%, transparent 76%);
  mask-image: radial-gradient(140% 165% at 50% 50%, #000 8%, transparent 76%);
}

/* The shop band is the catalogue's entry point, so it carries a slightly
   stronger version of the shared backdrop (above the 0.18 default). */
.shop-hero::before { opacity: 0.22; }

/* ==========================================================================
   COMPACT CART LAYOUT
   ========================================================================== */

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 1024px) {
  .cart-grid {
    grid-template-columns: 1fr;
  }
}

.cart-items {
  display: grid;
  gap: 12px;
}

.cart-line {
  display: grid;
  grid-template-columns: 88px 1fr auto auto 56px;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--paper);
  border: 1px solid #ece8e0;
  border-radius: var(--radius-lg);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.cart-line:hover {
  border-color: var(--gold-line);
  box-shadow: var(--shadow-sm);
}

.cart-line__media {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.cart-product-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 8px;
}

.cart-line__body {
  min-width: 0;
}

.cart-line__body h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.2;
}
.cart-line__body h3 a:hover {
  color: var(--gold);
}

.cart-line__brand {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}

.cart-line__sku {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-display);
}

.cart-line__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cart-line__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
.cart-line__price.was {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 13px;
  font-weight: 500;
}
.cart-line__price.now {
  color: var(--accent);
}

.cart-line__subtotal {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.cart-line__subtotal-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

.cart-line__qty {
  display: flex;
  align-items: center;
}

.qty-form {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.qty-form button {
  width: 36px;
  height: 36px;
  background: var(--paper);
  border: 0;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.qty-form button:hover {
  background: var(--cream);
}
.qty-form input {
  width: 44px;
  height: 36px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  background: var(--paper);
  color: var(--text);
  -moz-appearance: textfield;
}
.qty-form input::-webkit-outer-spin-button,
.qty-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-line__total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.cart-line__remove .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.cart-line__remove .icon-btn:hover {
  background: #fee;
  border-color: var(--red);
  color: var(--red);
}

.cart-summary-panel {
  position: sticky;
  top: 96px;
}

.cart-summary {
  background: var(--paper);
  border: 1px solid #ece8e0;
  border-radius: var(--radius-lg);
  padding: 24px;
}

.cart-summary h2 {
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.cart-summary__row:last-child {
  border-bottom: 0;
}
.cart-summary__row--total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  border-bottom: 0;
  padding-top: 16px;
  margin-top: 4px;
}
.cart-summary__row--discount .text-green {
  color: var(--green);
  font-weight: 600;
}

.cart-summary__saved {
  margin-top: 12px;
  font-size: 13px;
  color: var(--green);
  text-align: right;
}
.cart-summary__saved strong {
  color: var(--green);
}

.cart-summary-mobile {
  display: none;
  background: var(--paper);
  border: 1px solid #ece8e0;
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .cart-summary-panel {
    position: static;
    order: -1;
  }
}

@media (max-width: 640px) {
  .cart-line {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 8px 12px;
    padding: 12px;
  }
  .cart-line__media {
    grid-row: 1 / 5;
    width: 72px;
    height: 72px;
  }
  .cart-line__body {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .cart-line__body h3 {
    font-size: 14px;
  }
  .cart-line__price-row {
    grid-column: 2;
    grid-row: 3;
  }
  .cart-line__qty {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
  }
  .cart-line__total {
    grid-column: 1;
    grid-row: 5;
    text-align: left;
    font-size: 15px;
  }
  .cart-line__remove {
    grid-column: 2;
    grid-row: 5;
    justify-self: end;
  }
  .cart-product-image {
    padding: 6px;
  }
}

/* Mobile cart summary */
@media (max-width: 1024px) {
  .cart-summary-mobile {
    display: block;
  }
}

/* ==========================================================================
   PRODUCT DETAIL IMAGE GALLERY
   ========================================================================== */

.pd__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
}

.pd__main-image {
  aspect-ratio: 4/3;
  background: var(--cream);
  border: 1px solid #ece8e0;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}

.pd__main-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 24px;
  transition: transform 0.3s var(--ease);
}

.pd__main-image:hover img {
  transform: scale(1.02);
}

.pd__thumbnails {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.pd__thumb {
  flex: 0 0 88px;
  height: 88px;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.16s, transform 0.16s;
}
.pd__thumb:hover,
.pd__thumb.active {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.pd__thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 8px;
}

.pd__zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(11,11,12,0.8);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s;
}
.pd__main-image:hover .pd__zoom-hint {
  opacity: 1;
}

/* Lightbox */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11,11,12,0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.image-lightbox.open {
  opacity: 1;
  visibility: visible;
}
.image-lightbox__inner {
  position: relative;
  max-width: 95vw;
  max-height: 90vh;
}
.image-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}
.image-lightbox__close,
.image-lightbox__prev,
.image-lightbox__next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.image-lightbox__close:hover,
.image-lightbox__prev:hover,
.image-lightbox__next:hover {
  background: rgba(240,160,0,0.3);
  border-color: var(--gold);
}
.image-lightbox__close {
  top: -64px;
  right: 0;
}
.image-lightbox__prev {
  left: -64px;
  top: 50%;
  transform: translateY(-50%);
}
.image-lightbox__next {
  right: -64px;
  top: 50%;
  transform: translateY(-50%);
}
.image-lightbox__counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted-on-dark);
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .image-lightbox__prev {
    left: 8px;
  }
  .image-lightbox__next {
    right: 8px;
  }
  .image-lightbox__close {
    top: -56px;
    right: 8px;
  }
}

/* Product detail grid adjustment */
.pd__gallery-wrapper {
  position: sticky;
  top: 96px;
}

@media (max-width: 1024px) {
  .pd {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pd__gallery-wrapper {
    position: static;
  }
}

/* ==========================================================================
   Breadcrumb ---------- */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; margin-bottom: 14px; }
.crumb a:hover { color: var(--gold); }
.crumb .sep { opacity: 0.5; }

/* ---------- Filters bar ---------- */
.filters-bar { background: var(--paper); border: 1px solid #ece8e0; border-radius: var(--radius); padding: 18px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filters-bar select, .filters-bar input[type="text"] { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; }
.filters-bar input[type="text"] { min-width: 220px; }

/* ---------- Product detail ---------- */
.pd { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.pd__media { position: sticky; top: 96px; }
.pd__main-media { aspect-ratio: 4/3; background: var(--cream); border: 1px solid #ece8e0; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; }
.pd__main-media .svg-art { width: 150px; height: 150px; color: var(--gold); }
.pd__meta-row { margin-top: 28px; }
.pd__title { font-size: clamp(26px, 3vw, 36px); }
.pd__desc { color: var(--muted); margin-top: 14px; }
.pd__specs { margin-top: 22px; border: 1px solid #ece8e0; border-radius: var(--radius); overflow: hidden; }
.pd__specs .spec-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 18px; border-bottom: 1px solid #f1ede6; font-size: 14.5px; }
.pd__specs .spec-row:last-child { border-bottom: 0; }
.pd__specs .spec-row .k { color: var(--muted); }
.pd__specs .spec-row .v { font-weight: 600; text-align: right; }
.pd__pricing { margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pd__price { font-family: var(--font-display); font-weight: 700; font-size: 30px; }
.pd__price .enq { font-size: 18px; color: var(--gold); }
/* Delivery charge, shown directly under the price. Compact single line so it
   never pushes the Add to Cart button down or overflows on 320px screens. */
.pd__delivery { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--accent); }
.pd__delivery svg { flex: 0 0 auto; }
.pd__delivery-note { font-weight: 500; color: var(--muted); }
@media (max-width: 380px) { .pd__delivery { font-size: 13.5px; } }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qty button { width: 42px; height: 48px; background: #fff; border: 0; font-size: 20px; cursor: pointer; color: var(--text); }
.qty button:hover { background: var(--cream); }
.qty input { width: 54px; height: 48px; border: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.qty input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd__ctas { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.pd__avail { margin-top: 14px; font-weight: 600; }
.pd__avail.in { color: var(--green); }
.pd__avail.on { color: #b9791a; }
.pd__avail.out { color: var(--red); }

/* ---------- PayFast ---------- */
.pay-card { max-width: 640px; margin: 0 auto; }
.pay-summary { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--coal); overflow: hidden; }
.pay-summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.pay-summary__row:last-child { border-bottom: 0; }
.pay-summary__row .k { color: var(--muted-on-dark); }
.pay-summary__row > span:not(.k):not(.v) { color: #f0ede6; }
.pay-summary__row.total .v { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--gold); }
.pay-note { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--muted); border-radius: var(--radius); padding: 16px 18px; font-size: 14px; margin-top: 24px; }
.pay-note svg { width: 20px; height: 20px; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.payfast-pay { margin-top: 28px; width: 100%; }

/* ---------- PayFast / payment method branding ---------- */
.pay-brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.pay-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #161700;
  background: var(--gold);
  padding: 12px 26px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1;
}
.pay-brand--main {
  padding: 14px 34px;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(240, 160, 0, 0.35);
}
.pay-brand--xs { padding: 6px 12px; font-size: 11px; letter-spacing: 0.14em; border-radius: 6px; }
.pay-brand__divider { width: 100%; height: 1px; background: var(--line); }
.pay-brand__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pay-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-on-dark);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pay-badge--sm { padding: 5px 10px; font-size: 11px; }
a.pay-badge { text-decoration: none; }
a.pay-badge:hover { border-color: var(--gold); color: var(--gold); }
.pay-badge--sel { background: var(--gold); border-color: var(--gold); color: var(--coal); }

/* Checkout payment panel */
.pf-panel__head { margin-bottom: 16px; }
.pf-panel__brands { margin-top: 0; }
.pf-panel__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  color: #16171b;
  font-size: 13.5px;
}
.pf-panel__note svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; margin-top: 1px; }

/* Cart payment strip */
.cart-pay-strip {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.cart-pay-strip > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* Payment details "coming soon" state */
.pay-coming {
  text-align: center;
  padding: 30px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pay-coming__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-soft);
  color: var(--gold);
}
.pay-coming__icon svg { width: 26px; height: 26px; }
.pay-coming h3 { font-size: 20px; }
.pay-coming p { color: var(--muted); margin-top: 10px; }
.pay-coming .actions { margin-top: 20px; }

/* Result confirmation card */
.result-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: grid;
  gap: 8px;
}
.result-row { display: flex; justify-content: space-between; gap: 16px; }
.result-row span { color: var(--muted); }
.result-row strong { color: var(--text); text-align: right; }
.result-subhead { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.result-line { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted); }
.result-line strong, .result-row strong { color: var(--text); }
.result-next ul { list-style: disc; }

@media (max-width: 640px) {
  .pay-brand--main { font-size: 16px; padding: 12px 26px; }
}


/* ---------- Result states ---------- */
.result-state { text-align: center; max-width: 620px; margin: 0 auto; padding: 60px 20px; }
.result-state .big-icon { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; }
.result-state .big-icon svg { width: 44px; height: 44px; }
.result-state .big-icon.ok { background: #e6f7ee; color: #137a44; }
.result-state .big-icon.err { background: #fdeceb; color: #8e2418; }
.result-state .big-icon.pend { background: #fff3e0; color: #b9791a; }
.result-state h1 { font-size: 32px; }
.result-state p { color: var(--muted); margin-top: 14px; }
.result-state .actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.contact-card { background: var(--paper); border: 1px solid #ece8e0; border-radius: var(--radius-lg); padding: 28px; display: flex; gap: 18px; transition: transform 0.2s, border-color 0.2s; }
.contact-card:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.contact-card__icon { width: 52px; height: 52px; border-radius: 13px; background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card h3 { font-size: 17px; }
.contact-card p, .contact-card a.p { color: var(--muted); margin-top: 6px; display: block; }
.contact-card a.p:hover { color: var(--gold); }
.contact-stack { display: grid; gap: 18px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--muted-on-dark); border-top: 1px solid var(--line); }
.footer__top { padding: 64px 0 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 18px; }
.footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--paper);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.footer__logo img.logo-mark { height: 40px; width: auto; margin-bottom: 0; }
.footer__about p { font-size: 14px; color: var(--muted-on-dark); margin-top: 14px; max-width: 34ch; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer ul a { font-size: 14px; color: var(--muted-on-dark); transition: color 0.15s, padding-left 0.15s; }
.footer ul a:hover { color: var(--gold-2); padding-left: 4px; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted-on-dark); }
.footer__contact .ic { color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.footer__contact .ic svg { width: 17px; height: 17px; }
.footer__contact a { color: var(--muted-on-dark); }
.footer__contact a:hover { color: var(--gold-2); }
.footer__bottom { border-top: 1px solid var(--line); padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted-on-dark); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { color: var(--muted-on-dark); }
.footer__legal a:hover { color: var(--gold-2); }

/* ---------- Floating WhatsApp ----------
   The header's WhatsApp CTA was removed in favour of this single button. On
   desktop it floats in the top-right corner next to the header's "Get a Quote"
   button (extra right padding on .nav__inner clears the space); on <=1024px,
   where the header CTAs are hidden, it drops to the bottom-left above the
   mobile bar so it never covers the account/cart controls. */
/* site.min.css is loaded after main.css and re-declares `.container{padding:0
   24px}` on this same element, cancelling the reserve. A two-class selector
   keeps the gap in front of the floating button regardless of load order. */
.nav .nav__inner { padding-right: 68px; }
.wa-float { position: fixed; top: 15px; right: 22px; z-index: 100; width: 46px; height: 46px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,0.45); transition: transform 0.2s var(--ease); }
.wa-float:hover { transform: translateY(-3px) scale(1.06); }
.wa-float svg { width: 24px; height: 24px; }

/* ---------- Scroll to top ---------- */
.to-top { position: fixed; right: 22px; bottom: 24px; z-index: 55; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--coal); color: var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.28); transition: transform 0.2s var(--ease), background 0.2s, color 0.2s; }
.to-top:hover { transform: translateY(-4px); background: var(--gold); color: var(--coal); }
.to-top svg { width: 24px; height: 24px; }

/* ---------- Mobile bottom bar (primary mobile navigation) ---------- */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--paper); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.mobile-bar__inner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; padding: 6px 4px; gap: 2px; }
.mb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 50px; padding: 6px 2px; border-radius: 10px; color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 11px; line-height: 1.1; text-align: center; }
.mb-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
.mb-item > span:not(.mb-item__icon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-item__icon { position: relative; display: inline-flex; }
.mb-item__icon .cart-badge { top: -4px; right: -7px; }
.mb-item.is-active { color: var(--gold); }
.mb-item:active { background: var(--cream); }
@media (hover: hover) {
  .mb-item:hover { color: var(--gold); }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-stagger].visible > * { opacity: 1; transform: none; }
[data-stagger].visible > *:nth-child(1) { transition-delay: 0.03s; }
[data-stagger].visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].visible > *:nth-child(3) { transition-delay: 0.17s; }
[data-stagger].visible > *:nth-child(4) { transition-delay: 0.24s; }
[data-stagger].visible > *:nth-child(5) { transition-delay: 0.31s; }
[data-stagger].visible > *:nth-child(6) { transition-delay: 0.38s; }

/* ---------- Page section heading on dark ---------- */
.split--dark h3.split-title { color: #fff; font-size: clamp(28px, 4vw, 42px); }
.split--dark .section-head p.lead { color: var(--muted-on-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why-grid, .why-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  /* Tablet/mobile header: no hamburger. The bottom bar is the primary mobile
     nav, so the header shrinks to logo + account and drops the cart plus the
     links/CTAs that the bottom bar (or the WhatsApp float) already covers. */
  .nav__menu { display: none; }
  .nav__cart { display: none; }
  .nav__cta--outline { display: none; }
  .nav__inner { gap: 12px; height: 62px; }
  .nav__actions { gap: 4px; }
  .account-link__ico { display: block; }
  .account-link__label, .account-signup { display: none; }
  .account-menu__label { display: none; }
  .account-menu__dropdown { min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
  .split, .pd, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid { grid-template-columns: 1fr; }
  .pd__media { position: static; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  /* The bottom bar is the primary nav from the point the desktop menu stops
     fitting: with the hamburger gone, leaving it at 768px used to leave
     769-1024px widths with no navigation at all. Its height (plus the iOS
     home-indicator inset) is reserved so nothing hides underneath it. */
  .mobile-bar { display: block; }
  body { padding-bottom: calc(var(--mbh) + env(safe-area-inset-bottom, 0px)); }
  /* Header CTAs are hidden here, so the WhatsApp float drops to the
     bottom-left (clear of the account/cart controls) and the header gives up
     the space reserved for it on desktop. */
  .nav .nav__inner { padding-right: 0; }
  .wa-float { top: auto; right: auto; left: 16px; bottom: calc(var(--mbh) + 16px + env(safe-area-inset-bottom, 0px)); }
  .to-top { bottom: calc(var(--mbh) + 16px + env(safe-area-inset-bottom, 0px)); }

  /* Compact logo for the shorter header. */
  .brand img.logo-mark { height: 32px; }
}
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .why-grid, .why-grid--3 { grid-template-columns: 1fr; }
  .shop-cats { grid-template-columns: 1fr; }
  .trustbar__inner { grid-template-columns: repeat(2, 1fr); }
  .trustbar__item { border-bottom: 1px solid var(--line); }
  .form-row, .form-grid-3 { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .hero__inner { min-height: 0; padding: 48px 0; }
  /* Mobile footer: two tidy columns. The brand/about block and the contact
     list span the full width (they hold long, wrapping text), while the two
     link groups sit side by side so the footer stops reading as one long
     vertical stack. Falls back gracefully on very narrow screens. */
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .footer__about { grid-column: 1 / -1; }
  .footer__col { min-width: 0; }
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__contact a, .footer__contact span { overflow-wrap: anywhere; }
  .footer__legal { gap: 14px; flex-wrap: wrap; }

  /* Filters bar: let the controls use the full width instead of overflowing. */
  .filters-bar { padding: 14px; gap: 10px; }
  .filters-bar select, .filters-bar input[type="text"] { width: 100%; min-width: 0; }

  /* Smaller WhatsApp float on phones; position is inherited from the 1024
     block so it stays clear of the bottom bar. */
  .wa-float { bottom: calc(var(--mbh) + 16px + env(safe-area-inset-bottom, 0px)); left: 16px; width: 50px; height: 50px; }
  .wa-float svg { width: 26px; height: 26px; }
  .to-top { bottom: calc(var(--mbh) + 16px + env(safe-area-inset-bottom, 0px)); right: 16px; }
}
@media (max-width: 520px) {
  .trustbar__inner { grid-template-columns: 1fr 1fr; }
  .brand-text .sub { display: none; }
  .form-card { padding: 22px; }
  .auth-card { padding: 24px; }
  .nav__inner { height: 58px; }
  .nav__cta { padding: 9px 12px; font-size: 13px; }
  .nav__cart, .account-link { padding: 8px; }

  /* Keep the footer columns comfortable but slightly tighter on small phones. */
  .footer__top { gap: 24px 16px; }
  .footer h4 { margin-bottom: 14px; }

  /* Two-column product grid on phones, kept all the way down to 320px. */
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-card__badges { gap: 4px; margin-bottom: 6px; }
  .product-card__badges .badge { font-size: 9px; padding: 3px 6px; letter-spacing: 0.02em; }
  .product-card__body { padding: 10px; gap: 0; }
  .product-card__cat { font-size: 10px; letter-spacing: 0.05em; }
  .product-card h3 { font-size: 13px; margin-top: 4px; }
  .product-card__sku { font-size: 11px; margin-top: 2px; }
  /* Clamp the blurb to two lines: the full description stays on the product
     page, this just stops it making every mobile card four rows taller. */
  .product-card__desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-size: 11.5px; line-height: 1.35; margin-top: 4px;
  }
  /* Stack price above a full-width button: side-by-side they cannot fit a
      320px screen and were the reason cards overflowed their column.
      .product-card__foot is added to out-rank the equal-specificity base rule
      further down the file, which would otherwise win by source order. */
  .product-card__foot { padding-top: 8px; }
  .product-card__foot .product-card__price-row { flex-wrap: wrap; gap: 6px; }
  .product-card__foot .product-card__price { font-size: 13.5px; }
  .product-card__foot .product-card__price .was { font-size: 11px; margin-left: 4px; }
  .product-card__foot .product-card__price-row .card-add { flex: 1 0 100%; }
  .product-card__foot .product-card__price-row .card-add .btn {
    width: 100%; min-height: 40px; padding: 9px 6px; font-size: 11.5px; gap: 5px;
    white-space: normal; border-radius: 8px;
  }
  .product-card__price-row .card-add .btn .ico { width: 14px; height: 14px; }
}
@media (max-width: 380px) {
  .trustbar__inner { grid-template-columns: 1fr; }
  .products-grid { gap: 8px; }
  .product-card__body { padding: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, [data-stagger] > *, .vehicle-chip { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   BANK CARD ANIMATION
   ========================================================================== */

.bank-cards-animation {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 340px;
  margin: 0 auto;
}

.bank-cards__scene {
  perspective: 1200px;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.bank-cards__stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cardStackFloat 8s ease-in-out infinite;
}

@keyframes cardStackFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateY(-8px) rotateX(2deg) rotateY(-3deg);
  }
  50% {
    transform: translateY(4px) rotateX(-1deg) rotateY(2deg);
  }
  75% {
    transform: translateY(-4px) rotateX(1deg) rotateY(-1deg);
  }
}

.bank-card {
  position: absolute;
  width: 280px;
  height: 176px;
  border-radius: 14px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, box-shadow;
}

.bank-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 14px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.08);
}

.bank-card__front,
.bank-card__back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--card-bg-start), var(--card-bg-end));
  color: #fff;
  font-family: var(--font-body);
}

.bank-card__back {
  transform: rotateY(180deg);
}

/* Card positions - initial stack */
.bank-card--1 { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); z-index: 5; opacity: 1; }
.bank-card--2 { transform: translate3d(-12px, 10px, -30px) rotateX(2deg) rotateY(4deg); z-index: 4; opacity: 0.9; }
.bank-card--3 { transform: translate3d(8px, 18px, -60px) rotateX(-1deg) rotateY(-3deg); z-index: 3; opacity: 0.8; }
.bank-card--4 { transform: translate3d(-16px, 26px, -90px) rotateX(1deg) rotateY(2deg); z-index: 2; opacity: 0.7; }
.bank-card--5 { transform: translate3d(12px, 34px, -120px) rotateX(-2deg) rotateY(-4deg); z-index: 1; opacity: 0.6; }

/* Animation sequence - cards fan out and rotate */
@keyframes cardFanOut1 {
  0% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); opacity: 1; z-index: 5; }
  20% { transform: translate3d(-40px, -20px, 40px) rotateX(-5deg) rotateY(-15deg); opacity: 1; z-index: 10; }
  40% { transform: translate3d(-20px, -10px, 20px) rotateX(-2deg) rotateY(-8deg); opacity: 1; z-index: 5; }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); opacity: 1; z-index: 5; }
}

@keyframes cardFanOut2 {
  0% { transform: translate3d(-12px, 10px, -30px) rotateX(2deg) rotateY(4deg); opacity: 0.9; z-index: 4; }
  20% { transform: translate3d(-60px, -10px, 20px) rotateX(-3deg) rotateY(-12deg); opacity: 1; z-index: 9; }
  40% { transform: translate3d(-25px, 5px, 10px) rotateX(-1deg) rotateY(-5deg); opacity: 0.95; z-index: 4; }
  100% { transform: translate3d(-12px, 10px, -30px) rotateX(2deg) rotateY(4deg); opacity: 0.9; z-index: 4; }
}

@keyframes cardFanOut3 {
  0% { transform: translate3d(8px, 18px, -60px) rotateX(-1deg) rotateY(-3deg); opacity: 0.8; z-index: 3; }
  20% { transform: translate3d(20px, 0px, 0px) rotateX(0deg) rotateY(-10deg); opacity: 0.95; z-index: 8; }
  40% { transform: translate3d(12px, 12px, -20px) rotateX(-1deg) rotateY(-4deg); opacity: 0.9; z-index: 3; }
  100% { transform: translate3d(8px, 18px, -60px) rotateX(-1deg) rotateY(-3deg); opacity: 0.8; z-index: 3; }
}

@keyframes cardFanOut4 {
  0% { transform: translate3d(-16px, 26px, -90px) rotateX(1deg) rotateY(2deg); opacity: 0.7; z-index: 2; }
  20% { transform: translate3d(-30px, 8px, -10px) rotateX(0deg) rotateY(-6deg); opacity: 0.9; z-index: 7; }
  40% { transform: translate3d(-20px, 18px, -40px) rotateX(0deg) rotateY(-2deg); opacity: 0.85; z-index: 2; }
  100% { transform: translate3d(-16px, 26px, -90px) rotateX(1deg) rotateY(2deg); opacity: 0.7; z-index: 2; }
}

@keyframes cardFanOut5 {
  0% { transform: translate3d(12px, 34px, -120px) rotateX(-2deg) rotateY(-4deg); opacity: 0.6; z-index: 1; }
  20% { transform: translate3d(35px, 15px, 10px) rotateX(-1deg) rotateY(-8deg); opacity: 0.85; z-index: 6; }
  40% { transform: translate3d(20px, 25px, -30px) rotateX(-1deg) rotateY(-3deg); opacity: 0.8; z-index: 1; }
  100% { transform: translate3d(12px, 34px, -120px) rotateX(-2deg) rotateY(-4deg); opacity: 0.6; z-index: 1; }
}

/* Apply animations with delays */
.bank-card--1 { animation: cardFanOut1 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.bank-card--2 { animation: cardFanOut2 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: 0.3s; }
.bank-card--3 { animation: cardFanOut3 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: 0.6s; }
.bank-card--4 { animation: cardFanOut4 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: 0.9s; }
.bank-card--5 { animation: cardFanOut5 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: 1.2s; }

/* Card content styling */
.bank-card__chip {
  width: 48px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e8c547, #f5d76e, #e8c547);
  background-size: 200% 200%;
  animation: chipShine 3s ease-in-out infinite;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.2);
}

@keyframes chipShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.bank-card__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 16px;
}

.bank-card__number {
  display: flex;
  gap: 8px;
  font-family: 'SF Mono', 'Monospace', monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.bank-card__number span {
  background: rgba(0,0,0,0.15);
  padding: 4px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.bank-card__details {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
}

.bank-card__holder,
.bank-card__expiry {
  flex: 1;
}

.bank-card__label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.bank-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}

.bank-card__network {
  align-self: flex-end;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  opacity: 0.95;
  text-transform: uppercase;
}

.bank-card__magstripe {
  height: 40px;
  background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
  border-radius: 4px;
  margin: 16px 0;
}

.bank-card__signature {
  height: 36px;
  background: repeating-linear-gradient(
    90deg,
    #f5f5f5,
    #f5f5f5 2px,
    #e8e8e8 2px,
    #e8e8e8 4px
  );
  border-radius: 4px;
  margin-bottom: 12px;
}

.bank-card__cvv {
  background: #fff;
  color: #333;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Card color themes */
.bank-card--capitec .bank-card__front,
.bank-card--capitec .bank-card__back {
  --card-bg-start: #003b7a;
  --card-bg-end: #0056b3;
}

.bank-card--fnb .bank-card__front,
.bank-card--fnb .bank-card__back {
  --card-bg-start: #001e3c;
  --card-bg-end: #003366;
}

.bank-card--standard .bank-card__front,
.bank-card--standard .bank-card__back {
  --card-bg-start: #004488;
  --card-bg-end: #0066cc;
}

.bank-card--absa .bank-card__front,
.bank-card--absa .bank-card__back {
  --card-bg-start: #b8001f;
  --card-bg-end: #d9232d;
}

.bank-card--nedbank .bank-card__front,
.bank-card--nedbank .bank-card__back {
  --card-bg-start: #006d32;
  --card-bg-end: #009944;
}

/* PayFast message */
.bank-cards__payfast {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bank-cards__payfast svg {
  color: var(--green);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .bank-cards-animation {
    max-width: 440px;
    height: 280px;
  }
  .bank-card { width: 240px; height: 150px; }
  .bank-card--1 { transform: translate3d(0, 0, 0); }
  .bank-card--2 { transform: translate3d(-10px, 8px, -25px); }
  .bank-card--3 { transform: translate3d(6px, 14px, -50px); }
  .bank-card--4 { transform: translate3d(-12px, 20px, -75px); }
  .bank-card--5 { transform: translate3d(10px, 28px, -100px); }
}

@media (max-width: 768px) {
  .bank-cards-animation {
    max-width: 100%;
    height: 220px;
    margin-top: 24px;
  }
  .bank-card { width: 200px; height: 125px; }
  .bank-cards__scene { perspective: 800px; }
  .bank-card__number { font-size: 14px; gap: 4px; }
  .bank-card__number span { padding: 3px 6px; }
  .bank-card__brand { font-size: 11px; }
  .bank-card__value { font-size: 11px; }
  .bank-card__network { font-size: 12px; }
}

/* Cart hero - smaller version */
.bank-cards-animation--cart {
  max-width: 400px;
  height: 260px;
}

@media (max-width: 768px) {
  .bank-cards-animation--cart {
    max-width: 100%;
    height: 200px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bank-cards__stack,
  .bank-card {
    animation: none !important;
    transition: none !important;
  }
  .bank-card--1 { transform: translate3d(0, 0, 0); opacity: 1; z-index: 5; }
  .bank-card--2 { transform: translate3d(-12px, 10px, -30px); opacity: 0.9; z-index: 4; }
  .bank-card--3 { transform: translate3d(8px, 18px, -60px); opacity: 0.8; z-index: 3; }
  .bank-card--4 { transform: translate3d(-16px, 26px, -90px); opacity: 0.7; z-index: 2; }
  .bank-card--5 { transform: translate3d(12px, 34px, -120px); opacity: 0.6; z-index: 1; }
  .bank-card__chip { animation: none; }
}

/* ---------- Product card price row ---------- */
.product-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.product-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.product-card__price .now {
  color: var(--text);
}
.product-card__price .was {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 13px;
  margin-left: 6px;
}
.product-card__price .now.sale {
  color: var(--accent);
}
.btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--icon .ico {
  width: 18px;
  height: 18px;
}
.badge--sale {
  background: var(--gold);
  color: #161600;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
}


/* Ensure form in price row is a flex item */
.product-card__price-row .card-add {
  flex: 0 0 auto;
  margin: 0;
  min-width: 0;
}
.product-card__price {
  min-width: 0;
}

/* Narrow cards keep the price and the button on one line on desktop-sized
   columns, but the mobile breakpoint above deliberately stacks them. Forcing
   nowrap here used to win by source order and pushed the Add to cart form
   past the card edge on 320px screens. */
@media (max-width: 480px) {
  .product-card__price .was {
    font-size: 12px;
  }
}


.filter-results-count {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Account authentication + member-only sale experience
   (brand: black / charcoal + gold accent on off-white)
--------------------------------------------------------------------------- */
:root {
  --accent: #f0a000;
}

.auth-hero { width: 100%; min-height: 78vh; background: var(--cream); display: flex; }
.auth-hero__inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 48px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch;
}
.auth-brand-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
}
.auth-brand-panel::after {
  content: ""; position: absolute; right: -80px; bottom: -80px; width: 240px; height: 240px;
  border-radius: 50%; background: var(--gold-soft);
}
.auth-brand-panel__logo img { max-height: 60px; width: auto; height: auto; margin-bottom: 36px; }
.auth-brand-panel__logo .brand-fallback { font-size: 20px; margin-bottom: 36px; }
.auth-brand-panel__copy h1 { font-family: var(--font-display); font-size: 2.1rem; line-height: 1.15; letter-spacing: -0.02em; margin-top: 14px; }
.auth-brand-panel__copy p { color: var(--muted); margin-top: 16px; line-height: 1.6; }
.auth-brand-panel__points { list-style: none; margin-top: 34px; display: grid; gap: 12px; position: relative; z-index: 1; }
.auth-brand-panel__points li { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.auth-brand-panel__points svg { color: var(--gold); }
.auth-card-panel { display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 460px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }
.auth-card h2 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.01em; }
.auth-card__lead { color: var(--muted); margin: 8px 0 26px; }
.auth-form { display: grid; gap: 0; }
.auth-form .field { margin-bottom: 18px; }
.auth-alt { margin-top: 20px; text-align: center; color: var(--muted); font-size: 14px; }
.auth-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }
.auth-forgot { margin-top: 18px; text-align: center; font-size: 14px; }
.auth-forgot a { color: var(--muted); text-decoration: none; }
.auth-forgot a:hover { color: var(--accent); text-decoration: underline; }
.auth-error { margin-top: 6px; color: var(--red); font-weight: 600; font-size: 14px; }

/* Field-specific validation */
.field--error input, .field--error select, .field--error textarea { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(217, 75, 61, 0.12); }
.field-error { color: var(--red); font-size: 13px; margin-top: 6px; font-weight: 500; }
.field-hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.field-input-wrap { position: relative; }
.password-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 700;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 6px;
}
.password-toggle:hover { color: var(--accent); }
.field input[type="password"] { padding-right: 60px; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; color: var(--text); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }

/* Terms & Conditions acceptance (checkout) — a plain inline checkbox.
   ui.css loads after this file and gives `.form-card input` width:100%,
   14px padding, a border and an 11px radius; the attribute selector below is
   more specific so the checkbox stays a normal small control. */
.checkout-terms { margin-bottom: 20px; }
.checkout-terms__label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; line-height: 1.5; color: var(--text); cursor: pointer;
}
.checkout-terms__label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line, #c9ced6);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
  accent-color: var(--green, #1f9d61);
}
.checkout-terms__label a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.checkout-terms__error { display: block; color: var(--red, #d94b3d); font-size: 13px; font-weight: 600; margin-top: 6px; }
.checkout-terms__error[hidden] { display: none; }

/* Member-only gate (detail page, anonymous) */
.member-gate__box { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--radius); padding: 20px; }
.member-gate__box p { margin: 10px 0 18px; color: var(--text); }
.member-gate--cta .eyebrow { font-size: 11px; }
.member-gate--cta p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.member-gate--cta p a { color: var(--accent); font-weight: 700; text-decoration: underline; }

/* Get Members Only strip (home, anonymous) */
.members-strip { background: var(--ink); color: #f3f3f3; border-block: 1px solid var(--gold-line); }
.members-strip__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 40px 0; flex-wrap: wrap;
}
.members-strip__text .eyebrow { color: var(--gold); }
.members-strip__text h3 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); margin-top: 12px; }
.members-strip__text p { color: var(--muted-on-dark); margin-top: 10px; max-width: 56ch; }
.members-strip__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Member purchase prompt modal */
.member-modal { position: fixed; inset: 0; z-index: var(--z-modal, 200); display: flex; align-items: center; justify-content: center; padding: 20px; }
.member-modal:not(.open) { display: none; }
.member-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 11, 12, 0.6); backdrop-filter: blur(2px); }
.member-modal__panel {
  position: relative; background: var(--paper); border-radius: var(--radius-lg); padding: 34px;
  max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); animation: memberIn 0.28s var(--ease);
}
@keyframes memberIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.member-modal__close { position: absolute; top: 14px; right: 14px; border: none; background: none; color: var(--muted); cursor: pointer; padding: 6px; }
.member-modal__close:hover { color: var(--text); }
.member-modal__panel h2 { font-family: var(--font-display); font-size: 1.5rem; margin-top: 6px; }
.member-modal__product { margin: 18px 0; padding: 14px; background: var(--cream); border-radius: var(--radius); line-height: 1.6; }
.member-modal__product .was { color: var(--muted); text-decoration: line-through; margin-right: 10px; font-size: 15px; }
.member-modal__product .now { color: var(--accent); font-weight: 800; font-size: 1.3rem; }
.member-modal__actions { display: grid; gap: 12px; margin-top: 24px; }
.member-modal__actions .btn { justify-content: center; }
.member-modal__fine { margin-top: 18px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* Cart restricted item */
.cart-restricted-note { margin-bottom: 18px; }
.cart-restricted-note a { color: var(--accent); font-weight: 700; }
.cart-line--restricted .cart-line__body h3 a { color: var(--muted); }
.cart-line__restricted { margin-top: 8px; color: var(--red); font-size: 13px; font-weight: 600; }

/* Account menu (header) */
.account-area { display: flex; align-items: center; gap: 12px; }
.account-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; padding: 8px 4px; border-radius: 10px; }
.account-link:hover { color: var(--accent); }
/* The icon is only shown on mobile, where the text label collapses. */
.account-link__ico { display: none; flex: 0 0 auto; }
.account-menu { position: relative; }
.account-menu__trigger {
  display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
  color: var(--text); font-weight: 700; font-size: 14px; padding: 6px 4px;
}
.account-menu__trigger svg { color: var(--gold); }
.account-menu__dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 8px; display: none; z-index: var(--z-dropdown, 80);
}
.account-menu__dropdown.open { display: block; }
.account-menu__dropdown a, .account-menu__dropdown button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; background: none; border: none; cursor: pointer;
}
.account-menu__dropdown a:hover, .account-menu__dropdown button:hover { background: var(--cream); color: var(--accent); }

/* Account page */
.account-hero { background: var(--ink); color: #fff; padding: 60px 0; }
.account-hero__inner h1 { font-family: var(--font-display); font-size: 2.2rem; margin-top: 10px; }
.account-hero__inner p { color: var(--muted-on-dark); margin-top: 10px; }
.account-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.account-side { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.account-side__user { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.account-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.account-side__nav { display: grid; gap: 4px; margin-bottom: 22px; }
.account-side__nav a { padding: 11px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.account-side__nav a:hover { background: var(--cream); }
.account-side__nav a.is-active { background: var(--gold-soft); color: var(--accent); }
.account-main { display: grid; gap: 22px; }
.account-table-wrap { overflow-x: auto; }
.account-table { width: 100%; border-collapse: collapse; }
.account-table th, .account-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.account-table th { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.order-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--cream); color: var(--muted); }
.order-pill--paid, .order-pill--completed { background: rgba(31, 157, 97, 0.14); color: var(--green); }
.order-pill--processing, .order-pill--ready { background: var(--gold-soft); color: var(--accent); }

@media (max-width: 900px) {
  .auth-hero__inner { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .account-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Shop helpers (small utilities the catalogue landing page uses instead of
   inline style attributes).
--------------------------------------------------------------------------- */
.muted { color: var(--muted); }
.section--flush-top { padding: 26px 0 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.shop-result-head .section-title { margin-top: 0; }
.shop-result-head p.lead { margin: 8px 0 0; }

/* ---------------------------------------------------------------------------
   Product ratings & member reviews
   (gold star fill on a light track, consistent with the brand palette)
--------------------------------------------------------------------------- */

/* Read-only star row: five glyphs with a gold overlay clipped to the score. */
.stars {
  position: relative;
  display: inline-flex;
  line-height: 1;
  font-size: 15px;
  letter-spacing: 0;
  color: #e2e2e8;
}
.stars__base { color: #e2e2e8; }
.stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
}

/* Rating row on a product card: one gold star, the genuine average, and the
   number of ratings. Rendered only when the product has real reviews. */
.product-card__rating { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.product-card__star { width: 13px; height: 13px; color: var(--gold); flex: 0 0 auto; }
.product-card__rating-avg { font-size: 12.5px; font-weight: 700; color: var(--text); }
.product-card__rating-count { font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Rating row on the product detail page. */
#reviews { scroll-margin-top: 92px; }
.pd__rating { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pd__rating .stars { font-size: 16px; }
.pd__rating-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pd__rating-link:hover { color: var(--accent); }

/* Reviews block. */
.reviews { max-width: 880px; margin: 0 auto; }
.reviews__head { text-align: center; }
.reviews__summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 26px 0;
  box-shadow: var(--shadow-sm);
}
.reviews__score { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.reviews__score-num { font-family: var(--font-display); font-size: 46px; font-weight: 800; line-height: 1; color: var(--text); }
.reviews__score .stars { font-size: 18px; }
.reviews__score-count { font-size: 13px; color: var(--muted); }
.reviews__bars { display: grid; gap: 8px; }
.rbar { display: grid; grid-template-columns: 44px 1fr 32px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.rbar__label { font-weight: 600; color: var(--text); }
.rbar__track { position: relative; height: 8px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.rbar__fill { position: absolute; inset: 0 auto 0 0; background: var(--gold); border-radius: 999px; }
.rbar__count { text-align: right; }

.reviews__list { display: grid; gap: 16px; margin-top: 26px; }
.reviews__empty {
  text-align: center;
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.review__top { display: flex; align-items: center; gap: 12px; }
.review__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.review__who { display: flex; flex-direction: column; line-height: 1.35; }
.review__name { font-weight: 600; color: var(--text); }
.review__date { font-size: 12.5px; color: var(--muted); }
.review__stars { margin-left: auto; }
.review__mine {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 3px 10px;
}
.review__title { font-family: var(--font-display); font-size: 16.5px; margin-top: 14px; color: var(--text); }
.review__text { margin-top: 8px; color: var(--text); line-height: 1.6; }

/* Review form. */
.review-form {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  margin: 26px 0;
}
.review-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.review-form__head h3 { font-family: var(--font-display); font-size: 20px; }
.review-form__head p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.review-form__edit { color: var(--accent); }
.review-form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.review-form__delete { color: var(--red); border-color: rgba(217, 75, 61, 0.4); }
.review-form__delete:hover { border-color: var(--red); color: var(--red); }
.review-form--login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.review-form__icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.review-form--login h3 { font-family: var(--font-display); font-size: 20px; }
.review-form--login p { color: var(--muted); font-size: 14px; max-width: 46ch; }
.review-form--login .btn-row { margin-top: 10px; }

/* Interactive star picker (radios stay accessible; stars are the visual). */
.star-picker { border: 0; padding: 0; margin: 0 0 18px; }
.star-picker__legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.star-picker__row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.star-picker__star {
  font-size: 30px;
  line-height: 1;
  color: #d8d8de;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.1s ease;
}
.star-picker__star.is-on { color: var(--gold); }
.star-picker__star:hover { transform: scale(1.08); }
.star-picker__input:focus-visible + .star-picker__star {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .reviews__summary { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .rbar { grid-template-columns: 40px 1fr 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .star-picker__star { transition: none; }
  .star-picker__star:hover { transform: none; }
}