/* pages.css — per-page layout styles (home, shop, product, etc.)
   Populated in later per-page tasks. Uses tokens from tokens.css only. */

/* ================================================================== *
 * Breadcrumb — shared across pages (introduced here by Task 8's shop
 * page; reused verbatim by later PDP/blog/etc. breadcrumbs).
 * ================================================================== */
.breadcrumb{ margin:0; }
.breadcrumb ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  list-style:none; margin:0; padding:0;
  font-size:var(--text-xs); color:var(--color-muted);
}
.breadcrumb li{ display:flex; align-items:center; gap:6px; }
.breadcrumb li:not(:last-child)::after{ content:'›'; color:var(--color-line); }
.breadcrumb a{ color:var(--color-muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--color-primary); }
.breadcrumb li[aria-current="page"]{ color:var(--color-ink); font-weight:600; }

/* ================================================================== *
 * Shop page — Task 8: URL-state filters, bottom-sheet filter UI,
 * active-filter pills, category blurbs.
 * ================================================================== */
.shop-page{ padding-block:var(--space-3) var(--space-6); }

.shop-intro-copy{ color:var(--color-muted); max-width:70ch; }

.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--space-2);
}
.result-count{ margin:0; font-weight:600; font-size:var(--text-sm); color:var(--color-muted); }
.filter-toggle{ flex:0 0 auto; }

.pills:not([hidden]){
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;
}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 6px 4px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--color-primary) 8%, transparent);
  color:var(--color-primary); font-size:var(--text-xs); font-weight:600;
}
.pill-remove{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; min-height:auto; padding:0;
  border:0; border-radius:999px; background:transparent;
  color:var(--color-primary); font-size:var(--text-sm); line-height:1; cursor:pointer;
}
.pill-remove::after{ content:''; position:absolute; inset:-11px; }
.pill-remove:hover{ background:color-mix(in srgb, var(--color-primary) 16%, transparent); }

.category-blurb:not([hidden]){
  display:block; padding:var(--space-3); border-radius:var(--radius-md);
  background:var(--color-surface); border:1px solid var(--color-line);
}
.category-blurb-title{ margin:0 0 var(--space-1); }
.category-blurb-copy{ margin:0; color:var(--color-muted); }

.shop-empty:not([hidden]){
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  text-align:center; padding:var(--space-6) var(--space-2);
}
.shop-empty-title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); }
.shop-empty-copy{ margin:0; color:var(--color-muted); max-width:40ch; }
.shop-empty-actions{ display:flex; flex-direction:column; gap:var(--space-2); align-items:center; }
.shop-clear-link{ color:var(--color-primary); font-weight:600; text-decoration:underline; }

.shop-seo{ border-top:1px solid var(--color-line); padding-top:var(--space-3); }
.shop-seo-copy{ color:var(--color-muted); max-width:70ch; }
.shop-faq-link{ color:var(--color-primary); font-weight:600; text-decoration:none; }
.shop-faq-link:hover{ text-decoration:underline; }

/* Filter & Sort bottom sheet */
.filter-sheet-body{ display:flex; flex-direction:column; gap:var(--space-3); }
.filter-group{ border:0; margin:0; padding:0; }
.filter-group-title{
  padding:0; margin:0 0 var(--space-1);
  font-family:var(--font-display); font-weight:700; font-size:var(--text-sm);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--color-line); background:var(--color-surface);
  color:var(--color-ink); font-size:var(--text-sm); font-weight:600; cursor:pointer;
}
.chip[aria-pressed="true"]{
  background:var(--color-primary); border-color:var(--color-primary); color:var(--color-primary-ink);
}
.filter-sheet-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.filter-reset-link{ color:var(--color-muted); font-weight:600; text-decoration:underline; flex:0 0 auto; }
#filter-apply{ flex:1; }

@media (min-width:720px){
  .shop-toolbar{ flex-wrap:nowrap; }
}

/* ================================================================== *
 * Product page (PDP) — Task 9: scroll-snap gallery, bundle add-ons,
 * gift fields, sticky mobile buy bar. Mobile-first single column;
 * desktop (>=1024px) 2-col sidebar layout with a sticky info column.
 * ================================================================== */
.pdp-page{ padding-block:var(--space-3) var(--space-8); }

.pdp-layout{ display:flex; flex-direction:column; gap:var(--space-4); }

/* --- Gallery --- */
.pdp-media{ position:relative; }
.pdp-gallery-wrap{ position:relative; }
.pdp-gallery{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  border-radius:var(--radius-md); background:var(--color-surface);
  border:1px solid var(--color-line);
}
.pdp-gallery::-webkit-scrollbar{ display:none; }
.gallery-slide{
  flex:0 0 100%; scroll-snap-align:start;
  aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center;
}
.gallery-img{ width:100%; height:100%; object-fit:cover; }

.gallery-dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--space-2); }
.gallery-dot{
  position:relative;
  width:8px; height:8px; min-height:auto; padding:0;
  border-radius:999px; border:0; background:var(--color-line); cursor:pointer;
}
.gallery-dot::after{ content:''; position:absolute; inset:-18px; }
.gallery-dot.is-active{ background:var(--color-primary); }

.gallery-thumbs{ display:none; }

/* --- Info column --- */
.pdp-info{ min-width:0; }
.pdp-meta-row{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.pdp-badge{
  padding:3px 10px; border-radius:999px; background:var(--color-accent); color:var(--color-ink);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
}
.pdp-stock{ font-size:var(--text-sm); font-weight:600; color:var(--color-success); }
.pdp-stock.stock-limited{ color:var(--color-accent); }
.pdp-stock.stock-out{ color:var(--color-sale); }
.pdp-rating{ display:flex; align-items:center; gap:4px; font-size:var(--text-sm); color:var(--color-muted); }
.pdp-star{ color:var(--color-accent); }
.pdp-review-count{ color:var(--color-muted); }

.pdp-price{ display:flex; align-items:baseline; gap:var(--space-2); }
.pdp-now{ font-size:var(--text-3xl); font-weight:800; font-family:var(--font-display); }
.pdp-reg{ font-size:var(--text-md); color:var(--color-muted); text-decoration:line-through; }

.pdp-warranty-line{
  display:inline-flex; align-items:center; min-height:44px; width:fit-content; cursor:pointer;
  color:var(--color-primary); font-weight:600; font-size:var(--text-sm); text-decoration:underline;
}
.pdp-financing{ margin:0; font-size:var(--text-xs); color:var(--color-muted); }

.pdp-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.pdp-chip{
  padding:3px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--color-primary) 8%, transparent);
  color:var(--color-primary); font-size:var(--text-xs); font-weight:600;
}

.pdp-field-title{ padding:0; margin:0 0 var(--space-1); font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); }

.pdp-colors{ border:0; margin:0; padding:0; }
.pdp-color-row{ display:flex; gap:var(--space-1); flex-wrap:wrap; }
.pdp-color-option{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  min-height:44px; padding:0 14px; border:1px solid var(--color-line); border-radius:999px;
  font-size:var(--text-sm);
}
.pdp-color-option:has(input:checked){ border-color:var(--color-primary); color:var(--color-primary); font-weight:600; }
.pdp-color-option input{ width:18px; height:18px; min-height:auto; }

.pdp-gift-fields .field{ display:flex; flex-direction:column; gap:4px; }
.pdp-gift-fields label{ font-weight:600; font-size:var(--text-sm); }
.pdp-gift-fields input, .pdp-gift-fields textarea{
  border:1px solid var(--color-line); border-radius:var(--radius-sm);
  padding:0 var(--space-2); background:var(--color-surface); color:var(--color-ink);
}
.pdp-gift-fields textarea{ padding:var(--space-1) var(--space-2); min-height:88px; }
.pdp-gift-fields input:focus, .pdp-gift-fields textarea:focus{ outline:none; border-color:var(--color-primary); }

.pdp-bundle{ border:0; margin:0; padding:0; }
.bundle-list{ display:flex; flex-direction:column; gap:var(--space-1); }
.bundle-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-2); align-items:center;
  min-height:44px; padding:var(--space-2); border:1px solid var(--color-line); border-radius:var(--radius-sm); cursor:pointer;
}
.bundle-row input{ width:22px; height:22px; min-height:auto; }
.bundle-row-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bundle-row-name{ font-weight:600; font-size:var(--text-sm); }
.bundle-row-desc{ font-size:var(--text-xs); color:var(--color-muted); }
.bundle-row-price{ font-weight:700; font-size:var(--text-sm); white-space:nowrap; }

.pdp-ctas{ display:flex; flex-direction:column; }

.pdp-safety-note{
  margin:0; font-size:var(--text-sm); color:var(--color-ink);
  background:color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-radius:var(--radius-sm); padding:var(--space-2);
}

.pdp-trust{ display:flex; flex-direction:column; gap:var(--space-1); align-items:flex-start; }
.pdp-trust-astm{ height:36px; width:auto; }
.pdp-trust-rating{ margin:0; font-size:var(--text-sm); font-weight:600; }
.pdp-trust-stars{ color:var(--color-accent); }
.pdp-trust-repair{ margin:0; font-size:var(--text-sm); color:var(--color-muted); }

/* --- Accordion --- */
.pdp-accordion{ display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-4); }
.accordion-item{ border:1px solid var(--color-line); border-radius:var(--radius-sm); overflow:hidden; }
.accordion-item > summary{
  padding:var(--space-2); min-height:52px; display:flex; align-items:center;
  font-family:var(--font-display); font-weight:600; cursor:pointer; list-style:none;
}
.accordion-item > summary::-webkit-details-marker{ display:none; }
.accordion-item > summary::after{ content:'+'; margin-left:auto; color:var(--color-muted); }
.accordion-item[open] > summary::after{ content:'−'; }
.accordion-body{ padding:0 var(--space-2) var(--space-2); color:var(--color-muted); font-size:var(--text-sm); }
.specs-table{ display:flex; flex-direction:column; }
.spec-row{
  display:flex; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-1) 0; border-bottom:1px solid var(--color-line);
}
.spec-row:last-child{ border-bottom:0; }
.spec-label{ font-weight:600; color:var(--color-ink); }
.spec-value{ color:var(--color-muted); text-align:right; }

/* --- Recs rail --- */
.pdp-recs{ margin-top:var(--space-6); }
.pdp-recs-rail{
  display:flex; gap:var(--space-2); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:var(--space-1);
}
.pdp-recs-rail::-webkit-scrollbar{ display:none; }
.pdp-recs-item{ flex:0 0 62%; scroll-snap-align:start; }

/* --- 404 state --- */
.pdp-404{ padding-block:var(--space-6); text-align:center; align-items:center; }
.pdp-404 .grid{ width:100%; text-align:left; }

/* --- Sticky buy bar (mobile) --- */
.pdp-buy-bar{
  position:fixed; inset:auto 0 0 0; z-index:70;
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2); padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0));
  background:var(--color-surface); border-top:1px solid var(--color-line);
  box-shadow:0 -6px 20px rgba(16,24,40,.12);
  transform:translateY(100%); transition:transform .2s ease;
}
.pdp-buy-bar.is-visible{ transform:none; }
.buy-bar-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.buy-bar-price{ font-weight:800; font-size:var(--text-lg); }
.buy-bar-name{
  font-size:var(--text-xs); color:var(--color-muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.buy-bar-cta{ flex:0 0 auto; }

@media (min-width:720px){
  .gallery-thumbs{ display:flex; gap:var(--space-1); margin-top:var(--space-2); overflow-x:auto; }
  .gallery-thumb{
    flex:0 0 auto; width:72px; height:72px; padding:0; border-radius:var(--radius-sm);
    border:2px solid transparent; overflow:hidden; cursor:pointer; background:var(--color-bg);
  }
  .gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
  .gallery-thumb.is-active{ border-color:var(--color-primary); }
  .gallery-dots{ display:none; }
}

@media (min-width:1024px){
  .pdp-layout{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-6); align-items:start; }
  .pdp-info{ position:sticky; top:calc(var(--space-2) + 100px); }
  .pdp-buy-bar{ display:none; }
}

/* ================================================================== *
 * Checkout — Task 10: step pills, radio-card choices, sub-forms,
 * locked demo card, review blocks, and the sticky mobile summary.
 * Mobile-first single column; ≥1024px 2-col with a static sidebar.
 * ================================================================== */
.checkout-page{ padding-block:var(--space-3) var(--space-8); }
.checkout-sub{ margin:var(--space-1) 0 0; color:var(--color-muted); max-width:60ch; }

/* --- Step pills --- */
.steps{
  display:flex; gap:6px; list-style:none;
  margin:var(--space-3) 0 0; padding:0;
}
.step{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px 0; border-top:3px solid var(--color-line);
  font-size:var(--text-xs); color:var(--color-muted); text-align:center;
}
.step-num{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px;
  background:var(--color-line); color:var(--color-ink); font-weight:700;
}
.step.is-active{ border-top-color:var(--color-primary); color:var(--color-primary); font-weight:700; }
.step.is-active .step-num{ background:var(--color-primary); color:var(--color-primary-ink); }
.step.is-done{ border-top-color:var(--color-success); color:var(--color-success); }
.step.is-done .step-num{ background:var(--color-success); color:var(--color-primary-ink); }

/* --- Layout: summary toggle first (sticky) on mobile, sidebar ≥1024px --- */
.checkout-layout{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-3); }

.checkout-panel{ min-width:0; }
.panel-title{ margin:0; outline:none; }
.panel-copy{ margin:0; color:var(--color-muted); }

/* --- Forms --- */
.form-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.form-grid .field{ margin:0; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-weight:600; font-size:var(--text-sm); }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--color-line); border-radius:var(--radius-sm);
  padding:0 var(--space-2); background:var(--color-surface); color:var(--color-ink);
}
.field textarea{ padding:var(--space-1) var(--space-2); min-height:88px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--color-primary);
}
.field input[disabled]{ background:var(--color-bg); color:var(--color-muted); }
.field input[aria-invalid="true"]{ border-color:var(--color-sale); }
.field-error{ margin:0; color:var(--color-sale); font-size:var(--text-xs); font-weight:600; }

/* --- Radio choice cards (fulfilment + payment) --- */
.choice-list{ display:flex; flex-direction:column; gap:var(--space-1); }
.choice-card{
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-2); align-items:start;
  min-height:44px; padding:var(--space-2); cursor:pointer;
  border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-surface);
}
.choice-card input{ width:20px; height:20px; min-height:auto; margin-top:2px; }
.choice-card:has(input:checked){
  border-color:var(--color-primary);
  box-shadow:inset 0 0 0 1px var(--color-primary);
}
.choice-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.choice-title{ font-weight:700; }
.choice-copy{ color:var(--color-muted); font-size:var(--text-sm); }

.panel-box{
  border:1px solid var(--color-line); border-radius:var(--radius-md);
  padding:var(--space-2); background:var(--color-surface);
}
.subform-note{ margin:0; font-size:var(--text-sm); color:var(--color-muted); }
.deposit-note{
  margin:0; padding:var(--space-2); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--color-primary) 6%, transparent);
  font-size:var(--text-sm); font-weight:600; color:var(--color-primary);
}

/* Reserve hold radios */
.hold-group{ border:0; margin:0; padding:0; }
.hold-row{ display:flex; gap:var(--space-1); flex-wrap:wrap; }
.hold-option{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  min-height:44px; padding:0 14px; border:1px solid var(--color-line); border-radius:999px;
  font-size:var(--text-sm);
}
.hold-option:has(input:checked){ border-color:var(--color-primary); color:var(--color-primary); font-weight:600; }
.hold-option input{ width:18px; height:18px; min-height:auto; }

/* Locked demo card */
.pay-due{
  margin:0; padding:var(--space-2); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.pay-demo-note{ margin:0; font-size:var(--text-xs); color:var(--color-muted); font-style:italic; }
.pay-later-copy{ margin:0; color:var(--color-muted); }

/* --- Actions --- */
.checkout-actions{ display:flex; gap:var(--space-2); }
.checkout-actions .btn-primary{ flex:1; }
.place-note{ margin:0; font-size:var(--text-xs); color:var(--color-muted); text-align:center; }

/* --- Review (step 4) + order-confirmed detail blocks --- */
.review-block{
  position:relative; padding:var(--space-2); padding-right:64px;
  border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-surface);
}
.review-block h3{
  margin:0 0 4px; font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted);
}
.review-line{ margin:0; font-size:var(--text-sm); line-height:1.5; }
.review-edit{
  position:absolute; top:6px; right:6px;
  min-height:44px; padding:0 var(--space-2); border:0; background:none; cursor:pointer;
  color:var(--color-primary); font-weight:600; text-decoration:underline; font-size:var(--text-sm);
}
.review-items{ list-style:none; margin:0; padding:0; }
.review-item{
  display:flex; justify-content:space-between; gap:var(--space-2);
  padding:4px 0; font-size:var(--text-sm);
}
.review-totals{
  border:1px solid var(--color-line); border-radius:var(--radius-md);
  padding:var(--space-2); background:var(--color-surface);
}

.bump-row{
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-2); align-items:center;
  min-height:44px; padding:var(--space-2); cursor:pointer;
  border:1px dashed var(--color-accent); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.bump-row input{ width:22px; height:22px; min-height:auto; }
.bump-body{ display:flex; flex-direction:column; gap:2px; }
.bump-title{ font-weight:700; font-size:var(--text-sm); }
.bump-copy{ font-size:var(--text-xs); color:var(--color-muted); }

/* --- Order summary (sticky toggle bar on mobile) --- */
.checkout-summary{ position:sticky; top:var(--space-1); z-index:60; }
.summary-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-2); cursor:pointer; font-weight:700;
  border:1px solid var(--color-line); border-radius:var(--radius-md);
  background:var(--color-surface); box-shadow:var(--shadow-card); color:var(--color-ink);
}
.summary-chev{ color:var(--color-muted); }
.summary-body{
  display:none; padding:var(--space-2); background:var(--color-surface);
  border:1px solid var(--color-line); border-top:0;
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.summary-body.is-open{ display:block; }
.summary-lines{ display:flex; flex-direction:column; }
.summary-line{
  display:flex; align-items:center; gap:var(--space-1);
  padding:6px 0; font-size:var(--text-sm);
}
.summary-thumb{
  width:44px; height:44px; flex:0 0 auto; border-radius:var(--radius-sm);
  object-fit:cover; background:var(--color-bg);
}
.summary-name{ flex:1; min-width:0; }
.summary-qty{ color:var(--color-muted); }
.summary-price{ font-weight:600; white-space:nowrap; }
.summary-rows{ border-top:1px solid var(--color-line); margin-top:var(--space-1); padding-top:var(--space-1); }
.summary-row{ display:flex; justify-content:space-between; gap:var(--space-2); padding:3px 0; font-size:var(--text-sm); }
.summary-row--strong{
  font-weight:800; font-size:var(--text-md);
  border-top:1px solid var(--color-line); margin-top:4px; padding-top:8px;
}

/* Empty-cart guard state */
.checkout-empty{ align-items:flex-start; display:flex; flex-direction:column; }

@media (min-width:1024px){
  .checkout-layout{
    display:grid; grid-template-columns:minmax(0,1fr) 360px;
    gap:var(--space-5); align-items:start;
  }
  .checkout-panel{ grid-column:1; grid-row:1; }
  .checkout-summary{ grid-column:2; grid-row:1; top:calc(100px + var(--space-2)); }
  .summary-toggle{ display:none; }
  .summary-body{
    display:block; border:1px solid var(--color-line);
    border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  }
}

/* ================================================================== *
 * Order confirmed — Task 10: hero, saved-order detail, fake-email
 * preview, next-steps timeline, CTAs.
 * ================================================================== */
.confirmed-page{ padding-block:var(--space-4) var(--space-8); }

.confirm-hero{
  text-align:center; padding:var(--space-4) var(--space-2);
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-success) 8%, transparent);
}
.confirm-eyebrow{
  margin:0; color:var(--color-success); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:var(--text-xs);
}
.confirm-hero h1{ margin:0; }
.confirm-id{ margin:0; color:var(--color-muted); }

.confirm-grid{ display:flex; flex-direction:column; gap:var(--space-3); }
.order-detail h2, .next-steps h2{ margin:0; }

/* Fake-email preview */
.email-preview-title{ margin:0 0 var(--space-2); }
.email-card{
  border:1px solid var(--color-line); border-radius:var(--radius-md);
  background:var(--color-surface); overflow:hidden;
}
.email-chrome{ padding:var(--space-2); background:var(--color-bg); border-bottom:1px solid var(--color-line); }
.email-meta{ margin:0; font-size:var(--text-xs); color:var(--color-muted); }
.email-meta span{ font-weight:700; }
.email-subject{ margin:6px 0 0; font-weight:700; }
.email-body{ padding:var(--space-2); font-size:var(--text-sm); line-height:1.55; }
.email-body p{ margin:0; }
.email-items{ margin:0; padding-left:var(--space-3); }
.email-body a{ color:var(--color-primary); font-weight:600; }
.email-note{
  margin:0; padding:0 var(--space-2) var(--space-2);
  font-size:var(--text-xs); color:var(--color-muted); font-style:italic;
}

/* Next-steps timeline */
.timeline{
  list-style:none; margin:var(--space-2) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--space-2);
}
.timeline li{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-2); align-items:start; }
.timeline-num{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background:var(--color-primary); color:var(--color-primary-ink); font-weight:700; font-size:var(--text-sm);
}
.timeline-body{ display:flex; flex-direction:column; gap:2px; font-size:var(--text-sm); }
.timeline-body span{ color:var(--color-muted); }

.confirm-ctas{ display:flex; flex-direction:column; gap:var(--space-1); }

.confirmed-missing{ padding-block:var(--space-6); }

@media (min-width:720px){
  .confirm-ctas{ flex-direction:row; }
  .confirm-ctas .btn{ flex:1; }
}

@media (min-width:1024px){
  .confirm-grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--space-5); align-items:start;
  }
}

/* ================================================================== *
 * My Garage — Task 11: tab-rail account hub (overview / orders / garage /
 * warranty / reminders / service / support). Register / reminder / warranty
 * claim are bottom sheets; service booking is an inline form on its own tab.
 * ================================================================== */
.garage-page{ padding-block:var(--space-3) var(--space-8); }

.garage-banner{
  margin:0; padding:var(--space-2); border-radius:var(--radius-md);
  font-weight:600; font-size:var(--text-sm);
}
.garage-banner--guest{ background:color-mix(in srgb, var(--color-accent) 12%, transparent); color:var(--color-ink); }
.garage-banner--in{ background:color-mix(in srgb, var(--color-success) 12%, transparent); color:var(--color-success); }

/* --- Tab rail: horizontally scrollable chips, deep-linkable --- */
.tab-rail{
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:2px;
}
.tab-rail::-webkit-scrollbar{ display:none; }
.tab-chip{
  flex:0 0 auto; min-height:44px; padding:0 var(--space-2);
  border-radius:999px; border:1px solid var(--color-line);
  background:var(--color-surface); color:var(--color-muted);
  font-weight:600; font-size:var(--text-sm); cursor:pointer; white-space:nowrap;
}
.tab-chip.is-active{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-primary-ink); }

.garage-panel{ min-height:200px; }

/* --- Overview stat cards --- */
.stat-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-2); }
.stat-card{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left;
  min-height:44px; padding:var(--space-2);
  border:1px solid var(--color-line); border-radius:var(--radius-md);
  background:var(--color-surface); cursor:pointer;
}
.stat-num{ font-size:var(--text-2xl); font-weight:800; font-family:var(--font-display); }
.stat-label{ color:var(--color-muted); font-size:var(--text-sm); }

/* --- Selling empty-states (shared across every tab) --- */
.garage-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); padding:var(--space-4) 0; }
.garage-empty-title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); }
.garage-empty-copy{ margin:0; color:var(--color-muted); max-width:46ch; }

/* --- Orders / support ticket rows --- */
.order-list, .ticket-list, .reminder-list{ display:flex; flex-direction:column; gap:var(--space-2); }
.order-row, .ticket-row, .reminder-row{
  display:flex; flex-direction:column; gap:6px; padding:var(--space-2);
  border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-surface);
}
.order-row-top, .ticket-row-top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap;
}
.status-pill{
  padding:3px 10px; border-radius:999px; font-size:var(--text-xs); font-weight:700;
  background:color-mix(in srgb, var(--color-primary) 10%, transparent); color:var(--color-primary);
  text-transform:capitalize; white-space:nowrap;
}

/* --- Garage grid + cards --- */
.garage-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.garage-card{
  display:flex; gap:var(--space-2); padding:var(--space-2);
  border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-surface);
}
.garage-card-img{ width:88px; height:88px; border-radius:var(--radius-sm); object-fit:cover; background:var(--color-bg); flex:0 0 auto; }
.garage-card-body{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; align-items:flex-start; }
.garage-card-name{ margin:0; font-weight:700; font-size:var(--text-sm); }
.warranty-pill{
  padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;
  background:color-mix(in srgb, var(--color-success) 14%, transparent); color:var(--color-success);
}
.registered-note{ margin:0; font-size:var(--text-sm); color:var(--color-success); font-weight:600; }

@media (min-width:720px){
  .stat-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .garage-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ================================================================== *
 * Homepage — Task 13: hero, shop-by tiles, snap aisles, service trust
 * block, finder banner, financing [SAMPLE] card, reviews strip, blog
 * module, local block. Mobile-first (390px is the money shot).
 * ================================================================== */
.home-main{ padding-bottom:var(--space-4); }
.home-section{ margin-top:var(--space-6); }

/* Shared section furniture */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-2); margin-bottom:var(--space-2);
}
.section-title{ margin:0; }
.section-link{
  flex:0 0 auto; color:var(--color-primary); font-weight:600; font-size:var(--text-sm);
  text-decoration:none; white-space:nowrap;
}
.section-link:hover{ text-decoration:underline; }
.section-eyebrow{
  margin:0 0 var(--space-1); font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent);
}

/* --- 1. Hero — deep navy panel, white type, amber primary CTA --- */
.hero{
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--color-primary) 72%, #fff 8%) 0%, transparent 55%),
    linear-gradient(155deg, color-mix(in srgb, var(--color-primary) 88%, #000) 0%, var(--color-primary) 60%, color-mix(in srgb, var(--color-primary) 80%, #000) 100%);
  color:#fff;
}
.hero-inner{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding-block:var(--space-3) var(--space-4);
}
.hero-eyebrow{
  margin:0 0 var(--space-1); font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--color-accent);
}
.hero-copy h1{
  margin:0 0 var(--space-2); color:#fff;
  font-size:clamp(28px, 7.7vw, 46px); line-height:1.12; font-weight:800;
  letter-spacing:-.01em; text-wrap:balance;
}
.hero-sub{
  margin:0 0 var(--space-2);
  color:color-mix(in srgb, #fff 82%, transparent);
  font-size:var(--text-md); line-height:1.55; max-width:48ch;
}
.hero-ctas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-1); }
.hero-cta-main{
  grid-column:1 / -1; min-height:52px;
  background:var(--color-accent); color:var(--color-ink); border-color:var(--color-accent);
  font-size:var(--text-md);
}
.hero-cta-main:hover{ background:color-mix(in srgb, var(--color-accent) 88%, #fff); }
.hero-cta-finder{
  background:#fff; color:var(--color-primary); border-color:#fff;
  padding-inline:var(--space-1); white-space:nowrap;
}
.hero-cta-finder:hover{ background:color-mix(in srgb, #fff 88%, var(--color-primary)); }
.hero-cta-ghost{
  background:transparent; color:#fff;
  border-color:color-mix(in srgb, #fff 40%, transparent);
  padding-inline:var(--space-1); white-space:nowrap;
}
.hero-cta-ghost:hover{ border-color:#fff; }
.hero-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-1);
  list-style:none; margin:0;
  /* X-axis clearance from the fixed float rails (call/WA on the left at
     x:16-68, chat launcher 52px+16px in from the right edge, both
     z-index:70). The cluster owns those rails at EVERY viewport height, so
     the chips stay centered between them: 52px button + --space-1 buffer
     inset from each side (the container's own --space-2 padding already
     covers the rails' 16px edge offset). Guarded by home.spec.ts "float
     cluster never overlaps ..." at 390×664 and 390×844. Desktop (≥1024)
     resets to the flush-left grid placement. */
  padding:0 calc(52px + var(--space-1));
}
.hero-trust-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:7px 12px; border-radius:999px;
  background:color-mix(in srgb, #fff 12%, transparent);
  border:1px solid color-mix(in srgb, #fff 22%, transparent);
  color:#fff; font-size:var(--text-xs); font-weight:600; text-decoration:none;
  white-space:nowrap;
}
a.hero-trust-chip:hover{ background:color-mix(in srgb, #fff 20%, transparent); }
.hero-trust-star{ color:var(--color-accent); }
.hero-media{ position:relative; }
.hero-img{
  /* landscape product shot on white — show the whole car, card-style */
  width:100%; height:auto;
  border-radius:var(--radius-md);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.hero-media-chip{
  position:absolute; left:var(--space-2); bottom:var(--space-2);
  padding:7px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--color-ink) 82%, transparent);
  color:#fff; font-size:var(--text-xs); font-weight:600; text-decoration:none;
  backdrop-filter:blur(4px);
}
.hero-media-chip:hover{ background:var(--color-ink); }

/* --- 2. Shop-by tiles --- */
.tile-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-2); }
.tile-grid-quick{ margin-top:var(--space-2); }
.type-tile{
  display:flex; flex-direction:column;
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-md); overflow:hidden;
  text-decoration:none; color:var(--color-ink);
  box-shadow:var(--shadow-card);
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .type-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(16,33,63,.15); }
}
.type-tile-img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; background:var(--color-bg); }
.type-tile-label{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-1);
  padding:10px var(--space-2); min-height:44px;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
}
.tile-arrow{ color:var(--color-muted); font-size:var(--text-lg); line-height:1; }
.type-tile:hover .tile-arrow, .quick-tile:hover .tile-arrow{ color:var(--color-primary); }
.quick-tile{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-1);
  min-height:64px; padding:10px var(--space-2);
  background:color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border:1px solid var(--color-line); border-radius:var(--radius-md);
  text-decoration:none; color:var(--color-ink);
  transition:border-color .15s ease, background-color .15s ease;
}
.quick-tile:hover{ border-color:var(--color-primary); }
.quick-tile-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quick-tile-label{ font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); }
.quick-tile-sub{ font-size:var(--text-xs); color:var(--color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- 3/5. Aisles — native scroll-snap rails with a next-card peek --- */
.rail-wrap{ position:relative; }
.aisle-rail{
  display:flex; gap:var(--space-2);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  /* bleed to the viewport edge on mobile so cards swipe edge-to-edge */
  margin-inline:calc(-1 * var(--space-2)); padding-inline:var(--space-2);
  scroll-padding-inline:var(--space-2);
  padding-block:var(--space-1) var(--space-2);
}
.aisle-rail::-webkit-scrollbar{ display:none; }
.aisle-item{ flex:0 0 min(66%, 250px); scroll-snap-align:start; display:flex; }
.aisle-item .card{ width:100%; }

/* --- 4. Service trust block — navy split card --- */
.service-card{
  display:grid; grid-template-columns:1fr; overflow:hidden;
  border-radius:var(--radius-md);
  background:linear-gradient(140deg, color-mix(in srgb, var(--color-primary) 90%, #000) 0%, var(--color-primary) 70%);
  color:#fff; box-shadow:var(--shadow-card);
}
.service-copy{ padding:var(--space-4) var(--space-3); }
.section-eyebrow--light{ color:var(--color-accent); }
.service-title{ margin:0 0 var(--space-2); color:#fff; font-size:var(--text-2xl); line-height:1.2; text-wrap:balance; }
.service-body{ margin:0 0 var(--space-2); color:color-mix(in srgb, #fff 82%, transparent); font-size:var(--text-sm); line-height:1.6; }
.service-points{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0 0 var(--space-3); padding:0;
}
.service-points li{
  padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb, #fff 12%, transparent);
  border:1px solid color-mix(in srgb, #fff 20%, transparent);
  font-size:var(--text-xs); font-weight:600;
}
.service-ctas{ display:flex; flex-direction:column; gap:var(--space-1); }
.service-cta-ghost{
  background:transparent; color:#fff;
  border-color:color-mix(in srgb, #fff 40%, transparent);
}
.service-cta-ghost:hover{ border-color:#fff; }
.service-media{
  display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb, #fff 8%, transparent);
  padding:var(--space-4);
}
.service-media img{ width:min(220px, 70%); height:auto; opacity:.95; }

/* --- 6. Smart Finder banner --- */
.finder-banner{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  border:1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.finder-banner-title{ margin:0 0 4px; font-size:var(--text-xl); }
.finder-banner-sub{ margin:0; color:var(--color-muted); font-size:var(--text-sm); }
.finder-banner-btn{ align-self:flex-start; }

/* --- 7. Financing mock card ([SAMPLE]) --- */
.financing-section{ margin-top:var(--space-2); }
.financing-card{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:var(--space-3);
  border:1px dashed var(--color-line); border-radius:var(--radius-md);
  background:var(--color-surface);
}
.sample-chip{
  padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--color-muted) 14%, transparent);
  color:var(--color-muted); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.financing-line{ margin:0 0 4px; font-family:var(--font-display); font-weight:600; font-size:var(--text-md); }
.financing-line strong{ font-weight:800; }
.financing-sub{ margin:0; font-size:var(--text-xs); color:var(--color-muted); }

/* --- 8. Reviews strip --- */
.reviews-stat{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  min-height:44px; padding-block:4px;
  color:var(--color-ink); font-weight:600; font-size:var(--text-xs);
  text-decoration:none; white-space:nowrap;
}
.reviews-stat:hover{ color:var(--color-primary); }
.reviews-stat-star{ color:var(--color-accent); font-size:var(--text-sm); }
.reviews-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.review-card{
  display:flex; flex-direction:column; gap:var(--space-1);
  margin:0; padding:var(--space-3);
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
}
.review-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-1); }
.review-stars{ color:var(--color-accent); font-size:var(--text-sm); letter-spacing:2px; }
.review-sample{
  padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--color-muted) 12%, transparent);
  color:var(--color-muted); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.review-text{
  margin:0; font-size:var(--text-sm); line-height:1.6; color:var(--color-ink);
}
.review-name{ font-size:var(--text-xs); font-weight:600; color:var(--color-muted); }
.reviews-actions{ margin-top:var(--space-2); }

/* --- 9. Blog module --- */
.blog-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.article-card{
  display:grid; grid-template-columns:112px 1fr; gap:var(--space-2);
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-md); overflow:hidden;
  text-decoration:none; color:var(--color-ink);
  box-shadow:var(--shadow-card);
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .article-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(16,33,63,.15); }
}
.article-img{ width:112px; height:100%; min-height:112px; object-fit:cover; background:var(--color-bg); }
.article-body{ display:flex; flex-direction:column; gap:4px; padding:var(--space-2) var(--space-2) var(--space-2) 0; min-width:0; }
.article-title{
  font-family:var(--font-display); font-weight:600; font-size:var(--text-sm); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.article-teaser{
  font-size:var(--text-xs); color:var(--color-muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.article-more{ margin-top:auto; color:var(--color-primary); font-weight:600; font-size:var(--text-xs); }

/* --- 10. Local block --- */
.local-block .local-grid{ display:flex; flex-direction:column; gap:var(--space-3); }
.local-title{ margin:0 0 var(--space-2); font-size:var(--text-xl); line-height:1.25; text-wrap:balance; }
.local-body{ margin:0; color:var(--color-muted); font-size:var(--text-sm); line-height:1.65; max-width:64ch; }
.hours-card{
  display:flex; flex-direction:column; gap:var(--space-1);
  padding:var(--space-3);
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
}
.hours-name{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); }
.hours-addr{ margin:0 0 var(--space-1); color:var(--color-muted); font-size:var(--text-sm); }
.hours-list{ list-style:none; margin:0 0 var(--space-2); padding:0; }
.hours-list li{
  display:flex; justify-content:space-between; gap:var(--space-2);
  padding:6px 0; font-size:var(--text-sm);
  border-bottom:1px solid var(--color-line);
}
.hours-list li:last-child{ border-bottom:0; }
.hours-list li span:first-child{ font-weight:600; }
.hours-list li span:last-child{ color:var(--color-muted); }
.hours-phone{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  color:var(--color-primary); font-weight:700; text-decoration:none;
}

/* ================================================================== *
 * Homepage — tablet (>=720px)
 * ================================================================== */
@media (min-width:720px){
  .hero-inner{ padding-block:var(--space-6); }
  .hero-ctas{ display:flex; flex-wrap:wrap; }
  .hero-ctas .btn{ flex:0 0 auto; padding-inline:var(--space-4); }
  .tile-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .tile-grid-quick{ margin-top:var(--space-2); }
  .aisle-item{ flex-basis:240px; }
  .service-card{ grid-template-columns:1.4fr 1fr; }
  .service-media{ display:flex; }
  .service-ctas{ flex-direction:row; }
  .finder-banner{
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:var(--space-4);
  }
  .finder-banner-btn{ align-self:center; flex:0 0 auto; }
  .reviews-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .blog-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .article-card{ display:flex; flex-direction:column; }
  .article-img{ width:100%; height:auto; aspect-ratio:16 / 10; min-height:0; }
  .article-body{ padding:var(--space-2); flex:1; }
  .local-block .local-grid{
    display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:var(--space-5); align-items:start;
  }
}

/* ================================================================== *
 * Homepage — desktop (>=1024px)
 * ================================================================== */
@media (min-width:1024px){
  .hero-inner{
    display:grid; grid-template-columns:1.05fr .95fr;
    grid-template-areas:"copy media" "trust media";
    column-gap:var(--space-8); align-content:center; align-items:end;
    padding-block:var(--space-7, 56px) var(--space-8);
  }
  .hero-copy{ grid-area:copy; align-self:center; }
  .hero-media{ grid-area:media; align-self:center; }
  /* Desktop grid placement — undo the mobile float-rail inset/centering:
     the trust row sits flush-left under the copy, nowhere near the fixed
     cluster on a 1280×800 first paint. */
  .hero-trust{ grid-area:trust; align-self:start; justify-content:flex-start; padding:0; }
  .hero-sub{ font-size:var(--text-lg); }
  .aisle-rail{ margin-inline:0; padding-inline:0; scroll-padding-inline:0; }
  .aisle-item{ flex-basis:calc((100% - 3 * var(--space-2)) / 4); }
  .service-copy{ padding:var(--space-6) var(--space-5); }
  .home-section{ margin-top:var(--space-8); }
}

/* ================================================================== *
 * Services + Contact — Task 14. Services is the repair differentiator
 * page (owner personally repairs what he sells, on site); Contact is the
 * visit/conversion page. Reuses form-grid/field/flow-success/panel-copy/
 * panel-box (Checkout, Task 10), service-card/section-* (Homepage, Task 13),
 * tab-rail/tab-chip (My Garage, Task 11), article-card (Homepage) and
 * sample-chip wherever the shape already matches — new classes only for
 * what's genuinely new to these two pages.
 * ================================================================== */
.crumb-wrap{ padding-block:var(--space-2) 0; }

/* --- Anchor offset: the sticky header (ribbon+bar+cat-row) must never
   cover a jump target — the header nav's "Repairs" link and the Contact
   page's "Go to the booking form" link both land here. --- */
#repairs, #booking-form{ scroll-margin-top:170px; }

/* --- 1. Services hero — reuses the homepage hero's navy gradient look --- */
.svc-hero{
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--color-primary) 88%, #000) 0%, var(--color-primary) 60%, color-mix(in srgb, var(--color-primary) 80%, #000) 100%);
  color:#fff;
}
.svc-hero-inner{ display:flex; flex-direction:column; gap:var(--space-2); padding-block:var(--space-4) var(--space-3); }
.svc-hero h1{ margin:0; color:#fff; font-size:clamp(26px, 6.6vw, 42px); line-height:1.15; text-wrap:balance; }
.svc-hero-sub{ margin:0; max-width:60ch; color:color-mix(in srgb, #fff 85%, transparent); font-size:var(--text-md); line-height:1.6; }
.svc-hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-1); }
.svc-hero-cta-ghost{ background:transparent; color:#fff; border-color:color-mix(in srgb, #fff 40%, transparent); }
.svc-hero-cta-ghost:hover{ border-color:#fff; }

/* --- 2. Service menu --- */
.svc-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-2); margin-top:var(--space-2); }
.svc-card{
  display:flex; flex-direction:column; gap:6px; padding:var(--space-3);
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
}
.svc-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-primary) 10%, transparent);
  color:var(--color-primary); margin-bottom:4px;
}
.svc-card-name{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); }
.svc-card-price{ margin:0; color:var(--color-primary); font-weight:700; font-size:var(--text-sm); }
.svc-card-desc{ margin:0; color:var(--color-muted); font-size:var(--text-sm); line-height:1.5; }
.svc-menu-note{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:var(--space-2) 0 0; color:var(--color-muted); font-size:var(--text-xs);
}

/* --- 3. How it works --- */
.how-steps{ display:flex; flex-direction:column; gap:var(--space-2); margin:var(--space-2) 0 0; padding:0; list-style:none; }
.how-step{ display:flex; gap:var(--space-2); align-items:flex-start; }
.how-step-num{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  background:var(--color-primary); color:var(--color-primary-ink);
  font-weight:800; font-family:var(--font-display);
}
.how-step-body{ min-width:0; }
.how-step-title{ margin:0 0 2px; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); }
.how-step-copy{ margin:0; color:var(--color-muted); font-size:var(--text-sm); line-height:1.5; }

/* --- 7. Bought-elsewhere banner --- */
.svc-banner{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:var(--space-3);
  border:1px dashed var(--color-line); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}
.svc-banner-title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); }
.svc-banner-copy{ margin:0; color:var(--color-muted); font-size:var(--text-sm); }

/* --- 8. FAQ excerpt + review pull-quote --- */
.faq-excerpt-list{ display:flex; flex-direction:column; margin-top:var(--space-2); }
.faq-excerpt-item{ padding:var(--space-2) 0; border-bottom:1px solid var(--color-line); }
.faq-excerpt-item:first-child{ padding-top:0; }
.faq-excerpt-q{ margin:0 0 4px; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); }
.faq-excerpt-a{ margin:0; color:var(--color-muted); font-size:var(--text-sm); line-height:1.6; }
.svc-quote{
  margin:var(--space-2) 0 0; padding:var(--space-3);
  border-left:3px solid var(--color-accent); background:var(--color-bg);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.svc-quote-text{ margin:0 0 4px; font-size:var(--text-sm); line-height:1.6; font-style:italic; }
.svc-quote-cite{ margin:0; font-size:var(--text-xs); color:var(--color-muted); }

@media (min-width:720px){
  .svc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .how-steps{ flex-direction:row; }
  .how-step{ flex:1; flex-direction:column; }
}
@media (min-width:1024px){
  .svc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ------------------------------------------------------------------ *
 * Contact page
 * ------------------------------------------------------------------ */
.contact-hero{ padding-block:var(--space-3) var(--space-2); }
.contact-hero-sub{ margin:0; max-width:60ch; color:var(--color-muted); }

/* --- 2/3. NAP card + static map panel --- */
.contact-nap-grid{ display:flex; flex-direction:column; gap:var(--space-3); }
.contact-actions{ display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-2); }

.map-card{
  position:relative; aspect-ratio:4 / 3; overflow:hidden;
  border-radius:var(--radius-md); border:1px solid var(--color-line);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 16%, transparent) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 16%, transparent) 0 2px, transparent 2px 64px),
    color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
}
.map-pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -100%);
  width:40px; height:40px; color:var(--color-accent);
  filter:drop-shadow(0 6px 10px rgba(16,33,63,.28));
}
.map-caption{ margin:var(--space-1) 0 0; color:var(--color-muted); font-size:var(--text-sm); }

/* --- 4. Tabs — reuses .tab-rail/.tab-chip from My Garage (Task 11) --- */
.contact-tabs{ margin-top:var(--space-2); }
.contact-tabs .tab-rail{ margin-bottom:var(--space-2); }

/* --- 5. Locations grid --- */
.locations-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-2); margin-top:var(--space-2); }
.location-card{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:var(--space-3); border:1px solid var(--color-line); border-radius:var(--radius-md);
  background:var(--color-surface); box-shadow:var(--shadow-card);
}
.location-card--future{ border-style:dashed; }
.location-status{
  padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.location-status--active{ background:color-mix(in srgb, var(--color-success) 14%, transparent); color:var(--color-success); }
.location-status--future{ background:color-mix(in srgb, var(--color-muted) 14%, transparent); color:var(--color-muted); }
.location-name{ margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); }
.location-copy{ margin:0; color:var(--color-muted); font-size:var(--text-sm); }
.location-card .btn{ margin-top:var(--space-1); }

/* --- 6. Areas served --- */
.areas-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:var(--space-2) 0 0; padding:0; }
.area-chip{
  padding:6px 12px; border-radius:999px; border:1px solid var(--color-line);
  background:var(--color-surface); font-size:var(--text-sm); font-weight:600;
}

@media (min-width:720px){
  .contact-nap-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .locations-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ================================================================== *
 * About + Blog + Article + FAQ — Task 15. Reuses reviews-grid/review-card
 * (Homepage, Task 13), hours-card/local-block/contact-actions (Contact,
 * Task 14), article-card/blog-grid (Homepage), pdp-accordion/accordion-item
 * (PDP, Task 9), svc-menu-note/sample-chip (Services, Task 14), and .grid/
 * .card (product-card, Task 8) wherever the shape already matches — new
 * classes only for what's genuinely new to these pages.
 * ================================================================== */

/* --- About --- */
.about-hero{ padding-block:var(--space-3) 0; }
.about-story p{ color:var(--color-ink); max-width:70ch; line-height:1.65; }
.about-stat{
  display:flex; align-items:center; gap:8px; margin-top:var(--space-2);
  font-weight:600; font-size:var(--text-sm);
}
.about-stat-stars{ color:var(--color-accent); font-size:var(--text-md); }
.about-stat a{ color:var(--color-ink); text-decoration:none; }
.about-stat a:hover{ color:var(--color-primary); text-decoration:underline; }

.values-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.value-card{
  padding:var(--space-3);
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
}
.value-title{ margin:0 0 var(--space-1); }
.value-copy{ margin:0; color:var(--color-muted); font-size:var(--text-sm); line-height:1.6; }

.about-visit h2{ margin:0 0 var(--space-1); }

@media (min-width:720px){
  .values-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* --- Blog index --- */
.blog-hero{ padding-block:var(--space-3) 0; }
.blog-intro{ margin:0; color:var(--color-muted); max-width:64ch; }
.article-meta{ margin:0; font-size:var(--text-xs); color:var(--color-muted); }

/* --- Article pages (the 3 buying guides) --- */
.article-page{ padding-block:var(--space-3) var(--space-8); }
.article-hero{ padding-block:0; }
.article-byline{ margin:0; color:var(--color-muted); font-size:var(--text-sm); display:flex; align-items:center; gap:8px; }
.article-prose{ max-width:72ch; }
.article-prose h2{ margin-top:var(--space-2); }
.article-prose p{ color:var(--color-ink); line-height:1.7; }
.article-ctas{ display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-2); }

/* Comparison table — desktop table, mobile card-stack via data-label */
.compare-table{ width:100%; border-collapse:collapse; margin:var(--space-1) 0; }
.compare-table thead{ display:none; }
.compare-table tbody{ display:flex; flex-direction:column; gap:var(--space-1); }
.compare-table tr{ display:block; border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-surface); overflow:hidden; }
.compare-table td{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-1) var(--space-2); border-bottom:1px solid var(--color-line);
  font-size:var(--text-sm); text-align:right;
}
.compare-table td:last-child{ border-bottom:0; }
.compare-table td::before{ content:attr(data-label); font-weight:700; color:var(--color-muted); text-align:left; }
.compare-table td:first-child{ font-weight:700; color:var(--color-ink); text-align:left; }
.compare-table td:first-child::before{ content:none; }

@media (min-width:720px){
  .compare-table thead{ display:table-header-group; }
  .compare-table tbody{ display:table-row-group; }
  .compare-table tr{ display:table-row; border:0; border-radius:0; background:none; }
  .compare-table th, .compare-table td{ display:table-cell; padding:var(--space-1) var(--space-2); border-bottom:1px solid var(--color-line); text-align:left; }
  .compare-table td::before{ content:none; }
  .compare-table th{ font-weight:700; font-family:var(--font-display); }
}

/* --- FAQ --- */
.faq-hero{ padding-block:var(--space-3) 0; }
.faq-hero-sub{ margin:0; color:var(--color-muted); max-width:64ch; }
.faq-group{ margin-top:var(--space-4); }
.faq-group:first-child{ margin-top:0; }
.faq-group h2{ margin:0 0 var(--space-2); }
.faq-bottom{ text-align:center; }
.faq-bottom-lead{ margin:0 0 var(--space-2); font-weight:600; }
.faq-bottom .contact-actions{ margin:0 auto; max-width:360px; }

/* 404 — friendly not-found page (Task 16) */
.notfound{ padding:var(--space-6) var(--space-2) var(--space-8); text-align:center; }
.notfound h1{ margin:var(--space-1) 0 var(--space-2); }
.notfound-lead{ max-width:52ch; margin:0 auto var(--space-4); color:var(--color-muted); }
.notfound-search{ display:flex; gap:var(--space-1); max-width:460px; margin:0 auto var(--space-3); }
.notfound-search .search-input{ flex:1 1 auto; }
.notfound-actions{ display:flex; flex-wrap:wrap; gap:var(--space-1); justify-content:center; margin:0 0 var(--space-6); }
.notfound-heading{ margin:0 0 var(--space-3); }
.notfound-grid{ text-align:left; }
@media (min-width:720px){ .notfound-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* CLS guards (Task 16 Lighthouse pass) — the PDP main and the shop grid are
   JS-rendered, so reserve their space up front to keep the footer from
   jumping (product CLS was 0.75, shop 0.24 before these). */
body[data-page="product"] #main{ min-height:100vh; }
#product-grid{ min-height:60vh; }