/* ==========================================================================
   VeltHaven — Reusable components
   Loads after base.css. Implements the locked Visual Design System (02_design/).
   Mobile-first. Floors enforced in base.css: 16px / 4.5:1 / 48px touch.
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  background: var(--anthracite-deep);
  color: #fff;
  padding-block: var(--sp-6);
  overflow: clip;
}
@media (min-width: 768px) { .hero { padding-block: var(--sp-7); } }
.hero h1 { color: #fff; font-size: var(--fs-h1); max-width: 18ch; text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
.hero h1.display { font-size: var(--fs-display); }
.hero p { color: var(--ink-on-dark-2); font-size: var(--fs-lg); max-width: 54ch; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero__media {
  position: relative;
  margin-top: var(--sp-5);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: end start;
  color: var(--ink-on-dark-2);
  padding: var(--sp-3);
  box-shadow: var(--shadow-md);
}

/* ---- Image placeholder stand-ins (replaced at Phase 3.7 by real renders) ---- */
.ph {
  position: relative;
  border-radius: var(--radius);
  display: grid;
  place-items: end start;
  color: rgba(255,255,255,.85);
  padding: var(--sp-2);
  min-height: 160px;
  font-size: var(--fs-sm);
  overflow: clip;
  background:
    radial-gradient(120% 90% at 78% 88%, rgba(201,168,106,.40) 0%, rgba(201,168,106,0) 42%),
    linear-gradient(180deg, #46505C 0%, #333A42 46%, #23272C 100%);
}
.ph--garden {
  background:
    radial-gradient(110% 80% at 72% 92%, rgba(201,168,106,.35) 0%, rgba(201,168,106,0) 40%),
    linear-gradient(180deg, #5A6471 0%, #3C444D 55%, #2A3035 100%);
}
.ph--interior {
  background:
    radial-gradient(130% 110% at 50% 100%, rgba(201,168,106,.55) 0%, rgba(160,120,70,.18) 45%, rgba(201,168,106,0) 70%),
    linear-gradient(180deg, #3A3F45 0%, #2B2F33 60%, #1F2326 100%);
}
.ph--detail {
  background: linear-gradient(135deg, #4A4138 0%, #6B5A45 45%, #3A332B 100%);
}
.ph--light {
  background: linear-gradient(180deg, #B9C0C6 0%, #8F979E 60%, #6E767D 100%);
  color: rgba(255,255,255,.95);
}
.ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
.ph[data-ratio="3x4"]  { aspect-ratio: 3 / 4; }
.ph[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.ph__caption {
  position: relative;
  z-index: 1;
  font-weight: 500;
}
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* "Visualisation" chip — sits top-left on every image placeholder */
.viz-label {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: rgba(31,35,38,.62);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: .25rem .7rem;
}
.viz-label::before { content: "◐"; color: var(--accent-on-dark); }

/* ---- Cards ---- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform  var(--dur-base) var(--ease-out);
}
.card h3 { margin-bottom: var(--sp-1); }
.card > .ph,
.opt > .ph {
  margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-2);
  border-radius: var(--radius) var(--radius) 0 0;
  min-height: 140px;
}
/* §15 — a card/option image must never collapse to a thin letterboxed strip.
   When a .ph has no explicit data-ratio, give it a generous 4:3 so the
   building/product reads clearly at every breakpoint. Scoped with :not() so
   it never overrides an explicitly declared ratio (e.g. 16x9 upgrade cards). */
.card > .ph:not([data-ratio]),
.opt > .ph:not([data-ratio]) {
  aspect-ratio: 4 / 3;
}
/* §12b/§14 — per-model card gallery: a lead image + a thumbnail strip,
   click-to-open carousel (grouped by the data-gallery key on .model-gallery). */
.card > .model-gallery {
  margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-2);
}
.model-gallery > .ph {
  border-radius: var(--radius) var(--radius) 0 0;
}
.model-thumbs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--line);
}
.model-thumbs > .ph {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
}
.model-gallery .ph img { cursor: zoom-in; }
.gallery-badge {
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  z-index: 1;
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  background: rgba(20, 22, 24, .72);
  padding: .25rem .65rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.gallery-badge::before { content: "▦"; margin-right: .35rem; opacity: .85; }
.card .price {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--anthracite);
  margin-bottom: var(--sp-2);
}
.card .price small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.card .btn { margin-top: auto; }

/* Featured / recommended card — exactly ONE per page (§2 one-★ rule) */
.card--featured {
  border: 2px solid var(--anthracite);
  box-shadow: var(--shadow-md);
  position: relative;
}
a.card, .card--hover:hover { text-decoration: none; }
.card--hover { cursor: pointer; }
@media (hover: hover) {
  .card--hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.path-card { overflow: clip; position: relative; }
/* Featured path-card (homepage #paths "Recommended"): the badge straddles the
   top border, so the card must not clip it — the image is already clipped by
   .ph's own overflow + radius, so nothing else can escape the rounded corners. */
.path-card.card--featured { overflow: visible; }
.path-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.path-card__body .btn { margin-top: var(--sp-2); }

/* Whole-card click target: the CTA is a "stretched link" — its ::after
   covers the whole card so clicking the image or anywhere on the card
   follows it. One link per card = one tab stop, no nested-interactive
   a11y issue. The button stays the visible, descriptive control. */
.path-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Push the CTA to the card foot so buttons bottom-align across the row,
   regardless of how many lines each card's copy runs to. */
.path-card__body .path-card__cta { margin-top: auto; }

/* Choice grids (homepage chooser #paths, garages hub #choice): a recognised
   3-card set, so go 1-up (mobile) straight to 3-up — skipping the global
   grid--3 2-up band where the odd third card would strand as a 2 + 1
   (CLAUDE.md: three-card recognition pattern). */
@media (min-width: 700px) {
  #paths .grid--3,
  #choice .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Badges / chips ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 999px;
}
.badge--recommended {
  background: var(--accent-50);
  color: var(--accent-600);
  border: 1px solid var(--accent-400);
}
.badge--star::before { content: "★"; color: var(--star); }
.card--featured > .badge {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  background: var(--accent-50);
}
.chip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin: .15rem .3rem .15rem 0;
  background: var(--bg-2);
  color: var(--ink-2);
}

/* ---- Trust strip ---- */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  justify-content: center;
}
/* ponytail: column+left-align on narrow mobile so all bullets share one x position */
@media (max-width: 559px) {
  .trust { flex-direction: column; align-items: flex-start; }
}
.trust__item {
  display: inline-flex;
  align-items: flex-start; /* bullet pins to first line on wrapped text */
  gap: .55rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.trust__item::before {
  content: "●";
  color: var(--accent-600);
  font-size: .55em;
  line-height: 1.6; /* align bullet optically with first text line */
}
.section--dark .trust__item { color: var(--ink-on-dark-2); }
.section--dark .trust__item::before { color: var(--accent-on-dark); }

/* Left-aligned vertical bullet list — used inside "Who does what" cards */
.trust--list {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-2);
}
.trust--list .trust__item {
  font-weight: 500;
}

/* 2×2 responsive grid for longer trust items (4 items that would otherwise orphan 3+1) */
.trust--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  gap: var(--sp-2) var(--sp-5);
}
@media (max-width: 640px) {
  .trust--grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Trust card grid (About page) ---- */
.trust-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }

/* 4-item variant: 1→2×2→4 across viewports (how-it-works guarantees section) */
@media (min-width: 560px)  { .trust-grid--2col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trust-grid--2col { grid-template-columns: repeat(4, 1fr); } }

.trust-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(43,47,51,.10);
}
.trust-card__icon {
  color: var(--accent-600);
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-bottom: .25rem;
}
.trust-card strong {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}
.trust-card p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.65;
}

/* ---- Ticklist ---- */
.ticklist { list-style: none; padding: 0; margin: 0; }
.ticklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .7rem;
}
.ticklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-600);
  font-weight: 800;
}

/* ---- Steps strip ---- */
.steps-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  counter-reset: step;
  list-style: none;   /* the number is the ::before counter badge, not the <ol> marker */
  padding-left: 0;
}
@media (min-width: 768px) {
  .steps-strip { grid-template-columns: repeat(4, 1fr); }
}
.step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  counter-increment: step;
}
.step-card::before {
  content: counter(step);
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--anthracite);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.step-card h3 { font-size: var(--fs-lg); }
.step-card p  { font-size: var(--fs-base); color: var(--ink-2); margin: 0; }

/* ---- Journey steps (vertical numbered list) ---- */
.journey { display: flex; flex-direction: column; gap: var(--sp-4); }
.journey__step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.journey__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--anthracite);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-md);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.journey__body h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.journey__body p  { margin: 0 0 var(--sp-1); }
.journey__body p:last-child { margin-bottom: 0; }

/* ---- Use-case / lifestyle trio ---- */
.usecase {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) {
  .usecase { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .usecase--rev > :first-child { order: 2; }
}

/* ---- Design gallery ---- */
.gallery {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .ph { min-height: 200px; }

/* ---- Installations gallery ---- */
.install-gallery {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .install-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .install-gallery { grid-template-columns: repeat(3, 1fr); } }
/* Two-column variant — for sections where exactly 2 images are shown */
@media (min-width: 600px)  { .install-gallery--two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .install-gallery--two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; } }
.install-tile { margin: 0; }
.install-tile .ph { min-height: 200px; }
.install-tile figcaption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--sp-1);
}

/* ---- Hero redesign: fill the empty right side ---- */
/* When the hero has a media block, split into two columns on desktop so the
   image sits beside the copy instead of leaving the right half empty. */
@media (min-width: 980px) {
  .hero:has(.hero__media):not(.hero--split) > .container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: var(--sp-5);
    align-content: center;
  }
  .hero:has(.hero__media) > .container > :not(.hero__media) { grid-column: 1; }
  .hero:has(.hero__media) h1,
  .hero:has(.hero__media) p { max-width: 40ch; }
  /* Split heroes only: image sits beside the copy at a 4/3 crop. EXCLUDE
     .hero--cover — those are full-bleed (media is position:absolute, inset:0
     behind the copy). Without :not(.hero--cover) this rule's specificity
     (0,3,0) beats `.hero--cover > .hero__media { aspect-ratio:auto }` (0,2,0),
     forcing the cover media to 4/3 → ~1013px tall at 1366w → only the roof
     shows above the fold. Regression fix 2026-07-01.
     Also EXCLUDE .hero--split — those pages (addon-hero.php) use the
     purpose-built .hero--split .hero__grid rules (~L1780). This rule's
     grid-row: 1/50 combined with .hero__grid's row-gap produced a giant void.
     Regression fix 2026-07-05. */
  .hero:has(.hero__media):not(.hero--cover):not(.hero--split) .hero__media {
    grid-column: 2;
    grid-row: 1 / 50;        /* span every text row so the image fills the right column */
    align-self: center;
    margin-top: 0;
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
  }
  /* Heroes with no image: faint roof chevron (logo motif) fills the right side.
     ponytail: replaced "V" text — V is a Russian military symbol; roof has no such reading */
  .hero:not(:has(.hero__media)) { position: relative; }
  .hero:not(:has(.hero__media)) > .container { position: relative; z-index: 1; }
  .hero:not(:has(.hero__media))::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: clamp(14rem, 26vw, 24rem);
    height: clamp(14rem, 26vw, 24rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpolyline points='5,115 100,5 195,115' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='10' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    user-select: none;
  }
}

/* ---- Make recommendation badge reliably centred on any featured card/option ---- */
.opt { position: relative; }
.card--featured > .badge,
.opt.card--featured > .badge,
.opt > .badge {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  background: var(--accent-50);
}

/* ---- Lightbox (click to expand gallery images) ---- */
.install-gallery .ph img,
.gallery .ph img { cursor: zoom-in; }
.vh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(20, 22, 24, .92);
}
.vh-lightbox[hidden] { display: none; }
.vh-lightbox__fig {
  margin: 0;
  max-width: min(1100px, 94vw);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.vh-lightbox__img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.vh-lightbox__cap { color: #fff; font-size: var(--fs-sm); text-align: center; }
.vh-lightbox__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.vh-lightbox__close:hover { background: rgba(255, 255, 255, .24); }
/* Carousel controls (§12a) */
.vh-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vh-lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.vh-lightbox__nav[hidden] { display: none; }
.vh-lightbox__nav--prev { left: var(--sp-2); }
.vh-lightbox__nav--next { right: var(--sp-2); }
.vh-lightbox__counter {
  position: absolute;
  bottom: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background: rgba(20, 22, 24, .6);
  padding: .2rem .7rem;
  border-radius: 999px;
}
.vh-lightbox__img { opacity: 0; transition: opacity .2s ease; }
.vh-lightbox__img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vh-lightbox__img { transition: none; opacity: 1; }
}

/* ---- Configurator colour swatches ----
   The colour dot + ring is the visual control, so the native radio is
   visually hidden (but kept focusable). Padding is scoped under .swatch-grid
   so it wins over the generic .opt card padding defined later in this file. */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: var(--sp-1);
  max-width: 780px;
}
.swatch-grid .opt--swatch {
  align-items: center;
  text-align: center;
  gap: .25rem;
  padding: var(--sp-1);
  min-height: 44px;            /* keep the tap target — shrink the visual, not the hit area */
}
.opt--swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.opt--swatch .swatch {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  margin: 0 auto;
}
.opt--swatch input:checked ~ .swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--anthracite);
}
/* The input is visually hidden, so surface keyboard focus on the whole tile. */
.opt--swatch:focus-within {
  border-color: var(--anthracite);
  box-shadow: 0 0 0 3px var(--accent-600);
}
.swatch-name { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.3; }

/* ---- Before / after ---- */
.beforeafter {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .beforeafter { grid-template-columns: 1fr 1fr; } }
.beforeafter .ph { min-height: 220px; }
.beforeafter figcaption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: .5rem;
  font-weight: 600;
}

/* ---- ROI grid ---- */
.roi-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .roi-grid { grid-template-columns: repeat(3, 1fr); } }
.roi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  border-top: 3px solid var(--accent-400);
}
.roi-card .stat {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 650;
  color: var(--anthracite);
  margin-bottom: var(--sp-1);
}

/* ---- Honesty framework (empty portfolio/reviews — DMCC Act 2024 compliance) ---- */
.framework {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  color: var(--ink-2);
}
.framework strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-lg);
  margin-bottom: .5rem;
  font-family: var(--font-head);
}
.framework__note { max-width: 48ch; margin-inline: auto; }

/* ---- Founder section ---- */
.founder {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
}
@media (min-width: 768px) {
  .founder { grid-template-columns: auto 1fr; gap: var(--sp-5); }
}
.founder .ph {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  place-items: center;
  text-align: center;
}
.founder__photo {
  width: 280px;
  height: 224px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  display: block;
  /* Fixed-width grid item: pin to centre so it doesn't sit left in the
     single-column (mobile) layout. No effect in the desktop auto track. */
  justify-self: center;
}
/* Photo + caption stack (the grid column item, so the photo centres on mobile). */
.founder__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  justify-self: center;
}
.founder__caption {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-2);
  text-align: center;
}

/* ---- Capture / guide-funnel form block ---- */
.capture {
  background: #fff;
  border: 2px solid var(--anthracite);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .capture { grid-template-columns: 1.2fr .8fr; align-items: center; }
}
.capture h2 { font-size: var(--fs-h3); }
.capture input[type="email"],
.capture input[type="text"] {
  width: 100%;
  min-height: var(--tap-comfort);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  padding: .6rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
  background: #fff;
  color: var(--ink);
}
.capture input[type="email"]:focus,
.capture input[type="text"]:focus { border-color: var(--anthracite); outline: none; }
.capture input[type="email"]::placeholder,
.capture input[type="text"]::placeholder { color: var(--ink-2); }

/* Form feedback message */
.vh-form-success {
  font-weight: 600;
  color: var(--success);
  margin: 0;
  padding: var(--sp-2) 0;
}

/* ---- Stacked form with visible labels (price request / contact) ---- */
.vh-form { display: grid; gap: var(--sp-3); }
.vh-form .field { display: grid; gap: .4rem; }
/* display:grid beats the UA [hidden] rule (known trap — same as .opt/.rv-field):
   without this guard the addr2 progressive-disclosure field renders despite hidden. */
.vh-form .field[hidden] { display: none; }
.vh-form label { font-weight: 600; color: var(--ink); }
.vh-form label .optional { font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm); }
.vh-form input[type="text"],
.vh-form input[type="email"],
.vh-form input[type="tel"],
.vh-form select,
.vh-form textarea {
  width: 100%;
  min-height: var(--tap-comfort);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  padding: .6rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
  background: #fff;
  color: var(--ink);
}
.vh-form textarea { min-height: 7rem; resize: vertical; }
.vh-form input:focus,
.vh-form select:focus,
.vh-form textarea:focus { border-color: var(--anthracite); outline: none; }
.vh-form ::placeholder { color: var(--ink-2); }

/* ---- CTA band ---- */
.cta-band { text-align: center; }
.cta-band h2 { margin-inline: auto; }
.cta-band p  { margin-inline: auto; }
.cta-band > .container > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
.cta-band .btn { margin: 0; }

/* ---- Breadcrumb (used on inner pages; defined here so the rule ships once) ---- */
.breadcrumb { font-size: var(--fs-sm); color: var(--ink-2); padding-block: .375rem .5rem; }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: 0;
}
.breadcrumb li { margin: 0; }
.breadcrumb li::after { content: "›"; margin-left: .4rem; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--anthracite); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- Sticky mobile CTA (product pages — hidden ≥768px) ---- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: .6rem var(--gutter);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
}
.sticky-cta strong { font-family: var(--font-head); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .sticky-cta { display: none; } }
/* The cookie-consent revisit button is fixed bottom-left and was covering the
   sticky price bar on mobile. Lift it above the bar — only on pages that render
   the bar (:has scopes it; falls back to the plugin default elsewhere). */
@media (max-width: 767px) {
  body:has(.sticky-cta) .faz-btn-revisit-wrapper.faz-revisit-bottom-left { bottom: 5rem; }
}

/* ---- Article / long-form page header ---- */
.article-header {
  padding-block: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.article-header__h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.article-header__lead {
  font-size: var(--fs-lg);
  color: var(--ink);
  max-width: 68ch;
  margin-bottom: var(--sp-2);
}
.article-meta {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
}

/* ---- Article ToC ---- */
.article-toc {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.article-toc__heading {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
}
.article-toc ol { margin: 0; padding-left: 1.4em; }
.article-toc li { margin-bottom: .3rem; font-size: var(--fs-sm); }
.article-toc a { color: var(--anthracite); }

/* ---- Prose section — constrain headings/lists to readable measure ---- */
.prose h2, .prose h3,
.prose ul, .prose ol { max-width: 68ch; }

/* ---- FAQ accordion (used on product + how-it-works pages) ---- */
.faq-mini details { border-bottom: 1px solid var(--line); padding: .25rem 0; }
.faq-mini summary {
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap-comfort);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  list-style: none;
}
.faq-mini summary::-webkit-details-marker { display: none; }
.faq-mini summary::after {
  content: "+";
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--accent-600);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-mini details[open] summary::after { transform: rotate(45deg); }
.faq-mini p { color: var(--ink-2); }


/* ---- Responsive table wrapper ---- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ---- Spec / pricing table ---- */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  min-width: 420px;
}
.spec caption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-align: left;
  padding: .5rem .5rem .75rem;
  caption-side: bottom;
}
.spec thead th {
  background: var(--anthracite);
  color: #fff;
  padding: .75rem 1rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
}
.spec tbody th,
.spec tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec tbody tr:last-child th,
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody th {
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: var(--bg-2);
  white-space: nowrap;
}
.spec tbody td {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.spec tbody tr.is-total th,
.spec tbody tr.is-total td {
  background: var(--accent-50);
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--accent-400);
  border-bottom: 0;
}

/* ---- Content-note: user-facing caveat / annotation ---- */
.content-note {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-400);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--sp-3);
  max-width: 100%;
}
.content-note strong { color: var(--ink); }

/* Dark sections: tick marks switch to on-dark accent */
.section--dark .ticklist li::before { color: var(--accent-on-dark); }

/* ---- Configurator components (Phase 3.4+; defined here to avoid a later rewrite) ---- */
/* Option card (radio/checkbox label) */
.opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: #fff;
  cursor: pointer;
  transition:
    border-color     var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out);
}
.opt:hover { border-color: var(--anthracite-soft); }
.opt:has(input:checked) { border-color: var(--anthracite); background: var(--accent-50); box-shadow: 0 0 0 2px var(--anthracite), var(--shadow-sm); }
.opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* .opt is display:flex above, which overrides the [hidden] attribute's display:none
   (same trap as .rv-field[hidden] below). Without this, JS gating that sets el.hidden —
   e.g. Climate Comfort hidden on the steel flow — still paints. Restore hidden behaviour. */
.opt[hidden] { display: none; }
/* Keyboard focus: ring the whole card, not just the small radio inside it. */
.opt:has(input:focus-visible) { outline: 3px solid var(--accent-600); outline-offset: 3px; }
.opt input:focus-visible { outline: none; }
.opt input { width: 1.25rem; height: 1.25rem; accent-color: var(--anthracite); margin: 0 0 .25rem; }
.opt strong { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 650; }
.opt .price { font-family: var(--font-head); font-weight: 650; color: var(--anthracite); margin-top: .25rem; }
.opt .gate-note { font-size: var(--fs-sm); color: var(--ink-2); }
/* Size-card "what it's for" line — kept at the 16px body floor, colour-muted only. */
.opt__use { color: var(--ink-2); line-height: 1.45; margin-top: .35rem; }
/* "Learn more" deep-link to an add-on's info page. It is interactive content
   inside the label, so clicking it navigates without toggling the checkbox
   (HTML label activation skips interactive descendants). 44px tap target. */
.opt__learn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: var(--sp-1);
  font-size: 1rem;
  font-weight: 600;
  color: var(--anthracite);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.opt__learn:hover { text-decoration: none; }

/* Floor-finish options (rooms, step 4): compact horizontal swatch ROWS so the three
   cards fit the narrow (300–380px) colour column at every width instead of overflowing
   and sliding under the sticky preview render. Single-column stacked is robust at 375px
   and inside the desktop column alike, so no width variant is needed. Overrides the base
   .opt column layout + the .opt > .ph edge-bleed/140px-min-height for a 72×54 thumbnail. */
.cfg-floor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
.opt--floor {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  min-width: 0;
  min-height: 44px;          /* tap target */
}
.opt--floor > .ph {
  flex: 0 0 72px;
  width: 72px;
  min-height: 0;             /* override .opt > .ph { min-height: 140px } */
  aspect-ratio: 4 / 3;       /* 72×54 */
  margin: 0;                 /* override the .opt > .ph edge-bleed negative margin */
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.opt--floor > .ph img { width: 100%; height: 100%; object-fit: cover; }
.opt--floor input { margin: 0; flex: 0 0 auto; }
.opt--floor strong { font-size: 1rem; min-width: 0; }  /* 16px floor, not .opt's fs-lg */

.opt.is-gated .gate-note {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--anthracite);
  background: rgba(43,47,51,.08);
  border: 1px solid rgba(43,47,51,.18);
  border-radius: var(--radius-sm);
  padding: .3rem .7rem;
  margin-top: var(--sp-1);
}
.brandtag { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-600); text-transform: uppercase; }

/* Step label (step N of Y heading) */
.step-label { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.step-label .eyebrow { margin: 0; }
.step-label h2 { margin: 0; }

/* Live estimate bar (fixed bottom, configurator).
   Fixed (not sticky) so it stays pinned once the user scrolls past <main> into the
   <footer> — sticky only sticks within its containing block, which ends at </main>.
   An IntersectionObserver on the footer toggles .is-hidden so the bar slides away and
   never covers the footer's contact/legal content. */
.estimate-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--anthracite);
  color: #fff;
  padding: .6rem var(--gutter);   /* slim single-line bar (~56–60px) */
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
/* Auto-hide near the footer (JS toggles this once <footer> scrolls into view). */
.estimate-bar.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
/* Reserve bottom space on the configurator so the fixed bar never covers the last
   step content. Scoped via :has() (already used elsewhere in this stylesheet) so only
   the page that actually renders the bar gets the padding. */
#main:has(.estimate-bar) {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
/* Price + label + VAT note sit on one baseline-aligned row. */
.estimate-bar .est-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  min-width: 0;
}
.estimate-bar .est-figure {
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.estimate-bar small { color: var(--ink-on-dark-2); font-size: .8125rem; }
.estimate-bar .est-side { display: flex; align-items: center; gap: .5rem; flex: none; }
.estimate-bar a { color: #fff; font-weight: 700; display: inline-flex; align-items: center; min-height: var(--tap); }
/* Mobile-only sticky "Continue" — desktop keeps the in-flow step nav */
.est-next { display: none; }
@media (max-width: 600px) {
  .estimate-bar { gap: var(--sp-2); }
  /* Keep the bar one slim line on mobile: drop the label + VAT note (carried by the
     in-flow reassurance line above) and the secondary "Save my design" button (still
     available on the deposit step). The figure + primary Continue action remain. */
  .estimate-bar .est-main small { display: none; }
  .estimate-bar #est-save-btn { display: none !important; }
  .est-next:not([hidden]) { display: inline-flex; }
}

/* Product-aware reassurance line under the progress steps (relocated out of the
   slim sticky price bar). 16px floor for readability; hidden until JS fills it. */
.cfg-reassure {
  margin: var(--sp-2) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.cfg-reassure:empty { display: none; }

/* ---- Configurator: progress steps ---- */
.c-prog {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c-prog__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  flex: 1;
  min-width: 3rem;
  position: relative;
  padding: .5rem .25rem;
  cursor: default;
}
.c-prog__step + .c-prog__step::before {
  content: '';
  position: absolute;
  top: 1.1rem;
  left: calc(-50% + 1.1rem);
  right: calc(50% + 1.1rem);
  height: 2px;
  background: var(--line);
  transition: background var(--dur-base) var(--ease-out);
}
.c-prog__step.is-done + .c-prog__step::before { background: var(--anthracite); }
.c-prog__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.c-prog__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-base);
}
.c-prog__step.is-active .c-prog__num  { background: var(--anthracite); border-color: var(--anthracite); color: #fff; }
.c-prog__step.is-active .c-prog__label { color: var(--anthracite); }
.c-prog__step.is-done   .c-prog__num  { background: var(--accent-50); border-color: var(--accent-600); color: var(--accent-600); }
.c-prog__step.is-done   .c-prog__label { color: var(--ink-2); }
/* back-navigation: done steps become clickable */
.c-prog__step.is-done { cursor: pointer; }
@media (max-width: 479px) { .c-prog__label { display: none; } }

/* Configurator steps are single-focus (one visible at a time), so a short step's
   bottom padding would stack with the footer's top padding into a large empty gap.
   Trim the block padding here — a scoped exception to the global .section rhythm
   (Part C item 8): the sitewide --sp-7 token is unchanged, only .c-step is reduced. */
@media (min-width: 768px) {
  .c-step { padding-block: var(--sp-6); }
}

/* ---- Configurator: step nav buttons ---- */
.c-step-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
/* The "Next:" action is the primary CTA on each step — make it clearly visible
   (the bare .btn has no fill and blends into the cream step background). */
.c-step-nav .btn[data-next-step] {
  background: var(--anthracite);
  color: #fff;
  border-color: var(--anthracite);
}
.c-step-nav .btn[data-next-step]:hover {
  background: var(--anthracite-soft);
  box-shadow: var(--shadow-sm);
}
.c-step-nav .btn[data-next-step][disabled],
.c-step-nav .btn[data-next-step][aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Configurator: order summary lines ---- */
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
}
.summary-line:last-child { border-bottom: 0; }
.summary-line__price {
  font-family: var(--font-head);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--anthracite);
}

/* ---- Configurator: gated (locked) option ---- */
.opt.is-gated {
  opacity: .62;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---- Card border-only variant (info boxes, no shadow) ---- */
.card--border {
  box-shadow: none;
  background: var(--bg-2);
}

/* ---- Inline field validation error ---- */
.field-error {
  color: var(--error);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: .5rem 0;
}

/* ---- General form feedback band (success or error) ---- */
.form-feedback {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink);
  border-left: 3px solid var(--accent-600);
}

/* ---- Legal documents (privacy, cookie, terms, deposit, installation) ---- */
.legal-doc { max-width: 72ch; }
.legal-doc h1 { margin-bottom: var(--sp-2); }
.legal-doc__meta { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.legal-doc__body { color: var(--ink); }
.legal-doc__body h2 { font-size: var(--fs-h3); margin-top: var(--sp-5); }
.legal-doc__body h3 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
.legal-doc__body ul,
.legal-doc__body ol { padding-left: 1.5rem; margin-bottom: var(--sp-2); }
.legal-doc__body hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.legal-doc__body a { color: var(--accent-600); }
.legal-doc__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0;
  font-size: var(--fs-sm);
  display: block;
  overflow-x: auto;
}
.legal-doc__body th,
.legal-doc__body td {
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal-doc__body th { background: var(--bg-2); font-weight: 600; color: var(--ink); }

/* Blog / guide prose tables (e.g. the "At a glance" comparison) — unstyled by default. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  display: block;          /* lets the table scroll on narrow screens */
  overflow-x: auto;
}
.entry-content th,
.entry-content td {
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.entry-content thead th { background: var(--bg-2); font-weight: 700; color: var(--ink); }
.legal-doc__statutory {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-style: italic;
}

/* ---- Deposit-consent checkbox (configurator checkout) ---- */
.field--consent { margin-top: var(--sp-3); }
.consent-label {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--anthracite);
}
.consent-label a { color: var(--accent-600); }

/* ==========================================================================
   ROOF TYPE VISUALISER (Steel Garages) — mobile-first
   ========================================================================== */
.roof-vis {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 720px;
  margin-inline: auto;
}
.roof-vis__controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.rv-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
/* The flex display above overrides the [hidden] attribute's display:none, so the
   roof-profile (steel) and roof-type (insulated) fields can't be toggled without
   this. Restore hidden behaviour. */
.rv-field[hidden] { display: none; }
.rv-field__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

/* Shared option-card look (size + roof). */
.rv-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rv-group--roof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.rv-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 44px;
  min-width: 64px;
  padding: var(--sp-2);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rv-group--size .rv-opt { flex: 1 1 0; }
.rv-opt__icon svg { display: block; width: 48px; height: 32px; color: var(--anthracite); }
.rv-opt__label { font-size: var(--fs-sm); line-height: 1.2; text-align: center; }
.rv-opt[aria-checked="true"] {
  border-color: var(--anthracite);
  box-shadow: inset 0 0 0 1px var(--anthracite);
}
.rv-opt:hover { border-color: var(--anthracite-soft); }

/* Finish swatches — pill with colour dot.
   Mobile: 2-column grid so pills snap to even rows.
   Wider: free-wrap centred flex. */
.rv-group--finish {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.rv-swatch {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;            /* keep the tap target — shrink the visual, not the hit area */
  width: 100%;
  padding: 4px 12px 4px 4px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rv-swatch__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(31, 35, 38, .18);
  flex: none;
}
@media (min-width: 560px) {
  .rv-group--finish {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rv-swatch { width: auto; }
}
.rv-swatch[aria-checked="true"] {
  border-color: var(--anthracite);
  box-shadow: inset 0 0 0 1px var(--anthracite);
}
.rv-swatch:hover { border-color: var(--anthracite-soft); }

/* Keyboard focus — visible on every selectable control. */
.rv-opt:focus-visible,
.rv-swatch:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}

/* Preview. The container shrink-wraps the wall render (width:fit-content) so the
   absolutely-positioned door overlay always matches the wall's box exactly. The
   wall image carries the size cap (max-width/height) and its own aspect, so steel
   (1200×896) and insulated (1200×509) each stay un-distorted with no per-collection
   class needed. */
.rv-preview {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.rv-caption {
  margin: var(--sp-2) auto 0;
  max-width: 44ch;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.rv-note {
  margin: var(--sp-1) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-600);
}

@media (min-width: 560px) {
  .rv-group--roof { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-opt, .rv-swatch { transition: none; }
}

/* Planning-permission note for the taller apex insulated roof. */
.rv-permit-note {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2);
  background: var(--paper-2, #f4f2ed);
  border-left: 3px solid var(--accent-600);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---- Stacked preview layers (wall render + transparent door overlay) ---- */
.rv-preview { position: relative; }
/* Wall is the in-flow sizer: it keeps its own aspect (width/height auto) and is
   capped to fit the screen — ~500px wide, ~42vh tall, never wider than the viewport. */
.rv-layer--wall {
  display: block;
  width: auto;
  height: auto;
  max-width: min(500px, 92vw);
  max-height: 42vh;
}
.rv-layer--door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* ---- Step-4 colour area: two columns on desktop for garages + rooms ----
   Single column by default (mobile). JS adds --garages or --rooms modifier.
   Garages: swatch + controls left, sticky preview right.
   Rooms:   swatch left, sticky preview right (no controls row). */
@media (min-width: 900px) {
  /* Shared two-column base */
  .cfg-colour-area--garages,
  .cfg-colour-area--rooms {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
  }

  /* Garages: two rows (swatch+controls stack on left, preview spans right) */
  .cfg-colour-area--garages {
    grid-template-areas:
      "swatch   preview"
      "controls preview";
  }
  .cfg-colour-area--garages .cfg-colour-area__swatch   { grid-area: swatch; }
  .cfg-colour-area--garages .cfg-colour-area__controls { grid-area: controls; }

  /* Rooms: single row (swatch left, preview right) */
  .cfg-colour-area--rooms {
    grid-template-areas: "swatch preview";
  }
  .cfg-colour-area--rooms .cfg-colour-area__swatch { grid-area: swatch; }
  .cfg-colour-area--rooms .cfg-colour-area__preview--rooms { grid-area: preview; }

  /* Shared sticky preview behaviour (garages + rooms) — fills viewport between
     the sticky header (~59px) and the slim price bar (~67px), centres the
     image+caption group so the left column can scroll without riding the render
     up under the header or behind the price bar. */
  .cfg-colour-area--garages .cfg-colour-area__preview,
  .cfg-colour-area--rooms   .cfg-colour-area__preview--rooms {
    position: sticky;
    top: 59px;
    height: calc(100svh - 59px - 67px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .cfg-colour-area--garages .cfg-colour-area__preview { grid-area: preview; }

  /* Rooms preview figure: cap width (a touch smaller than garages — the garden
     scene reads heavier than the studio renders) + fill column, stays centred. */
  .cfg-colour-area--rooms .room-colour-preview { max-width: 440px; width: 100%; margin-inline: auto; }

  /* Garages: let controls fill their column; keep preview capped + centred. */
  .cfg-colour-area--garages .roof-vis    { max-width: none; margin: 0; }
  .cfg-colour-area--garages .rv-preview  { margin-inline: auto; }
  .cfg-colour-area--garages .rv-field__label { text-align: left; }
  .cfg-colour-area--garages .rv-group--finish { justify-content: flex-start; }
}

/* ---- RAL colour palette (garage doors) ---- */
.ral-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
}
.ral-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.ral-swatch__chip {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}
.ral-swatch__chip--signature {
  outline: 2px solid var(--anthracite);
  outline-offset: 2px;
}
.ral-swatch__ral {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.ral-swatch__name {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--ink-2);
  line-height: 1.3;
}
.ral-palette__note {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

/* ---- FAQ list (dl/dt/dd — for page-specific FAQ sections) ---- */
.faq-list {
  margin: var(--sp-4) 0 0;
}
.faq-list dt {
  font-weight: 650;
  font-size: var(--fs-base);
  color: var(--ink);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.faq-list dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.faq-list dd {
  margin: var(--sp-1) 0 0;
  color: var(--ink-2);
  line-height: 1.65;
}
.faq-list dd a {
  color: var(--anthracite);
  text-underline-offset: 2px;
}

/* ==========================================================================
   SPEC DRAWER — native <details> "Full specifications" inside product cards
   ========================================================================== */
.c-spec-drawer {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.c-spec-drawer__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  min-height: 44px;
}
.c-spec-drawer__toggle::-webkit-details-marker { display: none; }
.c-spec-drawer__toggle::after {
  content: "+";
  color: var(--anthracite);
  font-size: 1.25em;
  line-height: 1;
  transition: transform .2s ease;
}
.c-spec-drawer[open] .c-spec-drawer__toggle::after { content: "\2013"; } /* en dash */
.c-spec-drawer__toggle:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}
.c-spec-drawer__body { padding-bottom: var(--sp-2); }
.c-spec-drawer .spec { font-size: var(--fs-sm); }
.c-spec-drawer .spec th { white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .c-spec-drawer__toggle::after { transition: none; }
}

/* ==========================================================================
   Premium-lift refinements (2026-06-20) — execution-level only, brand locked.
   1. Homepage hero split layout   2. How-it-works timeline   3. Hover image
   zoom   4. Warm accent on the CTA band. All transform/opacity; reduced-motion
   honoured. Hero + timeline scoped to homepage modifier classes so the 27 inner
   heroes / 3 steps-strip pages are untouched.
   ========================================================================== */

/* ---- 1. Hero — split (copy left / building right on desktop) ----
   The copy lines are wrapped in .hero__text (one grid cell), so the grid is a
   clean 2-cell row: copy | image. This avoids the copy lines each becoming their
   own grid row and sprawling apart. Stacks to one column below 900px. */
.hero__grid { display: grid; gap: var(--sp-5); }
.hero--split .hero__media { margin-top: 0; } /* grid gap replaces the stacked margin */
/* Copy column: stack the lines with a tight, even typographic rhythm. */
.hero--split .hero__text { display: grid; gap: var(--sp-3); align-content: center; }
.hero--split .hero__text .hero__actions { margin-top: var(--sp-1); }
@media (min-width: 900px) {
  .hero--split .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--sp-6);
    align-items: center;
  }
  .hero--split .hero__grid > .hero__media {
    grid-column: 2;
    grid-row: 1;             /* sit beside the copy, not auto-flowed below it */
    align-self: center;
    aspect-ratio: 4 / 3;     /* read large beside the copy, not a thin strip */
  }
}

/* ---- Hero — content pages with a decorative line illustration ----
   faq / warranty / how-it-works / about / blog. Copy left, architectural
   line art right on desktop; the illustration is purely decorative so it is
   hidden on mobile to keep the hero clean and fast. */
.hero--illus .hero__text { display: grid; gap: var(--sp-3); align-content: center; }
.hero--illus .hero__text .hero__actions { margin-top: var(--sp-1); }
.hero--illus .hero__illus { display: none; }
.hero.hero--illus::after { content: none; display: none; } /* the dedicated illustration replaces the decorative background chevron */
.hero-illus :where(path, line, circle, rect) {
  fill: none;
  stroke: rgba(255, 255, 255, .42);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-illus .hi-a { stroke: var(--accent-on-dark, #d9a441); stroke-width: 3; }
@media (min-width: 900px) {
  .hero--illus .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--sp-6);
    align-items: center;
  }
  .hero--illus .hero__illus {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .hero-illus { width: 100%; height: auto; max-height: 21rem; display: block; }
}

/* ---- Hero — full-bleed cover (single immersive product hero) ----
   One unified section: the product photo fills the hero and the copy overlays
   on an anthracite scrim. ≥768px: cover layout (image fills section, copy
   centred over a horizontal scrim). <768px: stacked layout (image above,
   full-width 3:2, copy on anthracite background below). */
.hero--cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 0;
  /* Tightened so the product chooser below peeks above the fold for
     high-intent buyers (was clamp(30rem,76vh,46rem)). Mobile overrides
     min-height:0 in the stacked block below. */
  min-height: clamp(26rem, 60vh, 38rem);
}
.hero--cover > .hero__media {
  position: absolute;       /* fill the whole hero; .ph img is inset:0 inside it */
  inset: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
  min-height: 0;
}
/* Favour the building body, not the sky/roofline, when the wide (16:9) hero is
   cover-cropped into a short-wide box (e.g. 1366×768 ≈ 3:1) — the default centre
   crop shows only roofs. Shift the visible band down. Per-hero overrides below.
   On mobile the stacked hero is ~3:2 with no vertical crop, so this is a no-op there
   (full building stays visible). */
.hero--cover .hero__media img { object-position: center 70%; }
/* Steel page hero: pull the crop up so the whole garage + its setting show
   (roof, door, drive) rather than the tight door-height band — "zoom out". */
.page-template-page-garage-collection .hero--cover .hero__media img { object-position: center 45%; }

.hero--cover > .hero__media::after {        /* legibility scrim */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20,22,24,.94) 0%, rgba(20,22,24,.70) 40%,
    rgba(20,22,24,.48) 76%, rgba(20,22,24,.38) 100%);
}
.hero--cover > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--sp-4);
}
.hero--cover .hero__content { display: grid; gap: var(--sp-3); }
.hero--cover .hero__content .hero__actions { margin-top: var(--sp-1); }
.hero--cover h1 { max-width: 26ch; }   /* readable line length; ~2–3 lines, not a 5-line sliver */
.hero--cover p  { color: rgba(255,255,255,.93); max-width: 46ch; }
@media (min-width: 768px) {
  .hero--cover { justify-content: center; }  /* copy vertically centred on larger screens */
  .hero--cover > .hero__media::after {
    background:
      linear-gradient(100deg,
        rgba(20,22,24,.90) 0%, rgba(20,22,24,.64) 38%,
        rgba(20,22,24,.28) 66%, rgba(20,22,24,.06) 100%),
      linear-gradient(to top, rgba(20,22,24,.45) 0%, rgba(20,22,24,0) 38%);
  }
}
/* Mobile: stacked layout — image fully visible above copy */
@media (max-width: 767px) {
  .hero--cover {
    min-height: 0;
    justify-content: flex-start;
  }
  .hero--cover > .hero__media {
    position: relative;   /* restore .ph positioning context for the img inside */
    inset: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0;
    box-shadow: none;
  }
  .hero--cover > .hero__media::after { display: none; } /* scrim not needed when stacked */
}

/* Short-viewport laptops (e.g. 1366×768): the large display heading + 5-line
   lead pushed the hero CTAs below the fold. Compress the hero on short
   screens so the buttons stay visible — the full-height desktop look (taller
   viewports) is untouched. */
@media (min-width: 768px) and (max-height: 740px) {
  /* Cover (full-bleed product heroes): front page + 4 product pages. */
  .hero--cover { min-height: 0; justify-content: center; }
  .hero--cover > .container { padding-block: var(--sp-3); }
  .hero--cover .hero__content { gap: var(--sp-2); }
  .hero--cover h1.display { font-size: clamp(2rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1.06; }
  .hero--cover p { font-size: 1rem; }

  /* Split + illus (copy-led heroes: garages hub, doors, add-on &
     content pages). They inherit the tall sp-7 base padding — trim it and
     the heading so the hero + its CTA fit a short laptop. */
  .hero--split, .hero--illus { padding-block: var(--sp-4); }
  .hero--split h1, .hero--illus h1 { font-size: clamp(1.85rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.08; }
  .hero--split .hero__text, .hero--illus .hero__text { gap: var(--sp-2); }
}

/* ---- 2. How-it-works — connected timeline (homepage only, ≥768px) ----
   Borderless centred steps with a hairline joining each number to the next,
   so the four steps read as one journey instead of four repeated cards. */
@media (min-width: 768px) {
  .steps-strip--timeline { gap: var(--sp-4); }
  .steps-strip--timeline .step-card {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    text-align: center;
  }
  .steps-strip--timeline .step-card::before {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    margin-bottom: var(--sp-2);
    box-shadow: 0 0 0 6px var(--bg-2); /* mask the rail where it meets the circle (section is --alt) */
  }
  /* the rail: from this circle's centre to the next circle's centre */
  .steps-strip--timeline .step-card::after {
    content: "";
    position: absolute;
    top: 1rem;                          /* vertical centre of the 2rem number circle */
    left: 50%;
    width: calc(100% + var(--sp-4));    /* reach across the column gap to the next centre */
    height: 2px;
    background: var(--line);
    z-index: 0;
  }
  .steps-strip--timeline .step-card:last-child::after { display: none; }
}

/* ---- 3. Hover image zoom — tactile, transform-only, off under reduced motion ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card--hover .ph img,
  .gallery .ph img {
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .card--hover:hover .ph img { transform: scale(1.04); }
  .gallery .ph:hover img     { transform: scale(1.05); }
}

/* ---- 4. Warm accent — a single bronze halo behind the final CTA headline ---- */
.cta-band {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,168,106,.16) 0%, rgba(201,168,106,0) 55%),
    var(--anthracite);
}

/* Configurator use-case presets — share the .opt card look, single-line label */
.opt--usecase { text-align: left; cursor: pointer; min-height: 44px; }
.opt--usecase[aria-pressed="true"] { outline: 2px solid var(--anthracite); outline-offset: 2px; }

/* Garden-rooms extras — 3-state sections (included / add / upgrade) */
.rx-section { margin-bottom: var(--sp-4); }
.rx-section > h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
/* Garage add-on section headings are centred to match the "Start with…" intro above. */
#gx-add > h3, #gx-locked > h3 { text-align: center; }
.rx-state { display: block; }
.rx-state--included { font-weight: 600; color: var(--anthracite, #2B2F33); }
.rx-state--included [aria-hidden] { color: #3f6e28; }     /* decorative check, text stays full-contrast */
.rx-state--upgrade { color: var(--ink-2, #4B5563); font-weight: 500; }
/* Included/upgrade cards aren't selectable: hide the checkbox + price, calm background */
.rx-item--included { background: var(--paper-2, #f4f2ed); }
.rx-item--included input[type="checkbox"],
.rx-item--upgrade  input[type="checkbox"] { display: none; }

/* Garage upgrades — locked cards (in the "Available once you add electrics" group)
   aren't selectable yet, so hide their checkbox; the section header explains the gate. */
[data-gx-grid="locked"] input[type="checkbox"] { display: none; }

/* Swatch palette — flex so an incomplete final row centers instead of leaving a
   left-aligned orphan pair (e.g. 5 swatches in 3 columns → bottom 2 centered).
   Mobile: one per row; desktop: capped width, wrapping rows centered. */
.swatch-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.swatch-palette > figure { flex: 1 1 280px; }
@media (min-width: 700px) { .swatch-palette > figure { max-width: 336px; } }

/* Technical spec figures (insulated-panel build) — white cards, no crop. Wide
   line-drawings stay full column width so dimension text stays legible. Stacked. */
.spec-figs { max-width: 760px; margin-inline: auto; display: grid; gap: var(--sp-4); }
.spec-figs figure { margin: 0; }
.spec-figs .pf { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius-sm); padding: var(--sp-3); }
.spec-figs .pf img { display: block; width: 100%; height: auto; }
.spec-figs .pf--narrow img { max-width: 420px; margin-inline: auto; }
.spec-figs figcaption { font-size: var(--fs-sm); color: var(--ink-2); text-align: center; margin-top: var(--sp-1); }

/* Glazing component cards — 3-up on desktop, image contained (no crop), equal height. */
.glz-figs { max-width: 1000px; margin-inline: auto; display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .glz-figs { grid-template-columns: repeat(3, 1fr); } }
.glz-figs figure { margin: 0; }
.glz-figs .pf { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius-sm); padding: var(--sp-3); height: 240px; display: flex; align-items: center; justify-content: center; }
/* Cap image HEIGHT so all three render the same size whatever their aspect ratio
   (the tall glass unit shrinks to match the frame shots). */
.glz-figs .pf img { max-width: 100%; max-height: 188px; width: auto; height: auto; }
.glz-figs figcaption { font-size: var(--fs-sm); color: var(--ink-2); text-align: center; margin-top: var(--sp-1); }

/* ============================================================
   FAZ cookie consent — branded to VeltHaven (anthracite + gold).
   FAZ exposes its colours as CSS custom properties set inline on
   <html> + the consent containers; we override them with !important
   (which beats non-important inline). Toggle + link colours are
   hard-coded in the plugin, so they're targeted directly.
   Accept and Reject are kept EQUAL weight (both anthracite) — the
   honest, no-dark-pattern choice; "Save my preferences" is the ghost.
   ============================================================ */
html, .faz-consent-container, .faz-modal, .faz-optout-popup, .faz-preference-center {
	/* filled primary actions — Accept + Reject, equal prominence */
	--faz-accept-button-background-color: #2B2F33 !important;
	--faz-accept-button-border-color:     #2B2F33 !important;
	--faz-accept-button-color:            #FFFFFF !important;
	--faz-reject-button-background-color: #2B2F33 !important;
	--faz-reject-button-border-color:     #2B2F33 !important;
	--faz-reject-button-color:            #FFFFFF !important;
	--faz-detail-accept-button-background-color: #2B2F33 !important;
	--faz-detail-accept-button-border-color:     #2B2F33 !important;
	--faz-detail-accept-button-color:            #FFFFFF !important;
	--faz-detail-reject-button-background-color: #2B2F33 !important;
	--faz-detail-reject-button-border-color:     #2B2F33 !important;
	--faz-detail-reject-button-color:            #FFFFFF !important;
	/* secondary 'Save my preferences' / settings — ghost (transparent, ink, line) */
	--faz-settings-button-background-color: transparent !important;
	--faz-settings-button-border-color:     #DCDAD5 !important;
	--faz-settings-button-color:            #1F2326 !important;
	--faz-detail-save-button-background-color: transparent !important;
	--faz-detail-save-button-border-color:     #DCDAD5 !important;
	--faz-detail-save-button-color:            #1F2326 !important;
	/* text + surfaces */
	--faz-title-color:            #1F2326 !important;
	--faz-description-color:      #4B5563 !important;
	--faz-notice-background-color:#FFFFFF !important;
	--faz-notice-border-color:    #DCDAD5 !important;
	--faz-detail-color:           #1F2326 !important;
	--faz-detail-background-color:#FFFFFF !important;
	--faz-detail-border-color:    #DCDAD5 !important;
	--faz-detail-title-color:     #1F2326 !important;
	--faz-detail-description-color:#4B5563 !important;
	--faz-detail-category-title-color:       #1F2326 !important;
	--faz-detail-category-description-color:  #4B5563 !important;
	/* optout (CCPA) popup — keep consistent */
	--faz-optout-title-color:       #1F2326 !important;
	--faz-optout-description-color:  #4B5563 !important;
}
/* hard-coded colours: links + the on toggles → gold / anthracite */
.faz-consent-container .faz-show-desc-btn,
.faz-modal .faz-show-desc-btn { color: #7A6038 !important; }
.faz-switch input:checked { background-color: #2B2F33 !important; }
/* premium polish: slightly tighter radius + weight, matching site buttons */
.faz-btn { border-radius: 6px !important; font-weight: 600 !important; }
.faz-btn:hover { filter: brightness(1.08); }
/* a11y floor: FAZ ships 14px body/links/buttons — below VeltHaven's 16px minimum.
   Consent is a decision premium older buyers must be able to read; bump text +
   controls to 1rem (respects user zoom). Title (.faz-title, 18px) is already fine. */
.faz-consent-container p, .faz-modal p, .faz-preference-center p,
.faz-description, .faz-detail-description, .faz-detail-category-description {
	font-size: 1rem !important;
	line-height: 1.5 !important;
}
.faz-btn,
.faz-consent-container .faz-policy, .faz-modal .faz-policy,
.faz-consent-container .faz-show-desc-btn, .faz-modal .faz-show-desc-btn {
	font-size: 1rem !important;
}

/* ==========================================================================
   Configurator — Door & Window Layout step (step 6, garages)
   Top-down guide plan. The automatic garage door is FIXED on the front wall;
   the pedestrian ENTRY door sits on the rear/left/right wall (l/c/r) and the
   other positions take windows. Anthracite walls, bronze-accent door/windows.
   Mobile-first; two columns (controls | plan) from 720px.
   ========================================================================== */
.gplan-layout { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .gplan-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

.gplan-fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-3); }
.gplan-fieldset__legend { font-weight: 600; margin-bottom: var(--sp-1); padding: 0; }

.seg { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.seg__btn {
  flex: 1 1 auto; min-height: var(--tap); padding: var(--sp-1) var(--sp-2);
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font-size: var(--fs-base); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.seg__btn[aria-checked="true"] { border-color: var(--anthracite); box-shadow: inset 0 0 0 1px var(--anthracite); font-weight: 600; }
.seg__btn:hover { border-color: var(--anthracite-soft); }
.seg__btn:focus-visible { outline: 3px solid var(--accent-600); outline-offset: 2px; }

.gplan__count { font-size: var(--fs-base); font-weight: 600; margin: var(--sp-2) 0 var(--sp-1); min-height: 1.5em; }

.gplan {
  position: relative; width: 100%; max-width: 440px; margin: var(--sp-4) auto var(--sp-5);
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 9px, transparent 9px 18px);
  border: 3px solid var(--anthracite); border-radius: 6px;
}

.gplan__wall {
  position: absolute; font-size: var(--fs-xs); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-2); background: var(--bg); padding: 0 4px; white-space: nowrap;
}
.gplan__wall--rear  { top: -10px;    left: 50%; transform: translateX(-50%); }
.gplan__wall--front { bottom: -10px; left: 50%; transform: translateX(-50%); }
.gplan__wall--left  { left: 0; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.gplan__wall--right { right: 0; top: 50%; transform: translate(50%, -50%) rotate(90deg); }

/* Automatic garage door — fixed on the front (driveway) wall. */
.gplan__garagedoor {
  position: absolute; bottom: -7px; left: 25%; width: 50%; height: 13px;
  background: var(--anthracite); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--bg-2);
}

/* Pedestrian entry door — chosen wall (rear/left/right) + position (l/c/r). */
/* No position transition: the door jumps between walls (a discrete move); animating
   top/left across px<->% units leaves it visually stuck mid-switch. */
.gplan__door { position: absolute; background: var(--accent-600); border-radius: 2px; }
.gplan[data-door-wall="rear"]  .gplan__door { height: 11px; width: 16%; top: -6px; }
.gplan[data-door-wall="rear"][data-door-pos="l"] .gplan__door { left: 17%; }
.gplan[data-door-wall="rear"][data-door-pos="c"] .gplan__door { left: 42%; }
.gplan[data-door-wall="rear"][data-door-pos="r"] .gplan__door { left: 67%; }
.gplan[data-door-wall="left"]  .gplan__door { width: 11px; height: 16%; left: -6px; }
.gplan[data-door-wall="left"][data-door-pos="l"]  .gplan__door { top: 17%; }
.gplan[data-door-wall="left"][data-door-pos="c"]  .gplan__door { top: 42%; }
.gplan[data-door-wall="left"][data-door-pos="r"]  .gplan__door { top: 67%; }
.gplan[data-door-wall="right"] .gplan__door { width: 11px; height: 16%; right: -6px; }
.gplan[data-door-wall="right"][data-door-pos="l"] .gplan__door { top: 17%; }
.gplan[data-door-wall="right"][data-door-pos="c"] .gplan__door { top: 42%; }
.gplan[data-door-wall="right"][data-door-pos="r"] .gplan__door { top: 67%; }
.gplan[data-door-wall="front"] .gplan__door { height: 11px; width: 16%; bottom: -6px; top: auto; }
.gplan[data-door-wall="front"][data-door-pos="l"] .gplan__door { left: 5%; }
.gplan[data-door-wall="front"][data-door-pos="r"] .gplan__door { left: 79%; }

/* Window slots — real buttons straddling their wall (44px hit area). */
.gplan__slot {
  position: absolute; width: var(--tap); height: var(--tap); margin: 0; padding: 0;
  background: transparent; border: 0; cursor: pointer; transform: translate(-50%, -50%);
  display: grid; place-items: center;
}
.gplan__slot-mark { width: 20px; height: 20px; border: 2px dashed var(--accent-400); border-radius: 4px; background: var(--bg); transition: background .15s ease, border-color .15s ease; }
.gplan__slot.is-placed .gplan__slot-mark { background: var(--accent-400); border-style: solid; border-color: var(--accent-600); }
.gplan__slot:hover .gplan__slot-mark { border-color: var(--anthracite); }
.gplan__slot:focus-visible { outline: 3px solid var(--accent-600); outline-offset: -2px; border-radius: 8px; }
.gplan__slot:disabled { cursor: default; }
.gplan__slot:disabled .gplan__slot-mark { opacity: .3; }
/* The position the entry door occupies is not a window slot. */
.gplan__slot.is-door { display: none; }

/* Slot centre points (rear top wall; left/right side walls). */
.gplan__slot--rear-l  { top: 0;    left: 25%; }
.gplan__slot--rear-c  { top: 0;    left: 50%; }
.gplan__slot--rear-r  { top: 0;    left: 75%; }
.gplan__slot--left-l  { left: 0;    top: 25%; }
.gplan__slot--left-c  { left: 0;    top: 50%; }
.gplan__slot--left-r  { left: 0;    top: 75%; }
.gplan__slot--right-l { left: 100%; top: 25%; }
.gplan__slot--right-c { left: 100%; top: 50%; }
.gplan__slot--right-r { left: 100%; top: 75%; }
.gplan__slot--front-l { top: 100%; left: 13%; }
.gplan__slot--front-r { top: 100%; left: 87%; }
/* Front window/door slots only exist for certain size+bay combos. */
.gplan[data-front="off"] .gplan__slot--front-l,
.gplan[data-front="off"] .gplan__slot--front-r { display: none; }

.gplan .viz-label { position: absolute; bottom: 6px; right: 8px; }

@media (prefers-reduced-motion: reduce) { .gplan__slot-mark, .seg__btn { transition: none; } }

/* Add-on row with only two cards (steel garages — no Climate Comfort): centre it
   instead of left-aligning in the 3-column grid. */
@media (min-width: 980px) {
  .gx-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 66%;
    margin-inline: auto;
  }
}

/* Muted note text — ponytail audit 2026-06-27.
   Consolidates the repeated inline `font-size:var(--fs-sm);color:var(--ink-2)`
   (was 64+ inline copies). Margin-top stays inline where it varies. */
.text-note { font-size: var(--fs-sm); color: var(--ink-2); }

/* Card text fit — ux-pro 2026-06-27. Keeps price + spec text inside the card
   frame in narrow grid columns. (1) min-width:0 lets grid items shrink & wrap
   instead of overflowing their track (the classic grid blow-out). (2) the price
   suffix ("fully installed, incl. VAT") drops to its own line so a long price
   like "From £49,950" never runs over the right edge. */
.grid > * { min-width: 0; }
.card .price { overflow-wrap: anywhere; }
.card .price small { display: block; margin-top: 2px; }
/* Spec drawer table: auto layout let the table expand past the card (overran ~80px).
   Constrain to the card width + wrap cells so spec rows stay inside the frame. */
.c-spec-drawer .spec { width: 100%; table-layout: fixed; }
.c-spec-drawer .spec th,
.c-spec-drawer .spec td { white-space: normal; overflow-wrap: anywhere; }
/* The spec drawer is a flex item of .card with default min-width:auto, so it
   wouldn't shrink below the table's content (table stayed ~80px too wide).
   Let it shrink; scroll as a last resort instead of overrunning the card. */
.c-spec-drawer { min-width: 0; }
.c-spec-drawer__body { min-width: 0; overflow-x: auto; }
/* Override base .spec min-width:420px inside the narrow spa-card drawer so the
   table shrinks to the card (table-layout:fixed then wraps cells to fit). */
.c-spec-drawer .spec { min-width: 0; }

/* ==========================================================================
   Garage model gallery (template-parts/garage-model-gallery.php)
   7-model catalogue: real photo + to-scale floor plan + emphasised size.
   Older-reader floor: size 1.6rem, explanation 1.07rem, CTA 48px.
   ========================================================================== */
.gm-group{font-family:var(--font-head);font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-600);margin:var(--sp-4) 0 var(--sp-2);
  display:flex;align-items:center;gap:.7rem}
.gm-rule{flex:1;height:1px;background:var(--line)}
/* Card grid: 1-up (mobile) -> 2-up -> 3-up. With 3 cards per group the count is
   odd, so in the 2-up band the last odd card spans BOTH columns (a full-width
   card) rather than sitting alone in one column. Reset at 3-up where 3 cards
   already make a clean single row. */
.gm-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:620px){
  .gm-grid{grid-template-columns:repeat(2,1fr)}
  .gm-grid>.gm-card:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:980px){
  .gm-grid{grid-template-columns:repeat(3,1fr)}
  .gm-grid>.gm-card:last-child:nth-child(odd){grid-column:auto}
}
.gm-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(31,35,38,.04),0 10px 26px rgba(31,35,38,.06)}
.gm-card--rec{border-color:var(--accent-400);border-width:2px}
.gm-photo{position:relative;aspect-ratio:16/10;background:var(--anthracite);overflow:hidden}
.gm-photo .viz-label{top:auto;bottom:11px;left:11px}
.gm-photo img,.gm-photo picture,.gm-photo .ph{width:100%;height:100%;object-fit:cover;display:block}
.gm-plan{background:var(--bg-2);border-top:1px solid var(--line)}
.gm-plan svg{display:block;width:100%;height:auto}
/* Grid cards: contain the floor plan inside a fixed-height drawing area so cards
   don't stretch unevenly by the drawing's aspect ratio, and pin the CTA to the
   bottom so the price/CTA line up across the row (the SVG scales to fit, centred). */
.gm-grid .gm-plan{height:200px;display:flex;align-items:center;justify-content:center;padding:8px 10px;box-sizing:border-box}
.gm-grid .gm-plan svg{width:100%;height:100%}
/* Reserve a uniform blurb height (~3 lines) so the price row lines up across the
   row too; the CTA is then pinned to the bottom. */
.gm-grid .gm-blurb{min-height:4.9rem}
.gm-grid .gm-cta{margin-top:auto}
.gm-body{padding:var(--sp-3);display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.15rem;flex:1}
.gm-body h3{font-size:1.2rem;margin:.1rem 0 .15rem}
.gm-size{font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:var(--anthracite);
  line-height:1.15;margin:.1rem 0 .05rem}
.gm-sub{font-size:1rem;color:var(--ink-2);margin:0 0 .15rem}
.gm-blurb{font-size:1.07rem;line-height:1.55;margin:.35rem auto .2rem;max-width:34ch}
.gm-price{font-family:var(--font-head);font-weight:700;font-size:1.3rem;margin:.45rem 0 .7rem}
.gm-price small{font-family:var(--font-body);font-weight:500;font-size:.82rem;color:var(--ink-2)}
.gm-cta{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center}
.gm-roofs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem .5rem;margin:.3rem 0 .1rem}
.gm-roofs__label{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--anthracite)}
.gm-roofs__icons{display:inline-flex;gap:.3rem}
.gm-roof{display:inline-flex;width:30px;height:22px;color:var(--anthracite);opacity:.85}
.gm-roof svg{width:100%;height:100%}
.gm-roofs__note{font-size:.95rem;color:var(--ink-2)}
.gm-rec{position:absolute;top:11px;left:11px;background:var(--accent-50);color:var(--accent-600);
  font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  padding:.28rem .6rem;border-radius:999px;border:1px solid var(--accent-400);z-index:2}
.gm-doors{position:absolute;top:11px;right:11px;background:var(--anthracite);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:.72rem;padding:.28rem .6rem;border-radius:999px;z-index:2}
/* Featured "recommendation" card: wide/horizontal on desktop (photo | plan |
   body), stacked on mobile. On desktop the photo stretches to the full card
   height (height:100% + object-fit:cover) so it fills its cell with no empty
   bands and the garage reads large (restored 2026-07-01 — the 16:10 box left
   gaps above/below = "image doesn't fit"). Mobile keeps the base 16:10 ratio. */
.gm-card--wide{grid-column:1/-1}
/* On mobile the featured card stacks like a normal card — give its floorplan the
   same 200px sizing as the grid cards so it matches them (was uncapped/taller). */
.gm-card--wide .gm-plan{height:200px;display:flex;align-items:center;justify-content:center;padding:8px 10px;box-sizing:border-box}
.gm-card--wide .gm-plan svg{width:100%;height:100%}
@media (min-width:760px){
  .gm-card--wide{flex-direction:row}
  .gm-card--wide .gm-media{flex:1 1 58%;display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch;min-width:0}
  .gm-card--wide .gm-photo{aspect-ratio:auto;height:100%}
  /* Plan panel stretches to full card height too (height:auto overrides the
     mobile 200px) so its cream panel + left divider match the filled photo;
     the drawing centres inside via flex align/justify. */
  .gm-card--wide .gm-plan{border-top:0;border-left:1px solid var(--line);display:flex;align-items:center;justify-content:center;height:auto}
  .gm-card--wide .gm-body{flex:1 1 44%;justify-content:center}
}

/* ---- Step-7 configured-building preview -------------------------------------
   The finish render (+ garages: layout plan) the buyer configured, mirrored at
   the "Lock your price" step. configurator.js clones the live preview + gplan
   nodes into the slots below, so those nodes keep their own classes (.rv-preview,
   .room-colour-preview, .gplan) and inherit the styling defined above; this block
   only lays out the pairing + caption. */
.summary-preview { margin: 0 0 var(--sp-4); }
.summary-preview__media {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  align-items: center;
}
@media (min-width: 720px) {
  .summary-preview__media--paired { grid-template-columns: 1fr 1fr; align-items: center; }
}
.summary-preview__image,
.summary-preview__plan { width: 100%; display: flex; justify-content: center; }
/* The side-wall window slots overhang the plan edge by half a tap target (left:100% +
   translate(-50%)); reserve that overhang so the clone can't cause h-scroll at 375px. */
.summary-preview__plan { padding-inline: calc(var(--tap) / 2); }
.summary-preview .rv-preview,
.summary-preview .room-colour-preview { margin: 0; }
.summary-preview .gplan { width: 100%; max-width: 340px; margin: 0; }
/* Cloned plan is a static snapshot — drop the interactive slot affordance. */
.summary-preview .gplan__slot { cursor: default; }
.summary-preview__caption {
  margin: var(--sp-2) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 1rem;          /* 16px floor */
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- Garden Room package pages (Core / Signature / Executive, 2026-07-06) ---- */
/* Per-model price strip: bold, on the dark hero (white) or a light card (ink). */
.pkg-price-strip { font-size: var(--fs-lg); font-weight: 700; color: #fff; margin: var(--sp-1) 0; }
.pkg-price-strip--light { color: var(--ink); }
/* Small fine-print line that stays legible on the dark hero. */
.hero__fine { font-size: var(--fs-sm); color: var(--ink-on-dark-2); margin: 0; }
/* "What's not included" lists: an en-dash marker instead of the ✓ (wrong semantics). */
.ticklist--plain li::before { content: "\2013"; color: var(--ink-2); font-weight: 600; }

/* ---- Configurator: address autocomplete + line-2 disclosure (checkout step 7) ---- */
.cfg-addr-find { display: block; margin-bottom: var(--sp-2); }
.cfg-addr-find__label { display: block; font-weight: 600; margin-bottom: .35rem; }
.cfg-addr-find gmp-place-autocomplete {
  display: block;
  width: 100%;
  font-size: var(--fs-base); /* 16px floor — inner input inherits from the host */
}
.cfg-addr-find__hint {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: .35rem;
}
.cfg-addr2-toggle { margin: 0 0 var(--sp-2); }
.cfg-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);   /* 44px touch target */
  padding: .25rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}
.cfg-link-btn:hover { color: var(--anthracite-soft); }

/* ---- Configurator checkout: inline validation feedback ---- */
.vh-form__legend { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.vh-form input[aria-invalid="true"],
.vh-form textarea[aria-invalid="true"] { border-color: var(--error); }

/* ---- Configurator: checkout 2-screen phase (Order → Details) ---- */
.checkout-steps {
  display: flex;
  gap: .75rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.checkout-steps li { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.checkout-steps li:not(:first-child)::before { content: "\2192"; color: var(--ink-2); } /* arrow between the two */
.checkout-steps li.is-current { color: var(--anthracite); }
.checkout-screen[hidden] { display: none; } /* guard: form children set display, so make hidden authoritative */

/* ---- Configurator checkout: deposit rows + explanation + Fix-4 spacing ----
   Phase 7b (owner-approved): the deposit is a summary ROW in the order summary's key-value
   grammar, never a bordered centered card — the card silhouette read as a second button. */
.deposit-rows { margin-top: var(--sp-2); }
.deposit-rows--rule { border-top: 2px solid var(--anthracite); padding-top: var(--sp-2); margin-top: var(--sp-3); }
.deposit-rows__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.deposit-rows__row > span:first-child { font-weight: 600; }
.deposit-rows__row--muted { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-1); }
.deposit-rows__row--muted > span:first-child { font-weight: 400; }
.deposit-rows__figure { font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.deposit-rows .deposit-explain { max-width: none; }
.deposit-steps__heading { font-weight: 600; margin: var(--sp-3) 0 var(--sp-1); }
.deposit-explain { font-size: var(--fs-sm); color: var(--ink-2); margin: var(--sp-1) 0 0; }
.deposit-steps {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: var(--sp-2) 0 0;
  padding-left: 1.35rem;
}
.deposit-steps li { margin-bottom: .35rem; max-width: none; }
/* Phase 6 Fix 4 + Phase 7d density pass (owner: "still too much space between rows").
   Checkout-scoped only — other site forms keep the comfy defaults. Inputs drop from
   --tap-comfort (48px) to the WCAG --tap floor (44px), never below; labels sit tighter
   to their inputs; the notes textarea loses its oversize minimum (it renders rows=2). */
#checkout-form.vh-form { gap: .75rem; }
#checkout-form .field { gap: .25rem; }
#checkout-form input[type="text"],
#checkout-form input[type="email"],
#checkout-form input[type="tel"] { min-height: var(--tap); }
#checkout-form textarea { min-height: var(--tap); }

/* Placeholder examples (owner request): visibly lighter than typed input but still
   legible for older low-vision buyers — #6B7280 keeps ≥4.5:1 on white. Labels stay,
   so the hint is supplementary, never the only cue. */
#checkout-form ::placeholder { color: #6B7280; opacity: 1; }
.field-hint { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* ---- Phase 7: narrow Stripe-style checkout column + flattened box hierarchy ----
   Checkout (step 7 only) renders in a ~544px centered column — a form has no use for the
   1200px option-card container. Scoped via the step-7 container class; the product-selection
   steps (BUILD/FINISH) keep the wide .container untouched. */
.container.checkout-narrow { max-width: 34rem; }
/* De-boxed info blocks: content kept, border-card treatment dropped — a subtle top rule
   instead, so the deposit box is the single bordered element per checkout screen. */
.checkout-plain-note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
/* Phase 7c: grouped order summary — money rows keep full weight; spec rows are muted
   sub-rows under a small group heading with a targeted "Change" link back to its step. */
.summary-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.summary-group-head__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.summary-group-head__change { font-size: var(--fs-sm); font-weight: 600; }
.summary-line--spec,
.summary-line--spec .summary-line__price {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-weight: 400;
}
/* Custom-build invitation under size/range listings. */
.custom-build-note { margin-top: var(--sp-3); }
.center .custom-build-note, .center.custom-build-note { margin-inline: auto; }
/* In the narrow column the side-by-side render+plan pair has no room (two ~250px cells
   squeeze the plan into the render) — stack them, as on mobile. */
.checkout-narrow .summary-preview__media--paired { grid-template-columns: 1fr; }

/* Height-build comparison cards (Standard / SUV / VAN) — shared by the steel +
   insulated garage pages via template-parts/garage-height-cards.php. */
.hb-card { text-align: center; }
.hb-card__icon {
  width: 6rem;
  height: 2.5rem;
  margin: var(--sp-2) auto 0;
  color: var(--ink-2);
  display: block;
}
.hb-card__specs {
  margin: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}
.hb-card__specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--line);
}
.hb-card__specs dt { font-size: var(--fs-sm); color: var(--ink-2); text-align: left; }
.hb-card__specs dd {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Contact form: muted "(optional)" field markers + phone justification hint (F4). */
.field__optional { color: var(--ink-2); font-weight: 400; }
/* Genuine justification text the buyer reads — kept at the 16px body floor, not caption size. */
.field__hint { font-size: var(--fs-base); color: var(--ink-2); margin: 0; }

/* Foundation size-guidance table: 5 columns is too dense for 375px even scrolled,
   so mobile gets stacked cards instead of an overflow wrapper (CLAUDE.md §2 — no
   horizontal scroll on mobile). Same data, rendered twice server-side so both
   layouts stay real, translatable DOM text. */
.base-guide-table__table { display: none; }
.base-guide-table__cards { display: grid; gap: var(--sp-3); }
@media (min-width: 1024px) {
  /* 5 columns need more room than the 768px container gives (819px vs 720px
     available) — cards carry tablet widths too, table only once it fits clean. */
  .base-guide-table__table { display: table; }
  .base-guide-table__cards { display: none; }
}