/* =========================================================
   Laptop Repair Specialists — Design System v3
   IBM Plex Sans + Mono.
   ========================================================= */

:root {
  /* Surfaces */
  --bg: #F6F5F1;
  --bg-elev: #FFFFFF;
  --bg-soft: #FAF9F5;
  --bg-deep: #0E1014;
  --bg-deep-2: #16191F;
  --rule: rgba(14,16,20,0.10);
  --rule-strong: rgba(14,16,20,0.20);

  /* Ink */
  --ink: #0E1014;
  --ink-2: #3A3F47;
  --ink-3: #6B7280;
  --ink-inv: #F6F5F1;
  --ink-inv-2: #B0B5BD;

  /* Accents */
  --accent: #2452F5;
  --accent-soft: #E6EBFF;
  --signal: #F26B1F;
  --signal-soft: #FCE8DB;
  --ok: #1F8F5F;
  --ok-soft: #D9F0E5;
  --warn: #CA8A04;
  --warn-soft: #FFF4D6;

  /* Type */
  --f-sans: "IBM Plex Sans", "Inter", -apple-system, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --maxw: 1480px;
  --gutter: 40px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Layout ---------- */
.wrap        { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide   { max-width: 1640px;       margin: 0 auto; padding: 0 var(--gutter); }

.section     { padding: var(--s-9) 0; }
.section--sm { padding: 64px 0; }
.section--dark { background: var(--bg-deep); color: #fff; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.eyebrow .dot { color: var(--accent); margin-right: 6px; }

h1, h2, h3, h4 {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.h-display {
  font-size: clamp(40px, 5.5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: balance;
}
.h-display-sm {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.030em;
  line-height: 1.0;
  text-wrap: balance;
}
.h-section {
  font-size: clamp(22px, 3vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}
@media (max-width: 600px) {
  .h-section { font-size: 22px; line-height: 1.2; }
}
.h-card { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.lede { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin: 0; }
.mono { font-family: var(--f-mono); }
.tnum { font-variant-numeric: tabular-nums; }

.accent-underline {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, transparent 62%, rgba(36,82,245,.18) 62%, rgba(36,82,245,.18) 92%, transparent 92%);
  padding: 0 2px;
}

/* ---------- Section heading row ---------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.section-head .h-section { flex: 1 1 auto; min-width: 0; }
.section-head .meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.section-head .meta a { color: var(--accent); }

/* Mobile: stack title above meta, give the title the full row so it never
   collapses into a word-per-line column when the meta is wide. */
@media (max-width: 720px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 28px;
  }
  .section-head .h-section { width: 100%; max-width: none; }
  .section-head .meta { text-align: left; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--r-1);
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease, box-shadow .15s ease;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(36,82,245,.55);
}
.btn--accent:hover {
  background: var(--accent);
  box-shadow: 0 12px 28px -8px rgba(36,82,245,.65);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn--dark {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.btn--dark:hover { background: #000; border-color: #000; color: #fff; }
.btn--dark svg { color: #fff; }

.btn--inv {
  background: var(--ink-inv);
  color: var(--ink);
  border-color: var(--ink-inv);
}
.btn--inv:hover { background: #fff; }

.btn--wa {
  background: #16A34A;
  color: #fff;
  border-color: #16A34A;
  box-shadow: 0 12px 28px -10px rgba(22,163,74,.6);
}
.btn--wa:hover { background: #138A3F; border-color: #138A3F; }

.btn--lg { padding: 16px 22px; font-size: 15px; }
.btn--sm { padding: 8px 12px;  font-size: 13px; }
.btn--full { width: 100%; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: var(--bg-elev);
  font-weight: 500;
  white-space: nowrap;
}
.chip--accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip--ok     { border-color: var(--ok);     color: var(--ok);     background: var(--ok-soft); }
.chip--signal { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }
.chip .swatch { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ---------- Cards (generic) ---------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 24px;
  transition: border-color .18s ease, transform .2s ease, box-shadow .25s ease;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(36,82,245,.35), 0 2px 0 0 rgba(36,82,245,.06);
}
.card--dark { background: var(--bg-deep); color: #fff; border-color: transparent; }

/* ============================================================
   Trust ribbon — top dark bar with marquee
   ============================================================ */
.lrs-ribbon {
  background: var(--bg-deep);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}
.lrs-ribbon .wrap-wide {
  height: 36px;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
}
.lrs-ribbon-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  padding-left: 28px;
  animation: lrsRibbonMarquee 60s linear infinite;
  will-change: transform;
}
.lrs-ribbon .item { display: inline-flex; align-items: center; gap: 8px; }
.lrs-ribbon .item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }
.lrs-ribbon .item.ok .dot { background: var(--ok); }
.lrs-ribbon .item.acc .dot { background: var(--accent); }
.lrs-ribbon .sep { color: rgba(255,255,255,0.18); }

@keyframes lrsRibbonMarquee {
  /* Track holds 4 copies of the items; -25% is exactly one copy-width, so the
     loop is seamless regardless of viewport (track is always wider than 2×). */
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
  .lrs-ribbon-track { animation: none; }
}

/* ============================================================
   Header (sticky, blurred, with mega-menus)
   ============================================================ */
.lrs-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,245,241,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.lrs-hdr-inner {
  display: grid;
  /* Equal 1fr side columns so the nav (centre, auto) sits dead-centre on the
     SCREEN, not just midway between the logo and the Book-repair button. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.lrs-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.lrs-brand .mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(36,82,245,.25);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.lrs-brand:hover .mark {
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 8px 20px rgba(36,82,245,.4);
}
.lrs-brand .name { font-size: 15px; white-space: nowrap; }
.lrs-brand .name small {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 2px;
}

.lrs-nav { display: flex; align-items: center; gap: 4px; justify-content: center; }
.lrs-nav > a, .lrs-nav .lrs-dd > a {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink-2);
  border-radius: var(--r-1);
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.lrs-nav > a:hover, .lrs-nav .lrs-dd > a:hover { color: var(--ink); }
.lrs-nav > a.active, .lrs-nav .lrs-dd > a.active { color: var(--ink); }
.lrs-nav > a.active::after, .lrs-nav .lrs-dd > a.active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  background: var(--accent);
}
.lrs-nav .lrs-dd > a .lrs-dd-caret { transition: transform .15s ease; opacity: .55; }
.lrs-nav .lrs-dd[data-open="true"] > a .lrs-dd-caret { transform: rotate(180deg); }

.lrs-hdr-cta { display: inline-flex; align-items: center; gap: 12px; justify-self: end; }
.lrs-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease;
}
.lrs-phone-pill:hover { border-color: var(--accent); background: var(--accent-soft); }
.lrs-phone-pill .blip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31,143,95,.18);
}

/* Mobile menu toggle */
.lrs-hamburger {
  display: none;
  width: 28px;
  height: 40px;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  border-radius: var(--r-1);
}
.lrs-hamburger:hover { background: rgba(14,16,20,.05); }

/* Mega-menu dropdown panel */
.lrs-dd { position: relative; }
.lrs-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  /* Default: left-anchor to the trigger so panels don't overflow viewport
     on the left side. The rightmost trigger ("Refurbished devices") is
     overridden below to right-anchor instead. */
  left: 0;
  right: auto;
  transform: translate(0, -6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(14,16,20,.18), 0 4px 12px rgba(14,16,20,.06);
  padding: 18px;
  z-index: 100;
  max-width: calc(100vw - 32px);
}
.lrs-dd[data-open="true"] .lrs-dd-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0);
}
.lrs-dd-panel--services { width: 760px; }
.lrs-dd-panel--build    { width: 720px; }
.lrs-dd-panel--refurb   { width: 720px; }
/* All three panels left-anchor to their trigger so they consistently grow
   rightward. The `max-width: calc(100vw - 32px)` clamp on `.lrs-dd-panel`
   prevents the rightmost (Refurb) panel from overflowing the viewport at
   narrower desktop widths. */
.lrs-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s ease;
}
.lrs-dd-item:hover { background: var(--bg); }
.lrs-dd-item .ic {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--rule);
}
.lrs-dd-item .body { display: flex; flex-direction: column; min-width: 0; }
.lrs-dd-item .body .name { font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrs-dd-item .body .meta { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.lrs-dd-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  margin-left: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  text-decoration: none;
}
.lrs-dd-feature {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
}
.lrs-dd-feature .glow {
  position: absolute;
  inset: auto -30px -50px auto;
  width: 150px; height: 150px;
  filter: blur(28px);
  pointer-events: none;
}
.lrs-dd-feature .eyebrow-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.lrs-dd-feature h5 { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 4px; color: #fff; }
.lrs-dd-feature p { font-size: 11px; color: rgba(255,255,255,.7); line-height: 1.4; margin: 0; }
.lrs-dd-feature .cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

.lrs-dd-build-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lrs-dd-build-card:hover { transform: translateY(-2px); }
.lrs-dd-build-card .ic-frame {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
}
.lrs-dd-build-card .name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.lrs-dd-build-card .price-from { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.lrs-dd-build-card .desc { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }

.lrs-dd-cond-tier {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
}
.lrs-dd-cond-tier .row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 2px 0;
}
.lrs-dd-cond-tier .row span:first-child { color: var(--ink); }
.lrs-dd-cond-tier .row span:last-child { font-family: var(--f-mono); color: var(--ink-3); }

/* Mobile menu drawer — top is set dynamically by JS to match the visible
   bottom of the header (accounting for the trust ribbon when at scroll-top) */
.lrs-mobile-menu {
  position: fixed;
  top: 0;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 49;
  display: flex;
  flex-direction: column;
  animation: lrsMmFade .18s ease both;
  overflow-y: auto;
}
@keyframes lrsMmFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.lrs-mobile-menu nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.lrs-mobile-menu nav a {
  padding: 18px 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  display: block;
  text-decoration: none;
}
.lrs-mobile-menu nav a.active { color: var(--accent); }
.lrs-mobile-menu[hidden] { display: none; }

/* Hamburger appears as soon as desktop nav hides — no dead zone where
   neither nav nor hamburger is visible.
   Breakpoint bumped from 1160 → 1280 because the tablet/small-desktop zone
   was cramming the full nav + phone pill + CTA into too little space and
   pushing the Book Repair button past the right edge. */
/* Tablet/iPad (768-1280): keep the classic horizontal nav — NO hamburger.
   Just drop the brand subtext + phone pill so brand + nav + Book CTA all fit. */
@media (max-width: 1280px) {
  .lrs-brand .name small { display: none; }
  .lrs-hdr-cta .lrs-phone-pill { display: none; }
}
@media (min-width: 768px) and (max-width: 1280px) {
  .lrs-hdr .lrs-hdr-inner { gap: 14px; position: relative; }
  .lrs-hdr .lrs-nav { gap: 10px; }
  .lrs-hdr .lrs-nav > a,
  .lrs-hdr .lrs-nav .lrs-dd > a { font-size: 14px; padding-left: 8px; padding-right: 8px; }
  /* Centre the mega-menu panels in the header (not anchored to their trigger)
     so the wide 720-760px panels don't overflow the right edge at iPad widths.
     Make the trigger position:static so the panel resolves to .lrs-hdr-inner. */
  .lrs-hdr .lrs-dd { position: static; }
  .lrs-hdr .lrs-dd-panel {
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-6px);
    max-width: calc(100vw - 24px);
  }
  .lrs-hdr .lrs-dd[data-open="true"] .lrs-dd-panel {
    transform: translateX(-50%) translateY(0);
  }
}
/* Phones only (<=767): collapse to the hamburger drawer. */
@media (max-width: 767px) {
  .lrs-nav { display: none; }
  .lrs-hamburger { display: inline-flex; }
  /* Switch from CSS grid to flex when the nav goes away so the CTA
     sticks cleanly to the right edge instead of leaving phantom space. */
  .lrs-hdr-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .lrs-hdr-inner { height: 60px; }
  .lrs-hdr-cta .lrs-cart-btn { display: none; }
  /* Hide brand TEXT on small mobile — just the LS mark fits cleanly. */
  .lrs-brand .name { display: none; }
  .section, .lrs-ftr-inner { padding-top: 56px; padding-bottom: 56px; }
  .section--sm { padding-top: 36px; padding-bottom: 36px; }
}

/* Small-desktop range (1281-1440px): nav visible but space tight. Tighten
   inter-item gap so brand + nav + phone + CTA all fit comfortably. */
@media (min-width: 1281px) and (max-width: 1440px) {
  .lrs-hdr .lrs-hdr-inner { padding-left: 28px; padding-right: 28px; gap: 18px; }
  .lrs-hdr .lrs-nav { gap: 18px; }
  .lrs-hdr .lrs-hdr-cta { gap: 10px; }
}

/* ============================================================
   Footer (5 columns)
   ============================================================ */
.lrs-ftr {
  background: var(--bg-deep);
  color: var(--ink-inv);
}
.lrs-ftr-inner {
  /* `.wrap` already supplies horizontal gutter — set vertical-only here so we
     don't overwrite it. Old rule was `padding: 64px 0 32px` which killed the
     gutter and pushed the columns flush to the screen edge. */
  padding-top: 64px;
  padding-bottom: 32px;
}
.lrs-ftr-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 32px;
}
.lrs-ftr h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-inv-2);
  margin: 0 0 16px;
  font-weight: 500;
}
.lrs-ftr a {
  display: block;
  padding: 5px 0;
  color: var(--ink-inv-2);
  font-size: 14px;
  text-decoration: none;
}
.lrs-ftr a:hover { color: #fff; }
.lrs-ftr p { color: var(--ink-inv-2); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
/* Accepted payment methods row — sits above the copyright/legal row */
.lrs-ftr-payments {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lrs-ftr-payments__label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-inv-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lrs-ftr-payments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lrs-ftr-payments__list li {
  display: inline-flex;
  align-items: center;
}
.lrs-ftr-payments__list svg {
  display: block;
  border-radius: 3px;
}

.lrs-ftr-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 16px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-inv-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 1080px) { .lrs-ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  /* Keep 2-column layout on mobile so links use the full screen width */
  .lrs-ftr-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  /* Extra side padding so footer content doesn't sit edge-to-edge */
  .lrs-ftr-inner { padding-left: 24px; padding-right: 24px; }
  .lrs-ftr-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ============================================================
   Floating CTAs (bottom corners)
   ============================================================ */
.lrs-float {
  position: fixed;
  bottom: 20px;
  z-index: 60;
}
.lrs-float--phone { left: 20px; }
.lrs-float--wa { right: 20px; }
.lrs-float a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lrs-float a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
}
.lrs-float--wa a { background: #16A34A; color: #fff; }

/* Cart shortcut — sits ABOVE the WhatsApp pill on the right edge.
   Stacked layout: 36px pill (icon + count) + 2-line text + arrow. */
.lrs-float--cart {
  right: 20px;
  bottom: 76px;       /* clears the WhatsApp pill below */
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--f-sans);
  box-shadow: 0 14px 32px rgba(36, 82, 245, .35), 0 2px 6px rgba(36, 82, 245, .15);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  animation: lrs-cart-fab-in .28s ease-out both;
}
@keyframes lrs-cart-fab-in {
  from { transform: translateY(8px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.lrs-float--cart:hover {
  transform: translateY(-2px);
  background: #1d40d6;
  box-shadow: 0 18px 42px rgba(36, 82, 245, .45), 0 2px 8px rgba(36, 82, 245, .2);
}
.lrs-float--cart__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
  flex: 0 0 auto;
}
.lrs-float--cart__icon svg { color: #fff; }
.lrs-float--cart__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--accent);
}
.lrs-float--cart__copy { display: flex; flex-direction: column; line-height: 1.2; }
.lrs-float--cart__title { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.lrs-float--cart__sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-top: 2px;
}
.lrs-float--cart > svg { color: #fff; flex: 0 0 auto; }

/* Mobile — collapse to icon-only pill so it doesn't dominate the screen */
@media (max-width: 600px) {
  .lrs-float--cart { padding: 10px 14px; gap: 10px; }
  .lrs-float--cart__copy { display: none; }
  .lrs-float--cart > svg { display: none; }
  .lrs-float--cart__icon { width: 32px; height: 32px; }
}

/* Refurb filter FAB — sits above the phone pill on the left edge.
   Hidden by default; JS adds .is-visible once the original filter
   sidebar is scrolled out of view. */
.lrs-float--filter {
  position: fixed;
  left: 20px;
  bottom: 86px;          /* clears the 52px phone pill at bottom: 20px */
  z-index: 61;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.lrs-float--filter.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lrs-float--filter:hover { background: var(--accent); border-color: var(--accent); }
.lrs-float--filter__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  flex: 0 0 auto;
}
.lrs-float--filter__icon svg { color: #fff; }
.lrs-float--filter__label { font-size: 13px; }
@media (max-width: 600px) {
  .lrs-float--filter__label { display: none; }
  .lrs-float--filter { padding: 10px 14px; gap: 0; }
  .lrs-float--filter__icon { width: 28px; height: 28px; }
}

/* Filter modal — opens when the FAB is tapped. The original .lrs-refurb-filter
   element is moved INSIDE the modal body so its existing change-listeners and
   filter state stay intact; moved back when modal closes. */
.lrs-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lrs-filter-modal.is-open { display: flex; }
.lrs-filter-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 28, .55);
  backdrop-filter: blur(2px);
}
.lrs-filter-modal__sheet {
  position: relative;
  background: var(--bg-elev);
  border-radius: 18px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  animation: lrs-filter-modal-pop .2s ease-out;
}
@keyframes lrs-filter-modal-pop {
  from { transform: translateY(8px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.lrs-filter-modal__sheet h3 {
  margin: 0 0 16px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.lrs-filter-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 8px;
}
.lrs-filter-modal__close:hover { background: var(--bg-soft); color: var(--ink); }
.lrs-filter-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 -8px;
  padding: 0 8px;
}
/* Inside the modal, the .lrs-refurb-filter sheds its sticky/max-height behaviour */
.lrs-filter-modal__body .lrs-refurb-filter {
  position: static !important;
  max-height: none !important;
  border-radius: 12px;
}
.lrs-filter-modal__actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.lrs-filter-modal__actions .btn { padding: 10px 22px; font-size: 14px; }
@media (max-width: 600px) {
  .lrs-filter-modal { padding: 0; }
  .lrs-filter-modal__sheet {
    border-radius: 18px 18px 0 0;
    max-height: 90vh;
    margin-top: auto;
    width: 100%;
    max-width: none;
  }
}

/* Sticky bottom CTA bar — shows on /cart/ + /checkout/. Holds the
   summary (X items · £total) on the left + Checkout/Place-Order on the right. */
.lrs-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 24px rgba(0,0,0,.06);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(0);
  transition: transform .25s ease, opacity .2s ease;
}

/* (No sticky bar on checkout — removed; the right-side order-summary card
   already has the Place Order button always visible while filling.) */
.lrs-sticky-cta__inner {
  max-width: 1640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
}
.lrs-sticky-cta__summary {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lrs-sticky-cta__count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-sticky-cta__total {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lrs-sticky-cta__total .amount,
.lrs-sticky-cta__total bdi { font-size: 18px; font-weight: 700; color: var(--ink); }
.lrs-sticky-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--accent);
  color: #fff !important;
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 14px rgba(36, 82, 245, .25);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.lrs-sticky-cta__btn:hover {
  background: #1d40d6;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(36, 82, 245, .35);
}

/* On the cart page only, push the WhatsApp + phone floats above the sticky
   bar so they remain tappable. Bar height ~64–72px → pills go to bottom: 88px. */
.woocommerce-cart .lrs-float--wa { bottom: 88px !important; }
.woocommerce-cart .lrs-float--phone { bottom: 88px !important; }
.woocommerce-cart .lrs-float--cart { bottom: 144px !important; }

/* Bottom padding so the sticky bar doesn't cover the final cart CTA */
.woocommerce-cart main.lrs-main { padding-bottom: 100px; }

/* Mobile — tighter padding, stack neatly */
@media (max-width: 600px) {
  .lrs-sticky-cta { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .lrs-sticky-cta__inner { gap: 12px; padding: 0; }
  .lrs-sticky-cta__btn { padding: 12px 18px; font-size: 14px; }
  .lrs-sticky-cta__total { font-size: 16px; }
  .lrs-sticky-cta__total .amount,
  .lrs-sticky-cta__total bdi { font-size: 16px; }
}

/* Phone CTA: icon-only circle on all viewports */
.lrs-float--phone a {
  background: var(--accent);
  color: #fff;
  width: 52px;
  height: 52px;
  padding: 0;
  gap: 0;
  font-size: 0;
  justify-content: center;
}
.lrs-float--phone a svg {
  width: 22px;
  height: 22px;
}

/* ============================================================
   Hero (home) — shorter than v2, animated background
   ============================================================ */
.lrs-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--rule);
}
.lrs-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.lrs-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}
.lrs-hero__orb--1 {
  width: 620px; height: 620px;
  left: -180px; top: -160px;
  background: radial-gradient(circle, #2452F5 0%, rgba(36,82,245,0) 65%);
  opacity: .9;
  animation: lrsOrb1 14s ease-in-out infinite;
}
.lrs-hero__orb--2 {
  width: 540px; height: 540px;
  right: -140px; top: 20px;
  background: radial-gradient(circle, #F26B1F 0%, rgba(242,107,31,0) 65%);
  opacity: .75;
  animation: lrsOrb2 16s ease-in-out infinite;
}
.lrs-hero__orb--3 {
  width: 460px; height: 460px;
  left: 36%; bottom: -200px;
  background: radial-gradient(circle, #7C3AED 0%, rgba(124,58,237,0) 65%);
  opacity: .65;
  animation: lrsOrb3 18s ease-in-out infinite;
}
.lrs-hero__bg::after {
  content: '';
  position: absolute;
  width: 140%; height: 140%;
  left: -20%; top: -20%;
  background: conic-gradient(from 0deg,
    rgba(36,82,245,0) 0deg,
    rgba(36,82,245,.10) 60deg,
    rgba(242,107,31,.10) 180deg,
    rgba(124,58,237,.10) 300deg,
    rgba(36,82,245,0) 360deg);
  filter: blur(40px);
  animation: lrsHeroSweep 28s linear infinite;
  opacity: .9;
}
.lrs-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,16,20,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,16,20,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000, transparent);
  animation: lrsGridDrift 40s linear infinite;
}
@keyframes lrsOrb1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .9; }
  25%     { transform: translate(80px,60px) scale(1.15); opacity: 1; }
  50%     { transform: translate(140px,-40px) scale(1.05); opacity: .8; }
  75%     { transform: translate(40px,80px) scale(1.18); opacity: .95; }
}
@keyframes lrsOrb2 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .75; }
  33%     { transform: translate(-90px,70px) scale(1.20); opacity: .9; }
  66%     { transform: translate(-40px,-60px) scale(.95); opacity: .65; }
}
@keyframes lrsOrb3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .65; }
  40%     { transform: translate(-80px,-100px) scale(1.25); opacity: .85; }
  70%     { transform: translate(60px,-40px) scale(1.10); opacity: .7; }
}
@keyframes lrsHeroSweep   { to { transform: rotate(360deg); } }
@keyframes lrsGridDrift   {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .lrs-hero__orb, .lrs-hero__bg::after, .lrs-hero__grid { animation: none; }
}
@media (max-width: 900px) {
  .lrs-hero__orb { filter: blur(50px); }
  .lrs-hero__orb--1 { width: 300px; height: 300px; }
  .lrs-hero__orb--2 { width: 260px; height: 260px; }
  .lrs-hero__orb--3 { width: 240px; height: 240px; }
}

.lrs-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.lrs-hero__chips {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lrs-hero__title { text-wrap: balance; }
.lrs-hero__lede { margin-top: 20px; }
.lrs-hero__cta-row { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.lrs-hero__trust {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.lrs-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.lrs-hero__trust-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px currentColor; }
.lrs-hero__trust-item--blue   { background: #E6EBFF; color: #2452F5; border-color: rgba(36,82,245,.18); }
.lrs-hero__trust-item--green  { background: #D9F0E5; color: #1F8F5F; border-color: rgba(31,143,95,.20); }
.lrs-hero__trust-item--orange { background: #FCE8DB; color: #F26B1F; border-color: rgba(242,107,31,.22); }

/* Hero quote card (right side) */
.lrs-quote-pill {
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  background: rgba(14,16,20,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: fit-content;
}
.lrs-quote-pill .blip { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(31,143,95,.25); }

.lrs-quote-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  padding: 20px;
  box-shadow: 0 40px 80px -40px rgba(14,16,20,.18);
}
.lrs-quote-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.lrs-quote-card__head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.lrs-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  padding: 0 12px;
  height: 44px;
  transition: border-color .12s ease;
}
.lrs-field:focus-within { border-color: var(--ink); }
.lrs-field input,
.lrs-field select {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  height: 100%;
}
.lrs-field .label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lrs-quote-card__fields { display: grid; gap: 8px; }
.lrs-quote-card__cta { width: 100%; margin-top: 14px; }
.lrs-quote-card__tagline {
  margin-top: 8px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 1024px) {
  .lrs-hero__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .lrs-hero { padding: 32px 0 48px; }
}

/* ============================================================
   Trust stats (4-up)
   ============================================================ */
.lrs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--bg-elev);
}
.lrs-stat {
  padding: 28px;
  border-right: 1px solid var(--rule);
}
.lrs-stat:last-child { border-right: 0; }
.lrs-stat .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  margin-bottom: 10px;
}
.lrs-stat .v {
  font-family: var(--f-sans);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lrs-stat .v .frac { font-size: 22px; color: var(--ink-3); font-weight: 500; }
.lrs-stat .l {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 10px;
  font-weight: 500;
}
@media (max-width: 1080px) {
  .lrs-stats { grid-template-columns: 1fr 1fr; }
  .lrs-stat:nth-child(2) { border-right: 0; }
  .lrs-stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .lrs-stat { padding: 18px 14px; }
  .lrs-stat .v { font-size: 28px; }
  .lrs-stat .v .frac { font-size: 16px; }
  .lrs-stat .l { font-size: 10px; margin-top: 8px; line-height: 1.4; }
  .lrs-stat .badge { font-size: 9px; padding: 2px 7px; margin-bottom: 10px; }
}

/* ============================================================
   "Why Laptop Repair Specialists?" home-page section —
   text+stats split + 6-up feature tiles
   ============================================================ */
.lrs-why {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.lrs-why__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.lrs-why__copy .lede {
  max-width: 56ch;
  margin: 0 0 18px;
}
.lrs-why__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.lrs-why__more:hover { text-decoration: underline; }

.lrs-why__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lrs-why__stat {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.lrs-why__stat .v {
  font-family: var(--f-sans);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.lrs-why__stat .v .frac {
  font-size: 16px;
  color: var(--ink-3);
  font-weight: 500;
}
.lrs-why__stat .l {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  line-height: 1.3;
}

.lrs-why__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.lrs-why__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.lrs-why__features li svg {
  color: var(--accent);
  flex: 0 0 auto;
}

@media (max-width: 1080px) {
  .lrs-why__top { grid-template-columns: 1fr; gap: 28px; }
  .lrs-why__features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .lrs-why__stats { grid-template-columns: 1fr; }
  .lrs-why__features { grid-template-columns: 1fr 1fr; }
  .lrs-why__stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
    padding: 16px 18px;
  }
  .lrs-why__stat .v { font-size: 26px; }
}

/* ============================================================
   Service grid (3-col home + services hub)
   ============================================================ */
.lrs-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.lrs-svc-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 24px;
  transition: border-color .18s ease, transform .2s ease, box-shadow .25s ease;
  color: var(--ink);
  text-decoration: none;
}
.lrs-svc-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(36,82,245,.35), 0 2px 0 0 rgba(36,82,245,.06);
}
.lrs-svc-card .corner {
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  pointer-events: none;
}
.lrs-svc-card .top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  position: relative;
}
.lrs-svc-card .ic {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.lrs-svc-card .price {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
}
.lrs-svc-card h3 { margin: 6px 0 0; position: relative; }
.lrs-svc-card .desc {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
  position: relative;
}
.lrs-svc-card .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
}
@media (max-width: 1080px) { .lrs-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .lrs-svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .lrs-svc-card { padding: 18px; }
}

/* ============================================================
   Process steps (4-up)
   ============================================================ */
.lrs-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--bg-elev);
}
.lrs-process .step {
  padding: 28px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.lrs-process .step:last-child { border-right: 0; }
.lrs-process .step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.lrs-process .ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.lrs-process .num {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
}
.lrs-process h4 {
  font-size: 17px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lrs-process .desc { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.lrs-process .time {
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 1080px) {
  .lrs-process { grid-template-columns: 1fr 1fr; }
  .lrs-process .step:nth-child(2) { border-right: 0; }
  .lrs-process .step:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .lrs-process .step { padding: 18px 14px; }
  .lrs-process .ic { width: 36px; height: 36px; border-radius: 9px; }
  .lrs-process .num { font-size: 11px; }
  .lrs-process h4 { font-size: 15px; margin-bottom: 6px; }
  .lrs-process .desc { font-size: 12.5px; line-height: 1.5; }
  .lrs-process .time { font-size: 10px; margin-top: 12px; }
}

/* ============================================================
   Reviews (3-up, equal heights)
   ============================================================ */
.lrs-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.lrs-rev-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 24px;
  transition: border-color .18s ease, transform .2s ease, box-shadow .25s ease;
}
.lrs-rev-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(36,82,245,.35), 0 2px 0 0 rgba(36,82,245,.06);
}
.lrs-rev-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.lrs-rev-stars {
  color: #F5A524;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
}
.lrs-rev-verif {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--ok);
  border-radius: 99px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  background: var(--bg-elev);
}
.lrs-rev-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.lrs-rev-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lrs-rev-foot .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrs-rev-foot .when { flex-shrink: 0; }
@media (max-width: 1080px) { .lrs-rev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .lrs-rev-grid { grid-template-columns: 1fr; gap: 12px; }
  .lrs-rev-card { padding: 18px; }
  .lrs-rev-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lrs-rev-foot .who { white-space: normal; }
}

/* ============================================================
   Brands strip (8-up)
   ============================================================ */
.lrs-brands {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
.lrs-brand-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color .15s ease, transform .15s ease;
  text-decoration: none;
  color: var(--ink);
}
.lrs-brand-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lrs-brand-card .name { font-size: 13px; font-weight: 500; }
.lrs-brand-card .count {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand-mono {
  border-radius: var(--r-2);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.brand-logo {
  border-radius: var(--r-2);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 1199px) { .lrs-brands { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .lrs-brands { grid-template-columns: repeat(2, 1fr); } }

/* Combined brands section: copy on the left + brand cards (logo + count + link)
   on the right. Replaces the old "we repair brands" + "trusted brands" stack. */
.lrs-brands-combined {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 56px;
  align-items: start;
}
.lrs-brands-combined__copy { padding-top: 6px; }
.lrs-brands-combined__copy .eyebrow .dot { color: var(--accent); }
.lrs-brands-combined__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.lrs-brands-combined__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px 16px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 132px;
}
.lrs-brands-combined__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  border-color: var(--ink-3);
}
.lrs-brands-combined__card .logo {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lrs-brands-combined__card .logo img {
  max-height: 32px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.85);
  transition: filter .2s ease;
}
.lrs-brands-combined__card:hover .logo img { filter: grayscale(0%) opacity(1); }
.lrs-brands-combined__card .logo .wordmark {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lrs-brands-combined__card .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.lrs-brands-combined__card .name {
  font-size: 14px;
  font-weight: 600;
}
.lrs-brands-combined__card .count {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
@media (max-width: 1199px) {
  .lrs-brands-combined { grid-template-columns: 1fr; gap: 32px; }
  .lrs-brands-combined__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .lrs-brands-combined__grid { grid-template-columns: repeat(2, 1fr); }
  .lrs-brands-combined__card { min-height: 110px; padding: 14px 12px 12px; }
  .lrs-brands-combined__copy h2 { font-size: 28px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.lrs-faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}
.lrs-faq-aside .lede { margin: 0 0 20px; }
.lrs-faq-list > details { border-bottom: 1px solid var(--rule); }
.lrs-faq-list > details > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lrs-faq-list > details > summary::-webkit-details-marker { display: none; }
.lrs-faq-list .qnum { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.lrs-faq-list .toggle {
  width: 24px; height: 24px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: transform .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.lrs-faq-list > details[open] > summary .toggle { transform: rotate(45deg); border-color: var(--ink); }
.lrs-faq-list .body {
  padding: 0 0 24px 56px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 70ch;
}
@media (max-width: 900px) {
  .lrs-faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .lrs-faq-list .qnum { display: none; }
  .lrs-faq-list .body { padding-left: 0; font-size: 14px; }
}

/* ============================================================
   Final dark CTA
   ============================================================ */
.lrs-fcta {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  color: #fff;
  padding: 96px 0;
}
.lrs-fcta__bgimg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .18;
  filter: blur(2px) saturate(.6);
  pointer-events: none;
}
.lrs-fcta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,16,20,1) 0%, rgba(14,16,20,.85) 60%, rgba(14,16,20,.6) 100%);
  pointer-events: none;
}
.lrs-fcta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.lrs-fcta__title { color: #fff; }
.lrs-fcta__title .accent { color: var(--signal); }
.lrs-fcta__buttons { display: flex; flex-direction: column; gap: 12px; }
.lrs-fcta__buttons .btn { justify-content: space-between; }
.lrs-fcta__walkin {
  margin-top: 14px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-inv-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
@media (max-width: 900px) {
  .lrs-fcta { padding: 64px 0; }
  .lrs-fcta__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   Service detail page — stat tiles (FROM / TURNAROUND / WARRANTY / DIAGNOSTIC)
   ============================================================ */

/* Header row: title + intro side-by-side on desktop, stacks on tablet/mobile
   so the paragraph isn't crammed into a narrow right column on iPhone width */
.lrs-svc-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .lrs-svc-header { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .lrs-svc-header .lede { font-size: 16px; line-height: 1.55; }
}

/* Expandable per-service description (native <details>) */
.lrs-svc-desc {
  grid-column: 1 / -1;
  margin-top: 10px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg-elev);
  overflow: hidden;
}
.lrs-svc-desc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.lrs-svc-desc > summary::-webkit-details-marker { display: none; }
.lrs-svc-desc > summary:hover { color: var(--accent); }
.lrs-svc-desc__caret { color: var(--ink-3); transition: transform .2s ease; flex: none; }
.lrs-svc-desc[open] > summary .lrs-svc-desc__caret { transform: rotate(180deg); }
.lrs-svc-desc__body { padding: 0 18px 18px; }
.lrs-svc-desc__body p { color: var(--ink-2); line-height: 1.6; margin: 0 0 12px; max-width: 72ch; }
.lrs-svc-desc__body p:last-child { margin-bottom: 0; }

/* Service-detail "Pick your device" closer — image + copy + CTAs.
   Sits at the bottom of every /service/{slug}/ page, above the final CTA. */
.lrs-svc-pick {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: center;
}
.lrs-svc-pick__media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
  background: var(--bg-soft);
  aspect-ratio: 4 / 3;
  max-width: 360px;
  width: 100%;
}
.lrs-svc-pick__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrs-svc-pick__copy { padding: 4px 0; }
.lrs-svc-pick__points {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lrs-svc-pick__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.lrs-svc-pick__points li svg { flex: 0 0 auto; }
.lrs-svc-pick__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 980px) {
  /* Stacked: centre the whole block instead of left-hugging with empty space. */
  .lrs-svc-pick { grid-template-columns: 1fr; gap: 28px; align-items: start; text-align: center; }
  .lrs-svc-pick__media { max-width: 420px; margin: 0 auto; aspect-ratio: 4 / 3; min-height: 0; }
  .lrs-svc-pick__copy { align-self: start; max-width: 600px; margin: 0 auto; }
  .lrs-svc-pick__copy .lede { margin-left: auto; margin-right: auto; }
  .lrs-svc-pick__points { align-items: center; }
  .lrs-svc-pick__points li { justify-content: center; }
  .lrs-svc-pick__ctas { justify-content: center; }
}
@media (max-width: 600px) {
  .lrs-svc-pick__media { max-width: none; aspect-ratio: 4 / 3; }
  .lrs-svc-pick__ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* Service-detail CTA row.
   Desktop: row of buttons that wraps naturally.
   Mobile (<=720px): clean 2x2 grid so all four buttons line up neatly. */
.lrs-svc-ctas {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.lrs-svc-ctas .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .lrs-svc-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .lrs-svc-ctas .btn {
    white-space: normal;          /* allow wrapping if content is long */
    text-align: center;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
}

.lrs-svc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.lrs-svc-stat {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  min-width: 0;
  overflow: hidden;
}
.lrs-svc-stat .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.lrs-svc-stat .val {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1.1;
  word-break: break-word;
}
@media (max-width: 700px) {
  .lrs-svc-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lrs-svc-stat { padding: 14px 16px; }
  .lrs-svc-stat .val { font-size: 22px; }
  .lrs-svc-stat .lbl { font-size: 10px; }
}

/* ============================================================
   Find Us / Contact map+info grid (home + contact page)
   ============================================================ */
.lrs-find-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.lrs-find-map {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
  background: #E6EBFF;
  min-height: 480px;
}
.lrs-find-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
}

/* Compact variant — used on /repair/{brand}/ + /repair/{brand}/{model}/.
   Roughly half the full-page height; tighter info paddings. */
.section--find-compact { padding-top: 48px; padding-bottom: 56px; }
.lrs-find-grid--compact .lrs-find-map { min-height: 240px; }
.lrs-find-grid--compact .lrs-find-map iframe { min-height: 240px; }
.lrs-find-grid--compact .lrs-find-block { padding: 14px 20px; }
.lrs-find-grid--compact .lrs-find-block .lbl { margin-bottom: 6px; }
.lrs-find-grid--compact .lrs-find-block .val { font-size: 14px; line-height: 1.45; }
.lrs-find-grid--compact .lrs-find-status { margin-top: 4px; }
.lrs-find-info {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  color: var(--ink);
}
.lrs-find-block {
  padding: 24px 28px;
  border-bottom: 1px solid var(--rule);
}
.lrs-find-block:last-child { border-bottom: 0; }
.lrs-find-block .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lrs-find-block .val {
  font-family: var(--f-sans);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5;
  font-weight: 500;
}
.lrs-find-block .val a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color .15s ease;
}
.lrs-find-block .val a:hover { border-bottom-color: var(--accent); }
.lrs-find-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ok);
  font-weight: 600;
  font-size: 13px;
  margin-top: 8px;
}
.lrs-find-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31,143,95,.18);
}
/* CTA button column inside the find-us info card — uses real .btn styling
   so the buttons match the rest of the site (rounded corners, shadow, hover lift). */
.lrs-find-cta {
  padding: 20px 24px 24px;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lrs-find-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid;
  border-radius: var(--r-1);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.lrs-find-cta a:hover { transform: translateY(-1px); }
.lrs-find-cta .btn--directions {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(36,82,245,.55);
}
.lrs-find-cta .btn--directions:hover {
  box-shadow: 0 12px 28px -8px rgba(36,82,245,.65);
  transform: translateY(-2px);
}
.lrs-find-cta .btn--phone {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.lrs-find-cta .btn--phone:hover { background: var(--ink); color: #fff; }
.lrs-find-cta .btn--whatsapp {
  background: #16A34A;
  color: #fff;
  border-color: #16A34A;
  box-shadow: 0 12px 28px -10px rgba(22,163,74,.6);
}
.lrs-find-cta .btn--whatsapp:hover {
  background: #138A3F;
  border-color: #138A3F;
  transform: translateY(-2px);
}

/* Brand pill overlay on the map */
.lrs-find-brand-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(14,16,20,.10);
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(14,16,20,.25);
}
.lrs-find-brand-pill .mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  box-shadow: 0 4px 10px rgba(36,82,245,.35);
}
.lrs-find-brand-pill .name {
  display: flex; flex-direction: column; line-height: 1.1;
}
.lrs-find-brand-pill .name strong { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.lrs-find-brand-pill .name small { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }

@media (max-width: 1080px) {
  .lrs-find-grid { grid-template-columns: 1fr; gap: 16px; }
  .lrs-find-map { min-height: 360px; }
  .lrs-find-map iframe { min-height: 360px; }
}
@media (max-width: 600px) {
  .lrs-find-block { padding: 18px 20px; }
  .lrs-find-block .val { font-size: 15px; }
  .lrs-find-cta a { padding: 14px 18px; }
  .lrs-find-brand-pill { top: 10px; right: 10px; padding: 6px 12px 6px 6px; }
  .lrs-find-brand-pill .mark { width: 24px; height: 24px; font-size: 11px; }
  .lrs-find-brand-pill .name strong { font-size: 12px; }
  .lrs-find-brand-pill .name small { font-size: 9px; }
}

/* ============================================================
   Contact form (under the map + info)
   ============================================================ */
.lrs-contact-form-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}
.lrs-contact-form-wrap .head { margin-bottom: 24px; }
.lrs-contact-form-wrap .head h2 { font-size: 24px; margin: 0 0 8px; }
.lrs-contact-form-wrap .head .desc { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0; }
.lrs-contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lrs-contact-form-grid .full { grid-column: 1 / -1; }
.lrs-contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lrs-contact-form .field label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.lrs-contact-form .field input,
.lrs-contact-form .field select,
.lrs-contact-form .field textarea {
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  font-family: inherit;
  font-size: 15px;
  background: var(--bg-elev);
  color: var(--ink);
  transition: border-color .12s ease;
}
.lrs-contact-form .field textarea { min-height: 120px; resize: vertical; }
.lrs-contact-form .field input:focus,
.lrs-contact-form .field select:focus,
.lrs-contact-form .field textarea:focus { outline: 0; border-color: var(--ink); }
.lrs-contact-form .actions {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lrs-contact-form .actions .note {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lrs-contact-form .lrs-msg-success,
.lrs-contact-form .lrs-msg-error {
  padding: 14px 18px;
  border-radius: var(--r-2);
  font-size: 14px;
  margin-bottom: 16px;
}
.lrs-contact-form .lrs-msg-success { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }
.lrs-contact-form .lrs-msg-error   { background: #FEE2E2; color: #DC2626; border: 1px solid #DC2626; }

@media (max-width: 700px) {
  .lrs-contact-form-grid { grid-template-columns: 1fr; }
  .lrs-contact-form-wrap { padding: 24px 20px; }
}

/* ============================================================
   Contact / About hero — text left + photo right (desktop),
   stacks to text-only on mobile (no whitespace fix needed there)
   ============================================================ */
.lrs-contact-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;     /* anchor image to the top, not centered */
}
.lrs-contact-hero.has-img {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
}
.lrs-contact-hero__text { min-width: 0; }
.lrs-contact-hero__img {
  margin: 0;
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  background: #0E1014;
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 10;
  max-height: 280px;
  width: 100%;
}
.lrs-contact-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lrs-contact-hero__img figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 20px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .85) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}
.lrs-contact-hero__img figcaption .cap {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lrs-contact-hero__img figcaption .meta {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .75);
}
@media (max-width: 900px) {
  .lrs-contact-hero.has-img { grid-template-columns: 1fr; }
  .lrs-contact-hero__img { display: none; }  /* mobile: skip the photo, hero text is enough */
}

/* ============================================================
   Contact-page image row — team banner (left, wider) + storefront
   (right, narrower). Both same horizontal line, same height on desktop.
   Mobile: only team banner.
   ============================================================ */
.lrs-contact-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.lrs-contact-images.has-store {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.lrs-contact-images__team,
.lrs-contact-images__store {
  margin: 0;
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  background: #0E1014;
  border: 1px solid var(--rule);
  /* Same explicit height on both so they line up exactly */
  height: 420px;
}
.lrs-contact-images__team img,
.lrs-contact-images__store img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lrs-contact-images figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 22px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .8) 70%, rgba(0, 0, 0, .92) 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  color: #fff;
}
.lrs-contact-images__team figcaption .cap {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 48ch;
  line-height: 1.35;
}
.lrs-contact-images__store figcaption .cap {
  font-size: 14px;
  font-weight: 600;
}
.lrs-contact-images figcaption .meta {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .lrs-contact-images.has-store { grid-template-columns: 1fr; }
  .lrs-contact-images__store { display: none; }
  .lrs-contact-images__team { height: auto; aspect-ratio: 4 / 3; }
  .lrs-contact-images__team figcaption .cap { font-size: 15px; }
  .lrs-contact-images figcaption { padding: 16px 18px 14px; }
}

/* ============================================================
   Shop-photo strip (about page) — compact 3-up gallery
   ============================================================ */
.lrs-shop-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lrs-shop-tile {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-2);
  overflow: hidden;
  background: #0E1014;
  border: 1px solid var(--rule);
}
.lrs-shop-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lrs-shop-tile__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(36, 82, 245, .22), transparent 55%),
    linear-gradient(135deg, #1A1D24 0%, #05070B 100%);
}
.lrs-shop-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .82) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}
.lrs-shop-tile figcaption .cap {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lrs-shop-tile figcaption .meta {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .7);
}
@media (max-width: 900px) {
  .lrs-shop-strip { grid-template-columns: 1fr 1fr; }
  .lrs-shop-tile:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .lrs-shop-strip { grid-template-columns: 1fr; }
  .lrs-shop-tile, .lrs-shop-tile:nth-child(3) { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Refurbished — listing + product page (NEW v3)
   ============================================================ */
.lrs-refurb-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
/* Refurb sidebar filter — same card styling as the brand-page side menu
   (lrs-series-side): white card, sticky, mono-caps section heads, pill-style
   options that fill with accent when checked. */
.lrs-refurb-filter {
  position: sticky;
  top: 96px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}
.lrs-refurb-filter__group {
  border-top: 1px solid var(--rule);
  padding: 0;
}
.lrs-refurb-filter__group:first-child { border-top: 0; }
.lrs-refurb-filter__group > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
}
.lrs-refurb-filter__group > summary::-webkit-details-marker { display: none; }
.lrs-refurb-filter__group > summary .title {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 500;
}
.lrs-refurb-filter__group > summary .caret {
  font-family: var(--f-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
  transition: transform .15s ease;
  width: 16px;
  text-align: center;
}
.lrs-refurb-filter__group[open] > summary .caret { transform: rotate(45deg); }
.lrs-refurb-filter__group > summary:hover .title,
.lrs-refurb-filter__group > summary:hover .caret { color: var(--ink); }

.lrs-refurb-filter__opts {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lrs-refurb-filter label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 14px;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lrs-refurb-filter label:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.lrs-refurb-filter label:has(input:checked) {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-color: rgba(36, 82, 245, .15);
}
.lrs-refurb-filter input[type="checkbox"],
.lrs-refurb-filter input[type="radio"] {
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* Mobile: filter sits above the cards, no sticky, options as 2-col grid */
@media (max-width: 1080px) {
  .lrs-refurb-filter {
    position: static;
    max-height: none;
  }
  .lrs-refurb-filter__group > summary { padding: 12px 16px 10px; }
  .lrs-refurb-filter__group > summary .title { font-size: 11px; }
  .lrs-refurb-filter__group > summary .caret { font-size: 20px; }
  .lrs-refurb-filter__opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .lrs-refurb-filter label { padding: 8px 10px; font-size: 13px; }
}

.lrs-refurb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lrs-refurb-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: border-color .18s ease, transform .2s ease, box-shadow .25s ease;
  text-decoration: none;
  color: var(--ink);
}
.lrs-refurb-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(36,82,245,.35);
}
.lrs-refurb-card .img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #2A2F3C 0%, #14171E 60%, #0A0C10 100%);
  position: relative;
  display: grid;
  place-items: center;
}
.lrs-refurb-card .tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-weight: 500;
}
.lrs-refurb-card .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.lrs-refurb-card .brand {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lrs-refurb-card h3 { font-size: 17px; margin: 4px 0 8px; }
.lrs-refurb-card .specs {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 14px;
}
.lrs-refurb-card .price-row {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.lrs-refurb-card .price-from {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lrs-refurb-card .price {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lrs-refurb-card .rrp {
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: line-through;
  margin-left: 6px;
}

.lrs-refurb-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1080px) {
  .lrs-refurb-grid { grid-template-columns: 1fr; }
  .lrs-refurb-filter { position: static; }
  .lrs-refurb-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .lrs-refurb-cards { grid-template-columns: 1fr; }
  .lrs-refurb-tiers { grid-template-columns: 1fr; }
}

/* Refurbished product page */
.lrs-refurb-prod {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
.lrs-refurb-prod__gallery {
  position: sticky;
  top: 90px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #2A2F3C 0%, #14171E 60%, #0A0C10 100%);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
}
.lrs-refurb-prod__cond {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px 0;
}
.lrs-refurb-prod__cond-card {
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease;
  display: block;
  text-align: left;
  background: var(--bg-elev);
}
.lrs-refurb-prod__cond-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lrs-refurb-prod__cond-card .label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.lrs-refurb-prod__cond-card .price {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}
.lrs-refurb-prod__cond-card .meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}

.lrs-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
}
.lrs-spec-table tr { border-bottom: 1px solid var(--rule); }
.lrs-spec-table tr:last-child { border-bottom: 0; }
.lrs-spec-table td {
  padding: 12px 16px;
  font-size: 14px;
  vertical-align: top;
}
.lrs-spec-table td:first-child {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  width: 40%;
  background: var(--bg-soft);
}

@media (max-width: 1080px) {
  .lrs-refurb-prod { grid-template-columns: 1fr; }
  .lrs-refurb-prod__gallery { position: static; }
}

/* Brand page layout — sidebar (series filter) + main grid on desktop,
   stacked single-column on mobile with horizontal pill strip at top. */
.lrs-brand-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.lrs-brand-layout__main { min-width: 0; }

.lrs-series-side {
  position: sticky;
  top: 96px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}
.lrs-series-side__head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-soft);
}
.lrs-series-side__head .eyebrow { font-size: 10px; }
.lrs-series-side__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lrs-series-side__total {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.lrs-series-side__list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  overflow-y: auto;
  min-height: 0;
}
.lrs-series-side__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
  border: 1px solid transparent;
}
.lrs-series-side__list a:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.lrs-series-side__list a.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-color: rgba(36, 82, 245, 0.15);
}
.lrs-series-side__name { flex: 1 1 auto; min-width: 0; }
.lrs-series-side__count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  flex: 0 0 auto;
}
.lrs-series-side__list a.is-active .lrs-series-side__count {
  background: rgba(255,255,255,.7);
  border-color: rgba(36, 82, 245, 0.18);
  color: var(--accent);
}

/* Below 1080px the sidebar collapses to a horizontal pill strip at the top. */
@media (max-width: 1080px) {
  .lrs-brand-layout { grid-template-columns: 1fr; gap: 24px; }
  .lrs-series-side { position: static; max-height: none; }
  .lrs-series-side__head { display: none; }
  /* When a series filter is active, surface the Clear button on mobile by
     re-showing the head (compact, just the Clear button — total hidden). */
  .lrs-series-side:has([data-series-clear]:not([hidden])) .lrs-series-side__head {
    display: flex;
    padding: 10px 14px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .lrs-series-side:has([data-series-clear]:not([hidden])) .lrs-series-side__head .eyebrow,
  .lrs-series-side:has([data-series-clear]:not([hidden])) .lrs-series-side__total { display: none; }
  .lrs-series-side:has([data-series-clear]:not([hidden])) .lrs-series-side__head-top {
    flex: 1; justify-content: flex-end;
  }
  .lrs-series-side__list {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 4px;
    overflow-y: visible;
    gap: 6px;
  }
  .lrs-series-side__list a {
    padding: 7px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 13px;
  }
  .lrs-series-side__list a.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .lrs-series-side__list a.is-active .lrs-series-side__count {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.25);
    color: #fff;
  }
}

/* Legacy class kept as a no-op alias since combo page uses .lrs-series-jump
   inline (single-link tag in the sibling strip). */
.lrs-series-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-elev);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  margin: 4px 4px 0 0;
}
.lrs-series-jump:hover { border-color: var(--ink-3); color: var(--ink); }

.lrs-series-block { padding: 36px 0; border-top: 1px solid var(--rule); scroll-margin-top: 100px; }
.lrs-series-block:first-of-type { border-top: 0; padding-top: 4px; }
.lrs-series-block__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.lrs-series-block__head h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.lrs-series-block__count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   Brand page — 4-col model card grid (replaces the row list)
   ============================================================ */
.lrs-models-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.lrs-models-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lrs-models-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  border-color: var(--ink-3);
}
.lrs-models-card__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.lrs-models-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrs-models-card.is-placeholder .lrs-models-card__media {
  background: linear-gradient(135deg, hsl(var(--ph-hue), 55%, 38%) 0%, hsl(calc(var(--ph-hue) + 30), 60%, 28%) 100%);
}
.lrs-models-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.lrs-models-card__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.lrs-models-card__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
@media (max-width: 1080px) { .lrs-models-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .lrs-models-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ============================================================
   Model hub — 2-col hero (copy + image) + 4-col service card grid
   ============================================================ */
.lrs-model-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 48px;
  align-items: start;
}
.lrs-model-hero__copy { min-width: 0; }
.lrs-model-hero__media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  position: relative;
  width: 100%;
}
.lrs-model-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrs-model-hero__media.is-placeholder {
  background: linear-gradient(135deg, hsl(var(--ph-hue), 55%, 38%) 0%, hsl(calc(var(--ph-hue) + 30), 60%, 28%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lrs-model-hero__media .placeholder-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
}
.lrs-model-hero__media .placeholder-label {
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lrs-model-hero__media .placeholder-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.lrs-models-card.is-placeholder .placeholder-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
@media (max-width: 1080px) {
  .lrs-model-hero { grid-template-columns: 1fr; gap: 28px; }
  .lrs-model-hero__media { max-width: 540px; margin-left: auto; margin-right: auto; }
}

/* Collapsible model lede — short summary by default, "+ Read more" reveals the
   rest. Keeps the hero compact on mobile (where the full SEO blurb would dominate). */
.lrs-model-lede { position: relative; }
.lrs-model-lede__toggle {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  vertical-align: baseline;
}
.lrs-model-lede__toggle:hover { background: var(--bg-soft); border-color: var(--ink); }
.lrs-model-lede__toggle-plus {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease;
}
.lrs-model-lede__toggle[aria-expanded="true"] .lrs-model-lede__toggle-plus { transform: rotate(45deg); }
@media (max-width: 720px) {
  .lrs-model-lede { font-size: 14px !important; line-height: 1.55 !important; }
}

/* Two-line H1: "{Model} repair" / "done properly." — sized so longer model names
   stay on one line within the hero copy column */
.lrs-model-h1 {
  font-size: clamp(34px, 3.4vw, 60px);
  line-height: 1.0;
  text-wrap: pretty;
}
.lrs-model-h1__line,
.lrs-model-h1__sub  { display: inline; }
@media (max-width: 1080px) {
  .lrs-model-h1 { font-size: clamp(34px, 5.6vw, 56px); }
}

/* Full-width model intro paragraph — sits between hero and service cards */
.lrs-model-intro { max-width: none; text-align: center; }
.lrs-model-intro p { max-width: none; margin: 0; }

/* Long-form blurb: 2-col walk-in + national. Each card is its own panel. */
.lrs-model-blurb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.lrs-model-blurb__col {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.lrs-model-blurb__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.lrs-model-blurb__col h3 {
  margin: 0 0 12px;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.lrs-model-blurb__col p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.lrs-model-blurb__bullets {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 8px;
}
.lrs-model-blurb__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.lrs-model-blurb__bullets svg { color: var(--accent); flex: 0 0 auto; margin-top: 3px; }

@media (max-width: 1080px) {
  .lrs-model-blurb { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lrs-model-blurb__col { padding: 24px; }
}

/* FAQ list — 2 columns on desktop (≥1024px), single column on mobile.
   Applies site-wide so home, model, services, build pages all match. */
.lrs-model-faq-wrap { max-width: 1280px; margin: 0 auto; }
@media (min-width: 1024px) {
  .lrs-faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }
  /* Each <details> already has a bottom border; no top border needed for top row */
  .lrs-faq-list > details:nth-child(-n+2) { border-top: 0; }
}

/* Model hero buttons (in the copy column): stacked vertically */
.lrs-model-hero__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.lrs-model-hero__btn-primary { width: 100%; justify-content: center; }
.lrs-model-hero__btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lrs-model-hero__btn-row .btn { justify-content: center; }
@media (max-width: 480px) {
  .lrs-model-hero__btn-row { grid-template-columns: 1fr; }
}

/* Trust grid — sits inside the side column under the image + review badge.
   2x2 on every breakpoint so it stays compact like a "card row". */
.lrs-model-trust {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
@media (max-width: 480px) {
  .lrs-model-trust { grid-template-columns: 1fr; }
}
.lrs-model-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
}
.lrs-model-trust li b { font-size: 13px; line-height: 1.25; }
.lrs-model-trust li em { font-size: 10px; }
.lrs-model-trust li svg { color: var(--accent); flex: 0 0 auto; }
.lrs-model-trust li > span:not(.lrs-model-trust__deco) { flex: 1 1 auto; min-width: 0; }
.lrs-model-trust__deco {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background-color .2s ease;
}
.lrs-model-trust__deco svg { color: var(--accent); width: 18px; height: 18px; }
.lrs-model-trust li:hover .lrs-model-trust__deco { background: rgba(36, 82, 245, .08); }

/* Animations — slow + subtle so they read as alive, not noisy */
@keyframes lrs-trust-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes lrs-trust-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes lrs-trust-spin {
  to { transform: rotate(360deg); }
}
@keyframes lrs-trust-flash {
  0%, 60%, 100% { opacity: 1; transform: scale(1); }
  70%           { opacity: .55; transform: scale(.92); }
  80%           { opacity: 1;   transform: scale(1.12); }
}
.lrs-model-trust__deco[data-anim="pulse"] svg { animation: lrs-trust-pulse 2.4s ease-in-out infinite; }
.lrs-model-trust__deco[data-anim="float"] svg { animation: lrs-trust-float 3.2s ease-in-out infinite; }
.lrs-model-trust__deco[data-anim="spin"]  svg { animation: lrs-trust-spin  6s   linear        infinite; }
.lrs-model-trust__deco[data-anim="flash"] svg { animation: lrs-trust-flash 3s   ease-in-out   infinite; }
@media (prefers-reduced-motion: reduce) {
  .lrs-model-trust__deco svg { animation: none !important; }
}
.lrs-model-trust li span:not(.lrs-model-trust__deco) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lrs-model-trust li b { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.lrs-model-trust li em {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 1080px) {
  .lrs-model-hero__data { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .lrs-model-trust { grid-template-columns: 1fr; }
}

/* Service cards on the model hub — 4-up grid, each linking to a /repair/brand/model/service/ page */
.lrs-model-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.lrs-model-service-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lrs-model-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  border-color: var(--ink-3);
}
.lrs-model-service-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.lrs-model-service-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lrs-model-service-card__name { font-size: 15px; font-weight: 600; }
.lrs-model-service-card__short {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 2px;
}
.lrs-model-service-card__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lrs-model-service-card__meta .price { font-weight: 700; }
.lrs-model-service-card__meta .turn { color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.lrs-model-service-card__arrow { color: var(--ink-3); }
.lrs-model-service-card:hover .lrs-model-service-card__arrow { color: var(--accent); }

@media (max-width: 720px) {
  .lrs-model-services { grid-template-columns: 1fr; }
  .lrs-model-service-card { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 14px 16px; }
  .lrs-model-service-card__icon { width: 44px; height: 44px; }
  .lrs-model-service-card__short { display: none; }
}

/* Brand-page hero: 2-col on desktop (copy left, review badge right) */
.lrs-brand-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.lrs-brand-hero__lead { min-width: 0; }
.lrs-brand-hero__aside { justify-self: end; min-width: 0; }
@media (max-width: 1080px) {
  .lrs-brand-hero { grid-template-columns: 1fr; gap: 24px; }
  .lrs-brand-hero__aside { justify-self: center; width: 100%; display: flex; justify-content: center; }
}

/* Model-page hero side column: image (bigger now) → review badge → 2x2 trust grid */
.lrs-model-hero__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
.lrs-model-hero__rev { width: 100%; display: flex; justify-content: stretch; }
.lrs-model-hero__rev .lrs-rev-badge { max-width: none; }
@media (max-width: 1080px) {
  .lrs-model-hero__side { gap: 14px; max-width: 540px; margin-left: auto; margin-right: auto; }
}

/* Google review badge — hero-row filler. Slim variant collapses on mobile. */
.lrs-rev-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.lrs-rev-badge:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.lrs-rev-badge__g {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.lrs-rev-badge__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lrs-rev-badge__row { display: inline-flex; align-items: center; gap: 8px; }
.lrs-rev-badge__score { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.lrs-rev-badge__sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-rev-badge__cta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.lrs-rev-badge__cta svg { color: var(--accent); }

/* Slim variant on mobile: drop the trailing CTA pill, tighten paddings, centre the pill */
@media (max-width: 720px) {
  .lrs-rev-badge {
    padding: 10px 14px;
    gap: 10px;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .lrs-rev-badge__g { width: 32px; height: 32px; }
  .lrs-rev-badge__g svg { width: 18px; height: 18px; }
  .lrs-rev-badge__score { font-size: 15px; }
  .lrs-rev-badge__cta { display: none; }
}

/* Inline service sections on the model hub — 2 cols on desktop, 1 on mobile.
   Each card is white, lifts subtly on hover, anchor-target safe. */
.lrs-model-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .lrs-model-services-grid { grid-template-columns: 1fr; }
}
.lrs-model-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    "meta cta";
  gap: 12px 16px;
  align-items: center;
  padding: 22px 24px;
  margin: 0;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 16px;
  scroll-margin-top: 100px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.lrs-model-section:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
  box-shadow: 0 12px 28px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
}
.lrs-model-section__head {
  grid-area: head;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.lrs-model-section__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.lrs-model-section__title { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.lrs-model-section__sub  { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; max-width: 60ch; }
.lrs-model-section__meta {
  grid-area: meta;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-self: center;
}
.lrs-model-section__meta > div { display: flex; flex-direction: column; gap: 1px; }
.lrs-model-section__meta .lbl {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-model-section__meta .val { font-size: 13px; font-weight: 600; }
.lrs-model-section__cta {
  grid-area: cta;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-self: center;
  justify-self: end;
}
.lrs-model-section__cta .btn { padding: 8px 14px; font-size: 13px; }

/* Narrow cards (single-col mobile or very tight 2-col) — drop CTAs below meta */
@media (max-width: 540px) {
  .lrs-model-section {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "meta"
      "cta";
  }
  .lrs-model-section__cta { justify-self: start; }
}

/* Numbered repair-step list on the model+service combo page */
.lrs-svc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lrs-svc-step;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 64ch;
}
.lrs-svc-steps li {
  position: relative;
  padding-left: 56px;
  counter-increment: lrs-svc-step;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.lrs-svc-steps li::before {
  content: counter(lrs-svc-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
}
.lrs-svc-steps li strong { color: var(--ink); }

/* ============================================================
   Build — preset cards + configurator (NEW v3)
   ============================================================ */
.lrs-build-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1280px) { .lrs-build-presets { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.lrs-build-preset {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
.lrs-build-preset.is-popular {
  border-color: var(--accent);
  border-width: 2px;
}
.lrs-build-preset .pop-badge {
  /* Top-centre ribbon so it doesn't fight either corner element (icon left, case-thumb right) */
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  z-index: 2;
  white-space: nowrap;
}
/* Case thumbnail — sits in the top-right corner of every preset card,
   sized + positioned to mirror the .ic-frame icon at the top-left of the
   header (48x48, aligned to the header's 32px top / 28px right padding). */
.lrs-build-preset__case {
  position: absolute;
  top: 32px;
  right: 28px;
  width: 48px;
  height: 48px;
  z-index: 1;
  pointer-events: none;
}
.lrs-build-preset__case img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 4px;
  display: block;
}
@media (max-width: 720px) {
  .lrs-build-preset__case { top: 28px; right: 22px; width: 44px; height: 44px; }
  .lrs-build-preset .header { padding-right: 84px; }
}
.lrs-build-preset .header { padding: 32px 28px 24px; }
.lrs-build-preset .ic-frame {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.lrs-build-preset h3 { font-size: 24px; margin: 0 0 6px; }
.lrs-build-preset .tagline { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.lrs-build-preset .body {
  padding: 0 28px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 16px;
}
.lrs-build-preset .parts {
  padding: 0 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 24px;
}
.lrs-build-preset .price-row {
  padding: 24px 28px;
  border-top: 1px solid var(--rule);
  background: var(--bg-elev);
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lrs-build-preset .price-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3);
  background: var(--bg);
  margin-bottom: 8px;
}
.lrs-build-preset .price {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
}
.lrs-build-preset .price small {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}

/* "How we build" 4-step grid — re-uses .lrs-process structure */
.lrs-build-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--bg-elev);
}
.lrs-build-steps .step {
  padding: 28px;
  border-right: 1px solid var(--rule);
}
.lrs-build-steps .step:last-child { border-right: 0; }
.lrs-build-steps .step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.lrs-build-steps .ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.lrs-build-steps .num {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
}
.lrs-build-steps h4 { font-size: 17px; margin: 0 0 8px; font-weight: 600; letter-spacing: -0.01em; }
.lrs-build-steps p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; }
@media (max-width: 1080px) {
  .lrs-build-steps { grid-template-columns: 1fr 1fr; }
  .lrs-build-steps .step:nth-child(2) { border-right: 0; }
  .lrs-build-steps .step:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .lrs-build-steps .step { padding: 20px 16px; }
  .lrs-build-steps h4 { font-size: 15px; }
  .lrs-build-steps p { font-size: 13px; }
}

/* Guarantees 4-up strip */
.lrs-build-guarantees {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.lrs-build-guarantee {
  display: flex;
  gap: 14px;
  align-items: start;
}
.lrs-build-guarantee .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.lrs-build-guarantee h5 { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.lrs-build-guarantee p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0; }
@media (max-width: 1080px) { .lrs-build-guarantees { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 600px) {
  .lrs-build-guarantees { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 1080px) { .lrs-build-presets { grid-template-columns: 1fr; } }

/* ============================================================
   Behind-the-scenes video gallery — 3-up vertical video cards.
   Used on home and /custom-build-computer/. Each card is a placeholder until
   the admin drops a poster JPG at /assets/img/bts/{slug}.jpg + wires href.
   ============================================================ */
.lrs-bts-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  max-width: 60ch;
}
.lrs-bts-head .h-section { margin: 0; }
.lrs-bts-head .lede { margin: 0; color: var(--ink-2); }

.lrs-bts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lrs-bts__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
a.lrs-bts__card:hover .lrs-bts__thumb { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
a.lrs-bts__card:hover .lrs-bts__play  { transform: translate(-50%, -50%) scale(1.05); }

.lrs-bts__thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-2);
  overflow: hidden;
  background: #1A1D24;
  display: block;
  transition: transform .25s ease, box-shadow .25s ease;
  isolation: isolate;
}
.lrs-bts__thumb img,
.lrs-bts__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.lrs-bts__thumb::after {
  /* Subtle grain + vignette so the gradient placeholder reads richer */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.45) 100%);
  z-index: 2;
  pointer-events: none;
}
.lrs-bts__label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.18);
  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lrs-bts__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #DC2626;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.lrs-bts__play svg { margin-left: 3px; } /* visual centre of triangle */
.lrs-bts__anno {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.lrs-bts__caption {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 1080px) {
  .lrs-bts { grid-template-columns: repeat(2, 1fr); }
  .lrs-bts__card:nth-child(3) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .lrs-bts__card:nth-child(3) .lrs-bts__thumb { aspect-ratio: 1 / 1; max-width: 280px; flex: 0 0 40%; }
}
@media (max-width: 600px) {
  .lrs-bts { grid-template-columns: 1fr; gap: 22px; }
  /* Reset 3rd-card overrides from the ≤1080 breakpoint so it stacks
     identically to cards 1 and 2 on mobile. */
  .lrs-bts__card:nth-child(3) {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .lrs-bts__card:nth-child(3) .lrs-bts__thumb {
    aspect-ratio: 4 / 5;
    max-width: none;
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ============================================================
   Build USP cards — restyled trust-stat aesthetic, 4-up above hero
   ============================================================ */
.lrs-build-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.lrs-build-usp__card {
  padding: 22px 22px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lrs-build-usp__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  align-self: flex-start;
}
.lrs-build-usp__val {
  font-family: var(--f-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 4px;
}
.lrs-build-usp__lbl {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 1080px) { .lrs-build-usp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .lrs-build-usp { grid-template-columns: 1fr; } }

/* ============================================================
   Brand wordmark strip ("Brands we work with") — text fallback that
   swaps to real licensed logos when files are dropped in.
   ============================================================ */
.lrs-brandstrip-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  max-width: 60ch;
}
.lrs-brandstrip-head .h-section { margin: 0; }
.lrs-brandstrip-head .lede { margin: 0; color: var(--ink-2); font-size: 14px; }
.lrs-brandstrip-head code {
  font-size: 11px;
  background: var(--bg-elev);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--rule);
}

.lrs-brandstrip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.lrs-brandstrip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 14px;
  border-right: 1px solid var(--rule);
  min-height: 88px;
  filter: grayscale(1);
  opacity: .7;
  transition: opacity .15s ease, filter .15s ease;
}
.lrs-brandstrip__item:last-child { border-right: 0; }
.lrs-brandstrip__item:hover { opacity: 1; filter: grayscale(0); }
.lrs-brandstrip__item img {
  max-height: 36px;
  max-width: 110px;
  height: auto;
  width: auto;
}
.lrs-brandstrip__wordmark {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  user-select: none;
}
@media (max-width: 1080px) {
  .lrs-brandstrip { grid-template-columns: repeat(4, 1fr); }
  .lrs-brandstrip__item:nth-child(4) { border-right: 0; }
  .lrs-brandstrip__item:nth-child(-n+4) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .lrs-brandstrip { grid-template-columns: repeat(2, 1fr); }
  .lrs-brandstrip__item { min-height: 72px; padding: 20px 10px; }
  .lrs-brandstrip__item:nth-child(2n) { border-right: 0; }
  .lrs-brandstrip__item:nth-child(-n+6) { border-bottom: 1px solid var(--rule); }
}

/* ============================================================
   Blog cards on home — 3-up grid linking to latest posts
   ============================================================ */
.lrs-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lrs-blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lrs-blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink-3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}
.lrs-blog-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1A1D24;
}
.lrs-blog-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lrs-blog-card__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lrs-blog-card__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.lrs-blog-card__date {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.lrs-blog-card__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.lrs-blog-card__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lrs-blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-top: auto;
  padding-top: 6px;
}
@media (max-width: 1080px) { .lrs-blog-grid { grid-template-columns: 1fr 1fr; } .lrs-blog-grid > :nth-child(3) { display: none; } }
@media (max-width: 700px)  { .lrs-blog-grid { grid-template-columns: 1fr; } .lrs-blog-grid > :nth-child(3) { display: flex; } }

/* "Why build with us?" 3-up rationale tiles */
.lrs-build-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.lrs-build-why__card {
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--bg-elev);
}
.lrs-build-why__card .ic {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.lrs-build-why__card h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.lrs-build-why__card p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 1080px) { .lrs-build-why { grid-template-columns: 1fr; } }

/* Configurator: long-form full-width sections + fixed-bottom topbar + bottom summary.
   Bar is fixed to the bottom of the viewport on every viewport size — matches the
   cart sticky CTA pattern so the running total + Add to cart stays in thumb / mouse
   reach while the user scrolls the long configurator. */
.lrs-config-topbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lrs-config-topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.lrs-config-topbar__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.lrs-config-topbar__label {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.lrs-config-topbar__sub {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.lrs-config-topbar__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  flex: 0 0 auto;
}
.lrs-config-topbar__price-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-config-topbar__total {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lrs-config-topbar__cta { padding: 12px 22px; font-size: 14px; flex: 0 0 auto; }

/* Push configurator content up so the fixed-bottom bar doesn't sit on top
   of the last summary card. Desktop bar is ~80px tall, mobile slightly shorter. */
[data-config] { padding-bottom: 96px; }

/* Lift the floating phone / WhatsApp / cart pills above the new bottom bar
   so they stay tappable on the configurator page. */
body:has([data-config]) .lrs-float--phone,
body:has([data-config]) .lrs-float--wa,
body:has([data-config]) .lrs-float--cart { bottom: 100px; }

@media (max-width: 720px) {
  .lrs-config-topbar__inner {
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* "Custom Build" label is redundant at the bottom — kill it so the row
     reads as: price | Add to cart (matches the cart sticky bar layout). */
  .lrs-config-topbar__name { display: none; }
  .lrs-config-topbar__sub { display: none; }
  .lrs-config-topbar__price { flex: 1 1 auto; align-items: flex-start; }
  .lrs-config-topbar__total { font-size: 20px; }
  .lrs-config-topbar__cta { padding: 12px 18px; font-size: 14px; }
  .lrs-config-topbar__price-tag { font-size: 10px; }
  [data-config] { padding-bottom: 76px; }
  body:has([data-config]) .lrs-float--phone,
  body:has([data-config]) .lrs-float--wa,
  body:has([data-config]) .lrs-float--cart { bottom: 84px; }
}

/* Bottom summary card — every step + selection, click any row to scroll back. */
.lrs-config-summary {
  margin-top: 56px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg-elev) 50%);
  overflow: hidden;
}
.lrs-config-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.lrs-config-summary__totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.lrs-config-summary__total-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-config-summary__total {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.lrs-config-summary__sub {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lrs-config-summary__list { padding: 6px 0; }
.lrs-config-summary__row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 28px;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid transparent;
  transition: background .15s ease;
}
.lrs-config-summary__row + .lrs-config-summary__row { border-top-color: var(--rule); }
.lrs-config-summary__row:hover { background: var(--bg-soft); }
.lrs-config-summary__num {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--bg-elev);
}
.lrs-config-summary__step { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lrs-config-summary__step .step-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-config-summary__step .opt-name { font-size: 15px; font-weight: 600; }
.lrs-config-summary__step .opt-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}
.lrs-config-summary__price {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.lrs-config-summary__edit {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  opacity: 0;
  transition: opacity .15s ease;
}
.lrs-config-summary__row:hover .lrs-config-summary__edit { opacity: 1; }

.lrs-config-summary__row--auto,
.lrs-config-summary__row--labour,
.lrs-config-summary__row--draw {
  cursor: default;
  background: rgba(0,0,0,0.015);
}
.lrs-config-summary__row--auto .lrs-config-summary__price { color: #1F8F5F; }
.lrs-config-summary__row--draw .lrs-config-summary__price { color: var(--ink-3); font-weight: 500; }

.lrs-config-summary__foot {
  display: flex;
  justify-content: flex-end;
  padding: 24px 28px 28px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 720px) {
  .lrs-config-summary__head { padding: 20px; }
  .lrs-config-summary__totals { align-items: flex-start; text-align: left; }
  .lrs-config-summary__row { grid-template-columns: 28px 1fr auto; padding: 12px 18px; gap: 12px; }
  .lrs-config-summary__row .lrs-config-summary__edit { display: none; }
  .lrs-config-summary__num { width: 28px; height: 28px; font-size: 10px; }
  .lrs-config-summary__total { font-size: 28px; }
}
.lrs-config-rail__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lrs-config-rail__head .name { font-weight: 600; }
.lrs-config-rail__head .price { font-family: var(--f-mono); font-size: 18px; font-weight: 600; }
.lrs-config-rail__list { padding: 8px 12px; max-height: 60vh; overflow-y: auto; }
.lrs-config-rail__row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.lrs-config-rail__row.is-current { background: var(--accent-soft); }
.lrs-config-rail__row .step {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lrs-config-rail__row .opt {
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lrs-config-rail__row .price {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.lrs-config-rail__row--labour {
  border-top: 1px dashed var(--rule);
  margin-top: 6px;
  padding-top: 12px;
}
.lrs-config-rail__row--labour .step,
.lrs-config-rail__row--labour .opt { color: var(--ink-2); font-style: italic; }
.lrs-config-rail__row--auto {
  background: linear-gradient(90deg, rgba(31,143,95,.10), transparent);
  border-radius: 6px;
}
.lrs-config-rail__row--auto .step { color: #1F8F5F; }
.lrs-config-rail__row--auto .price { color: #1F8F5F; font-weight: 600; }
.lrs-config-rail__row--draw { color: var(--ink-3); }
.lrs-config-rail__row--draw .price { font-family: var(--f-mono); font-weight: 500; }

.lrs-config-step__head { margin-bottom: 24px; }
.lrs-config-step__head h2 { font-size: 28px; margin: 6px 0 0; }
.lrs-config-step__head .desc { color: var(--ink-2); margin: 8px 0 0; }

/* Long-form sections — one per build step, stacked vertically */
.lrs-config-section {
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 96px;
}
.lrs-config-section:first-of-type { padding-top: 8px; }
.lrs-config-section:last-of-type { border-bottom: none; }

/* Extras section — visually distinct from core build steps. Compact heads,
   subtler card backgrounds so the user reads it as "optional add-ons". */
.lrs-config-extras-banner {
  margin-top: 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--bg-soft) 0%, #ECEFF7 100%);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.lrs-config-extras-banner__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.lrs-config-extras-banner h2 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.lrs-config-extras-banner p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  max-width: 60ch;
}
.lrs-config-extras {
  margin-top: 16px;
  padding: 8px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.lrs-config-section--extras {
  padding: 22px 0;
  border-bottom: 1px dashed var(--rule);
}
.lrs-config-section--extras:last-of-type { border-bottom: none; }
.lrs-config-section--extras .lrs-config-step__head { margin-bottom: 14px; }
.lrs-config-section--extras .lrs-config-step__head h2 { font-size: 20px; }
.lrs-config-section--extras .lrs-config-section__num { color: var(--ink-3); opacity: .7; }
.lrs-config-section--extras .lrs-config-option { padding: 12px 14px; }
.lrs-config-section--extras .lrs-config-option .thumb { width: 84px; height: 84px; }
.lrs-config-section--extras .lrs-config-option { grid-template-columns: 84px 1fr auto; }
.lrs-config-section__num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Bottom CTA card highlight */
.lrs-config-bottom-cta { transition: border-color .2s ease; }

/* Step jump strip — one button per step.
   No horizontal scroll: only the active step shows its label, others shrink
   to a numbered circle so all 11 fit comfortably on every viewport. The strip
   wraps to a second line as a safety net at extremely narrow widths. */
.lrs-config-stepnav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 4px 2px 14px;
  margin-top: 32px;
  border-bottom: 1px solid var(--rule);
}
.lrs-config-stepnav__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-elev);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.lrs-config-stepnav__btn:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}
.lrs-config-stepnav__btn .num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  min-width: 14px;
  text-align: center;
}
.lrs-config-stepnav__btn .label {
  font-size: 13px;
  font-weight: 500;
}
.lrs-config-stepnav__btn.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lrs-config-stepnav__btn.is-current .num { color: rgba(255, 255, 255, .8); }
.lrs-config-stepnav__btn.is-done {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
}
.lrs-config-stepnav__btn.is-done .num { color: var(--accent); }
@media (max-width: 980px) {
  .lrs-config-stepnav { gap: 5px; padding: 4px 2px 12px; }
  .lrs-config-stepnav__btn { padding: 7px 12px; font-size: 12px; }
  .lrs-config-stepnav__btn .label { font-size: 12px; }
}
@media (max-width: 720px) {
  .lrs-config-stepnav { gap: 4px; padding: 4px 2px 10px; }
  .lrs-config-stepnav__btn { padding: 6px 10px; font-size: 11.5px; gap: 5px; }
  .lrs-config-stepnav__btn .label { font-size: 11.5px; }
  .lrs-config-stepnav__btn .num { font-size: 10px; min-width: 12px; }
}

.lrs-config-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lrs-config-option {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  background: var(--bg-elev);
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.lrs-config-option:hover { border-color: var(--ink-3); }
.lrs-config-option[aria-pressed="true"],
.lrs-config-option.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Incompatible option in the primary triangle (case/cpu/mobo) — clicking
   shows a confirm modal explaining what will auto-swap. The card itself
   stays the same size as compatible cards (no layout-jump on click); only
   colours + a small "Auto-adjusts" chip flag the difference. */
.lrs-config-option.is-incompat {
  border-color: #F0C97D;
  background: #FFFBEC;
}
.lrs-config-option.is-incompat:hover { border-color: #D38E1A; }
.lrs-config-option.is-incompat .thumb { opacity: .65; filter: grayscale(.4); }
.lrs-config-option.is-incompat .name,
.lrs-config-option.is-incompat .price-delta { color: var(--ink-2); }
/* Two-segment pill on incompat cards: red "INCOMPATIBLE" + amber action hint.
   Inline with the part name so the card height never changes. */
.lrs-config-option__chip {
  display: inline-flex;
  align-items: stretch;
  margin-left: 8px;
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid #F0C97D;
}
.lrs-config-option__chip .bad,
.lrs-config-option__chip .adj {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  line-height: 1.6;
}
.lrs-config-option__chip .bad {
  background: #C92A2A;
  color: #fff;
}
.lrs-config-option__chip .adj {
  background: #FCE8B6;
  color: #6B4505;
}
@media (max-width: 720px) {
  .lrs-config-option__chip { display: inline-flex; margin-left: 0; margin-top: 4px; }
}

/* Confirm modal — appears when user clicks an incompatible option */
.lrs-config-confirm {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lrs-config-confirm[style*="flex"] { display: flex !important; }
.lrs-config-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 28, .55);
  backdrop-filter: blur(2px);
}
.lrs-config-confirm__sheet {
  position: relative;
  background: var(--bg-elev);
  border-radius: 18px;
  padding: 36px 36px 32px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  animation: lrs-confirm-pop .18s ease-out;
}
@keyframes lrs-confirm-pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.lrs-config-confirm__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 8px;
}
.lrs-config-confirm__close:hover { background: var(--bg-soft); color: var(--ink); }
.lrs-config-confirm__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #FCE8B6;
  color: #B47800;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.lrs-config-confirm__sheet h3 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lrs-config-confirm__reason {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 10px 14px;
  background: #FFF6E2;
  border-left: 3px solid #D38E1A;
  border-radius: 6px;
}
.lrs-config-confirm__lede {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.lrs-config-confirm__swaps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lrs-config-confirm__swaps li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 13px;
}
.lrs-config-confirm__swaps .step {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 70px;
  flex: 0 0 auto;
}
.lrs-config-confirm__swaps .from { color: var(--ink-3); text-decoration: line-through; flex: 1 1 auto; min-width: 0; }
.lrs-config-confirm__swaps .arrow { color: var(--ink-3); flex: 0 0 auto; }
.lrs-config-confirm__swaps .to { color: var(--ink); font-weight: 600; flex: 1 1 auto; min-width: 0; }
.lrs-config-confirm__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .lrs-config-confirm__sheet { padding: 28px 24px 24px; }
  .lrs-config-confirm__sheet h3 { font-size: 19px; }
  .lrs-config-confirm__actions { flex-direction: column-reverse; }
  .lrs-config-confirm__actions .btn { width: 100%; }
  .lrs-config-confirm__swaps .step { width: auto; }
}
.lrs-config-option .thumb {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  transition: transform .15s ease;
}
/* Zoom cursor + magnifier hover hint only on the Case step */
.lrs-config-options[data-step="case"] .lrs-config-option .thumb { cursor: zoom-in; }
.lrs-config-options[data-step="case"] .lrs-config-option .thumb::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1014' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/><path d='M11 8v6M8 11h6'/></svg>") center/14px 14px no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
  z-index: 1;
}
.lrs-config-options[data-step="case"] .lrs-config-option:hover .thumb::after,
.lrs-config-options[data-step="case"] .lrs-config-option .thumb:focus-visible::after { opacity: 1; transform: scale(1); }
.lrs-config-option:hover .thumb { transform: scale(1.02); }
.lrs-config-option .thumb img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lrs-config-option .thumb img.is-silhouette {
  width: 64px;
  height: 64px;
  object-fit: contain;
  color: rgba(20, 24, 36, .42);
}
.lrs-config-option[aria-pressed="true"] .thumb img.is-silhouette { color: var(--accent); }
@media (max-width: 600px) {
  .lrs-config-option { grid-template-columns: 76px 1fr; gap: 14px; padding: 14px; }
  .lrs-config-option .thumb { width: 76px; height: 76px; }
  .lrs-config-option .thumb img.is-silhouette { width: 46px; height: 46px; }
  .lrs-config-option .price-delta { grid-column: 2; margin-top: 4px; }
}
.lrs-config-option .info { flex: 1; min-width: 0; }
.lrs-config-option .name { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lrs-config-option .sub { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.lrs-config-option .badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.lrs-config-option .price-delta {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .lrs-config-grid { grid-template-columns: 1fr; }
  .lrs-config-rail { position: static; }
  .lrs-config-options { grid-template-columns: 1fr; }
}

/* Incompatible option styling — dim + outline, blocks pick interaction */
.lrs-config-option.is-incompatible {
  opacity: .45;
  background: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(0,0,0,.025) 8px, rgba(0,0,0,.025) 9px), var(--bg-elev);
  cursor: not-allowed;
}
.lrs-config-option.is-incompatible .name { color: var(--ink-3); }
.lrs-config-option.is-incompatible:hover { transform: none; border-color: var(--rule); }
.lrs-config-option .badge--incompat {
  background: #FEE7E2;
  color: #B53A1C;
  border: 1px solid #F5C5BA;
}

/* Soft-warning banner under step header */
.lrs-config-warnings { display: none; margin-top: 14px; }
.lrs-config-warnings.is-visible {
  display: flex; flex-direction: column; gap: 6px;
}
.lrs-config-warnings__row {
  background: #FFF7E0;
  border: 1px solid #F4D67A;
  color: #7A5A0A;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}

/* Auto-swap toast (bottom-right) */
.lrs-config-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  max-width: 360px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.lrs-config-toast.is-visible { opacity: 1; transform: translateY(0); }
.lrs-config-toast__head {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.lrs-config-toast .from { color: rgba(255,255,255,.55); text-decoration: line-through; }
.lrs-config-toast .to { color: #fff; font-weight: 600; }

/* ============================================================
   Configurator option-details modal
   ============================================================ */
.lrs-config-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lrs-config-modal[hidden] { display: none; }
.lrs-config-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 20, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lrs-config-modal__panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  animation: lrs-config-modal-pop .18s ease-out;
}
@keyframes lrs-config-modal-pop {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.lrs-config-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-elev);
}
.lrs-config-modal__step {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
.lrs-config-modal__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrs-config-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s ease;
}
.lrs-config-modal__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.lrs-config-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
}
.lrs-config-modal__img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-soft);
}
.lrs-config-modal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lrs-config-modal__img img.is-silhouette {
  width: 60%;
  height: 60%;
  object-fit: contain;
  color: rgba(20, 24, 36, .42);
}
.lrs-config-modal__sub {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  margin: 0 0 18px;
  line-height: 1.6;
}
.lrs-config-modal__specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lrs-config-modal__specs-table[hidden] { display: none; }
.lrs-config-modal__specs-table tr { border-bottom: 1px solid var(--rule); }
.lrs-config-modal__specs-table tr:last-child { border-bottom: 0; }
.lrs-config-modal__specs-table th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 10px 12px 10px 0;
  vertical-align: top;
  width: 38%;
}
.lrs-config-modal__specs-table td {
  padding: 10px 0;
  color: var(--ink);
  line-height: 1.5;
  vertical-align: top;
}
.lrs-config-modal__more {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--bg-elev);
  padding: 14px 16px;
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
  margin: 18px 0 0;
}
.lrs-config-modal__more[hidden] { display: none; }
.lrs-config-modal__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--rule);
  background: var(--bg-elev);
}
.lrs-config-modal__price {
  flex: 1;
  font-family: var(--f-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
@media (max-width: 760px) {
  .lrs-config-modal { padding: 0; }
  .lrs-config-modal__panel { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .lrs-config-modal__body { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .lrs-config-modal__img { aspect-ratio: 4 / 3; max-height: 220px; }
  .lrs-config-modal__foot { flex-wrap: wrap; }
  .lrs-config-modal__price { width: 100%; text-align: center; padding: 4px 0 8px; }
}

/* ============================================================
   Repair flow LITE — brand directory + model pages
   ============================================================ */
.lrs-repair-brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lrs-repair-brand-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, transform .2s ease;
}
.lrs-repair-brand-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lrs-repair-brand-card .info { flex: 1; min-width: 0; }
.lrs-repair-brand-card .name { font-size: 17px; font-weight: 600; }
.lrs-repair-brand-card .count { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.lrs-models-list { display: flex; flex-direction: column; gap: 8px; }
.lrs-model-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease;
}
.lrs-model-row:hover { border-color: var(--accent); }
.lrs-model-row .name { font-weight: 600; font-size: 15px; }
.lrs-model-row .meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

/* "Can't find your model?" CTA - sits below the model picker */
.lrs-find-model-cta {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  position: relative;
  overflow: hidden;
}
.lrs-find-model-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%);
  pointer-events: none;
}
.lrs-find-model-cta > * { position: relative; }
.lrs-find-model-cta__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.lrs-find-model-cta__body h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lrs-find-model-cta__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
}
.lrs-find-model-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .lrs-find-model-cta {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .lrs-find-model-cta__icon { margin: 0 auto; }
  .lrs-find-model-cta__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

.lrs-model-repair-list { display: grid; gap: 8px; }
.lrs-model-repair {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
}
.lrs-model-repair .name { font-weight: 600; }
.lrs-model-repair .price { font-family: var(--f-mono); font-weight: 600; color: var(--ink); }
.lrs-model-repair .meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 1080px) { .lrs-repair-brands { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .lrs-repair-brands { grid-template-columns: 1fr; }
  .lrs-model-row { grid-template-columns: 1fr; gap: 6px; }
  .lrs-model-repair { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   Booking — multi-step form
   ============================================================ */
.lrs-booking { max-width: 720px; margin: 0 auto; }

/* Pre-fill summary — sits above the form when device/service came from URL */
.lrs-booking-preset {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
}
.lrs-booking-preset__head { margin-bottom: 12px; }
.lrs-booking-preset__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lrs-booking-preset__pill svg { color: var(--accent); }
.lrs-booking-preset__body { display: flex; flex-direction: column; gap: 8px; }
.lrs-booking-preset__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 12px;
}
.lrs-booking-preset__lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-booking-preset__val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink);
}
.lrs-booking-preset__val svg { color: var(--ink-3); flex: 0 0 auto; }
.lrs-booking-preset__val strong { font-weight: 600; }
.lrs-booking-preset__yr { color: var(--ink-3); }
.lrs-booking-preset__actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.lrs-booking-preset__back {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.lrs-booking-preset__back:hover { color: var(--accent); }
@media (max-width: 540px) {
  .lrs-booking-preset__row { grid-template-columns: 1fr; gap: 4px; }
}
.lrs-booking__steps {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}
.lrs-booking__step {
  flex: 1;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lrs-booking__step.is-current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lrs-booking__step.is-done { border-color: var(--ok); color: var(--ok); }
.lrs-booking__step .num { font-weight: 600; }

/* iPhone / narrow mobile: stack as 2x2 so the 4th pill doesn't overflow */
@media (max-width: 560px) {
  .lrs-booking__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .lrs-booking__step {
    padding: 10px 10px;
    font-size: 10px;
    letter-spacing: .06em;
    gap: 5px;
  }
}

.lrs-booking__panel {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 32px;
}
.lrs-booking__panel h2 { font-size: 24px; margin-bottom: 8px; }
.lrs-booking__panel .desc { color: var(--ink-2); margin-bottom: 24px; }
.lrs-booking__field { display: grid; gap: 6px; margin-bottom: 16px; }
.lrs-booking__field label { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.lrs-booking__field input,
.lrs-booking__field select,
.lrs-booking__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  font-family: inherit;
  font-size: 15px;
  background: var(--bg-elev);
}
.lrs-booking__field textarea { min-height: 100px; resize: vertical; }

/* Inline validation — red border + small error message under the field */
.lrs-booking__field.has-error input,
.lrs-booking__field.has-error select,
.lrs-booking__field.has-error textarea {
  border-color: #C92A2A;
  box-shadow: 0 0 0 3px rgba(201, 42, 42, .08);
}
.lrs-booking__field.has-error label { color: #C92A2A; }
.lrs-booking__error {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  color: #B42318;
  font-size: 13px;
  line-height: 1.4;
}
.lrs-booking__error::before {
  content: "!";
  width: 16px;
  height: 16px;
  background: #C92A2A;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.lrs-booking__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}

/* ============================================================
   Tables (specs, comparisons)
   ============================================================ */
.lrs-cmp-table { border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden; background: var(--bg-elev); }
.lrs-cmp-table .row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  padding: 14px 20px;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid var(--rule);
}
.lrs-cmp-table .row:last-child { border-bottom: 0; }
.lrs-cmp-table .row.is-head { background: var(--bg-soft); padding: 16px 20px; }
.lrs-cmp-table .row .label { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.lrs-cmp-table .row .us { font-weight: 500; color: var(--accent); }
.lrs-cmp-table .row .other { color: var(--ink-2); }

/* Mobile competitor toggle — desktop has no tabs */
.lrs-cmp-tabs { display: none; }

@media (max-width: 700px) {
  /* Mobile: label on its own line, then 2 cells side-by-side
     (Us + the currently-selected competitor). Tab bar above swaps competitor. */
  .lrs-cmp-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 4px;
  }
  .lrs-cmp-tab {
    flex: 1;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .lrs-cmp-tab.is-active { background: var(--accent); color: #fff; }

  .lrs-cmp-table .row {
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 6px;
    padding: 14px 16px;
  }
  .lrs-cmp-table .row .label { grid-column: 1 / -1; }
  /* The header chip + "Us"/competitor labels sit on row 2, two cols */
  .lrs-cmp-table .row.is-head .label { display: none; }
  .lrs-cmp-table .row.is-head { padding: 14px 16px; }

  /* Hide whichever competitor column isn't active */
  .lrs-cmp-table[data-cmp-active="apple"] [data-col="shop"]  { display: none; }
  .lrs-cmp-table[data-cmp-active="shop"]  [data-col="apple"] { display: none; }
}

/* ============================================================
   WooCommerce — cart + checkout styling. Brings the default Woo
   markup in line with the theme's button + table patterns.
   ============================================================ */

/* 2-col cart layout — items on the left, totals + coupon + checkout on the right.
   Uses named grid areas so the (empty) notices wrapper doesn't claim cell 1
   and push everything else into the wrong columns. */
@media (min-width: 980px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "notices notices"
      "items   totals";
    gap: 28px;
    align-items: start;
  }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-area: notices; min-height: 0; }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-area: items; min-width: 0; }
  .woocommerce-cart .woocommerce > .cart-collaterals {
    grid-area: totals;
    min-width: 0;
    /* Sticky on the grid item itself — top-aligns by default so it leaves room
       below for the sticky to slide within the grid row's full track height. */
    align-self: start;
    position: sticky;
    top: 96px;
    z-index: 5;
  }
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
  }
}

/* Restructure the cart row into a card with a big left image + specs grid + footer.
   Each cart_item <tr> becomes a CSS grid container; the <td> children get
   placed via grid-area so the table semantics are preserved but the visual
   layout is fully custom. */
@media (min-width: 720px) {
  .woocommerce-cart .shop_table.cart {
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
  }
  .woocommerce-cart .shop_table.cart thead { display: none !important; }
  .woocommerce-cart .shop_table.cart tbody { display: block; }

  .woocommerce-cart .cart_item {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    grid-template-areas:
      "thumb specs";
    column-gap: 28px;
    row-gap: 0;
    padding: 24px 28px !important;
    margin: 0 0 16px !important;
    background: var(--bg-elev) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 16px !important;
    align-items: stretch;
    position: relative;
  }
  .woocommerce-cart .cart_item .product-thumbnail {
    grid-area: thumb;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 12px;
    background: var(--bg-soft) !important;
    min-height: 220px;
  }
  .woocommerce-cart .cart_item .product-thumbnail img,
  .woocommerce-cart .cart_item .product-thumbnail .lrs-cart-build-thumb {
    width: auto !important;
    max-width: 100% !important;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    border-radius: 0;
    border: 0;
    background: transparent;
    display: block;
  }
  .woocommerce-cart .cart_item .product-name {
    grid-area: specs;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    min-width: 0;
  }
  .woocommerce-cart .cart_item .product-name > a:first-child,
  .woocommerce-cart .cart_item .product-name > strong {
    display: block;
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
  }
  /* Hide all the price/qty/subtotal cells on the cart row — totals card on the
     right shows the same info. Qty input is JS-relocated into the footer strip. */
  .woocommerce-cart .cart_item .product-price,
  .woocommerce-cart .cart_item .product-subtotal,
  .woocommerce-cart .cart_item .product-quantity { display: none !important; }
  .woocommerce-cart .cart_item .product-remove {
    position: absolute !important;
    top: 18px;
    right: 18px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 2;
  }
  .woocommerce-cart .cart_item .product-remove a.remove {
    width: 30px;
    height: 30px;
    display: grid !important;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-soft) !important;
    color: var(--ink-3) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: background-color .15s ease, color .15s ease;
  }
  .woocommerce-cart .cart_item .product-remove a.remove:hover {
    background: #C92A2A !important;
    color: #fff !important;
  }

  /* Cart footer — the table's .actions row becomes the divider+ qty + update strip */
  .woocommerce-cart .shop_table.cart tfoot,
  .woocommerce-cart .shop_table.cart tr:has(.actions) { display: block; }
  .woocommerce-cart .shop_table.cart .actions {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--rule) !important;
    background: transparent !important;
    width: 100%;
  }
  .woocommerce-cart .lrs-cart-summary {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .woocommerce-cart .lrs-cart-summary__count {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
  }

  /* Relocated qty cell — small +/- pill next to Update Cart */
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    flex: 0 0 auto;
  }
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated::before {
    display: none !important;
  }
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-elev);
  }
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated input.qty {
    width: 50px !important;
    padding: 8px 4px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center !important;
    font-family: var(--f-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    -moz-appearance: textfield;
  }
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated input.qty::-webkit-outer-spin-button,
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated label[for*="quantity"],
  .woocommerce-cart-form .actions .product-quantity.lrs-cart-qty-relocated .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .woocommerce-cart .lrs-cart-update-btn,
  .woocommerce-cart-form .actions button[name="update_cart"] {
    flex: 0 0 auto;
    padding: 10px 18px !important;
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 999px !important;
    font-family: var(--f-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease !important;
  }
  .woocommerce-cart .lrs-cart-update-btn:hover,
  .woocommerce-cart-form .actions button[name="update_cart"]:hover {
    background: var(--ink) !important;
    color: #fff !important;
  }
}

/* Cart-line thumbnail (mobile fallback — under 720px the table reverts to stacked rows) */
.woocommerce-cart-form .product-thumbnail img,
.woocommerce-cart .cart_item .product-thumbnail img,
.lrs-cart-build-thumb {
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
}

/* WooCommerce hides the product-thumbnail cell on mobile by default — re-show it
   centred at the top of each stacked cart row. */
@media (max-width: 768px) {
  .woocommerce-cart .shop_table_responsive .cart_item .product-thumbnail {
    display: block !important;
    text-align: center !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--rule);
  }
  .woocommerce-cart .shop_table_responsive .cart_item .product-thumbnail::before {
    display: none !important;
  }
  .woocommerce-cart .shop_table_responsive .cart_item .product-thumbnail img,
  .woocommerce-cart .shop_table_responsive .cart_item .product-thumbnail .lrs-cart-build-thumb {
    display: inline-block !important;
    width: 140px !important;
    max-width: 60vw;
    height: auto;
    margin: 0 auto !important;
  }
}

/* Coupon block — fully rounded pill input with the Apply button overlaying
   the right edge. Uses a 1-cell grid for input + button so the button is
   vertically centred relative to the input itself, not the container. */
.woocommerce-cart .cart_totals .coupon {
  position: relative;
  margin: 0 0 18px;
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
}
.woocommerce-cart .cart_totals .coupon::before {
  content: "Got a coupon?";
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.woocommerce-cart .cart_totals .coupon label[for="coupon_code"] { display: none; }
.woocommerce-cart .cart_totals .coupon input[name="coupon_code"] {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  padding: 12px 110px 12px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-elev);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-cart .cart_totals .coupon input[name="coupon_code"]::placeholder { color: var(--ink-3); }
.woocommerce-cart .cart_totals .coupon input[name="coupon_code"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.woocommerce-cart .cart_totals .coupon button {
  grid-row: 1;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  margin-right: 6px !important;
}

/* Generic apply-coupon button styling — covers cart's .coupon, checkout's
   .checkout_coupon expandable form, and the newer .woocommerce-form-coupon. */
.woocommerce-cart .cart_totals .coupon button[name="apply_coupon"],
.woocommerce-cart-form .coupon button[name="apply_coupon"],
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"],
.woocommerce-checkout .woocommerce-form-coupon button[name="apply_coupon"],
form.checkout_coupon button[type="submit"],
.woocommerce-form-coupon button[type="submit"] {
  width: auto !important;
  padding: 10px 22px !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.woocommerce-cart .cart_totals .coupon button[name="apply_coupon"]:hover,
.woocommerce-cart-form .coupon button[name="apply_coupon"]:hover,
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover,
.woocommerce-checkout .woocommerce-form-coupon button[name="apply_coupon"]:hover,
form.checkout_coupon button[type="submit"]:hover,
.woocommerce-form-coupon button[type="submit"]:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Checkout coupon expandable form — give it the same card treatment as the
   notice banners + arrange input + button on one row */
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout .woocommerce-form-coupon {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 16px 18px !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 12px !important;
  margin: 0 0 18px !important;
}
.woocommerce-checkout form.checkout_coupon p,
.woocommerce-checkout .woocommerce-form-coupon p { margin: 0 !important; }
.woocommerce-checkout form.checkout_coupon p:has(input[name="coupon_code"]),
.woocommerce-checkout .woocommerce-form-coupon p:has(input[name="coupon_code"]) {
  flex: 1 1 auto;
  min-width: 0;
}
.woocommerce-checkout form.checkout_coupon input[name="coupon_code"],
.woocommerce-checkout .woocommerce-form-coupon input[name="coupon_code"] {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  background: var(--bg-elev) !important;
}
.woocommerce-checkout form.checkout_coupon input[name="coupon_code"]:focus,
.woocommerce-checkout .woocommerce-form-coupon input[name="coupon_code"]:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Hide the now-empty .actions row (JS pulls coupon + update-cart into the totals) */
.woocommerce-cart-form .actions:empty { display: none; }

/* Cart totals card — only `.cart_totals` is the white card. `.cart-collaterals`
   stays a transparent wrapper so we can hang `position: sticky` on it without
   doubling up borders. */
.woocommerce-cart .cart-collaterals { background: transparent; border: 0; padding: 0; }
.woocommerce-cart .cart_totals {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04), 0 1px 0 rgba(0,0,0,.02);
}
.woocommerce-cart .cart_totals h2 {
  font-size: 20px;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.woocommerce-cart .cart_totals table { width: 100%; border-collapse: collapse; margin: 0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 16px 4px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  vertical-align: middle;
}
.woocommerce-cart .cart_totals table tr:first-child th,
.woocommerce-cart .cart_totals table tr:first-child td {
  border-top: 0;
  padding-top: 4px;
}
.woocommerce-cart .cart_totals table th {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  text-align: left;
}
.woocommerce-cart .cart_totals table td {
  text-align: right;
  font-weight: 500;
  color: var(--ink);
}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th {
  font-size: 16px;
  font-weight: 700;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  padding-bottom: 18px;
}
.woocommerce-cart .cart_totals .order-total td .amount,
.woocommerce-cart .cart_totals .order-total td bdi,
.woocommerce-cart .cart_totals .order-total td {
  font-size: 22px;
  letter-spacing: -0.01em;
}
.woocommerce-cart .cart_totals .order-total th {
  font-size: 11px;
  color: var(--ink-3);
}

/* "Proceed to Checkout" — turn it into a proper accent CTA */
.wc-proceed-to-checkout { margin-top: 18px !important; }
.wc-proceed-to-checkout .checkout-button,
.woocommerce a.button.checkout,
.woocommerce a.button.alt.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 22px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  text-transform: none !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
  box-shadow: 0 6px 14px rgba(36, 82, 245, .25) !important;
}
.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce a.button.checkout:hover,
.woocommerce a.button.alt.checkout-button:hover {
  background: #1d40d6 !important;
  border-color: #1d40d6 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(36, 82, 245, .35) !important;
}
.wc-proceed-to-checkout .checkout-button::after {
  content: "→";
  font-size: 18px;
  line-height: 1;
}

/* "Update cart" + "Apply coupon" — secondary look, sits beside the totals card */
.woocommerce-cart-form .actions .button,
.woocommerce-cart-form .coupon .button {
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.woocommerce-cart-form .actions .button:hover {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Flat flex pill list rendered by our custom cart-item-data.php template.
   Pills auto-size, wrap horizontally, no dl/dt/dd wrapping that breaks flow. */
.lrs-spec-list {
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Checkout pills — same auto-flow as cart, no forced column count.
   Pills size to content + grow to share leftover row space. Values stay on
   one line via white-space: nowrap with ellipsis fallback if truly too long. */
.woocommerce-checkout .lrs-spec-list { gap: 6px; }
/* No longer needed — pills auto-size now */
.woocommerce-cart .product-name dl.variation > dt,
.woocommerce-checkout .product-name dl.variation > dt { display: none !important; }
.woocommerce-cart .product-name dl.variation > dd,
.woocommerce-checkout .product-name dl.variation > dd {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
  height: 100%;        /* let the inner row stretch */
}
.woocommerce-cart .product-name dl.variation > dd p,
.woocommerce-checkout .product-name dl.variation > dd p { margin: 0; height: 100%; }
/* Pills auto-size and wrap on every viewport */

/* Checkout order summary: hide the price column on each line item.
   The total still shows in the totals row at the bottom. */
.woocommerce-checkout #order_review .shop_table .product-total,
.woocommerce-checkout #order_review .shop_table thead .product-total { display: none !important; }
.woocommerce-checkout #order_review .shop_table tbody .cart_item .product-name {
  flex: 1 1 100% !important;
}

/* Single-line pill: [icon] value. Default = grow to share row space. */
.lrs-spec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: border-color .15s ease, background-color .15s ease;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* Cart — pills auto-size and grow to share leftover row space. The cart row
   now has its line-total in a third grid column so the spec area is naturally
   narrower; pills wrap as needed and grow to fill each row. */
.lrs-spec-row:hover { border-color: var(--ink-3); background: var(--bg-elev); }
.lrs-spec-row__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #fff;
  color: var(--accent);
  border-radius: 999px;
  flex: 0 0 auto;
}
.lrs-spec-row__icon svg { width: 12px !important; height: 12px !important; color: var(--accent) !important; stroke: currentColor !important; }
.lrs-spec-row:hover .lrs-spec-row__icon { background: var(--accent); color: #fff; }
.lrs-spec-row:hover .lrs-spec-row__icon svg { color: #fff !important; }
.lrs-spec-row__label {
  display: none;     /* label is implied by the icon — keep markup for SR but hide visually */
}
.lrs-spec-row__value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Same shape for the newer .wc-item-meta <ul> markup if Woo is using it */
.woocommerce-cart .product-name .wc-item-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 6px;
}
.woocommerce-cart .product-name .wc-item-meta li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}
.woocommerce-cart .product-name .wc-item-meta-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  flex: 0 0 auto;
}
.woocommerce-cart .product-name .wc-item-meta li p {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 12px;
  min-width: 0;
}
.woocommerce-cart .product-name strong { color: var(--ink); font-size: 16px; }

/* Collapse spec pairs to single column on narrow screens */
@media (max-width: 720px) {
  .woocommerce-cart .product-name dl.variation { grid-template-columns: minmax(96px, auto) 1fr; }
  .woocommerce-cart .product-name .wc-item-meta { grid-template-columns: 1fr; }
}

/* Quantity input — match the rest of the theme */
.woocommerce-cart .quantity input.qty {
  width: 56px;
  padding: 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  text-align: center;
}

/* Checkout page — same accent CTA on Place Order */
.woocommerce-checkout #place_order {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
  padding: 16px 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: 100% !important;
  letter-spacing: -0.005em;
  text-transform: none !important;
  box-shadow: 0 6px 14px rgba(36, 82, 245, .25) !important;
}
.woocommerce-checkout #place_order:hover {
  background: #1d40d6 !important;
  border-color: #1d40d6 !important;
}

/* Empty-cart state — nudge them back to the configurator */
.cart-empty.woocommerce-info {
  padding: 40px 32px !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  display: block !important;
}
.cart-empty.woocommerce-info::before { display: none !important; }

/* ============================================================
   WooCommerce notifications — make them match the theme.
   Covers legacy <ul class="woocommerce-message|info|error">
   and the newer block notice banner classes.
   ============================================================ */
.woocommerce-notices-wrapper { margin: 0 0 16px; }
.woocommerce-message,
.woocommerce-info:not(.cart-empty),
.woocommerce-error,
.wc-block-components-notice-banner {
  position: relative;
  margin: 0 0 14px !important;
  padding: 14px 16px 14px 18px !important;
  border-radius: 12px !important;
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-top-width: 1px !important;
  background-image: none !important;
  box-shadow: none !important;
}
.woocommerce-message::before,
.woocommerce-info:not(.cart-empty)::before,
.woocommerce-error::before {
  content: "";
  display: grid !important;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--f-sans) !important;
  flex: 0 0 auto;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  color: #fff !important;
  line-height: 1 !important;
}

/* Success: removed-from-cart, applied-coupon, etc. */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
  background: #ECFDF3 !important;
  color: #054F31 !important;
  border: 1px solid #A6E5BA !important;
  border-left: 3px solid #1F8F5F !important;
}
.woocommerce-message::before { content: "✓"; background: #1F8F5F; }

/* Info: empty-cart prompts, generic notices */
.woocommerce-info:not(.cart-empty),
.wc-block-components-notice-banner.is-info {
  background: #EFF4FF !important;
  color: #1A2B6B !important;
  border: 1px solid #B6CFFC !important;
  border-left: 3px solid var(--accent) !important;
}
.woocommerce-info:not(.cart-empty)::before { content: "i"; background: var(--accent); font-style: italic; }

/* Error: failed coupon, validation, payment problems */
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  background: #FEF2F2 !important;
  color: #5C1F1F !important;
  border: 1px solid #FCA5A5 !important;
  border-left: 3px solid #C92A2A !important;
}
.woocommerce-error::before { content: "!"; background: #C92A2A; }

/* When the notice is a <ul> with multiple errors, switch the layout to a
   vertical stack and reset list-item styling so each error reads as a sentence. */
ul.woocommerce-message,
ul.woocommerce-info,
ul.woocommerce-error {
  flex-direction: column !important;
  align-items: stretch !important;
}
ul.woocommerce-message > li,
ul.woocommerce-info > li,
ul.woocommerce-error > li {
  display: list-item !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: inherit !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}
ul.woocommerce-message > li + li,
ul.woocommerce-info > li + li,
ul.woocommerce-error > li + li { margin-top: 6px !important; }
ul.woocommerce-message > li::before,
ul.woocommerce-info > li::before,
ul.woocommerce-error > li::before {
  content: "•";
  display: inline-block;
  margin-right: 8px;
  color: currentColor;
  opacity: .6;
}
/* Inside the error list items, <strong> stays bold but doesn't get pill styling */
ul.woocommerce-error > li strong { font-weight: 600; }
/* Don't pillify links inside list items either — they're not action buttons */
ul.woocommerce-error > li a,
ul.woocommerce-message > li a {
  margin-left: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: underline !important;
  white-space: normal !important;
  display: inline !important;
}

/* Inline links inside notices — treat the trailing "Undo?" / "View cart" as a small ghost button */
.woocommerce-message .button,
.woocommerce-message a.restore-item,
.woocommerce-info:not(.cart-empty) a,
.woocommerce-error a,
.wc-block-components-notice-banner a {
  margin-left: auto !important;
  padding: 5px 14px !important;
  background: transparent !important;
  color: inherit !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex: 0 0 auto;
  transition: background-color .15s ease, color .15s ease !important;
}
/* Mobile: allow the link inside info/error notices to wrap so long labels
   like "Click here to enter your code" don't overflow the container. */
@media (max-width: 720px) {
  .woocommerce-info:not(.cart-empty) a,
  .woocommerce-error a,
  .wc-block-components-notice-banner a {
    white-space: normal !important;
    margin-left: 0 !important;
    max-width: 100%;
    text-align: center;
  }
  .woocommerce-info:not(.cart-empty),
  .wc-block-components-notice-banner {
    flex-wrap: wrap !important;
    row-gap: 10px;
  }
}

.woocommerce-message .button:hover,
.woocommerce-message a.restore-item:hover {
  background: #1F8F5F !important;
  color: #fff !important;
  border-color: #1F8F5F !important;
}
.woocommerce-error a:hover {
  background: #C92A2A !important;
  color: #fff !important;
  border-color: #C92A2A !important;
}
.woocommerce-info:not(.cart-empty) a:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* Block-cart notice icon (built-in svg) — match the theme's circle treatment */
.wc-block-components-notice-banner > svg {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

/* ============================================================
   Shopify-style checkout — 2-col layout, sticky order summary
   on the right, modern inputs on the left.
   ============================================================ */

/* Strip the default page padding so the checkout fills the wide-wrap container */
.woocommerce-checkout main.lrs-main { background: var(--bg-soft); }
.woocommerce-checkout .section { padding-top: 36px !important; padding-bottom: 64px !important; }

/* Defensive overflow clipping — one of the WC checkout sub-elements (Stripe
   iframe, order-review table, billing field group, select2 dropdown, the
   password strength meter) sometimes renders wider than the viewport on
   mobile and pushes the whole page into horizontal scroll. Belt-and-braces:
   `clip` on every container PLUS `hidden` on html/body at mobile sizes
   because iOS Safari occasionally ignores `clip` when a descendant sets
   `position: relative`. */
body.woocommerce-checkout { overflow-x: clip; }
.woocommerce-checkout main.lrs-main,
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.woocommerce-checkout { overflow-x: clip; max-width: 100%; }
.woocommerce-checkout form.checkout > *,
.woocommerce-checkout form.woocommerce-checkout > * { max-width: 100%; }

/* iOS Safari fallback — at mobile widths, hard-clip the document root.
   Trade-off: sticky elements inside the body become scoped to body scroll
   rather than viewport, but on mobile the sticky right-column order review
   is already overridden to flow inline so nothing else relies on it.
   `width: 100vw` + `position: relative` is the iOS-specific trick: iOS Safari
   sometimes lets overflow leak past `overflow:hidden` on body when a fixed
   descendant exists, but pinning the body width to viewport defeats that. */
@media (max-width: 980px) {
  html:has(body.woocommerce-checkout),
  body.woocommerce-checkout {
    overflow-x: hidden !important;
    overflow-y: auto;
  }
  body.woocommerce-checkout {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
  }
}

/* Common WC overflow culprits — force them to live inside the viewport */
.woocommerce-checkout iframe { max-width: 100% !important; }
.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2,
.woocommerce-checkout .woocommerce-password-strength,
.woocommerce-checkout .woocommerce-password-hint { max-width: 100% !important; box-sizing: border-box; }
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .cart_item { max-width: 100% !important; }

/* Page heading + breadcrumb area sit above the 2-col grid */
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-title { font-size: 32px !important; letter-spacing: -0.02em; margin-bottom: 24px !important; }

/* Shopify-style 2-col checkout — customer details on the left,
   sticky order review on the right (always visible while filling address). */
@media (min-width: 980px) {
  .woocommerce-checkout form.checkout,
  .woocommerce-checkout form.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "customer review";
    gap: 32px !important;
    align-items: start !important;
  }
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > .col2-set,
  .woocommerce-checkout form.woocommerce-checkout > #customer_details {
    grid-area: customer;
    min-width: 0;
  }

  .woocommerce-checkout form.checkout > #order_review_heading { display: none !important; }

  .woocommerce-checkout form.checkout > #order_review,
  .woocommerce-checkout form.woocommerce-checkout > #order_review {
    grid-area: review;
    min-width: 0;
    position: sticky;
    top: 96px;
    align-self: start;
    z-index: 5;
  }
}

/* Customer details area — drop the old col-1/col-2 nested layout in favour of a clean stack */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: auto !important;
  float: none !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Each section (billing, shipping, additional, order review) is a white card */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.woocommerce-checkout #order_review { box-shadow: 0 4px 14px rgba(0,0,0,.04), 0 1px 0 rgba(0,0,0,.02); }

/* Section headings — Shopify-style small mono caps */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review h3 {
  font-family: var(--f-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Form rows — label above input, modern stack */
.woocommerce-checkout .form-row,
.woocommerce-checkout p.form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
.woocommerce-checkout .form-row label {
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label .optional { color: var(--accent); }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 10px !important;
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 12px 14px !important;
  color: var(--ink) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 8px !important; }

/* First/last name pair — keep them side-by-side */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: 100% !important; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes { grid-column: 1 / -1; }
@media (max-width: 540px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* Inline error state */
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea {
  border-color: #C92A2A !important;
  box-shadow: 0 0 0 3px rgba(201, 42, 42, .08) !important;
}
.woocommerce-checkout .form-row.woocommerce-validated input { border-color: #1F8F5F !important; }

/* Order summary table — items stack with their thumbnails */
.woocommerce-checkout #order_review table.shop_table {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;          /* escape native table layout */
  table-layout: auto;
}
.woocommerce-checkout #order_review table.shop_table thead { display: none !important; }
.woocommerce-checkout #order_review table.shop_table tbody,
.woocommerce-checkout #order_review table.shop_table tfoot { display: block !important; width: 100%; }
.woocommerce-checkout #order_review table.shop_table tbody tr {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--rule) !important;
}
.woocommerce-checkout #order_review table.shop_table tbody td {
  border: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
}
.woocommerce-checkout #order_review table.shop_table .product-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}
.woocommerce-checkout #order_review table.shop_table .product-name strong { font-size: 14px; color: var(--ink); }
.woocommerce-checkout #order_review table.shop_table .product-name dl.variation,
.woocommerce-checkout #order_review table.shop_table .product-name .wc-item-meta {
  font-size: 11px !important;
  color: var(--ink-3);
  margin-top: 6px !important;
  line-height: 1.4 !important;
}
.woocommerce-checkout #order_review table.shop_table .product-total {
  flex: 0 0 auto;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Order totals (subtotal / shipping / total) — explicit flex on tfoot tr so
   the th/td pair always fits the container width and the price td never
   overflows past the right edge on narrow viewports. */
.woocommerce-checkout #order_review table.shop_table tfoot tr {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 12px;
  border-bottom: 1px solid var(--rule) !important;
  padding: 14px 0 !important;
}
.woocommerce-checkout #order_review table.shop_table tfoot th {
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
}
.woocommerce-checkout #order_review table.shop_table tfoot td {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  font-weight: 600;
  padding: 0 !important;
  white-space: nowrap;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total {
  border-top: 2px solid var(--ink) !important;
  border-bottom: 0 !important;
  padding: 18px 0 8px !important;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th {
  font-size: 11px !important;
  color: var(--ink-3) !important;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td .amount,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td bdi {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Payment methods — radio cards */
.woocommerce-checkout #payment {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--rule) !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--rule-strong) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  background: var(--bg-elev);
  transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--ink-3) !important; }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  margin-right: 8px !important;
  vertical-align: middle;
  accent-color: var(--accent);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  cursor: pointer;
  display: inline;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box {
  margin: 12px 0 0 24px !important;
  padding: 12px 14px !important;
  background: var(--bg-soft) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  line-height: 1.55 !important;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box::before { display: none !important; }

/* Place Order button — full-width prominent accent CTA */
.woocommerce-checkout #payment .form-row.place-order { margin: 16px 0 0 !important; padding: 0 !important; }
.woocommerce-checkout #place_order {
  width: 100% !important;
  padding: 16px 22px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(36, 82, 245, .25) !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.woocommerce-checkout #place_order:hover {
  background: #1d40d6 !important;
  border-color: #1d40d6 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(36, 82, 245, .35) !important;
}

/* Privacy/terms text under the button */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .woocommerce-privacy-policy-text {
  margin-top: 14px !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

/* Login prompt + coupon prompt at top of legacy checkout */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  background: var(--bg-elev) !important;
  border: 1px solid var(--rule) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .checkout_coupon {
  background: var(--bg-elev) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}

/* Trust badges — small footer row under place order */
.woocommerce-checkout #order_review::after {
  content: "🔒 Secure checkout · 12-month warranty · No fix, no fee · Bench-built in Bloomsbury";
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.6;
}

/* ============================================================
   404 page — quick-jump tiles + search
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.lrs-404__search {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  max-width: 480px;
}
.lrs-404__search input[type="search"] {
  flex: 1 1 auto;
  padding: 12px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 14px;
  background: var(--bg-elev);
  color: var(--ink);
}
.lrs-404__search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lrs-404__search button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease;
}
.lrs-404__search button:hover { background: var(--accent); border-color: var(--accent); }

.lrs-404__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lrs-404__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px 28px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lrs-404__tile:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.lrs-404__tile-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.lrs-404__tile-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.lrs-404__tile-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.lrs-404__tile-desc  { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.lrs-404__tile-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--ink-3);
  transition: color .15s ease, transform .15s ease;
}
.lrs-404__tile:hover .lrs-404__tile-arrow { color: var(--accent); transform: translateX(2px); }

@media (max-width: 1080px) { .lrs-404__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  {
  .lrs-404__grid { grid-template-columns: 1fr; }
  .lrs-404__search { flex-direction: column; }
}

/* ============================================================
   Single blog post — long-form article layout
   ============================================================ */
/* Hero section bits — constrain to a comfortable reading width inside the
   wrap-wide. Featured image + share strip stay wider via their own rules. */
.lrs-blog-article .section > .wrap-wide > nav,
.lrs-blog-article .section > .wrap-wide > .eyebrow,
.lrs-blog-article .section > .wrap-wide > .lrs-blog-article__meta {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}
.lrs-blog-article__h1 { margin: 18px auto 0; max-width: 26ch; }
.lrs-blog-article__hero {
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.lrs-blog-article__share { max-width: 80ch; margin-left: auto; margin-right: auto; }
.lrs-blog-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.lrs-blog-article__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.lrs-blog-article__byline { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.lrs-blog-article__byline .name { font-size: 14px; font-weight: 600; color: var(--ink); }
.lrs-blog-article__byline .role {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lrs-blog-article__hero {
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 16 / 9;
}
.lrs-blog-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Body typography — proper editorial styling. Caps line-length at ~80ch
   so reading stays comfortable even though the outer container goes full-width. */
.lrs-blog-article__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 80ch;
  margin: 0 auto;
}
.lrs-blog-article__body > * + * { margin-top: 1.1em; }
.lrs-blog-article__body p { margin: 0 0 1.1em; }
.lrs-blog-article__body p:last-child { margin-bottom: 0; }
.lrs-blog-article__body h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 2.2em 0 0.6em;
  scroll-margin-top: 100px;
}
.lrs-blog-article__body h2:first-child { margin-top: 1em; }
.lrs-blog-article__body h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 1.8em 0 0.4em;
  line-height: 1.3;
}
.lrs-blog-article__body h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 1.5em 0 0.3em;
}
.lrs-blog-article__body strong, .lrs-blog-article__body b { color: var(--ink); font-weight: 700; }
.lrs-blog-article__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lrs-blog-article__body a:hover { text-decoration-thickness: 2px; }
.lrs-blog-article__body ul,
.lrs-blog-article__body ol { padding-left: 24px; margin: 1.1em 0; }
.lrs-blog-article__body li { margin-bottom: 0.4em; }
.lrs-blog-article__body li::marker { color: var(--accent); }
.lrs-blog-article__body blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--ink-2);
}
.lrs-blog-article__body code {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink);
}
.lrs-blog-article__body pre {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 18px;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.55;
}
.lrs-blog-article__body pre code { background: transparent; border: 0; padding: 0; font-size: inherit; }
.lrs-blog-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.4em 0;
}
.lrs-blog-article__body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2em 0;
}

/* Share strip at bottom of article */
.lrs-blog-article__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.lrs-blog-article__share-lbl {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* Related posts grid */
.lrs-blog-article__related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lrs-blog-article__related-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lrs-blog-article__related-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.lrs-blog-article__related-img {
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  overflow: hidden;
}
.lrs-blog-article__related-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrs-blog-article__related-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.lrs-blog-article__related-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lrs-blog-article__related-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.lrs-blog-article__related-arrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

@media (max-width: 900px) { .lrs-blog-article__related { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .lrs-blog-article__body { font-size: 16px; }
  .lrs-blog-article__body h2 { font-size: 24px; }
  .lrs-blog-article__body h3 { font-size: 18px; }
}

/* Blog hero "Bench notes" credibility badge — fills the hero right column on /blog/ */
.lrs-blog-credit {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 18px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.lrs-blog-credit__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.lrs-blog-credit__icon svg { color: var(--accent); }
.lrs-blog-credit__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.lrs-blog-credit__eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.lrs-blog-credit__row { display: inline-flex; align-items: center; gap: 14px; }
.lrs-blog-credit__stat { display: flex; flex-direction: column; gap: 0; line-height: 1.1; }
.lrs-blog-credit__stat .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.lrs-blog-credit__stat .l {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.lrs-blog-credit__divider { width: 1px; align-self: stretch; background: var(--rule); flex: 0 0 auto; }
.lrs-blog-credit__sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 8px;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .lrs-blog-credit { max-width: max-content; margin: 0 auto; padding: 14px 18px; }
}

/* Hub-page hero H1 — /blog/, /services/, etc. No max-width cap, balanced
   wrap, smaller font on mobile so titles use the full viewport width. */
.lrs-blog-h1 {
  max-width: none;
  text-wrap: balance;
}
@media (max-width: 720px) {
  .lrs-blog-h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; }
  /* Generic safety-net for any .h-display inside .lrs-brand-hero — drops
     the inline max-width caps that force word-per-line wrapping on mobile */
  .lrs-brand-hero .h-display {
    max-width: none !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.1 !important;
    text-wrap: balance;
  }
}

/* Blog landing grid — 3 cols desktop, 2 cols tablet/mobile, 1 col tiny */
.lrs-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lrs-blog-grid__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lrs-blog-grid__card:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.lrs-blog-grid__img {
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  overflow: hidden;
}
.lrs-blog-grid__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.lrs-blog-grid__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lrs-blog-grid__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1 1 auto;
}
.lrs-blog-grid__more {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
@media (max-width: 1024px) { .lrs-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .lrs-blog-grid { grid-template-columns: 1fr; } }

/* Year filter section in the brand-page side menu */
.lrs-series-side__year-head {
  padding: 14px 18px 8px;
  border-top: 1px solid var(--rule);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lrs-series-side__year-head .eyebrow { font-size: 10px; }
.lrs-series-side__year-clear {
  border: 0;
  background: transparent;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.lrs-series-side__year-clear:hover { background: var(--accent-soft); }

.lrs-series-side__years {
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-top: 1px solid var(--rule);
}
.lrs-series-side__year {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lrs-series-side__year:hover { background: var(--bg-soft); color: var(--ink); }
.lrs-series-side__year.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(36, 82, 245, .15);
  font-weight: 600;
}
.lrs-series-side__year-name { font-size: 13px; }
.lrs-series-side__year-count {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  flex: 0 0 auto;
}
.lrs-series-side__year.is-active .lrs-series-side__year-count {
  background: rgba(255,255,255,.8);
  color: var(--accent);
  border-color: rgba(36, 82, 245, .18);
}

/* When mobile collapses the side menu, hide year head + render years inline.
   Switch from a fixed-column grid to flex-wrap so pills auto-size to content
   (Year + count badge) and never get squeezed past their text on narrow phones. */
@media (max-width: 1080px) {
  .lrs-series-side__year-head { display: none; }
  .lrs-series-side__years {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 0;
    padding: 4px;
  }
  .lrs-series-side__year {
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 5px 6px 5px 12px;
    font-size: 12px;
    gap: 6px;
    flex: 0 0 auto;
  }
  .lrs-series-side__year-name { font-size: 12px; }
  .lrs-series-side__year-count { padding: 1px 7px; font-size: 10px; }
  .lrs-series-side__year.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
}

/* About page — equipment grid. Was overflowing horizontally on the original
   inline-styled `repeat(4, 1fr)` because cells lacked min-width: 0 — long
   labels forced cells past viewport. */
.lrs-about-equipment {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.lrs-about-equipment__item {
  padding: 18px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
@media (max-width: 980px) { .lrs-about-equipment { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .lrs-about-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .lrs-about-equipment { grid-template-columns: 1fr; } }

/* ============================================================
   Cookie consent banner — fixed bottom-left card, theme-styled.
   Markup is in inc/cookie-banner.php (rendered late in wp_footer).
   ============================================================ */
.lrs-cookie {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9999;
  padding: 16px;
  pointer-events: none;
  max-width: 100vw;
  transition: bottom .2s ease;
}
.lrs-cookie[hidden] { display: none; }
/* When a fixed-bottom CTA bar is also on screen (configurator topbar, cart
   sticky CTA), lift the cookie banner above it so it doesn't occlude the
   primary action. */
body:has(.lrs-config-topbar) .lrs-cookie,
body:has(.lrs-sticky-cta) .lrs-cookie { bottom: 80px; }
@media (max-width: 720px) {
  body:has(.lrs-config-topbar) .lrs-cookie,
  body:has(.lrs-sticky-cta) .lrs-cookie { bottom: 96px; }
}
.lrs-cookie__card {
  pointer-events: auto;
  width: 460px;
  max-width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 22, 36, 0.18), 0 2px 8px rgba(15, 22, 36, 0.06);
  padding: 22px 22px 18px;
}
.lrs-cookie__title {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lrs-cookie__desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.lrs-cookie__desc a { color: var(--accent); text-decoration: underline; }

.lrs-cookie__details { margin-bottom: 14px; }
.lrs-cookie__categories {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.lrs-cookie__row {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.lrs-cookie__row:last-child { border-bottom: 0; }
.lrs-cookie__row > label,
.lrs-cookie__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  margin: 0;
}
.lrs-cookie__row:first-child { cursor: default; }
.lrs-cookie__row > label { padding: 12px 14px; flex: 1; }
.lrs-cookie__row-text { flex: 1; display: block; }
.lrs-cookie__row-text > strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
  font-weight: 600;
}
.lrs-cookie__row-text > span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.lrs-cookie__pill {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Toggle switch — visually replaces the native checkbox */
.lrs-cookie__row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.lrs-cookie__toggle {
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  background: #cbd0db;
  border-radius: 999px;
  position: relative;
  transition: background .15s ease;
  display: inline-block;
}
.lrs-cookie__toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(15, 22, 36, 0.2);
}
.lrs-cookie__row input[type="checkbox"]:checked ~ .lrs-cookie__toggle {
  background: var(--accent);
}
.lrs-cookie__row input[type="checkbox"]:checked ~ .lrs-cookie__toggle::after {
  transform: translateX(16px);
}
.lrs-cookie__row input[type="checkbox"]:focus-visible ~ .lrs-cookie__toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lrs-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.lrs-cookie__actions .btn {
  font-size: 13px;
  padding: 9px 14px;
}

@media (max-width: 720px) {
  .lrs-cookie { padding: 12px; right: 0; }
  .lrs-cookie__card { width: 100%; padding: 18px; }
  .lrs-cookie__actions .btn { flex: 1 1 calc(50% - 4px); }
}