/* ============================================================
   ADAMP MOTORS — design tokens
   Ink graphite + workshop amber, condensed industrial display type,
   "number plate" signature motif for brand + data.
   ============================================================ */
:root {
  --ink: #14171F;
  --ink-soft: #262B36;
  --paper: #F6F4EF;
  --paper-card: #FFFFFF;
  --amber: #FF6A1A;
  --amber-dark: #E2570D;
  --steel: #4A5568;
  --steel-soft: #8A93A3;
  --line: #E6E2D8;
  --line-dark: #333949;
  --green: #1E8E5A;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(20, 23, 31, 0.08);
  --shadow-lg: 0 20px 60px rgba(20, 23, 31, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: hidden; max-width: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: none;
}

.hidden { display: none !important; }

/* ===== "NUMBER PLATE" BRAND MARK — signature element ===== */
.brand-plate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  border: 2px solid var(--amber);
  border-radius: 6px;
  padding: 7px 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.brand-plate-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}

.brand-plate-text {
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #fff;
}

.brand-plate-text b { color: var(--amber); font-weight: 600; }

.brand-plate-modal { margin-bottom: 18px; }
.brand-plate-sidebar { margin: 18px 16px 8px; }

/* ===== TOPBAR ===== */
.topbar {
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  position: sticky;
  top: 0;
  /* Must be higher than .topbar-more-backdrop's z-index (199). .topbar's
     position:sticky+z-index makes it its own CSS "stacking context" — every
     element inside it (including the ☰ dropdown menu, at its own z-index:200)
     is confined to render at THIS z-index (100) when compared against anything
     outside .topbar, regardless of the child's own higher number. The backdrop
     is appended straight to <body> (outside .topbar) at z-index:199, so with
     .topbar at only 100 it was rendering ON TOP of the whole topbar — silently
     blocking every click on the Login/Install/language buttons inside the open
     dropdown, even though the menu was visibly showing on screen. Raising this
     above 199 fixes it for good. */
  z-index: 250;
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-more { display: flex; align-items: center; gap: 20px; }

.topbar-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-spacer { display: none; }

.topbar-search-trigger {
  flex: 1;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--steel-soft);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.topbar-search-trigger:hover {
  border-color: var(--amber);
  color: #fff;
}

.cart-icon-btn {
  margin-left: auto;
  position: relative;
  background: transparent;
  border: none;
  color: var(--amber);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 6px;
}

.cart-count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--amber);
  color: var(--ink);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-topbar .cart-icon-btn {
  margin-left: 0;
  color: var(--amber-dark, var(--amber));
}

.cart-item-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.cart-item-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.cart-item-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cart-item-card-info {
  flex: 1;
  min-width: 0;
}

.cart-item-card-info .cart-item-name {
  font-size: 13.5px;
  font-weight: 600;
}

.cart-item-included {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.cart-item-remove {
  background: none;
  border: none;
  color: #E24B4A;
  cursor: pointer;
  font-size: 15px;
  align-self: flex-start;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.staff-login-btn {
  background: transparent;
  border: 1.5px solid var(--amber);
  color: var(--amber);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.staff-login-btn:hover {
  background: var(--amber);
  color: var(--ink);
}

/* ===== HERO ===== */
.hero {
  padding: 64px 24px 80px;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-title-short, .hero-sub-short { display: none; }

.eyebrow {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--amber-dark);
  background: rgba(255,106,26,0.1);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero-copy h1 {
  font-size: 46px;
  line-height: 1.12;
  margin-bottom: 20px;
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--amber);
}

.hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 440px;
  margin-bottom: 32px;
}

.hero-stats {
  display: flex;
  gap: 36px;
}

.hero-stat { display: flex; flex-direction: column; }

.hero-stat-num {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.hero-stat-label {
  font-size: 12px;
  color: var(--steel-soft);
  margin-top: 2px;
}

/* ===== SEARCH CARD ===== */
.search-card {
  background: var(--paper-card);
  border-radius: var(--radius);
  padding: 30px 30px 26px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  position: relative;
}

.search-card-tab {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--ink);
  color: var(--amber);
  font-family: 'Roboto Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 6px;
}

/* Inside a modal's fixed header (which clips overflow), the tab can't hang above the
   edge like it does on the public search card — show it in-flow instead */
.modal-header-sticky .search-card-tab {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  margin-bottom: 8px;
}

.search-card h3 {
  font-size: 21px;
  margin-bottom: 20px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

.field span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--steel);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.field select,
.field input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
}

/* Pre-filled fields (e.g. carried over from an earlier search) get a light gray
   background so they're visually distinct from fields still needing input */
.field input.field-prefilled {
  background: #F2F1EC;
}

.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--amber);
}

.location-row-inline {
  display: flex;
  gap: 8px;
}

.location-row-inline input {
  flex: 1;
  background: #FAFAF8;
  color: var(--steel);
}

.locate-btn {
  width: 42px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--amber);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.find-rate-btn {
  width: 100%;
  background: var(--amber);
  color: var(--ink);
  border: none;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.find-rate-btn:hover { background: var(--amber-dark); transform: translateY(-1px); }

.field-msg {
  font-size: 12.5px;
  color: #C0392B;
  margin-top: 10px;
  min-height: 14px;
}

/* ===== RESULTS ===== */
.results-section { padding: 0 24px 80px; }

.results-inner { max-width: 900px; margin: 0 auto; }

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  position: sticky;
  top: 70px;
  z-index: 50;
  background: var(--paper);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.results-header-eyebrow {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--amber-dark);
  margin-bottom: 6px;
}

.results-header h2 { font-size: 26px; }

.edit-search-btn {
  background: none;
  border: 1.5px solid var(--line);
  color: var(--steel);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.edit-search-btn:hover { border-color: var(--ink); color: var(--ink); }

.results-list { display: flex; flex-direction: column; gap: 10px; }

.result-cat {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.result-cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

.result-cat-header:hover { background: #FAFAF8; }

.result-cat-arrow { color: var(--amber); font-size: 12px; width: 12px; }

.result-cat-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--steel-soft);
  font-weight: 400;
}

.result-cat-body { padding: 4px 20px 16px; }

.result-job-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.result-job-row:first-child { border-top: none; }

.result-job-name { font-size: 14px; color: var(--ink); }

.result-job-price {
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  color: var(--green);
  white-space: nowrap;
}

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,23,31,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: modalFadeIn 0.18s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-box {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 40px);
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalPopIn 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.modal-header-sticky {
  flex: 0 0 auto;
  position: relative;
  padding: 26px 30px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-body-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 30px;
}

.modal-footer-sticky {
  flex: 0 0 auto;
  padding: 14px 30px 24px;
  border-top: 1px solid var(--line);
  background: #fff;
}

/* Popups with very little content (login/confirmed) don't need the divider lines */
.modal-header-sticky:has(+ .modal-body-scroll:empty),
.modal-box.no-scroll-divider .modal-header-sticky,
.modal-box.no-scroll-divider .modal-footer-sticky {
  border-color: transparent;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--steel-soft);
  cursor: pointer;
  line-height: 1;
}

.login-sub {
  font-size: 13px;
  color: var(--steel);
  margin: 4px 0 0;
}

.login-modal input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.login-modal input:focus { outline: none; border-color: var(--amber); }

.login-modal button#loginSubmitBtn {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}

.login-modal button#loginSubmitBtn:hover { background: var(--ink-soft); }

/* ===== BOOKING CONFIRMED POPUP ===== */
.confirmed-box { max-width: 340px; text-align: center; }

.confirmed-tick {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.confirmed-box h3 { margin: 0 0 14px; }

.confirmed-details {
  text-align: left;
  background: #FAFAF8;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--steel);
  line-height: 1.7;
}

.confirmed-box button {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
}

/* ===== OWNER/STAFF DASHBOARD SHELL ===== */
.dashboard-screen { display: flex; height: 100vh; height: 100dvh; }

.sidebar {
  width: 240px;
  background: var(--ink);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s ease;
}

/* Desktop collapse: sidebarToggle adds/removes this — icon-only rail */
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-group-arrow,
.sidebar.collapsed .nav-group-children,
.sidebar.collapsed .sidebar-footer .nav-label,
.sidebar.collapsed .brand-plate-text { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .brand-plate-sidebar { justify-content: center; padding: 18px 0 8px; }

/* min-height:0 is required on a flex:1 child that scrolls its own overflow —
   without it, some mobile browsers let this item's content push the sidebar's
   total height past 100vh instead of scrolling internally, which shows up as
   extra blank space pushed in after the last item / before the footer. */
.nav-menu { flex: 1; min-height: 0; padding: 10px 0; overflow-y: auto; }
.brand-plate-sidebar { flex-shrink: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: #cbd2dc;
  text-decoration: none;
  font-size: 14px;
}

.nav-icon { flex-shrink: 0; }

.nav-item:hover { background: rgba(255,255,255,0.06); }
.nav-item.active { background: var(--amber); color: var(--ink); font-weight: 600; }

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.nav-group-label { display: flex; align-items: center; gap: 10px; min-width: 0; }

.nav-group-arrow { color: var(--amber); font-size: 11px; }

.nav-group-children { padding-left: 12px; }

.nav-subitem { font-size: 13px; padding: 10px 20px; }

.sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--line-dark); padding: 8px 0; }
.nav-item.logout { color: #F28B82; }

.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); }

.dash-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.dash-topbar h2 { flex: 1; font-size: 17px; }
.dash-user-email { font-size: 12.5px; color: var(--steel-soft); }

.icon-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; }
#sidebarToggle { color: var(--amber-dark); }
#sidebarToggle:hover { background: var(--amber-tint, rgba(255,106,26,0.1)); }

.dash-page-content { flex: 1; padding: 24px; overflow-y: auto; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 34px; }
  .eyebrow, .hero-stats, .hero-title-full, .hero-sub-full { display: none; }
  .hero-title-short, .hero-sub-short { display: block; }
  .hero-title-short { font-size: clamp(18px, 5.5vw, 22px); margin-bottom: 4px; }
  .hero-sub-short { margin-bottom: clamp(6px, 2vw, 10px); font-size: clamp(12px, 3.2vw, 14px); }
  .hero { padding-top: clamp(10px, 3vh, 18px); padding-bottom: clamp(14px, 4vh, 30px); }
  .topbar-search-trigger { display: none; }
  .topbar-menu-btn { display: flex; order: 1; }
  /* the public topbar's name sits in the middle; scoped to .topbar so the dashboard's
     side menu (which also has a .brand-plate) keeps its small name at the top */
  .topbar .brand-plate {
    order: 2;
    flex: 1;
    justify-content: center;
    padding: 8px 14px;
  }
  .topbar .brand-plate-dot {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 4px rgba(255,106,26,0.2), 0 0 12px rgba(255,106,26,0.65);
  }
  .topbar .brand-plate-text { font-size: 15px; }
  .cart-icon-btn { order: 3; margin-left: 0; }
  .topbar-spacer { display: block; order: 4; width: 26px; flex-shrink: 0; }
  .topbar-more {
    display: none;
    position: absolute;
    top: 56px;
    left: 16px;
    background: #1C2230;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    z-index: 200;
    min-width: 190px;
  }
  .topbar-more.open { display: flex; }
  .topbar-more .lang-switcher { justify-content: center; }
  .topbar-more .staff-login-btn { width: 100%; text-align: center; }
  /* Dims the page behind the language/login dropdown so it visibly reads as a
     floating menu on top of the hero heading, instead of looking like the two
     are broken/overlapping each other. Tapping the dimmed area closes it. */
  .topbar-more-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.35);
    z-index: 199;
  }
  .topbar-more-backdrop.open { display: block; }
  /* Keep Make/Model, Fuel/Year, Vehicle Type/Mobile paired side-by-side even on
     narrow screens — .field-wide (Name, Location) still spans the full row. */
  .field-grid { grid-template-columns: 1fr 1fr; gap: clamp(6px, 2.2vw, 10px); }
  .search-card { padding: clamp(14px, 4vw, 20px) clamp(12px, 3.5vw, 18px) clamp(12px, 3.5vw, 18px); }
  /* Viewport-based (vw) sizing so the "Find your rate" form scales down on
     smaller phones instead of staying a fixed size and forcing extra scrolling. */
  .search-card h3 { font-size: clamp(16px, 4.5vw, 21px); margin-bottom: clamp(10px, 3vw, 20px); }
  .field span { font-size: clamp(10px, 2.6vw, 11.5px); }
  .field select, .field input { padding: clamp(7px, 2.2vw, 11px) 10px; font-size: clamp(12px, 3.2vw, 14px); }
  .find-rate-btn { padding: clamp(10px, 3vw, 14px); font-size: clamp(13px, 3.5vw, 15px); }
  .locate-btn { width: clamp(34px, 9vw, 42px); }

  /* Shorter phones (and installed PWAs, which lose the browser's own address-bar
     chrome but sometimes gain a status-bar inset instead) have less usable
     vertical space than a normal browser tab. Below this height, shrink the
     hero copy and form further so "Find your rate" still fits without needing
     to scroll to reach the button. NOTE: these @media(max-height) rules are a
     first pass and are unreliable on mobile — see the JS-driven
     html.vh-compact / html.vh-tight rules right after this block's closing
     brace, which measure the ACTUAL visible height (accounting for a browser
     tab's own address bar) and are what really fixes this. */
  @media (max-height: 700px) {
    .hero { padding-top: 6px; padding-bottom: 10px; }
    .hero-title-short { font-size: 17px; margin-bottom: 2px; }
    .hero-sub-short { margin-bottom: 6px; font-size: 12px; }
    .search-card { padding: 10px 12px; }
    .search-card h3 { font-size: 14px; margin-bottom: 6px; }
    .search-card-tab { padding: 3px 9px; font-size: 9px; top: -10px; }
    .field-grid { gap: 5px; margin-bottom: 10px; }
    .field span { font-size: 9.5px; }
    .field select, .field input { padding: 5px 8px; font-size: 12px; }
    .find-rate-btn { padding: 8px; font-size: 13px; }
  }

  /* Very short viewports (small older phones, or an installed PWA whose status
     bar eats into available height) — shrink once more, and drop the hero copy
     entirely so the form itself is what fits without scrolling. */
  @media (max-height: 580px) {
    .hero-sub-short { display: none; }
    .hero { padding-top: 4px; padding-bottom: 6px; }
    .hero-title-short { font-size: 15px; margin-bottom: 0; }
    .search-card { padding: 8px 10px; }
    .search-card-tab { display: none; }
    .field-grid { gap: 4px; margin-bottom: 8px; }
    .field { gap: 2px; }
    .field span { font-size: 9px; }
    .field select, .field input { padding: 4px 7px; font-size: 11.5px; }
    .find-rate-btn { padding: 7px; font-size: 12.5px; }
  }

  /* Dashboard on mobile/tablet: sidebar becomes a slide-in drawer,
     bottom tab bar is the primary navigation (app-like). */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100vh; height: 100dvh;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 2000;
    box-shadow: none;
  }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,0.45); }
  /* Desktop's icon-only collapsed state doesn't apply once the drawer overlay is active */
  .sidebar.collapsed:not(.mobile-open) { width: 240px; transform: translateX(-100%); }
  .sidebar.collapsed.mobile-open .nav-label,
  .sidebar.collapsed.mobile-open .nav-group-arrow,
  .sidebar.collapsed.mobile-open .brand-plate-text { display: initial; }
  .sidebar.collapsed.mobile-open .nav-item { justify-content: flex-start; padding: 12px 20px; }
  /* a laptop's "collapsed" choice is remembered; on a phone the drawer is always the full menu */
  .sidebar.collapsed { width: 240px; }
  .sidebar.collapsed.mobile-open .nav-group-children { display: block; }
  .sidebar.collapsed.mobile-open .sidebar-footer .nav-label { display: initial; }
  .sidebar.collapsed.mobile-open .brand-plate-sidebar { justify-content: flex-start; padding: 7px 14px; }

  .main-content { padding-bottom: 64px; }
  .mobile-tab-bar { display: flex; }

  /* Included Services / Checkpoints checklist: CSS multi-column (column-count:2)
     squeezes each item's name + × delete button into too little width on mobile,
     so they overlap and text gets clipped at the screen edge. Single column on
     narrow screens fixes this — each row gets the full width it needs. */
  .pkg-checklist-2col { column-count: 1; }

  /* Time Taken / Warranty / Recommended Interval fields (.cat-field-row) are laid
     out side-by-side for desktop; on mobile each label+input pair now stacks on
     its own full-width line instead of wrapping mid-field. */
  .cat-field-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .cat-field-row input, .cat-field-row select { width: 100% !important; box-sizing: border-box; }
  .cat-field-row .cat-mini-label { margin-top: 6px; }
  .cat-field-row .cat-mini-label:first-child { margin-top: 0; }

  /* Site-wide: dashboard shell, cards, and popups scale fluidly to the phone's
     own width/height instead of using fixed desktop paddings — avoids both
     horizontal scroll (content wider than the screen) and vertical overflow
     that's taller than the screen needs to be. */
  .dash-topbar { padding: clamp(8px, 3vw, 16px) clamp(10px, 4vw, 24px); gap: clamp(8px, 2.5vw, 16px); }
  .dash-topbar h2 { font-size: clamp(14px, 4vw, 17px); }
  .dash-page-content { padding: clamp(10px, 4vw, 24px); }
  .dash-user-email { font-size: 10.5px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cat-job-header, .cat-job-body { padding: clamp(8px, 3vw, 14px); }

  .modal-box { max-width: 94vw; max-height: calc(100dvh - 24px); }
  .modal-header-sticky { padding: clamp(14px, 5vw, 26px) clamp(14px, 5vw, 30px) 12px; }
  .modal-body-scroll { padding: 12px clamp(14px, 5vw, 30px); }
  .modal-footer-sticky { padding: 12px clamp(14px, 5vw, 30px) clamp(14px, 5vw, 24px); }

  .stat-card { padding: clamp(10px, 3.5vw, 16px); }
}

/* ===== JS-driven compact mode (see updateRealViewportHeight in app.js) =====
   window.innerHeight — unlike CSS vh / @media(max-height) on mobile — always
   reflects the space actually visible right now, in a normal browser TAB
   (address bar + tab bar included) as well as in an installed app. This is
   what makes "Find your rate" fit without scrolling in BOTH, not only in the
   installed app where CSS's own (larger, chrome-free) height happened to work. */
html.vh-compact .hero { padding-top: 6px; padding-bottom: 10px; }
html.vh-compact .hero-title-short { font-size: 17px; margin-bottom: 2px; }
html.vh-compact .hero-sub-short { margin-bottom: 6px; font-size: 12px; }
html.vh-compact .search-card { padding: 10px 12px; }
html.vh-compact .search-card h3 { font-size: 14px; margin-bottom: 6px; }
html.vh-compact .search-card-tab { padding: 3px 9px; font-size: 9px; top: -10px; }
html.vh-compact .field-grid { gap: 5px; margin-bottom: 10px; }
html.vh-compact .field span { font-size: 9.5px; }
html.vh-compact .field select, html.vh-compact .field input { padding: 5px 8px; font-size: 12px; }
html.vh-compact .find-rate-btn { padding: 8px; font-size: 13px; }

html.vh-tight .hero-sub-short { display: none; }
html.vh-tight .hero { padding-top: 4px; padding-bottom: 6px; }
html.vh-tight .hero-title-short { font-size: 15px; margin-bottom: 0; }
html.vh-tight .search-card { padding: 8px 10px; }
html.vh-tight .search-card-tab { display: none; }
html.vh-tight .field-grid { gap: 4px; margin-bottom: 8px; }
html.vh-tight .field { gap: 2px; }
html.vh-tight .field span { font-size: 9px; }
html.vh-tight .field select, html.vh-tight .field input { padding: 4px 7px; font-size: 11.5px; }
html.vh-tight .find-rate-btn { padding: 7px; font-size: 12.5px; }

.mobile-tab-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  z-index: 1900;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px 6px;
  text-decoration: none;
  color: var(--steel-soft);
  font-size: 10.5px;
  font-weight: 600;
}

.tab-item.active { color: var(--amber); }
.tab-icon { font-size: 18px; line-height: 1; }

/* ===== DASHBOARD — stat cards, tables, forms, badges ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.stat-card-label {
  font-size: 11px;
  color: var(--steel-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

.stat-card-value {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.dash-section { margin-top: 18px; }
.dash-section h3 { font-size: 14px; margin-bottom: 10px; }

/* ===== Settings — card list home + sub-pages ===== */
.settings-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.settings-card:hover { box-shadow: 0 6px 16px rgba(20,23,31,0.08); transform: translateY(-1px); }

.settings-card-icon { font-size: 24px; flex-shrink: 0; }

.settings-card-text { flex: 1; min-width: 0; }

.settings-card-title { font-weight: 700; font-size: 15px; margin: 0 0 2px; }

.settings-card-desc { font-size: 12.5px; color: var(--steel-soft); margin: 0; }

.settings-card-arrow { font-size: 20px; color: var(--amber); flex-shrink: 0; }

/* ===== Catalog Live Status ===== */
.live-make-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}

.live-make-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: #FAFAF8;
}

.live-make-arrow { color: var(--amber); font-size: 12px; width: 12px; }

.live-make-name { font-weight: 600; font-size: 14px; }

.live-make-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--steel-soft);
  margin-right: 8px;
}

.live-make-body { padding: 6px 14px 10px; }

.live-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.live-model-row:first-of-type { border-top: none; }

.live-toggle-switch {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #DDD;
  border: none;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.live-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}

.live-toggle-switch.on { background: var(--green); }
.live-toggle-switch.on::after { left: 17px; }
.live-toggle-switch.mixed { background: linear-gradient(90deg, var(--green) 50%, #DDD 50%); }

.table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; }

.table-wrap thead { background: #FAFAF8; }

.table-wrap th, .table-wrap td {
  text-align: left;
  padding: 12px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}

.table-wrap th {
  color: var(--steel-soft);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-wrap tr:last-child td { border-bottom: none; }
.td-location { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-inline { color: var(--steel-soft); font-size: 13.5px; padding: 20px; }

.empty-state {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 60px 30px;
  text-align: center;
}

.empty-state-icon { font-size: 30px; margin-bottom: 10px; }
.empty-state h3 { font-size: 16px; margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; color: var(--steel-soft); }

.form-card-modern {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.form-card-modern h3 { font-size: 16px; margin-bottom: 18px; }

.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.module-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.module-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #FAFAF8;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--steel);
  cursor: pointer;
}

.mini-badge {
  display: inline-block;
  background: rgba(255,106,26,0.1);
  color: var(--amber-dark);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px 3px 2px 0;
}

.status-pill {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.status-on { background: #E4F6EC; color: var(--green); }
.status-off { background: #FDEAE8; color: #C0392B; }

.toggle-staff-btn {
  background: none;
  border: 1.5px solid var(--line);
  color: var(--steel);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.toggle-staff-btn:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 700px) {
  .field-grid-2 { grid-template-columns: 1fr; }
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 3px;
}

.lang-btn-pill {
  background: none;
  border: none;
  color: var(--steel-soft);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.lang-btn-pill.active { background: var(--amber); color: var(--ink); }

.dash-topbar .lang-switcher {
  background: #FAFAF8;
  border: 1px solid var(--line);
}

.dash-topbar .lang-btn-pill { color: var(--steel); }
.dash-topbar .lang-btn-pill.active { background: var(--amber); color: var(--ink); }

/* ===== SAVED TOAST ===== */
.saved-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2000;
}

.saved-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.saved-toast-success .saved-toast-tick { background: #3AAE5C; color: #fff; }
.saved-toast-error { background: #501313; }
.saved-toast-error .saved-toast-tick { background: #E24B4A; color: #fff; }

.saved-toast-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== CATALOG PAGE ===== */
.cat-search-bar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}

.cat-search-bar .field-grid-2 { margin-bottom: 14px; }

.cat-add-category-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.cat-add-category-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.cat-add-category-row button {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cat-category {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.cat-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

.cat-category-header:hover { background: #FAFAF8; }
.cat-category-arrow { color: var(--amber); font-size: 12px; width: 12px; }
.cat-category-count { margin-left: auto; font-size: 12px; color: var(--steel-soft); font-weight: 400; }

.cat-delete-btn {
  background: none;
  border: 1.5px solid #F5C6C0;
  color: #C0392B;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.cat-category-body { padding: 6px 18px 18px; }

.cat-add-job-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.cat-add-job-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}

.cat-add-job-row button {
  background: var(--amber);
  color: var(--ink);
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.cat-job {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-top: 8px;
  overflow: hidden;
}

.cat-job-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 14px;
  background: #FAFAF8;
}

.cat-job-header:hover { background: #F4F2ED; }
.cat-job-title { flex: 1; }
.cat-job-meta { font-size: 12px; color: var(--steel-soft); font-weight: 400; }
.cat-job-body { padding: 14px; background: #fff; }

.cat-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cat-field-row select, .cat-field-row input[type=number] {
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.cat-mini-label { font-size: 12px; color: var(--steel); font-weight: 600; }

.cat-parts-list { margin-bottom: 12px; }

.cat-part-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.cat-part-row input {
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.cat-part-row input.part-name { flex: 2; }
.cat-part-row input.part-mrp { flex: 1; }

.cat-part-row-wrap {
  margin-bottom: 10px;
  padding-bottom: 4px;
}

.cat-part-row-wrap .cat-part-row { margin-bottom: 6px; }

.part-oil-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--steel);
  white-space: nowrap;
  cursor: pointer;
}

.cat-part-oil-fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px 0;
  padding: 8px 10px;
  background: #FFF7EC;
  border: 1px dashed #EFC98A;
  border-radius: var(--radius-sm);
}

.cat-part-oil-fields input, .cat-part-oil-fields select {
  padding: 7px 9px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

/* Base look for Rule-form chip labels (Make/Models/Fuel/Plate) in the default
   (light) theme — a plain bordered box. Dark Neon overrides this into a pill chip. */
.pkg-rule-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.cat-part-remove {
  background: none;
  border: 1.5px solid #F5C6C0;
  color: #C0392B;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  flex-shrink: 0;
}

.cat-job-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cat-btn-secondary {
  background: none;
  border: 1.5px solid var(--line);
  color: var(--steel);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cat-btn-primary {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cat-vehicle-summary {
  background: #FFF5F0;
  border: 1px solid #FFE4D6;
  color: var(--amber-dark);
  font-weight: 600;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}

.bulk-modal-textarea {
  width: 100%;
  min-height: 140px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: 'Roboto Mono', monospace;
  resize: vertical;
  margin: 12px 0;
}

.cat-category-icon { font-size: 15px; }

/* ===== SCHEDULED PACKAGE — MRP strikethrough + Offer price ===== */
.mrp-strike {
  text-decoration: line-through;
  color: var(--steel-soft);
  font-weight: 500;
  margin-right: 6px;
}

.result-job-price .mrp-strike { font-size: 12.5px; }

/* ===== Clickable "Editing rates for" vehicle bar ===== */
.cat-vehicle-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: background 0.15s ease;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cat-vehicle-summary:hover { background: #FFEEE3; }

.cat-vehicle-summary-edit {
  font-size: 12px;
  font-weight: 700;
  color: var(--amber-dark);
  text-decoration: underline;
}

/* ===== Modern price pill (used in catalog editor + public results) ===== */
.price-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E4F6EC;
  color: var(--green);
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}

.result-job-row .price-pill,
.cat-job-meta .price-pill { font-size: 12.5px; padding: 3px 10px; }

/* ===== Package rich checklist ===== */
.pkg-checklist {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  font-size: 13px;
  color: var(--steel);
}

.pkg-checklist li { padding: 3px 0; }

.pkg-checklist-2col {
  column-count: 2;
  column-gap: 24px;
}

.pkg-checklist-2col-item {
  font-size: 13px;
  color: var(--steel);
  padding: 3px 0;
  break-inside: avoid;
}

.pkg-popup-photo-placeholder {
  width: 100%;
  height: 140px;
  border-radius: var(--radius-sm);
  background: #F4F3EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 14px;
}

/* ===== Scheduled Packages — side-by-side tier comparison (2+ packages) ===== */
.pkg-tier-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
}

.pkg-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.pkg-tier-row:hover { border-color: var(--amber); }

.pkg-tier-row-info { min-width: 0; }

.pkg-tier-row-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.pkg-tier-row-meta {
  font-size: 11px;
  color: var(--steel-soft);
  margin-top: 2px;
}

.pkg-tier-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pkg-tier-row-price {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
}

.pkg-tier-row-price .mrp-strike { font-size: 11px; }

.pkg-tier-row-cart {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.pkg-tier-row-cart:hover { border-color: var(--amber); }

.pkg-tier-hint {
  font-size: 11px;
  color: var(--steel-soft);
  text-align: center;
  margin: 2px 0 4px;
}
.pkg-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 16px 44px;
  margin-bottom: 4px;
  position: relative;
}

.pkg-card-photo {
  width: 100px;
  height: 100px;
  object-fit: contain; /* whole photo, never cut (posters have text at the edges) */
  background: var(--pub-surface, #F4F3F0);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.pkg-card-body { flex: 1; min-width: 0; }

.pkg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.pkg-card-header h4 { font-size: 16px; font-family: 'Oswald', sans-serif; }

.pkg-time-badge {
  background: #F1F0EC;
  color: var(--steel);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.pkg-card-meta {
  font-size: 12.5px;
  color: var(--steel-soft);
  margin-bottom: 4px;
}

.pkg-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pkg-add-btn { width: auto; padding: 9px 18px; font-size: 12.5px; }

.pkg-sale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #FFF9E8;
  border: 1px dashed #F0D98A;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8A6D00;
}

.pkg-sale-off {
  background: var(--green);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
}

/* ===== Labour / Parts separated subsections ===== */
.cat-subsection {
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.cat-subsection:first-of-type { border-top: none; margin-top: 10px; padding-top: 0; }

.cat-subsection-title {
  font-family: 'Oswald', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--amber-dark);
  margin-bottom: 8px;
}

/* ===== Rename (pencil) button ===== */
.cat-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.6;
  padding: 2px 4px;
  border-radius: 4px;
}

.cat-rename-btn:hover { opacity: 1; background: rgba(255,106,26,0.12); }

/* ===============================================================
   3D DEPTH TOUCHES — subtle raised/pressed feel on key elements
   =============================================================== */

/* Category icon gets a small raised 3D badge */
.cat-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(160deg, #ffffff, #f1efe9);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -2px 3px rgba(0,0,0,0.08) inset,
    0 3px 6px rgba(20,23,31,0.12);
}

/* Buttons get a raised bevel + press-down feedback */
.cat-btn-primary,
.find-rate-btn,
.vehicle-search-btn,
.cat-add-category-row button {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 3px 0 rgba(0,0,0,0.15),
    0 6px 14px rgba(20,23,31,0.18);
  transform: translateY(0);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cat-btn-primary:active,
.find-rate-btn:active,
.vehicle-search-btn:active,
.cat-add-category-row button:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 1px 0 rgba(0,0,0,0.15),
    0 2px 6px rgba(20,23,31,0.15);
}

.cat-btn-secondary {
  box-shadow: 0 2px 0 rgba(20,23,31,0.06), 0 4px 8px rgba(20,23,31,0.06);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cat-btn-secondary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(20,23,31,0.06);
}

/* Price pill gets a subtle raised/embossed 3D look */
.price-pill {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 2px rgba(0,0,0,0.06) inset,
    0 2px 4px rgba(30,142,90,0.25);
}

/* Cards lift slightly on hover for depth */
.cat-category,
.cat-job,
.stat-card,
.pkg-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cat-category:hover { box-shadow: 0 6px 18px rgba(20,23,31,0.08); }
.pkg-card:hover { box-shadow: 0 10px 24px rgba(20,23,31,0.12); transform: translateY(-2px); }

/* Brand plate gets a raised, embossed look */
.brand-plate {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 4px 10px rgba(0,0,0,0.35);
}

/* ===== Photo preview thumbnail (package editor) ===== */
.pkg-photo-preview {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 3px 8px rgba(20,23,31,0.2);
  border: 1px solid var(--line);
}

/* ===============================================================
   MORE MODERN / 3D PASS — layered depth, glow, glass touches
   =============================================================== */

/* Search / package cards get a soft layered "floating" depth */
.search-card,
.form-card-modern,
.cat-search-bar {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 34px rgba(20,23,31,0.10),
    0 2px 6px rgba(20,23,31,0.06);
}

/* Sidebar nav active item gets a raised amber glow */
.nav-item.active {
  box-shadow: 0 3px 10px rgba(255,106,26,0.45), 0 1px 0 rgba(255,255,255,0.3) inset;
}

/* Brand plate dot gets a subtle pulse-glow so the mark feels alive */
.brand-plate-dot {
  box-shadow: 0 0 0 3px rgba(255,106,26,0.18), 0 0 8px rgba(255,106,26,0.5);
}

/* Job / category rows: soft inner top highlight for a glassy edge */
.cat-job, .cat-category, .stat-card, .table-wrap, .modal-box {
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(20,23,31,0.06);
}

/* ===== Vehicle summary chip row (BASE — was missing, causing unstyled run-together text) ===== */
.vehicle-search-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}

.vehicle-search-summary-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.vehicle-search-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.vehicle-chip {
  display: inline-flex;
  align-items: center;
  background: #FFF5F0;
  color: var(--amber-dark);
  border: 1px solid #FFD9C4;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Vehicle summary chip row gets more lift */
.vehicle-search-summary,
.cat-vehicle-summary {
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 16px rgba(20,23,31,0.08);
}

/* Modal boxes float higher with a soft glass edge */
.modal-box {
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 30px 60px rgba(20,23,31,0.28);
}

/* Toggle-ish small pills (lang switcher, price pill) get a touch more pop on hover */
.lang-btn-pill:hover { background: rgba(255,106,26,0.14); }

/* Subtle gradient sheen across the topbar for extra depth */
.topbar {
  background: linear-gradient(180deg, var(--ink) 0%, #10131a 100%);
}

/* ===== Package name clickable (opens details popup) ===== */
.pkg-card-title-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}

.pkg-card-title-clickable:hover { text-decoration-color: var(--amber); }

/* ===== Included Services numbered rows ===== */
.pkg-checklist-row { align-items: center; }

.pkg-checklist-num {
  width: 22px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--steel-soft);
  font-family: 'Roboto Mono', monospace;
}

.pkg-checklist-row .pkg-checklist-item { flex: 1; }

/* ===== Multi-select share checkboxes ===== */
.share-select-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  box-shadow: 0 1px 4px rgba(20,23,31,0.15);
}

.pkg-card { position: relative; }

.result-job-row {
  position: relative;
  padding-left: 34px !important;
}

.result-job-row .share-select-checkbox {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  box-shadow: none;
  padding: 0;
}

/* ===== Sticky "Share selected" bar — fixed to the side, always visible while items are checked ===== */
.sticky-share-bar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  pointer-events: none; /* only the buttons/text inside are clickable — the bar itself never blocks content behind it */
}

.sticky-share-bar > * {
  pointer-events: auto;
}

.sticky-share-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--steel);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .sticky-share-bar {
    left: 16px;
    right: 16px;
    bottom: 16px;
    justify-content: center;
  }
}

/* ===== Manufacturer badge shown next to vehicle name (text/initials, no external image) ===== */
.make-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ===== Site theme swatch picker (Settings) ===== */
.theme-swatch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  min-width: 82px;
}

.theme-swatch-btn span:not(.theme-swatch-label) {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin: 0 1px;
}

.theme-swatch-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--steel);
  text-align: center;
  margin-top: 2px;
}

.theme-swatch-btn.active { box-shadow: 0 0 0 2px rgba(255,106,26,0.25); }

/* ===== Clear-all button on sticky share bars ===== */
.sticky-share-clear {
  background: none;
  border: none;
  color: var(--steel-soft);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
}

.sticky-share-clear:hover { color: var(--ink); }

/* ===== "Dark Neon" theme — Owner/Staff dashboard only (Settings → Site theme) =====
   Scoped entirely under .dashboard-screen.theme-dark-neon so the public customer
   site is never affected, regardless of which theme the Owner picks. Look/feel only —
   no structural or functional change to any page underneath this. */
.dashboard-screen.theme-dark-neon {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  background: #0B0F19;
}

.dashboard-screen.theme-dark-neon .sidebar {
  background: #070A11;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.dashboard-screen.theme-dark-neon .main-content { background: #0B0F19; }

.dashboard-screen.theme-dark-neon .dash-topbar {
  background: rgba(7,10,17,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-screen.theme-dark-neon .dash-topbar h2,
.dashboard-screen.theme-dark-neon .icon-btn,
.dashboard-screen.theme-dark-neon .cat-job-title,
.dashboard-screen.theme-dark-neon .cat-category-header span,
.dashboard-screen.theme-dark-neon h1,
.dashboard-screen.theme-dark-neon h2,
.dashboard-screen.theme-dark-neon h3,
.dashboard-screen.theme-dark-neon h4 {
  color: #F3F4F6;
}

.dashboard-screen.theme-dark-neon .dash-user-email,
.dashboard-screen.theme-dark-neon .cat-mini-label,
.dashboard-screen.theme-dark-neon .cat-job-meta,
.dashboard-screen.theme-dark-neon .cat-category-count,
.dashboard-screen.theme-dark-neon label {
  color: #9CA3AF;
}

/* Glass cards — every card-like surface in the dashboard picks this up */
.dashboard-screen.theme-dark-neon .cat-category,
.dashboard-screen.theme-dark-neon .cat-job,
.dashboard-screen.theme-dark-neon .form-card-modern,
.dashboard-screen.theme-dark-neon .cat-job-body,
.dashboard-screen.theme-dark-neon .cat-part-oil-fields,
.dashboard-screen.theme-dark-neon .empty-state,
.dashboard-screen.theme-dark-neon .table-wrap {
  background: rgba(23,30,48,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}

.dashboard-screen.theme-dark-neon .cat-job-header,
.dashboard-screen.theme-dark-neon .cat-category-header {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
}

.dashboard-screen.theme-dark-neon .cat-job-header:hover,
.dashboard-screen.theme-dark-neon .cat-category-header:hover {
  background: rgba(255,255,255,0.04);
}

.dashboard-screen.theme-dark-neon input,
.dashboard-screen.theme-dark-neon select,
.dashboard-screen.theme-dark-neon textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #F3F4F6;
}

.dashboard-screen.theme-dark-neon input::placeholder { color: #6B7280; }

.dashboard-screen.theme-dark-neon .cat-part-row,
.dashboard-screen.theme-dark-neon .pkg-checklist-2col-item,
.dashboard-screen.theme-dark-neon .cart-item-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  color: #F3F4F6;
}

.dashboard-screen.theme-dark-neon .cat-btn-primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-dark));
  color: #14171F;
  border: none;
  box-shadow: 0 0 20px rgba(255,85,0,0.35);
}

.dashboard-screen.theme-dark-neon .cat-btn-secondary {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #E5E7EB;
}

.dashboard-screen.theme-dark-neon .cat-btn-secondary:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.dashboard-screen.theme-dark-neon .cat-delete-btn,
.dashboard-screen.theme-dark-neon .cat-part-remove {
  background: rgba(226,75,74,0.1);
  border-color: rgba(226,75,74,0.4);
  color: #F28B82;
}

.dashboard-screen.theme-dark-neon .price-pill {
  background: rgba(255,85,0,0.12);
  color: var(--amber);
}

.dashboard-screen.theme-dark-neon table { color: #E5E7EB; }
.dashboard-screen.theme-dark-neon table th { color: #9CA3AF; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dashboard-screen.theme-dark-neon table td { border-bottom: 1px solid rgba(255,255,255,0.06); }

.dashboard-screen.theme-dark-neon .cat-vehicle-summary {
  background: rgba(255,85,0,0.1);
  border: 1px solid rgba(255,85,0,0.3);
  color: #FFB27A;
}

/* ===== Rule-form chip buttons (Make/Models/Fuel/Plate) — chip look only in Dark Neon ===== */
.dashboard-screen.theme-dark-neon .pkg-rule-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #9CA3AF;
  cursor: pointer;
  background: transparent;
  position: relative;
}

.dashboard-screen.theme-dark-neon .pkg-rule-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dashboard-screen.theme-dark-neon .pkg-rule-chip:has(input:checked) {
  background: rgba(255,85,0,0.2);
  border-color: var(--amber);
  color: var(--amber-dark);
  font-weight: 600;
}

/* ===== QUICK SETTINGS SLIDE-IN PANEL (topbar gear icon, all dashboard pages
   except Settings itself) — same Settings content as the full Settings page,
   opened without navigating away from the current page. ===== */
.quick-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,23,31,0.35);
  z-index: 1100;
  display: flex;
  justify-content: flex-end;
  animation: modalFadeIn 0.18s ease;
}

.quick-settings-panel {
  width: min(340px, 90vw);
  height: 100%;
  background: #fff;
  box-shadow: -6px 0 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  animation: quickSettingsSlideIn 0.2s ease;
}

@keyframes quickSettingsSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.quick-settings-panel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.quick-settings-back {
  background: none;
  border: none;
  color: var(--amber-dark);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 4px 0;
}

.quick-settings-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.quick-settings-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px;
}

@media (max-width: 640px) {
  .quick-settings-panel { width: 100vw; }
}

/* ===== Folder landing pages — card grid shown when a sidebar folder (Quick
   Access/Edit Product/Service/CRM/Staff & Access/Account/Store) is opened,
   replacing the old dropdown sub-menu. ===== */
.folder-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.folder-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.folder-card:hover { border-color: var(--amber); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.folder-card-icon { font-size: 22px; }
.folder-card-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }


/* ============================================================
   PUBLIC SITE — "Clean light" style (home, Rates, popups)
   White surfaces, soft grey cards, black for selection, one brand
   orange for the main action only. Inter Tight headings + Inter text,
   no emojis. The Owner/Staff dashboard keeps its own look.
   ============================================================ */
:root {
  --pub-bg: #FFFFFF;
  --pub-surface: #F5F5F4;
  --pub-surface-2: #ECECEA;
  --pub-line: #E6E6E4;
  --pub-ink: #111111;
  --pub-mid: #5F5F5F;
  --pub-low: #8E8E8E;
  --pub-accent: #FF5A1F;
  --pub-accent-hover: #E94B12;
  --pub-ok: #1E8E5A;
  --pub-error: #D93025;
  --pub-font: 'Inter', -apple-system, sans-serif;
  --pub-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
}

/* overflow-x:hidden on BOTH html and body turns body into a scroll container, which
   silently disabled every position:sticky (topbar, Rates tabs). clip stops sideways
   scroll the same way without creating a scroll container. */
html, body { overflow-x: clip; }
body { background: var(--pub-bg); }

/* ----- topbar ----- */
.topbar {
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--pub-line);
  font-family: var(--pub-font);
}

.topbar .brand-plate { background: none; border: none; box-shadow: none; padding: 4px 0; }
.topbar .brand-plate-text { font-family: var(--pub-display); font-weight: 700; font-size: 16px; letter-spacing: 0.03em; color: var(--pub-ink); }
.topbar .brand-plate-text b { color: var(--pub-accent); font-weight: 700; }
.topbar .brand-plate-dot { width: 8px; height: 8px; background: var(--pub-accent); box-shadow: none; }

.topbar-search-trigger { background: var(--pub-surface); border: 1px solid transparent; color: var(--pub-mid); font-weight: 500; }
.topbar-search-trigger:hover { border-color: var(--pub-line); color: var(--pub-ink); }

.topbar .lang-switcher { background: var(--pub-surface); border-color: transparent; }
.topbar .lang-btn-pill { color: var(--pub-mid); font-weight: 600; }
.topbar .lang-btn-pill:hover { background: var(--pub-surface-2); }
.topbar .lang-btn-pill.active { background: var(--pub-ink); color: #fff; }

.topbar .staff-login-btn { border: 1px solid var(--pub-line); color: var(--pub-ink); background: #fff; border-radius: 999px; font-weight: 600; }
.topbar .staff-login-btn:hover { background: var(--pub-ink); border-color: var(--pub-ink); color: #fff; }

.topbar .cart-icon-btn { color: var(--pub-ink); }
.topbar .cart-count-badge { background: var(--pub-accent); color: #fff; }
.topbar-menu-btn { background: var(--pub-surface); border-color: transparent; color: var(--pub-ink); }

/* ----- home hero ----- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--pub-bg);
  padding: 64px 24px 0;
  font-family: var(--pub-font);
}

/* the oil-change scene, kept as a very soft warm haze behind the form */
.hero-photo {
  position: absolute;
  inset: -40px;
  background: url('hero-oil-bg.svg') calc(50% + 220px) 0 / 1600px 900px no-repeat;
  filter: blur(14px) saturate(1.1);
  opacity: 0.13;
  pointer-events: none;
}

.hero-inner { position: relative; gap: 64px; padding-bottom: 56px; align-items: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pub-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pub-mid);
  background: var(--pub-surface);
  border: none;
  padding: 6px 12px;
  margin-bottom: 22px;
}

.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pub-ok); }

.hero-copy h1 {
  font-family: var(--pub-display);
  font-weight: 700;
  font-size: 54px;
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--pub-ink);
}

.hero-copy h1 em { font-style: normal; color: var(--pub-accent); }

.hero-sub { color: var(--pub-mid); font-size: 18px; line-height: 1.55; letter-spacing: -0.01em; max-width: 460px; }

.hero-stats { gap: 40px; border-top: 1px solid var(--pub-line); padding-top: 24px; max-width: 460px; }
.hero-stat-num { font-family: var(--pub-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; color: var(--pub-ink); }
.hero-stat-label { color: var(--pub-low); font-size: 13px; }

/* ----- search card ----- */
.hero .search-card {
  background: var(--pub-surface);
  border: none;
  border-radius: 24px;
  padding: 32px;
  box-shadow: none;
  font-family: var(--pub-font);
}

.hero .search-card-tab { display: none; }

.hero .search-card h3 {
  font-family: var(--pub-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--pub-ink);
  margin-bottom: 18px;
}

.form-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pub-ink);
  margin-bottom: 10px;
}

.form-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pub-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:where(.hero) .search-card .field-grid { margin-bottom: 20px; }

.hero .field span { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--pub-mid); }
#searchCard .field > span::after { content: ' *'; color: var(--pub-accent); }

/* :where() keeps these at low specificity so the short-phone html.vh-compact sizes still win */
:where(.hero) .field select,
:where(.hero) .field input { padding: 12px 14px; }

.hero .field select,
.hero .field input {
  font-family: var(--pub-font);
  font-weight: 500;
  color: var(--pub-ink);
  background-color: #fff;
  border: 1px solid var(--pub-line);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero .field input::placeholder { color: var(--pub-low); font-weight: 400; }
.hero .field select:hover, .hero .field input:hover { border-color: #CFCFCC; }
.hero .field select:focus, .hero .field input:focus { border-color: var(--pub-ink); box-shadow: 0 0 0 3px rgba(17,17,17,0.08); }
.hero .field input.field-prefilled { background-color: #FAFAF9; }

.hero .search-card .field select.field-invalid,
.hero .search-card .field input.field-invalid { border-color: var(--pub-error); box-shadow: 0 0 0 3px rgba(217,48,37,0.12); }

.hero .location-row-inline input { background: #fff; color: var(--pub-ink); cursor: text; }
.hero .locate-btn { background: var(--pub-ink); color: #fff; border-radius: 12px; }

.hero .find-rate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pub-accent);
  color: #fff;
  border-radius: 14px;
  font-family: var(--pub-font);
  font-weight: 600;
  font-size: 16px;
  box-shadow: none;
}

.hero .find-rate-btn:hover { background: var(--pub-accent-hover); transform: none; }
#pubSearchBtn::after { content: '→'; transition: transform 0.15s ease; }
#pubSearchBtn:hover::after { transform: translateX(3px); }
#pubSearchBtn.is-loading { opacity: 0.7; cursor: progress; }
#pubSearchBtn.is-loading::after { content: ''; }
.hero .field-msg { color: var(--pub-error); }

/* ----- how it works ----- */
.how-it-works {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 64px;
}

.how-step { display: flex; gap: 14px; padding: 22px; background: var(--pub-surface); border-radius: 18px; }
.how-step-num { font-family: var(--pub-display); font-weight: 700; font-size: 14px; color: var(--pub-accent); flex-shrink: 0; }
.how-step h4 { font-family: var(--pub-display); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: var(--pub-ink); margin-bottom: 4px; }
.how-step p { font-size: 14px; color: var(--pub-mid); line-height: 1.5; }

/* ----- Rates page ----- */
#resultsSection {
  background: var(--pub-bg);
  min-height: calc(100dvh - var(--topbar-h, 64px));
  padding: 24px 24px 130px;
  font-family: var(--pub-font);
  color: var(--pub-ink);
}

#resultsSection .results-inner { max-width: 760px; }

#resultsSection .results-header {
  position: static;
  background: var(--pub-surface);
  border: none;
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 14px;
  align-items: center;
  gap: 16px;
}

.results-vehicle { display: flex; align-items: center; gap: 14px; min-width: 0; }
.results-vehicle-logo { display: none; }
.results-vehicle-text { min-width: 0; }

#resultsSection .results-header-eyebrow {
  font-family: var(--pub-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pub-mid);
  margin-bottom: 2px;
}

#resultsSection .results-header h2 {
  font-family: var(--pub-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--pub-ink);
}

.results-vehicle-meta { font-size: 14px; color: var(--pub-mid); margin-top: 4px; }

#resultsSection .edit-search-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--pub-ink);
  font-family: var(--pub-font);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#resultsSection .edit-search-btn svg { display: none; }

/* category tabs (sticky, scroll left/right) */
.results-cat-nav {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 40;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 12px;
  background: rgba(255,255,255,0.95);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.results-cat-nav::-webkit-scrollbar { display: none; }
.results-cat-nav:empty { display: none; }

.results-cat-chip {
  flex-shrink: 0;
  font-family: var(--pub-font);
  font-size: 14px;
  font-weight: 500;
  color: #3A3A3A;
  background: var(--pub-surface);
  border: none;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  scroll-snap-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.results-cat-chip:hover { background: var(--pub-surface-2); }
.results-cat-chip.active { background: var(--pub-ink); color: #fff; }

/* one category at a time */
#resultsSection .results-list { display: block; }
#resultsSection .result-cat { display: none; background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
#resultsSection .result-cat.is-tab-active { display: block; animation: tabFadeIn 0.18s ease; }
#resultsSection .result-cat-header { display: none; }
#resultsSection .result-cat-body,
#resultsSection .result-cat-body.hidden { display: block !important; padding: 0; }

@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* service + package rows share one layout: name/details left, price over Add right */
.rj-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rj-sub:empty { display: none; }

#resultsSection .result-job-row,
#resultsSection .pkg-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 !important;
  background: none;
  border: none;
  border-bottom: 1px solid #F0F0EF;
  border-radius: 0;
}

#resultsSection .pkg-tier-row { cursor: pointer; }
#resultsSection .pkg-tier-row:hover .pkg-tier-row-name { text-decoration: underline; text-underline-offset: 3px; }

#resultsSection .rj-info,
#resultsSection .pkg-tier-row-info { min-width: 0; }

#resultsSection .result-job-name,
#resultsSection .pkg-tier-row-name { font-family: var(--pub-font); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--pub-ink); }

#resultsSection .rj-sub,
#resultsSection .pkg-tier-row-meta { display: block; font-size: 13px; color: var(--pub-low); margin-top: 3px; }

#resultsSection .rj-right,
#resultsSection .pkg-tier-row-right { flex-direction: column; align-items: flex-end; gap: 8px; }

#resultsSection .price-pill,
#resultsSection .pkg-tier-row-price {
  background: none;
  box-shadow: none;
  padding: 0;
  font-family: var(--pub-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--pub-ink);
  white-space: nowrap;
}

#resultsSection .mrp-strike { font-family: var(--pub-font); color: #A3A3A3; font-weight: 500; font-size: 13px; margin-right: 6px; }

#resultsSection .result-add-btn {
  width: auto;
  height: auto;
  min-width: 72px;
  font-family: var(--pub-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pub-ink);
  background: var(--pub-surface);
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: none;
  cursor: pointer;
}

#resultsSection .result-add-btn:hover { background: var(--pub-surface-2); }
#resultsSection .result-add-btn.is-added { background: #E8F6EE; color: #137A3F; }

#resultsSection .pkg-tier-grid { display: block; margin: 0; }
#resultsSection .pkg-tier-hint { text-align: left; color: var(--pub-low); font-size: 13px; margin-top: 12px; }

/* single package card (when only one package applies) */
#resultsSection .pkg-card { background: var(--pub-surface); border: none; border-radius: 20px; padding: 18px; box-shadow: none; transform: none; }
#resultsSection .pkg-card-header h4 { font-family: var(--pub-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--pub-ink); }
#resultsSection .pkg-time-badge { background: #fff; color: var(--pub-mid); }
#resultsSection .pkg-card .cat-btn-primary { background: var(--pub-accent); color: #fff; border-radius: 999px; box-shadow: none; }
#resultsSection .pkg-card .cat-btn-secondary { background: #fff; color: var(--pub-ink); border: none; border-radius: 999px; box-shadow: none; }

.results-empty { text-align: center; padding: 40px 20px; background: var(--pub-surface); border-radius: 20px; color: var(--pub-mid); }

/* floating cart bar */
.results-cart-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 160%);
  width: min(560px, calc(100% - 24px));
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--pub-line);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  font-family: var(--pub-font);
  transition: transform 0.25s ease;
}

.results-cart-bar.show { transform: translate(-50%, 0); }
.results-cart-bar-info { display: flex; flex-direction: column; line-height: 1.2; }
.results-cart-bar-count { font-size: 12.5px; color: var(--pub-mid); }
.results-cart-bar-total { font-family: var(--pub-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--pub-ink); }

.results-cart-bar-btn {
  border: none;
  border-radius: 12px;
  background: var(--pub-accent);
  color: #fff;
  font-family: var(--pub-font);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.results-cart-bar-btn:hover { background: var(--pub-accent-hover); }
body:has(.results-cart-bar.show) .saved-toast { bottom: 96px; }

/* ----- popups (package details, cart, booking, login, confirmed) ----- */
.modal-overlay { background: rgba(0,0,0,0.4); }
.modal-box { border-radius: 24px; box-shadow: 0 24px 80px rgba(0,0,0,0.18); font-family: var(--pub-font); }
.modal-header-sticky { padding: 24px 24px 12px; border-bottom: none; }
.modal-body-scroll { padding: 8px 24px 16px; }
.modal-footer-sticky { padding: 14px 24px 22px; border-top: 1px solid #F0F0EF; }

.modal-box h3 { font-family: var(--pub-display); font-weight: 700; font-size: 21px; letter-spacing: -0.025em; color: var(--pub-ink); padding-right: 40px; }

.modal-close {
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pub-surface);
  color: var(--pub-mid);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover { background: var(--pub-surface-2); color: var(--pub-ink); }

.modal-header-sticky .search-card-tab {
  background: none;
  color: var(--pub-mid);
  padding: 0;
  margin: 0 0 2px;
  font-family: var(--pub-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: none;
}

.modal-box .field span { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--pub-mid); }
.modal-box .field input, .modal-box .field select { border: 1px solid var(--pub-line); border-radius: 12px; }
.modal-box .field input:focus, .modal-box .field select:focus { border-color: var(--pub-ink); box-shadow: 0 0 0 3px rgba(17,17,17,0.08); }
.modal-box .field input.field-prefilled { background: #FAFAF9; }

.modal-box .find-rate-btn { background: var(--pub-accent); color: #fff; border-radius: 14px; font-weight: 600; box-shadow: none; }
.modal-box .find-rate-btn:hover { background: var(--pub-accent-hover); transform: none; }
.modal-box .cat-btn-secondary { background: var(--pub-surface); border: none; color: var(--pub-ink); border-radius: 14px; box-shadow: none; font-weight: 600; }
.modal-box .cat-btn-secondary:hover { background: var(--pub-surface-2); }
.modal-box .price-pill { background: none; box-shadow: none; padding: 0; color: var(--pub-ink); font-family: var(--pub-display); font-weight: 700; }

.brand-plate-modal { background: none; border: none; box-shadow: none; padding: 0; }
.brand-plate-modal .brand-plate-text { font-family: var(--pub-display); font-weight: 700; color: var(--pub-ink); }
.brand-plate-modal .brand-plate-text b { color: var(--pub-accent); }
.login-modal input { border: 1px solid var(--pub-line); border-radius: 12px; }
.login-modal input:focus { border-color: var(--pub-ink); }
.login-modal button#loginSubmitBtn { background: var(--pub-ink); border-radius: 14px; font-weight: 600; }
.confirmed-box button { background: var(--pub-ink); border-radius: 14px; font-weight: 600; }

/* package details sheet */
.pkg-sheet-meta { font-size: 14px; color: var(--pub-mid); margin-top: 6px; }
.pkg-sheet-photo { display: block; width: auto; max-width: 100%; height: auto; max-height: 220px; object-fit: contain; border-radius: 14px; margin: 0 auto 16px; background: var(--pub-surface); }
.pkg-sheet-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--pub-surface); border-radius: 12px; font-size: 14px; color: var(--pub-mid); margin-bottom: 16px; }
.pkg-sheet-row strong { color: var(--pub-ink); font-weight: 600; text-align: right; }
.pkg-sheet-heading { font-size: 15px; font-weight: 600; color: var(--pub-ink); margin: 4px 0 4px; }
.pkg-sheet-heading span { color: var(--pub-low); font-weight: 500; margin-left: 4px; }
.pkg-sheet-list { list-style: none; margin: 0; padding: 0; }
.pkg-sheet-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #F2F2F1; font-size: 14.5px; line-height: 1.4; color: #2A2A2A; }
.pkg-sheet-list li:last-child { border-bottom: none; }
.pkg-sheet-list svg { flex-shrink: 0; margin-top: 2px; color: var(--pub-ok); }
.pkg-sheet-confirm { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pub-ink); margin-bottom: 10px; cursor: pointer; }
.pkg-sheet-confirm input { width: 18px; height: 18px; accent-color: var(--pub-ink); flex-shrink: 0; }
.pkg-sheet .field-msg { margin: 0 0 10px; }
.pkg-sheet .field-msg:empty { display: none; }
.pkg-sheet-actions { display: flex; align-items: center; gap: 10px; }
.pkg-sheet-price { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pkg-sheet-price .mrp-strike { font-size: 13px; color: #A3A3A3; }
.pkg-sheet-price strong { font-family: var(--pub-display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--pub-ink); }
.pkg-sheet-actions .cat-btn-secondary,
.pkg-sheet-actions .find-rate-btn { width: auto; padding: 13px 18px; font-size: 15px; white-space: nowrap; }

/* cart popup */
#cartPopupOverlay .cart-item-card { border: none; border-bottom: 1px solid #F0F0EF; border-radius: 0; padding: 14px 0; margin: 0; }
#cartPopupOverlay .cart-item-card:last-child { border-bottom: none; }
#cartPopupOverlay .cart-item-card-top { gap: 12px; }
#cartPopupOverlay .cart-item-name { font-size: 15px; font-weight: 600; color: var(--pub-ink); }
#cartPopupOverlay .cat-mini-label { font-size: 13px; color: var(--pub-low); font-weight: 400; }
#cartPopupOverlay .cart-item-remove { background: none; border: none; color: var(--pub-mid); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; padding: 6px 0 0; cursor: pointer; }
#cartPopupOverlay .cart-item-remove:hover { color: var(--pub-error); }
#cartPopupOverlay .cart-item-included { border: none; margin-top: 6px; padding: 0; }
#cartPopupOverlay .cart-item-included summary { font-size: 13px; color: var(--pub-mid); cursor: pointer; }
#cartPopupOverlay .cart-total-row { border-top: none; padding-top: 0; font-family: var(--pub-display); font-size: 18px; letter-spacing: -0.02em; }
#cartPopupOverlay .cat-job-actions { gap: 8px; flex-wrap: nowrap; }
#cartPopupOverlay .cat-job-actions .find-rate-btn { width: auto; }

/* ----- phones + tablets ----- */
@media (max-width: 860px) {
  .hero { padding: 20px 16px 0; }
  .hero-inner { gap: 16px; padding-bottom: 28px; }
  .eyebrow { display: none; }
  .hero-title-short { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.08; margin-bottom: 6px; }
  .hero-sub-short { color: var(--pub-mid); }
  .hero .search-card { border-radius: 20px; padding: 20px 16px; }
  .hero .search-card h3 { font-size: clamp(18px, 5vw, 22px); }
  .form-step-label { font-size: clamp(11px, 3vw, 13px); margin-bottom: clamp(6px, 2vw, 10px); }
  :where(.hero) .search-card .field-grid { margin-bottom: clamp(12px, 3.4vw, 18px); }
  .hero-photo { background-position: 70% 0; background-size: auto 520px; opacity: 0.1; }

  .how-it-works { grid-template-columns: 1fr; gap: 10px; padding-bottom: 32px; }

  .topbar-more { background: #fff; border: 1px solid var(--pub-line); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
  .topbar-more-backdrop { background: rgba(0,0,0,0.2); }

  #resultsSection { padding: 16px 16px 120px; }
  #resultsSection .results-header { padding: 16px; border-radius: 18px; }
  #resultsSection .results-header h2 { font-size: 22px; }
  #resultsSection .result-job-row, #resultsSection .pkg-tier-row { gap: 12px; }
  #resultsSection .result-job-name, #resultsSection .pkg-tier-row-name { font-size: 15px; }
}

@media (min-width: 600px) and (max-width: 860px) {
  .hero-inner, .how-it-works { max-width: 560px; }
}

@media (min-width: 861px) {
  .hero-photo { opacity: 0.13; }
}

/* popups become bottom sheets on phones */
@media (max-width: 600px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box { max-width: 100% !important; width: 100%; border-radius: 24px 24px 0 0; max-height: 92dvh; animation: sheetUp 0.25s ease; }
  .modal-footer-sticky { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .modal-header-sticky { padding: 22px 20px 10px; }
  .modal-body-scroll { padding: 6px 20px 14px; }
  .modal-footer-sticky { padding-left: 20px; padding-right: 20px; }
  .pkg-sheet-actions .cat-btn-secondary, .pkg-sheet-actions .find-rate-btn { padding: 12px 14px; font-size: 14.5px; }
}

@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* very small phones (320px): keep the logo on one line */
@media (max-width: 360px) {
  .topbar-inner { gap: 10px; padding: 12px 14px; }
  .topbar .brand-plate-text { font-size: 14px; white-space: nowrap; }
}

/* keep the "fits on one phone screen" behaviour (see updateRealViewportHeight) */
html.vh-compact .form-step-label { margin-bottom: 4px; font-size: 11px; }
html.vh-compact .form-step-num { width: 16px; height: 16px; font-size: 9.5px; }
html.vh-compact .search-card .field-grid { margin-bottom: 8px; }
html.vh-compact .hero-title-short { font-size: 22px; }
html.vh-compact .hero .search-card { padding: 14px 14px 10px; }
html.vh-tight .form-step-label { display: none; }
html.vh-tight .hero-title-short { font-size: 19px; }

/* Owner preview (dashboard look) also renders the text 'Add' package button */
.pkg-tier-row-cart.result-add-btn { width: auto; padding: 0 12px; font-size: 12.5px; font-weight: 600; }

/* light style: the blurred oil scene reads as smudges on white, so it's hidden here */
.hero-photo { display: none; }
.hero-copy h1 { letter-spacing: -0.03em; }
@media (max-width: 860px) {
  .hero-copy h1.hero-title-short { font-size: clamp(26px, 7.4vw, 30px); line-height: 1.08; letter-spacing: -0.03em; }
}
html.vh-compact .hero-copy h1.hero-title-short { font-size: 22px; }
html.vh-tight .hero-copy h1.hero-title-short { font-size: 19px; }
/* ============================================================
   SHARED ESTIMATE PAGE — opened from a cart "Share" link.
   Every shared service with its full details, a total and actions.
   Same clean-light language as the rest of the public site.
   ============================================================ */
#estimateSection { background: var(--pub-bg); font-family: var(--pub-font); color: var(--pub-ink); padding-bottom: 170px; min-height: calc(100dvh - var(--topbar-h, 64px)); }
.estimate-inner { max-width: 640px; margin: 0 auto; padding: 0 16px; }

.est-head { padding: 28px 0 18px; }
.est-head-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.est-eyebrow { font-size: 13px; color: var(--pub-mid); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.est-eyebrow span { background: var(--pub-surface); border-radius: 999px; padding: 4px 10px; font-weight: 600; color: var(--pub-ink); }
.est-rates-link { background: none; border: none; font: 600 14px var(--pub-font); color: var(--pub-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.est-head h1 { font-family: var(--pub-display); font-weight: 700; font-size: 32px; line-height: 1.08; letter-spacing: -0.035em; margin-top: 12px; color: var(--pub-ink); }
.est-veh-meta { font-size: 15px; color: var(--pub-mid); margin-top: 6px; }

.est-summary { background: var(--pub-surface); border-radius: 20px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.est-summary small { display: block; font-size: 13px; color: var(--pub-mid); }
.est-summary strong { font-family: var(--pub-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; }
.est-save-pill { background: #E8F6EE; color: #137A3F; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }

.est-sec-title { font-size: 13px; font-weight: 600; color: var(--pub-mid); margin: 28px 0 10px; }

.est-item { border: 1px solid var(--pub-line); border-radius: 20px; padding: 18px; margin-bottom: 12px; }
.est-item-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.est-item-cat { font-size: 12.5px; color: var(--pub-low); font-weight: 500; }
.est-item-name { font-family: var(--pub-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; margin-top: 2px; }
.est-price { text-align: right; flex-shrink: 0; }
.est-price s { display: block; font-size: 13px; color: #A3A3A3; }
.est-price strong { font-family: var(--pub-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.est-price em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: #137A3F; margin-top: 2px; }

.est-photo { display: block; width: auto; max-width: 100%; height: auto; max-height: 220px; object-fit: contain; border-radius: 14px; margin: 14px auto 0; background: var(--pub-surface); }

.est-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.est-fact { background: var(--pub-surface); border-radius: 12px; padding: 10px 12px; }
.est-fact small { display: block; font-size: 11.5px; color: var(--pub-low); }
.est-fact b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 2px; line-height: 1.3; }

.est-list-title { font-size: 14px; font-weight: 600; margin: 16px 0 2px; }
.est-list-title span { color: var(--pub-low); font-weight: 500; margin-left: 4px; }

.est-breakdown { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.est-breakdown td { padding: 9px 0; border-bottom: 1px solid #F2F2F1; color: #2A2A2A; }
.est-breakdown td:last-child { text-align: right; font-weight: 600; white-space: nowrap; padding-left: 12px; }
.est-breakdown tr.sum td { border-bottom: none; font-weight: 700; color: var(--pub-ink); padding-top: 11px; }

.est-note { margin-top: 12px; font-size: 13px; background: #FFF4EC; color: #9A3B0B; border-radius: 10px; padding: 9px 12px; }

.est-totals { border-radius: 20px; background: var(--pub-surface); padding: 18px 20px; margin-top: 18px; }
.est-totals .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 6px 0; color: #2A2A2A; }
.est-totals .row.total { border-top: 1px solid #E2E2E0; margin-top: 8px; padding-top: 12px; font-family: var(--pub-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--pub-ink); }
.est-totals .row.save { color: #137A3F; font-weight: 600; }

.est-fine { font-size: 12.5px; color: var(--pub-low); text-align: center; margin-top: 16px; line-height: 1.5; }
.est-empty { margin-top: 24px; padding: 40px 20px; text-align: center; background: var(--pub-surface); border-radius: 20px; color: var(--pub-mid); }

.estimate-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(255,255,255,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--pub-line); }
.estimate-actions-inner { max-width: 640px; margin: 0 auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.estimate-actions .find-rate-btn { background: var(--pub-accent); color: #fff; border-radius: 14px; font-family: var(--pub-font); font-weight: 600; font-size: 16px; box-shadow: none; padding: 15px; }
.estimate-actions .find-rate-btn:hover { background: var(--pub-accent-hover); transform: none; }
.estimate-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.estimate-actions .cat-btn-secondary { background: var(--pub-surface); color: var(--pub-ink); border: none; border-radius: 14px; box-shadow: none; font-family: var(--pub-font); font-weight: 600; font-size: 14.5px; padding: 12px; }
#estimateSection.est-is-empty .estimate-actions { display: none; }

body:has(#estimateSection:not(.hidden)) .saved-toast { bottom: 150px; }

@media (min-width: 700px) {
  .est-head h1 { font-size: 40px; }
  .estimate-inner, .estimate-actions-inner { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 380px) {
  .est-head h1 { font-size: 28px; }
}

.est-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 380px) { .est-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Settings → PDF Settings → Estimate PDF editor ===== */
.pdfset { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.pdfset .form-card-modern { margin-bottom: 14px; }
.pdfset-hint { font-size: 13px; color: var(--steel-soft); margin: -10px 0 14px; }
.pdfset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.pdfset-tpl { background: none; border: 2px solid transparent; border-radius: 12px; padding: 6px; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s ease; }
.pdfset-tpl:hover { border-color: var(--line); }
.pdfset-tpl.on { border-color: var(--amber); }
.pdfset-thumb { position: relative; display: block; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.pdfset-thumb > span { position: absolute; top: 0; left: 0; width: 794px; transform-origin: 0 0; pointer-events: none; }
.pdfset-tpl-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-top: 7px; }
.pdfset-tpl-name i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pdfset-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.pdfset-check input { width: 18px; height: 18px; accent-color: var(--amber); flex-shrink: 0; }
.pdfset-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pdfset input[type=range] { padding: 0; border: none; accent-color: var(--amber); }
.pdfset textarea { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font: 14px Inter, sans-serif; resize: vertical; }
.pdfset-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pdfset-preview { position: sticky; top: 0; }
.pdfset-preview-title { display: flex; justify-content: space-between; align-items: baseline; }
.pdfset-preview-title small { font-size: 12px; font-weight: 500; color: var(--steel-soft); font-family: Inter, sans-serif; }
.pdfset-paper { position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; background: #fff; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.pdfset-paper > div { position: absolute; top: 0; left: 0; width: 794px; transform-origin: 0 0; }
@media (max-width: 1100px) {
  .pdfset { grid-template-columns: 1fr; }
  .pdfset-preview { position: static; order: -1; max-width: 420px; }
}
@media (max-width: 600px) {
  .pdfset-toggles { grid-template-columns: 1fr; }
  .pdfset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
/* ===== Settings → Garage Details: booking fee on/off switch ===== */
.booking-fee-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); }
.booking-fee-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.booking-fee-switch-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #CFCFCC; flex-shrink: 0; transition: background .15s ease; }
.booking-fee-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s ease; }
.booking-fee-switch input:checked + .booking-fee-switch-track { background: var(--green); }
.booking-fee-switch input:checked + .booking-fee-switch-track::after { left: 21px; }
.booking-fee-switch input:focus-visible + .booking-fee-switch-track { box-shadow: 0 0 0 3px rgba(255,106,26,.3); }
.booking-fee-switch b { display: block; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.booking-fee-switch small { display: block; font-size: 12.5px; color: var(--steel-soft); text-transform: none; letter-spacing: 0; margin-top: 2px; font-weight: 400; }
.field input:disabled { opacity: .5; cursor: not-allowed; }
/* ===== Laptop/desktop: compact "Find your rate" so "Show My Rate" fits on a
   1366×768 screen without scrolling (phones keep their own sizes above) ===== */
@media (min-width: 861px) {
  .hero { padding-top: 40px; }
  .hero-inner { padding-bottom: 40px; }
  .hero .search-card { padding: 24px 26px 20px; border-radius: 22px; }
  .hero .search-card h3 { font-size: 22px; margin-bottom: 12px; }
  .hero .form-step-label { margin-bottom: 6px; }
  .hero .field { gap: 4px; }
  :where(.hero) .search-card .field-grid { gap: 10px 12px; margin-bottom: 14px; }
  :where(.hero) .field select,
  :where(.hero) .field input { padding: 10px 12px; }
  .hero .location-row-inline input { padding: 10px 12px; }
  .hero .find-rate-btn { padding: 12px; }
  .hero .field-msg { margin-top: 6px; }
  .hero .field-msg:empty { min-height: 0; margin-top: 0; }
}

/* ===== Topbar "Find rate": a small button, not a fake search box ===== */
.topbar-search-trigger {
  flex: none;
  max-width: none;
  padding: 8px 14px;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pub-ink);
}
.topbar-search-trigger svg { width: 15px; height: 15px; }
/* on Home the form is already on screen, so the button isn't needed there */
body[data-view="home"] #topbarSearchTrigger { display: none; }

/* ===== Language: one icon button that opens English / हिंदी / मराठी ===== */
.lang-menu { position: relative; display: inline-flex; }
.dash-topbar .lang-menu { margin-left: auto; }
/* Dashboard → public website (Owner/Staff stay logged in) */
.dash-website-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; border: 1px solid #E6E6E4; background: #fff; color: #111; font: 600 12.5px Inter, sans-serif; cursor: pointer; flex-shrink: 0; }
.dash-website-btn svg { width: 18px; height: 18px; color: #FF5A1F; }
.dash-website-btn:hover { border-color: #111; }
@media (max-width: 520px) { .dash-topbar .dash-user-email { display: none; } .dash-topbar { gap: 10px; } }
.lang-icon-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid #E6E6E4; background: #fff; color: #111; font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.lang-icon-btn svg { width: 18px; height: 18px; color: #FF5A1F; }
.lang-icon-btn:hover, .lang-menu.open .lang-icon-btn { border-color: #111; }
:is(.topbar, .dash-topbar) .lang-menu .lang-switcher { display: none; position: absolute; top: calc(100% + 8px); right: 0; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid #E6E6E4; box-shadow: 0 12px 30px rgba(0,0,0,.12); min-width: 140px; z-index: 300; }
:is(.topbar, .dash-topbar) .lang-menu.open .lang-switcher { display: flex; }
:is(.topbar, .dash-topbar) .lang-menu .lang-btn-pill { text-align: left; padding: 9px 12px; border-radius: 10px; font: 500 14px Inter, sans-serif; color: #111; }
:is(.topbar, .dash-topbar) .lang-menu .lang-btn-pill:hover { background: #F5F5F4; }
:is(.topbar, .dash-topbar) .lang-menu .lang-btn-pill.active { background: #111; color: #fff; }
/* phone: inside the ☰ menu the three languages show in a row beside the icon */
@media (max-width: 860px) {
  .topbar-more .lang-menu { align-items: center; justify-content: center; gap: 8px; }
  .topbar-more .lang-icon-btn { pointer-events: none; border: 0; padding: 0; background: none; }
  .topbar-more .lang-icon-btn .lang-cur { display: none; }
  .topbar .topbar-more .lang-menu .lang-switcher { display: flex; position: static; flex-direction: row; box-shadow: none; border: 0; padding: 0; min-width: 0; background: none; }
  .topbar .topbar-more .lang-menu .lang-btn-pill { padding: 7px 10px; font-size: 13px; }
}

/* ===== Footer — Home, Stores and Careers pages only (Rates/Estimate have their own bottom bars) ===== */
.site-footer { display: none; border-top: 1px solid var(--pub-line); padding: 24px 16px 18px; font-family: var(--pub-font); color: var(--pub-ink); background: var(--pub-bg); }
body[data-view="home"] .site-footer, body[data-view="stores"] .site-footer, body[data-view="careers"] .site-footer, body[data-view="services"] .site-footer, body[data-view="about"] .site-footer, body[data-view="social"] .site-footer { display: block; }
.site-footer-inner { max-width: 1180px; margin: 0 auto; }
.site-footer-steps { list-style: none; margin: 0 0 18px; padding: 0 0 14px; display: flex; justify-content: center; gap: 22px; border-bottom: 1px dashed var(--pub-line); }
.site-footer-steps li { display: flex; align-items: center; gap: 6px; }
.site-footer-steps span { width: 18px; height: 18px; border-radius: 50%; background: #FFF1EA; color: var(--pub-accent); font: 700 10px var(--pub-font); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.site-footer-steps b { font: 600 12.5px var(--pub-font); }
/* the 3 steps explain the rate search, so they only show under the Home page */
body:not([data-view="home"]) .site-footer-steps { display: none !important; }
.site-footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 18px var(--pub-display); letter-spacing: 0.03em; }
.site-footer-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.site-footer-brand b { color: var(--pub-accent); }
/* icon-only buttons; the name shows on hover (mouse), keyboard focus, or a tap */
.site-footer-btns { display: flex; justify-content: center; gap: 12px; margin-top: 0; padding-top: 30px; }
.fbtn { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--pub-surface); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--pub-accent); cursor: pointer; padding: 0; transition: background .15s, border-color .15s, transform .15s; }
.fbtn svg { width: 20px; height: 20px; }
.fbtn:hover, .fbtn.show { background: #fff; border-color: var(--pub-line); transform: translateY(-2px); }
.fbtn.on { background: var(--pub-ink); color: #fff; }
.fbtn .nm { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); background: #111; color: #fff; font: 600 12px var(--pub-font); padding: 5px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.fbtn .nm::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #111; }
.fbtn:hover .nm, .fbtn:focus-visible .nm, .fbtn.show .nm { opacity: 1; transform: translate(-50%, 0); }
.site-footer-copy { margin: 26px 0 0; text-align: center; font-size: 12.5px; color: var(--pub-low); }
@media (max-width: 760px) {
  .site-footer-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .site-footer-steps li { justify-content: center; gap: 5px; }
  .site-footer-steps span { width: 16px; height: 16px; font-size: 9.5px; }
  .site-footer-steps b { font-size: 11px; line-height: 1.25; }
  .site-footer-btns { gap: 10px; }
  .fbtn { width: 44px; height: 44px; }
}

/* ===== Public info pages (Stores, Careers) ===== */
.pub-page { font-family: var(--pub-font); color: var(--pub-ink); background: var(--pub-bg); }
.pub-page-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }
.pub-page-head { padding: 34px 0 22px; }
.pub-eyebrow { font: 600 12px var(--pub-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pub-accent); }
.pub-page-title { font: 700 38px/1.1 var(--pub-display); letter-spacing: -.02em; margin: 8px 0 0; color: var(--pub-ink); }
.pub-page-sub { color: var(--pub-mid); margin: 8px 0 0; font-size: 15px; line-height: 1.55; max-width: 560px; }
.pub-h2 { font: 700 28px/1.15 var(--pub-display); letter-spacing: -.01em; margin: 6px 0 0; }

.store-card { border: 1px solid var(--pub-line); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 400px) 1fr; margin-bottom: 18px; background: #fff; }
.store-gal { position: relative; background: var(--pub-surface); min-width: 0; }
/* a store without photos: details on the left, map on the right (stacked on phones) */
.store-card.no-photos { grid-template-columns: 1fr; }
@media (min-width: 861px) {
  .store-card.no-photos .store-info { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-content: start; }
  .store-card.no-photos .store-info > * { grid-column: 1; }
  .store-card.no-photos .store-mapbox { grid-column: 2; grid-row: 1 / span 5; }
  .store-card.no-photos .store-mapbox[open] > summary { display: none; }
  .store-card.no-photos .store-mapbox[open] .store-map { height: 100%; min-height: 240px; margin-top: 0; }
}
/* hours and map fold away, so a card stays short */
.store-more { min-width: 0; flex: 1; }
.store-more > summary { list-style: none; cursor: pointer; color: var(--pub-mid); }
.store-more > summary::-webkit-details-marker { display: none; }
.store-more > summary b { color: var(--pub-accent); font-weight: 600; white-space: nowrap; margin-left: 4px; }
.store-more > summary b::after { content: ' ▾'; font-size: 11px; }
.store-more[open] > summary b::after { content: ' ▴'; }
.store-more .store-hours { margin-top: 6px; }
.store-mapbox > summary { font-size: 14px; display: inline-flex; }
.store-mapbox > summary b { margin-left: 0; }
.store-mapbox .store-map { margin-top: 8px; }
.store-row > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the frame takes each photo's own shape (wide, tall or square); a very tall photo stops at
   --store-photo-max and the blurred copy behind fills its sides */
.store-gal { --store-photo-max: 440px; }
.store-gal-main { width: 100%; display: flex; align-items: flex-start; scroll-snap-type: x mandatory; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; transition: height .3s ease; }
.store-gal-main::-webkit-scrollbar { display: none; }
.store-slide { flex: 0 0 100%; width: 100%; position: relative; overflow: hidden; scroll-snap-align: start; background: #1b1b1b; }
.store-slide img { position: relative; width: 100%; height: auto; max-height: var(--store-photo-max); object-fit: contain; display: block; }
.store-slide img.store-slide-bg { position: absolute; inset: 0; height: 100%; max-height: none; object-fit: cover; filter: blur(18px) brightness(.85); transform: scale(1.15); }
.store-gal-count { position: absolute; top: 14px; left: 14px; background: rgba(0,0,0,.55); color: #fff; font: 600 12px var(--pub-font); padding: 5px 10px; border-radius: 999px; }
.store-gal-thumbs { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid var(--pub-line); overflow-x: auto; }
.store-gal-thumbs button { width: 64px; height: 48px; border-radius: 10px; flex-shrink: 0; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: var(--pub-surface); }
.store-gal-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-gal-thumbs button.on { outline: 2px solid var(--pub-accent); outline-offset: 2px; }
.store-gal-dots { display: none; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); gap: 6px; }
.store-gal-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.55); transition: width .2s; }
.store-gal-dots i.on { width: 18px; background: #fff; }
.store-info { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.store-info h2 { font: 700 24px var(--pub-display); letter-spacing: -.01em; margin: 8px 0 0; }
.store-status { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--pub-font); color: #16A34A; }
.store-status i { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px #DCFCE7; }
.store-status.closed { color: #B91C1C; }
.store-status.closed i { background: #DC2626; box-shadow: 0 0 0 4px #FEE2E2; }
.store-status em { font-style: normal; color: var(--pub-mid); font-weight: 500; }
.store-row { display: flex; gap: 12px; font-size: 14.5px; color: var(--pub-mid); line-height: 1.5; }
.store-row svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--pub-ink); }
.store-hours { width: 100%; font-size: 13.5px; border-collapse: collapse; }
.store-hours td { padding: 3px 0; color: var(--pub-mid); }
.store-hours td:last-child { text-align: right; color: var(--pub-ink); font-weight: 500; }
.store-hours tr.today td { color: var(--pub-ink); font-weight: 700; }
.store-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--pub-line); height: 190px; background: #EDEBE6; }
.store-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.store-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.store-acts a { height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 14px var(--pub-font); text-decoration: none; background: var(--pub-surface); color: var(--pub-ink); }
.store-acts a.pri { background: var(--pub-accent); color: #fff; }
.store-acts svg { width: 17px; height: 17px; }

.careers-hero { padding-top: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.careers-hero h1 { font: 700 42px/1.08 var(--pub-display); letter-spacing: -.02em; margin: 10px 0 0; }
.careers-cta { display: inline-flex; margin-top: 20px; height: 50px; padding: 0 26px; border-radius: 14px; background: var(--pub-accent); color: #fff; font: 600 15px var(--pub-font); align-items: center; border: 0; cursor: pointer; }
.careers-pic { aspect-ratio: 4/3; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #2B2F36, #4A4F57 60%, #7A5A45); display: flex; align-items: center; justify-content: center; }
.careers-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.careers-pic img.logo { width: 110px; height: 110px; object-fit: contain; }
.careers-sec { padding-top: 44px; }
.careers-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.careers-stat { background: var(--pub-surface); border-radius: 18px; padding: 20px; }
.careers-stat b { display: block; font: 700 32px var(--pub-display); color: var(--pub-accent); letter-spacing: -.02em; }
.careers-stat span { color: var(--pub-mid); font-size: 13.5px; }
.careers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.careers-ben { border: 1px solid var(--pub-line); border-radius: 18px; padding: 20px; }
.careers-ben .ic { width: 42px; height: 42px; border-radius: 12px; background: #FFF1EA; color: var(--pub-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.careers-ben .ic svg { width: 21px; height: 21px; }
.careers-ben b { display: block; font: 600 16px var(--pub-display); margin-bottom: 4px; }
.careers-ben p { color: var(--pub-mid); font-size: 13.5px; line-height: 1.5; margin: 0; }
.careers-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.careers-story { background: var(--pub-surface); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.careers-story q { font-size: 14.5px; line-height: 1.55; }
.careers-who { display: flex; align-items: center; gap: 10px; }
.careers-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #52606D, #1F2933); color: #fff; font: 700 14px var(--pub-font); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.careers-who b { font-size: 14px; display: block; }
.careers-who small { color: var(--pub-mid); font-size: 12.5px; }
.careers-yrs { margin-left: auto; background: #fff; border-radius: 999px; padding: 4px 10px; font: 700 12px var(--pub-font); color: var(--pub-accent); white-space: nowrap; }
.careers-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.careers-role { border: 1px solid var(--pub-line); border-radius: 999px; padding: 9px 14px; font: 600 13.5px var(--pub-font); display: inline-flex; gap: 8px; align-items: center; }
.careers-role i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.careers-apply { margin-top: 44px; background: var(--pub-surface); border-radius: 28px; padding: 34px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; scroll-margin-top: 80px; }
.careers-apply ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.careers-apply li { display: flex; gap: 10px; font-size: 14px; color: var(--pub-mid); }
.careers-apply li::before { content: '✓'; color: #16A34A; font-weight: 700; }
.careers-form { background: #fff; border-radius: 20px; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.careers-form .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.careers-form .f.full { grid-column: 1 / -1; }
.careers-form label { font: 600 12.5px var(--pub-font); color: var(--pub-mid); }
.careers-form label em { color: var(--pub-accent); font-style: normal; }
.careers-form input, .careers-form select, .careers-form textarea { width: 100%; height: 44px; border: 1px solid var(--pub-line); border-radius: 12px; padding: 0 12px; font: 400 15px var(--pub-font); color: var(--pub-ink); background: #fff; box-sizing: border-box; }
.careers-form textarea { height: 76px; padding: 10px 12px; resize: vertical; }
.careers-form input:focus, .careers-form select:focus, .careers-form textarea:focus { outline: none; border-color: var(--pub-ink); }
.careers-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.careers-chips button { border: 1px solid var(--pub-line); border-radius: 999px; padding: 8px 12px; font: 500 13px var(--pub-font); background: #fff; color: var(--pub-ink); cursor: pointer; }
.careers-chips button.on { background: var(--pub-ink); color: #fff; border-color: var(--pub-ink); }
.careers-submit { grid-column: 1 / -1; height: 50px; border-radius: 14px; background: var(--pub-accent); color: #fff; font: 600 15px var(--pub-font); border: 0; cursor: pointer; }
.careers-submit:disabled { opacity: .6; cursor: default; }
.careers-msg { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 13px; color: var(--pub-error); min-height: 0; }
.careers-note { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--pub-low); font-size: 12px; }
.careers-done { background: #fff; border-radius: 20px; padding: 32px 22px; text-align: center; }
.careers-done .tick { width: 54px; height: 54px; border-radius: 50%; background: #DCFCE7; color: #16A34A; font-size: 26px; display: inline-flex; align-items: center; justify-content: center; }
.careers-done h3 { font: 700 22px var(--pub-display); margin: 14px 0 6px; }
.careers-done p { color: var(--pub-mid); margin: 0; font-size: 14.5px; }

@media (max-width: 860px) {
  .pub-page-inner { padding: 0 16px 32px; }
  .pub-page-title { font-size: 30px; }
  .pub-h2 { font-size: 24px; }
  .store-card { grid-template-columns: 1fr; border-radius: 20px; }
  .store-info { padding: 14px 16px 16px; gap: 10px; }
  .store-info h2 { font-size: 20px; margin-top: 4px; }
  .store-row { font-size: 13.5px; gap: 10px; }
  .store-gal { --store-photo-max: min(420px, 60vh); }
  .store-acts a { height: 42px; font-size: 13.5px; }
  .store-gal-thumbs { display: none; }
  .store-gal-dots { display: flex; }
  .careers-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .careers-hero h1 { font-size: 32px; }
  .careers-pic { order: -1; }
  .careers-stats { grid-template-columns: 1fr 1fr; }
  .careers-grid { grid-template-columns: 1fr; }
  .careers-stories { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .careers-story { scroll-snap-align: start; }
  .careers-apply { grid-template-columns: 1fr; padding: 20px 16px; border-radius: 22px; gap: 18px; }
  .careers-form { grid-template-columns: 1fr; padding: 16px; }
}

/* ===== Our Services — premium look: deep jewel tones, ivory page, black-and-gold accents ===== */
.svc-page {
  --sp-bg: #FAF8F4; --sp-line: #ECE6DA; --sp-gold: #B08D57; --sp-gold-2: #E7D3A8; --sp-cream: #F3E6CC;
  background: var(--sp-bg);
}
.svc-page .sp-card.pkg { --c: #C2410C; --t: #FBF1EA; }
.svc-page .sp-card.eng { --c: #1E3A8A; --t: #EEF1F8; }
.svc-page .sp-card.brk { --c: #9F1239; --t: #F9EEF1; }
.svc-page .sp-card.bat { --c: #065F46; --t: #EBF4F0; }
.svc-page .sp-card.ac  { --c: #0F5F6B; --t: #EAF3F4; }
.svc-page .sp-card.ele { --c: #8A6A1F; --t: #F7F2E6; }
.svc-page .sp-card.dia { --c: #4C1D95; --t: #F1EEF8; }
.svc-page .sp-card.pnt { --c: #831843; --t: #F8EEF2; }
.sp-eyebrow { font: 600 12px var(--pub-font); letter-spacing: .12em; text-transform: uppercase; color: var(--sp-gold); }
.sp-trust { background: linear-gradient(135deg, #1A1A1A, #2E2820); color: var(--sp-cream); border-radius: 24px; padding: 24px; margin-bottom: 18px; }
.sp-trust-head { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(243,230,204,.15); }
.sp-seal { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-2)); color: #1A1A1A; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.sp-trust-head b { font: 700 20px var(--pub-display); color: #fff; display: block; }
.sp-trust-head small { color: rgba(243,230,204,.7); font-size: 13.5px; }
.sp-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 16px; }
.sp-tr { display: flex; gap: 12px; }
.sp-tr .ic { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: rgba(243,230,204,.1); color: var(--sp-gold-2); display: flex; align-items: center; justify-content: center; }
.sp-tr .ic svg { width: 20px; height: 20px; }
.sp-tr b { color: #fff; font-size: 15px; display: block; margin-bottom: 3px; }
.sp-tr p { color: rgba(243,230,204,.75); font-size: 13.5px; line-height: 1.5; margin: 0; }
.sp-tr strong { color: var(--sp-gold-2); }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sp-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--sp-line); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.sp-card::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.sp-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--t); }
.sp-ic { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 65%, #000)); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 30%, transparent); }
.sp-ic svg { width: 23px; height: 23px; }
.sp-card b { position: relative; z-index: 1; font: 700 18px var(--pub-display); color: var(--pub-ink); }
.sp-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--pub-mid); }
.sp-card li::before { content: '•'; color: var(--c); font-weight: 800; margin-right: 6px; }
.sp-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pub-mid); background: var(--t); border-radius: 12px; padding: 10px 12px; }
.sp-why span { display: block; font: 700 11px var(--pub-font); letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin-bottom: 3px; }
.sp-head { padding: 30px 0 14px; }
.sp-head h3 { font: 700 26px/1.2 var(--pub-display); letter-spacing: -.01em; margin: 6px 0 0; color: var(--pub-ink); }
.sp-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sp-how li { background: #fff; border: 1px solid var(--sp-line); border-radius: 18px; padding: 18px; }
.sp-how span { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #1A1A1A, #3A3229); color: var(--sp-cream); font: 700 14px var(--pub-font); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sp-how b { display: block; font: 700 16px var(--pub-display); margin-bottom: 4px; }
.sp-how p { color: var(--pub-mid); font-size: 13.5px; margin: 0; }
.sp-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-pf { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 22px; text-decoration: none; color: var(--pub-ink); border: 1px solid var(--sp-line); background: #fff; }
.sp-pf .big { font: 700 48px/1 var(--pub-display); letter-spacing: -.03em; }
.sp-pf b { display: block; font: 700 17px var(--pub-display); margin-top: 2px; }
.sp-pf small { color: var(--pub-mid); font-size: 13px; }
.sp-pf.google { background: linear-gradient(135deg, #1A1A1A, #2E2820); color: #fff; border: 0; }
.sp-pf.google .big { color: var(--sp-gold-2); }
.sp-pf.google small { color: rgba(243,230,204,.75); }
.sp-pf.insta .big { background: linear-gradient(90deg, #C2410C, #9F1239, #4C1D95); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-stars { color: var(--sp-gold); letter-spacing: 2px; }
.sp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.sp-rv { background: #fff; border: 1px solid var(--sp-line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.sp-rv q { font-size: 14.5px; line-height: 1.55; }
.sp-rv small { color: var(--pub-low); }
.sp-faq { margin: 30px 0 10px; background: #fff; border: 1px solid var(--sp-line); border-radius: 22px; padding: 22px 24px; }
.sp-faq h3 { font: 700 24px var(--pub-display); margin: 6px 0 10px; }
.sp-faq details { border-top: 1px solid var(--sp-line); padding: 14px 0; }
.sp-faq summary { font: 600 15px var(--pub-font); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: '+'; color: var(--sp-gold); font-weight: 700; font-size: 18px; line-height: 1; }
.sp-faq details[open] summary::after { content: '–'; }
.sp-faq p { color: var(--pub-mid); font-size: 14px; line-height: 1.55; margin: 8px 0 0; }
@media (max-width: 860px) {
  .sp-trust { padding: 18px 16px; border-radius: 20px; }
  .sp-trust-grid, .sp-grid, .sp-proof, .sp-reviews { grid-template-columns: 1fr; }
  .sp-trust-head b { font-size: 17px; }
  .sp-card ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .sp-how { grid-template-columns: 1fr 1fr; }
  .sp-head h3 { font-size: 22px; }
  .sp-pf .big { font-size: 40px; }
  .sp-faq { padding: 18px 16px; }
}

/* ===== About Us — same premium look as Our Services (inside .svc-page) ===== */
.ab-hero { padding: 36px 0 10px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; }
.ab-title { font: 700 46px/1.06 var(--pub-display); letter-spacing: -.03em; margin: 10px 0 0; color: var(--pub-ink); }
.ab-lead { color: var(--pub-mid); font-size: 16.5px; line-height: 1.6; margin: 14px 0 0; max-width: 560px; }
.ab-since { background: linear-gradient(135deg, #1A1A1A, #2E2820); border-radius: 26px; padding: 30px; color: var(--sp-cream); position: relative; overflow: hidden; }
.ab-since::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 30px solid rgba(231,211,168,.08); }
.ab-since small { color: rgba(243,230,204,.7); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ab-since b { display: block; font: 700 76px/1 var(--pub-display); color: var(--sp-gold-2); letter-spacing: -.04em; margin: 8px 0 6px; }
.ab-since p { font-size: 15px; line-height: 1.55; max-width: 320px; margin: 0; }
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.ab-st { background: #fff; border: 1px solid var(--sp-line); border-radius: 18px; padding: 18px 20px; }
.ab-st b { display: block; font: 700 30px var(--pub-display); letter-spacing: -.02em; color: var(--pub-ink); }
.ab-st b.g { color: var(--sp-gold); }
.ab-st span { color: var(--pub-mid); font-size: 13px; }
.ab-story { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ab-story p { color: var(--pub-mid); font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; }
.ab-quote { background: #fff; border: 1px solid var(--sp-line); border-left: 4px solid var(--sp-gold); border-radius: 18px; padding: 22px 24px; font-size: 17px; line-height: 1.55; align-self: start; color: var(--pub-ink); }
.ab-quote small { display: block; color: var(--pub-low); font-size: 13px; margin-top: 10px; }
.ab-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ab-val { background: #fff; border: 1px solid var(--sp-line); border-radius: 20px; padding: 20px; }
.ab-val .ic { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #1A1A1A, #3A3229); color: var(--sp-gold-2); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ab-val .ic svg { width: 21px; height: 21px; }
.ab-val b { display: block; font: 700 16px var(--pub-display); margin-bottom: 4px; }
.ab-val p { color: var(--pub-mid); font-size: 13.5px; line-height: 1.5; margin: 0; }
.ab-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-fd { background: #fff; border: 1px solid var(--sp-line); border-radius: 22px; padding: 22px; display: flex; gap: 16px; align-items: center; }
.ab-av { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--sp-gold), #8A6A1F); color: #fff; font: 700 24px var(--pub-display); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ab-fd b { font: 700 19px var(--pub-display); display: block; }
.ab-fd small { color: var(--sp-gold); font-weight: 600; font-size: 13px; }
.ab-fd p { color: var(--pub-mid); font-size: 13.5px; margin: 4px 0 0; }
.ab-visit { margin: 40px 0 20px; background: linear-gradient(135deg, #1A1A1A, #2E2820); color: var(--sp-cream); border-radius: 26px; padding: 30px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; }
.ab-visit h3 { color: #fff; font: 700 28px/1.15 var(--pub-display); margin: 6px 0 0; }
.ab-visit p { color: rgba(243,230,204,.78); margin: 8px 0 0; line-height: 1.55; }
.ab-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ab-btn { height: 48px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; font: 600 15px var(--pub-font); text-decoration: none; border: 0; cursor: pointer; }
.ab-btn.pri { background: var(--pub-accent); color: #fff; }
.ab-btn.sec { background: rgba(243,230,204,.1); color: var(--sp-cream); border: 1px solid rgba(243,230,204,.25); }
@media (max-width: 860px) {
  .ab-hero, .ab-story, .ab-visit, .ab-founders { grid-template-columns: 1fr; }
  .ab-title { font-size: 34px; }
  .ab-since b { font-size: 60px; }
  .ab-stats, .ab-values { grid-template-columns: 1fr 1fr; }
  .ab-btns { justify-content: flex-start; }
  .ab-visit { padding: 22px 18px; }
}

/* ===== Employees (careers) page v2 — premium look; the form opens in a popup ===== */
#careersSection { --sp-bg: #FAF8F4; --sp-line: #ECE6DA; --sp-gold: #B08D57; --sp-gold-2: #E7D3A8; --sp-cream: #F3E6CC; background: var(--sp-bg); }
.cr-hero { margin-top: 28px; background: linear-gradient(135deg, #1A1A1A, #2E2820); border-radius: 28px; padding: 40px; color: var(--sp-cream); display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; position: relative; overflow: hidden; }
.cr-hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; border: 40px solid rgba(231,211,168,.07); pointer-events: none; }
.cr-hero h1 { font: 700 44px/1.06 var(--pub-display); letter-spacing: -.03em; color: #fff; margin: 10px 0 0; }
.cr-hero p { color: rgba(243,230,204,.8); font-size: 16px; line-height: 1.6; margin: 12px 0 0; max-width: 520px; }
.cr-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; position: relative; z-index: 1; }
.cr-btn { height: 48px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--pub-font); text-decoration: none; border: 0; cursor: pointer; }
.cr-btn.pri { background: var(--pub-accent); color: #fff; }
.cr-btn.wa { background: #1FA855; color: #fff; }
.cr-chips { display: grid; gap: 10px; position: relative; z-index: 1; }
.cr-chip { background: rgba(243,230,204,.08); border: 1px solid rgba(243,230,204,.18); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.cr-chip b { font: 700 22px var(--pub-display); color: var(--sp-gold-2); min-width: 70px; }
.cr-chip span { font-size: 14px; }
.cr-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cr-role { background: #fff; border: 1px solid var(--sp-line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cr-role.other { background: transparent; border-style: dashed; }
.cr-open { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--pub-font); color: #16A34A; letter-spacing: .04em; text-transform: uppercase; }
.cr-open i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.cr-role b { font: 700 18px var(--pub-display); }
.cr-role p { color: var(--pub-mid); font-size: 13.5px; line-height: 1.5; margin: 0; }
.cr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-tags span { background: var(--sp-bg); border: 1px solid var(--sp-line); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--pub-mid); }
.cr-apply { margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0; font: 600 14px var(--pub-font); color: var(--pub-accent); cursor: pointer; }
.cr-closed { background: #fff; border: 1px dashed var(--sp-line); border-radius: 20px; padding: 22px; margin-top: 30px; }
.cr-closed b { font: 700 18px var(--pub-display); display: block; }
.cr-closed p { color: var(--pub-mid); margin: 6px 0 10px; }
.cr-path { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); position: relative; }
.cr-path::before { content: ''; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--sp-gold-2), var(--sp-gold)); }
.cr-step { text-align: center; padding: 0 10px; position: relative; }
.cr-step span { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #1A1A1A, #3A3229); color: var(--sp-gold-2); font: 700 18px var(--pub-display); display: inline-flex; align-items: center; justify-content: center; border: 4px solid var(--sp-bg); }
.cr-step b { display: block; font: 700 16px var(--pub-display); margin-top: 10px; }
.cr-step p { color: var(--pub-mid); font-size: 13px; line-height: 1.45; margin: 4px 0 0; }
.cr-bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cr-ben { background: #fff; border: 1px solid var(--sp-line); border-radius: 20px; padding: 20px; display: flex; gap: 14px; }
.cr-ben .ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, #1A1A1A, #3A3229); color: var(--sp-gold-2); display: flex; align-items: center; justify-content: center; }
.cr-ben .ic svg { width: 20px; height: 20px; }
.cr-ben b { display: block; font: 700 15.5px var(--pub-display); margin-bottom: 3px; }
.cr-ben p { color: var(--pub-mid); font-size: 13px; line-height: 1.5; margin: 0; }
.cr-hire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cr-h { background: #fff; border: 1px solid var(--sp-line); border-radius: 18px; padding: 18px; }
.cr-h small { font: 700 11px var(--pub-font); color: var(--sp-gold); letter-spacing: .08em; }
.cr-h b { display: block; font: 700 16px var(--pub-display); margin: 6px 0 4px; }
.cr-h p { color: var(--pub-mid); font-size: 13px; line-height: 1.45; margin: 0; }
.cr-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 30px; }
.cr-stories { display: grid; gap: 12px; }
.cr-story { background: #fff; border: 1px solid var(--sp-line); border-left: 4px solid var(--sp-gold); border-radius: 18px; padding: 22px; }
.cr-story q { font-size: 16px; line-height: 1.55; }
.cr-story small { display: block; color: var(--pub-low); margin-top: 10px; }
.cr-refer { background: linear-gradient(135deg, #FFF1EA, #FBE3D6); border-radius: 18px; padding: 22px; }
.cr-refer b { font: 700 18px var(--pub-display); display: block; margin-bottom: 6px; }
.cr-refer p { color: #7A3A1C; font-size: 14px; line-height: 1.5; margin: 0; }
.cr-pop { position: fixed; inset: 0; background: rgba(17,17,17,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 400; }
.cr-pop[hidden] { display: none; }
.cr-sheet { position: relative; background: #fff; border-radius: 24px; padding: 26px; width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.cr-sheet h3 { font: 700 26px var(--pub-display); margin: 6px 0 14px; }
.cr-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sp-bg); font-size: 20px; cursor: pointer; z-index: 1; }
.cr-form { padding: 0; }
.cr-photo { height: 60px; border: 1.5px dashed var(--sp-gold-2); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--sp-gold); font: 600 13px var(--pub-font); background: #FFFCF6; cursor: pointer; }
body.cr-pop-open { overflow: hidden; }
@media (max-width: 860px) {
  .cr-hero { grid-template-columns: 1fr; padding: 26px 20px; border-radius: 22px; }
  .cr-hero h1 { font-size: 32px; }
  .cr-roles, .cr-bens, .cr-two { grid-template-columns: 1fr; }
  .cr-hire { grid-template-columns: 1fr 1fr; }
  .cr-path { grid-template-columns: 1fr; gap: 14px; }
  .cr-path::before { left: 27px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .cr-step { text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 0; }
  .cr-step b { margin-top: 0; } .cr-step p { grid-column: 2; margin-top: 0; }
  .cr-pop { align-items: flex-end; padding: 0; }
  .cr-sheet { border-radius: 22px 22px 0 0; max-height: 90vh; padding: 22px 16px; }
}

/* ===== Social Media page ===== */
.sc-follow { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 12px; }
.sc-follow2 { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 12px; margin-top: 12px; }
.sc-card { border-radius: 22px; padding: 22px; text-decoration: none; color: #fff; display: flex; flex-direction: column; gap: 10px; min-height: 170px; }
.sc-card .ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-card .ic svg { width: 24px; height: 24px; }
.sc-card b { font: 700 32px var(--pub-display); letter-spacing: -.02em; }
.sc-card span { font-size: 14px; opacity: .92; }
.sc-card .go { margin-top: auto; align-self: flex-start; background: #fff; color: var(--pub-ink); font: 600 13.5px var(--pub-font); padding: 8px 14px; border-radius: 999px; opacity: 1; }
.sc-card.ig { background: linear-gradient(135deg, #833AB4, #E1306C 55%, #F77737); }
.sc-card.fb { background: linear-gradient(135deg, #1877F2, #0B5ED7); }
.sc-card.wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.sc-card.yt { background: linear-gradient(135deg, #FF0000, #B00000); }
.sc-card.wach { background: linear-gradient(135deg, #128C7E, #075E54); }
.sc-card.small { min-height: 0; flex-direction: row; align-items: center; }
.sc-card.small b { font-size: 18px; display: block; }
.sc-card.small .go { margin: 0 0 0 auto; align-self: center; }
.sc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sc-post { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #ddd; display: block; }
.sc-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-post span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font: 600 12px var(--pub-font); }
.sc-more { display: inline-flex; margin-top: 12px; font: 600 14px var(--pub-font); color: #C13584; text-decoration: none; }
.sc-revs { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 12px; }
.sc-rv { background: #fff; border: 1px solid var(--sp-line); border-radius: 20px; padding: 20px 22px; display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit; }
.sc-rv .big { font: 700 42px/1 var(--pub-display); letter-spacing: -.03em; }
.sc-rv b { display: block; font: 700 16px var(--pub-display); }
.sc-rv small { color: var(--pub-mid); font-size: 13px; }
.sc-rv .go { margin-left: auto; font: 600 13px var(--pub-font); color: var(--pub-accent); white-space: nowrap; }
.sc-rv.g .big { color: #4285F4; }
.sc-rv.jd .big { color: #FF6E00; }
.sc-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin: 30px 0 20px; }
.sc-two.one { grid-template-columns: 1fr; }
.sc-offer { background: linear-gradient(135deg, #1A1A1A, #2E2820); color: var(--sp-cream); border-radius: 22px; padding: 24px; }
.sc-offer b { display: block; font: 700 24px var(--pub-display); color: #fff; margin: 8px 0 6px; }
.sc-offer p { color: rgba(243,230,204,.8); font-size: 14.5px; line-height: 1.5; margin: 0; max-width: 460px; }
.sc-btn { display: inline-flex; align-self: flex-start; margin-top: 14px; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--pub-accent); color: #fff; align-items: center; gap: 8px; font: 600 14px var(--pub-font); text-decoration: none; border: 0; cursor: pointer; }
.sc-btn.wa { background: #25D366; margin-top: 0; }
.sc-share { background: #fff; border: 1px solid var(--sp-line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.sc-share b { font: 700 20px var(--pub-display); }
.sc-share p { color: var(--pub-mid); font-size: 14px; line-height: 1.5; margin: 0; }
.sc-hash { font-weight: 700; color: #C13584; }
@media (max-width: 860px) {
  .sc-follow, .sc-follow2, .sc-revs, .sc-two { grid-template-columns: 1fr; }
  .sc-card { min-height: 0; }
  .sc-card b { font-size: 26px; }
  .sc-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sc-rv { flex-wrap: wrap; } .sc-rv .go { margin-left: 0; }
}

/* ===== Owner: Settings → Stores / Careers Page, and Job Applications ===== */
.owner-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 8px 0 6px; }
.owner-photo { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #eee; }
.owner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.owner-photo .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.owner-photo .mv { position: absolute; bottom: 6px; right: 6px; height: 24px; padding: 0 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); font-size: 11px; font-weight: 700; cursor: pointer; }
.owner-photo .cv { position: absolute; left: 6px; bottom: 6px; background: var(--amber); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; letter-spacing: .04em; }
.owner-photo-add { aspect-ratio: 4/3; border-radius: 12px; border: 1.5px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; cursor: pointer; color: inherit; background: transparent; }
.owner-photo-add input { display: none; }
.owner-photos + .cat-mini-label { margin-bottom: 14px; }
.owner-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.owner-hours .day { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.owner-hours .day b { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 64px; }
.owner-hours .day .t { flex: 1; max-width: 220px; }
.owner-hours .day b label { display: flex; gap: 4px; align-items: center; font-weight: 500; font-size: 11.5px; }
.owner-hours .day .t { display: flex; gap: 4px; align-items: center; }
.owner-hours .day input[type="time"] { width: 100%; min-width: 0; padding: 4px; font-size: 12px; }
.owner-hours .day.off .t { opacity: .35; pointer-events: none; }
.owner-store-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; cursor: pointer; }
.owner-store-row img, .owner-store-row .ph { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; background: #ddd; flex-shrink: 0; }
.owner-store-row b { display: block; font-size: 14px; }
.owner-store-row small { opacity: .65; font-size: 12px; }
.owner-store-row .arrow { margin-left: auto; font-size: 20px; opacity: .5; }
.job-app { display: grid; grid-template-columns: 1.3fr 1.2fr auto; gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.job-app b { font-size: 14.5px; display: block; }
.job-app small { opacity: .6; font-size: 12px; }
.job-app .m { font-size: 13px; opacity: .85; line-height: 1.45; }
.job-app .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.job-app .acts a { text-decoration: none; }
.job-app select { width: auto; padding: 6px 8px; font-size: 12.5px; }
.job-status { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; margin-top: 4px; }
.job-status.s-new { background: #FFF1EA; color: #C2410C; }
.job-status.s-called { background: #EFF6FF; color: #1D4ED8; }
.job-status.s-hired { background: #DCFCE7; color: #15803D; }
.job-status.s-rejected { background: #F3F4F6; color: #6B7280; }
.job-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.job-filter button { border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.job-filter button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 760px) {
  .job-app { grid-template-columns: 1fr; gap: 6px; }
  .job-app .acts { justify-content: flex-start; }
}
/* ===== Home: "Select your car" button, last car, steps line, offer posters ===== */
.car-pick-btn { margin-top: 26px; width: 100%; max-width: 470px; display: flex; align-items: center; gap: 14px; background: #111; color: #fff; border: 0; border-radius: 18px; padding: 16px 18px; cursor: pointer; text-align: left; box-shadow: 0 14px 30px rgba(17,17,17,.18); font-family: var(--pub-font); }
.car-pick-btn:hover { background: #000; }
.cpb-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--pub-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cpb-ic svg { width: 28px; height: 28px; }
.cpb-t { flex: 1; font: 800 18px var(--pub-font); }
.cpb-t small { display: block; font: 500 13px var(--pub-font); color: #BDBDBD; margin-top: 3px; }
.cpb-arr { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.last-car { max-width: 470px; margin-top: 10px; display: flex; align-items: center; gap: 6px; border: 1px solid #FFD9C9; background: #FFF8F5; border-radius: 14px; padding: 10px 14px; font: 500 13.5px var(--pub-font); color: var(--pub-mid); }
.last-car span { white-space: nowrap; }
.last-car b { color: var(--pub-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.last-car button { margin-left: auto; border: 0; background: none; color: var(--pub-accent); font: 700 13.5px var(--pub-font); cursor: pointer; white-space: nowrap; padding: 4px 0 4px 8px; }
.hero-steps { margin: 20px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 600 13.5px var(--pub-font); color: var(--pub-ink); }
.hero-steps b { width: 22px; height: 22px; border-radius: 50%; background: #FFF1EA; color: var(--pub-accent); font: 800 11.5px var(--pub-font); display: inline-flex; align-items: center; justify-content: center; margin-right: 5px; }
.hero-steps i { font-style: normal; color: #C9C9C6; }
.hero-inner.no-offers { grid-template-columns: 1fr; max-width: 760px; }
.hero-inner > .hero-copy, .hero-inner > .home-offers { min-width: 0; } /* a long car name must not widen the column */

.home-offers { justify-self: end; width: 100%; max-width: 420px; font-family: var(--pub-font); }
.home-offers h4 { margin: 0 0 10px; display: flex; align-items: baseline; justify-content: space-between; font: 800 17px var(--pub-font); color: var(--pub-ink); }
.home-offers h4 small { font: 600 12.5px var(--pub-font); color: var(--pub-low); }
.home-offers { --ho-max-h: min(560px, 72vh); }
.ho-track { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; border-radius: 20px; scrollbar-width: none; box-shadow: 0 18px 40px rgba(17,17,17,.16); background: #111; cursor: pointer; transition: height .35s ease; }
.ho-track::-webkit-scrollbar { display: none; }
/* each slide is as wide as the box; its media takes the video's / photo's own shape */
.ho-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; justify-content: center; }
.ho-media { position: relative; width: 100%; overflow: hidden; background: #000; }
.ho-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ho-slide[data-kind="photo"] .ho-media { background: var(--pub-surface); }
.ho-media > iframe, .ho-yt, .ho-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ho-yt:empty { display: none; }
.ho-media > .ho-cover { position: absolute; inset: 0; }
.ho-sound { position: absolute; left: 10px; bottom: 54px; z-index: 2; border: 0; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font: 700 12.5px var(--pub-font); padding: 8px 12px; cursor: pointer; }
.ho-kind { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.72); color: #fff; font: 700 10.5px var(--pub-font, Inter, sans-serif); padding: 3px 7px; border-radius: 6px; }
.ho-video { position: relative; background: #000; overflow: hidden; }
.ho-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ho-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ho-track > .ho-cover, .ho-edit-item > .ho-cover, .ho-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-align: center; padding: 20px; }
.ho-cover.ig { background: linear-gradient(135deg, #7638FA 0%, #D300C5 35%, #FF0069 65%, #FFB800 100%); }
.ho-cover.fb { background: linear-gradient(135deg, #1877F2 0%, #0A4FB8 100%); }
.ho-cover-logo { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.ho-cover-logo svg { width: 30px; height: 30px; }
.ho-cover b { font: 800 20px var(--pub-font, Inter, sans-serif); }
.ho-cover small { font: 500 13px var(--pub-font, Inter, sans-serif); opacity: .9; }
.ho-cover .ho-play { position: static; margin: 12px 0 0; background: rgba(255,255,255,.95); color: #111; }
.ho-video iframe { background: #fff; }
.ho-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,0,0,.92); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.35); pointer-events: none; }
.ho-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; min-height: 7px; }
.ho-dots span { width: 7px; height: 7px; border-radius: 99px; background: #D6D6D3; transition: width .2s; }
.ho-dots span.on { width: 22px; background: var(--pub-accent); }
.ho-btn { margin-top: 12px; width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--pub-ink); background: #fff; color: var(--pub-ink); font: 700 14px var(--pub-font); cursor: pointer; }

/* Owner: Settings → Home Page Offers */
.ho-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ho-edit-item > img, .ho-edit-item > .ho-video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.ho-edit-item > img, .ho-edit-item > .ho-video:not(.ho-cover) { display: block; background: var(--pub-surface, #F4F3F0); }
.ho-edit-item > .ho-cover { padding: 10px; gap: 3px; }
.ho-edit-item .ho-cover-logo { width: 38px; height: 38px; border-radius: 12px; }
.ho-edit-item .ho-cover-logo svg { width: 22px; height: 22px; }
.ho-edit-item .ho-cover b { font-size: 14px; }
.ho-edit-item .ho-cover small { font-size: 11px; }
.ho-edit-item .ho-cover .ho-play { margin: 6px 0 0; }
.ho-edit-item .ho-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 17px; }
.ho-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ho-add input[type="url"] { flex: 1; min-width: 200px; height: 40px; border: 1px solid var(--line, #E6E6E4); border-radius: 10px; padding: 0 12px; font-size: 14px; }
.ho-or { font-size: 12.5px; color: #8E8E8E; }
.ho-edit-btns { display: flex; gap: 6px; margin-top: 6px; }
.ho-edit-btns .cat-btn-secondary { padding: 6px 9px; font-size: 12px; }

/* ===== "Select your car" picker — one question per screen ===== */
body.cp-open { overflow: hidden; }
.car-picker { position: fixed; inset: 0; z-index: 1200; background: rgba(17,17,17,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cp-sheet { background: #fff; width: 100%; max-width: 580px; height: min(740px, 90vh); border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; font-family: var(--pub-font); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.cp-bar { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.cp-bar h3 { flex: 1; margin: 0; font: 800 19px var(--pub-font); letter-spacing: -.01em; color: var(--pub-ink); }
.cp-back, .cp-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--pub-surface); font-size: 20px; line-height: 1; cursor: pointer; color: var(--pub-ink); flex-shrink: 0; }
.cp-x { font-size: 15px; }
#carPicker .cp-back { position: static; width: 38px; height: 38px; border-radius: 50%; background: var(--pub-surface); color: var(--pub-ink); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.cp-n { font: 600 12.5px var(--pub-font); color: var(--pub-low); }
.cp-prog { height: 4px; background: var(--pub-surface); margin: 0 18px; border-radius: 9px; overflow: hidden; }
.cp-prog i { display: block; height: 100%; background: var(--pub-accent); border-radius: 9px; transition: width .25s; }
.cp-sofar { margin: 12px 18px 0; font: 500 13px var(--pub-font); color: var(--pub-mid); min-height: 4px; }
.cp-sofar b { color: var(--pub-ink); font-weight: 700; }
.cp-find { margin: 12px 18px 2px; position: relative; }
.cp-find input { width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--pub-line); padding: 0 12px 0 40px; font: 600 15px var(--pub-font); background: #fff; color: var(--pub-ink); }
.cp-find input:focus { outline: none; border-color: var(--pub-ink); }
.cp-find svg { position: absolute; left: 12px; top: 13px; width: 20px; height: 20px; color: var(--pub-low); }
.cp-grid { flex: 1; overflow: auto; padding: 12px 18px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start; }
.cp-grid-fuel { grid-template-columns: repeat(2, 1fr); }
.cp-tile { background: #fff; border: 1.5px solid var(--pub-line); border-radius: 16px; padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 700 13px var(--pub-font); color: var(--pub-ink); cursor: pointer; text-align: center; min-height: 48px; }
.cp-tile:hover { border-color: #BDBDBA; }
.cp-tile.on { border-color: var(--pub-ink); background: var(--pub-ink); color: #fff; }
.cp-tile[hidden] { display: none; }
.cp-tile .make-logo { border-radius: 50%; }
.cp-grid-fuel .cp-tile { padding: 18px 8px; font-size: 15px; }
.cp-em { font-size: 30px; line-height: 44px; }
.cp-grid-year .cp-tile { padding: 12px 4px; font-size: 14px; flex-direction: row; justify-content: center; }
.cp-sub { grid-column: 1 / -1; margin: 10px 0 0; font: 700 14px var(--pub-font); color: var(--pub-ink); }
.cp-grid-year .cp-use { grid-column: span 2; padding: 15px 6px; font-size: 14.5px; }

/* the home form shows only its "Your details" part, on the last step */
#carPicker .search-card { display: none; }
#carPicker .search-card.cp-show { display: block; flex: 1; overflow: auto; background: none; box-shadow: none; border: 0; border-radius: 0; padding: 16px 18px 18px; margin: 0; max-width: none; }
#carPicker .search-card .search-card-tab, #carPicker .search-card h3, #carPicker .search-card .form-step-label, #carPicker .cp-vehicle-only { display: none !important; }
#carPicker .search-card .field-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
#carPicker .search-card .field > span { font-size: 12.5px; margin-bottom: 5px; }
#carPicker .search-card .field input { height: 50px; font-size: 16px; border-radius: 12px; padding: 0 14px; }
#carPicker .search-card .locate-btn { width: 50px; height: 50px; border-radius: 12px; }
#carPicker .search-card .find-rate-btn { height: 54px; font-size: 16.5px; border-radius: 14px; }
.cp-note { margin: 10px 0 0; text-align: center; font: 500 12px var(--pub-font); color: var(--pub-low); }

@media (max-width: 860px) {
  .car-pick-btn { margin-top: 18px; max-width: none; padding: 14px 16px; }
  .cpb-t { font-size: 17px; }
  .last-car { max-width: none; font-size: 13px; }
  .hero-steps { font-size: 12px; gap: 5px 7px; margin-top: 16px; }
  .hero-steps b { width: 19px; height: 19px; font-size: 10px; margin-right: 4px; }
  .home-offers { justify-self: stretch; max-width: none; }
  .car-picker { padding: 0; background: #fff; }
  .cp-sheet { max-width: none; height: 100%; border-radius: 0; box-shadow: none; }
  .cp-bar { padding: 14px 16px 10px; }
  .cp-bar h3 { font-size: 17.5px; }
  .cp-prog, .cp-sofar, .cp-find { margin-left: 16px; margin-right: 16px; }
  .cp-grid { grid-template-columns: repeat(3, 1fr); padding: 12px 16px 24px; }
  .cp-grid-fuel { grid-template-columns: repeat(2, 1fr); }
  .cp-grid-year { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  #carPicker .search-card.cp-show { padding: 14px 16px 18px; }
}

/* ===== Store cards: slim, modern ===== */
.store-card { border-radius: 20px; border-color: #ECEAE6; grid-template-columns: minmax(0, 340px) 1fr; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.05); }
.store-gal { --store-photo-max: 260px; }
.store-gal-thumbs { display: none; }
.store-gal-dots { display: flex; bottom: 10px; }
.store-gal-count { top: 10px; left: 10px; font-size: 11px; padding: 4px 8px; background: rgba(0,0,0,.5); }
.store-info { padding: 18px 22px; gap: 9px; justify-content: center; }
.store-info h2 { font-size: 20px; margin: 3px 0 0; letter-spacing: -.015em; }
.store-status { font-size: 12px; gap: 6px; }
.store-status i { width: 7px; height: 7px; box-shadow: 0 0 0 3px #DCFCE7; }
.store-status.closed i { box-shadow: 0 0 0 3px #FEE2E2; }
.store-row { font-size: 13.5px; line-height: 1.45; gap: 10px; }
.store-row svg { width: 16px; height: 16px; color: var(--pub-mid); }
.store-row > span { -webkit-line-clamp: 2; }
.store-hours { font-size: 13px; }
.store-mapbox > summary { font-size: 13px; }
.store-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.store-acts a { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; gap: 6px; }
.store-acts svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .store-card { border-radius: 18px; grid-template-columns: 1fr; }
  .store-gal { --store-photo-max: 230px; }
  .store-info { padding: 12px 14px 14px; gap: 7px; }
  .store-info h2 { font-size: 18px; }
  .store-row { font-size: 13px; }
  .store-mapbox { display: none; } /* Directions opens the map on a phone */
  .store-acts { display: grid; grid-template-columns: 1.15fr 1fr 1fr; margin-top: 4px; }
  .store-acts a { height: 40px; padding: 0 6px; }
}

/* ===== Uploaded photos are always shown whole (never cut) ===== */
.sc-post img, .owner-photo img, .owner-store-row img, .ho-edit-item > img,
.store-gal-thumbs button img, .pkg-photo-preview, .ho-media > img { object-fit: contain; }
.sc-post { background: #1b1b1b; }
.owner-photo, .owner-store-row img, .ho-edit-item > img { background: #F1EFEB; }
img.ab-av { object-fit: contain; border-radius: 16px; background: #F4F1EA; }
.ho-slide[data-kind="photo"] .ho-media { background: #F1EFEB; }
.job-photo-pop { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; display: block; background: #F1EFEB; }