@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/CormorantGaramond-SemiBold.woff2?v=20260927e") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/CormorantGaramond-Bold.woff2?v=20260927e") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-Regular.woff2?v=20260927e") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-Medium.woff2?v=20260927e") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-SemiBold.woff2?v=20260927e") format("woff2");
}


/* LA Car Stereo. White page, mint cards, deep-green text, bright-green buttons and links.
   The Payment Plan pill stays orange with bold white text (--bnpl-*). Variable names match
   the AMS-21 theme so shop2.css and hubs.css keep working. */
:root {
  color-scheme: light;
  --ams-page: #FFFFFF;
  --ams-card: #ECFDF3;
  --ams-panel: #ECFDF3;
  --ams-mist: #ECFDF3;
  --ams-line: #CDEADB;
  --ams-muted: #3E6B52;
  --ams-navy: #0F5132;
  /* #15803D clears 4.5:1 for green text on white and on the mint cards. #16A34A did not. */
  --ams-blue: #15803D;
  --ams-blue-deep: #166534;
  --ams-gold: var(--ams-blue);
  --ams-gold-deep: var(--ams-blue-deep);
  --bg: var(--ams-page);
  --bg-warm: var(--ams-page);
  --surface: var(--ams-card);
  --text: var(--ams-navy);
  --muted: var(--ams-muted);
  --gold: var(--ams-blue);
  --gold-light: var(--ams-blue);
  --green: var(--ams-navy);
  --green-light: var(--ams-blue);
  --accent: var(--ams-blue);
  --link: var(--ams-blue);
  --link-hover: var(--ams-blue-deep);
  --line: var(--ams-line);
  --field-line: var(--ams-line);
  --cta: var(--ams-blue);
  --cta-text: #FFFFFF;
  --cta-hover: var(--ams-blue-deep);
  --cta-gradient: linear-gradient(180deg, var(--ams-blue) 0%, var(--ams-blue) 58%, var(--ams-blue-deep) 100%);
  --cta-hover-gradient: linear-gradient(180deg, var(--ams-blue-deep) 0%, #166534 100%);
  --outline-hover: var(--ams-blue);
  --header-bg: #FFFFFF;
  --nav-bg: #FFFFFF;
  --nav-text: var(--ams-navy);
  --footer-bg: var(--ams-panel);
  --bar-bg: rgba(255, 255, 255, 0.95);
  --bar-shadow: 0 -10px 28px rgba(15, 81, 50, 0.10);
  --field: var(--ams-card);
  --shadow: 0 12px 32px rgba(15, 81, 50, 0.10);
  --blackletter: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --logo-edge: none;
  --glow: 0 0 0 1px rgba(22, 163, 74, 0.45), 0 0 14px rgba(22, 163, 74, 0.25);
  --page-wash: radial-gradient(900px 420px at 0% 0%, rgba(22, 163, 74, 0.05), transparent 62%), radial-gradient(640px 280px at 100% 0%, rgba(22, 163, 74, 0.03), transparent 55%), linear-gradient(180deg, var(--ams-page) 0, var(--ams-page) 18rem, var(--ams-card) 52rem);
  /* Payment Plan pill stays orange. Bold white text. */
  --bnpl-bg: #C2410C;
  --bnpl-bg-hover: #9A3412;
  --bnpl-text: #FFFFFF;
}

.shop-embed {
  color-scheme: light;
  --bg: var(--ams-page);
  --surface: var(--ams-card);
  --text: var(--ams-navy);
  --muted: var(--ams-muted);
  --line: var(--ams-line);
  --field: var(--ams-card);
  --field-line: var(--ams-line);
  --link: var(--ams-blue);
  --link-hover: var(--ams-blue-deep);
  --accent: var(--ams-blue);
  --outline-hover: var(--ams-blue);
  --shadow: 0 10px 28px rgba(15, 81, 50, 0.08);
  --shop-canvas: var(--ams-page);
  --price: var(--ams-navy);
  --badge-bg: var(--bnpl-bg);
  --badge-text: var(--bnpl-text);
  --trust-bg: var(--ams-mist);
  --trust-text: var(--ams-navy);
  --trust-accent: var(--ams-blue);
  --chip-bg: var(--ams-mist);
  --chip-text: var(--ams-navy);
}
.shop-hero--split {
  --hero-bg: radial-gradient(700px 360px at 12% 20%, rgba(22, 163, 74, 0.10), transparent 60%), linear-gradient(135deg, var(--ams-mist) 0%, var(--ams-page) 100%);
  --hero-text: var(--ams-navy);
  --hero-muted: var(--ams-muted);
  --hero-accent: var(--ams-blue);
}

body.page-shop main,
body.page-shop main .shop-embed,
body.page-finder .shop-embed {
  color-scheme: light;
  --bg: var(--ams-page);
  --surface: var(--ams-card);
  --surface-2: var(--ams-card);
  --text: var(--ams-navy);
  --muted: var(--ams-muted);
  --line: var(--ams-line);
  --field: var(--ams-card);
  --field-line: var(--ams-line);
  --link: var(--ams-blue);
  --link-hover: var(--ams-blue-deep);
  --accent: var(--ams-blue);
  --outline-hover: var(--ams-blue);
  --shadow: 0 14px 34px rgba(15, 81, 50, 0.10);
  --shop-canvas: var(--ams-page);
  --price: var(--ams-navy);
  --badge-bg: var(--bnpl-bg);
  --badge-text: var(--bnpl-text);
  --trust-bg: var(--ams-mist);
  --trust-text: var(--ams-navy);
  --trust-accent: var(--ams-blue);
  --chip-bg: var(--ams-mist);
  --chip-text: var(--ams-navy);
}

.site-footer {
  --text: var(--ams-navy);
  --muted: var(--ams-muted);
  --link: var(--ams-blue);
  --link-hover: var(--ams-blue-deep);
  --line: var(--ams-line);
  color: var(--text);
}
.site-footer .logo { color: var(--ams-blue); }

.price-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text); }
.price-split { display: block; margin-top: 0.15rem; font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.price-ask { margin: 0.55rem 0 0; font-size: 0.92rem; }

.home-install { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; list-style: none; margin: 0; padding: 0; }
.home-install a { display: grid; gap: 0.35rem; min-height: 7.5rem; padding: 1.1rem 1rem; border-radius: 8px; background: var(--ams-card); box-shadow: inset 0 0 0 1px var(--ams-line); color: var(--text); text-decoration: none; }
.home-install a:hover { box-shadow: inset 0 0 0 2px var(--ams-blue); }
.home-install__name { font-family: Outfit, Inter, sans-serif; font-size: 1.25rem; font-weight: 650; color: var(--text); }
.home-install__from { font-weight: 700; color: var(--link); }
@media (max-width: 800px) {
  .home-install { grid-template-columns: 1fr 1fr; }
}

:root {
  --header: 4.25rem;
  --bar: 4.6rem;
  /* Headings use the clean body family; the blackletter is for the logo only (Alex, 2026-09-29). */
  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --measure: 70ch;
  --pad: clamp(1rem, 3vw, 2rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--bg-warm);
  background-image: var(--page-wash);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom));
}

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

a { color: var(--link); text-underline-offset: 0.18em; }

a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--cta);
  color: var(--cta-text);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 8px;
}

.skip:focus { top: 0.5rem; }

.wrap {
  width: min(1120px, calc(100% - 2 * var(--pad)));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.site-header::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--gold, var(--accent)), var(--purple, var(--accent)) 58%, var(--purple-vivid, transparent));
}

/* Desktop header pills (Call / Text / Email): one matched set, no digits printed. */
.top-contact {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0;
}

.top-contact .btn {
  min-height: 2.25rem;
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  gap: 0.45rem;
}
.top-contact .btn-icon { width: 0.9rem; height: 0.9rem; }
.top-contact .btn-outline { background: rgba(22, 163, 74, 0.04); }
.top-contact .btn-outline:hover { background: rgba(22, 163, 74, 0.12); border-color: var(--gold); }

.header-row {
  min-height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--gold, var(--text));
  text-decoration: none;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: var(--logo-edge, none);
  min-width: 0;
}

.logo:hover { color: var(--gold-light, var(--link-hover)); }

.logo img {
  width: auto;
  height: 42px;
  border-radius: 0;
  flex: none;
}

.logo-name { white-space: nowrap; }

.footer-logo { margin: 0 0 0.9rem; }

@media (min-width: 768px) {
  .logo { font-size: 1.45rem; gap: 0.65rem; }
  .logo img { height: 52px; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  border: 1px solid var(--field-line, var(--line));
  background: var(--surface);
  color: var(--text);
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 8px;
}

.nav {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ams-page); /* 5.30: header/nav/drawer are all flat white now */
  --nav-text: #0F5132;
  --nav-hot: #16A34A;
  border-bottom: 1px solid var(--line);
  padding: 0.5rem var(--pad) 1rem;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity 0.22s ease, transform 0.22s ease; }

.nav a {
  color: var(--nav-text, var(--text));
  text-decoration: none;
  padding: 0.85rem 0;
  min-height: 3rem;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--nav-hot, var(--gold, var(--accent)));
  box-shadow: inset 0 -2px 0 var(--nav-hot, var(--gold, var(--accent)));
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 1.1rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crumbs a { color: var(--muted); text-decoration: none; }

.crumbs a:hover { color: var(--link); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}

h1 { font-size: clamp(1.85rem, 3.1vw, 2.65rem); max-width: 22ch; }

h2 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

h3 { font-size: 1.55rem; }

.lead {
  font-size: 1.05rem;
  max-width: var(--measure);
  color: var(--text);
}

.banner {
  margin: 1.1rem 0 1.4rem;
}

.banner img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero-reel {
  margin: 0 0 1.35rem;
  background: var(--bg);
}

.hero-reel__frame {
  position: relative;
  background: var(--bg);
  line-height: 0;
}

.hero-reel__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
  pointer-events: none;
}

.hero-reel__poster--mobile { display: none; }

.hero-reel.is-playing .hero-reel__poster { visibility: hidden; }

.hero-reel__video {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg);
  pointer-events: none;
}

.hero-reel__video::-webkit-media-controls,
.hero-reel__video::-webkit-media-controls-enclosure,
.hero-reel__video::-webkit-media-controls-panel,
.hero-reel__video::-webkit-media-controls-play-button,
.hero-reel__video::-webkit-media-controls-start-playback-button,
.hero-reel__video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
  pointer-events: none;
}

.hero-reel__video--desktop { aspect-ratio: 16 / 9; }
.hero-reel__video--mobile { display: none; aspect-ratio: 9 / 16; }

/* Desktop reel only (the mobile/portrait rules below are unchanged): about two-thirds
   of a full-bleed 16:9 frame, so a laptop shows the whole shot without scrolling. */
@media (min-width: 768px) and (orientation: landscape) {
  .hero-reel__video--desktop {
    width: min(100%, calc(66vh * 16 / 9));
    max-height: 66vh;
    margin-inline: auto;
    object-fit: contain;
  }
}

@media (max-width: 767px) {
  .hero-reel__video--desktop,
  .hero-reel__poster--desktop { display: none; }
  .hero-reel__video--mobile { display: block; }
  .hero-reel__poster--mobile { display: block; }
}

@media (orientation: portrait) {
  .hero-reel__frame { display: flex; justify-content: center; }
  .hero-reel__video--mobile {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - var(--header) - var(--bar) - 8.5rem);
    max-height: calc(100svh - var(--header) - var(--bar) - 8.5rem);
    object-fit: contain;
  }
}

.prose { max-width: var(--measure); }

.prose p,
.stack p { margin: 0 0 1rem; }

.section { padding: 1.15rem 0 1.6rem; }

.page-intro {
  padding: 1.35rem 0 0.35rem;
}

.page-intro h1 { margin-bottom: 0.55rem; }

.page-intro .lead { margin-top: 0; }

.page-updated { margin: 0.35rem 0 0; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--muted, var(--text)); opacity: 0.85; }

.copy-stack {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.copy-stack .prose,
.section.prose { max-width: 70ch; }

.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.4rem 0;
}

.card-grid,
.provider-grid,
.tile-grid,
.gallery {
  display: grid;
  gap: 0.9rem;
}

.card,
.provider,
.tile,
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.card, .provider { padding: 1rem 1.05rem 1.1rem; }

.card a.title,
.tile span {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0.35rem 0;
}

.card a.title:hover,
.tile:hover span { color: var(--link); }

.card p, .provider p, .tile p { margin: 0.35rem 0 0; color: var(--muted); }

.confirm {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--cta-text);
  background: var(--cta-gradient, var(--cta));
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  font-style: normal;
}

.confirm:hover { background: var(--cta-hover); color: var(--cta-text); }

.tile { color: inherit; text-decoration: none; overflow: hidden; }

.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.tile span { padding: 0.85rem 1rem 0; }

.tile .confirm { margin: 0.6rem 1rem 1rem; }

.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 1rem;
}

.plain-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.hours, .nap {
  display: grid;
  gap: 0.25rem;
}

.hours div, .nap p { margin: 0; }

.hours dt { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em; }
.hours dd { margin: 0 0 0.45rem; }

.paylater-note {
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 0.9rem;
  max-width: var(--measure);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 5.35: a quick light sweep on hover, primary buttons only. */
.btn-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-cta::after { transition: transform 0.55s ease; }
  .btn-cta:hover::after { transform: translateX(420%) skewX(-18deg); }
}

.btn-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}

.btn-sm {
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  gap: 0.3rem;
}

.btn-sm .btn-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.btn-cta {
  background: var(--cta-gradient, var(--cta));
  color: var(--cta-text);
  font-weight: 600;
}
.btn-cta:hover { background: var(--cta-hover-gradient, var(--cta-hover)); color: var(--cta-text); }
.btn-outline {
  background: transparent;
  color: var(--gold, var(--text));
  border-color: var(--gold, var(--field-line, var(--line)));
}
.btn-outline:hover {
  border-color: var(--purple-vivid, var(--outline-hover));
  color: var(--gold-light, var(--outline-hover));
  box-shadow: var(--glow, none);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 0; }

/* 5.38: the Buy now, pay later / Payment Plan CTA, wherever it is its own button (never applied to
   plain nav/footer links that just mention payment in running text). !important beats .btn-outline/.btn-cta. */
.pay-pill {
  background: var(--bnpl-bg) !important;
  border-color: var(--bnpl-bg) !important;
  color: var(--bnpl-text) !important;
  font-weight: 700;
}
.pay-pill:hover, .pay-pill:focus-visible {
  background: var(--bnpl-bg-hover) !important;
  border-color: var(--bnpl-bg-hover) !important;
  color: var(--bnpl-text) !important;
}

.form {
  display: grid;
  gap: 0.8rem;
  max-width: 40rem;
}

label { display: grid; gap: 0.3rem; font-size: 0.86rem; letter-spacing: 0.04em; }

input, select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--field-line, var(--line));
  background: var(--field);
  color: var(--text);
  font: inherit;
  border-radius: 10px;
}

input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--accent); }

select option { background: var(--field); color: var(--text); }

textarea { min-height: 8rem; resize: vertical; }

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { min-height: 1.4em; color: var(--muted); }

.faq details { padding: 0.4rem 1rem; }
.faq summary { cursor: pointer; min-height: 3rem; display: flex; align-items: center; font-weight: 500; }
.faq details p { margin-top: 0; color: var(--muted); }

.map-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.22);
  pointer-events: none;
}

.map {
  width: 100%;
  min-height: 280px;
  height: 360px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  filter: brightness(0.68) saturate(0.8);
}

.site-footer {
  margin-top: 2.4rem;
  padding: 2rem 0 2.4rem;
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
  color: var(--muted);
}

.footer-grid {
  display: grid;
  gap: 1.4rem;
}

.site-footer a { color: var(--link); }
.site-footer a:hover { color: var(--link-hover); }
/* 5.35: a soft glow on footer + in-page prose links -- text-shadow never shifts layout. */
.site-footer a, .hub-sec__intro a, .hub-faq__list a { transition: color 0.15s ease, text-shadow 0.15s ease; }
.site-footer a:hover, .site-footer a:focus-visible,
.hub-sec__intro a:hover, .hub-sec__intro a:focus-visible,
.hub-faq__list a:hover, .hub-faq__list a:focus-visible { text-shadow: 0 0 10px rgba(22, 163, 74, 0.45); }
.site-footer h2 { font-size: 1.6rem; color: var(--text); }
.fine { font-size: 0.86rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-bottom: 1rem; }
.email-cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }

.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.45rem var(--pad) calc(0.45rem + env(safe-area-inset-bottom));
  background: var(--bar-bg);
  border-top: 1px solid var(--line);
  box-shadow: var(--bar-shadow, none);
  backdrop-filter: blur(12px);
}

.mobile-cta-bar .btn {
  min-height: 2.75rem;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  padding: 0.3rem 0.5rem;
  gap: 0.35rem;
}
.mobile-cta-bar .btn-icon { width: 0.9rem; height: 0.9rem; }

@media (min-width: 720px) {
  .card-grid, .provider-grid { grid-template-columns: 1fr 1fr; }
  .tile-grid, .gallery { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (min-width: 1121px) {
  body { padding-bottom: 0; }
  .mobile-cta-bar { display: none; }
  .top-contact { display: flex; }
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.15rem 0.85rem;
    background: transparent;
    --nav-text: var(--ams-navy);
    --nav-hot: var(--gold);
    border: 0;
    padding: 0;
    max-width: 46rem;
    box-shadow: none;
  }
  .nav a {
    border: 0;
    min-height: 2.4rem;
    padding: 0.2rem 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .logo { font-size: clamp(1.2rem, 1.6vw, 1.65rem); gap: 0.65rem; }
  .logo img { height: 52px; }
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

.loc-hub h1,
.loc-city h1 { max-width: 18em; }

.loc-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.loc-note {
  max-width: 42rem;
  margin: 0 0 1rem;
  color: var(--muted);
}

.loc-search {
  display: grid;
  gap: 0.35rem;
  max-width: 36rem;
  margin: 0 0 0.45rem;
}

.loc-count {
  margin: 0.35rem 0 1.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loc-empty { color: var(--muted); }

.city-nap {
  display: grid;
  align-items: start;
  gap: 0.9rem;
  margin: 1.2rem 0 1.6rem;
}

.city-nap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.15rem 1.25rem 1.2rem;
  box-shadow: var(--shadow);
}

.city-nap-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.7rem;
}

.city-nap-card p { margin: 0 0 0.45rem; }
.city-nap-card p:last-child { margin-bottom: 0; }

.city-region { margin: 0 0 2.1rem; }

.city-region-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.city-region-head h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2vw, 2rem);
}

.city-region-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

a.city-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 7rem;
  padding: 0.9rem 0.95rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

a.city-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  color: inherit;
}

.city-tile-top { display: block; }

.city-tile-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  margin-bottom: 0.55rem;
}

.city-tile-name {
  display: block;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--text);
}

a.city-tile:hover .city-tile-name { color: var(--link); }

.city-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.city-tile-go {
  color: var(--link);
  letter-spacing: 0.16em;
}

.city-tile[hidden],
.city-region[hidden],
.loc-empty[hidden] { display: none !important; }

.loc-fallback {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15rem;
  margin: 0.4rem 0 1.2rem;
  padding: 1.3rem 1.25rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(165deg, var(--ams-mist), var(--ams-page));
  box-shadow: inset 4px 0 0 var(--accent), var(--shadow);
}

.loc-fallback p { margin: 0; }

.loc-fallback-name {
  font-family: var(--display);
  font-size: clamp(2.8rem, 8vw, 4.8rem);
  font-weight: 600;
  line-height: 0.95;
  color: var(--text);
}

.loc-banner {
  position: relative;
  margin-top: 0.35rem;
  overflow: hidden;
}

.loc-banner img {
  object-fit: cover;
}

.loc-banner__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 2.6rem 1rem 0.85rem;
  color: var(--gold-light);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 6.4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.92);
  background: linear-gradient(to top, rgba(20, 20, 22, 0.84), rgba(20, 20, 22, 0));
  pointer-events: none;
}

.loc-banner__name::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-bottom: 0.4rem;
  background: var(--accent);
}

@media (max-width: 767px) {
  .loc-banner--916 .loc-banner__name {
    bottom: calc(var(--bar) + 0.35rem + env(safe-area-inset-bottom));
  }
  .loc-banner--45 img { aspect-ratio: 4 / 5; }
  .loc-banner--916 img { aspect-ratio: 9 / 16; }
  .banner--m45 img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }
  .banner--m916 img {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    object-position: center 28%;
  }
}

.loc-drive {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.15rem 1.2rem 0.35rem;
  box-shadow: var(--shadow);
}

.loc-drive h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.loc-drive h3 {
  margin: 0.2rem 0 0.55rem;
  font-size: 1.2rem;
}

.loc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.8rem 0 1rem;
}

.loc-stats div {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.75rem 0.8rem;
}

.loc-stats dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.loc-stats dd {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1;
}

/* Phones: miles and minutes side by side, the direction ("Southwest", "Noroeste") on its own row so it fits its box. */
@media (max-width: 719px) {
  .loc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-stats div:last-child { grid-column: 1 / -1; }
}

.loc-route {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.loc-route li {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
}

.loc-cta {
  margin-top: 0.4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 801px) {
  .city-nap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { background-attachment: scroll; }
  a.city-tile { transition: none; }
  a.city-tile:hover { transform: none; }
  /* 5.35: every new hover/open motion goes fully static. */
  .nav, .nav.is-open, .cat-pill, .btn-cta::after,
  .site-footer a, .hub-sec__intro a, .hub-faq__list a,
  .deal-tile, .hub-subs__more a { transition: none !important; animation: none !important; }
  .cat-pill:hover, .deal-tile:hover { transform: none !important; }
  .nav-mega.is-open > .mega { animation: none !important; }
}

/* 5.35: touch devices get a quick tap press instead of a hover that can stick. */
@media (hover: none) {
  .product-card, .hub-card, .hub-sub, .cat-pill, .home-svc, .deal-tile, .btn, .hub-subs__more a {
    transition: transform 0.1s ease;
  }
  .product-card:active, .hub-card:active, .hub-sub:active, .cat-pill:active,
  .home-svc:active, .deal-tile:active, .btn:active, .hub-subs__more a:active {
    transform: scale(0.97);
  }
}

/* Shop catalog. Colors come from the theme tokens. */
.shop-wrap {
  width: min(1240px, calc(100% - 2 * var(--pad)));
  margin-inline: auto;
}

.page-shop h1 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  max-width: 22ch;
}

.shop-hero h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }

.shop-head h1,
.shop-pdp h1 {
  font-size: clamp(1.85rem, 2.6vw, 2.45rem);
  max-width: 24ch;
}

.shop-hero {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.6rem;
  overflow: hidden;
  background: transparent;
}

.shop-hero__media {
  position: relative;
  width: 100%;
  height: min(420px, 46vw);
  min-height: 190px;
}

.shop-hero__media img,
.shop-band img,
.shop-tile__media img,
.shop-dept__media img,
.shop-head__thumb img,
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-hero__media img {
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.product-card__media img { object-fit: contain; }

.shop-hero__copy {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1240px, calc(100% - 2 * var(--pad)));
  height: auto;
  min-width: 0;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.35rem 0 0.2rem;
  background: none;
}

.shop-hero__copy .lead,
.shop-hero__copy h1,
.shop-hero__copy .btn-row { max-width: 36rem; }

.shop-eyebrow {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shop-band { background: var(--field); overflow: hidden; }

.shop-band img {
  display: block;
  height: 220px;
  max-height: 280px;
  object-fit: cover;
}

.shop-band--tall img { max-height: 420px; height: min(420px, 38vw); }

.shop-depts {
  display: grid;
  gap: 12px;
  margin: 1.15rem 0 0.4rem;
}

.shop-dept,
.shop-tile,
.shop-empty,
.shop-pickup,
.shop-close {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
}

.shop-dept {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.shop-dept:hover,
.shop-tile:hover,
.product-card:hover { border-color: var(--accent); }

.shop-dept__media,
.shop-tile__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--field);
}

.shop-dept__copy {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem 1rem;
}

.shop-dept__copy strong { font-family: var(--display); font-size: 1.7rem; font-weight: 600; }
.shop-dept__copy span { color: var(--muted); }
.shop-dept__copy em { color: var(--accent); font-style: normal; font-size: 0.85rem; }

.shop-layout {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.shop-filters > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.7rem;
  font-weight: 600;
}

.shop-filters > summary::-webkit-details-marker { display: none; }

.shop-filters > summary::marker { content: ""; }

.shop-filters > summary::before {
  content: "▶";
  flex: 0 0 auto;
  font-size: 0.7rem;
  line-height: 1;
}

.shop-filters[open] > summary::before { transform: rotate(90deg); }

.shop-sidebar a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 0.28rem 0;
}

.shop-sidebar a[aria-current="page"],
.shop-chip[aria-current="page"],
.shop-sort__btn[aria-current="true"],
.shop-facet__link[aria-current="true"] { color: var(--accent); }

.shop-side__title {
  margin: 0.85rem 0 0.25rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shop-side__dept > summary,
.shop-side__acc > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  min-height: 2rem;
  padding: 0.4rem 0;
  font-weight: 600;
}

.shop-side__dept > summary::-webkit-details-marker,
.shop-side__acc > summary::-webkit-details-marker { display: none; }

.shop-side__dept > summary::marker,
.shop-side__acc > summary::marker { content: ""; }

.shop-side__dept > summary::before,
.shop-side__acc > summary::before {
  content: "▶";
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.62rem;
  line-height: 1;
}

.shop-side__dept[open] > summary::before,
.shop-side__acc[open] > summary::before { transform: rotate(90deg); }

.shop-side__acc > summary > a {
  flex: 1 1 auto;
  min-width: 0;
}

.shop-side__dept > summary .shop-count { margin-left: auto; }

.shop-side__dept > summary { font-size: 0.95rem; }

.shop-side__sub { padding-left: 0.7rem; color: var(--muted); }

.shop-side__brandlist {
  max-height: 280px;
  overflow: auto;
  display: grid;
  padding-right: 0.2rem;
}

.shop-count { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

.shop-block { margin: 1.75rem 0; }
.shop-block > h2 { margin-bottom: 0.45rem; }
.shop-block > p { margin-top: 0; color: var(--muted); max-width: var(--measure); }

.shop-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shop-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  border-radius: 10px;
}

.shop-tile__label {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.7rem 0.75rem 0.8rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.shop-tile--text {
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  border-style: dashed;
}

.shop-tile--text .shop-tile__label { justify-content: center; }

.shop-head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0.85rem 0 0.8rem;
}

.shop-head__thumb {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--field);
  border: 1px solid var(--line);
}

.shop-head p { margin: 0.35rem 0 0; color: var(--muted); max-width: 62ch; }
.shop-guide { margin: 0.45rem 0 0; }

.shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.4rem 0 0.8rem;
}

.shop-chip,
.shop-brands a,
.shop-sort__btn,
.shop-facet__link {
  text-decoration: none;
}

.shop-chip,
.shop-brands a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
}

.shop-chip:hover,
.shop-brands a:hover { border-color: var(--accent); color: var(--accent); }

.shop-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 14px;
}

.shop-sort__label {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.15rem;
}

.shop-sort__btn {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
}

.shop-sort__btn[aria-current="true"],
.shop-chip[aria-current="page"] { border-color: var(--accent); }

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

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px 12px;
  overflow: hidden;
}

.product-card[hidden],
.shop-vehicle[hidden],
[data-shop-empty][hidden] { display: none; }

.product-card__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--field);
}

.product-card__brand {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-card__brand a { color: inherit; text-decoration: none; }
.product-card__brand a:hover { color: var(--accent); }

.product-card__name {
  margin: 0;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__name a { color: var(--text); text-decoration: none; }
.product-card__name a:hover { color: var(--accent); }

.product-card__type,
.product-card__why {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.product-card__why {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-card__specs li {
  color: var(--muted);
  background: var(--field);
  border-radius: 3px;
  padding: 0.12rem 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-card__avail {
  display: inline-flex;
  align-self: flex-start;
  margin: 0.2rem 0 0;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.72rem;
}

.product-card__contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  margin-top: auto;
  min-width: 0;
}

.product-card__contact .btn-icon { display: none; }

.product-card .btn-sm {
  min-height: 2rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.product-card__contact .btn {
  min-width: 0;
  padding-inline: 0.2rem;
  white-space: nowrap;
}

.card-link {
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 600;
}

.page-shop .btn-row { min-width: 0; max-width: 100%; }
.page-shop .btn { max-width: 100%; white-space: normal; text-align: center; }

.shop-facet__list { display: grid; }

.shop-empty,
.shop-pickup {
  padding: 1rem 1.05rem 1.15rem;
}

.shop-close {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0 0.4rem;
  padding: 1.2rem 1.1rem 1.3rem;
}

.shop-hours {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
}

.shop-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--line);
}

.shop-hours span { color: var(--muted); }

.shop-pdp {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.4rem;
}

.shop-pdp__actions { margin-top: 0.35rem; }
.shop-pdp__actions .btn { flex: 0 0 auto; }
.shop-plan { margin: 0.7rem 0 0; }
.shop-plan a { font-weight: 600; }

.shop-specs {
  width: 100%;
  border-collapse: collapse;
}

.shop-specs th,
.shop-specs td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.35rem;
  border-bottom: 1px solid var(--line);
}

.shop-specs th {
  width: 7.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.shop-vehicle { margin: 0 0 1.2rem; }
.shop-vehicle h2 { font-size: clamp(1.5rem, 2vw, 2rem); }

.brand-hero {
  display: grid;
  gap: 0;
  margin: 0.4rem 0 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.brand-hero__copy {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.brand-hero h1 { max-width: 18ch; font-size: clamp(1.85rem, 3vw, 2.5rem); }
.brand-hero__back { margin: 0.15rem 0 0.7rem; }
.brand-hero__media { min-height: 220px; background: var(--field); }
.brand-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.brand-hero__media--name {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
  padding: 1rem;
}

.brand-copy p { color: var(--muted); max-width: 68ch; }

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.brand-card {
  display: grid;
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
}

.brand-card:hover { border-color: var(--accent); color: var(--accent); }

.brand-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--field);
  overflow: hidden;
}

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

.brand-card__mark {
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1;
  text-align: center;
  padding: 0.8rem;
}

.brand-card__name {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem 0.85rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .shop-hero {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: none;
  }
  .shop-hero__media img { object-position: 60% center; }
  .shop-hero__copy {
    justify-content: flex-end;
    background: linear-gradient(180deg, transparent 20%, rgba(20, 20, 22, 0.92) 68%);
  }
  .shop-band img,
  .shop-band--tall img {
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
  }
  .shop-head__thumb { width: 64px; height: 64px; }
}

@media (min-width: 720px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-band img { height: 280px; }
}

@media (min-width: 800px) {
  .shop-depts,
  .shop-close,
  .shop-pdp { grid-template-columns: 1fr 1fr; }
  .brand-hero { grid-template-columns: 1.15fr 0.85fr; }
  .shop-pdp { align-items: start; }
}

@media (min-width: 1121px) {
  .shop-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-tiles--sub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-layout {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .shop-filters {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 6.4rem);
    overflow: auto;
    padding-right: 0.35rem;
  }
  .shop-filters > summary { display: none; }
}

/* Shop, v2: light catalog canvas, price-first cards, one clear action. Colors from theme tokens. */
.page-shop main {
  background: var(--shop-canvas, var(--bg));
  color: var(--text);
  padding-bottom: 3rem;
}
.page-shop main h1,
.page-shop main h2,
.page-shop main h3 { color: var(--text); }
.page-shop main a { color: var(--link); }
.page-shop main a:hover { color: var(--link-hover); }
.page-shop main .btn-cta,
.page-shop main .btn-cta:hover { color: var(--cta-text); }
.page-shop main .btn-outline { color: var(--text); border-color: var(--field-line); }
.page-shop main .btn-outline:hover { color: var(--accent); border-color: var(--accent); }
.page-shop .crumbs a { color: var(--muted); }

.shop-trust {
  list-style: none;
  margin: 0;
  padding: 0.7rem var(--pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.6rem;
  background: var(--trust-bg);
  color: var(--trust-text);
  font-size: 0.8rem;
}
.shop-trust strong { color: var(--trust-accent); font-weight: 600; margin-right: 0.25rem; }

.page-shop .product-grid { gap: 14px; }
.page-shop .product-card {
  position: relative;
  padding: 0;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.page-shop .product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--field-line);
}
.page-shop .product-card__media {
  position: relative;
  border-radius: 14px 14px 0 0;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.page-shop .product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  transition: transform 0.25s ease;
}
.page-shop .product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
  border-radius: 4px;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 10px 12px 4px;
  flex: 1;
}
.page-shop .product-card__brand { color: var(--muted); letter-spacing: 0.08em; }
.page-shop .product-card__name { font-family: var(--body); font-size: 0.92rem; font-weight: 600; line-height: 1.3; margin: 0; }
.page-shop .product-card__name a { color: var(--text); text-decoration: none; }
.page-shop .product-card__name a:hover { color: var(--accent); }
.page-shop .product-card__specs li { background: var(--chip-bg); color: var(--chip-text); border: 0; }
.product-card__price { margin: auto 0 0; padding-top: 0.35rem; }
.price-amount { font-size: 1.28rem; font-weight: 700; color: var(--price); letter-spacing: -0.01em; }
.product-card__price--call { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.product-card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 8px 12px 12px;
}
.page-shop .product-card__actions .btn { min-height: 2.35rem; font-size: 0.78rem; white-space: nowrap; }
.btn-icon-only { width: 2.35rem; padding: 0; }
.btn-icon-only .btn-icon { width: 1rem; height: 1rem; }

.shop-pdp__price { margin: 0.6rem 0 0.2rem; }
.shop-pdp__price .price-amount { font-size: 2.1rem; }
.shop-pdp__price.shop-pdp__price--call { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
.shop-pdp__plan {
  margin: 0.4rem 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--chip-bg);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--text);
}
.shop-pdp__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.shop-pdp__actions .btn-cta { min-width: 12rem; font-size: 1rem; }
.shop-pdp__perks {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.shop-pdp__perks li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: 0.5rem; }
.page-shop .shop-pdp__media {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.page-shop .shop-pdp__media img { object-fit: contain; padding: 5%; }
.shop-pdp__about p { max-width: 75ch; }

.page-shop .shop-filters,
.page-shop .shop-tile,
.page-shop .shop-dept,
.page-shop .shop-empty,
.page-shop .faq details,
.page-shop .shop-specs { background: var(--surface); border-color: var(--line); }
.page-shop .shop-sort__btn[aria-current="true"],
.page-shop .shop-chip[aria-current="true"] { background: var(--accent); color: #ffffff; border-color: var(--accent); }

@media (min-width: 1121px) {
  .page-shop .product-card__name { font-size: 0.95rem; }
}
.page-shop .shop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.page-shop .shop-tile { border-radius: 14px; overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.page-shop .shop-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.page-shop .shop-tile__media { background: #ffffff; aspect-ratio: 4 / 3; }
.page-shop .shop-tile__media img { object-fit: contain; padding: 8%; }
@media (min-width: 720px) { .page-shop .shop-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .page-shop .shop-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-shop .shop-head { margin: 0.4rem 0 1rem; }
.shop-head__lead { margin: 0.35rem 0 0; max-width: 70ch; color: var(--muted); font-size: 0.98rem; }
.shop-head__count { margin: 0.3rem 0 0; color: var(--accent); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.page-shop main h1 { font-family: var(--body); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.page-shop main h2 { font-family: var(--body); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.page-shop .shop-pdp h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 28ch; }
.shop-hero--split {
  display: grid;
  gap: 0;
  background: var(--hero-bg);
  color: var(--hero-text);
  overflow: hidden;
}
.shop-hero--split .shop-hero__copy {
  position: static;
  padding: clamp(1.8rem, 5vw, 4rem) var(--pad);
  max-width: 44rem;
  background: none;
}
.page-shop main .shop-hero--split h1 {
  color: var(--hero-text);
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  max-width: 16ch;
  margin: 0.3rem 0 0.9rem;
}
.shop-hero--split h1 span { color: var(--hero-accent); }
.shop-hero__eyebrow { margin: 0; color: var(--hero-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-hero__lead { margin: 0 0 1.4rem; color: var(--hero-muted); font-size: 1.02rem; max-width: 46ch; }
.shop-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.page-shop main .btn-ghost-light { color: var(--hero-text); border: 1px solid rgba(255, 255, 255, 0.35); }
.page-shop main .btn-ghost-light:hover { color: var(--hero-accent); border-color: var(--hero-accent); }
.shop-hero--split .shop-hero__media { position: relative; min-height: 240px; }
.shop-hero--split .shop-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .shop-hero--split { grid-template-columns: 1.05fr 1fr; min-height: 460px; }
  .shop-hero--split .shop-hero__copy { align-self: center; padding-left: max(var(--pad), calc((100vw - 1240px) / 2)); }
  .shop-hero--split .shop-hero__media { min-height: 100%; }
  .shop-hero--split .shop-hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 28%);
  }
}
.page-shop .product-card__actions .btn-cta { min-width: 0; padding-inline: 0.5rem; }
@media (max-width: 767px) {
  /* Lay out the four facts. A nowrap row was clipped by the page (and by .home-trust),
     so "Buy Now, Pay Later" and "Pickup" sat off-screen with no way to scroll to them. */
  .shop-trust {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    white-space: normal;
    gap: 0.35rem 0.9rem;
    font-size: 0.76rem;
    padding-block: 0.55rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .shop-trust li { white-space: nowrap; }
  /* Keep product names and prices on the first screen: three facts on phones. */
  .shop-trust li:nth-child(n+4) { display: none; }
  .page-shop .shop-chips,
  .page-shop .shop-sort {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
    max-width: 100%;
  }
  .page-shop .shop-chips::-webkit-scrollbar,
  .page-shop .shop-sort::-webkit-scrollbar { display: none; }
  .page-shop .shop-chip,
  .page-shop .shop-sort__btn,
  .page-shop .shop-sort__label { flex: none; white-space: nowrap; }
  .page-shop .product-grid { gap: 10px; }
  .product-card__badge { font-size: 0.5rem; padding: 0.18rem 0.35rem; top: 6px; right: 6px; }
  .page-shop .product-card__body { padding: 8px 9px 2px; }
  .page-shop .product-card__name { font-size: 0.84rem; }
  .price-amount { font-size: 1.1rem; }
  .product-card__actions { padding: 6px 9px 10px; gap: 5px; }
  .page-shop .product-card__actions .btn { min-height: 2.2rem; font-size: 0.72rem; }
  .btn-icon-only { width: 2.2rem; }
  .page-shop .shop-head__lead { font-size: 0.92rem; }
}
.page-shop .shop-layout > *,
.page-shop .shop-main,
.page-shop .shop-wrap { min-width: 0; }
.product-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  height: 100%;
  padding: 12%;
  text-align: center;
  background: linear-gradient(160deg, #ffffff 0%, var(--chip-bg, var(--ams-card)) 100%);
  color: var(--text);
}
.product-noimg strong { font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.product-noimg span { font-size: 0.9rem; font-weight: 600; }
.product-noimg em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
/* Split hero: reset the older overlay-hero sizing so the copy uses its whole column. */
.shop-hero--split { margin-bottom: 0; }
.shop-hero--split .shop-hero__copy {
  width: auto;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  justify-content: center;
}
.shop-hero--split .shop-hero__copy h1 { max-width: 15ch; }
.shop-hero--split .shop-hero__copy .shop-hero__lead { max-width: 46ch; }
.shop-hero--split .shop-hero__media { height: auto; }
@media (min-width: 900px) {
  .shop-hero--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .shop-hero--split .shop-hero__copy { padding-right: clamp(1.5rem, 3vw, 3rem); }
}

/* Home page sections */
.home-trust .shop-trust { margin: 0; }
.home-kicker { margin: 0 0 0.3rem; color: var(--gold-light, var(--accent)); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1.5rem; margin-bottom: 1.1rem; }
.home-head h2 { margin: 0; }
.home-quote {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(600px 240px at 0% 0%, rgba(20, 83, 45, 0.22), transparent 70%), var(--surface);
}
.home-quote h2 { margin: 0 0 0.5rem; }
.home-quote p { margin: 0; color: var(--muted); max-width: 62ch; }
.home-quote__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-content: center; }
@media (min-width: 900px) { .home-quote { grid-template-columns: 1.3fr 1fr; align-items: center; } }

.home-featured.shop-embed {
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border-radius: 18px;
  background: var(--shop-canvas);
  color: var(--text);
}
.home-featured.shop-embed h2 { color: var(--text); }
.home-featured .home-kicker { color: var(--accent); }
.home-featured .btn-outline { color: var(--text); border-color: var(--field-line); }
.home-radios__lead { margin: 0 0 1rem; color: var(--text); max-width: 62ch; }
.home-featured .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .home-featured .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .home-featured .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.why-grid li { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.why-grid strong { color: var(--gold-light, var(--text)); font-size: 1rem; }
.why-grid span { color: var(--muted); font-size: 0.92rem; }
@media (min-width: 720px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.review-card { margin: 0; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 0.5rem; }
.review-card__stars { margin: 0; color: var(--gold, var(--ams-gold-deep)); letter-spacing: 0.12em; }
.review-card blockquote { margin: 0; }
.review-card blockquote p { margin: 0; font-size: 1rem; line-height: 1.55; }
.review-card figcaption { margin-top: auto; font-weight: 600; font-size: 0.88rem; }
.review-card figcaption span { color: var(--muted); font-weight: 400; }
@media (min-width: 720px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.home-brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.home-brand-list a {
  display: inline-flex;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.home-brand-list a:hover { border-color: var(--gold, var(--ams-gold-deep)); color: var(--gold-light, var(--text)); }
@media (max-width: 719px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-grid .tile span { font-size: 1rem; }
}
.home-trust { margin: 0 0 1.2rem; border-radius: 12px; overflow: hidden; }
.home-quote { margin-bottom: 1.5rem; }
.gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.gallery-shot img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gallery-shot--wide { grid-column: span 2; }
.gallery-shot--wide img { aspect-ratio: 16 / 9; }
.gallery-shot figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.review-note { margin-top: 0.8rem; color: var(--muted); font-size: 0.8rem; }
@media (max-width: 1120px) {
  .shop-filters:not(.is-open) > :not(summary) { display: none; }
  .shop-filters:not(.is-open) > summary::before { transform: none; }
  .shop-filters.is-open > summary::before { transform: rotate(90deg); }
}
.hero-reel__poster-pic { display: contents; }
.hero-reel__poster--one { display: block; }
/* Long grids: let the browser skip layout for cards that are off screen. */
.page-shop .product-grid .product-card { content-visibility: auto; contain-intrinsic-size: auto 430px; }
/* Reserve the hero reel's box before any video data loads (no layout shift). */
@media (max-width: 767px) {
  .hero-reel__video--mobile {
    height: min(calc(100svh - var(--header) - var(--bar) - 4.75rem), calc(100vw * 16 / 9));
    width: auto;
    aspect-ratio: 9 / 16;
  }
}
/* Blog, specials and vehicles */
.post-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.post-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--gold-light, var(--accent)); }
.post-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.post-card__meta { font-size: 0.75rem !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light, var(--accent)) !important; }
.post-card__more { margin-top: auto; font-weight: 600; font-size: 0.88rem; }
.post-meta { margin: 0 0 1rem; color: var(--muted); font-size: 0.85rem; }
.specials-grid .special { display: flex; flex-direction: column; gap: 0.4rem; }
.special__tag { margin: 0; align-self: flex-start; background: #d90429; color: #fff; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 4px; }
.special__note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.make-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .make-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.make-tile { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.make-tile strong { font-size: 1.15rem; }
.make-tile span { color: var(--muted); font-size: 0.85rem; }
.make-tile:hover { border-color: var(--gold, var(--ams-gold-deep)); }
.vehicle-models__hint { margin-top: 0.6rem; color: var(--muted); font-size: 0.85rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang-switch { margin: 1.5rem 0 0; font-size: 0.9rem; }

/* Compact category strip (Crutchfield-style): small clean thumbnail, name, count. */
.cat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0.4rem 0 1.4rem;
}
@media (min-width: 720px) { .cat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .cat-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat-pill {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 64px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.page-shop main a.cat-pill { color: var(--text); }
.cat-pill:hover { border-color: var(--accent); box-shadow: var(--shadow); }
@media (hover: hover) and (pointer: fine) {
  .cat-pill:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent), 0 10px 22px rgba(15, 61, 36, 0.14); }
}
.cat-pill__thumb { width: 52px; height: 52px; border-radius: 8px; background: #ffffff; display: grid; place-items: center; overflow: hidden; }
.cat-pill__thumb img { width: 46px; height: 46px; object-fit: contain; }
.cat-pill__thumb--empty { background: var(--chip-bg, var(--ams-card)); }
.cat-pill__name { font-size: 0.86rem; font-weight: 600; line-height: 1.2; }
.cat-pill__count { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.shop-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.2rem; }
.shop-row-head h2 { margin: 0; }
.shop-row-head a { font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.page-shop .shop-dept-row { margin-bottom: 0.4rem; }
.shop-more-wrap { text-align: center; margin: 1.4rem 0 0.4rem; }
.shop-more-wrap[hidden] { display: none; }
.page-shop .shop-more { min-width: 14rem; }
/* Phones: categories become two swipeable rows so products show on the first screen. */
@media (max-width: 719px) {
  .cat-strip {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 70%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .cat-strip::-webkit-scrollbar { display: none; }
  .cat-pill { scroll-snap-align: start; min-height: 56px; }
  .cat-pill__thumb { width: 44px; height: 44px; }
  .cat-pill__thumb img { width: 40px; height: 40px; }
  .cat-pill { grid-template-columns: 44px 1fr auto; }
}
/* Shop search */
.shop-search-wrap { margin-top: 14px; }
.shop-search { position: relative; display: flex; gap: 8px; }
.shop-search input {
  flex: 1;
  min-width: 0;
  height: 2.9rem;
  padding: 0 1rem;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--field, #fff);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.shop-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.shop-search .btn { min-height: 2.9rem; padding-inline: 1.3rem; }
.shop-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.shop-suggest[hidden] { display: none; }
.shop-suggest__row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--text); }
.page-shop main a.shop-suggest__row { color: var(--text); }
.shop-suggest__row:hover, .shop-suggest__row:focus { background: var(--chip-bg, var(--ams-card)); }
.shop-suggest__thumb { width: 44px; height: 44px; background: #fff; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.shop-suggest__thumb img { width: 40px; height: 40px; object-fit: contain; }
.shop-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.shop-suggest__text strong { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-suggest__text span { font-size: 0.75rem; color: var(--muted); }
.shop-suggest__price { font-weight: 700; font-size: 0.9rem; }
.shop-suggest__all { display: block; text-align: center; padding: 8px; font-weight: 600; font-size: 0.88rem; }
.shop-suggest__none { margin: 0; padding: 10px; color: var(--muted); font-size: 0.88rem; }
.search-card .product-card__actions { grid-template-columns: 1fr; }
@media (max-width: 719px) {
  .page-shop .crumbs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .page-shop .crumbs::-webkit-scrollbar { display: none; }
}
.home-search { margin: 0 0 1.2rem; background: none; }
.home-search .shop-search input { background: #ffffff; color: #0F5132; }
.shop-browse-all { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1.6rem 0 0.4rem; }
.shop-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .shop-guides ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-guides li { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.shop-guides a { font-weight: 700; }
.shop-guides span { color: var(--muted); font-size: 0.88rem; }

/* Shop language link in the page head, and the longer Spanish card labels (/es/tienda/). */
.shop-head .shop-lang { margin: 0.45rem 0 0; font-size: 0.85rem; }
@media (max-width: 767px) {
  html[lang="es"] .product-card__badge { white-space: nowrap; letter-spacing: 0.01em; max-width: calc(100% - 12px); overflow: hidden; text-overflow: clip; }
  html[lang="es"] .page-shop .product-card__actions .btn-cta { white-space: normal; line-height: 1.15; text-align: center; font-size: 0.7rem; }
}

/* Radio finder (/radio-finder/, /es/buscador-de-radio/) and its compact entry on other pages. */
.finder {
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(600px 240px at 0% 0%, rgba(20, 83, 45, 0.18), transparent 70%), var(--surface);
  margin-bottom: 1.2rem;
}
.finder__lead { margin: 0 0 1rem; color: var(--muted); max-width: 70ch; }
.finder__form { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .finder__form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.finder__field label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.finder__field select:disabled { opacity: 0.55; cursor: not-allowed; }
.finder__status { margin: 1rem 0 0; font-weight: 600; }
.finder-results { margin-bottom: 1.2rem; }
.finder-results > h2 { margin: 0 0 0.3rem; }
.finder-results .review-note { margin: 0 0 1rem; }
.finder-group + .finder-group { margin-top: 1.4rem; }
.finder-group h3 { margin: 0 0 0.7rem; font-size: 1.05rem; color: var(--text); }
.finder-fit { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.finder-universal h2 { margin: 0 0 0.5rem; }
.finder-universal > p { margin: 0 0 1rem; color: var(--muted); max-width: 70ch; }
.finder-tiles { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .finder-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.finder-tile { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.finder-tile strong { font-size: 1.15rem; }
.finder-tile span { color: var(--muted); font-size: 0.88rem; }
.finder-tile .finder-tile__count { color: var(--gold-light, var(--accent)); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.finder-tile:hover { border-color: var(--gold, var(--ams-gold-deep)); }
.finder-text { display: grid; justify-items: center; gap: 0.6rem; text-align: center; }
.finder-text__btn { width: 100%; max-width: 34rem; min-height: 3.6rem; font-size: 1.05rem; white-space: normal; }
.finder-text p { margin: 0; color: var(--muted); }
.finder-promo {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.2rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: radial-gradient(520px 200px at 0% 0%, rgba(20, 83, 45, 0.18), transparent 70%), var(--surface);
}
.finder-promo h2 { margin: 0 0 0.4rem; }
.finder-promo p { margin: 0; color: var(--muted); max-width: 60ch; }
.finder-promo .home-kicker { color: var(--gold-light, var(--accent)); }
.finder-promo__form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; align-content: center; }
.finder-promo__form select { flex: 1 1 12rem; width: auto; }
.finder-promo__form .btn { flex: 0 0 auto; }
@media (min-width: 900px) { .finder-promo { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.page-shop .shop-finder .finder-promo { background: var(--surface); }
.page-shop .shop-finder .finder-promo h2 { color: var(--text); }
/* Nine header links: one row on laptops. */
@media (min-width: 1121px) {
  .nav { max-width: none; flex-wrap: nowrap; gap: 0.15rem 0.8rem; }
  .nav a { white-space: nowrap; }
}
@media (min-width: 1121px) and (max-width: 1279px) {
  .nav { gap: 0.15rem 0.6rem; }
  .nav a { font-size: 0.72rem; letter-spacing: 0.04em; }
}
/* Audit 9/30: panels breathe, plain aisle index, long crumbs. */
.specials-grid .special > .product-card { flex: 1; }
.home-featured + .section { margin-top: 1.25rem; }
.aisle-index { margin: 1rem 0 0; font-size: 0.9rem; }
.aisle-index summary { cursor: pointer; color: var(--muted); }
.aisle-index ul { columns: 2 16rem; margin: 0.6rem 0 0; padding-left: 1.1rem; }
.aisle-index li { break-inside: avoid; margin: 0 0 0.25rem; }
@media (max-width: 719px) {
  .crumbs > span:last-child { display: inline-block; vertical-align: bottom; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-card__badge { font-size: 0.6rem; }
}
.city-grid--compact a.city-tile { min-height: 0; }
/* Car audio hub: light shop showcase at the top. */
.dept-showcase .shop-tiles { margin-bottom: 1.4rem; }
.dept-showcase__h { margin: 0.4rem 0 0.9rem; font-size: 1.25rem; }
/* Phone/tablet filters: a full-screen sheet with a sticky close header and a Show results bar. */
.shop-filters__bar { display: none; }
@media (max-width: 1120px) {
  .shop-filters.is-open {
    position: fixed; inset: 0; z-index: 90; margin: 0; border-radius: 0;
    background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 16px 6.5rem;
  }
  .shop-filters.is-open > summary {
    position: sticky; top: 0; z-index: 2; background: #fff;
    margin: 0 -16px 0.6rem; padding: 1rem 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex; justify-content: space-between; align-items: center;
  }
  .shop-filters.is-open > summary::before { display: none; }
  .shop-filters.is-open > summary::after { content: "\2715"; font-size: 1.2rem; line-height: 1; padding: 0.2rem 0.4rem; }
  .shop-filters.is-open .shop-filters__bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
  }
  .shop-filters__done { width: 100%; }
  body.filters-open { overflow: hidden; }
  body.filters-open .mobile-cta-bar { display: none; }
}
/* Audit 9/30, P3 polish. */
/* 1. Trust strip: the phone layout breaks onto two lines (see the rule near .shop-trust li); left-align it under left-aligned H1s. */
@media (min-width: 768px) {
  .page-intro + .home-trust .shop-trust { justify-content: flex-start; }
}
/* 4. Breathing room under the product H1. */
.shop-pdp__type { margin-top: 0.4rem; }
.shop-pdp__type + .product-card__specs { margin-top: 0.35rem; }
/* 5. Features as one list in the spec table. */
.shop-specs__list { margin: 0; padding-left: 1.1rem; }
.shop-specs__list li + li { margin-top: 0.2rem; }
/* 6. Product pages go two-column from tablet width; related rails stay even (2 x 2) until the 4-up desktop grid. */
@media (min-width: 720px) {
  .shop-pdp { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 720px) and (max-width: 1120px) {
  .shop-rail .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 8. Sticky filter column: a thin scrollbar and a fade at the bottom so a cut-off list reads as scrollable. */
@media (min-width: 1121px) {
  .shop-filters {
    scrollbar-width: thin;
    padding-bottom: 2rem;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent);
  }
}
/* 9. Why tiles: body copy starts at the same height in every tile. */
.why-grid li { align-content: start; }
/* 11. Gallery: shots in a short last row stretch to fill it (classes set in home-blocks.mjs). */
@media (max-width: 899px) {
  .gallery-shot--mfill { grid-column: span 2; }
  .gallery-shot--mfill img { aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery-shot { grid-column: span 3; }
  .gallery-shot--wide { grid-column: span 6; }
  .gallery-shot--fill-3 { grid-column: span 4; }
  .gallery-shot--fill-3 img { aspect-ratio: 1 / 1; }
  .gallery-shot--fill-2 { grid-column: span 6; }
  .gallery-shot--fill-2 img { aspect-ratio: 3 / 2; }
  .gallery-shot--fill-1 { grid-column: span 12; }
  .gallery-shot--fill-1 img { aspect-ratio: 21 / 9; }
}
/* 12. Contact map at normal brightness. */
.map-frame::after { content: none; }
.map { filter: none; }
/* 13. 404: Spanish line. */
.notfound-es { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.92rem; }
/* 14. Bundle and specials tags in brand purple, not red. */
.special__tag { background: var(--purple, #15803D); color: #fff; }
/* 15. Pay-later badge: smaller, and the photo starts below it so it never covers the product. */
.product-card__badge { font-size: 0.52rem; padding: 0.16rem 0.38rem; letter-spacing: 0.05em; opacity: 0.92; }
.page-shop .product-card__media--badge img { padding-top: calc(6% + 18px); }
@media (max-width: 719px) {
  .product-card__badge { font-size: 0.48rem; }
}
/* 16. Phone menu: no divider above the first link, and a dim backdrop behind it. */
@media (max-width: 1120px) {
  .nav a:first-child { border-top: 0; }
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.55);
  }
}
/* 17. Off-screen cards skip layout; reserve a closer height per width, and always render them for print. */
@media (max-width: 719px) {
  .page-shop .product-grid .product-card { contain-intrinsic-size: auto 360px; }
}
@media print {
  .page-shop .product-grid .product-card { content-visibility: visible; }
}
/* /specials/ grid heading. */
.specials-h { margin: 0 0 0.9rem; }

/* Approved car-audio photos: 16x9 sections, linked, no crop past the frame. */
.photo-section { padding-top: 0.35rem; }
.shop-photos { margin: 0 0 1.1rem; }
.photo-section .home-head { align-items: center; }
.photo-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.photo-grid figure { margin: 0; min-width: 0; }
.photo-grid a { display: block; color: inherit; text-decoration: none; }
.photo-grid img,
.banner img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.photo-grid img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.photo-grid img.is-16x9 { aspect-ratio: 1344 / 752; }
.photo-grid img.is-1x1 {
  aspect-ratio: 1 / 1;
  width: min(100%, 28rem);
  height: auto;
  margin-inline: auto;
}
.photo-grid figure:has(img.is-1x1) { align-self: start; }
.photo-grid img.is-9x16,
.photo-lead img {
  aspect-ratio: 752 / 1344;
  width: auto;
  max-width: min(100%, 26rem);
  max-height: 70vh;
  /* A definite height reserves the box before a lazy photo loads (no layout shift). */
  height: min(70vh, 46.5rem);
  object-fit: contain;
  margin-inline: auto;
}
.photo-grid figure:has(img.is-9x16) { display: flex; justify-content: center; align-self: start; }
.photo-grid figure:has(img.is-9x16) a { display: flex; justify-content: center; width: auto; max-width: 100%; }
.photo-lead { display: flex; justify-content: center; margin: 0 0 1.1rem; }
.photo-lead img {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.photo-grid figcaption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}
.card > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
@media (min-width: 720px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid figure.is-feature,
  .photo-grid figure:only-child { grid-column: 1 / -1; }
  .photo-grid figure:only-child:has(img.is-1x1),
  .photo-grid figure:only-child:has(img.is-9x16) {
    grid-column: auto;
    justify-self: start;
    width: min(100%, 26rem);
  }
}

/* Quick facts on the main install pages. */
.quick-facts dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.65rem;
  margin: 0.8rem 0 0;
}

.quick-facts dl div {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.75rem 0.8rem;
}

.quick-facts dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.quick-facts dd {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}

/* Phone icon on product cards as a CSS mask: one copy in the stylesheet instead of an SVG in every card. */
.btn-icon--phone {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Visual audit fixes (2026-10-03). */
h1, h2, h3, .product-card__name { text-wrap: balance; }
.card-grid { align-items: start; }
.gallery img[src*="-16x9-"] { aspect-ratio: 16 / 9; }
.city-tile-meta > span { white-space: nowrap; }
@media (max-width: 480px) {
  .city-tile-meta { letter-spacing: 0.06em; flex-wrap: wrap; row-gap: 0.2rem; }
}
.section > img, .prose > img { margin: 0 0 1rem; border-radius: 14px; }
.product-card__badge { font-size: max(0.56rem, 9px); }
@media (max-width: 767px) {
  .site-footer .footer-links a { display: inline-block; padding-block: 0.45rem; }
  .site-footer .fine { line-height: 2.2; }
}
.finder + .lang-switch, .lang-switch { margin-bottom: 1.5rem; }

/* Brand-page photos stay short so products show on the first screen. */
.shop-photos .photo-grid img { max-height: 42vh; width: auto; max-width: 100%; margin-inline: auto; }
.shop-photos .photo-grid img.is-9x16 { height: 42vh; }

/* Review grid: a short last row stretches to fill the width (no orphan cards). */
@media (min-width: 720px) and (max-width: 1120px) {
  .review-grid > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1121px) {
  .review-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .review-grid > * { grid-column: span 2; }
  .review-grid > :nth-child(3n+1):nth-last-child(2),
  .review-grid > :nth-child(3n+1):nth-last-child(2) + * { grid-column: span 3; }
  .review-grid > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
/* Breadcrumbs stay on one line on phones; long trails scroll sideways instead of wrapping. */
@media (max-width: 719px) {
  .crumbs { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .crumbs::-webkit-scrollbar { display: none; }
}

/* 5.11 Lenis smooth scroll: motion.js adds .lenis to <html>; with JS off (or reduced motion) none of this applies. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==========================================================================
   Shop rebuild (Oct 2026). Mobile first, then 720 / 900 / 1121 px.
   Layout modeled on a big car-audio store (mega menu, vehicle search, list rows,
   buy box), recolored to Audio MotorSports dark green, gold and cream.
   Shop rules are scoped to body.page-shop / body.page-finder so the home page is untouched.
   ========================================================================== */

:root {
  --royal: #16A34A;
  --royal-vivid: #16A34A;
  --royal-deep: #0F5132;
  --gold-1: var(--ams-gold-deep);
  --gold-2: var(--ams-gold);
  --charcoal: var(--ams-page); /* AMS: the shop canvas is cream (was DJCA charcoal) */
  --mega-bg:
    radial-gradient(520px 260px at 92% 0%, rgba(255, 196, 63, 0.22), transparent 70%),
    radial-gradient(640px 320px at 0% 100%, rgba(20, 83, 45, 0.55), transparent 70%),
    linear-gradient(125deg, #0F5132 0%, #16A34A 48%, #16A34A 100%);
  --i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l2-6h14l2 6M5 10v10h14V10M3 10h18M10 20v-5h4v5'/%3E%3C/svg%3E");
  --i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E");
  --i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E");
  --i-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 21l3-3 3 3v-7M9.5 9l2 2 3-3'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
  --i-phones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3M4 15h3v5H4zM17 15h3v5h-3z'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16v3M19 16v3M3 16h18v-4l-2-5H5l-2 5zM3 12h18M7 14h.01M17 14h.01'/%3E%3C/svg%3E");
}

.icon-mask,
.perk::before,
.ticker li::before,
.nav-mega__toggle::before,
.shop-facet > summary::after,
.shop-ymm__label::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: var(--icon, var(--i-badge)) center / contain no-repeat;
  mask: var(--icon, var(--i-badge)) center / contain no-repeat;
}

/* ---------- Mega menu: phones first (inside the opened menu panel) ---------- */
.nav-mega {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--line);
}
.nav-mega > a { flex: 1; border-top: 0 !important; }
.nav-mega__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 10px;
  background: var(--ams-mist);
  color: #0F5132;
  cursor: pointer;
}
.nav-mega__toggle::before { --icon: var(--i-chev); width: 1.15rem; height: 1.15rem; transition: transform 0.2s ease; }
.nav-mega.is-open .nav-mega__toggle::before { transform: rotate(180deg); }
/* Phone menu order. */
@media (max-width: 1120px) {
  
  .nav-mega--car { order: -2; }
  .nav-mega--shop { order: -1; }
  
  
}

.mega {
  display: none;
  flex-basis: 100%;
  margin: 0 0 0.8rem;
  border-radius: 14px;
  background: var(--ams-card);
  box-shadow: inset 0 0 0 1px var(--ams-line);
  color: #0F5132;
  overflow: hidden;
}
.nav-mega.is-open > .mega { display: block; }
/* 5.35: the phone accordion had no open transition (the desktop hover/focus/is-open version
   below the 1121px breakpoint already animates via visibility+opacity+transform -- keep this
   keyframe mobile-only so the two mechanisms never run on the same element at once). */
@media (max-width: 1120px) {
  .nav-mega.is-open > .mega { animation: amsMegaIn 0.22s ease both; }
}
@keyframes amsMegaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mega__inner { display: grid; gap: 1rem; padding: 1rem; }
.mega__title { margin: 0 0 0.5rem; font-family: var(--blackletter); font-size: 1.45rem; line-height: 1.1; color: var(--gold-2); }
.mega__title a { color: inherit !important; text-decoration: none; padding: 0 !important; min-height: 0 !important; border: 0 !important; box-shadow: none !important; display: inline !important; font-size: inherit !important; letter-spacing: 0 !important; text-transform: none !important; }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.6rem; }
.mega__list li { min-width: 0; }
.nav .mega__list a,
.mega__list a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 2.6rem !important;
  padding: 0.35rem 0.55rem !important;
  border: 0 !important;
  border-radius: 8px;
  color: #0F5132 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.mega__list a span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega__list a:hover,
.mega__list a:focus-visible { background: var(--ams-mist); color: #0F5132 !important; }
.mega__n { flex: none; min-width: 1.9rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--gold-1); color: #FFFFFF; font-size: 0.7rem; font-weight: 700; text-align: center; }
.mega__list--brands a { justify-content: flex-start; font-weight: 600; }
.nav .mega__all,
.mega__all {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  min-height: 2.6rem !important;
  padding: 0.3rem 0 !important;
  border: 0 !important;
  color: var(--gold-2) !important;
  font-weight: 700;
  font-size: 0.86rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.mega__brands { display: none; }
/* 5.25: no near-black car-picker bars (Zack, Oct 8 10:18 PM HARD) -- was #0F5132/#0F5132; now cream,
   so the --gold-2 exception below is gone (the .mega default of #0F5132 now applies here too). */
.mega__feature {
  display: block;
  padding: 0.9rem;
  border-radius: 12px;
  background: var(--ams-panel);
  box-shadow: inset 0 0 0 1px var(--ams-line);
  color: #0F5132 !important;
  text-decoration: none;
}
.nav a.mega__feature { display: block !important; min-height: 0 !important; padding: 0.9rem !important; border: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; box-shadow: inset 0 0 0 1px rgba(255, 196, 63, 0.4) !important; }
.mega__feature, .mega__feature * { white-space: normal !important; }
.mega__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin: 0 0 0.75rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.mega__kicker { margin: 0 0 0.25rem; color: var(--gold-2); font-weight: 800; font-size: 1rem; }
.mega__note { margin: 0 0 0.7rem; color: var(--ams-muted); font-size: 0.84rem; line-height: 1.45; }
.mega__cta { color: var(--gold-2); font-weight: 700; }
.mega__strip { display: none; }
.mega--both .mega__cats + .mega__cats { padding-top: 0.6rem; border-top: 1px solid var(--ams-line); }

/* Year / Make / Model form (mega menu, shop bar, anywhere). */
.ymm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.ymm select {
  width: 100%;
  min-height: 2.9rem;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3d24' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.6rem center / 1rem no-repeat;
  color: #0F5132;
  font: 600 0.92rem var(--body);
  appearance: none;
  -webkit-appearance: none;
}
.ymm select:disabled { background-color: var(--ams-card); color: var(--ams-muted); }
.ymm .btn { min-height: 2.9rem; width: 100%; font-weight: 800; }

/* ---------- Desktop mega menu ---------- */
@media (min-width: 1121px) {
  .nav-mega { display: flex; flex-wrap: nowrap; border: 0; }
  .nav-mega > a { flex: none; }
  .nav-mega__toggle { display: none; }
  .mega {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    border-radius: 0 0 18px 18px;
    border-top: 3px solid var(--gold-1);
    background: var(--ams-page);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--ams-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.28s;
    z-index: 60;
  }
  .nav-mega:hover > .mega,
  .nav-mega:focus-within > .mega,
  .nav-mega.is-open > .mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .nav-mega:hover > a,
  .nav-mega:focus-within > a { color: var(--gold-2); box-shadow: inset 0 -2px 0 var(--gold-1); }
  .mega__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 1.6rem 1rem 1.3rem;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 1.8rem;
    align-items: start;
  }
  .mega--both .mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr); }
  .mega--both .mega__cats + .mega__cats { padding-top: 0; border-top: 0; padding-left: 1.4rem; border-left: 1px solid var(--ams-line); }
  .mega--both .mega__list { grid-template-columns: minmax(0, 1fr); }
  .mega__brands { display: block; }
  /* 5.4: each column is a cream card on the cream panel. 5.25: the car picker (.mega__feature) went
     cream too, so it no longer needs excluding from this rule's shared look -- kept excluded anyway
     since it already sets its own matching background/shadow above. */
  .mega__inner > :not(.mega__feature) { padding: 1rem 1.1rem; border-radius: 12px; background: var(--ams-card); box-shadow: inset 0 0 0 1px var(--ams-line); }
  .mega__list--brands { grid-template-columns: minmax(0, 1fr); }
  .mega__title { font-size: 1.75rem; }
  .mega__strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 2.4rem;
    margin: 0;
    padding: 0.7rem 1rem;
    background: var(--ams-mist);
    border-top: 1px solid var(--ams-line);
    color: #0F5132;
    font-size: 0.86rem;
  }
  .mega__strip strong { color: var(--gold-2); }
  .ymm--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Pickup ticker (shop pages). 5.23: no bulk green -- was a dark green strip; now cream. ---------- */
.ticker {
  display: flex;
  overflow: hidden;
  background: var(--ams-mist);
  border-bottom: 1px solid var(--ams-line);
  color: #0F5132;
  font-size: 0.84rem;
}
.ticker__track {
  display: flex;
  flex: none;
  gap: 2.2rem;
  margin: 0;
  padding: 0.6rem 1.1rem;
  list-style: none;
  animation: ticker 28s linear infinite;
}
.ticker li { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.ticker li strong { color: var(--gold-2); }
.ticker li::before { color: var(--gold-2); }
.ticker li:nth-child(1)::before { --icon: var(--i-store); }
.ticker li:nth-child(2)::before { --icon: var(--i-card); }
.ticker li:nth-child(3)::before { --icon: var(--i-badge); }
.ticker li:nth-child(4)::before { --icon: var(--i-chat); }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; }
  .ticker__track[aria-hidden] { display: none; }
}
@media (min-width: 1121px) {
  .ticker { justify-content: center; }
  .ticker__track { animation: none; gap: 3rem; }
  .ticker__track[aria-hidden] { display: none; }
}

/* ---------- Shop chrome ---------- */
body.page-shop main { background: var(--charcoal); }
body.page-shop .shop-search-wrap { padding-top: 0.9rem; }
.shop-search--brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}
.shop-search--brand input[type="search"] { grid-column: 1 / -1; }
.shop-search__brand {
  min-height: 2.9rem;
  padding: 0 2rem 0 0.8rem;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1d77a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.6rem center / 1rem no-repeat;
  color: var(--text);
  font: 600 0.9rem var(--body);
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
}
body.page-shop .shop-search input[type="search"] {
  min-height: 2.9rem;
  border-radius: 10px;
  background: #fff;
  color: #0F5132;
  border: 2px solid transparent;
}
body.page-shop .shop-search input[type="search"]:focus { border-color: var(--gold-1); outline: none; }
body.page-shop .shop-search .btn { min-height: 2.9rem; min-width: 6.5rem; }
@media (min-width: 720px) {
  .shop-search--brand { grid-template-columns: minmax(0, 1fr) 13rem auto; }
  .shop-search--brand input[type="search"] { grid-column: auto; }
}

.shop-ymm {
  margin-top: 0.8rem;
  padding: 0.85rem;
  border-radius: 14px;
  background: var(--mega-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 63, 0.35);
}
.shop-ymm__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--blackletter);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--gold-2);
}
.shop-ymm__label::before { --icon: var(--i-car); width: 1.4rem; height: 1.4rem; }
@media (min-width: 900px) {
  .shop-ymm { display: flex; align-items: center; gap: 1.2rem; padding: 0.9rem 1.2rem; }
  .shop-ymm__label { margin: 0; white-space: nowrap; }
  .shop-ymm .ymm { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)) 10rem; }
}

/* Category banner. */
.shop-head--banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.4rem 0 1rem !important;
  padding: 1.1rem 1rem;
  border-radius: 16px;
  background: var(--mega-bg);
  box-shadow: inset 0 0 0 1px var(--ams-line), 0 12px 28px rgba(15, 61, 36, 0.1);
  overflow: hidden;
}
.shop-head--banner .shop-head__text { flex: 1; min-width: 0; }
body.page-shop main .shop-head--banner h1 {
  font-family: var(--blackletter);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 3.4rem);
  letter-spacing: 0;
  line-height: 1.02;
  color: var(--gold-2);
}
.shop-head--banner .shop-head__lead { color: #3E6B52; max-width: 46rem; }
.shop-head--banner .shop-head__count { color: var(--gold-2); }
.shop-head--banner .shop-lang a { color: #0F5132; }
.shop-head__art { flex: none; width: 6.5rem; aspect-ratio: 1; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.shop-head__art img { width: 86%; height: 86%; object-fit: contain; }
@media (max-width: 479px) { .shop-head__art { display: none; } }
@media (min-width: 900px) {
  .shop-head--banner { padding: 1.8rem 2rem; gap: 2rem; }
  .shop-head__art { width: 12rem; transform: rotate(-3deg); }
}

/* Tiles: white product shot, label under it. */
body.page-shop .shop-tiles { gap: 10px; margin: 0 0 1.2rem; }
body.page-shop .shop-tile { background: var(--surface); border: 1px solid var(--line); }
body.page-shop .shop-tile:hover { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-1), 0 14px 30px rgba(0, 0, 0, 0.45); }
body.page-shop .shop-tile__label { color: var(--text); font-weight: 700; text-align: center; justify-content: center; }
body.page-shop .shop-count { background: rgba(255, 181, 27, 0.18); color: var(--gold-2); }

/* Sidebar: fold-out groups with a chevron. */
body.page-shop .shop-filters { background: var(--surface); border-color: var(--line); }
.shop-facet { border-top: 1px solid var(--line); }
.shop-facet > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.9rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--text);
}
.shop-facet > summary::-webkit-details-marker { display: none; }
.shop-facet > summary::after { --icon: var(--i-chev); color: var(--gold-2); transition: transform 0.2s ease; }
.shop-facet[open] > summary::after { transform: rotate(180deg); }

/* Grid cards (rails, shop front): dark card, white photo box. */
body.page-shop .product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

body.page-shop .product-card__media { background: #fff; }
body.page-shop .product-card__brand,
body.page-shop .product-card__brand a { color: var(--gold-2); }
/* 4.5: the brand link is a 24px+ tap target (Lighthouse target-size) */
body.page-shop .product-card__brand a { display: inline-flex; align-items: center; min-height: 24px; }
body.page-shop .product-card__price { color: var(--text); }
body.page-shop .price-amount { color: var(--price, #0F5132); font-weight: 800; }
body.page-shop .product-card__price--call { color: var(--gold-2); font-weight: 700; }

/* ---------- List rows (aisles, departments, brands) ---------- */
.product-grid--rows { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
.product-grid--rows .product-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  grid-template-areas:
    "brand brand"
    "name name"
    "media price"
    "media actions"
    "specs specs"
    "perks perks";
  column-gap: 0.8rem;
  row-gap: 0.35rem;
  padding: 0.9rem;
  align-items: start;
  contain-intrinsic-size: auto 340px;
}
.product-grid--rows .product-card__body { display: contents; }
.product-grid--rows .product-card__media { grid-area: media; aspect-ratio: 1; border-radius: 12px; margin: 0; }
.product-grid--rows .product-card__media img { padding: 7% !important; }
.product-grid--rows .product-card__brand { grid-area: brand; margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.product-grid--rows .product-card__name { grid-area: name; margin: 0 0 0.35rem; font-size: 1.05rem !important; line-height: 1.3; }
.product-grid--rows .product-card__specs { grid-area: specs; margin: 0.3rem 0 0; }
.product-grid--rows .product-card__price { grid-area: price; align-self: end; margin: 0; }
.product-grid--rows .price-amount { font-size: 1.65rem; letter-spacing: -0.02em; }
.product-grid--rows .product-card__price--call { font-size: 1.05rem; }
.product-grid--rows .product-card__actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.product-grid--rows .product-card__actions .btn { min-height: 2.9rem !important; font-size: 0.85rem !important; font-weight: 800; }
.product-grid--rows .product-card__actions .btn-cta { box-shadow: 0 6px 16px rgba(255, 181, 27, 0.25); }
.product-grid--rows .product-card__badge { top: 6px; left: 6px; right: auto; }
.product-card__perks { grid-area: perks; list-style: none; margin: 0.35rem 0 0; padding: 0.55rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.perk { display: flex; align-items: center; gap: 0.5rem; }
.perk::before { color: var(--gold-2); }
.perk--pickup::before { --icon: var(--i-store); }
.perk--plan::before { --icon: var(--i-card); }
.perk--install::before { --icon: var(--i-wrench); }
.perk--help::before { --icon: var(--i-phones); }
.perk--upfront::before { --icon: var(--i-card); }
@media (min-width: 900px) {
  .product-grid--rows .product-card {
    grid-template-columns: 11.5rem minmax(0, 1fr) 13.5rem;
    grid-template-areas:
      "media brand price"
      "media name price"
      "media specs actions"
      "media perks actions";
    grid-template-rows: auto auto 1fr auto;
    column-gap: 1.4rem;
    padding: 1rem 1.2rem;
  }
  .product-grid--rows .product-card__price { align-self: start; text-align: right; }
  .product-grid--rows .price-amount { font-size: 1.9rem; }
  .product-grid--rows .product-card__actions { align-self: end; }
  .product-grid--rows .product-card__name { font-size: 1.2rem !important; }
  .product-card__perks { border-top: 0; padding-top: 0.2rem; }
}

/* ---------- Product page buy box ---------- */
body.page-shop .shop-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "media" "info";
  gap: 1rem;
  margin: 0.4rem 0 1.4rem;
}
.shop-pdp__title { grid-area: title; }
.shop-pdp__title h1 { margin: 0.15rem 0 0.3rem; }
.shop-pdp__model { color: var(--gold-2); }
body.page-shop .shop-pdp__media { grid-area: media; background: #fff; border-radius: 16px; aspect-ratio: 4 / 3; }
.shop-pdp__info {
  grid-area: info;
  padding: 1rem;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
body.page-shop .shop-pdp__price { margin: 0; }
body.page-shop .shop-pdp__price .price-amount { font-size: 2.6rem; letter-spacing: -0.03em; color: var(--price, #0F5132); }
.shop-pdp__stock { margin: 0.4rem 0 0.8rem; color: var(--muted); font-size: 0.88rem; }
body.page-shop .shop-pdp__plan { margin: 0 0 0.9rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--ams-mist); box-shadow: inset 0 0 0 1px rgba(15, 61, 36, 0.18); color: #0F5132; }
body.page-shop .shop-pdp__plan strong { color: #0F5132; }
body.page-shop .shop-pdp__perks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}
body.page-shop .shop-pdp__perks .perk { align-items: flex-start; }
body.page-shop .shop-pdp__perks .perk::before { width: 1.5rem; height: 1.5rem; }
body.page-shop .shop-pdp__perks strong { display: block; color: var(--text); font-size: 0.86rem; }
body.page-shop .shop-pdp__perks li { display: flex; gap: 0.5rem; line-height: 1.35; }
body.page-shop .shop-pdp__perks li > span { min-width: 0; }
body.page-shop .shop-pdp__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
body.page-shop .shop-pdp__hold { grid-column: 1 / -1; min-height: 3.4rem; font-size: 1.15rem; font-weight: 800; box-shadow: 0 10px 24px rgba(255, 181, 27, 0.28); }
@media (min-width: 900px) {
  body.page-shop .shop-pdp {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "title title" "media info";
    gap: 1.2rem 2rem;
  }
  body.page-shop .shop-pdp__media { aspect-ratio: 1; }
  .shop-pdp__info { padding: 1.4rem; }
  body.page-shop .shop-pdp__price .price-amount { font-size: 3rem; }
}

/* ---------- Car search page (/radio-finder/). 5.23: no bulk green -- was a dark green panel; now cream. ---------- */
body.page-finder .finder {
  --gold-2: #0F5132;
  padding: 1.1rem;
  border-radius: 18px;
  background: var(--mega-bg);
  box-shadow: inset 0 0 0 1px var(--ams-line), 0 12px 28px rgba(15, 61, 36, 0.1);
  color: #0F5132;
}
body.page-finder .finder__lead { color: #3E6B52; }
body.page-finder .finder__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
body.page-finder .finder__field label { color: var(--gold-2); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; }
body.page-finder .finder__field select {
  min-height: 3rem;
  border-radius: 10px;
  border: 0;
  background-color: #fff;
  color: #0F5132;
  font-weight: 600;
}
body.page-finder .finder__field select:disabled { background-color: var(--ams-card); color: var(--ams-muted); }
body.page-finder .finder__status { color: var(--gold-2); font-weight: 700; }
@media (min-width: 720px) {
  body.page-finder .finder { padding: 1.8rem 2rem; }
  body.page-finder .finder__form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

/* Round 2: phones get one search row; the vehicle bar folds to one line on aisles and products. */
.shop-ymm > summary { list-style: none; cursor: pointer; }
.shop-ymm > summary::-webkit-details-marker { display: none; }
.shop-ymm:not([open]) { padding-block: 0.55rem; }
.shop-ymm:not([open]) > summary { margin: 0; }
.shop-ymm:not([open]) > summary::after { content: ""; margin-left: auto; width: 1.1rem; height: 1.1rem; background-color: currentColor; -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; }
@media (max-width: 719px) {
  .shop-search--brand { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-search--brand input[type="search"] { grid-column: auto; }
  .shop-search__brand { display: none; }
}
@media (min-width: 900px) {
  .shop-ymm > summary { pointer-events: none; }
  .shop-ymm:not([open]) > summary::after { display: none; }
}
.product-grid--rows .product-card__actions { width: 100%; }
.product-grid--rows .product-card__actions .btn-cta { width: 100%; min-height: 3rem !important; font-size: 0.95rem !important; }
/* Round 3. */
.shop-ymm::details-content { flex: 1; min-width: 0; }
@media (min-width: 900px) { .shop-ymm .ymm { width: 100%; } }
body.page-shop .product-grid--rows .product-card__actions { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
body.page-shop .product-grid--rows .product-card__actions .btn-cta { width: 100%; min-width: 0; justify-content: center; }

/* ---------- Round 4: more vivid menu, sections by category, car icon for local pickup ---------- */
:root {
  --mega-bg:
    radial-gradient(560px 280px at 96% -10%, rgba(255, 196, 63, 0.32), transparent 70%),
    radial-gradient(700px 360px at -5% 110%, rgba(29, 107, 60, 0.75), transparent 70%),
    linear-gradient(120deg, #0F5132 0%, #0F5132 30%, #16A34A 62%, #16A34A 100%);
}
.mega { box-shadow: inset 0 0 0 1px var(--ams-line); }
.mega__groups { display: grid; gap: 0.9rem; }
.mega__group-title {
  margin: 0 0 0.3rem;
  padding: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-2);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #0F5132, rgba(15, 61, 36, 0)) 1;
}
.mega__list--one { grid-template-columns: minmax(0, 1fr); }
.mega__n { background: linear-gradient(180deg, var(--ams-gold), var(--ams-gold-deep)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.mega__list a:hover,
.mega__list a:focus-visible {
  background: var(--ams-mist) !important;
  color: #0F5132 !important;
}
.mega__list a:hover .mega__n,
.mega__list a:focus-visible .mega__n { background: #FFFFFF; color: var(--ams-gold); }
@media (max-width: 1120px) {
  .mega__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 0.6rem; }
  .mega__list a { font-size: 0.86rem !important; padding-inline: 0.4rem !important; }
}
@media (min-width: 1121px) {
  .mega { border-top: 0; }
  .mega::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--ams-gold-deep), #BBF7D0 25%, var(--ams-gold-deep) 50%, #16A34A 75%, var(--ams-gold-deep));
    background-size: 200% 100%;
    animation: mega-shine 6s linear infinite;
  }
  .mega__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.4rem; }
  .mega--both .mega__groups { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .mega__inner { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.7fr) minmax(0, 0.95fr); }
  .mega__title { font-size: 2rem; }
  .nav-mega:hover > a,
  .nav-mega:focus-within > a { color: var(--gold-2); text-shadow: 0 0 12px rgba(255, 196, 63, 0.45); }
}
@keyframes mega-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mega::before { animation: none; } }

/* Local pickup reads as "drive over": car icon, not a store or a plane. */
.ticker li:nth-child(1)::before { --icon: var(--i-car); }
.perk--pickup::before { --icon: var(--i-car); }
/* Round 5: the combined Shop panel fits a laptop screen; phones break long names onto two lines instead of cutting them. */
@media (min-width: 1121px) {
  .mega--both .mega__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 1.6rem; }
  .mega--both .mega__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
  .mega--both .mega__list a { min-height: 2.3rem !important; font-size: 0.84rem !important; }
}
@media (max-width: 1120px) {
  .mega__list a span:first-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
}
.mega--both .mega__list a span:first-child { white-space: normal; overflow: visible; line-height: 1.2; }
.mega__strip span { display: inline-flex; align-items: center; gap: 0.45rem; }
.mega__strip span::before { content: ""; width: 1.15rem; height: 1.15rem; background-color: var(--gold-2); -webkit-mask: var(--i-car) center / contain no-repeat; mask: var(--i-car) center / contain no-repeat; }
.mega__strip span + span::before { -webkit-mask-image: var(--i-card); mask-image: var(--i-card); }
/* Round 6: phones reach the products sooner on aisle pages (sub-aisles are in the Filters sheet). */
@media (max-width: 719px) {
  body.page-shop .shop-layout .shop-chips,
  body.page-shop .shop-wrap > .shop-chips { display: none; }
  body.page-shop .shop-head:not(.shop-head--banner) .shop-head__lead { font-size: 0.88rem; margin: 0.2rem 0; }
  body.page-shop .shop-head:not(.shop-head--banner) h1 { font-size: 1.75rem; }
  body.page-shop .crumbs { margin-top: 0.7rem; }
}
@media (max-width: 719px) {
  body.page-shop .product-grid--rows .product-card__actions { grid-template-columns: minmax(0, 1fr); }
  body.page-shop .product-grid--rows .product-card__actions .btn-icon-only { display: none; }
  body.page-shop .product-grid--rows .product-card__actions .btn-cta { font-size: 0.86rem !important; padding-inline: 0.4rem; white-space: nowrap; }
}
/* Round 7: brighter open state. */
.mega__picks ul { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; gap: 0.45rem; }
.nav a.mega__pick,
.mega__pick {
  display: grid !important;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  grid-template-areas: "img name" "img price";
  column-gap: 0.6rem;
  align-items: center;
  min-height: 0 !important;
  padding: 0.4rem !important;
  border: 0 !important;
  border-radius: 10px;
  background: rgba(14, 8, 26, 0.45);
  color: #fff !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.84rem !important;
  box-shadow: inset 0 0 0 1px rgba(255, 196, 63, 0.25) !important;
  white-space: normal !important;
}
.mega__pick img { grid-area: img; width: 3.4rem; height: 3.4rem; object-fit: contain; border-radius: 8px; background: #fff; padding: 0.2rem; }
.mega__pick-name { grid-area: name; line-height: 1.25; font-weight: 600; }
.mega__pick-price { grid-area: price; color: var(--gold-2); font-weight: 800; }
.mega__pick:hover { box-shadow: inset 0 0 0 2px var(--gold-1) !important; }
.nav a.mega__bundles,
.mega__bundles {
  display: block !important;
  min-height: 0 !important;
  padding: 0.7rem 0.8rem !important;
  border: 0 !important;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--ams-gold), var(--ams-gold-deep));
  color: #FFFFFF !important;
  font-size: 0.82rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  box-shadow: none !important;
}
.mega__bundles strong { display: block; font-size: 0.95rem; }
@media (min-width: 1121px) {
  .mega { box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 196, 63, 0.45), 0 0 60px rgba(255, 196, 63, 0.18); }
  .nav-mega:hover > a,
  .nav-mega:focus-within > a,
  .nav-mega.is-open > a {
    color: #FFFFFF !important;
    background: linear-gradient(180deg, var(--ams-gold), var(--ams-gold-deep));
    border-radius: 999px;
    box-shadow: 0 0 0 0.25rem var(--ams-gold-deep), 0 0 20px 0.25rem rgba(255, 196, 63, 0.5) !important;
    text-shadow: none;
  }
}





/* Round 8 (phones first): bigger small tap targets. */
body.page-shop .shop-row-head a,
body.page-shop .shop-pdp__title .product-card__brand a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Round 9 (phones): one-line breadcrumb without Home / Shop, shorter photo box so the price shows sooner. */
@media (max-width: 719px) {
  body.page-shop main .crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  body.page-shop main .crumbs::-webkit-scrollbar { display: none; }
  body.page-shop main .crumbs > :nth-child(-n+4) { display: none; }
  body.page-shop .shop-pdp__media { aspect-ratio: 16 / 10; }
  body.page-shop .shop-pdp { gap: 0.7rem; }
  body.page-shop .shop-pdp__title h1 { font-size: 1.45rem; }
  body.page-shop .shop-pdp__info { padding: 0.85rem; }
  body.page-shop .shop-pdp__price .price-amount { font-size: 2.2rem; }
}
/* 5.23: no bulk green -- was a dark green gradient; now cream (shop-head--banner, pick-summary,
   deal-tile, finder panel all read this var), dark text throughout, gold wash kept for warmth. */
:root {
  --mega-bg:
    radial-gradient(520px 260px at 100% -20%, rgba(255, 196, 63, 0.22), transparent 70%),
    linear-gradient(120deg, var(--ams-mist) 0%, var(--ams-page) 100%);
}
/* Round 11 (phones). */
/* Round 12: phone filter sheet on cream; current aisle and selected filter in dark green.
   5.23: no bulk green -- the summary toggle was a dark green gradient, now cream. */
@media (max-width: 1120px) {
  body.page-shop .shop-filters.is-open { background: var(--charcoal); color: var(--text); }
  body.page-shop .shop-filters.is-open > summary {
    background: var(--ams-mist);
    color: #0F5132;
    border-bottom: 2px solid #0F5132;
    font-weight: 800;
  }
  body.page-shop .shop-filters.is-open > summary::after { color: #0F5132; }
  body.page-shop .shop-filters.is-open .shop-filters__bar {
    background: rgba(16, 14, 20, 0.97);
    border-top: 1px solid rgba(255, 196, 63, 0.35);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.55);
  }
}
body.page-shop .shop-sidebar a[aria-current="page"],
body.page-shop .shop-facet__link[aria-current="true"] { color: var(--gold-2); font-weight: 700; }
body.page-shop .shop-sidebar a { color: #0F5132; }
body.page-shop .shop-sidebar a:hover { color: var(--gold-2); }
/* Round 13: tablets (720px+) get the desktop list rows and the two-column product page. */
@media (min-width: 720px) {
  .product-grid--rows .product-card {
    grid-template-columns: 10rem minmax(0, 1fr) 12rem;
    grid-template-areas:
      "media brand price"
      "media name price"
      "media specs actions"
      "media perks actions";
    grid-template-rows: auto auto 1fr auto;
    column-gap: 1.1rem;
    padding: 1rem;
  }
  .product-grid--rows .product-card__price { align-self: start; text-align: right; }
  .product-grid--rows .product-card__actions { align-self: end; }
  .product-card__perks { border-top: 0; padding-top: 0.2rem; }
  body.page-shop .shop-pdp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "title title" "media info";
    gap: 1rem 1.4rem;
  }
  body.page-shop .shop-pdp__media { aspect-ratio: 1; }
}
/* Round 14: no stray strip under the closed "Filters and categories" button on phones and tablets. */
@media (max-width: 1120px) {
  body.page-shop .shop-filters:not(.is-open) { padding: 0; background: transparent; border: 0; box-shadow: none; }
  body.page-shop .shop-filters:not(.is-open) > summary { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
}
/* Round 15: the filters button gets a gold filter icon and a chevron, like the rest of the shop. */
:root {
  --i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}
body.page-shop .shop-filters:not(.is-open) > summary::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0;
  transform: none;
  background-color: var(--gold-2);
  -webkit-mask: var(--i-sliders) center / contain no-repeat;
  mask: var(--i-sliders) center / contain no-repeat;
}
body.page-shop .shop-filters:not(.is-open) > summary::after {
  content: "";
  margin-left: auto;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--gold-2);
  -webkit-mask: var(--i-chev) center / contain no-repeat;
  mask: var(--i-chev) center / contain no-repeat;
  transform: rotate(-90deg);
}
@media (min-width: 1121px) {
  body.page-shop .shop-filters:not(.is-open) > summary::after { display: none; }
}
/* ---------- Round 16: full-depth menu (sub-aisles), Brands menu, Specials & help, pickup list ---------- */
.mega__subs { list-style: none; margin: 0 0 0.35rem 0.55rem; padding: 0 0 0 0.55rem; border-left: 1px solid var(--ams-line); display: flex; flex-wrap: wrap; gap: 0.1rem 0.6rem; }
.nav .mega__subs a,
.mega__subs a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem !important;
  padding: 0.1rem 0.15rem !important;
  border: 0 !important;
  color: #0F5132 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  white-space: normal !important;
}
.mega__subs a:hover, .mega__subs a:focus-visible { color: var(--gold-2) !important; text-decoration: underline; }
.mega__sn { color: var(--gold-2); font-size: 0.7rem; font-weight: 700; }
.mega__side { display: grid; gap: 0.9rem; align-content: start; }
.mega__help .mega__list a { justify-content: flex-start; }
.mega__list--brands-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1120px) {
  .mega__groups { grid-template-columns: minmax(0, 1fr); }
  .mega__subs { margin-bottom: 0.2rem; }
  .mega--brands .mega__help, .mega--both .mega__help { display: block; }
}
@media (min-width: 1121px) {
  .mega__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-mega--car .mega__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega--brands .mega__inner { grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.9fr); }
  .mega--brands .mega__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega--brands .mega__list--brands-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__inner { max-height: calc(100vh - 9rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ams-line) transparent; }
}

/* Pickup list link in the shop bar (our "cart"). */
body.page-shop .shop-search-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: start; }
.pick-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.9rem;
  padding: 0 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 63, 0.5);
  background: var(--surface);
  color: var(--gold-2) !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.pick-link::before { content: ""; width: 1.1rem; height: 1.1rem; background-color: currentColor; -webkit-mask: var(--i-store) center / contain no-repeat; mask: var(--i-store) center / contain no-repeat; }
.pick-link__n { min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: #0F5132; color: var(--ams-card); font-size: 0.75rem; text-align: center; }
.pick-link.has-items .pick-link__n { background: linear-gradient(180deg, var(--ams-gold), var(--ams-gold-deep)); color: #FFFFFF; }
@media (max-width: 719px) {
  .pick-link > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pick-link { padding: 0 0.6rem; }
}
.pick-add.is-added { border-color: var(--gold-1); color: var(--gold-2) !important; background: rgba(255, 181, 27, 0.12); }
.pick-add--icon { min-width: 2.9rem; font-size: 1.3rem !important; font-weight: 800; }
.pick-add--icon.is-added span { display: none; }
.pick-add--icon.is-added::before { content: "✓"; }
body.page-shop .product-grid--rows .product-card__actions { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 719px) {
  body.page-shop .product-grid--rows .product-card__actions { grid-template-columns: minmax(0, 1fr) auto; }
}
body.page-shop .shop-pdp__actions .pick-add { grid-column: 1 / -1; min-height: 3rem; }

/* Pickup list page. */
.pick-items { display: grid; gap: 10px; }
.pick-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas: "img body" "qty remove";
  gap: 0.6rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.pick-row__img { grid-area: img; display: block; aspect-ratio: 1; border-radius: 10px; background: #fff; overflow: hidden; }
.pick-row__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pick-row__body { grid-area: body; min-width: 0; }
.pick-row__brand { margin: 0; color: var(--gold-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pick-row__name { color: var(--text) !important; font-weight: 700; text-decoration: none; }
.pick-row__price { margin: 0.2rem 0 0; font-weight: 800; color: var(--price, #0F5132); }
.pick-row__qty { grid-area: qty; display: inline-flex; align-items: center; gap: 0.5rem; }
.pick-row__qty .btn { min-width: 2.75rem; min-height: 2.75rem; }
.pick-row__remove { grid-area: remove; justify-self: end; min-height: 2.75rem; padding: 0 0.6rem; border: 0; background: none; color: var(--gold-2); text-decoration: underline; cursor: pointer; font: inherit; }
.pick-summary { margin-top: 1rem; padding: 1rem; border-radius: 16px; background: var(--mega-bg); box-shadow: inset 0 0 0 1px var(--ams-line); color: #0F5132; }
.pick-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.5rem; font-size: 1.05rem; }
.pick-total strong { font-size: 1.8rem; color: #0F5132; }
.pick-note { margin: 0 0 0.5rem; color: #3E6B52; font-size: 0.88rem; }
.pick-note a { color: var(--gold-2) !important; }
.pick-actions { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.pick-actions .btn { min-height: 3rem; }
.pick-empty { padding: 1.2rem; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line); }
@media (min-width: 720px) {
  .pick-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto auto; grid-template-areas: "img body qty remove"; }
  .pick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mega:empty { display: none !important; }
/* Round 16b: full-depth panels fit a laptop screen; brand names never cut off. */
.mega__list--brands-all a span:first-child { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
@media (min-width: 1121px) {
  .nav-mega--car .mega__inner { grid-template-columns: minmax(0, 2.6fr) minmax(0, 0.6fr) minmax(0, 0.95fr); gap: 1.4rem; }
  .nav-mega--car .mega__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.1rem; }
  .nav-mega--car .mega__list a { min-height: 2.2rem !important; font-size: 0.86rem !important; }
  .nav-mega--car .mega__subs a { min-height: 1.7rem !important; font-size: 0.76rem !important; }
  .mega--brands .mega__list--brands-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega--brands .mega__groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
/* Deals page tiles (their Hot Deals row), our purple and gold. */
.deal-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 1.2rem; }
.deal-tile { display: grid; gap: 0.2rem; padding: 0.9rem 0.8rem; border-radius: 14px; background: var(--mega-bg); box-shadow: inset 0 0 0 1px var(--ams-line); color: #0F5132 !important; text-decoration: none !important; min-height: 4.6rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.deal-tile strong { color: var(--gold-2); font-size: 0.98rem; }
.deal-tile span { font-size: 0.8rem; color: #3E6B52; }
.deal-tile:hover { box-shadow: inset 0 0 0 2px var(--gold-1), 0 10px 24px rgba(0, 0, 0, 0.4); }
@media (hover: hover) and (pointer: fine) { .deal-tile:hover { transform: translateY(-2px); } }
.deal-notes { margin: 0.8rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.9rem; }
.deal-notes strong { color: var(--text); }
@media (max-width: 479px) { .deal-tiles { gap: 6px; } .deal-tile { min-height: 0; padding: 0.6rem 0.5rem; } .deal-tile strong { font-size: 0.82rem; line-height: 1.2; } .deal-tile span { font-size: 0.7rem; } }
body.page-shop .shop-specs td a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* List rows on desktop: the hold button gets its own full-width row so it never spills (EN + ES). */
@media (min-width: 900px) {
  body.page-shop .product-grid--rows .product-card__actions { grid-template-columns: minmax(0, 1fr) auto auto; min-width: 11.5rem; }
  body.page-shop .product-grid--rows .product-card__actions .btn-cta { grid-column: 1 / -1; white-space: nowrap; }
  body.page-shop .product-grid--rows .product-card__actions .btn-icon-only { grid-column: 2; }
  body.page-shop .product-grid--rows .product-card__actions .pick-add--icon { grid-column: 3; }
}
@media (max-width: 719px) {
  html[lang="es"] body.page-shop .product-grid--rows .product-card__actions .btn-cta { white-space: normal; line-height: 1.15; font-size: 0.82rem !important; text-align: center; }
}

/* ---------- Shop by vehicle (finder page, saved-car bar, fit badges, home bar) ---------- */
body.page-finder .finder__form { grid-template-columns: minmax(0, 1fr); }
body.page-finder .finder__go { min-height: 3rem; width: 100%; font-weight: 800; font-size: 1rem; }
@media (min-width: 720px) {
  body.page-finder .finder__form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  body.page-finder .finder__form:has([data-finder-trim-field]:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.page-finder .finder__go { grid-column: 1 / -1; }
}
.vfit-results { margin-top: 0.4rem; }
/* 5.23: no bulk green -- was a dark green gradient card; now cream like the rest of the page. */
.vfit-summary {
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: var(--ams-card);
  box-shadow: inset 0 0 0 1px var(--ams-line);
}
.vfit-summary__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.vfit-summary h2 { margin: 0; font-size: 1.35rem; color: #0F5132; }
.vfit-summary__change { font-weight: 700; color: var(--gold-light); }
.vfit-facts { display: grid; gap: 0.35rem 1.2rem; margin: 0.8rem 0 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .vfit-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vfit-facts div { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--ams-line); }
.vfit-facts dt { color: var(--muted); font-size: 0.88rem; }
.vfit-facts dd { margin: 0; text-align: right; font-weight: 700; color: #0F5132; font-size: 0.92rem; }
.vfit-ok, .vfit-check { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.vfit-ok { background: rgba(255, 181, 27, 0.18); color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(255, 181, 27, 0.55); }
.vfit-check { background: var(--ams-mist); color: #0F5132; box-shadow: inset 0 0 0 1px var(--ams-line); }
.finder-group { margin: 1.6rem 0 0; }
.finder-group h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.finder-group__note { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.92rem; max-width: 62ch; }
.vfit-unlisted { color: var(--gold-light); font-weight: 700; }
.vfit-parts { padding: 0.9rem 1rem; border-radius: 14px; border: 1px dashed rgba(255, 181, 27, 0.5); }
.vfit-parts .finder-group__note { margin: 0; }
/* Fit badge sits on the product photo (absolute), so adding it never changes card height. */
.product-card__media { position: relative; }
.fit-badge {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 0.22rem 0.5rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
.fit-badge--fits { background: linear-gradient(180deg, var(--ams-gold), var(--ams-gold-deep)); color: #FFFFFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.fit-badge--fits::before { content: "✓ "; }
.fit-badge--likely { background: rgba(15, 61, 36, 0.88); color: var(--ams-gold); box-shadow: inset 0 0 0 1px rgba(255, 181, 27, 0.6); }
.shop-pdp__media .fit-badge { font-size: 0.85rem; padding: 0.35rem 0.6rem; }
/* "Your vehicle" bar: the slot is reserved before first paint when a car is saved (no layout shift).
   5.23: no bulk green -- was a dark green gradient; now cream (this is a different component from the
   .vfit-home/.shop-ymm car-picker inputs, despite the similar "vfit" name -- those went cream in 5.25). */
.vfit-slot { display: none; }
html[data-vehicle] .vfit-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  background: var(--ams-mist);
  box-shadow: inset 0 0 0 1px var(--ams-line);
  font-size: 0.9rem;
  color: #0F5132;
}
.vfit-bar__car { flex: 1 1 12rem; }
.vfit-bar__label { color: #3E6B52; }
.vfit-bar strong { color: var(--gold-light); }
.vfit-bar a { font-weight: 800; color: var(--gold-light); white-space: nowrap; }
.vfit-bar__change { color: #0F5132 !important; font-weight: 600 !important; text-decoration: underline; }
/* Foot traffic block on the finder page. */
.vfit-visit { padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.vfit-perks { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; }
@media (min-width: 720px) { .vfit-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vfit-visit__actions { display: grid; gap: 0.5rem; }
@media (min-width: 720px) { .vfit-visit__actions { grid-template-columns: 2fr 1fr; } }
.vfit-text { min-height: 3.2rem; font-size: 1.05rem; font-weight: 800; }
.vfit-visit__where { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.9rem; }
/* Home and car audio pages: compact Shop by vehicle bar. */
.vfit-home {
  margin: 0.8rem 0 0;
  padding: 0.8rem 0.9rem 0.9rem;
  border-radius: 16px;
  background: var(--ams-panel);
  box-shadow: inset 0 0 0 1px var(--ams-line);
}
.vfit-home__label { margin: 0 0 0.5rem; font-family: var(--blackletter); font-size: 1.2rem; line-height: 1.15; color: #0F5132; }
@media (min-width: 900px) {
  .vfit-home { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2rem; }
  .vfit-home__label { margin: 0; }
  .vfit-home .ymm { grid-template-columns: repeat(3, minmax(0, 1fr)) 12rem; }
}
.vfit-home .ymm .btn:only-of-type { grid-column: 1 / -1; }
@media (min-width: 900px) { .vfit-home .ymm .btn:only-of-type { grid-column: auto; } }
.vfit-note { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--ams-card); }
/* A car is already known (saved or in the link): hold room for the results before they load, so nothing below jumps. */
html[data-vehicle] .vfit-results[hidden] { display: block; min-height: 140vh; }
@media (min-width: 720px) { body.page-finder .finder__form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.page-finder [data-finder-trim-field].is-needed select { box-shadow: 0 0 0 3px var(--ams-gold); }
.vfit-summary__text { display: flex; justify-content: center; margin-top: 0.9rem; width: 100%; }
.vfit-trim-first { margin: 0.7rem 0 0; font-weight: 800; color: var(--gold-light); }
.vfit-kit { margin: 0 0 0.4rem; font-weight: 800; color: var(--gold-light); font-size: 1.02rem; }
/* Fit guide pages */
.fit-table-wrap { overflow-x: auto; margin: 0.6rem 0 1rem; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.fit-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 32rem; }
.fit-table th, .fit-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fit-table thead th { color: var(--gold-light); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.fit-guide-links ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.vfit-guide { display: block; margin-top: 0.6rem; font-weight: 700; color: var(--gold-light); }
/* Phone speed: shop rows after the first are laid out only when scrolled near (2,000+ elements on /shop/).
   The filter sheet is position: fixed inside a row, so rows render normally while it is open. */
main .shop-block ~ .shop-block { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Shop landing: the filters and product grid sit below the car row, far below the fold. */

/* Reserved height close to the real grid at each width, so nothing below it moves when it renders. */
body.filters-open main .shop-block, body.filters-open main .shop-layout { content-visibility: visible; }
/* Article pages (blog posts, fit guides, speaker upgrade pages): sections after the first and the footer are laid
   out when they come near the screen, so the first layout only covers the top of the page. auto keeps each
   section's real height once it has been seen. */
body.page-article main .section ~ .section { content-visibility: auto; contain-intrinsic-size: auto 520px; }
body.page-article .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Phone menu (rebuilt Oct 2026): the open menu is a fixed panel under the header that scrolls on its own, so every
   section is reachable in portrait; the page behind does not scroll. Sections are accordions; on phones a section shows
   its categories (each category page lists its sub-aisles). */
@media (max-width: 1120px) {
  .nav.is-open {
    position: fixed;
    top: var(--menu-top, 70px);
    left: 0;
    right: 0;
    bottom: var(--menu-bottom, 0px);
    z-index: 41;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  body.nav-open { overflow: hidden; }
  /* A backdrop-filter makes the header the containing block for fixed children, which would squash the panel to the header's height. */
  body.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav .mega { max-width: 100%; }
  .nav .mega__inner { min-width: 0; }
  .nav .mega__list a { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 719px) {
  .nav .mega__subs, .nav .mega__picks, .nav .mega__feature, .nav .mega__side, .nav .mega__strip { display: none !important; }
  .nav .mega__list { grid-template-columns: 1fr; }
}
@media (min-width: 1121px) {
  .nav .nav-phone { display: none !important; }
}

/* Services panel (1.3b): group name links to its hub; the + opens the sub-services.
   Phone/tablet: each group is a +/- accordion (closed until tapped).
   Desktop: the first four sub-services show; + opens the rest of a long group. */
.svc__head { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem; padding: 0 0 0.3rem; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #0F5132, rgba(15, 61, 36, 0)) 1; }
.nav .svc__name,
.svc__name { flex: 1; min-height: 2.75rem !important; display: flex !important; align-items: center; padding: 0 !important; border: 0 !important; box-shadow: none !important; color: var(--gold-2) !important; font-size: 0.8rem !important; font-weight: 800; letter-spacing: 0.12em !important; text-transform: uppercase; text-decoration: none; }
.svc__name:hover, .svc__name:focus-visible { text-decoration: underline; }
.svc__toggle { flex: none; position: relative; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 8px; background: transparent; color: var(--gold-2); cursor: pointer; }
.svc__toggle::before,
.svc__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.95rem; height: 2px; margin: -1px 0 0 -0.475rem; background: currentColor; transition: transform 0.2s ease; }
.svc__toggle::after { transform: rotate(90deg); }
.svc.is-open .svc__toggle::after { transform: rotate(0deg); }
.svc__toggle:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
@media (max-width: 1120px) {
  .svc-groups { grid-template-columns: minmax(0, 1fr) !important; gap: 0.2rem !important; }
  .svc__list { display: none; }
  .svc.is-open .svc__list { display: grid; }
}
@media (min-width: 1121px) {
  .mega--services .mega__inner { grid-template-columns: minmax(0, 1fr); }
  .svc-groups { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem 1.4rem !important; }
  .svc__toggle { display: none; }
  .svc--long .svc__toggle { display: block; }
  .svc__more { display: none; }
  .svc.is-open .svc__more { display: list-item; }
}
@media (prefers-reduced-motion: reduce) { .svc__toggle::before, .svc__toggle::after { transition: none; } }

/* 1.3c-2: on the cream shop canvas the light-gold accent turns dark green (gold on cream fails
   contrast); dark panels inside it keep the gold. */
body.page-shop main { --gold-2: #0F5132; }
/* 5.23: no bulk green -- vfit-summary/pick-summary/deal-tile/shop-head--banner/ticker/finder/vfit-bar
   (its "Your vehicle" bar was actually a dark green gradient, not the near-black the 1.3c-2 comment
   above claimed -- fixed here) all went cream. 5.25: shop-ymm (the car-picker input) went cream too,
   so its own gold --gold-2 exception is gone; it now inherits the dark-green default set just above. */
/* 5.4: cream menus (Zack, Oct 8, HARD): panel headings and links are dark green; count badges stay gold. */
.mega { --gold-2: #0F5132; }
.shop-ymm { background: var(--ams-panel); box-shadow: inset 0 0 0 1px var(--ams-line); }
.shop-ymm select:disabled { background-color: #EDF4F8; color: var(--ams-muted); }
body.page-shop .shop-search input[type="search"] { border: 1px solid var(--field-line); }

/* 1.3c-3: our tickets. Ticket marks (pickup · paid at the shop · buy now, pay later) and the
   3D lift: a layered resting shadow, and on hover the ticket rises with a deeper shadow. */
.product-card,
body.page-shop .product-card {
  box-shadow: 0 1px 0 rgba(15, 61, 36, 0.06), 0 2px 4px rgba(15, 61, 36, 0.06), 0 8px 18px rgba(15, 61, 36, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-card:hover,
.product-card:focus-within,
body.page-shop .product-card:hover {
  transform: translateY(-4px);
  border-color: #16A34A;
  box-shadow: 0 0 0 1px #16A34A, 0 4px 8px rgba(15, 61, 36, 0.10), 0 18px 36px rgba(15, 61, 36, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .product-card, body.page-shop .product-card { transition: none; }
  .product-card:hover, .product-card:focus-within, body.page-shop .product-card:hover { transform: none; }
}
.ams-marks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0 0; }
.ams-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #0F5132;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.ams-mark--pickup { background: var(--ams-mist); }
.ams-mark-line { flex: 0 0 100%; color: #0F5132; font-size: 0.75rem; font-weight: 500; line-height: 1.35; }
a.ams-mark--pay,
.ams-marks a.ams-mark--pay { background: var(--bnpl-bg); border-color: var(--bnpl-bg); color: var(--ams-card) !important; font-weight: 700; }
a.ams-mark--pay:hover,
a.ams-mark--pay:focus-visible { background: var(--bnpl-bg-hover); border-color: var(--bnpl-bg-hover); }
a.ams-mark--pay:focus-visible { outline: 2px solid #0F5132; outline-offset: 2px; }
.ams-mark-car { width: 22px; height: 13px; flex: none; color: #0F5132; }
.shop-pdp .ams-marks { margin: 0.75rem 0; }
@media (max-width: 719px) {
  .product-card .ams-mark { gap: 5px; padding: 4px 8px; font-size: 0.69rem; }
  .product-card .ams-mark-car { width: 18px; height: 11px; }
  .product-card .ams-mark-line { font-size: 0.69rem; }
}

/* 1.3c-4: headings that used DJCA's blackletter are bold sans (D2 default). */
.mega__title, .shop-ymm__label, body.page-shop main .shop-head--banner h1, .vfit-home__label { font-weight: 700; letter-spacing: -0.01em; }
.shop-ymm__label { font-size: 1.15rem; }

/* 1.3e: phone menu car picker at the top of the drawer; desktop keeps it inside the Car Audio panel. */
.nav-ymm:empty { display: none; }
.nav-ymm { order: -3; }
/* 5.25: no near-black car-picker bars (Zack, Oct 8 10:18 PM HARD) -- was #0F5132/#0F5132; now cream.
   This bar lives in the header, outside <main>, so --gold-light/--gold-2 don't reach it; hardcode
   the dark-green heading instead of relying on either variable. */
.nav-ymm--ready {
  margin: 0.6rem 0 0.4rem; padding: 0.9rem; border-radius: 14px;
  background: var(--ams-panel); box-shadow: inset 0 0 0 1px var(--ams-line);
}
.nav-ymm__title { margin: 0 0 0.6rem; color: #0F5132; font-weight: 800; font-size: 1.05rem; }
.nav-ymm .ymm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.nav-ymm .ymm select { min-height: 3rem; }
@media (min-width: 1121px) { .nav-ymm { display: none !important; } }
/* Desktop Car Audio panel: the brands column title fits its column. */
@media (min-width: 1121px) { .mega__brands .mega__title { font-size: 1.35rem; } }
/* Phone list rows: the hold button sizes to its label (never spills). */
@media (max-width: 899px) {
  body.page-shop .product-grid--rows .product-card__actions { grid-template-columns: minmax(0, 1fr) auto; }
  body.page-shop .product-grid--rows .product-card__actions .btn-cta { grid-column: 1 / -1; width: 100%; min-width: 0; white-space: nowrap; padding-inline: 0.6rem; font-size: 0.84rem !important; }
}

/* Light-theme fix (1.2c QA): on the cream page the old dark-theme gold accent becomes dark green;
   dark panels inside main keep the gold. Fit tables: sand header, dark text, readable confirm chips. */
main { --gold-light: #0F5132; }
/* 5.23: no bulk green -- vfit-summary/finder/hub-hero/hub-visit/shop-head--banner/deal-tile/pick-summary/
   vfit-bar went cream (vfit-bar's "Your vehicle" bar was a dark green gradient, not the near-black its
   old comment claimed). 5.25: vfit-home/home-ymm/shop-ymm (the real near-black car-picker inputs) went
   cream too, so none of main's panels still need the gold exception this selector used to grant them. */
.fit-table thead th { background: var(--ams-panel); color: #0F5132; }
.fit-table .vfit-check { background: var(--ams-mist); color: #0F5132; box-shadow: inset 0 0 0 1px var(--ams-line); }
/* Outline buttons: dark green on the cream page. Fact labels in dark panels are light. */
main .btn-outline { color: #0F5132; border-color: #0F5132; }
main .btn-outline:hover { color: #15803D; border-color: #16A34A; background: var(--ams-mist); }
.vfit-summary .vfit-facts dt, .finder .vfit-facts dt { color: #3E6B52; }

/* Service hub pages (/alarm/, /tint/, /stereo/, /beats/, /tesla/, /amspods/).
   Cream hero with a photo mosaic, cream sections, ticket-style cards, gold + dark green accents. */
.hub { background: var(--bg, var(--ams-page)); color: #0F5132; }
/* 5.23: no bulk green -- was a dark green gradient hero; now cream, gold wash only. */
.hub-hero {
  background:
    radial-gradient(720px 360px at 100% 0%, rgba(255, 196, 63, 0.18), transparent 70%),
    linear-gradient(135deg, var(--ams-mist) 0%, var(--ams-page) 100%);
  color: #0F5132;
  border-bottom: 3px solid #16A34A;
}
.hub-hero__inner {
  width: min(100% - 2rem, 1200px);
  margin: 0 auto;
  padding: 2rem 0 2.2rem;
  display: grid;
  gap: 1.6rem;
}
.hub-hero__eyebrow { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #0F5132; }
.hub-hero__eyebrow span { color: #3E6B52; font-weight: 600; letter-spacing: 0.08em; }
.page-shop main .hub-hero h1 { margin: 0 0 0.8rem; font-size: clamp(1.9rem, 6.4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; color: #0F5132; }
.hub-hero__lead { margin: 0 0 1.2rem; max-width: 38rem; font-size: 1.05rem; line-height: 1.6; color: #0F5132; }
.hub-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; margin: 0 0 1rem; }
.hub-hero__actions .btn { min-width: 7.5rem; justify-content: center; }
.hub-hero .btn-outline { color: #0F5132 !important; border-color: #0F5132; background: transparent; }
.hub-hero .btn-outline:hover { background: var(--ams-mist); }
/* 5.38: was a plain colored link next to the Call/Text pills; now its own orange pill, same size (.btn via markup). */
.hub-hero__plan { background: var(--bnpl-bg); border-color: var(--bnpl-bg); color: #FFFFFF !important; font-weight: 700; text-decoration: none; }
.hub-hero__plan:hover, .hub-hero__plan:focus-visible { background: var(--bnpl-bg-hover); border-color: var(--bnpl-bg-hover); }
.hub-hero__proof { margin: 0; font-size: 0.86rem; color: #3E6B52; }
.hub-hero__mosaic { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.hub-hero__mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); background: #0F5132; }
.hub-hero__mosaic { align-items: start; }
.hub-hero__mosaic figure:first-child { grid-column: 1 / -1; }
.hub-hero__mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-hero__mosaic--1 figure, .hub-hero__mosaic figure:first-child { max-height: 26rem; }
/* 5.17: the Tesla hero banner carries its own text baked in, so it is never cover-cropped like a plain
   job photo -- contain, on the image's own ratio.
   5.40: figure:first-child (a pseudo-class) outranks .hub-hero__mosaic--banner figure, so the 26rem
   cap was still applied. On the 9:16 phone poster that cap shrinks the width to about 234px and
   leaves the card on the left. This selector wins that tie: full content column, centered, no crop. */
.hub-hero__mosaic.hub-hero__mosaic--banner { width: 100%; min-width: 0; justify-items: stretch; }
.hub-hero__mosaic.hub-hero__mosaic--banner > figure {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  justify-self: stretch;
  aspect-ratio: 16 / 9;
  background: #fff;
}
.hub-hero__mosaic--banner img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (max-width: 767px) {
  .hub-hero__mosaic.hub-hero__mosaic--banner > figure { aspect-ratio: 9 / 16; max-height: none; }
}
.hub-hero__mosaic figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(11, 46, 27, 0.86); color: var(--ams-card);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
}
@media (min-width: 900px) {
  .hub-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding: 3rem 0 3.2rem; gap: 2.6rem; }
  .hub-hero--text .hub-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
/* Shared Contact Us banner: custom 1216×1095 shot on phones, 16:9 on wide screens. The copy stays in .hub-hero__inner. */
.contact-banner { width: 100%; }
.contact-banner picture, .contact-banner img { display: block; width: 100%; height: auto; }
.contact-banner img { aspect-ratio: 1216 / 1095; object-fit: cover; object-position: center; }
@media (min-width: 768px) {
  .contact-banner img { aspect-ratio: 16 / 9; }
}

.hub-body { width: min(100% - 2rem, 1200px); margin: 0 auto; padding: 0.6rem 0 2rem; }
.hub-crumbs { margin: 0.8rem 0 0; }
.hub-sec { padding: 2.2rem 0 0.6rem; }
.hub-sec--alt { position: relative; }
/* 5.24: flow + blend -- a soft fade at the top/bottom instead of a hard-edged mist rectangle,
   so alternating cream sections blend into each other rather than cutting at a visible seam. */
.hub-sec--alt::before {
  content: ""; position: absolute; inset: 0.8rem calc(50% - 50vw) -0.4rem; z-index: -1;
  background: linear-gradient(180deg, transparent 0, var(--ams-mist) 3rem, var(--ams-mist) calc(100% - 3rem), transparent 100%);
}
.hub-sec__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #15803D; }
.hub-sec__eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: #16A34A; }
.page-shop main .hub-sec h2 { margin: 0 0 0.8rem; font-size: clamp(1.45rem, 4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; color: #0F5132; }
.hub-sec__intro { max-width: 46rem; }
.hub-sec__intro p { margin: 0 0 0.8rem; line-height: 1.65; color: var(--text); }
.hub-sec__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.hub-sec__all { font-weight: 700; color: #0F5132; white-space: nowrap; }

/* Sub-services: every one clickable, photo when the live page has one. */
.hub-subs__grid { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-sub {
  position: relative; display: flex; flex-direction: column; gap: 0.25rem; height: 100%;
  padding: 0.9rem 2.2rem 0.9rem 0.9rem; border: 1px solid var(--line, var(--ams-line)); border-radius: 14px;
  background: var(--ams-card); color: #0F5132; text-decoration: none;
  box-shadow: 0 1px 0 rgba(15, 61, 36, 0.06), 0 6px 14px rgba(15, 61, 36, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hub-sub--photo { padding: 0 0 0.9rem; overflow: hidden; }
.hub-sub--photo img { display: block; width: 100%; height: auto; margin: 0 0 0.6rem; }
.hub-sub--photo .hub-sub__name, .hub-sub--photo .hub-sub__note { padding: 0 2.2rem 0 0.9rem; }
.hub-sub__name { font-weight: 800; font-size: 0.98rem; color: #0F5132; line-height: 1.25; }
.hub-sub__note { font-size: 0.82rem; color: #3E6B52; line-height: 1.4; }
.hub-sub__go { position: absolute; right: 0.9rem; bottom: 0.85rem; font-weight: 800; color: #15803D; }
.hub-sub:hover, .hub-sub:focus-visible { transform: translateY(-3px); border-color: #16A34A; box-shadow: 0 0 0 1px #16A34A, 0 14px 28px rgba(15, 61, 36, 0.16); }
@media (min-width: 720px) { .hub-subs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .hub-subs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* Products from the shop, our tickets. */
.hub-shop__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .hub-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* Content cards from the live hub. */
.hub-cards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0.6rem 0 0; }
@media (min-width: 720px) { .hub-cards--2, .hub-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .hub-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.hub-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ams-card); border: 1px solid var(--line, var(--ams-line)); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(15, 61, 36, 0.06), 0 6px 14px rgba(15, 61, 36, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hub-card:hover { transform: translateY(-3px); border-color: #16A34A; box-shadow: 0 0 0 1px #16A34A, 0 14px 28px rgba(15, 61, 36, 0.16); }
.hub-card__media { background: #fff; }
.hub-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: cover; object-position: center; }
.hub-card__body { padding: 1rem 1rem 1.1rem; }
.hub-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; line-height: 1.25; color: #0F5132; }
.hub-card h3 a { color: inherit; text-decoration: none; }
.hub-card h3 a:hover { text-decoration: underline; }
.hub-card p { margin: 0 0 0.45rem; font-size: 0.92rem; line-height: 1.55; color: var(--text); }
.hub-card__price { display: inline-block; margin: 0 0 0.6rem !important; padding: 0.25rem 0.7rem; border-radius: 999px; background: #0F5132; color: #FFFFFF !important; font-weight: 800; font-size: 0.95rem !important; }
.hub-card__items, .hub-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.hub-card__items li, .hub-list li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.45; color: var(--text); }
.hub-card__items li::before, .hub-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.38em; width: 0.7rem; height: 0.4rem; border-left: 2px solid #16A34A; border-bottom: 2px solid #16A34A; transform: rotate(-45deg); }
.hub-list { max-width: 46rem; }
.hub-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 0; padding: 0; }
.hub-chips li { padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--ams-mist); color: #0F5132; font-weight: 700; font-size: 0.82rem; }

/* FAQ accordion (+ / -), answer-first. */
.hub-faq__list { display: grid; gap: 8px; max-width: 52rem; }
.hub-faq details { border: 1px solid var(--line, var(--ams-line)); border-radius: 12px; background: var(--ams-card); }
.hub-faq summary { position: relative; list-style: none; cursor: pointer; padding: 0.95rem 3rem 0.95rem 1rem; font-weight: 700; color: #0F5132; min-height: 2.75rem; }
.hub-faq summary::-webkit-details-marker { display: none; }
.hub-faq summary::before, .hub-faq summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.9rem; height: 2px; margin-top: -1px; background: #16A34A; transition: transform 0.2s ease; }
.hub-faq summary::after { transform: rotate(90deg); }
.hub-faq details[open] summary::after { transform: rotate(0deg); }
.hub-faq details p { margin: 0; padding: 0 1rem 1rem; line-height: 1.6; color: var(--text); }

/* Visit band. 5.23: no bulk green -- was a dark green gradient; now cream with a gold top border/accent. */
.hub-visit { background: linear-gradient(135deg, var(--ams-mist), var(--ams-page)); color: #0F5132; border-top: 3px solid #16A34A; }
.hub-visit__inner { width: min(100% - 2rem, 1200px); margin: 0 auto; padding: 2rem 0; display: grid; gap: 1rem; }
.page-shop main .hub-visit h2 { margin: 0 0 0.4rem; color: #0F5132; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.hub-visit p { margin: 0 0 0.3rem; color: #0F5132; }
.hub-visit__fine { font-size: 0.86rem; color: #0F5132 !important; }
.hub-visit__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.hub-visit .btn-outline { color: #0F5132 !important; border-color: #0F5132; background: transparent; }
@media (min-width: 900px) { .hub-visit__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

@media (prefers-reduced-motion: reduce) {
  .hub-sub, .hub-card, .hub-faq summary::before, .hub-faq summary::after { transition: none; }
  .hub-sub:hover, .hub-card:hover { transform: none; }
}

/* Sub-services: photo tiles for the services the live hub shows with a photo, then every other
   sub-service as a compact link list (all clickable, same order as the menu). */
.hub-subs__more { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.hub-subs__more a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 3rem;
  padding: 0.7rem 1rem; border: 1px solid var(--line, var(--ams-line)); border-radius: 12px; background: var(--ams-card);
  color: #0F5132; font-weight: 700; text-decoration: none;
}
.hub-subs__more a:hover, .hub-subs__more a:focus-visible { border-color: #16A34A; background: var(--ams-mist); }
@media (min-width: 720px) { .hub-subs__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .hub-subs__more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Home page ---------- */
/* 5.25: no near-black car-picker bars (Zack, Oct 8 10:18 PM HARD) -- was #0F5132/#0F5132; now cream. */
.home-ymm { background: var(--ams-panel); box-shadow: inset 0 0 0 1px var(--ams-line); color: #0F5132; }
.home-ymm__inner { width: min(100% - 2rem, 1200px); margin: 0 auto; padding: 1.4rem 0 1.5rem; display: grid; gap: 0.6rem; }
.page-shop main .home-ymm h2 { margin: 0; color: #0F5132; font-size: clamp(1.3rem, 4vw, 1.7rem); }
.home-ymm p { margin: 0; color: var(--ams-muted); }
.home-ymm .ymm { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.4rem; }
.home-ymm .ymm select { min-height: 3rem; }
@media (min-width: 900px) {
  .home-ymm__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); align-items: center; column-gap: 2rem; }
  .home-ymm__inner p { grid-column: 1; }
  .home-ymm .ymm { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(3, minmax(0, 1fr)) 10rem; margin: 0; }
}
.home-svcs__grid { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .home-svcs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.home-svc {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: #0F5132;
  border: 1px solid var(--line, var(--ams-line)); border-radius: 16px; background: var(--ams-card);
  box-shadow: 0 1px 0 rgba(15, 61, 36, 0.06), 0 6px 14px rgba(15, 61, 36, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-svc img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: cover; background: #0F5132; }
.home-svc__body { display: grid; gap: 0.25rem; padding: 0.85rem 0.95rem 1rem; }
.home-svc__name { font-weight: 800; color: #0F5132; font-size: 1.02rem; }
.home-svc__note { font-size: 0.86rem; line-height: 1.45; color: #3E6B52; }
.home-svc:hover, .home-svc:focus-visible { transform: translateY(-3px); border-color: #16A34A; box-shadow: 0 0 0 1px #16A34A, 0 14px 28px rgba(15, 61, 36, 0.16); }
.home .dept-showcase { margin-top: 2rem; }
.home-brands__list a { color: inherit; text-decoration: none; }
.home-brands__list li:hover { background: #E3F1F8; }
.home-reviews__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
/* 5.23: no bulk green -- was a dark green card; now cream like the about-quote cards. */
.home-score {
  display: grid; gap: 0.2rem; padding: 1.1rem 1.2rem; border-radius: 16px; text-decoration: none;
  background: var(--ams-card); color: #0F5132; border: 1px solid var(--ams-line);
}
.home-score__n { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #0F5132; }
.home-score__stars { color: #16A34A; letter-spacing: 0.12em; }
.home-score__src { font-size: 0.86rem; color: #3E6B52; text-decoration: underline; text-underline-offset: 3px; }
.home-wait__grid { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .home-wait__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .home-wait__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-wait__grid li { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; border: 1px solid var(--line, var(--ams-line)); border-radius: 14px; background: var(--ams-card); }
.home-wait__grid strong { color: #0F5132; }
.home-wait__grid span { color: #3E6B52; font-size: 0.92rem; line-height: 1.5; }
.home-map__lead { margin: 0 0 0.8rem; color: var(--text); }
.home-map__box { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.home-map__box iframe { width: 100%; height: 360px; border: 1px solid var(--line, var(--ams-line)); border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .home-svc { transition: none; } .home-svc:hover { transform: none; } }
/* Phones: the home car picker comes right after the hero text (the service tiles below carry the photos). */
@media (max-width: 719px) { .home-hero .hub-hero__mosaic { display: none; } .home-hero .hub-hero__inner { padding-bottom: 1.4rem; } }

/* Payment plan page. */
.payplan__steps { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .payplan__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.payplan__steps li { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; border: 1px solid var(--line, var(--ams-line)); border-radius: 14px; background: var(--ams-card); }
.payplan__n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: #0F5132; color: var(--ams-gold); font-weight: 800; }
.payplan__steps strong { color: #0F5132; }
.payplan__steps span:last-child { color: #3E6B52; font-size: 0.92rem; }
.payplan__upfront { margin: 1rem 0 0; color: var(--text); }
.page-hub .site-footer { margin-top: 0; }
body.page-hub main { padding-bottom: 0; }

/* Contact page + quote form. */
.contact__body { display: grid; gap: 0 2.4rem; }
@media (min-width: 1000px) { .contact__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } .contact__body > .hub-crumbs { grid-column: 1 / -1; } }
.contact__lead { margin: 0 0 1rem; color: var(--text); }
.qf { display: grid; gap: 0.2rem; padding: 1.2rem; border: 1px solid var(--line, var(--ams-line)); border-radius: 16px; background: var(--ams-card); }
.qf__grid { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .qf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qf__field { display: grid; gap: 0.3rem; margin: 0 0 0.8rem; }
.qf__field label { font-weight: 700; font-size: 0.88rem; color: #0F5132; }
.qf input, .qf select, .qf textarea { min-height: 2.9rem; padding: 0.55rem 0.75rem; border: 1px solid var(--field-line, var(--ams-line)); border-radius: 10px; background: #fff; color: #0F5132; font: inherit; }
.qf textarea { min-height: 5.5rem; resize: vertical; }
.qf input:focus-visible, .qf select:focus-visible, .qf textarea:focus-visible { outline: 2px solid #16A34A; outline-offset: 1px; }
.qf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qf__actions { margin: 0.4rem 0 0; }
.qf__status { margin: 0.6rem 0 0; font-weight: 700; color: #0F5132; }
.qf__status[data-state="err"] { color: #8a1c1c; }
.contact__visit h3 { margin: 1rem 0 0.2rem; color: #0F5132; }
.contact__visit p { margin: 0 0 0.6rem; color: var(--text); }

/* About page: team row of five (photos uncropped in equal dark frames), Yelp quotes. */
.about-team__row { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .about-team__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1121px) { .about-team__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.about-team__row figure { margin: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line, var(--ams-line)); border-radius: 16px; background: var(--ams-card); }
.about-team__photo { position: relative; aspect-ratio: 4 / 5; background: #0b0b0c; overflow: hidden; }
.about-team__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.about-team__row figcaption { display: grid; gap: 0.2rem; padding: 0.8rem 0.9rem 1rem; font-size: 0.88rem; color: #3E6B52; line-height: 1.45; }
.about-team__row strong { color: #0F5132; font-size: 1.05rem; }
.about-team__role { color: #15803D; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.about-quotes__grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .about-quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.about-quote { margin: 0; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--ams-card); border: 1px solid var(--line, var(--ams-line)); display: grid; gap: 0.5rem; }
.about-quote__stars { margin: 0; color: #16A34A; letter-spacing: 0.1em; }
.about-quote__stars span { color: #0F5132; font-weight: 700; letter-spacing: 0.04em; margin-left: 0.3rem; }
.about-quote blockquote { margin: 0; color: #0F5132; line-height: 1.6; }
.about-quote figcaption { font-size: 0.84rem; color: var(--ams-muted); }
.about-quotes__more { margin: 1rem 0 0; }

/* /facts/ entity page. */
.facts__list { margin: 0; display: grid; gap: 0; border: 1px solid var(--ams-line); border-radius: 14px; overflow: hidden; background: var(--ams-card); max-width: 56rem; }
.facts__list > div { display: grid; gap: 0.2rem; padding: 0.8rem 1rem; border-top: 1px solid var(--ams-line); }
.facts__list > div:first-child { border-top: 0; }
.facts__list dt { font-weight: 800; color: #0F5132; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; }
.facts__list dd { margin: 0; color: #0F5132; line-height: 1.55; }
@media (min-width: 720px) { .facts__list > div { grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; } }

/* Footer: four columns on desktop (address, hours, services, visit); service links stacked. */
@media (min-width: 900px) { .site-footer .footer-grid { grid-template-columns: 1.15fr 1fr 1fr 1fr; } }
.footer-links--services { display: grid; gap: 0.45rem; }
/* "Installed by …" note linking guides and aisles to their service section. */
.hub-note { width: min(100% - 2rem, 1120px); margin: 1.2rem auto 0; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--ams-mist); border: 1px solid var(--ams-line); color: #0F5132; }
.hub-note p { margin: 0; }
.hub-note a { color: #0F5132; font-weight: 800; }
/* Locations index: miles next to each city. */
.loc-mi { margin-left: auto; padding-left: 0.6rem; color: var(--ams-muted); font-weight: 600; font-size: 0.85rem; }
.hub-subs__more a .loc-mi + * { display: none; }

/* 3.8: services index sub-lists, brands-we-love video thumbnails */
.svc-index__subs { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.svc-index__subs a { color: #15803D; text-decoration: none; font-size: 0.95rem; }
.svc-index__subs a:hover { text-decoration: underline; }
.brand-vids { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .brand-vids { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.brand-vid { display: block; color: #0F5132; text-decoration: none; font-size: 0.85rem; line-height: 1.3; }
.brand-vid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid #CDEADB; background: #ECFDF3; margin-bottom: 0.4rem; }
.brand-vid:hover img { border-color: #16A34A; }
.brand-more { margin-top: 1rem; }
.brand-more summary { cursor: pointer; font-weight: 600; color: #15803D; }
.brand-jump ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.brand-jump a { display: inline-block; padding: 0.4rem 0.85rem; border: 1px solid #CDEADB; border-radius: 999px; background: #ECFDF3; color: #0F5132; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.brand-jump a:hover { border-color: #16A34A; }

/* Arrow after card and tile names: a masked SVG instead of the U+2192 text glyph. The glyph is not in Montserrat,
   so every page printing it paid a system font-fallback lookup during the first layout (4.4b). */
.hub-card h3 a::after, .hub-subs__more a::after, .home-svc__name::after {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.04em;
  background-color: #16A34A; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 5.14: Viper + Compustar demo videos (self-hosted, click-to-play, ported from lacaralarm.com). One
   shared block (shared/scripts/lib/alarm-videos.mjs) used on every page that talks about alarms. */
.alarm-videos { display: grid; gap: 1.6rem; }
.alarm-video { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.alarm-video + .alarm-video { padding-top: 1.6rem; border-top: 1px solid var(--ams-line); }
.alarm-video__copy { flex: 1 1 260px; max-width: 32rem; min-width: 0; }
.alarm-video__eyebrow { margin: 0 0 0.4rem; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase; color: #15803D; }
.alarm-video__copy h3 { margin: 0 0 0.6rem; color: #0F5132; font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.2; }
.alarm-video__copy p { margin: 0 0 0.7rem; color: var(--text); max-width: 36rem; }
.alarm-video__points { display: grid; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0; list-style: none; }
.alarm-video__points li { position: relative; padding-left: 1.1rem; color: var(--text); line-height: 1.35; }
.alarm-video__points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.alarm-video__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0 0; }
.alarm-video__media { position: relative; flex: 0 1 300px; width: min(300px, 100%); margin: 0 auto; background: #0a0a0a; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--ams-line), 0 14px 30px rgba(15, 61, 36, 0.14); }
.alarm-video__media video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: #0a0a0a; }
.alarm-video__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #16A34A; color: #0F5132; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 8px 22px rgba(0, 0, 0, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.alarm-video__play:hover, .alarm-video__play:focus-visible { background: var(--ams-gold-deep); outline: 3px solid #fff; outline-offset: 2px; }
.alarm-video__play svg { display: block; width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.alarm-video__play[hidden] { display: none; }
@media (min-width: 640px) { .alarm-video--rev { flex-direction: row-reverse; } }
@media (prefers-reduced-motion: reduce) { .alarm-video__play { transition: none; } }

/* 5.15: Tesla model picker (reuses .home-ymm's dark-card look; its own 1-select + button form, not
   the 3-select year/make/model grid) and the ported shade-simulator's dropped CTA row. */
.tesla-picker .ymm { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tesla-picker .ymm { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.tesla-picker .ymm .btn { white-space: nowrap; }
.sim-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }
.sim-cta-row p { margin: 0; }

/* Quote buttons on every product card, shop aisle, product page, and car-picker result.
   Light peach, dark text. The note sits on its own line under the buttons.
   The header "Buy now, pay later" pill uses the same peach. Green CTAs stay green. */
.top-contact { display: flex !important; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.bnpl-top {
  background: #FED7AA !important;
  border-color: #FDBA74 !important;
  color: #431407 !important;
  font-weight: 700 !important;
  min-height: 44px;
  padding: 0.35rem 1rem;
  white-space: nowrap;
  text-decoration: none;
}
.bnpl-top:hover, .bnpl-top:focus-visible {
  background: #FDBA74 !important;
  border-color: #FB923C !important;
  color: #431407 !important;
}
@media (max-width: 1120px) {
  .top-contact .btn:not(.bnpl-top) { display: none; }
  .top-contact { padding: 0.4rem 0 0.15rem; }
}

.product-card__actions,
body.page-shop .product-grid--rows .product-card__actions,
.product-grid--rows .product-card__actions {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0.45rem !important;
}
.quote-actions,
body.page-shop .shop-pdp__info .quote-actions,
body.page-shop .product-card__actions .quote-actions,
body.page-finder .product-card__actions .quote-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.4rem !important;
  width: 100% !important;
  margin: 0 !important;
}
.quote-actions .quote-btn,
body.page-shop .product-grid--rows .product-card__actions .quote-btn,
body.page-shop .shop-pdp__info .quote-actions .quote-btn,
body.page-finder .product-card__actions .quote-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 44px !important;
  height: auto;
  padding: 0.4rem 0.75rem !important;
  margin: 0;
  border-radius: 999px;
  border: 1px solid #FDBA74 !important;
  background: #FED7AA !important;
  color: #431407 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: normal !important;
  overflow: visible;
  box-shadow: none !important;
  grid-column: auto !important;
}
.quote-actions .quote-btn:hover,
.quote-actions .quote-btn:focus-visible,
body.page-shop .product-card__actions .quote-btn:hover,
body.page-shop .product-card__actions .quote-btn:focus-visible {
  background: #FDBA74 !important;
  border-color: #FB923C !important;
  color: #431407 !important;
}
.product-card__actions > .price-ask,
.shop-pdp__info > .price-ask,
.quote-actions + .price-ask {
  display: block !important;
  width: 100% !important;
  margin: 0.1rem 0 0 !important;
  grid-column: 1 / -1 !important;
  text-align: start;
}
@media (min-width: 900px) {
  body.page-shop .shop-pdp__info .quote-actions,
  body.page-shop .shop-empty .quote-actions,
  body.page-shop .shop-wrap > .quote-actions {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) !important;
  }
}
@media (max-width: 899px) {
  body.page-shop .product-grid--rows .product-card__actions,
  body.page-shop .product-card__actions {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.page-shop .shop-pdp__info .quote-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* The photo badge is the only pay-later control on a card. The photo itself stays a product link. */
.product-card__media > .product-card__shot { display: block; height: 100%; color: inherit; text-decoration: none; }
a.product-card__badge { z-index: 2; color: var(--badge-text) !important; text-decoration: none; }

/* Phone: one card across so the Jessie bubble does not cover a whole second card's buttons.
   Extra bottom padding lets the last Call / Text / Visit row scroll clear of the bubble. */
@media (max-width: 719px) {
  .product-grid,
  .home-featured .product-grid,
  .page-shop .product-grid,
  .shop-rail .product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body {
    padding-bottom: calc(var(--bar) + 5.75rem + env(safe-area-inset-bottom));
  }
}

/* Location pages only. Near-black so Zack's black city banners sit on a matching page.
   Header, footer, and every other page stay the white and green site. */
body.page-city { background: #0A0A0A; }
body.page-city main.hub {
  background: #0A0A0A;
  color: #F5F5F5;
  padding-bottom: 0;
}
body.page-city .city-banner {
  margin: 0;
  background: #000;
  line-height: 0;
}
body.page-city .city-banner picture,
body.page-city .city-banner img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: #000;
}
body.page-city .city-banner img { aspect-ratio: 16 / 9; }
@media (max-width: 767px) {
  body.page-city .city-banner img { aspect-ratio: 9 / 16; }
}
body.page-city .hub-hero {
  background: #0A0A0A;
  color: #F5F5F5;
  border-bottom: 0;
}
body.page-city .hub-hero__inner {
  width: min(100% - 3rem, 1080px);
  padding: 2.6rem 0 1.2rem;
}
body.page-city .hub-crumbs {
  margin: 0 0 1.4rem;
  color: #A3A3A3;
  font-size: 0.86rem;
}
body.page-city .hub-crumbs a { color: #86EFAC; text-decoration: none; }
body.page-city .hub-crumbs a:hover { text-decoration: underline; }
body.page-city .hub-hero__eyebrow { color: #86EFAC; letter-spacing: 0.18em; }
body.page-city .hub-hero__eyebrow span { color: #D4D4D4; }
body.page-city .hub-hero__eyebrow::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 0.7rem;
  background: #15803D;
}
body.page-city main .hub-hero h1 {
  max-width: 18ch;
  margin: 0 0 1rem;
  color: #F5F5F5;
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
body.page-city .hub-hero__lead {
  max-width: 40rem;
  margin: 0 0 1.5rem;
  color: #E5E5E5;
  font-size: 1.08rem;
  line-height: 1.65;
}
body.page-city .hub-hero__proof { color: #A3A3A3; font-size: 0.92rem; }
body.page-city .hub-hero .btn-outline,
body.page-city .hub-visit .btn-outline,
body.page-city .home-map__box .btn-outline {
  color: #F5F5F5 !important;
  border-color: rgba(74, 222, 128, 0.75);
  background: transparent;
}
body.page-city .hub-hero .btn-outline:hover,
body.page-city .hub-visit .btn-outline:hover,
body.page-city .home-map__box .btn-outline:hover {
  color: #F5F5F5 !important;
  background: rgba(74, 222, 128, 0.14);
  border-color: #4ADE80;
}
body.page-city .hub-body {
  width: min(100% - 3rem, 1080px);
  padding: 0.4rem 0 3rem;
}
body.page-city .hub-sec {
  margin: 1.15rem 0 0;
  padding: 1.7rem 1.6rem 1.45rem;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid #15803D;
  border-radius: 16px;
}
body.page-city .hub-sec--alt::before { display: none; }
body.page-city .hub-sec__eyebrow { color: #86EFAC; }
body.page-city .hub-sec__eyebrow::before { background: #4ADE80; }
body.page-city main .hub-sec h2,
body.page-city main .hub-hero h1,
body.page-city .alarm-video__copy h3,
body.page-city .home-wait__grid strong {
  color: #F5F5F5;
}
body.page-city .hub-sec__intro p,
body.page-city .hub-list li,
body.page-city .hub-faq details p,
body.page-city .alarm-video__copy p,
body.page-city .alarm-video__points li,
body.page-city .alarm-video__eyebrow,
body.page-city .home-wait__grid span {
  color: #E5E5E5;
}
body.page-city .alarm-video__eyebrow { color: #86EFAC; }
body.page-city .hub-sec__intro a,
body.page-city .hub-list a,
body.page-city .hub-sec__all,
body.page-city .hub-faq a {
  color: #86EFAC;
}
body.page-city .hub-card,
body.page-city .hub-faq details,
body.page-city .home-wait__grid li {
  background: #1C1C1C;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
body.page-city .hub-card h3,
body.page-city .hub-card p { color: #E5E5E5; }
body.page-city .hub-card h3 a { color: #F5F5F5; }
body.page-city .hub-faq summary { color: #F5F5F5; }
body.page-city .hub-subs__more a {
  background: #1C1C1C;
  border-color: rgba(255, 255, 255, 0.08);
  color: #F5F5F5;
}
body.page-city .hub-subs__more a:hover,
body.page-city .hub-subs__more a:focus-visible {
  border-color: #15803D;
  background: #1C1C1C;
}
body.page-city .loc-mi { color: #A3A3A3; }
body.page-city .hub-visit {
  background: #0A0A0A;
  border-top: 0;
  padding: 0 0 3.5rem;
}
body.page-city .hub-visit__inner {
  width: min(100% - 3rem, 1080px);
  margin: 1.15rem auto 0;
  padding: 1.7rem 1.6rem 1.5rem;
  display: grid;
  gap: 1.1rem;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid #15803D;
  border-radius: 16px;
}
body.page-city main .hub-visit h2,
body.page-city .hub-visit p { color: #F5F5F5; }
body.page-city .hub-visit__fine { color: #A3A3A3 !important; }
body.page-city .home-map__box {
  margin-top: 0.4rem;
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
  background: #0A0A0A;
  border: 1px solid rgba(21, 128, 61, 0.55);
  border-radius: 14px;
}
body.page-city .home-map__box iframe {
  width: 100%;
  height: 280px;
  border: 0;
  border-radius: 10px;
  background: #000;
}
body.page-city .site-footer { border-top: 2px solid #15803D; }
@media (min-width: 900px) {
  body.page-city .hub-hero__inner { padding: 3.4rem 0 1.4rem; }
  body.page-city .hub-visit__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  body.page-city .hub-visit__inner .home-map__box,
  body.page-city .hub-sec .home-map__box { grid-column: 1 / -1; }
  body.page-city .home-map__box iframe { height: 420px; }
}
@media (max-width: 719px) {
  body.page-city .hub-hero__inner,
  body.page-city .hub-body,
  body.page-city .hub-visit__inner { width: min(100% - 1.5rem, 1080px); }
  body.page-city .hub-sec,
  body.page-city .hub-visit__inner { padding: 1.25rem 1.05rem 1.15rem; }
  body.page-city .hub-hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  body.page-city .hub-hero__actions .btn { width: 100%; min-width: 0; }
  body.page-city .hub-hero__plan { grid-column: 1 / -1; }
  body.page-city main .hub-hero h1 { max-width: none; }
}

/* Hub dark chrome for location pages: black header, footer, and phone drawer.
   The Menu button keeps light text on a dark control so it stays readable. */
body.page-loc .site-header,
body.page-loc .site-footer,
body.page-loc .mobile-cta-bar {
  --header-bg: #0A0A0A;
  --footer-bg: #0A0A0A;
  --bar-bg: #0A0A0A;
  --text: #F5F5F5;
  --muted: #C8C8C8;
  --link: #86EFAC;
  --link-hover: #FFFFFF;
  background: #0A0A0A;
  color: #F5F5F5;
}
body.page-loc .logo,
body.page-loc .logo-name,
body.page-loc .site-footer .logo { color: #F5F5F5; }
body.page-loc .nav {
  background: #0A0A0A;
  --nav-text: #F5F5F5;
  --nav-hot: #86EFAC;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
body.page-loc .nav-toggle {
  background: #141414;
  color: #F5F5F5;
  border-color: rgba(255, 255, 255, 0.55);
}
body.page-loc .nav-toggle:hover,
body.page-loc .nav-toggle:focus-visible {
  background: #1C1C1C;
  color: #FFFFFF;
  border-color: #86EFAC;
}
@media (min-width: 1121px) {
  body.page-loc .nav { background: transparent; }
}
body.page-loc .shop-embed,
body.page-loc .shop-embed .product-card {
  --text: #0F5132;
  --muted: #3E6B52;
  color: #0F5132;
}
body.page-city .city-banner--tile { width: min(100%, 720px); margin-inline: auto; }
body.page-city .city-banner--tile img,
body.page-loc .city-banner--tile img { aspect-ratio: 16 / 9; }
@media (max-width: 767px) {
  body.page-city .city-banner--tile img,
  body.page-loc .city-banner--tile img { aspect-ratio: 16 / 9; }
}

body.page-loc .loc-drive {
  background: #000;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
body.page-loc .loc-drive__media {
  position: relative;
  width: min(100%, 1200px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
body.page-loc .loc-drive__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
}
body.page-loc .loc-drive__video--mobile { display: none; }
@media (max-width: 767px) {
  body.page-loc .loc-drive__media { width: 100%; aspect-ratio: 9 / 16; max-height: 100svh; }
  body.page-loc .loc-drive__video--desktop { display: none; }
  body.page-loc .loc-drive__video--mobile { display: block; }
}

.loc-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0.6rem 0 0; }
@media (min-width: 720px) { .loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .loc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.loc-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 9.5rem;
  aspect-ratio: 16 / 10;
  padding: 12px;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
  color: #fff;
  text-decoration: none;
}
.loc-tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.loc-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.12) 100%);
}
.loc-tile__name { font-weight: 700; font-size: 1rem; line-height: 1.2; color: #fff; }
.loc-tile__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.loc-tile__go { color: #86EFAC; }