/* Chairs R Yours — artifact theme (ported from the in-app build).
   Warm cream background, deep-purple brand color, Fraunces serif display
   type, soft rounded surfaces. One stylesheet carries all four faces:
   storefront, back office (/admin), delivery board (/delivery), and the
   customer App view (/my-orders). See BRAND.md for the full design spec. */
:root {
  --bg: #FAF5EA;            /* artifact cream */
  --surface: #FFFDF8;       /* warm card white */
  --band: #F3EBD7;          /* deeper cream: section bands, table heads */
  --ink: #2A1538;           /* deep purple-ink for text */
  --muted: #7A6C84;
  --line: #E7DCC4;
  --line-strong: #D8C9A6;
  --accent: #4B1163;        /* artifact deep purple */
  --accent-dark: #38094B;
  --accent-deep: #2E0A3E;   /* artifact footer purple (darker than brand) */
  --accent-soft: #F0E4F5;
  --gold: #C9973F;          /* cart badge accent */
  --ok: #1d7a3a;
  --danger: #b3261e;
  --shadow: 0 1px 2px rgba(75, 17, 99, 0.05), 0 10px 30px rgba(75, 17, 99, 0.08);
  --shadow-lift: 0 2px 6px rgba(75, 17, 99, 0.06), 0 18px 40px rgba(75, 17, 99, 0.12);
  --radius: 22px;
  --radius-sm: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.has-cart-bar { padding-bottom: 6.75rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
/* Long words, addresses, emails and URLs must wrap instead of pushing
   the page sideways on narrow screens. Only breaks when a line would
   otherwise overflow, so desktop rendering is unchanged. */
p, li, td, th, a { overflow-wrap: break-word; }
::selection { background: var(--accent-soft); }

/* ---------- Header: wordmark, face tabs, cart pill ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 245, 234, 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1120px; margin: 0 auto; padding: 0.7rem 1.5rem;
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
}
.site-header .brand {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 700; font-size: 1.6rem; line-height: 1.05;
  color: var(--accent); letter-spacing: -0.01em; margin-right: auto;
  min-width: 0;
}
.site-header .brand:hover { text-decoration: none; }
.face-tabs {
  display: flex; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow);
  max-width: 100%; min-width: 0; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.face-tabs::-webkit-scrollbar { display: none; }
.face-tab {
  padding: 0.5rem 1.15rem; border-radius: 999px; white-space: nowrap;
  color: var(--ink); font-weight: 600; font-size: 0.98rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.face-tab:hover { text-decoration: none; background: var(--accent-soft); }
.face-tab.active { background: var(--accent); color: #fff; }
.face-tab.active:hover { background: var(--accent-dark); }
.cart-pill {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--accent); color: #fff; box-shadow: var(--shadow);
  transition: background 0.15s ease;
}
.cart-pill:hover { background: var(--accent-dark); text-decoration: none; }
.cart-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 23px; height: 23px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff; border: 2px solid var(--bg);
  border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1;
}
/* ---------- Footer: deep-purple band, four columns (artifact port) ----
   Background is the artifact's --accent-deep (#2E0A3E), darker than the
   brand purple. The footer renders on every face, including the delivery
   board — it contains no prices, ever. */
.site-footer {
  background: var(--accent-deep); color: #fff;
  margin-top: 4rem;
}
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.5rem;
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
.footer-brand {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.5rem; font-weight: 600; line-height: 1.15; margin: 0;
}
.footer-text { color: rgba(255, 255, 255, 0.75); font-size: 0.875rem; margin: 0.5rem 0 0; }
.footer-heading {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.025em;
  text-transform: uppercase; margin: 0;
}
.footer-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.footer-list li { margin: 0.375rem 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
.site-footer a { color: rgba(255, 255, 255, 0.8); }
.site-footer a:hover { color: #fff; text-underline-offset: 2px; }
.footer-list li.footer-note { padding-top: 0.25rem; color: rgba(255, 255, 255, 0.6); }
.footer-phone {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.75rem; font-size: 1.125rem; font-weight: 600; color: #fff;
}
a.footer-phone { color: #fff; }
a.footer-phone:hover { color: #fff; text-decoration: none; }
.footer-phone svg { flex: none; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1rem 1.5rem; text-align: center;
  font-size: 0.75rem; color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 640px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-inner { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Sticky cart bar ---------- */
.cart-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem;
  z-index: 30; width: min(1120px, calc(100% - 2rem));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-lift); padding: 0.85rem 0.85rem 0.85rem 1.4rem;
  color: var(--ink);
}
.cart-bar:hover { text-decoration: none; }
/* The text block owns all the shrink: it may ellipsis, the CTA never does. */
.cart-bar-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; flex: 1 1 auto; }
.cart-bar-text strong { font-size: 1.12rem; font-weight: 700; }
.cart-bar-text strong, .cart-bar-text .cart-bar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-bar-sub { color: var(--muted); font-size: 0.92rem; }
.cart-bar-cta {
  flex: none; background: var(--accent); color: #fff;
  padding: 0.85rem 1.9rem; border-radius: 999px;
  font-size: 1.08rem; font-weight: 700;
}
.cart-bar:hover .cart-bar-cta { background: var(--accent-dark); }

/* ---------- Layout & type ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.5rem 0; }
main > section { margin: 0 0 3rem; }
/* Alternating deeper-cream section bands (storefront home, shop, delivery). */
main > section:not(.hero):not(.route-planner):not(.rentals-in):not(.value-props):nth-of-type(even) {
  background: var(--band); border-radius: 24px; padding: 1.75rem 1.5rem;
}
h1, h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  color: var(--ink);
}
h1 { font-size: 2.4rem; line-height: 1.12; font-weight: 700; margin: 0.3em 0 0.5em; }
h2 { font-size: 1.7rem; line-height: 1.2; font-weight: 700; margin: 1.4em 0 0.6em; }
main > section > h2:first-child { margin-top: 0; }
h3 { color: var(--ink); font-weight: 650; }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--muted); max-width: 42em; }

/* ---------- Rentals-in row & value props (storefront home) ---------- */
.rentals-in {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.75rem;
  padding: 0.9rem 0 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem;
}
.rentals-in-label {
  text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 0.82rem; font-weight: 700; color: #97889F;
}
.rentals-in a { color: var(--accent); font-weight: 600; font-size: 1.05rem; }
.value-props { margin-bottom: 1.5rem; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.32rem 0; font-size: 1.08rem;
}
.checks .check { color: var(--accent); font-weight: 800; flex: none; }

/* ---------- Hero (storefront home) ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem;
  align-items: center; padding: 1rem 0 0.5rem;
}
.hero h1 {
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #97889F; margin: 0 0 0.75rem;
}
.hero .display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5.2vw, 3.7rem); line-height: 1.05; font-weight: 700;
  color: var(--accent); margin: 0 0 1rem;
}
.hero .lede { font-size: 1.18rem; }
.hero .button { padding: 0.8rem 1.7rem; font-size: 1.05rem; }
.hero .test-banner { margin-top: 1.5rem; }
.hero-photo {
  width: 100%; height: 100%; min-height: 320px; object-fit: cover;
  border-radius: 28px; box-shadow: var(--shadow-lift); display: block;
}

/* ---------- Buttons ---------- */
.button, button.button, button.big {
  display: inline-block; background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 0.68rem 1.45rem; border-radius: 999px; font-size: 0.98rem; cursor: pointer;
  text-decoration: none; font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.button:hover, button.button:hover {
  background: var(--accent-dark); border-color: var(--accent-dark);
  text-decoration: none; box-shadow: var(--shadow);
}
.button.secondary, button.secondary {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  padding: 0.68rem 1.45rem; border-radius: 999px; cursor: pointer; font-weight: 600;
  text-decoration: none; display: inline-block; font-size: 0.98rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.button.secondary:hover, button.secondary:hover { background: var(--band); text-decoration: none; }
button.big { font-size: 1.1rem; padding: 1rem 1.6rem; width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Category filter tabs ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 1.5rem; }
.filter-tabs button {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 0.52rem 1.1rem;
  font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-tabs button:hover { background: var(--accent-soft); }
.filter-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Cards, product grid & gallery ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 1.4rem;
}
.card, .order-card, .delivery-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
}
.card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0 0 1.25rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card > :not(.product-img) { margin-left: 1.25rem; margin-right: 1.25rem; }
.card h3 { margin: 1rem 1.25rem 0.25rem; font-size: 1.08rem; }
.card p { margin-top: 0.35rem; margin-bottom: 0.35rem; }
/* Card photos show the WHOLE product, filling its frame: the source
   photos in public/images/products/ are pre-trimmed to their content
   (no baked-in empty margins), and the frame is a consistent 4/3 box
   on the warm surface white — the same white as the photos' own
   backgrounds, so product and frame blend seamlessly. object-fit:
   contain, never cropped. (The lightbox photo is contain too; only
   the "Real setups" scene shots keep cover, in .gallery below.)
   Small thumbnails (cart, delivery, admin rows) inherit contain and
   keep their fixed 44px size. */
.product-img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain;
  background: var(--surface); display: block;
}
.card .product-img { margin: 0; }
.product-img.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 700; color: var(--muted);
  background: var(--band); letter-spacing: 0.02em;
}
.product-img.small {
  width: 44px; height: 44px; border-radius: 10px; vertical-align: middle;
  font-size: 0.9rem; display: inline-flex;
}
img.product-img.small { display: inline-block; }
.price { font-size: 1.15rem; font-weight: 700; color: var(--accent); margin: 0.3rem 0; }
.price .basis, .contents { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
/* Member comparison price: a small gold MEMBER pill + the member rate,
   shown under the regular (charged) price on cards and in the lightbox. */
.member-price { margin: 0 0 0.3rem; font-size: 0.98rem; font-weight: 700; color: #8a5f10; display: flex; align-items: center; gap: 0.45rem; }
.member-tag {
  background: var(--gold); color: var(--ink); border-radius: 999px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.14rem 0.5rem; line-height: 1.3;
}
/* Cart comparison line under the subtotal. */
.member-savings { color: var(--muted); font-size: 0.98rem; margin: 0.15rem 0 0.6rem; }
.add-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: auto; padding-top: 0.8rem; }
.add-form button {
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 999px;
  padding: 0.55rem 1.15rem; font-weight: 600; font-size: 0.92rem; cursor: pointer;
  flex: none; white-space: nowrap;
  transition: background 0.15s ease;
}
.add-form button:hover { background: var(--accent-dark); }
.add-form input[type="number"] { width: 64px; }
.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.1rem;
}
.gallery figure {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow);
}
.gallery img { width: 100%; height: 210px; object-fit: cover; display: block; }
.gallery figcaption { padding: 0.65rem 1rem; color: var(--muted); font-size: 0.92rem; }

/* ---------- Quantity steppers ---------- */
.qty-label { font-weight: 600; font-size: 0.92rem; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; gap: 0.35rem; }
.step-btn {
  flex: none; width: 34px; height: 34px; border-radius: 999px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--accent);
  border: 1.5px solid var(--accent);
  font-family: inherit; font-size: 1.15rem; font-weight: 700; line-height: 1;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.step-btn:hover { background: var(--accent-soft); }
.step-btn:active { background: var(--accent); color: #fff; }
.stepper input[type="number"] {
  width: 56px; text-align: center; padding: 0.45rem 0.15rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ---------- Header menu button & dropdown ---------- */
.menu-wrap { position: relative; flex: none; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.1rem; box-shadow: var(--shadow);
  font-family: inherit; font-size: 0.98rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.menu-btn:hover { background: var(--accent-soft); }
.menu-icon { font-size: 1.05rem; line-height: 1; color: var(--accent); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
  width: 272px; max-width: calc(100vw - 2rem);
  display: flex; flex-direction: column; padding: 0.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-lift);
}
.menu-panel[hidden] { display: none; }
.menu-panel a { padding: 0.55rem 0.8rem; border-radius: 12px; color: var(--ink); font-weight: 500; }
.menu-panel a:hover { background: var(--accent-soft); text-decoration: none; }
.menu-panel a.menu-phone {
  margin-top: 0.35rem; border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px; padding-top: 0.8rem;
  color: var(--accent); font-weight: 700;
}

/* ---------- Gallery lightbox ---------- */
[data-lb-open] { cursor: zoom-in; }
.card [data-lb-open] { transition: transform 0.25s ease; }
.card [data-lb-open]:hover { transform: scale(1.04); }
.gallery figure img[data-lb-open] { transition: transform 0.25s ease; }
.gallery figure img[data-lb-open]:hover { transform: scale(1.03); }
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(42, 21, 56, 0.86); }
.lb-panel {
  position: relative; width: 100%; max-width: 860px;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--surface); border-radius: 24px;
  box-shadow: var(--shadow-lift); padding: 1.1rem 1.1rem 1rem;
}
.lb-slide { display: none; }
.lb-slide.active { display: block; }
.lb-photo {
  width: 100%; height: min(52vh, 480px); object-fit: contain;
  background: var(--band); border-radius: 16px; display: block;
}
.lb-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em;
}
.lb-caption { padding: 0.9rem 0.25rem 0; }
.lb-caption h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.45rem; margin: 0 0 0.15rem; color: var(--ink);
}
.lb-caption .price { margin: 0.1rem 0 0.4rem; }
.lb-setup-tag { color: var(--muted); margin: 0.2rem 0 0; }
.lb-form { margin-top: 0.4rem; padding-top: 0.2rem; }
.lb-close, .lb-arrow {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
  font-family: inherit; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lb-close { top: 0.7rem; right: 0.7rem; width: 40px; height: 40px; font-size: 1.5rem; line-height: 1; }
.lb-arrow { top: 32%; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; }
.lb-prev { left: 0.7rem; }
.lb-next { right: 0.7rem; }
.lb-close:hover, .lb-arrow:hover { background: var(--accent); color: #fff; }
.lb-thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.9rem 0.1rem 0.2rem; }
.lb-thumb {
  flex: none; width: 66px; height: 50px; padding: 0; overflow: hidden;
  border-radius: 10px; border: 2px solid var(--line); background: var(--band);
  font-family: inherit; color: var(--muted); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---------- Forms & tables ---------- */
input, select, textarea {
  padding: 0.55rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); max-width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(75, 17, 99, 0.16);
}
.table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
}
.table th, .table td { border-bottom: 1px solid var(--line); padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; }
.table th {
  background: var(--band); color: var(--muted); border-bottom: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.table tr:last-child td { border-bottom: 0; }
.total { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.form label { display: block; margin: 0.7rem 0; }
.form label.radio { display: flex; gap: 0.5rem; align-items: center; }
.form.inline { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
.form.inline label { margin: 0; }
fieldset, .delivery-fields {
  border: 1px solid var(--line); border-radius: var(--radius); margin: 1.25rem 0;
  background: var(--surface); padding: 1.1rem 1.35rem; box-shadow: var(--shadow);
}
legend { font-weight: 650; color: var(--ink); padding: 0 0.35rem; }

/* ---------- Notices, chips, timelines ---------- */
.test-banner {
  background: #fdf8e3; border: 1px solid #eadf9f; border-radius: 14px;
  padding: 0.8rem 1.1rem; color: #66590f; font-size: 0.95rem;
}
.success {
  background: #ecf7f0; border: 1px solid #c4e7d0; border-radius: 14px;
  padding: 0.8rem 1.1rem; color: #14532d;
}
.error { color: var(--danger); font-weight: 600; }
.chip {
  display: inline-block; background: var(--band); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.18rem 0.75rem; font-weight: 600; font-size: 0.88rem;
}
.chip.delivery { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.cancelled { background: #fbeae8; border-color: #f2cfcc; color: #8c2b21; }
.timeline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.timeline li {
  border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.85rem;
  color: var(--muted); background: var(--surface); font-size: 0.92rem;
}
.timeline li.done { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

/* ---------- Delivery board (no pricing is ever rendered here) ---------- */
.truck-list { list-style: none; padding: 0; }
.truck-list li { display: flex; gap: 0.6rem; align-items: center; padding: 0.35rem 0; }
.route-planner {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; margin: 1.25rem 0; box-shadow: var(--shadow);
}
.route-planner h2 { margin-top: 0; }
.route-list li { margin: 0.35rem 0; }
.progress { font-weight: 700; color: var(--ink); }

/* ---------- Back office ---------- */
.admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.admin-nav a {
  padding: 0.45rem 0.95rem; border-radius: 999px; text-decoration: none; font-weight: 500;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-nav a:hover { background: var(--band); color: var(--ink); text-decoration: none; }
.admin-nav a.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.admin-nav a.active:hover { background: var(--accent-dark); }
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 1rem 1.3rem; display: flex; flex-direction: column; box-shadow: var(--shadow);
  color: var(--muted); font-size: 0.92rem;
}
.stat-n {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.7rem; font-weight: 700; color: var(--accent);
}
.catalog-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 0.75rem 1.35rem 1.35rem; margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
.catalog-row label { display: inline-block; margin-right: 1rem; }
.qty-row { display: flex !important; gap: 0.6rem; align-items: center; }
.qty-row input { margin-left: auto; width: 80px; }

/* ---------- Google reviews (home only) ---------- */
.reviews-summary {
  display: flex; align-items: center; gap: 0.6rem 1.1rem; flex-wrap: wrap;
  margin: 0.75rem 0 1.5rem;
}
.reviews-score {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--accent);
}
.reviews-stars { color: var(--gold); font-size: 1.55rem; letter-spacing: 0.12em; line-height: 1; white-space: nowrap; }
h2 .reviews-stars { font-size: 1.2rem; vertical-align: 0.18em; }
.reviews-count { color: var(--muted); font-size: 1.05rem; }
.review-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.1rem;
}
.review-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
}
.review-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--accent); }
.review-card p { margin: 0; color: var(--muted); }
.reviews-attribution { color: var(--muted); font-size: 0.9rem; margin: 1rem 0 0; }

/* ---------- Member signup (home hero + checkout) ----------
   A gold "Become a Member" summary that unfolds (<details>, no JS)
   into a two-field form on a warm-white panel. */
.member-box { margin: 1.15rem 0 0.5rem; }
.member-copy {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  color: var(--muted); font-size: 0.98rem; margin: 0 0 0.7rem; max-width: 34rem;
}
.member-box .success { max-width: 34rem; margin: 0; }
.member-details > summary {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--gold); color: var(--ink); border: 1px solid var(--gold);
  padding: 0.68rem 1.45rem; border-radius: 999px;
  font-size: 0.98rem; font-weight: 700; cursor: pointer; list-style: none;
  transition: filter 0.15s ease;
}
.member-details > summary::-webkit-details-marker { display: none; }
.member-details > summary:hover { filter: brightness(0.95); }
.member-form {
  margin-top: 0.85rem; max-width: 26rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.35rem 1.15rem 1.1rem;
  box-shadow: var(--shadow);
}
.member-form label > input { display: block; width: 100%; margin-top: 0.35rem; }
.member-form button[type="submit"] { margin-top: 0.35rem; width: 100%; }

/* ---------- Contact form (home, last section before the footer) --- */
/* Anchored sections (#contact after a form submit, #how-it-works from
   the header menu) land below the sticky header instead of under it. */
main > section[id] { scroll-margin-top: 8.5rem; }
.contact-form { max-width: 38rem; }
.contact-form label > input, .contact-form label > textarea {
  display: block; width: 100%; margin-top: 0.35rem;
}
.optional { color: var(--muted); font-weight: 400; font-size: 0.88rem; }

/* ---------- Misc ---------- */
.city-links { columns: 2; }
.city-links a { color: var(--ink); font-weight: 500; text-decoration: none; }
.city-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.steps li { margin: 0.55rem 0; }
pre { white-space: pre-wrap; word-break: break-word; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ================= Responsive =================
   Breakpoints:
     ≤1024px  large tablets — 44px touch targets, tighter page padding
     ≤1000px  tablets — catalog/gallery grids settle to two columns
     ≤860px   small tablets — hero stacks, tables become scroll panels
     ≤768px   header takes two rows (tab bar gets its own full-width row)
     ≤640px   phones — forms stack, menu panel spans the viewport,
              lightbox goes full-screen, cart bar compacts
     ≤480px   small phones — grids go single-column, tab labels tighten */

/* ----- ≤1024px: touch targets & breathing room ----- */
@media (max-width: 1024px) {
  main { padding-left: 1.25rem; padding-right: 1.25rem; }
  .face-tab { min-height: 44px; display: inline-flex; align-items: center; }
  .filter-tabs button { min-height: 44px; }
  .step-btn { width: 44px; height: 44px; font-size: 1.3rem; }
  .stepper input[type="number"] { height: 44px; }
  .menu-btn { min-height: 44px; }
  .menu-panel a { min-height: 44px; display: flex; align-items: center; }
  .admin-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .button, button.button, button.big, .button.secondary, button.secondary { min-height: 44px; }
  a.button, a.button.secondary { display: inline-flex; align-items: center; justify-content: center; }
  .add-form button { min-height: 44px; }
  .lb-close { width: 44px; height: 44px; }
  .lb-arrow { width: 48px; height: 48px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
}

/* ----- ≤1000px: two-column grids on tablets ----- */
@media (min-width: 601px) and (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- ≤860px: hero stacks, tables scroll sideways ----- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-photo { min-height: 240px; max-height: 340px; }
  /* The table element itself becomes the scroll panel: columns keep
     readable widths and the page never scrolls sideways. */
  .table {
    display: block; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .table th, .table td { white-space: nowrap; }
  .table td pre { white-space: pre-wrap; }
}

/* ----- ≤768px: header takes two tidy rows ----- */
@media (max-width: 768px) {
  .header-inner { gap: 0.55rem 0.8rem; }
  /* Row 1 must always fit: the wordmark is the only flexible item on it
     (Menu button and cart pill are flex:none), so it absorbs any squeeze
     and the pill can never be pushed past the right edge. The badge's
     overhang is also pulled in so it stays inside the header's padding. */
  .site-header .brand { font-size: 1.42rem; flex: 1 1 auto; min-width: 0; }
  .cart-badge { right: -3px; top: -5px; }
  /* Row 1: wordmark + Menu + cart. Row 2: the face tab bar, full width
     (it scrolls sideways invisibly if the labels ever outgrow it). */
  .face-tabs { order: 3; flex: 1 1 100%; min-width: 0; }
}

/* ----- ≤640px: phones ----- */
@media (max-width: 640px) {
  .city-links { columns: 1; }
  main { padding: 1.25rem 1rem 0; }
  main > section:not(.hero):not(.route-planner):not(.rentals-in):not(.value-props):nth-of-type(even) { padding: 1.25rem 1rem; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.4rem; }
  .hero .display { font-size: 2.35rem; }
  .hero .lede { font-size: 1.08rem; }
  .reviews-score { font-size: 2.8rem; }
  .header-inner { padding: 0.6rem 1rem; gap: 0.55rem 0.7rem; position: relative; }
  .site-header .brand { font-size: 1.35rem; }
  .face-tab { padding: 0.45rem 0.9rem; font-size: 0.92rem; }
  .menu-btn { padding: 0.55rem 0.9rem; font-size: 0.92rem; }
  /* Menu panel is pinned to the header's width (i.e. the viewport)
     instead of hanging off the Menu button's corner. */
  .menu-wrap { position: static; }
  .menu-panel { left: 0.25rem; right: 0.25rem; width: auto; max-width: none; top: calc(100% + 8px); }
  /* Forms: fields stack full-width; 16px text so iOS doesn't auto-zoom. */
  input, select, textarea { font-size: 16px; }
  .form label:not(.qty-row) > input:not([type="radio"]):not([type="checkbox"]),
  .form label:not(.qty-row) > select,
  .form label:not(.qty-row) > textarea { display: block; width: 100%; margin-top: 0.35rem; }
  .form.inline { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .form.inline button { width: 100%; }
  fieldset, .delivery-fields { padding: 1rem; }
  .catalog-row { padding: 0.75rem 1rem 1.1rem; }
  .catalog-row label { display: block; margin: 0.65rem 0; }
  .qty-row { flex-wrap: wrap; row-gap: 0.4rem; }
  /* Cart page: the line-item table restacks into per-item blocks instead
     of joining the ≤860px sideways-scroll panel — header row hidden,
     thumbnail + name on the first line (long names wrap), unit price and
     line total sharing the second line, the quantity stepper on its own
     full row beneath. Nothing overlaps, nothing leaves the screen. */
  .cart-table { overflow: visible; }
  .cart-table, .cart-table tbody { display: block; width: 100%; }
  .cart-table tr {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 0.75rem; padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .cart-table tr:first-child { display: none; }
  .cart-table tr:last-child { border-bottom: 0; }
  .cart-table td {
    display: block; border-bottom: 0; padding: 0; white-space: normal;
  }
  .cart-table .cart-item {
    order: 1; flex: 1 1 100%; display: flex; align-items: center;
    gap: 0.65rem; margin-bottom: 0.45rem;
  }
  .cart-table .cart-item-name { font-weight: 600; min-width: 0; }
  .cart-table .cart-price { order: 2; color: var(--muted); font-size: 0.95rem; }
  .cart-table .cart-price::after { content: " each"; }
  .cart-table .cart-total {
    order: 3; margin-left: auto; font-weight: 700; font-size: 1.05rem;
  }
  .cart-table .cart-qty { order: 4; flex: 1 1 100%; margin-top: 0.6rem; }
  /* Delivery board breathing room; the advance button (button.big) is
     already width:100%, so it lands as a full-width thumb target. */
  .route-planner { padding: 1.1rem 1rem; }
  .delivery-card { padding: 1.1rem 1rem; }
  .route-planner .button { max-width: 100%; white-space: normal; text-align: center; }
  /* Stat cards pair up instead of stacking one per row. */
  .stat { flex: 1 1 42%; }
  /* Lightbox: truly full-screen, thumbs strip scrolls under the photo. */
  .lightbox { padding: 0; }
  .lb-panel {
    height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    border-radius: 0; padding: 0.9rem 0.9rem 0.75rem;
  }
  .lb-photo { height: 40vh; }
  .lb-arrow { top: 23%; }
  /* Sticky cart bar: fits a 360px screen, CTA never squeezed out. */
  .cart-bar { width: calc(100% - 1rem); bottom: 0.5rem; padding: 0.7rem 0.7rem 0.7rem 1rem; border-radius: 20px; gap: 0.6rem; }
  .cart-bar-text { min-width: 0; }
  .cart-bar-text strong { font-size: 0.98rem; }
  .cart-bar-sub { font-size: 0.8rem; }
  .cart-bar-cta { padding: 0.75rem 1.1rem; font-size: 0.98rem; }
  body.has-cart-bar { padding-bottom: 7rem; }
}

/* ----- ≤480px: small phones ----- */
@media (max-width: 480px) {
  .grid, .gallery { grid-template-columns: minmax(0, 1fr); }
  .face-tab { padding: 0.45rem 0.72rem; font-size: 0.9rem; }
  .hero .display { font-size: 2.15rem; }
  .lb-thumb { width: 58px; height: 46px; }
}