/* HB Motors: public site styles. Mobile first; wider layouts are added with min-width queries. */

/* Fonts are served from this site (assets/fonts, SIL Open Font License), not Google Fonts:
   no third-party request, and no extra connection before text can show.
   Each is one small variable-font file (every weight in one), trimmed to the characters the
   site uses: English and Latin-1 letters (ñ, é...), punctuation, and the peso sign.
   Anything else (rare symbols) simply shows in the phone's own font. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B1, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/oswald.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B1, U+2122, U+2190-2193, U+2212; }

:root {
  /* HB Motors palette: near-black, gauge-red accent, warm off-white */
  --ink: #1b1b1a;
  --ink-2: #4a4844;
  --ink-3: #75726b;
  --bg: #ffffff;
  --bg-soft: #f6f4ef;
  --line: #e3ded2;
  --line-strong: #cbc5b6;
  --accent: #e1461c;
  --accent-dark: #b23811;
  --accent-soft: #fdece6;
  --ok: #3a6d20;        /* text on the green tint; the bright gauge green is --go */
  --go: #4c8c2b;
  --ok-soft: #eaf3e2;
  --warn: #8a5a00;
  --warn-soft: #fbf1de;
  --muted-soft: #ece9e2;
  --radius: 6px;
  --header-h: 64px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 70px); /* + phone quick-nav row */ }
body {
  margin: 0;
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  /* Nothing can widen the page sideways on phones. 'clip' (unlike 'hidden') doesn't turn the
     body into a scroll box, so the sticky header keeps working. Must stay off <html>. */
  overflow-x: hidden;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }
html, body { touch-action: manipulation; } /* no double-tap zoom (iPhone supports this value; pinch is blocked in main.js) */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius);
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; }
.icon { flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; background: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-sm { min-height: 38px; padding: 6px 12px; font-size: .88rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn-outline { border: 1.5px solid var(--line-strong); }

/* ---------- Header and navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; }
.brand img { height: 40px; width: auto; }
.header-tools { display: flex; align-items: center; gap: 6px; margin-right: -8px; }
.call-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent); color: #fff; text-decoration: none;
}
/* Phones: oval search in the top bar, filling the space between the logo and the buttons.
   Enter (the keyboard's search key) submits, so the arrow button is left out to give the text room.
   Suggestions open full width under the bar instead of squeezed under the narrow field. */
.header-search { flex: 1 1 auto; min-width: 0; }
.header-search .search input[type="search"] { height: 40px; padding: 0 12px 0 36px; background: var(--bg-soft); border-color: var(--line-strong); }
.header-search .search input[type="search"]:focus { background: #fff; }
.header-search .search > .icon { left: 12px; }
.header-search .search-go { display: none; }
.header-search .suggestions { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) - 4px); }
@media (max-width: 899px) { .primary-nav .search { display: none; } } /* the menu drawer doesn't need a second one */
@media (max-width: 374px) {
  .brand img { height: 32px; }
  .header-row { gap: 8px; }
}
.call-btn:hover, .call-btn:active { background: var(--accent-dark); }

.primary-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(86vw, 360px); background: var(--bg);
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0));
  transform: translateX(100%); visibility: hidden;
  transition: transform .25s ease, visibility 0s .25s;
  overflow-y: auto; overscroll-behavior: contain; box-shadow: -8px 0 30px rgba(0,0,0,.18);
}
.primary-nav.open { transform: none; visibility: visible; transition: transform .25s ease; }
.nav-close { align-self: flex-end; margin-right: -10px; }
.nav-links a {
  display: flex; align-items: center; min-height: 52px; padding: 0 4px;
  font-size: 1.1rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line);
}
.nav-links a.active { color: var(--accent-dark); }
.nav-cta { display: grid; gap: 10px; margin-top: auto; }
.nav-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); }
/* Phones: the main sections stay visible under the logo bar, outside the menu drawer */
.quick-nav { display: flex; gap: 8px; padding: 8px 16px 10px; background: var(--bg-soft); border-top: 1px solid var(--line); }
.quick-nav a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 6px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
  font-size: .86rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 6px -3px rgba(0,0,0,.35);
}
.quick-nav a:active { transform: scale(.97); }
.quick-nav a.active { background: var(--ink); color: #fff; }.nav-scrim[hidden] { display: none; }

/* ---------- Search ---------- */
.search { position: relative; display: flex; align-items: center; gap: 8px; }
.search > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input[type="search"] {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px 0 42px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  font-size: 1rem; appearance: none; -webkit-appearance: none;
}
.search input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.search input[type="search"]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,23,26,.12); }
.search .btn { height: 48px; flex: none; }
.search-pill input[type="search"] { border-radius: 999px; padding-right: 48px; border-width: 1px; }
.search-go {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;
}
.search-go:hover { background: var(--bg-soft); }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 60vh; overflow-y: auto; padding: 4px;
}
.suggestions[hidden] { display: none; }
.suggestions li { border-radius: 6px; }
.suggestions a {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 12px; min-height: 44px; text-decoration: none; font-size: .95rem;
}
.suggestions li.active a, .suggestions a:hover { background: var(--bg-soft); }
.suggestions .meta { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }
.suggestions .none { padding: 12px; color: var(--ink-3); font-size: .92rem; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #fff; padding: 36px 0 40px; overflow: hidden; }
.hero-grid { display: grid; gap: 30px; align-items: center; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .9rem; font-weight: 600; color: #f1c9b9; }
.hero-eyebrow .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px rgba(76,140,43,.3); }
.hero h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 8vw, 3.5rem); line-height: 1.1; letter-spacing: -.01em; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead { color: #d8d5cc; font-size: 1rem; line-height: 1.65; max-width: 46ch; margin: 16px 0 26px; }
.hero-lead:last-child { margin-bottom: 0; }
.hero-actions .btn { border-radius: 2px; font-weight: 700; }
.hero-actions { display: grid; gap: 10px; }
.btn-lg { min-height: 48px; padding: 10px 24px; font-size: .95rem; }
.hero-meta { color: #a9a69c; font-size: .88rem; margin: 18px 0 0; }

.hero-media { position: relative; min-width: 0; }
.hero-media::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(225,70,28,.28), rgba(225,70,28,0) 72%);
}
.hero-media > * { position: relative; z-index: 1; }

.hero-logo-card { max-width: 300px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 28px 24px 22px; text-align: center; }
.hero-logo-card img { margin: 0 auto 16px; width: 100%; max-width: 250px; }
.hero-logo-card::after { content: ""; display: block; width: 64px; height: 4px; margin: 0 auto; border-radius: 2px; background: linear-gradient(90deg, var(--go), #d98c00, var(--accent)); }

/* Facebook video player: a poster until pressed, then Facebook's own player loads */
.hero-video { max-width: 560px; margin: 0 auto; }
.video-stage {
  position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #2a2926; color: #fff; text-decoration: none;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.7);
}
.video-stage.is-portrait { aspect-ratio: 2 / 3; height: min(400px, 62vh); width: auto; max-width: 100%; margin: 0 auto; }
.video-box { display: flex; align-items: center; justify-content: center; }
.video-box.has-portrait { height: min(400px, 62vh); }
.video-stage img.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-stage .video-poster-logo { position: absolute; left: 50%; top: 42%; width: min(46%, 220px); transform: translate(-50%, -50%); background: #fff; padding: 14px 18px; border-radius: 12px; }
.video-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%); }
.video-caption { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; }
.video-play {
  flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s;
}
.video-stage:hover .video-play { transform: scale(1.08); }
.video-title { font-weight: 700; font-size: .98rem; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.video-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: #000; }
.video-stage.is-playing { cursor: default; touch-action: manipulation; }
/* While a reel plays, the frame takes the reel's true 9:16 shape so Facebook's player fits exactly */
.video-stage.is-portrait.is-playing { aspect-ratio: 9 / 16; }
.video-stage.is-playing::after, .video-stage.is-playing .video-caption, .video-stage.is-playing img { display: none; }
.video-foot { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: .84rem; }
.video-foot a { color: #f1c9b9; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; gap: 6px; }
.video-foot a:hover { text-decoration: underline; color: #fff; }
.video-foot .note { color: #a9a69c; }
.video-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 2px 0; }
.video-list a {
  flex: none; max-width: 200px; min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; text-decoration: none; font-size: .8rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-list a:hover { background: rgba(255,255,255,.12); }
.video-list a[aria-current="true"] { background: var(--accent); border-color: var(--accent); }

/* ---------- Sections ---------- */
.section { padding: 36px 0; }
.section-tint { background: var(--bg-soft); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.section-sub { color: var(--ink-2); margin: 6px 0 0; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px;
  font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--ink);
  border-bottom: 2px solid var(--accent);
}
.link-arrow:hover { color: var(--accent-dark); }
.hero { border-bottom: 4px solid var(--accent); }
.section-cta h2 { font-family: var(--font-display); }

/* Customer feedback photos (bottom of the homepage) */
.section-feedback { padding: 32px 0; }
.feedback-eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.section-feedback h2 em { font-style: normal; color: var(--accent); }
/* Customer photo carousel: swipe on phones (CSS scroll-snap), arrows + dots everywhere.
   1 photo per view on phones (next one peeks in), 2 on tablets, 3 on desktop. */
.carousel { position: relative; --per-view: 2.3; --gap: 10px; }
.carousel-track {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px 10px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); scroll-snap-align: start; }
.carousel-slide a { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--bg-soft); box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.carousel-slide a:hover img { transform: scale(1.03); }
.carousel-nav {
  position: absolute; top: calc(50% - 16px); z-index: 3; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.carousel-nav:hover { background: var(--accent); color: #fff; }
.carousel-nav[hidden], .carousel-dots[hidden] { display: none; }
.carousel-nav.prev { left: 6px; }
.carousel-nav.prev .icon { transform: rotate(180deg); }
.carousel-nav.next { right: 6px; }
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: width .2s, background .2s; }
.carousel-dots button[aria-current="true"] { width: 22px; background: var(--accent); }
@media (min-width: 560px) { .carousel { --per-view: 3.3; } }
@media (min-width: 900px) { .carousel { --per-view: 5; --gap: 14px; } .carousel-nav.prev { left: -14px; } .carousel-nav.next { right: -14px; } }
@media (min-width: 1100px) { .carousel { --per-view: 6; } }
.carousel-slide a { cursor: zoom-in; }
.carousel-nav { width: 36px; height: 36px; }
/* Photo viewer counter ("2 / 5") */
.lightbox-count { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0)); margin: 0; text-align: center; color: #fff; font-size: .9rem; }
.lightbox-close { width: 48px; height: 48px; background: rgba(255,255,255,.14); }
#photoViewer { background: #0b0b0b; }
#photoViewer::backdrop { background: rgba(0,0,0,.92); }
.section-cta { background: var(--ink); color: #fff; border-bottom: 4px solid var(--accent); }
/* Highlighted "we buy" card: orange panel on the dark section */
.cta-card {
  position: relative; overflow: hidden; padding: 26px 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #f0612f 0%, var(--accent) 45%, var(--accent-dark) 100%);
  box-shadow: 0 20px 44px -18px rgba(225,70,28,.75);
}
.cta-card::after { /* soft speed-line accent in the corner */
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  border: 26px solid rgba(255,255,255,.12); pointer-events: none;
}
.cta-tag {
  display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px;
  background: rgba(27,27,26,.85); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.section-cta .cta-card h2 { font-size: clamp(1.6rem, 6vw, 2.3rem); line-height: 1.1; margin-bottom: 10px; }
.section-cta .cta-card p:not(.cta-tag) { color: rgba(255,255,255,.92); margin: 0 0 20px; max-width: 56ch; font-size: 1rem; }
.cta-call {
  position: relative; z-index: 1; min-height: 50px; padding: 12px 22px; border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 1rem; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45);
}
.cta-call .icon { color: var(--accent); }
.cta-call:hover { background: var(--ink); color: #fff; }
.cta-call:hover .icon { color: #fff; }
@media (min-width: 900px) { .cta-card { padding: 40px 44px; } }

/* ---------- Pages ---------- */
.page { padding-top: 8px; padding-bottom: 48px; }
.page-title { font-size: 1.7rem; margin: 4px 0 12px; }
.page-lead { color: var(--ink-2); max-width: 40em; }
.breadcrumb { font-size: .85rem; color: var(--ink-3); padding: 12px 0 6px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 4px; }

/* ---------- Listing tools ---------- */
.list-tools { display: grid; gap: 12px; margin: 14px 0 6px; }
.tools-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem;
}
.pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.sort-form select, .toolbar select {
  height: 44px; padding: 0 34px 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23444' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; -webkit-appearance: none; font-size: .95rem;
}
.result-count { color: var(--ink-2); font-size: .92rem; margin: 10px 0 16px; }
.tools-row .result-count { margin: 0; }

/* ---------- Cards ---------- */
/* Compact cards: 2 per row on phones, up to 5 on desktop (see the min-width rules below). */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Photo frames keep one shape for every photo: the whole photo is shown (nothing cropped)
   and any leftover space is filled with a soft blurred copy of the same photo. */
.fit-photo { position: relative; overflow: hidden; background-color: #2a2926; isolation: isolate; }
.fit-photo::before {
  content: ""; position: absolute; inset: -60px; z-index: 0;
  background: var(--photo) center / cover no-repeat; filter: blur(18px);
}
.fit-photo > img { position: relative; z-index: 1; object-fit: contain !important; }
.fit-photo > :not(img) { z-index: 2; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 10px 10px 12px; gap: 2px; }
.card-title { font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card-price { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var(--accent); margin: 2px 0 2px; }
.card-price .per { font-family: var(--font); font-size: .7rem; font-weight: 500; color: var(--ink-3); }
.card-specs { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--ink-2); font-size: .7rem; }
.card-specs li { display: inline-flex; align-items: center; gap: 4px; }
.card-specs .icon { color: var(--ink-3); width: 12px; height: 12px; }
.card-specs { margin-bottom: 10px; }
.card-btn { margin-top: auto; min-height: 32px; padding: 5px 8px; font-size: .74rem; border-width: 1.5px; border-radius: 2px; font-weight: 700; }
.card:hover .card-btn { background: var(--ink); color: #fff; }
.card.is-available, .card.is-reserved, .card.is-sold { border-bottom-width: 4px; }
.card.is-available { border-bottom-color: var(--go); }
.card.is-reserved { border-bottom-color: #e8a317; }
.card.is-sold { border-bottom-color: #6f6c66; }
.card-type {
  position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; background: rgba(27,27,26,.85); color: #fff;
  font-size: .64rem; font-weight: 600;
}
.photo-ref {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px;
  background: rgba(27,27,26,.78); color: #fff; font-size: .6rem; font-weight: 600; pointer-events: none;
}
.photo-credit { margin: 8px 0 0; font-size: .74rem; line-height: 1.4; color: var(--ink-3); }
.photo-credit a { color: inherit; }
.card-photo-credit { margin: 0; padding: 4px 10px 0; font-size: .6rem; }
.badge-corner { position: absolute; top: 6px; right: 6px; padding: 2px 8px; font-size: .62rem; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.badge-corner.badge-featured { background: var(--accent); color: #fff; }
.badge-corner.badge-reserved, .badge-corner.badge-sold { background: #fff; }
.card-note { display: none; color: var(--ink-2); font-size: .76rem; margin: 2px 0 0; } /* too long for phone-size cards */
.card-action { margin-top: auto; padding-top: 8px; position: relative; z-index: 1; }
.card-action .btn { min-height: 32px; padding: 5px 8px; font-size: .74rem; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.4; }
.badge-available { background: var(--ok-soft); color: var(--ok); }
.badge-reserved { background: var(--warn-soft); color: var(--warn); }
.badge-sold { background: var(--muted-soft); color: var(--ink-2); }
.badge-featured { background: var(--ink); color: #fff; }
.badge-overlay { position: absolute; top: 10px; left: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.badge-overlay.badge-reserved, .badge-overlay.badge-sold { background: #fff; }

.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; }
.pagination a, .pagination span {
  min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .gap { border: 0; min-width: 0; }

.empty { text-align: center; padding: 40px 16px; background: var(--bg-soft); border-radius: var(--radius); }
.empty h3 { font-size: 1.15rem; margin-bottom: 8px; }
.empty p { color: var(--ink-2); max-width: 34em; margin: 0 auto 18px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; }

/* ---------- Vehicle detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 8px; }
.detail > * { min-width: 0; } /* a long thumbnail row scrolls inside its strip instead of widening the page */
.gallery-main {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-count {
  position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.7); color: #fff;
  font-size: .8rem; padding: 3px 10px; border-radius: 999px;
}
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: thin; }
.thumb { flex: none; width: 76px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--bg-soft); cursor: pointer; opacity: .75; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.active { border-color: var(--accent); opacity: 1; }

.buy-panel h1 { font-size: 1.5rem; margin-bottom: 8px; }
.buy-status { margin: 0 0 6px; }
.buy-price { font-size: 2rem; font-weight: 800; color: var(--accent-dark); margin: 0 0 16px; letter-spacing: -.01em; }
.buy-actions { display: grid; gap: 10px; }
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.contact-pair.has-share { grid-template-columns: 1fr 1fr auto; }
.share { position: relative; }
.share-toggle { width: 44px; padding: 0; }
.share-toggle[aria-expanded="true"] { background: var(--bg-soft); border-color: var(--ink); }
.share-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 220px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.share-menu[hidden] { display: none; }
.share-menu-title { margin: 4px 8px 6px; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.share-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px;
  border: 0; border-radius: var(--radius); background: none; color: var(--ink);
  font: inherit; font-size: .92rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.share-item[hidden] { display: none; }
.share-item:hover, .share-item:focus-visible { background: var(--bg-soft); }
.share-item[data-share-facebook] .icon { color: #1877f2; }
.share-item[data-share-messenger] .icon { color: #0a7cff; }
.share-status { margin: 4px 8px 4px; font-size: .82rem; color: var(--ink-2); }
.share-status:empty { display: none; }
.buy-location { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; color: var(--ink-2); font-size: .9rem; }
.buy-location .icon { margin-top: 3px; }

.buy-panel .detail-info { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-section { margin-bottom: 26px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section h2 { font-size: 1.15rem; margin-bottom: 10px; }
.specs { margin: 0; border-top: 1px solid var(--line); }
.specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-3); }
.specs dd { margin: 0; font-weight: 600; text-align: right; }
.prose { color: var(--ink-2); }
.related { padding-bottom: 0; }

/* Fixed bar with the price and a call/inquire shortcut on phones */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.mobile-bar-price { flex: 1; min-width: 0; line-height: 1.25; }
.mobile-bar-price strong { display: block; font-size: 1.1rem; color: var(--accent-dark); }
.mobile-bar-price span { display: block; font-size: .8rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) { .mobile-bar { transition: transform .2s ease; } .mobile-bar.is-hidden { transform: translateY(110%); } }
body.has-mobile-bar { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0)); }

/* ---------- Rentals ---------- */
.requirements { margin-top: 36px; padding: 20px; background: var(--bg-soft); border-radius: var(--radius); }
.requirements h2 { font-size: 1.1rem; margin-bottom: 10px; }
.requirements li { padding: 6px 0; color: var(--ink-2); }
.requirements strong { color: var(--ink); }

/* ---------- Dialogs ---------- */
.dialog {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: #fff; color: inherit;
}
.dialog::backdrop, .lightbox::backdrop { background: rgba(0,0,0,.55); }
.dialog:not([open]), .lightbox:not([open]) { display: none; }
.dialog-form { display: flex; flex-direction: column; height: 100%; }
.dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); padding-top: calc(10px + env(safe-area-inset-top, 0));
}
.dialog-head h2 { font-size: 1.15rem; }
.dialog-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; -webkit-overflow-scrolling: touch; }
.dialog-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--line); background: #fff; }
.dialog-context { background: var(--bg-soft); padding: 10px 12px; border-radius: var(--radius); font-size: .92rem; margin-bottom: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  background: var(--accent-soft); color: var(--accent-dark); border: 1px solid #f4c3b3;
  padding: 12px 14px; border-radius: var(--radius); font-size: .92rem; margin-bottom: 16px;
}
.form-alert[hidden], .field-error[hidden] { display: none; }

/* ---------- Form fields ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--ink-3); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"],
.field input[type="number"], .field input[type="password"], .field select, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  font-size: 1rem; /* 16px+ stops iOS zooming into the field */
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,23,26,.12); }
.field [aria-invalid="true"] { border-color: var(--accent); background: #fffafa; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(214,45,32,.18); }
.field-hint { color: var(--ink-3); font-size: .84rem; margin: 6px 0 0; }
.field-error { color: var(--accent-dark); font-size: .88rem; font-weight: 600; margin: 6px 0 0; }
.field-error::before { content: "! "; font-weight: 800; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .9rem !important; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.check a { text-decoration: underline; }

/* ---------- Lightbox ---------- */
.lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
/* Zoom inside the viewer: the page's own pinch zoom stays off, the photo handles it (main.js) */
.lightbox { overflow: hidden; touch-action: none; }
.lightbox img { cursor: zoom-in; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.lightbox.is-zoomed img { cursor: grab; }
.lightbox.is-zoomed .lightbox-nav { opacity: .35; }
.lightbox-close, .lightbox-nav { z-index: 3; }
.lightbox-close { position: absolute; top: calc(8px + env(safe-area-inset-top, 0)); right: 8px; color: #fff; z-index: 2; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.15); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 64px;
  border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 2.2rem; cursor: pointer; line-height: 1;
}
.lightbox-nav.prev { left: 0; border-radius: 0 8px 8px 0; }
.lightbox-nav.next { right: 0; border-radius: 8px 0 0 8px; }

/* ---------- Notices ---------- */
.notice { padding: 12px 14px; border-radius: var(--radius); margin: 14px 0; font-size: .95rem; border: 1px solid transparent; }
.notice-error { background: var(--accent-soft); color: var(--accent-dark); border-color: #f4c3b3; }
.notice-success { background: var(--ok-soft); color: var(--ok); border-color: #c5deb3; }
.notice-info { background: var(--bg-soft); color: var(--ink-2); border-color: var(--line); }
.notice a { text-decoration: underline; }

/* ---------- Thank you, 404, error page ---------- */
.thank-you, .not-found { text-align: center; padding-top: 48px; }
.check-mark { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: flex; align-items: center; justify-content: center; }
.thank-you h1, .not-found h1 { font-size: 1.6rem; margin-bottom: 10px; }
.thank-you p, .not-found p { color: var(--ink-2); }
/* "Need an answer sooner?" highlight on the thank-you page */
.thank-you { padding-bottom: 56px; }
.sooner-box {
  margin: 30px auto 0; max-width: 520px; padding: 22px 20px; border-radius: 16px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #f0612f 0%, var(--accent) 45%, var(--accent-dark) 100%);
  box-shadow: 0 18px 40px -18px rgba(225,70,28,.75);
}
.thank-you .sooner-box p { color: #fff; }
.thank-you .sooner-box .sooner-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; }
.thank-you .sooner-box .sooner-text { margin: 0 0 18px; color: rgba(255,255,255,.92); font-size: .95rem; }
.sooner-actions { display: grid; gap: 10px; }
.sooner-actions .btn { min-height: 50px; border-radius: 999px; font-weight: 800; font-size: 1rem; }
.sooner-call { background: #fff; color: var(--ink); box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
.sooner-call .icon { color: var(--accent); }
.sooner-call:hover { background: var(--ink); color: #fff; }
.sooner-call:hover .icon { color: #fff; }
.sooner-msg { background: rgba(27,27,26,.88); color: #fff; }
.sooner-msg:hover { background: #000; }
@media (min-width: 560px) { .sooner-actions { grid-template-columns: 1fr 1fr; } .sooner-actions .btn { font-size: .92rem; } }
.error-code { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--accent); margin-bottom: 8px; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 14px; }
.error-page { max-width: 520px; margin: 0 auto; padding: 72px 20px; text-align: center; font-family: var(--font); }
.error-page h1 { font-size: 1.6rem; margin-bottom: 10px; }
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.error-detail { text-align: left; background: var(--bg-soft); padding: 12px; overflow-x: auto; font-size: .8rem; }

/* ---------- Legal pages ---------- */
.legal h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; }
.legal-updated { color: var(--ink-3); font-size: .88rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #d8d5cc; padding-top: 44px; font-size: .9rem; line-height: 1.65; }
.site-footer .container { max-width: 1100px; }
.footer-grid { display: grid; gap: 28px; padding-bottom: 36px; }
.site-footer h2 { font-family: var(--font-display); color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.site-footer p { margin: 0 0 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-about img { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-about p { max-width: 36ch; }
.footer-visit address { max-width: 24ch; }
.footer-social { display: flex; gap: 10px; margin: 14px 0 16px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff;
}
.footer-social a:hover { background: #fff; color: var(--ink); }
.footer-bottom { padding-bottom: env(safe-area-inset-bottom, 0); text-align: center; }
.footer-bottom nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-copy { padding: 18px 0 22px; color: #a9a69c; font-size: .84rem; }
body.has-mobile-bar .site-footer { margin-bottom: 0; }

/* ---------- Cookie settings banner ---------- */
.cookie-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0)); z-index: 300;
  max-width: 720px; margin: 0 auto; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 10px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.4); max-height: calc(100vh - 24px); overflow-y: auto;
}
.cookie-banner[hidden] { display: none; }
/* Vehicle pages on phones: sit above the bottom price bar instead of covering it */
@media (max-width: 899px) {
  body.has-mobile-bar .cookie-banner { bottom: calc(86px + env(safe-area-inset-bottom, 0)); max-height: calc(100vh - 110px); }
}
.cookie-inner { padding: 16px 18px; display: grid; gap: 12px; }
.cookie-text h2 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 4px; }
.cookie-text p { margin: 0; font-size: .86rem; color: var(--ink-2); }
.cookie-text a { color: var(--accent-dark); }
.cookie-text strong { color: var(--ink); }
/* Two equal choices side by side */
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie-actions .btn { min-height: 42px; padding: 8px 12px; font-size: .88rem; border-radius: 2px; }
@media (min-width: 560px) {
  .cookie-actions { display: flex; justify-content: flex-end; }
  .cookie-actions .btn { min-width: 150px; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 560px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .dialog {
    width: min(520px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 48px);
    margin: auto; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.3);
  }
  .dialog-form { max-height: calc(100vh - 48px); }
  .dialog-head { padding-top: 10px; }
}

@media (min-width: 900px) {
  :root { --header-h: 66px; }
  .container { padding: 0 24px; }
  .header-tools { display: none; }
  .nav-scrim { display: none; }
  .quick-nav, .header-search { display: none; }
  html { scroll-padding-top: calc(var(--header-h) + 12px); }
  .brand img { height: 40px; }

  .primary-nav {
    position: static; width: auto; flex: 1; flex-direction: row; align-items: center; gap: 20px;
    padding: 0; transform: none; visibility: visible; box-shadow: none; overflow: visible; background: none;
    justify-content: flex-end; transition: none;
  }
  .nav-close { display: none; }
  .nav-links { display: flex; gap: 2px; margin-right: auto; margin-left: 8px; }
  .nav-links a {
    position: relative; min-height: 44px; padding: 0 8px; font-size: .88rem; font-weight: 600;
    white-space: nowrap; border: 0; color: var(--ink-2);
  }
  .nav-links a::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px;
    background: var(--accent); transform: scaleX(0); transition: transform .15s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-links a.active { color: var(--ink); }
  .nav-links a.active::after { transform: scaleX(1); }
  .primary-nav { gap: 12px; }
  .primary-nav .search { width: 220px; flex: 0 1 220px; min-width: 140px; }
  .primary-nav .search input[type="search"] { height: 40px; font-size: .9rem; }
  .primary-nav .search-go { width: 32px; height: 32px; right: 4px; }
  .nav-cta { display: flex; margin: 0; gap: 8px; }
  .nav-cta .btn { min-height: 40px; padding: 8px 16px; font-size: .88rem; font-weight: 700; border-radius: 2px; white-space: nowrap; }

  .hero { padding: 40px 0; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
  .section-feedback { padding: 40px 0; }
  .hero-actions { display: flex; flex-wrap: wrap; }
  .section { padding: 48px 0; }
  .section-head h2 { font-size: 2rem; }
  .page-title { font-size: 1.9rem; }
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .card-title { font-size: .86rem; }
  .card-price { font-size: 1.2rem; }
  .card-specs { font-size: .74rem; }
  .card-btn, .card-action .btn { min-height: 34px; font-size: .78rem; }
  .card-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .list-tools { grid-template-columns: 1fr; }
  .pills { margin: 0; padding: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  .detail { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 32px; align-items: start; margin-top: 16px; }
  .gallery { grid-column: 1; grid-row: 1; }
  /* Panel holds price, buttons, address and the description, so it scrolls with the page (not sticky).
     It spans both rows so the specifications sit straight under the photos. */
  .buy-panel { grid-column: 2; grid-row: 1 / span 2; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
  .detail-specs { grid-column: 1; grid-row: 2; }
  .mobile-bar { display: none; }
  @media (max-width: 899px) { .mobile-bar { transition: transform .2s ease; } .mobile-bar.is-hidden { transform: translateY(110%); } }
body.has-mobile-bar { padding-bottom: 0; }
  .thumb { width: 92px; }
}

@media (min-width: 1100px) {
  .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .primary-nav { gap: 16px; }
  .primary-nav .search { width: 300px; flex-basis: 300px; }
  .nav-links { margin-left: 32px; gap: 4px; }
  .nav-links a { padding: 0 10px; font-size: .92rem; }
  .nav-links a::after { left: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}