/* ---------- Base & Tokens ----------
   Coastal Electric brand palette v2 (see /assets/Pallette Suggestion.png and
   the logo variants in /assets/img/): white, light gray, navy, charcoal, black.
   No green/amber in this palette — navy is the single brand accent (buttons,
   links, icons, dark bands), charcoal is reserved for headings/body text.
   --navy-deep and --charcoal-soft are *derived* shades (not in the original
   swatch) for hover states and muted secondary text respectively. */
:root {
  --navy: #2c3850;
  --navy-deep: #1c2536;
  --charcoal: #2e2c2d;
  --charcoal-soft: #6f6f6c;
  --gray-light: #dfdfda;
  --white: #ffffff;
  --black: #000000;
  --border: #eae9e5;
  /* Deliberately reserved for the homepage offer/awards band only (per the
     v2 homepage design) — not a general-purpose accent, don't reuse it
     elsewhere or it stops meaning "special offer". */
  --terracotta: #c05c3a;
  --terracotta-deep: #a34a2c;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(46, 44, 45, 0.25);
  --shadow-sm: 0 4px 14px -6px rgba(46, 44, 45, 0.18);
  --max-width: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; color: var(--charcoal); }
h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--charcoal-soft); }

a { color: inherit; text-decoration: none; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .78rem;
  color: var(--navy);
  margin: 0 0 .6em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .75em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--navy-deep); }

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-lg { padding: .9em 1.9em; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.logo img { height: 34px; width: auto; display: block; }

/* footer variant: sits on the navy band, uses the matching light-on-navy lockup */
.footer-logo { display: flex; align-items: center; white-space: nowrap; }
.footer-logo img { height: 38px; width: auto; display: block; }

.main-nav {
  display: flex;
  gap: 1.8em;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  font-weight: 500;
  color: var(--charcoal-soft);
  font-size: .95rem;
}
.main-nav a:hover { color: var(--navy); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.phone-link { font-weight: 600; font-size: .9rem; color: var(--navy); white-space: nowrap; }

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--charcoal);
  background: var(--gray-light);
  transition: background .15s ease, color .15s ease;
}
.cart-link:hover { background: var(--navy); color: var(--white); }
.cart-link svg { width: 21px; height: 21px; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.cart-link:hover .cart-count { background: var(--white); color: var(--navy); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--charcoal);
}

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(circle at 15% 20%, rgba(44, 56, 80, 0.10), transparent 55%), var(--gray-light);
  padding: 72px 0 60px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.hero h1 span { color: var(--navy); }
.hero-sub { font-size: 1.05rem; max-width: 46ch; }
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 1.6em 0; }
/* Deliberately quieter than .btn-primary — "buy now" should read as the one
   real choice; this is an escape hatch for trade/bulk buyers only, not a
   coequal second path for retail visitors. */
.hero-cta-secondary {
  font-size: .9rem;
  font-weight: 600;
  color: var(--charcoal-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-cta-secondary:hover { color: var(--navy); }
.hero-trust {
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
  display: flex;
  gap: 1.4em;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--navy);
  font-weight: 600;
}

/* Brand badge pill, top-right of the whole hero band — currently always
   "Panasonic" (the only brand sold today); per the v2 homepage design this
   is meant to change per hero slide once other brands are added. */
.hero-brand-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--white);
  color: var(--navy);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .5em 1.1em;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-product-photo {
  width: 100%;
  max-width: 440px;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(46, 44, 45, .2));
}

/* ---------- Offer + Trust row (replaces the old photo-background specials
   banner — see the v2 homepage design) ---------- */
.offer-trust { padding: 64px 0; }
.offer-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.offer-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.offer-eyebrow { color: var(--gray-light); }
.offer-heading {
  color: var(--white);
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  margin: 0 0 .4em;
}
.offer-sub { color: #e3e6ea; font-size: 1rem; margin: 0 0 .8em; }
/* Live batch status from /api/package-status — see script.js. Hidden until
   that fetch resolves so there's no empty gap while it loads. Same
   translucent-white treatment as the CTA row below it — terracotta is
   reserved for Buy Now, the one thing on the card that's an action. */
.offer-status {
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  padding: .6em .9em;
  margin: 0 0 1.2em;
}
/* Two CTAs, side by side, same size: Buy Now (solid terracotta — the one
   thing on the card that's time-pressured and needs to stand out) and
   Find Out More (outline). */
.offer-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.offer-cta, .offer-cta-secondary {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  padding: .85em 1.8em;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.offer-cta {
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  color: var(--white);
}
.offer-cta:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.offer-cta-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--white);
}
.offer-cta-secondary:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .8); }

.trust-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trust-card-heading { font-size: 1.3rem; margin: .2em 0 1.1em; }
.trust-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.trust-checklist li { display: flex; gap: 14px; align-items: flex-start; }
.trust-checklist-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(192, 92, 58, .12);
  color: var(--terracotta);
  font-size: .95rem;
}
.trust-checklist strong { display: block; font-size: .95rem; margin-bottom: .15em; }
.trust-checklist p { margin: 0; font-size: .85rem; color: var(--charcoal-soft); }

/* Postcode Locals "proud supporter" widget — a generic, portable component:
   an icon + two-line text link, on a translucent white card so it reads on
   any photo/gradient background. Copy assets/pcl-widget.html for a
   standalone version to embed elsewhere. */
.pcl-widget {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  color: var(--white);
  max-width: 100%;
}
.pcl-widget:hover { background: rgba(255, 255, 255, .2); }
.pcl-widget-icon { font-size: 1.3rem; flex-shrink: 0; }
.pcl-widget-text { display: flex; flex-direction: column; line-height: 1.35; }
.pcl-widget-text strong { font-size: .85rem; font-weight: 700; }
.pcl-widget-link { font-size: .78rem; color: var(--gray-light); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Longevity banner ---------- */
.longevity-banner { background: var(--gray-light); padding: 48px 0; text-align: center; }
.longevity-inner { max-width: 640px; margin: 0 auto; }
.longevity-stat {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .4em .9em;
  border-radius: 999px;
  margin: 0 0 16px;
}
.longevity-headline { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .5em; }
.longevity-sub { font-size: 1rem; color: var(--charcoal-soft); margin: 0; }

/* ---------- Installation widget (shown near the shop grid) ---------- */
.installation-widget {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(44, 56, 80, .06), var(--white) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 40px;
}
.installation-widget-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
}
.installation-widget-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.installation-widget-text strong { font-size: .96rem; }
.installation-widget-text span { font-size: .88rem; color: var(--charcoal-soft); }
.installation-widget-link {
  flex-shrink: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.installation-widget-link:hover { color: var(--navy-deep); }

/* ---------- Sections ---------- */
.section { padding: 76px 0; }
.section-alt { background: var(--gray-light); }
#installation { background: var(--gray-light); }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head .section-sub { margin: 0 auto; }
.section-sub { font-size: 1.02rem; }

/* ---------- Product grid ---------- */
.series-block { margin-bottom: 56px; }
.series-block:last-of-type { margin-bottom: 0; }
.series-head { max-width: 640px; margin: 0 0 28px; }
.series-head h3 { font-size: 1.4rem; margin-bottom: .3em; }
.series-head p { font-size: .95rem; margin: 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}
.product-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.product-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--navy);
  transform: translateY(-3px);
}

/* -- media (badges + product photo) -- */
.product-media {
  position: relative;
  padding: 20px 20px 8px;
  background:
    radial-gradient(60% 80% at 50% 45%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--gray-light), var(--white));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .4em .7em;
  border-radius: 6px;
  line-height: 1;
}
.badge-solid {
  background: var(--navy);
  color: var(--white);
}
.product-photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 20px;
}
.product-photo {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 20px rgba(46, 44, 45, 0.16));
}

/* -- body -- */
.product-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-sku {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  font-weight: 700;
  color: #919191;
  margin: 0 0 .5em;
}
.product-body h3 { margin-bottom: .4em; }
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: .8em;
}
.tag {
  font-size: .74rem;
  font-weight: 600;
  color: var(--navy);
  background: rgba(44, 56, 80, 0.09);
  padding: .3em .65em;
  border-radius: 999px;
}
.tag-icon-wrap { display: inline-flex; align-items: center; gap: .3em; }
.tag-icon { width: 12px; height: 12px; color: var(--navy); flex-shrink: 0; }
.product-capacity { color: var(--charcoal); font-weight: 700; font-size: .88rem; margin-bottom: 1.1em; }

.price-block {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-bottom: 16px;
}
.price-rrp {
  display: block;
  text-decoration: line-through;
  color: #919191;
  font-size: .85rem;
}
.price-tag {
  margin: .1em 0 .05em;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--charcoal);
  line-height: 1;
}
.price-currency {
  font-size: 1.2rem;
  font-weight: 700;
  vertical-align: top;
  margin-right: .05em;
  position: relative;
  top: .3em;
}
.price-caption {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--navy);
}

.product-body .btn { margin-top: auto; }

.shop-note {
  text-align: center;
  font-size: .85rem;
  margin: 36px auto 0;
  max-width: 60ch;
  color: #919191;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
}
.step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: .8em;
}
.step p { font-size: .92rem; margin: 0; }

/* ---------- Legal pages (privacy/warranty/terms) ---------- */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 { margin-top: 0; }
.legal-content h3 { margin: 1.6em 0 .5em; }
.legal-content p, .legal-content li { color: var(--charcoal-soft); font-size: .96rem; }
.legal-content ul, .legal-content ol { padding-left: 1.3em; margin: 0 0 1em; }
.legal-content li { margin-bottom: .4em; }
.legal-updated { font-size: .82rem; color: #919191; margin-bottom: 2em; }

.notice-box {
  background: #fff9e6;
  border: 1px solid #ffe49a;
  color: #7a5b00;
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: .92rem;
  max-width: 780px;
  margin: 32px auto 0;
}

/* ---------- Installation cost breakdown ---------- */
.cost-breakdown { max-width: 780px; margin: 40px auto 0; }
.cost-breakdown-head { text-align: center; margin-bottom: 20px; }
.cost-breakdown-head h3 { font-size: 1.25rem; margin: .2em 0 0; }

/* The bar and the label grid below it are given the IDENTICAL column
   definition here (one rule, two selectors, gap:0 on both) — that's what
   guarantees they line up as one continuous bar with zero drift. Any
   mismatch in either the column proportions or the gap between the two
   would reintroduce misalignment, so breathing room between the labels
   comes from padding *inside* .cost-item instead of a grid gap. */
.cost-breakdown-bar,
.cost-breakdown-grid {
  display: grid;
  grid-template-columns: 5fr 4fr minmax(90px, 1fr);
  gap: 0;
}
.cost-breakdown-bar {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden; /* segments touch with no visible seam — one continuous bar */
}
.cost-segment { display: block; height: 18px; }
.cost-segment-materials { background: var(--navy); }
.cost-segment-labour { background: #8ba3c9; }
.cost-segment-compliance { background: var(--white); }
.cost-item { text-align: center; padding: 0 12px; }
.cost-pct { display: block; font-size: 1.6rem; font-weight: 800; margin-bottom: .2em; }
.cost-pct-materials { color: var(--navy); }
.cost-pct-labour { color: #6f83a8; }
.cost-pct-compliance { color: var(--charcoal-soft); }
.cost-item h4 { font-size: .95rem; margin: 0 0 .35em; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--charcoal);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  font-weight: 700;
  color: var(--navy);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: .8em 0 0; font-size: .93rem; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact-details {
  list-style: none;
  padding: 0;
  margin: 1.4em 0 0;
  display: flex;
  flex-direction: column;
  gap: .7em;
  font-size: .95rem;
  color: var(--charcoal);
}
.contact-details a { color: var(--navy); font-weight: 600; }

.contact-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}
.form-row { margin-bottom: 18px; }
.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-row-split-narrow { grid-template-columns: 2.2fr 1fr; }
.form-row label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: .4em;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: .7em .9em;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--charcoal);
  background: var(--gray-light);
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  cursor: pointer;
  margin-bottom: 18px;
}
.checkbox-row input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  margin-top: .2em;
  flex-shrink: 0;
  accent-color: var(--navy);
}
.checkbox-row span {
  font-size: .9rem;
  color: var(--charcoal-soft);
  line-height: 1.45;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  background: var(--white);
}
.form-status {
  margin: 14px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  min-height: 1.2em;
}

/* ---------- Checkout ---------- */
.cart-empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--gray-light);
  border-radius: var(--radius);
}
.cart-empty p { font-size: 1.05rem; margin-bottom: 1.2em; }

.checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.checkout-grid[hidden] { display: none; }
.checkout-main { display: flex; flex-direction: column; gap: 24px; }

.checkout-explainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: var(--gray-light);
  border-radius: var(--radius);
  padding: 18px;
}
.checkout-explainer-4 { grid-template-columns: repeat(4, 1fr); }
.checkout-explainer-step { display: flex; gap: 10px; align-items: flex-start; }
.checkout-explainer-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-explainer-step strong { display: block; font-size: .88rem; color: var(--charcoal); margin-bottom: .15em; }
.checkout-explainer-step p { font-size: .78rem; margin: 0; line-height: 1.4; }

.cart-items { display: flex; flex-direction: column; gap: 16px; }
.checkout-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 32px; }
.checkout-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  padding: .6em 1.1em;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
/* Without this, the `display: inline-flex` above wins over the browser's
   default `[hidden] { display: none }` (an author rule always beats the
   UA stylesheet, regardless of specificity) — so a hidden pill would still
   render. Same fix already applied to .checkout-grid/.summary-row below. */
.checkout-pill[hidden] { display: none; }
.checkout-pill-addmore {
  background: var(--gray-light);
  border: 1px solid var(--border);
  color: var(--charcoal);
}
.checkout-pill-addmore:hover { background: var(--white); border-color: var(--navy); }
/* The 15 Packages upsell — terracotta like every other time-pressured CTA
   on the site (see .offer-cta), whether it's pointing back to the tiles or
   (once this month's batch is gone) out to the phone. */
.checkout-pill-package {
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  color: var(--white);
}
.checkout-pill-package:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.cart-item {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cart-item-photo {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gray-light), var(--white));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-item-photo img { width: 90%; height: auto; filter: drop-shadow(0 4px 6px rgba(46,44,45,.15)); }
.cart-item-info h4 { font-size: .95rem; margin: 0 0 .25em; }
.cart-item-sku { font-size: .74rem; color: var(--charcoal-soft); }
.cart-item-price { font-size: .95rem; font-weight: 700; color: var(--charcoal); white-space: nowrap; }
.cart-item-price-wrap { display: flex; align-items: center; gap: 8px; }
/* Shown next to the price when the Installation Package is selected, since
   the price itself is now a single combined unit + install figure — this
   flags why the number changed without a separate breakdown line. */
.cart-item-price-badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy);
  background: rgba(44, 56, 80, .1);
  padding: .25em .6em;
  border-radius: 999px;
  white-space: nowrap;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.qty-stepper button {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--gray-light);
  color: var(--charcoal);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.qty-stepper button:hover { background: var(--navy); color: var(--white); }
.qty-stepper input {
  width: 38px;
  height: 30px;
  border: none;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  color: var(--charcoal);
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item-remove {
  background: none;
  border: none;
  color: #919191;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.cart-item-remove:hover { color: var(--navy); }

.checkout-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.checkout-card h3 { font-size: 1.1rem; margin-bottom: .4em; }
.checkout-card-sub { font-size: .88rem; margin-bottom: 1em; }

/* -- Installation Package upsell card -- */
.upsell-card { border-color: var(--navy); background: linear-gradient(180deg, rgba(44, 56, 80, .05), var(--white) 60%); }
.upsell-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .35em .75em;
  border-radius: 999px;
  margin-bottom: 12px;
}

.install-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.install-toggle[hidden] { display: none; }
.toggle-btn {
  flex: 1;
  min-width: 180px;
  padding: .7em 1em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.toggle-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* The "yes" option always reads as the inviting default — a classic
   upsell pattern — while "no" stays a plain, low-friction opt-out. */
.toggle-btn-primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.toggle-btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.toggle-btn-muted { opacity: .5; }
.install-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.install-fields .form-row { margin-bottom: 14px; }

/* -- Property type selector (replaces the old upper-level count field) -- */
.dwelling-label { font-size: .85rem; font-weight: 600; margin: 0 0 10px; color: var(--charcoal); }
.dwelling-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.dwelling-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dwelling-btn:hover { border-color: var(--navy); }
.dwelling-btn[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.dwelling-icon { width: 28px; height: 28px; flex-shrink: 0; }
.install-schedule-note { margin-top: -2px; }

@media (max-width: 480px) {
  .dwelling-toggle { grid-template-columns: 1fr; }
  .dwelling-btn { flex-direction: row; justify-content: flex-start; padding: 10px 14px; }
}

/* -- Checkout header row + pop-out FAQ trigger -- */
.checkout-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.faq-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .55em 1.1em;
  font-size: .85rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  white-space: nowrap;
}
.faq-trigger:hover { border-color: var(--navy); color: var(--navy); }
.faq-trigger span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
}

/* -- Pop-out FAQ drawer: stays on the checkout page, no navigation away -- */
.faq-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(46, 44, 45, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 90;
}
.faq-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.faq-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--white);
  box-shadow: -12px 0 30px rgba(46, 44, 45, .18);
  z-index: 91;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.faq-drawer.open { transform: translateX(0); }
.faq-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.faq-drawer-header h3 { margin: 0; font-size: 1.1rem; }
.faq-drawer-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--charcoal-soft);
  padding: 4px 8px;
}
.faq-drawer-close:hover { color: var(--navy); }
.faq-drawer-body {
  padding: 20px 24px 32px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-drawer-body .faq-item p { font-size: .88rem; }
.faq-drawer-body .faq-item p + p { margin-top: .6em; }

/* -- "15 Packages, for 15 Years" Find Out window (index.html) --
   Centered dialog, not a side drawer — deliberately its own, higher
   z-index band (200/201) so it always sits above the FAQ drawer (90/91),
   the sticky header (50), or any other CTA already on the page, and it
   closes on scroll (see script.js) instead of trying to track a position
   as the page moves under it. */
.promo-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(46, 44, 45, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 200;
}
.promo-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.promo-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: min(480px, calc(100% - 32px));
  max-height: min(640px, calc(100vh - 64px));
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(46, 44, 45, .28);
  z-index: 201;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.promo-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.promo-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.promo-modal-header h3 { margin: 0; font-size: 1.15rem; }
.promo-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--charcoal-soft);
  padding: 4px 8px;
}
.promo-modal-close:hover { color: var(--navy); }
.promo-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.promo-modal-body h4 { font-size: .95rem; margin: 1.1em 0 .5em; }
.promo-modal-body h4:first-child { margin-top: 0; }
.promo-modal-lede { color: var(--charcoal); }
.promo-modal-steps, .promo-modal-terms {
  margin: 0;
  padding-left: 1.2em;
  font-size: .92rem;
  color: var(--charcoal-soft);
}
.promo-modal-steps li, .promo-modal-terms li { margin-bottom: .5em; }
.promo-modal-progress {
  background: var(--gray-light);
  border-radius: 8px;
  padding: .7em .9em;
  font-size: .85rem;
  font-weight: 600;
  color: var(--charcoal);
}
.promo-modal-cta { margin: 0 24px 24px; width: auto; }

.checkout-summary-card { position: sticky; top: 90px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
  padding: 10px 0;
}
.summary-row[hidden] { display: none; }
.summary-total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--charcoal);
}
/* The figure that actually gets charged today — deliberately styled to
   stand out from "Total" above it (which includes installation once
   selected, but isn't what Stripe charges right now). */
.summary-charge-today {
  margin-top: 6px;
  padding: 10px 14px;
  background: rgba(44, 56, 80, .08);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}
.summary-charge-today[hidden] { display: none; }
.summary-note { font-size: .8rem; color: var(--charcoal-soft); margin: 0 0 4px; }

#summary-delivery-value { font-weight: 600; color: var(--charcoal-soft); }
#summary-delivery-value.delivery-free { color: var(--navy); font-weight: 700; }
.checkout-summary-card .btn { margin-top: 18px; }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary-card { position: static; }
  .checkout-explainer-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .checkout-explainer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 60px 1fr; grid-template-areas: "photo info" "photo qty" "photo price"; }
  .cart-item-photo { grid-area: photo; width: 60px; height: 60px; }
  .cart-item-info { grid-area: info; }
  .qty-stepper { grid-area: qty; }
  .cart-item-price { grid-area: price; }
  .cart-item-remove { position: absolute; top: 10px; right: 10px; }
  .cart-item { position: relative; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #cfe0e6; padding: 56px 0 20px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-legal-line { font-size: .78rem; color: #b3b3b3; margin: 0 0 8px; }
.footer-tagline { font-size: .88rem; margin-top: .8em; color: #b3b3b3; max-width: 32ch; }
.footer-links h4 { color: var(--white); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .9em; }
.footer-links a { display: block; font-size: .9rem; color: #cccccc; margin-bottom: .6em; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { padding-top: 20px; font-size: .78rem; color: #b3b3b3; }

/* ---------- Trade account page ---------- */
.trade-container { max-width: 640px; }
.trade-auth-card { max-width: 460px; margin: 0 auto; }
.trade-tabs { margin-bottom: 24px; }
.trade-form .form-row { margin-bottom: 16px; }
.trade-field-hint { font-size: .78rem; color: var(--charcoal-soft); margin: .35em 0 0; }
.trade-link-btn {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--navy);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-align: center;
}
.trade-link-btn:hover { color: var(--navy-deep); }

.trade-dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.trade-order-card { max-width: 100%; }

.trade-order-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.trade-order-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.trade-order-table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--charcoal-soft);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  white-space: nowrap;
}
.trade-order-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.trade-order-table strong { display: block; font-size: .9rem; }
.trade-order-sku { display: block; font-size: .74rem; color: var(--charcoal-soft); margin-top: 2px; }
.trade-qty-input {
  width: 56px;
  padding: .4em .5em;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .9rem;
  text-align: center;
}
.trade-line-total { font-weight: 700; white-space: nowrap; }

.trade-delivery-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(44, 56, 80, .05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 18px;
}
.trade-delivery-banner.trade-delivery-active { background: rgba(44, 56, 80, .1); border-color: var(--navy); color: var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  /* .hero-inner stays display:grid on mobile (only the column count
     changes), so this badge is still a grid item — its own `display`
     doesn't apply (grid items are always blockified), which is why width
     is constrained explicitly instead. `order` places it above the photo. */
  .hero-brand-badge { position: static; width: fit-content; margin: 0 0 12px; order: -2; }
  .offer-trust-grid { grid-template-columns: 1fr; }
  .why-grid, .contact-grid { grid-template-columns: 1fr; }
  .why-points { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  /* The bar's whole point is showing segments side-by-side next to their
     matching label — once the grid below stacks to one column there's no
     "side-by-side" left to align to, and a 3-way split bar squeezed into
     a phone-width column reads as noise. Drop it and let the numbers
     speak for themselves. */
  .cost-breakdown-bar { display: none; }
  .cost-breakdown-grid { grid-template-columns: 1fr; gap: 20px; }
  .installation-widget { text-align: center; justify-content: center; }
  .installation-widget-text { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 16px 24px;
    gap: 1em;
    display: none;
  }
  .main-nav.open { display: flex; }
  /* Bare text links (no padding at the base .main-nav a rule) fall well
     short of a comfortable ~44px tap target once stacked vertically here —
     pad each one out without changing its visual text size. */
  .main-nav a { padding: 10px 4px; }
  .nav-toggle { display: flex; }
  .phone-link { display: none; }
}

@media (max-width: 760px) {
  .form-row-split { grid-template-columns: 1fr; }
}

/* Honeypot field for basic bot deterrence (see server/src/lib/botGuard.js)
   — positioned off-screen rather than display:none/visibility:hidden,
   since some bots specifically skip fields hidden that way but still fill
   in ones that are merely out of the visible viewport. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}