/* AquaFromAir — configurator page styles */

/* ── Shell CSS ─────────────────────────────────────── */

  /* ─── DESIGN TOKENS ───────────────────────────────── */
  :root {
    --abyss:      #1A2B2C;
    --teal:       #3D7A80;
    --teal-deep:  #2C5F64;
    --teal-mid:   #4E8F95;
    --aqua:       #86CCE0;
    --aqua-pale:  #C8E9F2;
    --linen:      #F2EBE1;
    --linen-mid:  #EAE0D4;
    --linen-dark: #DDD0C0;
    --gold:       #C8A96E;
    --mist:       #F2F5F2;
    --mist-pale:  #E6F3F4;
    --white:      #FFFFFF;
    --slate:      #7A9496;
    --text:       #2C3B3C;
    --text-light: #6B7C7D;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'Nunito Sans', sans-serif;
    background: var(--linen);
    color: var(--text);
  }



  /* ─── NAV — handled by global.css ─── */

  /* ─── UTILITIES ───────────────────────────────────── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity: 1; transform: translateY(0);
  }

  /* ─── MOBILE ──────────────────────────────────────── */


.cfg-hero {
  background: linear-gradient(135deg, #0d2f33 0%, #1a5560 45%, #2a7a7a 100%);
  padding: 140px 72px 36px;
  margin-top: 0;
  position: relative; overflow: hidden;
}
.cfg-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(126,202,201,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.cfg-hero-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.cfg-hero-left { flex: 0 0 auto; }
.cfg-hero-right { flex: 0 0 360px; text-align: right; padding-bottom: 4px; }
.cfg-hero-title {
  font-family: 'Fraunces', serif; font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 300; color: white; line-height: 1.08; margin-bottom: 0;
  white-space: nowrap;
}
.cfg-hero-title em {
  font-style: italic; color: var(--aqua); font-weight: 300;
}
.cfg-hero-sub {
  font-size: 12px; color: rgba(255,255,255,0.70);
  line-height: 1.7; font-weight: 300;
}
@media (max-width: 768px) {
  .cfg-hero { padding: 150px 24px 32px; margin-top: 0; }
  .cfg-hero-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cfg-hero-right { flex: none; width: 100%; text-align: left; }
  .cfg-hero-title { white-space: normal; }
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --abyss: #0d1f22;
  --teal: #3d7a80;
  --teal-deep: #2c5f64;
  --teal-mid: #4e8f95;
  --aqua: #7ecac9;
  --aqua-pale: #c5e8e8;
  --linen: #F2EBE1;
  --linen-mid: #ebe2d7;
  --linen-dark: #d9cfc3;
  --gold: #c9a84c;
  --mist: #e8f2f3;
  --mist-pale: #f2f8f8;
  --slate: #7a9496;
  --text: #1a2b2c;
  --text-light: #6b8284;
  --white: #ffffff;
}
body { font-family: 'Nunito Sans', sans-serif; background: var(--linen); color: var(--text); min-height: 100vh; }

/* ── Nav ── */
/* ── Steps bar sits outside <main> as direct body child for reliable sticky */

/* ── Steps bar ── */
.afticker { top: 72px !important; height: 48px !important; z-index: 99 !important; display: block !important; visibility: visible !important; opacity: 1 !important; }
@media (max-width: 768px) { .afticker { top: 63px !important; height: 52px !important; } }
.afticker .afticker-track,
.afticker .afticker-item { height: 48px !important; line-height: 48px !important; display: flex !important; align-items: center !important; }
.cfg-wrap { display: block; }
.steps-bar {
  background: var(--white); border-bottom: 1px solid var(--linen-dark);
  padding: 0 48px; position: -webkit-sticky; position: sticky; top: 120px; z-index: 95;
}
.steps-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.steps-items { display: flex; }
.step-item {
  width: 180px; display: flex; align-items: center; gap: 10px;
  padding: 18px 0; position: relative; cursor: pointer;
}
.step-item:not(:last-child)::after { display: none; }
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 600;
  flex-shrink: 0; transition: all .3s;
  border: 1.5px solid var(--linen-dark); color: var(--slate);
}
.step-item.active .step-num { background: var(--teal); border-color: var(--teal); color: white; }
.step-item.done .step-num { background: var(--mist-pale); border-color: var(--teal); color: var(--teal); }
.step-label { font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--slate); letter-spacing: 0.03em; }
.step-item.active .step-label { color: var(--teal-deep); }
.step-item.done .step-label { color: var(--teal); }

/* Steps bar CTA */
.steps-bar-cta {
  display: none; margin-left: 32px;
  border-left: 1px solid var(--linen-dark); padding-left: 28px;
  align-items: center; gap: 20px;
}
.steps-bar-cta.visible { display: flex; }
.sb-quote-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sb-item-count {
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate);
}
.sb-total-wrap { display: flex; align-items: baseline; gap: 8px; }
.sb-original {
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 400;
  color: var(--slate); text-decoration: line-through; white-space: nowrap;
  display: none;
}
.sb-original.visible { display: block; }
.sb-total {
  font-family: 'Jost', sans-serif; font-size: 1.15rem;
  font-weight: 500; color: var(--teal-deep); white-space: nowrap;
}
.sb-total.discounted { color: #2e7d32; }
.steps-bar-cta .btn { font-size: 12px; padding: 9px 20px; white-space: nowrap; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 2px; border: none;
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.06em; cursor: pointer; transition: all .2s; text-decoration: none;
}
.btn-primary { background: var(--teal); color: white; }
.btn-primary:hover { background: var(--teal-deep); }
.btn-secondary { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }
.btn-secondary:hover { background: var(--mist-pale); }
.btn-ghost { background: transparent; color: var(--slate); border: 1.5px solid var(--linen-dark); }
.btn-ghost:hover { border-color: var(--slate); color: var(--text); }

/* ── Main layout ── */
.cfg-main {
  max-width: 1120px; margin: 0 auto;
  padding: 44px 72px 100px;
  scroll-margin-top: 185px;
}
.step-panel { display: none; animation: fadeUp .3s ease; }
.step-panel.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.step-heading {
  font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 300;
  color: var(--abyss); margin-bottom: 8px;
}
.step-sub { font-size: 13px; color: var(--text-light); margin-bottom: 36px; font-weight: 300; }

/* ── Product grid ── */
.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 40px;
}
.product-card {
  background: var(--white); border: 1.5px solid var(--linen-dark);
  border-radius: 3px; overflow: hidden;
  cursor: pointer; transition: all .25s; position: relative;
  display: flex; flex-direction: column;
}
.product-card:hover {
  border-color: var(--teal-mid);
  box-shadow: 0 6px 32px rgba(44,95,100,0.12);
  transform: translateY(-3px);
}
.product-card.in-cart {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(61,122,128,0.15), 0 4px 20px rgba(44,95,100,0.10);
}
.pc-check-badge {
  display: none; position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; background: var(--teal); color: white;
  border-radius: 50%; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(44,95,100,0.3);
  z-index: 2; cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.pc-check-badge:hover { background: #c0392b; transform: scale(1.15); }
.product-card.in-cart .pc-check-badge { display: flex; }
.card-img-ph {
  width: 100%; height: 160px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--mist-pale), var(--linen));
  display: flex; align-items: center; justify-content: center;
}
.card-img {
  width: 100%; height: 160px; flex-shrink: 0;
  object-fit: contain;
  background: linear-gradient(135deg, var(--mist-pale), var(--linen));
  display: block;
}
.card-body {
  padding: 16px 20px 18px; flex: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.card-body-left { display: flex; flex-direction: column; }
.card-name {
  font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 400;
  color: var(--abyss); margin-bottom: 4px;
}
.card-cap { font-size: 12px; color: var(--text-light); font-weight: 300; }
.card-price-col { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; padding-top: 2px; gap: 2px; }
.card-price-original {
  font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 400;
  color: var(--slate); text-decoration: line-through; white-space: nowrap; display: none;
}
.card-price-original.visible { display: block; }
.product-card[data-discount="1"] .card-price-original { display: block; }
.product-card[data-discount="1"] .card-price { color: #2e7d32; }
.card-price {
  font-family: 'Jost', sans-serif; font-size: 1.15rem;
  font-weight: 500; color: var(--teal-deep); line-height: 1.1;
  text-align: right; white-space: nowrap;
}
.card-price.discounted { color: #2e7d32; }
.card-price.is-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--teal);
  background: rgba(61,122,128,0.08); border: 1px solid rgba(61,122,128,0.2);
  border-radius: 2px; padding: 3px 8px; white-space: nowrap;
  text-align: center;
}

/* Card badges */
.card-badge {
  display: none; padding: 7px 14px;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  align-items: center; gap: 6px; border-top: 1px solid transparent;
  flex-shrink: 0;
}
.card-badge.visible { display: flex; }
.card-badge-discount { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.card-badge-special  { background: #fff8e1; color: #e65100; border-color: #ffe0b2; }
.card-badge svg { flex-shrink: 0; }

/* Card footer */
.card-footer { border-top: 1px solid var(--linen-dark); overflow: hidden; flex-shrink: 0; }
.card-add-hint {
  padding: 12px 20px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--teal); text-align: center;
}
.product-card:hover .card-add-hint { background: var(--mist-pale); }
.card-qty-row {
  display: none; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--teal); color: white;
}
.product-card.in-cart .card-add-hint { display: none; }
.product-card.in-cart .card-qty-row { display: flex; }
.product-card.in-cart .card-footer { border-top-color: var(--teal); }
.cq-remove {
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.65); cursor: pointer; padding: 4px 0;
  background: none; border: none; transition: color 0.15s;
}
.cq-remove:hover { color: white; text-decoration: underline; }
.cq-stepper { display: flex; align-items: center; gap: 10px; }
.cq-label { font-size: 11px; letter-spacing: 0.06em; opacity: 0.7; font-family: 'Jost', sans-serif; }
.cq-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4); background: none; color: white;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.cq-btn:hover { background: rgba(255,255,255,0.2); border-color: white; }
.cq-num {
  font-family: 'Jost', sans-serif; font-size: 1rem;
  font-weight: 500; min-width: 20px; text-align: center;
}

/* Discount / special notes in OS */
.os-special-note {
  font-size: 11px; color: var(--teal-deep); margin-bottom: 14px;
  padding: 8px 10px; border: 1px solid rgba(61,122,128,0.25);
  border-radius: 2px; background: var(--mist-pale); line-height: 1.4;
}
.qlt-discount { color: #2e7d32; font-size: 12px; }
.qlt-special  { color: #e65100; font-size: 11px; font-style: italic; }

/* ── Config layout (step 2) ── */
.config-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }

/* Summary panel (right col) */
.cfg-panel {
  background: var(--white);
  border: 1.5px solid var(--linen-dark);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(13,31,34,0.07);
  position: sticky; top: 182px;
  max-height: calc(100vh - 194px);
  display: flex; flex-direction: column;
}
.cfg-panel-header {
  background: linear-gradient(to right, #1a4a50, #1e5a60);
  padding: 18px 24px;
  border-bottom: 2px solid var(--teal);
}
.cfg-panel-title {
  font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 300;
  color: white; margin-bottom: 2px;
}
.cfg-panel-sub { font-size: 11px; color: rgba(255,255,255,0.45); font-family: 'Jost', sans-serif; letter-spacing: 0.04em; }
.cfg-panel-header { flex-shrink: 0; }
.cfg-panel-intro { flex-shrink: 0; }
.cfg-panel-body { padding: 20px 24px 0; overflow-y: auto; flex: 1; min-height: 0; }
.cfg-panel-intro {
  padding: 14px 24px 16px;
  border-bottom: 1px solid var(--linen-dark);
  background: #f7f3ee;
}
.cfg-panel-intro p {
  font-size: 11.5px; color: var(--slate); line-height: 1.6; margin-bottom: 10px;
}
.cfg-nonbinding-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Jost', sans-serif; font-size: 8px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(61,122,128,0.08);
  border: 1px solid rgba(61,122,128,0.2);
  border-radius: 2px; padding: 4px 9px; white-space: nowrap;
}
.spec-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--linen-dark);
  font-size: 13px;
}
.spec-row:last-child { border-bottom: none; }
.spec-key { color: var(--abyss); font-family: 'Fraunces', serif; font-weight: 300; font-size: 0.9rem; }
.spec-val { font-family: 'Jost', sans-serif; font-size: 12px; color: var(--teal-deep); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.cfg-price-block {
  margin: 16px 24px 0; padding: 16px 0 20px;
  border-top: 2px solid var(--linen-dark);
  flex-shrink: 0;
}
.cfg-price-lbl { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.cfg-price-num { font-family: 'Jost', sans-serif; font-size: 2rem; font-weight: 500; color: var(--teal-deep); line-height: 1; }
.cfg-price-note { font-size: 11px; color: var(--slate); margin-top: 6px; }
.cfg-special-callout {
  display: none; margin: 0 24px 20px; padding: 11px 13px;
  border: 1.5px solid rgba(61,122,128,0.3); border-radius: 3px;
  background: var(--mist-pale);
  font-size: 11px; color: var(--teal-deep); line-height: 1.55;
  flex-shrink: 0;
}
.cfg-special-callout.visible { display: block; }
.cfg-special-callout strong { color: #b8860b; font-weight: 700; }

/* Line editor cards */
.line-editor-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.line-editor {
  background: var(--white);
  border: 1.5px solid var(--linen-dark);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(13,31,34,0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}
.line-editor:hover {
  box-shadow: 0 6px 28px rgba(44,95,100,0.13);
  transform: translateY(-1px);
}
.line-editor-header {
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to right, #1a4a50, #1e5a60);
  border-bottom: 2px solid var(--teal);
}
.le-header-left { display: flex; align-items: center; gap: 10px; }
.le-model-chip {
  background: var(--teal); color: white;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px; flex-shrink: 0;
}
.line-editor-title {
  font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 300;
  color: rgba(255,255,255,0.85); white-space: nowrap;
}
.line-editor-cap { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.line-editor-body {
  padding: 14px 16px 6px;
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white);
}
.le-fields-left { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.le-fields-right { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; padding-top: 0; }
.le-fields-right .field-label { text-align: center; margin-bottom: 4px; }
.le-stepper { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.le-stepper { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.line-editor-body .field-group { margin: 0; }
.le-remove-btn {
  background: none; border: 1px solid rgba(255,255,255,0.18); border-radius: 2px;
  cursor: pointer; font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.45);
  padding: 5px 10px; transition: all 0.15s; white-space: nowrap;
}
.le-remove-btn:hover { color: #ff8a80; border-color: rgba(255,138,128,0.5); }
.le-notes-row {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--linen-dark);
  margin-top: 14px;
  background: var(--white);
}

/* Add-ons row */
.le-addons-row {
  padding: 12px 16px;
  border-top: 1px solid var(--linen-dark);
  background: var(--mist-pale);
}
.le-addon-label {
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal-deep);
  margin-bottom: 10px;
}
.le-addon-item { margin-bottom: 8px; }
.le-addon-item:last-child { margin-bottom: 0; }
.le-addon-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 12px; border-radius: 3px; border: 1.5px solid var(--linen-dark);
  background: var(--white); transition: border-color 0.15s, background 0.15s;
}
.le-addon-check:hover { border-color: var(--teal); background: #f0f8f8; }
.le-addon-check input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--teal); flex-shrink: 0; cursor: pointer;
}
.le-addon-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.le-addon-name { font-family: 'Nunito Sans', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--abyss); }
.le-addon-desc { font-size: 11px; color: var(--slate); }
.le-addon-price { font-family: 'Jost', sans-serif; font-size: 12px; color: var(--teal-deep); font-weight: 500; white-space: nowrap; }

.select-wrap {
  position: relative;
}
.select-wrap select.field-input {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232c5f64' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

/* ── Order summary (step 3) ── */
.order-summary {
  background: white; color: var(--abyss);
  border-radius: 3px; border: 1.5px solid var(--linen-dark);
  overflow: hidden; position: sticky; top: 204px;
}
.os-header {
  background: linear-gradient(to right, #1a4a50, #1e5a60);
  padding: 18px 24px;
  border-bottom: 2px solid var(--teal);
}
.os-title { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 300; color: white; margin: 0 0 2px; }
.os-subtitle { font-family: 'Jost', sans-serif; font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; }
.os-body { padding: 20px 24px; }
.os-line-items { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1.5px solid var(--linen-dark); }
.os-line { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--linen-dark); }
.os-line:last-child { border-bottom: none; }
.os-line-top { display: flex; justify-content: space-between; align-items: baseline; }
.os-line-name { font-family: 'Fraunces', serif; font-size: 0.95rem; font-weight: 300; color: var(--abyss); }
.os-line-price { font-family: 'Jost', sans-serif; font-size: 0.88rem; color: var(--teal-deep); font-weight: 500; }
.os-line-detail { font-size: 11px; color: var(--slate); }
.os-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.os-total-lbl { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.os-total-num { font-family: 'Jost', sans-serif; font-size: 1.5rem; font-weight: 500; color: var(--teal-deep); white-space: nowrap; }
.os-poa-note { font-size: 11px; color: var(--slate); margin-top: 5px; }
.os-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.os-cta .btn { justify-content: center; }

/* ── Step 3 contact form ── */
.contact-layout .field-input { background: white; }
.contact-layout .field-input:focus { background: white; }
.contact-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-group.full { grid-column: 1 / -1; }
.field-label {
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal-deep);
}
.field-input {
  padding: 9px 12px; border: 1.5px solid var(--linen-dark); border-radius: 3px;
  font-family: 'Nunito Sans', sans-serif; font-size: 12.5px; color: var(--abyss);
  background: var(--linen); transition: border-color 0.2s, background 0.2s;
  appearance: none; -webkit-appearance: auto;
}
.field-input:focus { outline: none; border-color: var(--teal); background: white; box-shadow: 0 0 0 3px rgba(61,122,128,0.1); }
select.field-input { cursor: pointer; -webkit-appearance: auto; appearance: auto; }
textarea.field-input { min-height: 68px; resize: vertical; }

/* Line editor qty stepper */
.le-stepper-inline { display: none; }
.le-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--teal); background: white;
  color: var(--teal-deep); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.le-btn:hover { background: var(--teal); color: white; }
.le-num {
  font-family: 'Jost', sans-serif; font-size: 0.9rem;
  font-weight: 400; min-width: 24px; text-align: center; color: var(--abyss);
}

/* ── Quote doc (step 4) ── */
.quote-doc { background: var(--white); border: 1.5px solid var(--linen-dark); border-radius: 3px; overflow: hidden; }
.quote-header {
  background: linear-gradient(to right, #0d1f22, #1a4a50, #1e5a60);
  padding: 32px 40px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--teal);
  position: relative; overflow: hidden;
}
.qh-ghost {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'Fraunces', serif; font-size: 72px; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.04); white-space: nowrap; user-select: none; pointer-events: none;
  text-transform: uppercase;
}
.qh-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.qh-doc-label { font-family: 'Fraunces', serif; font-size: 13px; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.45); letter-spacing: 0.03em; }
.qh-meta { text-align: right; font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.8; font-family: 'Jost',sans-serif; }
.qh-nonbinding { margin-top: 6px; font-size: 10px; color: var(--aqua); opacity: 0.8; letter-spacing: 0.03em; }
.quote-body { padding: 36px 40px; }
.quote-section { margin-bottom: 36px; }
.qs-title { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--linen-dark); }
.qc-row { display: flex; gap: 16px; padding: 6px 0; font-size: 13px; }
.qc-label { width: 90px; flex-shrink: 0; color: var(--slate); font-size: 12px; }
.qc-val { color: var(--text); }
.quote-line-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.quote-line-table th { text-align: left; font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); padding: 0 0 10px; border-bottom: 1px solid var(--linen-dark); }
.quote-line-table th:last-child, .quote-line-table td:last-child { text-align: right; }
.quote-line-table td { padding: 12px 0; border-bottom: 1px solid var(--linen-dark); vertical-align: top; }
.qlt-model { font-family: 'Fraunces', serif; font-size: 0.95rem; font-weight: 400; color: var(--abyss); }
.qlt-detail { font-size: 11px; color: var(--slate); margin-top: 2px; }
.quote-total-row { margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--abyss); display: flex; justify-content: space-between; align-items: baseline; }
.qt-label { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.qt-right { text-align: right; }
.qt-num { font-family: 'Jost', sans-serif; font-size: 2rem; font-weight: 500; color: var(--teal-deep); line-height: 1; }
.qt-breakdown { font-size: 11px; color: var(--slate); margin-top: 4px; }
.quote-intro {
  padding: 24px 28px; margin-bottom: 8px;
  background: var(--mist-pale); border: 1px solid var(--linen-dark); border-radius: 2px;
  font-size: 13px; color: var(--abyss); line-height: 1.7; font-family: 'Nunito Sans', sans-serif;
}
.quote-footer-note { margin-top: 40px; padding: 16px 20px; background: var(--mist-pale); border: 1px solid var(--linen-dark); border-radius: 2px; font-size: 12px; color: var(--slate); line-height: 1.6; }
.quote-actions { margin-top: 28px; display: flex; gap: 12px; }
.quote-actions .btn { display: flex; align-items: center; gap: 7px; }
@keyframes spin { to { transform: rotate(360deg); } }
.qlt-discount { color: #2e7d32; font-size: 12px; }
.qlt-special  { color: #e65100; font-size: 11px; font-style: italic; }

/* ── Success screen ── */
.success-screen { display: none; text-align: center; padding: 80px 40px; }
.success-screen.visible { display: block; }
.success-icon { width: 56px; height: 56px; background: var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.success-title { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 300; color: var(--abyss); margin-bottom: 12px; }
.success-sub { font-size: 14px; color: var(--text-light); max-width: 420px; margin: 0 auto 32px; line-height: 1.6; }

/* ── Nav steps ── */
.step-nav { display: flex; gap: 12px; margin-top: 36px; }

/* Responsive */
@media (max-width: 900px) {
  /* ── Layout ── */
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .config-layout, .contact-layout { grid-template-columns: 1fr; }
  .cfg-main { padding: 24px 16px 80px; }
  .line-editor-list { grid-template-columns: 1fr; }

  /* ── Steps bar: hide CTA, compress steps ── */
  .steps-bar { padding: 0 16px; }
  .steps-bar-cta { display: none !important; }
  .step-item { width: auto; padding: 14px 10px; gap: 6px; }
  .step-label { font-size: 0.68rem; }

  /* ── Hero ── */
  .cfg-hero { padding: 40px 20px 32px; margin-top: 80px; }
  .cfg-hero-sub { white-space: normal; }

  /* ── Step 1: product cards ── */
  .product-grid { gap: 10px; }
  .product-card { padding: 14px; }
  .pc-name { font-size: 1rem; }

  /* ── Step 2: line editors ── */
  .line-editor-header { padding: 10px 14px; }
  .line-editor-body { padding: 12px 14px 6px; flex-wrap: wrap; gap: 10px; }
  .le-fields-left { flex: 1 1 100%; }
  .le-fields-right { flex-direction: row; align-items: center; gap: 16px; width: 100%; justify-content: flex-start; padding-bottom: 6px; }
  .le-fields-right .field-label { display: none; }
  /* Stepper floats right of plug type */
  .le-plug-row { display: flex; align-items: flex-end; gap: 12px; }
  .le-plug-row .field-group { flex: 1; }
  .le-plug-row .le-stepper-inline { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-bottom: 2px; }
  .le-fields-right { display: none; }
  .le-stepper-inline { display: flex; }
  .line-editor-notes { padding: 0 14px 12px; }

  /* ── Step 2: summary panel ── */
  .cfg-panel { border-radius: 0; }
  .cfg-panel-header { padding: 14px 16px; }
  .cfg-panel-body { padding: 14px 16px 0; }

  /* ── Step 3: contact form ── */
  .form-grid { grid-template-columns: 1fr; }
  .field-group.full { grid-column: 1; }
  .step-heading { font-size: 1.6rem; }

  /* ── Step 3: order summary ── */
  .os-header { padding: 14px 18px; }
  .os-body { padding: 14px 18px; }
  .os-title { font-size: 1rem; }
  .os-total-num { font-size: 1.2rem; }

  /* ── Step 4: quote doc ── */
  .quote-doc { border-radius: 0; margin: 0 -16px; }
  .quote-header { padding: 20px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .qh-ghost { font-size: 36px; }
  .quote-header svg { height: 48px !important; }
  .qh-meta { text-align: left; }
  .quote-body { padding: 20px 16px; }
  .quote-intro { padding: 14px 16px; font-size: 12px; }
  .qt-num { font-size: 1.4rem; }
  .quote-footer-note { padding: 12px 14px; font-size: 11px; }
  .quote-actions { flex-direction: column; gap: 10px; }
  .quote-actions .btn { width: 100%; justify-content: center; }

  /* Switch quote table to card-per-row on mobile */
  .quote-line-table thead { display: none; }
  .quote-line-table, .quote-line-table tbody,
  .quote-line-table tr, .quote-line-table td { display: block; width: 100%; }
  .quote-line-table tr { padding: 12px 0; border-bottom: 1px solid var(--linen-dark); }
  .quote-line-table tr:last-child { border-bottom: none; }
  .quote-line-table td { padding: 0; border: none; }
  /* Hide unit price col entirely */
  .quote-line-table td:nth-child(4) { display: none; }
  /* Card layout: model name + config left, qty + price right */
  .quote-line-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; }
  .quote-line-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .quote-line-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 11px; }
  .quote-line-table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-family: 'Jost', sans-serif; font-size: 11px; color: var(--slate); }
  .quote-line-table td:nth-child(3)::before { content: 'Qty: '; }
  .quote-line-table td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; font-weight: 600; }
  /* Discount / special rows span full width */
  .quote-line-table tr.qlt-discount-row td,
  .quote-line-table tr.qlt-special-row td { grid-column: 1 / -1; }

  /* ── Step nav ── */
  .step-nav { margin-top: 16px; }
}

@media (max-width: 480px) {
  /* Extra small: single column product grid */
  .product-grid { grid-template-columns: 1fr; }
  .step-label { display: none; }
  .cfg-hero-title { font-size: 1.6rem; padding-top: 20px; }
}
/* ── Mobile sticky bottom bar ── */
.mobile-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: white; border-top: 1.5px solid var(--linen-dark);
  padding: 12px 16px; align-items: center; justify-content: space-between;
  gap: 12px; box-shadow: 0 -4px 20px rgba(13,31,34,0.1);
}
.mobile-bar-summary { display: flex; flex-direction: column; gap: 2px; }
.mobile-bar-count { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.mobile-bar-price-row { display: flex; align-items: baseline; gap: 6px; }
.mobile-bar-original { font-family: 'Jost', sans-serif; font-size: 0.65rem; color: var(--linen-dark); text-decoration: line-through; display: none; }
.mobile-bar-original.visible { display: block; }
.mobile-bar-total { font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; color: var(--teal-deep); }
.mobile-bar-btn { white-space: nowrap; font-size: 12px; padding: 9px 16px; }

@media (max-width: 900px) {
  .mobile-bar { display: flex; }
  .cfg-main { padding-bottom: 100px; }
}

@media print {
  .mobile-bar { display: none !important; }
}

@media print {
  /* Hide everything except the quote document */
  body * { visibility: hidden; }
  .quote-doc, .quote-doc * { visibility: visible; }

  /* Reset page */
  body { background: white !important; margin: 0; padding: 0; }
  .quote-doc {
    position: absolute; top: 0; left: 0;
    width: 100%; margin: 0; padding: 0;
    box-shadow: none !important; border: none !important;
    border-radius: 0 !important;
  }

  /* Header prints correctly */
  .quote-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: linear-gradient(to right, #0d1f22, #1a4a50, #1e5a60) !important;
    border-bottom: 2px solid #3d7a80 !important;
  }

  /* Intro and footer boxes */
  .quote-intro, .quote-footer-note {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #f2f8f8 !important;
    border: 1px solid #d9cfc3 !important;
  }

  /* Ensure colours print */
  .qh-ghost { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qlt-discount { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qlt-special  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qt-num       { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Page breaks */
  .quote-header { page-break-after: avoid; }
  .quote-section { page-break-inside: avoid; }
  .quote-total-row { page-break-inside: avoid; }
  .quote-footer-note { page-break-inside: avoid; }

  /* Page margins */
  @page { margin: 0; size: A4; }
}