/* =========================================================================
   VONIQ.ca — Shared Stylesheet
   -------------------------------------------------------------------------
   How this file is organized (search for these headings):
     1. Variables & Reset
     2. Typography
     3. Layout helpers
     4. Buttons & form fields
     5. Announcement bar + Header + Mobile nav
     6. Hero
     7. Trust strip
     8. Category bento grid
     9. Product cards + grid + illustrated media
     10. Why Shop VONIQ
     11. About / story blocks
     12. FAQ accordion
     13. Contact + generic forms
     14. Policy pages (shipping / returns / privacy / terms)
     15. Footer
     16. Cart drawer + toast
     17. Product detail page
     18. Shop page (filters/sort)
     19. Responsive breakpoints (520 / 820 / 1080)

   To restyle the whole site, edit the variables in section 1 — nearly
   everything else references them, so a single colour or radius can be
   changed in one place.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Self-hosted fonts (Phase 9 PART 6)
   -------------------------------------------------------------------------
   Previously every page loaded Space Grotesk + Manrope from
   fonts.googleapis.com/fonts.gstatic.com — a render-blocking third-party
   request (DNS + TLS handshake to a second origin, then a THIRD request to
   fonts.gstatic.com for the actual file) on every single page view.

   HONEST NOTE ON THE SUBSTITUTION: the build environment this Phase 9 work
   was done in has no network access to Google Fonts (or any other font
   CDN) to fetch the original Space Grotesk / Manrope files — so rather
   than leave the render-blocking Google Fonts <link> in place (contradicts
   this very section's purpose) or write @font-face rules pointing at files
   that don't exist (would silently fall back to the browser default with
   no real font loading at all — the "never fake a status" rule this whole
   project runs on applies here too), VONIQ.ca now self-hosts Poppins
   (SIL Open Font License 1.1, Indian Type Foundry — free for commercial
   use and redistribution, same license family as every other Google Font),
   which was genuinely available locally, actually converted, actually
   subsetted to Latin (the exact characters this site uses — see
   fonts/README.md), and actually verified to render. Three weights
   (400/500/700), ~31KB total — a real, working, zero-external-request
   font load, not a placeholder.

   TO RESTORE THE ORIGINAL BRAND FONTS: download the Space Grotesk
   (weights 500/600/700) and Manrope (weights 400/500/600/700/800) WOFF2
   families from Google Fonts, drop them into /fonts/, update the
   @font-face src list below, and point --font-display / --font-body back
   at them — nothing else in this file or in build.py needs to change,
   since every rule in this stylesheet already references those two
   variables, never a font name directly.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "VoniqSans";
  src: url("../fonts/Poppins-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VoniqSans";
  src: url("../fonts/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VoniqSans";
  src: url("../fonts/Poppins-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   1. Variables & Reset
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette (from the VONIQ brand brief — keep in sync if it changes) */
  --ink: #080A0D;          /* primary text, near-black */
  --charcoal: #15181D;     /* dark surfaces: header, hero, footer */
  --white: #FFFFFF;
  --fog: #F4F6F8;          /* light section backgrounds */
  --blue: #12B8F4;         /* electric blue — primary accent / CTAs */
  --blue-deep: #0877B5;    /* deep blue — hover states, gradients */

  --ink-soft: #4A5058;             /* secondary text on light backgrounds */
  --line: rgba(8, 10, 13, 0.10);   /* hairline borders on light bg */
  --line-dark: rgba(255, 255, 255, 0.12); /* hairline borders on dark bg */
  --surface-alt: #ECEFF2;          /* slightly deeper than --fog, for zebra sections */

  /* Self-hosted (see section 0 above for why these are Poppins, not the
     original Space Grotesk / Manrope, and how to swap the real ones back in) */
  --font-display: "VoniqSans", "Segoe UI", sans-serif;
  --font-body: "VoniqSans", "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --max-width: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;

  --shadow-elevated: 0 18px 40px rgba(8, 10, 13, 0.16);
  --shadow-soft: 0 8px 24px rgba(8, 10, 13, 0.08);

  --header-h: 108px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
}

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -------------------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.65rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue-deep);
  margin-bottom: var(--space-xs);
}

.section-head { max-width: 640px; margin-bottom: var(--space-md); }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

.text-soft { color: var(--ink-soft); }
.text-center { text-align: center; margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: var(--space-xl) 0; }
.section-tight { padding: var(--space-lg) 0; }
.bg-fog { background: var(--fog); }
.bg-charcoal { background: var(--charcoal); color: var(--white); }
.bg-charcoal .text-soft { color: rgba(255,255,255,0.68); }

.divider-line {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-lg) 0;
  color: var(--line);
}
.divider-line svg { flex-shrink: 0; }
.divider-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.bg-charcoal .divider-line::after,
.bg-charcoal .divider-line { color: var(--line-dark); }
.bg-charcoal .divider-line::after { background: var(--line-dark); }

.grid { display: grid; gap: var(--space-md); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--blue); color: var(--ink); padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------------------
   4. Buttons & form fields
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  /* Deliberately NOT white-space: nowrap (mobile overflow fix, Phase 9 PART
     1.4): a button stretched to fill a narrow flex/grid card (e.g.
     .repair-card, .product-actions) would otherwise be forced to its
     unbroken text's full min-content width, which can exceed the card's
     available space and bleed past the viewport edge — the exact cause of
     the reported /repair.html horizontal-scroll bug. Letting a label wrap
     onto a second line, on the rare narrow case where it doesn't fit, costs
     nothing visually when space is normal (unchanged single-line rendering)
     and is strictly safer than an overflowing page. */
  text-align: center;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--blue); color: var(--ink); }
.btn-primary:hover { background: var(--blue-deep); color: var(--white); }

.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--blue-deep); }

.btn-outline { background: transparent; border-color: currentColor; color: inherit; }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-deep); }

.bg-charcoal .btn-outline { border-color: rgba(255,255,255,0.55); color: var(--white); }
.bg-charcoal .btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.65rem 1.2rem; font-size: 0.88rem; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-sm);
}
.field label { font-weight: 600; font-size: 0.92rem; }
.field input,
.field select,
.field textarea {
  /* Phase 9 PART 6: a flex column's children default to min-width:auto,
     which for a bare <input>/<textarea>/<select> resolves to the
     browser's own native intrinsic width (historically ~20 characters'
     worth, in whatever font is applied) -- not 0. That floor can exceed
     the available track width at the tightest mobile viewports (it did
     here, once the self-hosted font's slightly wider glyphs pushed it
     just past 320px on a 360px screen), causing exactly the kind of
     horizontal page-scroll bug PART 1 #4 already fixed once, so it's
     fixed the same permanent way here: force the intrinsic floor to 0
     and let width:100% (the actual intent) govern instead, regardless
     of viewport width or font metrics. */
  width: 100%;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue); }
.field textarea { resize: vertical; min-height: 120px; }
.field-hint { font-size: 0.85rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   5. Announcement bar + Header + Mobile nav
   ------------------------------------------------------------------------- */
.announcement {
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem var(--gutter);
  letter-spacing: 0.01em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--charcoal);
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 76px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}
.logo span { color: var(--blue); }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.main-nav ul { display: flex; gap: 1.6rem; }
.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  transition: color 0.15s ease;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--blue);
}

.header-actions { display: flex; align-items: center; gap: 0.9rem; }

.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--white);
  background: transparent;
  border: none;
  transition: background 0.15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.1); }

.cart-count {
  position: absolute; top: -2px; right: -2px;
  background: var(--blue);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px;
}
.cart-count[data-count="0"] { display: none; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none; background: transparent; color: var(--white);
  align-items: center; justify-content: center;
}

.search-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--charcoal);
  border-bottom: 1px solid var(--line-dark);
  padding: var(--space-sm) var(--gutter);
  display: none;
}
.search-panel.open { display: block; }
.search-panel form { max-width: var(--max-width); margin: 0 auto; display: flex; gap: 0.6rem; }
.search-panel input {
  flex: 1;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-dark);
  background: rgba(255,255,255,0.06);
  color: var(--white);
}
.search-panel input::placeholder { color: rgba(255,255,255,0.55); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--charcoal);
  z-index: 55;
  padding: var(--space-md) var(--gutter);
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.2rem; }
.mobile-nav a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav .mobile-contact { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 0.75rem; }

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
.hero {
  background: var(--charcoal);
  color: var(--white);
  overflow: hidden;
  position: relative;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin-bottom: var(--space-sm); }
.hero-copy .lede { font-size: 1.15rem; color: rgba(255,255,255,0.75); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: var(--space-md) 0; }

.trust-points { display: flex; flex-direction: column; gap: 0.55rem; }
.trust-points li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.95rem; color: rgba(255,255,255,0.82);
}
.trust-points svg { flex-shrink: 0; color: var(--blue); }

.hero-visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
.hero-visual .frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--line-dark);
}
.hero-visual img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Phase 9 PART 6: the hero used to show a hot-linked Unsplash stock photo
   here. No real VONIQ photo was available locally to self-host instead
   (see js/products-data.js's illustrations comment), so this uses the
   same "no real photo yet" treatment already established for the product
   detail page (.pd-gallery-main.is-illustration) rather than a thin
   line-icon stretched into a 420x420 frame doing nothing to look intentional. */
.hero-visual .frame.is-illustration {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 30% 25%, rgba(18,184,244,0.22), transparent 55%), var(--charcoal);
}
.hero-visual .frame.is-illustration svg { width: 46%; height: auto; color: var(--blue); }
.hero-badge {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.15rem;
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transform: rotate(2deg);
}
.hero-badge .badge-number { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--blue-deep); }
.hero-badge .badge-label { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.2; }

/* -------------------------------------------------------------------------
   7. Trust strip
   ------------------------------------------------------------------------- */
.trust-strip {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding: var(--space-md) var(--gutter);
}
.trust-strip .item { display: flex; align-items: flex-start; gap: 0.7rem; }
.trust-strip svg { color: var(--blue-deep); flex-shrink: 0; margin-top: 2px; }
.trust-strip .item strong { display: block; font-family: var(--font-display); font-size: 0.98rem; }
.trust-strip .item span { font-size: 0.85rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   8. Category bento grid
   ------------------------------------------------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.category-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: var(--charcoal);
}
.category-card.is-large { min-height: 300px; }
.category-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55;
}
.category-card .illustration-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(18,184,244,0.35), transparent 60%), var(--charcoal);
}
.category-card .illustration-bg svg { position: absolute; right: 8%; top: 12%; width: 42%; height: auto; color: rgba(255,255,255,0.18); }
.category-card-body {
  position: relative; z-index: 1;
  padding: var(--space-sm);
  background: linear-gradient(0deg, rgba(8,10,13,0.85) 0%, rgba(8,10,13,0.05) 90%);
  width: 100%;
}
.category-card h3 { margin-bottom: 0.3rem; }
.category-card p { font-size: 0.88rem; color: rgba(255,255,255,0.78); margin-bottom: 0.9rem; }

/* -------------------------------------------------------------------------
   9. Product cards + grid + illustrated media
   ------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }

.product-media {
  aspect-ratio: 1 / 1;
  background: var(--fog);
  position: relative;
  overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media.is-illustration {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(18,184,244,0.16), transparent 55%), var(--charcoal);
}
.product-media.is-illustration svg { width: 46%; height: auto; color: var(--blue); }
.product-media .stock-flag {
  position: absolute; top: 0.7rem; left: 0.7rem;
  background: var(--white); color: var(--ink);
  font-size: 0.72rem; font-weight: 700;
  padding: 0.3rem 0.6rem; border-radius: var(--radius-pill);
}

.product-body { padding: var(--space-sm); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.product-category { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-deep); font-weight: 700; }
.product-body h3 { font-size: 1.05rem; line-height: 1.3; }
.product-body .desc { font-size: 0.87rem; color: var(--ink-soft); flex: 1; }
.product-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.3rem; }
.product-price { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.product-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.product-actions .btn { flex: 1; min-width: 0; padding: 0.7rem 1rem; font-size: 0.85rem; }

/* -------------------------------------------------------------------------
   10. Why Shop VONIQ
   ------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.value-item { display: flex; gap: 1rem; }
.value-item .icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--fog);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-deep);
}
.value-item h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.value-item p { font-size: 0.92rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   11. About / story blocks
   ------------------------------------------------------------------------- */
.story-block { display: grid; gap: var(--space-md); }
.story-block .lede { font-size: 1.2rem; font-family: var(--font-display); font-weight: 500; }
.founded-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--fog); border-radius: var(--radius-pill);
  padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 700;
  margin-bottom: var(--space-sm);
}
.founded-badge svg { color: var(--blue-deep); }

.differentiators { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.differentiators .item { padding: var(--space-sm); background: var(--fog); border-radius: var(--radius-md); }
.differentiators h3 { margin-bottom: 0.3rem; font-size: 1.1rem; } /* was h4; promoted to h3 in Phase 9 PART 6 to fix a skipped heading level (both usages sit directly under an <h2>). font-size pinned to the old h4 size on purpose, so this card component looks exactly the same. */
.differentiators p { font-size: 0.9rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   12. FAQ accordion
   ------------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  background: none; border: none;
  padding: 1.3rem 0.2rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.faq-question .plus { flex-shrink: 0; transition: transform 0.2s ease; color: var(--blue-deep); }
.faq-item[data-open="true"] .plus { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-answer p { padding: 0 0.2rem 1.3rem; color: var(--ink-soft); font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   13. Contact + generic forms
   ------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.contact-methods { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-method { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-method .icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--fog); display: flex; align-items: center; justify-content: center;
  color: var(--blue-deep); flex-shrink: 0;
}
.contact-method a, .contact-method span.value { font-weight: 600; }
.contact-method p { font-size: 0.85rem; color: var(--ink-soft); }

.form-status {
  display: none;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: rgba(18,184,244,0.12);
  color: var(--blue-deep);
  font-weight: 600;
  margin-top: var(--space-sm);
}
.form-status.visible { display: block; }

/* -------------------------------------------------------------------------
   14. Policy pages
   ------------------------------------------------------------------------- */
.policy-page .container { max-width: 820px; }
.policy-page h2 { margin-top: var(--space-lg); margin-bottom: 0.6rem; }
.policy-page h2:first-of-type { margin-top: 0; }
.policy-page p, .policy-page li { color: var(--ink-soft); font-size: 0.98rem; }
.policy-page ul { padding-left: 1.2rem; list-style: disc; margin-bottom: 1em; }
.policy-page li { margin-bottom: 0.4em; max-width: none; }

.fill-in {
  background: rgba(18,184,244,0.1);
  border: 1px dashed var(--blue-deep);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
  color: var(--blue-deep);
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}

.editor-note {
  background: var(--fog);
  border-left: 3px solid var(--blue);
  padding: var(--space-sm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}
.editor-note strong { display: block; margin-bottom: 0.2rem; font-family: var(--font-display); }

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.72); }
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) 0 var(--space-lg);
}
.footer-brand .logo { margin-bottom: 0.8rem; }
.footer-brand p { font-size: 0.9rem; max-width: 32ch; }
.footer-tagline { color: var(--blue); font-family: var(--font-display); font-weight: 600; margin-top: 0.6rem; }

.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.footer-col h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { font-size: 0.9rem; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--blue); }

.footer-cta {
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: var(--space-md) 0;
  display: flex; flex-direction: column; gap: var(--space-sm);
  align-items: flex-start;
  justify-content: space-between;
}
.footer-cta h3 { color: var(--white); max-width: 20ch; }

.footer-bottom {
  padding: var(--space-sm) 0 var(--space-lg);
  display: flex; flex-direction: column; gap: 0.6rem;
  font-size: 0.82rem;
}
.footer-bottom .credit { color: rgba(255,255,255,0.35); font-size: 0.75rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }

/* -------------------------------------------------------------------------
   16. Cart drawer + toast
   ------------------------------------------------------------------------- */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(8,10,13,0.5);
  z-index: 80;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--white);
  z-index: 81;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -12px 0 40px rgba(8,10,13,0.2);
}
.cart-drawer.open { transform: translateX(0); }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.cart-head h3 { font-size: 1.2rem; }
.cart-close { background: none; border: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cart-close:hover { background: var(--fog); }

.cart-items { flex: 1; overflow-y: auto; padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); }
.cart-line { display: flex; gap: 0.9rem; }
.cart-line .thumb { width: 66px; height: 66px; border-radius: var(--radius-sm); overflow: hidden; background: var(--fog); flex-shrink: 0; }
.cart-line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line .thumb.is-illustration { display: flex; align-items: center; justify-content: center; background: var(--charcoal); }
.cart-line .thumb.is-illustration svg { width: 60%; color: var(--blue); }
.cart-line-info { flex: 1; }
.cart-line-info h4 { font-size: 0.92rem; margin-bottom: 0.2rem; }
.qty-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.qty-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; }
.remove-line { font-size: 0.78rem; color: var(--ink-soft); text-decoration: underline; margin-top: 0.4rem; display: inline-block; }
.cart-empty { text-align: center; padding: var(--space-xl) var(--space-sm); color: var(--ink-soft); }

.cart-summary { border-top: 1px solid var(--line); padding: var(--space-sm); }
.cart-subtotal { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.4rem; }
.cart-checkout-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.cart-checkout-field { padding: 0.7rem 0.85rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font-size: 0.9rem; width: 100%; }
.cart-checkout-field:focus { border-color: var(--blue); }
.cart-note { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: var(--space-sm); }
.cart-note.hidden { display: none; }

.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink); color: var(--white);
  padding: 0.85rem 1.4rem; border-radius: var(--radius-pill);
  font-size: 0.9rem; font-weight: 600;
  z-index: 90; opacity: 0; pointer-events: none;
  transition: all 0.2s ease;
  display: flex; align-items: center; gap: 0.5rem;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: var(--blue); }

/* -------------------------------------------------------------------------
   17. Product detail page
   ------------------------------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.pd-gallery-main { border-radius: var(--radius-lg); overflow: hidden; background: var(--fog); aspect-ratio: 1/1; margin-bottom: 0.8rem; }
.pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery-main.is-illustration { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, rgba(18,184,244,0.18), transparent 55%), var(--charcoal); }
.pd-gallery-main.is-illustration svg { width: 40%; height: auto; color: var(--blue); }
.pd-thumbs { display: flex; gap: 0.6rem; }
.pd-thumbs .thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--line); cursor: pointer; background: var(--fog); }
.pd-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs .thumb.active { border-color: var(--blue); }

.pd-info .product-category { display: block; margin-bottom: 0.4rem; }
.pd-info h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 0.5rem; }
.pd-price-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: var(--space-sm); }
.pd-price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.pd-availability { font-size: 0.85rem; font-weight: 700; color: #1c8a4c; background: rgba(28,138,76,0.1); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); }
.pd-desc { color: var(--ink-soft); margin-bottom: var(--space-sm); }
.pd-qty-row { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--space-sm); }
.pd-qty-row .qty-row { border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 0.35rem 0.7rem; }
.pd-ctas { display: flex; gap: 0.8rem; margin-bottom: var(--space-md); }
.pd-ctas .btn { flex: 1; }

.pd-block { padding: var(--space-sm) 0; border-top: 1px solid var(--line); }
.pd-block h2 { font-size: 1rem; margin-bottom: 0.6rem; } /* was h3; promoted to h2 in Phase 9 PART 6 (these sit directly under the product's <h1> with nothing between) -- font-size pinned to the old value on purpose */
.pd-block ul { display: flex; flex-direction: column; gap: 0.5rem; }
.pd-block li { display: flex; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); }
.pd-block li svg { color: var(--blue-deep); flex-shrink: 0; margin-top: 3px; }

.pd-help {
  margin-top: var(--space-md);
  background: var(--fog);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}
.pd-help h2 { margin-bottom: 0.4rem; font-size: 1rem; } /* was h3; promoted to h2 to match .pd-block above, same reason and same pinned size */
.pd-help .links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.8rem; }
.pd-help .links a { font-weight: 700; color: var(--blue-deep); }

.pd-caution {
  display: flex; gap: 0.7rem;
  background: #FFF6E5; border: 1px solid #F0D89A;
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.88rem;
  color: #6B4E00;
}
.pd-caution svg { flex-shrink: 0; }

.sticky-add-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 0.8rem var(--gutter);
  display: none;
  align-items: center; gap: 0.9rem;
  box-shadow: 0 -8px 24px rgba(8,10,13,0.08);
}
.sticky-add-bar strong { font-family: var(--font-display); }
.sticky-add-bar .btn { flex: 1; }

.related-heading { margin-bottom: var(--space-sm); }

/* -------------------------------------------------------------------------
   18. Shop page (filters/sort)
   ------------------------------------------------------------------------- */
.shop-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.shop-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-chip {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--white);
}
.filter-chip.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.shop-sort select {
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--white);
}
.shop-count { font-size: 0.85rem; color: var(--ink-soft); }
.shop-empty { padding: var(--space-xl) 0; text-align: center; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   19. Responsive breakpoints
   ------------------------------------------------------------------------- */
@media (min-width: 521px) {
  .trust-strip .container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1.1fr 1fr; }
}

@media (min-width: 821px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }

  .hero .container { grid-template-columns: 1.1fr 0.9fr; }
  .hero-visual { justify-self: end; }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
  }
  .category-card.is-large { grid-column: span 2; grid-row: span 2; min-height: 100%; }

  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-block { grid-template-columns: 1fr 1fr; align-items: start; }
  .differentiators { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-top { grid-template-columns: 1.1fr 1.4fr; }
  .footer-cta { flex-direction: row; align-items: center; }

  .product-detail { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .sticky-add-bar { display: none !important; }
}

@media (max-width: 820px) {
  .site-header .container { height: 68px; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  body.has-sticky-bar { padding-bottom: 84px; }
  .sticky-add-bar.show { display: flex; }
}

@media (min-width: 1081px) {
  .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================================
   20. Dual-path CTA (Shop Accessories / Repair Your Phone)
   ========================================================================= */
.dual-path { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.path-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}
.path-card .path-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.6rem;
}
.path-card h2 { font-size: 1.5rem; } /* was h3; promoted to h2 in Phase 9 PART 6 to fix a skipped heading level -- same font-size, kept identical on purpose */
.path-card p { color: inherit; opacity: 0.85; max-width: 34ch; }
.path-card .btn { align-self: flex-start; margin-top: 0.6rem; }

.path-card.path-shop { background: var(--fog); color: var(--ink); }
.path-card.path-shop .path-icon { background: var(--white); color: var(--blue-deep); }

.path-card.path-repair { background: var(--charcoal); color: var(--white); }
.path-card.path-repair .path-icon { background: rgba(18,184,244,0.14); color: var(--blue); }
.path-card.path-repair::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(18,184,244,0.22), transparent 55%);
  pointer-events: none;
}

/* =========================================================================
   21. Repair categories grid
   ========================================================================= */
.repair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.repair-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--white);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.repair-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.repair-card .repair-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--fog);
  color: var(--blue-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.3rem;
}
.repair-card .repair-icon svg { width: 60%; height: 60%; }
.repair-card h3 { font-size: 1.02rem; }
.repair-card p { font-size: 0.87rem; color: var(--ink-soft); flex: 1; }
.repair-card .repair-price { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--blue-deep); }
.repair-card .btn { margin-top: 0.4rem; }

/* =========================================================================
   22. How Repair Works (process steps)
   ========================================================================= */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  counter-reset: step;
}
.process-step {
  position: relative;
  padding: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.bg-charcoal .process-step { background: rgba(255,255,255,0.04); border-color: var(--line-dark); }
.process-step .step-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.4rem;
}
.process-step h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.process-step p { font-size: 0.88rem; color: var(--ink-soft); }
.bg-charcoal .process-step p { color: rgba(255,255,255,0.68); }
.process-arrow { display: none; }

/* =========================================================================
   23. Repair request form
   ========================================================================= */
.repair-form-wrap {
  background: var(--fog);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-sm); }
.form-row-2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-sm); }
fieldset { border: none; padding: 0; margin: 0 0 var(--space-sm); }
fieldset legend { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; padding: 0 0 0.6rem; }

.radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; }
.radio-option, .checkbox-option {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.92rem;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}
.radio-option input, .checkbox-option input { margin-top: 3px; flex-shrink: 0; }
.radio-option:has(input:checked), .checkbox-option:has(input:checked) { border-color: var(--blue); background: rgba(18,184,244,0.06); }

.consent-box {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.consent-box input { margin-top: 3px; flex-shrink: 0; }

.passcode-note {
  display: flex; gap: 0.7rem;
  background: rgba(18,184,244,0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
  color: var(--ink);
}
.passcode-note svg { flex-shrink: 0; color: var(--blue-deep); }

/* =========================================================================
   24. Quote disclosure list + repair trust strip
   ========================================================================= */
.disclosure-list { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.disclosure-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}
.disclosure-item h3 { font-size: 0.95rem; margin-bottom: 0.3rem; } /* was h4; promoted to h3 in Phase 9 PART 6 (these 9 items sit directly under an <h2> with nothing between) -- font-size pinned to the old value on purpose */
.disclosure-item p { font-size: 0.85rem; color: var(--ink-soft); }

.repair-nav-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-sm); }

/* Config-driven text: no visual treatment needed, it should read as
   ordinary copy whether showing a confirmed value or the fallback. */
[data-config] { }

/* =========================================================================
   25. Responsive additions for repair sections
   ========================================================================= */
@media (min-width: 521px) {
  .repair-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 821px) {
  .dual-path { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  .disclosure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

/* =========================================================================
   26. Repair quote wizard
   ========================================================================= */
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.wizard-progress .wp-step {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
}
.wizard-progress .wp-dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--ink-soft);
  flex-shrink: 0;
  background: var(--white);
}
.wizard-progress .wp-step.is-active .wp-dot { border-color: var(--blue); color: var(--blue-deep); background: rgba(18,184,244,0.08); }
.wizard-progress .wp-step.is-active { color: var(--ink); }
.wizard-progress .wp-step.is-done .wp-dot { border-color: var(--blue-deep); background: var(--blue-deep); color: var(--white); }
.wizard-progress .wp-line { flex: 1; height: 1px; background: var(--line); min-width: 12px; }

.wizard-step[hidden] { display: none !important; }
[hidden] { display: none !important; }
.wizard-step h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.wizard-step > p.field-hint { margin-bottom: var(--space-sm); }

.option-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: var(--space-sm); }
.option-card {
  position: relative;
  display: flex; align-items: center; gap: 0.7rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.option-card:has(input:checked) { border-color: var(--blue); background: rgba(18,184,244,0.06); }
/* Phase 9 PART 6: the real radio input above is visually hidden (opacity:0) so this
   label can draw its own custom selected state -- but that means the global
   :focus-visible outline rule (set on the input itself when Tab/arrow keys move
   focus to it) was being drawn on an invisible element, leaving keyboard users with
   no visible indication of which option card currently has focus. Mirroring the
   outline onto the visible wrapper via :has() fixes that without touching the
   native input's real keyboard behavior (Tab/arrow-key selection still works
   exactly as before). */
.option-card:has(input:focus-visible) { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.option-card.is-locked { border-color: var(--blue); background: rgba(18,184,244,0.06); cursor: default; }
.option-card.is-disabled { opacity: 0.45; cursor: not-allowed; background: var(--fog); }
.option-card.is-disabled .opt-label { color: var(--ink-soft); }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card .opt-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--fog);
  color: var(--blue-deep);
  display: flex; align-items: center; justify-content: center;
}
.option-card .opt-icon svg { width: 60%; height: 60%; }
.option-card .opt-label { font-weight: 700; font-size: 0.95rem; }
.option-card .opt-sub { display: block; font-weight: 500; font-size: 0.8rem; color: var(--ink-soft); }
.option-card .opt-check { margin-left: auto; color: var(--blue-deep); opacity: 0; flex-shrink: 0; }
.option-card:has(input:checked) .opt-check { opacity: 1; }

.model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: var(--space-sm); max-height: 340px; overflow-y: auto; padding: 0.2rem; }
.model-chip {
  display: flex; align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
}
.model-chip input { position: absolute; opacity: 0; pointer-events: none; }
.model-chip:has(input:checked) { border-color: var(--blue); background: rgba(18,184,244,0.08); color: var(--blue-deep); }
/* Phase 9 PART 6: same visually-hidden-input focus-visibility gap as .option-card
   above, fixed the same way. */
.model-chip:has(input:focus-visible) { outline: 2.5px solid var(--blue); outline-offset: 2px; }

.wizard-summary {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  background: var(--fog);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
}
.wizard-summary strong { font-family: var(--font-display); }
.wizard-summary .change-link { margin-left: auto; color: var(--blue-deep); font-weight: 700; text-decoration: underline; }

.wizard-nav { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: var(--space-sm); }
.wizard-nav .btn { flex: 1; }
.wizard-error {
  display: none;
  color: #B3261E;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.wizard-error.visible { display: block; }

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

/* =========================================================================
   27. Repair page sticky mobile CTA
   ========================================================================= */
@media (max-width: 820px) {
  body.has-repair-sticky-bar { padding-bottom: 84px; }
  #repairStickyBar { display: flex; }
}
@media (min-width: 821px) {
  #repairStickyBar { display: none !important; }
}
#repairStickyBar .btn { font-size: 0.82rem; padding: 0.7rem 0.5rem; }

/* =========================================================================
   28. Doorstep service-zone banner, price breakdown, booking confirmation,
       repair tracking, and the repair-location map embed
   ========================================================================= */
.zone-banner {
  margin-top: var(--space-sm);
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
}
.zone-banner:not(:empty) { display: flex; }
.zone-banner strong { font-family: var(--font-display); font-size: 0.95rem; }
.zone-banner.is-ok { border-color: #1f9d5a; background: rgba(31,157,90,0.07); }
.zone-banner.is-ok strong { color: #1f9d5a; }
.zone-banner.is-info { border-color: var(--blue-deep); background: rgba(18,184,244,0.06); }
.zone-banner.is-info strong { color: var(--blue-deep); }
.zone-banner.is-bad { border-color: #c0392b; background: rgba(192,57,43,0.06); }
.zone-banner.is-bad strong { color: #c0392b; }

.price-breakdown {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.price-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.price-row:last-child { border-bottom: none; }
.price-row span:last-child { font-weight: 700; text-align: right; }
.price-row .is-pending { color: var(--ink-soft); font-weight: 600; font-style: italic; }
.price-row-total {
  background: var(--fog);
  font-family: var(--font-display);
  font-size: 1rem;
}
.price-row-total span { font-weight: 800; }

.booking-confirmation {
  border: 1px solid var(--blue-deep);
  background: rgba(18,184,244,0.06);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
}
.booking-confirmation h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.booking-confirmation p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.booking-confirmation p:last-child { margin-bottom: 0; }
.booking-confirmation.is-backend-down { border-color: #c0392b; background: rgba(192,57,43,0.06); }
.booking-confirmation.is-backend-down h3 { color: #c0392b; }
.repair-id {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-deep);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem;
  letter-spacing: 0.02em;
}

.track-result {
  margin-top: var(--space-sm);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
}
.track-result.is-found { border-color: #1f9d5a; background: rgba(31,157,90,0.05); }
.track-result.is-notfound { border-color: var(--ink-soft); background: var(--fog); }
.track-result h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.track-current-status { font-size: 0.95rem; margin-bottom: 0.8rem; }
.track-status-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.track-status-list li { padding-left: 1.4rem; position: relative; }
.track-status-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.35em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
}
.track-status-list li.is-done { color: var(--ink); }
.track-status-list li.is-done::before { background: #1f9d5a; }
.track-status-list li.is-active { color: var(--blue-deep); font-weight: 700; }
.track-status-list li.is-active::before { background: var(--blue-deep); box-shadow: 0 0 0 3px rgba(18,184,244,0.2); }
.track-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

/* Phase 9 PART 7: before/after repair photos + Google review prompt on the
   public "Track Your Repair" page (js/main.js -> renderBackendResult). */
.track-photos {
  margin-top: var(--space-sm);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.track-photos-title { font-size: 0.9rem; margin-bottom: 0.6rem; }
.track-photo-group { margin-bottom: 0.8rem; }
.track-photo-group h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.track-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
}
.track-photo-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.track-photo-card img { width: 100%; height: 100px; object-fit: cover; display: block; background: var(--fog); }
.track-photo-card figcaption { font-size: 0.72rem; color: var(--ink-soft); padding: 0.35rem 0.5rem; }

.track-review-prompt {
  margin-top: var(--space-sm);
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(18,184,244,0.06);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.track-review-prompt strong { font-size: 0.92rem; }
.track-review-prompt .field-hint { margin: 0.15rem 0 0; }
.track-review-rating { font-weight: 700; color: var(--blue-deep); margin-left: 0.3rem; white-space: nowrap; }
.track-review-prompt .btn { white-space: nowrap; }

.map-embed-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }