/* =========================================================================
   Marland Quicklube — public site stylesheet
   Palette: black, red accent, gray. Modern. Mobile-first.
   Design tokens are centralized in :root. Swap values here to retheme.
   ========================================================================= */

:root {
  /* Brand palette */
  --c-black: #0b0b0c;
  --c-black-2: #141416;
  --c-gray-900: #1c1d20;
  --c-gray-800: #26272b;
  --c-gray-700: #3a3b40;
  --c-gray-500: #7a7c82;
  --c-gray-300: #c8c9cd;
  --c-gray-100: #ececee;
  --c-white: #ffffff;
  --c-red: #d7262b;
  --c-red-600: #b91d22;
  --c-red-700: #9b1519;

  /* Semantic */
  --bg: var(--c-black);
  --bg-elev: var(--c-black-2);
  --surface: var(--c-gray-900);
  --surface-2: var(--c-gray-800);
  --border: var(--c-gray-700);
  --text: var(--c-gray-100);
  --text-muted: var(--c-gray-300);
  --text-dim: var(--c-gray-500);
  --accent: var(--c-red);
  /* Confirmation green — same hue as the "Open now" status dot. Used for a
     chosen time slot: red there reads as unavailable/error. */
  --slot-confirm: #3ddc68;
  /* Date-picker selection blue. Deliberately not brand red: red on a day
     you just picked reads as unavailable/error. */
  --cal-select: #6ea8ff;
  --cal-select-deep: #2f6fd0;
  --slot-confirm-deep: #1f9d4d;
  --accent-hover: var(--c-red-600);
  --accent-press: var(--c-red-700);

  /* Savings / money-positive accent — used SPARINGLY to trigger buy intent */
  --c-save: #22c55e;      /* green-500 */
  --c-save-600: #16a34a;  /* green-600 */
  --c-save-soft: rgba(34,197,94,0.14);
  --c-save-border: rgba(34,197,94,0.45);

  /* Featured ribbon (top edge of price cards) — warm yellow for attention. */
  --c-ribbon: #fbbf24;      /* amber-400 */
  --c-ribbon-600: #f59e0b;  /* amber-500 */

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

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-3: 0 20px 50px rgba(0,0,0,0.55);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --nav-h: 72px;
  --hero-overlay: 0.55;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }

/* ---- Layout utilities ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.section { padding: var(--s-8) 0; }
.section-tight { padding: var(--s-7) 0; }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--s-4); }
h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 22px; font-weight: 700; }
p  { margin: 0 0 var(--s-4); }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(11,11,12, 0.82);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto; padding: 0 var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand img { height: 40px; width: auto; max-width: 260px; }
.brand-text {
  font-weight: 800; letter-spacing: 0.02em;
  color: var(--c-white);
}
.brand-text .accent { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: var(--s-5); }
.nav-links a {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
}
.nav-links a:hover { color: var(--c-white); background: var(--surface-2); }
.nav-links a.active { color: var(--c-white); }
.nav-cta {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: var(--accent); color: var(--c-white);
  border-radius: var(--r-pill); font-weight: 700;
  transition: background 120ms ease;
}
.nav-cta:hover { background: var(--accent-hover); color: var(--c-white); }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: var(--r-sm);
}
@media (max-width: 800px) {
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: var(--s-3); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--s-3); }
  .nav-toggle { display: inline-flex; }
}

/* ---- Hero ---- */
.hero {
  position: relative; isolation: isolate;
  min-height: 78vh;
  max-height: 1000px;
  display: flex; align-items: center;
  color: var(--c-white);
  overflow: hidden;
}
@media (max-width: 640px) {
  /* Let the hero size to its content so the photo shows behind everything
     without forcing 82vh of scrolling before the next section. */
  .hero { min-height: auto; }
  .hero-content { padding: var(--s-6) var(--s-4) var(--s-5); }
  .hero .hero-ctas { margin-top: var(--s-3); gap: var(--s-2); }
  .hero .hero-ctas .btn { padding: 10px 16px; font-size: 14px; }
  .hero p.lede { font-size: 15px; }
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  /* Fallback gradient if the image is missing */
  background:
    radial-gradient(ellipse at 20% 20%, #2a0606 0%, transparent 55%),
    linear-gradient(135deg, #111 0%, #1c1d20 40%, #0b0b0c 100%);
  background-size: cover;
  background-position: center;
}
.hero.has-image::before {
  background-image:
    linear-gradient(rgba(0,0,0,var(--hero-overlay)), rgba(0,0,0,var(--hero-overlay))),
    url("../img/hero.jpg?v=20260805-trucks");
  background-size: cover;
  /* Bias upward: the shop sign + both trucks live in the top 2/3 of the
     frame; dead asphalt fills the bottom. */
  background-position: 50% 42%;
}
.hero::after {
  /* subtle vignette */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
/* NOTE: this is a padding SHORTHAND, so it also overrides the horizontal
   padding inherited from .container. Keep the side padding explicit or the
   headline runs into the screen edge on phones. */
.hero-content { padding: var(--s-8) var(--s-5); max-width: 820px; }
.hero h1 span.accent { color: var(--c-ribbon); }   /* headline highlight — uses same yellow as the ribbon */
.hero p.lede {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--c-gray-100);
  max-width: 640px;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 15px;
  border: 1px solid transparent;
  transition: transform 80ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
  cursor: pointer;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--c-white); }
.btn-primary:hover { background: var(--accent-hover); color: var(--c-white); }

/* Yellow conversion button — used on price cards & savings moments. */
.btn-yellow {
  background: var(--c-ribbon);
  color: #1a1a1a;
  border-color: var(--c-ribbon-600);
  font-weight: 800;
}
.btn-yellow:hover {
  background: var(--c-ribbon-600);
  color: #0b0b0c;
}
.btn-ghost { background: transparent; color: var(--c-white); border-color: var(--c-white); }
.btn-ghost:hover { background: var(--c-white); color: var(--c-black); }
.btn-dark { background: var(--surface); color: var(--c-white); border-color: var(--border); }
.btn-dark:hover { background: var(--surface-2); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 14px; }

/* ---- Pricing callout (online discount) ---- */
.pricing-callout {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}
/* Mobile: keep side-by-side (still 2 cols) but much more compact so the hero
   photo stays visible. Cards shrink, typography scales down. */
@media (max-width: 640px) {
  .pricing-callout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-4);
  }
}
.price-card {
  background: rgba(20,20,22,0.82);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  backdrop-filter: blur(4px);
  position: relative; overflow: hidden;
}
@media (max-width: 640px) {
  .price-card { padding: var(--s-3); }
  .price-card h3 { font-size: 15px; margin-bottom: 2px; }
  .price-card .price { font-size: 22px; }
  .price-card .price small { font-size: 11px; margin-left: 3px; }
  .price-card .walkin { font-size: 11px; margin-top: 2px; }
  .price-card .tag { font-size: 9px; padding: 2px 6px; top: 8px; right: 8px; }
  .price-card .note { display: none; }           /* hide long description on phones */
  .price-card .save-badge { font-size: 10px; padding: 3px 8px; margin-top: 4px; }
  .price-card .btn { padding: 8px 10px; font-size: 12px; margin-top: var(--s-2) !important; }
}
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-2); }
/* Static 1px yellow top accent on featured price cards — quiet, confident,
   doesn't compete with the yellow CTA below. */
.price-card.featured::after {
  content: "";
  position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--c-ribbon);
  opacity: 0.7;
}
.price-card .tag {
  position: absolute; top: var(--s-3); right: var(--s-3);
  background: var(--accent); color: var(--c-white);
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.price-card h3 { margin: 0 0 6px; color: var(--c-white); }
.price-card .price {
  font-size: 34px; font-weight: 800; color: var(--c-white); letter-spacing: -0.01em;
}
.price-card .price small {
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  margin-left: 6px;
}
.price-card .walkin {
  display: inline-block; margin-top: 6px;
  color: var(--text-dim); text-decoration: line-through;
  font-size: 14px;
}

/* Savings badge — money-green, used on price cards and service grid.
   Static (no pulsing) so it reads as a confident label, not a notification. */
.save-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--c-save-soft);
  border: 1px solid var(--c-save-border);
  color: #a7f3c2;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.save-badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-save);
}

/* Nav CTA gets a tiny green dot for pattern-interrupt. */
.nav-cta { position: relative; }
.nav-cta .save-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-save);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
  margin-left: 2px;
}

/* Urgency strip under the hero — low-friction, one line, easy to ignore if disliked. */
.urgency-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02));
  border-top: 1px solid var(--c-save-border);
  border-bottom: 1px solid var(--c-save-border);
  color: #c7f5d7;
  font-size: 14px; font-weight: 600;
  flex-wrap: wrap; text-align: center;
}
.urgency-strip strong { color: #a7f3c2; }
.urgency-strip a { color: #a7f3c2; text-decoration: underline; text-underline-offset: 3px; }
.urgency-strip a:hover { color: #fff; }
.price-card .note { font-size: 13px; color: var(--text-muted); margin-top: var(--s-2); }

/* ---- Feature cards ---- */
.features { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.feature .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(215,38,43,0.12); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3); font-weight: 800;
}
.feature h3 { color: var(--c-white); margin-bottom: 6px; }

/* ---- Forms ---- */
.form { display: grid; gap: var(--s-4); }
.form .row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(215,38,43,0.18);
}
.field .hint { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.field .error { color: #ff8b8b; font-size: 13px; margin-top: 6px; }

/* ---- Scheduler ---- */
.scheduler {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-2);
}
.service-picker { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .service-picker { grid-template-columns: 1fr; } }
.service-option {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.service-option.selected {
  border-color: var(--accent);
  background: rgba(215,38,43,0.08);
}
.service-option input { position: absolute; opacity: 0; pointer-events: none; }
.service-option .name { font-weight: 700; color: var(--c-white); }
.service-option .pr { font-size: 22px; font-weight: 800; color: var(--c-white); margin-top: 6px; }
.service-option .pr small { color: var(--text-muted); font-weight: 600; font-size: 13px; margin-left: 6px; }

/* Time slots — grouped by AM/PM, color-coded, easy to scan */
.slot-group { margin-bottom: var(--s-5); }
.slot-group:last-child { margin-bottom: 0; }
.slot-group-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--s-3);
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  min-width: 0; overflow: hidden;
}
/* Morning — soft lavender / light purple */
.slot-group-am .slot-group-head {
  background: linear-gradient(90deg, rgba(183,148,244,0.16), rgba(183,148,244,0.03));
  border-color: rgba(183,148,244,0.4);
}
/* Afternoon — bright sunny yellow/gold */
.slot-group-pm .slot-group-head {
  background: linear-gradient(90deg, rgba(255,210,90,0.14), rgba(255,210,90,0.03));
  border-color: rgba(255,210,90,0.4);
}
/* Evening — cool blue moon */
.slot-group-evening .slot-group-head {
  background: linear-gradient(90deg, rgba(110,150,220,0.14), rgba(110,150,220,0.03));
  border-color: rgba(110,150,220,0.35);
}
.slot-group-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 15px;
  flex: 0 0 auto;
}
.slot-group-icon-am      { background: rgba(183,148,244,0.22); color: #d4bbff; }
.slot-group-icon-pm      { background: rgba(255,210,90,0.20);  color: #ffe066; }
.slot-group-icon-evening { background: rgba(110,150,220,0.22); color: #a9c6ff; }
.slot-group-label {
  font-weight: 800; color: var(--c-white);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-group-count {
  margin-left: auto;
  color: var(--text-dim); font-size: 12px;
  white-space: nowrap; flex: 0 0 auto;
}

.time-slots {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
/* #time-slots holds .slot-group SECTIONS, not raw buttons -- the button
   grid is the nested .time-slots inside each group. Without this the
   groups were laid out as narrow grid columns, which squeezed the
   headers until "10 open" wrapped and spilled past the border. */
#time-slots { display: block; }

.slot {
  position: relative;
  padding: 14px 12px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: transform 80ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  line-height: 1;
}
.slot:hover   { border-color: var(--slot-confirm); color: var(--c-white); transform: translateY(-1px); }
.slot:active  { transform: translateY(0); }
.slot.disabled { opacity: 0.35; pointer-events: none; text-decoration: line-through; }

.slot .slot-time {
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--c-white);
  display: inline-flex; align-items: baseline;
}
.slot .slot-colon { margin: 0 1px; opacity: 0.6; }
.slot .slot-m { font-weight: 700; }

.slot .slot-period {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
/* Morning pill — light purple */
.slot-period-am {
  color: #e0ceff;
  background: rgba(183,148,244,0.18);
  border: 1px solid rgba(183,148,244,0.45);
}
/* Afternoon pill — sunny gold */
.slot-period-pm {
  color: #ffeaa0;
  background: rgba(255,210,90,0.16);
  border: 1px solid rgba(255,210,90,0.4);
}
/* Evening pill — cool moonlit blue */
.slot-period-evening {
  color: #c8dbff;
  background: rgba(110,150,220,0.16);
  border: 1px solid rgba(110,150,220,0.4);
}

/* Subtle tint on the whole card so each period is obvious even at a glance */
.slot-am      { border-color: rgba(183,148,244,0.3); }
.slot-pm      { border-color: rgba(255,210,90,0.28); }
.slot-evening { border-color: rgba(110,150,220,0.25); }
.slot-am:hover,
.slot-pm:hover,
.slot-evening:hover { border-color: var(--slot-confirm); }

/* Selected state wins — confirmation green, regardless of AM/PM tint.
   Deliberately NOT the brand red: red on a chosen slot reads as
   "unavailable" and made customers think the click failed. */
.slot.selected,
.slot.selected:hover {
  background: var(--slot-confirm-deep);
  border-color: var(--slot-confirm);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(61,220,104,0.30);
}
.slot.selected .slot-time,
.slot.selected .slot-colon { color: var(--c-white); opacity: 1; }
.slot.selected .slot-period {
  color: var(--c-white);
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}

.step-indicator { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.step .dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 700; }
.step.active { color: var(--c-white); }
.step.active .dot { background: var(--accent); border-color: var(--accent); color: var(--c-white); }
.step.done .dot { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--c-white); }

/* ---- Shop / products ---- */
.products {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Mobile: tight 3-column grid so it reads like a real product page. */
@media (max-width: 640px) {
  .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}
@media (max-width: 380px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 150ms ease, border-color 150ms ease;
}
.product-card:hover { transform: translateY(-2px); border-color: var(--accent); }

/* Uniform thumb: same aspect + white-ish bg so all product photos look consistent.
   object-fit: contain preserves each product's shape (bottles, filters, mats). */
.product-card .thumb {
  aspect-ratio: 1/1;
  background: #f4f4f5;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 12px;
  padding: 10px;
  overflow: hidden;
}
.product-card .thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-card .body { padding: var(--s-3); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card .name { font-weight: 700; color: var(--c-white); font-size: 14px; line-height: 1.3; }
.product-card .cat { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.product-card .desc { color: var(--text-muted); font-size: 13px; flex: 1; }
.product-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: var(--s-2); }
.product-card .price { color: var(--c-white); font-weight: 800; font-size: 16px; }

/* Phone-specific tuning: hide verbose description, smaller button, clamp names to 2 lines. */
@media (max-width: 640px) {
  .product-card .body { padding: 8px; gap: 2px; }
  .product-card .cat  { font-size: 9px; }
  .product-card .name {
    font-size: 12px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card .desc { display: none; }
  .product-card .price { font-size: 14px; }
  .product-card .foot  { flex-direction: column; align-items: stretch; gap: 4px; }
  .product-card .foot .btn {
    padding: 6px 8px; font-size: 11px; border-radius: var(--r-sm);
  }
}

/* ---- Cart drawer (simple) ---- */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%);
  background: var(--bg-elev); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform 200ms ease;
  z-index: 100; display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer header { padding: var(--s-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.cart-drawer .items { flex: 1; overflow: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2); }
.cart-line img, .cart-line .ph { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); }
.cart-line .meta .n { font-weight: 700; color: var(--c-white); font-size: 14px; }
.cart-line .meta .p { color: var(--text-muted); font-size: 13px; }
.qty { display: inline-flex; align-items: center; gap: 6px; }
.qty button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.cart-drawer footer { padding: var(--s-4); border-top: 1px solid var(--border); display: grid; gap: var(--s-3); }
.cart-empty { color: var(--text-dim); text-align: center; padding: var(--s-6); }

/* ---- Alerts / banners ---- */
.alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.alert-success { border-color: #2f7d3a; background: rgba(47,125,58,0.12); color: #c6f0cc; }
.alert-error   { border-color: #a2363b; background: rgba(162,54,59,0.14); color: #ffcdcd; }
.alert-info    { border-color: #2a5c8a; background: rgba(42,92,138,0.12); color: #cfe4f7; }

/* ---- Footer ---- */
.footer {
  background: var(--c-black);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  padding: var(--s-7) 0 var(--s-6);
}
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-6); }
@media (max-width: 800px) { .footer .cols { grid-template-columns: 1fr; } }
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--c-white); }
.footer h4 { color: var(--c-white); margin-bottom: var(--s-3); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
.footer .copy { margin-top: var(--s-5); border-top: 1px solid var(--border); padding-top: var(--s-4); font-size: 13px; color: var(--text-dim); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }

/* ---- Flatpickr dark-theme overrides ---- */
.flatpickr-calendar { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-3); color: var(--text); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-weekdays, span.flatpickr-weekday { color: var(--c-white); background: var(--surface); }
.flatpickr-day { color: var(--text); }
.flatpickr-day.today { border-color: var(--cal-select) !important; color: var(--cal-select); font-weight: 700; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--cal-select-deep) !important; border-color: var(--cal-select) !important;
  color: var(--c-white) !important; font-weight: 700;
}
/* The flatpickr sheet loads AFTER styles.css, so the calendar renders in the
   library's LIGHT theme. Hovered days must therefore be dark-on-light --
   white text here made the number vanish into the pale blue fill. */
.flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
  background: rgba(110,168,255,0.22) !important;
  border-color: rgba(110,168,255,0.55) !important;
  color: #10233f !important;
  font-weight: 700;
}
/* today is outlined, not filled -- keep its number the accent blue on hover */
.flatpickr-day.today:hover:not(.selected) { color: var(--cal-select-deep) !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-dim); }

/* ---- Utility ---- */
.hidden { display: none !important; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-5 { margin-top: var(--s-5); }
.mb-5 { margin-bottom: var(--s-5); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-5 > * + * { margin-top: var(--s-5); }


/* ---- Coupon-driven public offers (2026-08-04) ---- */
.coupon-callout { margin-top: 0; max-width: 560px; }

/* Hero card row: coupon + speedometer, equal width, top-aligned so neither
   sits higher than the other. Stacks on narrow screens. */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  margin-top: var(--s-6);
}
.hero-cards > * { min-width: 0; }

/* Live open/closed chip in the top bar. Shares .mql-dot/.mql-status-text with
   the hero badge, so both are written by the same updateStatus() pass. */
@keyframes mqlPulse {
  0%   { opacity: 1;   box-shadow: 0 0 8px #3ddc68; }
  50%  { opacity: .35; box-shadow: 0 0 2px #3ddc68; }
  100% { opacity: 1;   box-shadow: 0 0 8px #3ddc68; }
}
/* Live open/closed chip. Rendered by assets/js/store-status.js, which drives
   EVERY .mql-dot/.mql-status-text on the page from one computation. */
/* ---- Live status badge: ONE component, identical everywhere ----
   .mql-badge owns every visual property (chrome, dot, text). Placement is
   the ONLY thing the context classes below are allowed to set, so the badge
   can never drift between the top bar, the coupon, desktop and mobile.
   Rendered by assets/js/store-status.js. */
.mql-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-white);
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
  flex: 0 0 auto;          /* never stretch to fill its row */
  width: auto;
}
.mql-badge .mql-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #666;        /* JS swaps this for green/amber */
  display: inline-block;
  flex: 0 0 auto;
}
/* .location-status: placement only -- appearance comes from .mql-badge */
/* On phones the badge gets its own full-width row instead of being hidden --
   "are they open right now?" matters more on a phone, not less. */
@media (max-width: 720px) {
  /* PLACEMENT ONLY -- the pill keeps its natural size and chrome.
     The badge must NOT claim the row itself: flex-basis:100% would beat
     width:max-content and stretch the pill. Instead a zero-height spacer
     (.location-card::after, ordered between them) forces the line break, so
     the badge stays flex:0 0 auto and simply centres on its own row. */
  /* Row order: address / badge / [call + directions].
     .location-status is a PLACEMENT WRAPPER only -- it claims the full row
     and centres its child. The pill (.mql-badge) inside keeps its natural
     size, so it looks identical to the coupon badge. */
  .location-copy       { order: 1; }
  .location-status {
    order: 2;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin: 0;
  }
  .location-phone      { order: 3; }
  .location-directions { order: 4; }
}
.hero-card-gauge {
  width: 100%;
  position: relative;
}
/* Soft radial scrim: darkens the photo directly behind the gauge so the
   dial stays legible WITHOUT turning it into a card. No edges, no border. */
.hero-card-gauge::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 42%,
              rgba(0,0,0,0.72) 0%,
              rgba(0,0,0,0.55) 42%,
              rgba(0,0,0,0.22) 68%,
              transparent 85%);
  pointer-events: none;
}
.hero-card-gauge > * { position: relative; z-index: 1; }
.hero-card-gauge > #mql-time { max-width: none; }
/* The gauge is intentionally NOT a card: the coupon is the only carded
   element in the hero so it reads unmistakably as a coupon. */
.hero-cards { align-items: start; }
/* The coupon card's border+padding start above its text; pull the
   un-carded gauge down slightly so the two columns read as level. */
.hero-card-gauge { padding-top: 0; margin-top: -26px; }
@media (max-width: 900px) { .hero-card-gauge { padding-top: 0; } }
@media (max-width: 900px) {
  .hero-cards { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
/* In the hero the coupon sits beside the gauge card; trim its interior so
   the two columns finish at a similar height instead of one dangling. */
/* In the hero the coupon sits over the truck photo: make it translucent so
   the second Ford reads through instead of being boxed out. Blur keeps the
   coupon text crisp. Scoped to .hero -- the schedule page coupon stays solid. */
.hero .coupon-card {
  padding: var(--s-5);
  background:
    linear-gradient(145deg, rgba(20,20,22,0.50), rgba(34,22,23,0.60));
  backdrop-filter: blur(1.5px) saturate(112%);
  -webkit-backdrop-filter: blur(1.5px) saturate(112%);
  box-shadow: 0 16px 44px rgba(0,0,0,.42);
}
/* the decorative red blob reads heavy at lower opacity -- soften it */
.hero .coupon-card::after { background: rgba(215,38,43,.14); }
.hero .coupon-card .coupon-value { margin: 2px 0 4px; }
.hero .coupon-card h3 { margin-bottom: 6px; }
.hero .coupon-card > p { margin-bottom: 10px; }
.coupon-card {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(20,20,22,.96), rgba(34,22,23,.96));
  border: 2px dashed var(--c-ribbon);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-2);
  color: var(--c-white);
}
.coupon-card::after {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  right: -65px; bottom: -80px; background: rgba(215,38,43,.20);
  z-index: 0; pointer-events: none;
}
/* Keep every real element above the decorative circle. Without this the
   circle painted over the bottom of the "Book your appointment" button,
   which read as a dark overlay on half the CTA (worst on phones, where the
   card is shorter so the circle reaches further up). */
.coupon-card > * { position: relative; z-index: 1; }
.coupon-card .tag {
  display: inline-flex; background: var(--accent); color: #fff; border-radius: var(--r-pill);
  padding: 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
/* Coupon header: brand name left, live open/closed badge right. The badge
   carries .mql-dot/.mql-status-text so it is written by the same
   updateStatus() pass as the top-bar badge -- they cannot disagree. */
.coupon-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 2px;
}
.coupon-head .coupon-kicker { margin-top: 0; }
/* Placement-only wrappers. ALL appearance lives on .mql-badge, so every
   badge on the site is visually identical no matter where it sits. */
.coupon-status,
.location-status {
  display: inline-flex;
  background: none; border: 0; padding: 0; margin: 0;
  flex: 0 0 auto;
}
.location-status { margin-left: auto; }
.coupon-kicker { margin-top: var(--s-4); color: var(--text-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.coupon-value { display: flex; align-items: baseline; gap: 10px; font-size: 34px; font-weight: 900; line-height: 1; margin: 10px 0 6px; }
.coupon-value span { color: var(--c-ribbon); font-size: clamp(54px, 9vw, 78px); letter-spacing: -.05em; }
.coupon-card h3 { color: #fff; margin: 0 0 8px; }
.coupon-card p { color: var(--text-muted); margin: 8px 0; max-width: 460px; }
.coupon-code {
  display: inline-block; margin: 10px 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-md); background: rgba(255,255,255,.06); font-weight: 800; letter-spacing: .08em;
}
.coupon-card .coupon-terms { color: var(--text-dim); font-size: 11px; margin-bottom: var(--s-4); }
.coupon-card-compact { padding: var(--s-5); }
.coupon-card-compact .coupon-value span { font-size: 58px; }
.coupon-card-inline { max-width: 680px; }
.service-link { display: inline-block; margin-top: 10px; font-weight: 700; }
.service-coupon-note, .availability-label { display: inline-block; margin-top: 10px; color: #a7f3c2; font-size: 12px; font-weight: 700; }
.product-card .availability-label { margin: 0; max-width: 150px; }
@media (max-width: 640px) {
  .coupon-callout { margin-top: var(--s-4); }
  .coupon-card { padding: var(--s-4); }
  .coupon-value { font-size: 28px; }
  .coupon-value span, .coupon-card-compact .coupon-value span { font-size: 52px; }
}


/* ---- Modern location card (2026-08-04) ---- */
.location-shell {
  background: var(--bg);
  padding: 12px var(--s-5) 0;
}
.location-card {
  max-width: var(--container);
  min-height: 66px;
  margin: 0 auto;
  padding: 11px 14px 11px 12px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--c-white);
  background:
    linear-gradient(120deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    var(--surface);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.location-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: #ff6267;
  background: rgba(215,38,43,.13);
  border: 1px solid rgba(255,98,103,.24);
  border-radius: 13px;
}
.location-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.location-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.location-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.location-copy strong {
  color: #fff;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.3;
}
.location-directions {
  margin-left: auto;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #fff;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.location-directions:hover {
  color: #fff;
  background: rgba(215,38,43,.2);
  border-color: rgba(255,98,103,.4);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .location-shell { padding: 8px var(--s-3) 0; }
  .location-card { min-height: 60px; padding: 9px; gap: 9px; border-radius: 14px; }
  .location-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
  .location-copy strong { font-size: 13px; }
  .location-label { font-size: 9px; }
  .location-directions { padding: 8px 10px; font-size: 11px; }
}
@media (max-width: 390px) {
  /* keep the label: as a half-width chip there is room, and an unlabelled
     arrow is a worse tap target to understand */
  .location-directions span { font-size: 13px; }
}


/* ---- Location-card phone number (2026-08-04) ---- */
.location-phone {
  margin-left: auto;
  padding: 2px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.13);
  text-decoration: none;
  white-space: nowrap;
}
.location-phone-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.location-phone strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  transition: color 120ms ease;
}
.location-phone:hover { color: #fff; }
.location-phone:hover strong { color: #ff7b7f; }
.location-phone + .location-directions { margin-left: 0; }
@media (max-width: 720px) {
  .location-card { flex-wrap: wrap; row-gap: 10px; }
  .location-copy { flex: 1 1 calc(100% - 58px); }
  /* Row 2: Call and Directions as two balanced chips sharing the width.
     Previously the phone was indented 51px and floated mid-row while
     Directions was pushed to the far edge, which read as broken. */
  .location-phone,
  .location-directions {
    flex: 1 1 0;
    margin-left: 0 !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 12px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    min-height: 42px;
  }
  .location-phone { flex-direction: row; gap: 7px; }
  .location-phone strong { font-size: 14px; }
  .location-directions { font-size: 12.5px; }
  /* "VISIT MARLAND QUICKLUBE" / "CALL THE SHOP" are redundant on a phone:
     the pin icon already means location and a phone number already means
     call. Dropping them turns a cramped 5-item bar into address + number
     + directions. */
  .location-label, .location-phone-label { display: none; }
  .location-copy strong { font-size: 13.5px; line-height: 1.35; }
  .location-phone { padding-top: 0; }
  .location-phone {
    order: 3;
    margin-left: 51px;
    padding: 3px 0 0;
    border-left: 0;
  }
  .location-directions {
    order: 4;
    margin-left: auto !important;
  }
}
@media (max-width: 390px) {
  .location-phone strong { font-size: 13.5px; }
  .location-directions { font-size: 12px; }
}