@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #faf6ee;
  --color-surface: #f3ede0;
  --color-text: #36393d;
  --color-muted: #6b6b70;
  --color-border: #e4ded0;
  --color-accent: #ff6b4a;
  --color-accent-hover: #f0532f;
  --color-on-accent: #1f2124;
  --color-link: #c8391b;
  --color-success: #1a7f37;
  --color-danger: #c0362c;
  --color-nav-bg: #36393d;
  --color-nav-text: #f3f3f4;
  --radius: 8px;
  --content-width: 1200px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-nav: "Oswald", "Arial Narrow", sans-serif;
  --font-sans: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Storefront header / nav ------------------------------------- */
/* Two rows, like a typical parts-catalog storefront: logo + search + cart
   on top, a dark bar of nav tabs (with dropdowns) underneath. */

/* Note: .site-header deliberately has no bottom border — the dark nav bar is
   its own edge, and a 1px light line here showed as a white seam above the
   full-width homepage banner. */

.site-header-top {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.brand { font-weight: 700; font-size: 1.25rem; color: var(--color-text); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
/* Text wordmark (until a new logo image exists): small coral "THE" over the
   bold charcoal name, in the site's display type. */
.brand-wordmark { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); text-transform: uppercase; }
.wordmark-the { color: var(--color-accent); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.32em; }
.wordmark-name { color: var(--color-text); font-size: 1.85rem; font-weight: 700; letter-spacing: 0.02em; margin-top: 2px; white-space: nowrap; }

.site-search { position: relative; display: flex; flex: 1 1 480px; max-width: 480px; }
.site-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  padding: var(--space-1) var(--space-2);
  font: inherit;
}
.site-search button {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 var(--space-2);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.site-search button:hover { background: var(--color-accent-hover); }

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
  overflow: hidden;
}
.search-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion:hover { background: var(--color-surface); text-decoration: none; }
.search-suggestion-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-meta { color: var(--color-muted); font-size: 0.85rem; flex-shrink: 0; }
.search-suggestion[data-type="part_type"] .search-suggestion-label { font-weight: 600; }

.cart-link { font-weight: 600; color: var(--color-text); flex-shrink: 0; margin-left: auto; }
.cart-count {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 1px 6px;
  margin-left: var(--space-1);
}

.site-nav-bar {
  background: var(--color-nav-bg);
  position: relative;
}
.site-nav {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-5, 40px);
}
.site-nav > a { display: block; padding: var(--space-2) 0; font-weight: 600; color: var(--color-nav-text); }
.site-nav > a.active { color: var(--color-accent); }
.nav-item { position: relative; }
.nav-item > a { display: block; padding: var(--space-2) 0; font-weight: 600; color: var(--color-nav-text); }
.nav-item > a.active { color: var(--color-accent); }
.chevron { font-size: 0.7em; margin-left: 2px; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  min-width: 200px;
  padding: var(--space-1) 0;
  z-index: 10;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: var(--space-1) var(--space-2); color: var(--color-text); }
.dropdown a:hover { background: var(--color-surface); text-decoration: none; }

.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-nav-text); padding: var(--space-1) 0; }

@media (max-width: 720px) {
  .site-header-top { flex-wrap: wrap; }
  .wordmark-name { font-size: clamp(1rem, 5.6vw, 1.6rem); }
  .site-search { order: 3; flex: 1 1 100%; max-width: none; }

  .site-nav-bar { padding: 0 var(--space-3); }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-nav-bg);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
    z-index: 15;
  }
  .site-nav.open { display: flex; }
  .nav-item { width: 100%; }
  .dropdown { position: static; display: block; border: none; box-shadow: none; background: transparent; padding-left: var(--space-2); }
  .dropdown a { color: var(--color-nav-text); }
  .dropdown a:hover { background: rgba(255, 255, 255, 0.08); }
}

/* File-explorer-style breadcrumb trail, shown on every page except the
   homepage (nothing to show a path back from there). */
.breadcrumbs {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Full-width strip; side padding keeps the content on the page column. */
  padding: 6px max(var(--space-3), calc((100% - var(--content-width)) / 2 + var(--space-3)));
}
.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--color-muted);
  flex-shrink: 0;
}
.breadcrumb-back:hover { background: var(--color-border); color: var(--color-text); text-decoration: none; }
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 0 0;
  padding: 0;
  max-width: var(--content-width);
  font-size: 0.85rem;
}
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--color-border); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-link); }
.breadcrumbs li[aria-current="page"] { color: var(--color-text); font-weight: 600; }

.site-main { max-width: var(--content-width); margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-8); }

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---- Homepage / category tiles ------------------------------------ */

.content-page { max-width: 70ch; }
.content-page p { margin: 0 0 var(--space-2); color: var(--color-text); }

.hero { padding: var(--space-2) 0 var(--space-4); text-align: center; }
.hero h1 { font-size: 2.25rem; margin: 0 0 var(--space-2); }
.hero h1 span { display: block; white-space: nowrap; }
/* Rotating word box in the headline. All words share one grid cell, so the
   box is as wide as the longest word and never resizes as words change.
   Words rotate one after another. To add a word, add a .rotator-word in
   routes/storefront.js, then update --words, the nth-child delays and the
   keyframe percentages below. */
.hero h1 .rotator {
  --words: 5;
  --hold: 3s;
  display: inline-grid;
  overflow: hidden;
  vertical-align: baseline; /* measured: word sits exactly on the headline's baseline at 17px and 40px */
  /* Caps have no descenders, so trim the bottom and add a little on top
     to center the word optically. */
  padding: 0.02em 0.3em 0.1em;
  border: 3px solid var(--color-accent);
  border-radius: var(--radius);
  line-height: 1.05;
}
.hero h1 .rotator-word {
  grid-area: 1 / 1;
  display: block;
  text-align: center;
  opacity: 0;
  animation: rotator-word calc(var(--words) * var(--hold)) ease-in-out infinite both;
}
.hero h1 .rotator-word:nth-child(2) { animation-delay: calc(var(--hold) * 1); }
.hero h1 .rotator-word:nth-child(3) { animation-delay: calc(var(--hold) * 2); }
.hero h1 .rotator-word:nth-child(4) { animation-delay: calc(var(--hold) * 3); }
.hero h1 .rotator-word:nth-child(5) { animation-delay: calc(var(--hold) * 4); }
/* Each word owns 1/5 of the cycle: slide in, hold, slide out, then hidden.
   If the word count changes, rescale these percentages (100 / words). */
@keyframes rotator-word {
  0%   { opacity: 0; transform: translateY(70%); }
  3%   { opacity: 1; transform: translateY(0); }
  16%  { opacity: 1; transform: translateY(0); }
  19%  { opacity: 0; transform: translateY(-70%); }
  100% { opacity: 0; transform: translateY(-70%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .rotator-word { animation: none; }
  .hero h1 .rotator-word:first-child { opacity: 1; }
  .hero h1 .rotator-word:not(:first-child) { display: none; }
}
.hero p { color: var(--color-muted); font-size: 1.1rem; max-width: 90ch; margin: 0 auto; }

/* Full-width homepage banner (iFixit-style): photo behind, dark overlay for
   legibility, headline + button in front. Photo is /hero.jpg (public/); until
   it exists the charcoal fallback color shows. Rendered outside <main> so it
   can span the screen. */
.hero-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(380px, 45vw, 560px);
  padding: var(--space-8) var(--space-3);
  background:
    linear-gradient(rgba(28, 30, 33, 0.66), rgba(28, 30, 33, 0.8)),
    url("/hero.jpg") center 35% / cover no-repeat, /* crop favors the tool wall over the bench */
    var(--color-nav-bg);
  color: var(--color-bg);
}
.hero-banner .hero { padding: 0; }
.hero-banner .hero h1 { color: var(--color-bg); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
/* Same max width as the header search bar (.site-search). */
.hero .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); white-space: nowrap; width: min(100%, 480px); font-size: 1.05rem; padding: 10px var(--space-3); text-decoration: none; }
.hero .hero-cta:hover { text-decoration: none; }
@media (max-width: 480px) {
  .hero .hero-cta { font-size: 1rem; padding: 10px var(--space-2); }
}

/* ---- Diagnostic funnel (homepage Step 1, part-type Step 2) -------- */

.diagnostic-step { margin-top: var(--space-6); }
.diagnostic-step h1, .diagnostic-step h2 { margin: 0 0 var(--space-3); }
.step-eyebrow { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); margin: 0 0 var(--space-1); }

/* flex (not grid) so a tile shrink-wraps to its own icon+label instead of
   stretching to fill the row — matters now that there's often just one
   tile (Wheels only, for now), which used to stretch to a huge fixed width. */
.diagnostic-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.diagnostic-tile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}
.diagnostic-tile:hover { border-color: var(--color-accent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); text-decoration: none; }
.diagnostic-icon { color: var(--color-link); display: flex; }
.diagnostic-icon svg { width: 32px; height: 32px; }
.diagnostic-label { font-weight: 700; font-size: 1.1rem; }
.diagnostic-caption { display: block; color: var(--color-muted); font-size: 0.9rem; }

.fork-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  max-width: 640px;
}
.fork-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.fork-tile:hover { border-color: var(--color-accent); text-decoration: none; }
.fork-icon { color: var(--color-link); }
.fork-label { font-weight: 700; font-size: 1.1rem; }
.fork-caption { color: var(--color-muted); font-size: 0.85rem; }
.fork-back { margin-top: var(--space-3); }

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  max-width: 900px;
}
.brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.brand-tile:hover { border-color: var(--color-accent); text-decoration: none; }
.brand-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-tile-fallback { font-weight: 700; color: var(--color-text); text-align: center; }

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  max-width: 960px;
}
.model-card {
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}
.model-card:hover { border-color: var(--color-accent); text-decoration: none; }
.model-card-image {
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border-radius: var(--radius);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.model-card-image img { width: 100%; height: 100%; object-fit: contain; }
.model-card h3 { margin: 0 0 4px; font-size: 1rem; }
.model-card-meta { margin: 0; color: var(--color-muted); font-size: 0.85rem; }

.content-page-text { max-width: 60ch; color: var(--color-text); margin: 0 0 var(--space-2); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.product-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
}
.product-card:hover { border-color: var(--color-accent); text-decoration: none; }
.product-card-image-placeholder, .product-image-placeholder {
  background: var(--color-border);
  border-radius: var(--radius);
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.product-card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  background: var(--color-bg);
  display: block;
}
.price { font-weight: 700; font-size: 1.1rem; }
.fit-badge { color: var(--color-success); font-size: 0.85rem; font-weight: 600; }
.empty-state { color: var(--color-muted); }

/* ---- Forms / buttons (shared storefront + admin) ------------------ */

label { font-weight: 600; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
textarea, select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  width: 100%;
}

button, .button {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 9px var(--space-3);
  font-weight: 600;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}
button:hover, .button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); text-decoration: none; }
button:active, .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
button:disabled, .button:disabled { background: var(--color-muted); border-color: var(--color-muted); cursor: not-allowed; transform: none; }

/* Secondary: outlined, for non-primary actions (Edit, Save on an inline
   rename, Upload/Replace logo) — keeps the accent color reserved for the
   one primary action per screen. */
button.secondary, .button.secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
button.secondary:hover, .button.secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-muted);
  color: var(--color-text);
}

button.danger, .button.danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
button.danger:hover, .button.danger:hover { background: #a02c24; border-color: #a02c24; }

button.small, .button.small { padding: 4px 10px; font-size: 0.8rem; }

.error { color: var(--color-danger); }

.picker-form { display: grid; gap: var(--space-2); max-width: 420px; margin-top: var(--space-3); }

/* ---- Product page --------------------------------------------------- */

.product-page { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); }
@media (max-width: 800px) { .product-page { grid-template-columns: 1fr; } }

/* Fixed landscape aspect-ratio frame (like a typical marketplace listing)
   so gallery photos never blow out the layout regardless of the source
   photo's own dimensions. object-fit: contain (not cover) so nothing gets
   cropped off an admin-uploaded part photo. */
.gallery-main {
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main .product-image-placeholder { height: 100%; width: 100%; background: transparent; margin: 0; border-radius: 0; }

.gallery-thumbs { display: flex; gap: var(--space-1); margin-top: var(--space-2); flex-wrap: wrap; }
.gallery-thumb {
  padding: 0;
  width: 64px;
  height: 64px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
  cursor: pointer;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { border-color: var(--color-border); }
.gallery-thumb.active { border-color: var(--color-accent); }

.buy-box { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); align-self: start; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: var(--color-muted); margin: 0 0 var(--space-1); }
.stock-badge { display: inline-block; font-size: 0.85rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; margin-bottom: var(--space-2); }
.stock-badge.in_stock { background: #e6f4ea; color: var(--color-success); }
.stock-badge.out_of_stock { background: #f5e6e5; color: var(--color-danger); }
.secure-note { color: var(--color-muted); font-size: 0.85rem; margin-top: var(--space-2); }

/* Video (when present) sits beside the description instead of spanning the
   full page width. Falls back to a single description column when a
   product has no video — see routes/storefront.js. */
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
@media (max-width: 800px) { .details-grid { grid-template-columns: 1fr; } }
.details-grid .video-embed, .details-grid .description { margin-top: 0; }

.video-embed { margin-top: var(--space-4); }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); border: none; }

.description { margin-top: var(--space-4); max-width: 70ch; }
.description p { margin: 0 0 var(--space-2); }

.compatibility { margin-top: var(--space-4); }
.compatibility ul { columns: 2; gap: var(--space-3); }

/* ---- Cart -------------------------------------------------------------- */

.cart-page { max-width: var(--content-width); }
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-4); align-items: start; margin-top: var(--space-3); }
@media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-items { display: flex; flex-direction: column; gap: var(--space-2); }
.cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
@media (max-width: 560px) {
  .cart-row { grid-template-columns: 48px 1fr; grid-template-areas: "image info" "image stepper" "image price-remove"; row-gap: var(--space-1); }
  .cart-row-image { grid-area: image; width: 48px; height: 48px; }
}
.cart-row-image {
  width: 64px;
  height: 64px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}
.cart-row-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-row-name { font-weight: 600; }
.cart-row-unit-price { font-size: 0.85rem; color: var(--color-muted); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.qty-btn { background: var(--color-surface); color: var(--color-text); border: none; width: 28px; height: 28px; padding: 0; font-size: 1rem; line-height: 1; cursor: pointer; }
.qty-btn:hover { background: var(--color-border); }
.qty-value { display: inline-block; width: 28px; text-align: center; font-weight: 600; font-size: 0.9rem; }

.cart-row-price { font-weight: 700; min-width: 70px; text-align: right; }

.cart-remove { background: none; color: var(--color-muted); padding: 0; font-weight: 500; font-size: 0.85rem; }
.cart-remove:hover { background: none; color: var(--color-danger); text-decoration: underline; }

.cart-summary-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); background: var(--color-surface); }
.cart-summary-card h2 { margin: 0 0 var(--space-2); font-size: 1.1rem; }
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 1.1rem; padding: var(--space-1) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: var(--space-1) 0; }
.cart-summary-note { color: var(--color-muted); font-size: 0.8rem; margin: var(--space-1) 0 var(--space-2); }
.checkout-btn { width: 100%; text-align: center; margin-top: var(--space-1); }
.cart-summary-card .secure-note { text-align: center; }

.checkout-result { max-width: 60ch; }

/* ---- Admin --------------------------------------------------------- */

body.admin { background: var(--color-surface); }
.admin-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-header .brand { font-weight: 700; }
.admin-nav { display: flex; gap: var(--space-4); align-items: center; }
.admin-nav a { color: var(--color-muted); font-weight: 600; padding: 4px 0; border-bottom: 2px solid transparent; }
.admin-nav a:hover { color: var(--color-text); text-decoration: none; }
.admin-nav a.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.logout-form button { background: none; color: var(--color-muted); border: none; padding: 0; font-weight: 600; }
.logout-form button:hover { color: var(--color-text); background: none; border: none; text-decoration: underline; }

/* Category-scoped sub-nav (Part Types / Brands / Models / Products) — the
   "pick a category first" restructuring; only rendered when adminLayout()
   is given a `category`. */
.admin-subnav {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
}
.admin-subnav-label { font-weight: 700; color: var(--color-text); padding-right: var(--space-2); border-right: 1px solid var(--color-border); }
.admin-subnav a { color: var(--color-muted); font-weight: 600; padding: 6px 2px; border-bottom: 2px solid transparent; }
.admin-subnav a:hover { color: var(--color-text); text-decoration: none; }
.admin-subnav a.active { color: var(--color-link); border-bottom-color: var(--color-accent); }

.admin-main { max-width: 900px; margin: 0 auto; padding: var(--space-4) var(--space-3); }
.admin-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-2); }
.admin-page-header h1 { margin: 0; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table th {
  text-align: left;
  padding: var(--space-2);
  background: var(--color-surface);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}
.admin-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--color-surface); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.badge.published, .badge.in_stock { background: #e6f4ea; color: var(--color-success); }
.badge.draft, .badge.out_of_stock { background: #eee; color: var(--color-muted); }

/* Category dashboard — link cards into Part Types/Brands/Models/Products. */
.dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
}
.dashboard-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); text-decoration: none; }
.dashboard-card strong { font-size: 1rem; }
.dashboard-card span { color: var(--color-muted); font-size: 1.4rem; font-weight: 700; }

.product-form { display: grid; gap: var(--space-2); max-width: 640px; background: var(--color-bg); padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-border); }
.product-form label { margin-top: var(--space-2); font-size: 0.9rem; }
.product-form fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); margin-top: var(--space-2); }
.product-form legend { font-weight: 700; padding: 0 4px; }
.brand-group { margin-bottom: var(--space-2); }
.checkbox-label { display: block; font-weight: 400; margin: 4px 0; }

.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.image-tile { position: relative; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-1); }
.image-tile.is-default { border-color: var(--color-accent); }
.image-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; margin-bottom: var(--space-1); display: block; }
.default-badge { position: absolute; top: 8px; left: 8px; background: var(--color-accent); color: var(--color-on-accent); }
.image-tile-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.image-tile-actions form { display: inline-block; }
.existing-images, .delete-form { max-width: 640px; margin-top: var(--space-3); }
.delete-form { padding-top: var(--space-2); border-top: 1px solid var(--color-border); }

.login-form-wrap { max-width: 360px; margin: var(--space-6) auto; padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.login-form-wrap form { display: grid; gap: var(--space-2); }

.inline-form { display: inline-flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
.admin-hint { color: var(--color-muted); font-size: 0.9rem; max-width: 60ch; margin: 0 0 var(--space-3); }
.simple-list { list-style: none; padding: 0; }
.simple-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-1);
}
.simple-list li:hover { border-color: var(--color-muted); }
.brand-row-info { display: flex; align-items: center; gap: var(--space-2); }
.brand-row-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; }
.brand-row-logo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.6rem;
  text-align: center;
}

.admin-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.admin-thumb-empty { display: inline-block; width: 40px; height: 40px; border-radius: 4px; background: var(--color-surface); }

.year-range-inputs { display: flex; align-items: center; gap: var(--space-1); }
.year-range-inputs input { width: auto; flex: 1; }


/* ---- Typography -------------------------------------------------------
   Oswald is the only site typeface (SIL OFL, self-hosted in /fonts). Bold
   for headings, buttons, prices and tile labels; light for body copy and
   menus. (The logo image keeps its own Anton lettering.) */
h1, h2, h3, h4,
.site-nav > a, .nav-item > a,
.step-eyebrow, .diagnostic-label, .fork-label, .brand-tile-fallback,
.price, .cart-row-price, .cart-summary-row,
button, .button {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
h1, h2, h3, h4 { line-height: 1.15; }
.hero h1 { font-size: min(2.5rem, calc((100vw - 48px) / 15.8)); }
.site-nav > a, .nav-item > a {
  font-family: var(--font-nav);
  font-size: 1.05rem;
  font-weight: 450;
  letter-spacing: 0.08em;
}
button, .button { letter-spacing: 0.06em; }
.model-card h3 { font-size: 1.15rem; }
.admin-nav a, .admin-subnav a, .admin-subnav-label, .logout-form button,
.cart-remove, .qty-btn, .site-search button {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: normal;
}

/* ---- Small text -----------------------------------------------------------
   Oswald Light is too thin below ~15px, so small/meta text gets regular
   weight and a slightly larger size. Small labels use sentence case. */
.search-suggestion-meta, .fork-caption, .diagnostic-caption, .model-card-meta,
.secure-note, .cart-row-unit-price, .cart-summary-note, .admin-hint,
.fit-badge, .stock-badge, .badge, .cart-remove, .site-footer,
.breadcrumbs ol {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.eyebrow, .step-eyebrow {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
  font-weight: 400;
}
label, .product-form label { font-weight: 500; font-size: 1rem; }


/* ---- One-page picker on a category hub ---------------------------------
   Step 1 (part) -> step 2 (brand, greyed out until a part is picked) ->
   step 3 (model). See initFunnel() in app.js. */
.funnel-step { margin-top: var(--space-6); }
.funnel-step h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.funnel-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.1rem;
}
.funnel-hint { color: var(--color-muted); margin: 0 0 var(--space-3); }

/* Menu 1: the chosen part */
.funnel-part { position: relative; flex-direction: column; text-align: center; min-width: 160px; }
.funnel-part.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); background: var(--color-surface); }
.coming-soon {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 var(--space-1);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Menu 2 before a part is chosen: visibly there, visibly not usable */
.funnel-step.is-disabled h2,
.funnel-step.is-disabled .brand-grid { opacity: 0.4; }
.funnel-step.is-disabled .brand-grid { filter: grayscale(1); pointer-events: none; user-select: none; }
.brand-tile.ghost { background: var(--color-surface); border-style: dashed; }
.brand-tile.funnel-brand.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.brand-tile-unsure { border-style: dashed; color: var(--color-muted); }
.brand-tile-unsure:hover { color: var(--color-text); }

/* Picker layout: compact grids so menu 1 and the start of menu 2 fit on one
   phone screen (3 part tiles across, 2 brand/model tiles across). */
.funnel .diagnostic-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 720px; }
.funnel .funnel-part { min-width: 0; }
.funnel .brand-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); }
.funnel .model-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
@media (max-width: 600px) {
  .funnel .diagnostic-tiles { grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
  .funnel .diagnostic-tile { padding: var(--space-2) var(--space-1); gap: var(--space-1); }
  .funnel .diagnostic-label { font-size: 0.95rem; }
  .funnel-step { margin-top: var(--space-4); }
}

/* "(optional)" hint next to a form label */
.optional { color: var(--color-muted); font-weight: 400; }

/* Generation / production years under a model in "Confirmed compatible with" */
.compat-detail { display: block; color: var(--color-muted); font-size: 0.95rem; font-weight: 400; }
/* ...and inline next to the model name in the admin's compatibility checkboxes */
.checkbox-label .compat-detail { display: inline; margin-left: var(--space-1); }

/* Admin products list: the "Fits" column */
.fits-list { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.fits-list li + li { margin-top: 2px; }
.fits-none { color: var(--color-muted); font-size: 0.95rem; }

/* ---- Full catalog page -------------------------------------------------
   Toolbar (search + phone "Filters" button), left filter sidebar, product
   grid. Filtering is done by initCatalog() in app.js. */
.catalog h1 { margin: 0 0 var(--space-3); }
.catalog-toolbar { display: flex; gap: var(--space-2); max-width: 720px; }
.catalog-toolbar input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  font: inherit;
  background: #fff;
}
.catalog-filters-toggle { display: none; align-items: center; gap: var(--space-1); }
.catalog-filter-count {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: 999px;
  min-width: 22px;
  padding: 0 6px;
  font-size: 0.85rem;
  text-align: center;
}
.catalog-count { color: var(--color-muted); margin: var(--space-2) 0 var(--space-3); }
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-4); align-items: start; }
.catalog-layout.no-filters { grid-template-columns: 1fr; }
.catalog-filters { display: grid; gap: var(--space-3); }
.catalog-group { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2); margin: 0; background: var(--color-bg); }
.catalog-group legend { padding: 0 var(--space-1); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.catalog-check { display: flex; align-items: baseline; gap: var(--space-1); margin: 6px 0; font-weight: 400; cursor: pointer; }
.catalog-check.is-empty { color: var(--color-muted); }
.catalog-models { margin: 0 0 var(--space-1) var(--space-3); padding-left: var(--space-1); border-left: 2px solid var(--color-border); }
.catalog .product-grid { margin-top: 0; }
.catalog-item[hidden], .catalog-empty[hidden] { display: none; }
.link-button { background: none; border: none; padding: 0; color: var(--color-link); text-decoration: underline; cursor: pointer; font-family: var(--font-sans); font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: normal; }
.link-button:hover { background: none; border: none; }

/* "coming soon" tag in the nav dropdown and catalog filters */
.soon { color: var(--color-muted); font-size: 0.85rem; font-weight: 400; text-transform: none; letter-spacing: 0.01em; }
.dropdown .soon { margin-left: 4px; }

/* Skip link on the category hub */
.skip-link { margin-top: var(--space-2); }

@media (max-width: 780px) {
  .catalog-filters-toggle:not([hidden]) { display: inline-flex; }
  .catalog-layout { grid-template-columns: 1fr; gap: var(--space-2); }
  .catalog-filters { display: none; }
  .catalog-filters.is-open { display: grid; }
}
@media (max-width: 720px) {
  .dropdown .soon { color: rgba(243, 243, 244, 0.65); }
}