/* ============================================================
   Eepy Checkout — v2 (modernized)
   Warmer, softer, two-font system, coral as accent only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&display=swap');

:root {
  /* ----- Surfaces (warmer, softer cream) ----- */
  --cream-50:          #FBF7EE;   /* page */
  --cream-100:         #F6F0E1;   /* panel / receipt */
  --cream-200:         #EFE7D2;   /* input bed */
  --cream-300:         #E5DAC0;   /* hairlines, dividers */
  --paper:             #FFFFFF;

  /* ----- Ink ----- */
  --ink-900:           #1A1A1F;
  --ink-700:           #4A4A52;
  --ink-500:           #7D7B81;
  --ink-400:           #A09EA3;
  --ink-300:           #C8C5CC;

  /* ----- Accent (coral, used sparingly) ----- */
  --coral:             #E37C55;
  --coral-deep:        #B97358;
  --coral-soft:        #FFE3D2;
  --coral-glow:        rgba(227, 124, 85, 0.25);

  /* ----- Shadows (whisper soft) ----- */
  --shadow-card:       0 1px 2px rgba(40, 30, 10, 0.04);
  --shadow-soft:       0 20px 60px -24px rgba(60, 40, 10, 0.10),
                       0 2px 6px -2px rgba(60, 40, 10, 0.05);
  --shadow-cta:        0 12px 28px -8px rgba(227, 124, 85, 0.55),
                       0 2px 4px rgba(227, 124, 85, 0.18);

  /* ----- Radii ----- */
  --r-input:  14px;
  --r-card:   20px;
  --r-panel:  32px;
  --r-pill:   9999px;

  /* ----- Type ----- */
  --f-display: 'Instrument Serif', 'Times New Roman', serif;
  --f-body:    'Geist', system-ui, sans-serif;
  --f-tabular: 'Geist', ui-monospace, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream-50);
  color: var(--ink-900);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Tabular numerals utility (for prices) */
.tab-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Page chrome
   ============================================================ */
.page { max-width: 1240px; margin: 0 auto; padding: 56px 56px 80px; }

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 56px;
}
.top-nav .logo { height: 28px; width: auto; opacity: 0.9; }
.top-nav-steps {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.top-nav-steps .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.top-nav-steps .pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
}
.top-nav-steps .step.is-current .pip { background: var(--coral); }
.top-nav-steps .step.is-current { color: var(--ink-900); }
.top-nav-steps .sep { width: 24px; height: 1px; background: var(--cream-300); }

/* ============================================================
   Hero / page title
   ============================================================ */
.page-hero { margin-bottom: 56px; max-width: 44ch; }
.page-eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 16px;
}
.page-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}
.page-title em {
  font-style: italic;
  font-family: var(--f-display);
}
.page-title-sub {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 16px 0 0;
  max-width: 44ch;
}

/* ============================================================
   Two-column layout
   ============================================================ */
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 80px;
  align-items: start;
}

/* ============================================================
   Section heading
   ============================================================ */
.section + .section { margin-top: 56px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.section-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--coral);
  line-height: 1;
  flex: none;
}
.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}

/* ============================================================
   Floating-label fields
   ============================================================ */
.field-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.field-grid.cols-3-1 { grid-template-columns: 3fr 1fr; }
.field-grid.single { grid-template-columns: 1fr; }
.field-grid + .field-grid { margin-top: 14px; }

.field {
  position: relative;
}

/* Input + select shared styles */
.input,
.select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 64px;
  padding: 24px 18px 8px;
  background: var(--cream-100);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  color: var(--ink-900);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.input:hover,
.select:hover { background: var(--cream-200); }
.input:focus,
.select:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-glow);
}
.input::placeholder { color: transparent; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237D7B81' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}

/* Floating label */
.flabel {
  position: absolute;
  left: 19px;
  top: 22px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-500);
  pointer-events: none;
  white-space: nowrap;
  transform-origin: left top;
  transition: transform 180ms ease, color 180ms ease;
}
.field:focus-within .flabel,
.field.is-filled .flabel {
  transform: translateY(-14px) scale(0.72);
  color: var(--ink-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.field:focus-within .flabel { color: var(--coral-deep); }

/* Locked field (read-only) */
.field.is-locked .input {
  background: var(--cream-100);
  opacity: 0.65;
  cursor: not-allowed;
}
.field.is-locked::after {
  content: "";
  position: absolute;
  top: 22px; right: 18px;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D7B81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.field-hint {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-500);
  padding: 8px 4px 0 18px;
}

/* Small text-link styled button used as a tertiary affordance inside the
   form (e.g. "My building isn't listed" to swap dropdown ↔ text input).
   Hit area is sized to be comfortably tappable on mobile. */
.field-link {
  display: inline-block;
  background: none;
  border: 0;
  padding: 10px 4px;
  margin-top: 6px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 180ms ease;
}
.field-link:hover { color: var(--coral-deep); }
.field-link:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Checkbox
   ============================================================ */
.check {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 4px 4px;
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--paper);
  border: 1.5px solid var(--cream-300);
  margin: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  flex: none;
  transition: background 150ms ease, border-color 150ms ease;
}
.check input:checked {
  background: var(--coral);
  border-color: var(--coral);
}
.check input:checked::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check span {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-700);
}
/* The rental-terms link inside the checkbox label needs to read as a link
   (the global `a { color: inherit; text-decoration: none }` rule otherwise
   makes it indistinguishable from surrounding text). */
.check a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 180ms ease;
}
.check a:hover { color: var(--coral); }
.check a:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Primary CTA
   ============================================================ */
.cta {
  margin-top: 24px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 64px;
  padding: 0 32px;
  background: var(--coral);
  color: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-cta);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cta:active { transform: translateY(0); filter: brightness(0.97); }
.cta:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}
.cta .cta-arrow { width: 16px; height: 10px; }
.cta .cta-sparkle { width: 18px; height: 18px; flex: none; }
.cta-note {
  text-align: center;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink-500);
  margin: 16px 0 0;
}

/* ============================================================
   Right column — receipt-style summary
   ============================================================ */
.summary {
  position: sticky;
  top: 32px;
  /* align-self: start prevents the grid track from stretching this aside to the
     row height. Without it, sticky has no room to operate when the right column
     is shorter than the left and the panel just scrolls with the page. */
  align-self: start;
  background: var(--cream-100);
  border-radius: var(--r-panel);
  padding: 36px 36px 32px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.summary-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.summary-eyebrow .order-num {
  font-family: var(--f-tabular);
  letter-spacing: 0.12em;
}

/* ---------- Bundle items ---------- */
.bundle-items {
  display: flex;
  flex-direction: column;
}
.bundle-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  padding: 18px 0;
  align-items: center;
}
.bundle-item + .bundle-item {
  border-top: 1px dashed var(--cream-300);
}
.bundle-item:first-child { padding-top: 4px; }

.thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--cream-200);
  overflow: hidden;
  flex: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.bundle-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bundle-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0;
}
.bundle-desc {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.4;
}
.bundle-tag {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  margin-top: 2px;
}
.bundle-price {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  align-self: start;
  padding-top: 2px;
}

/* ---------- Receipt rule (sub-heading divider) ---------- */
.receipt-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 8px 0 0;
}
.receipt-rule::before,
.receipt-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--cream-300) 0 4px, transparent 4px 8px);
}

/* ---------- Inclusions (was: guarantees) ---------- */
.inclusions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inclusion {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.inclusion-mark {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--coral);
}
.inclusion-mark svg { width: 100%; height: 100%; }
.inclusion-text { display: flex; flex-direction: column; gap: 1px; }
.inclusion-title {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-900);
  line-height: 1.35;
}
.inclusion-body {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.4;
}

/* ---------- Add-ons (was: protection & care) ---------- */
.addons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.addon {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}
.addon + .addon { border-top: 1px dashed var(--cream-300); }

/* Rich add-on (product with image, e.g. MicroFridge) */
.addon--rich {
  grid-template-columns: 56px 1fr auto auto;
  gap: 14px 16px;
  padding: 16px 0;
  align-items: center;
}
.addon--rich .thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--cream-200);
  overflow: hidden;
  grid-row: 1 / 3;
  grid-column: 1;
}
.addon--rich .thumb img { width: 100%; height: 100%; object-fit: cover; }
.addon--rich .addon-name-wrap { grid-column: 2; }
.addon--rich .addon-amount { grid-column: 3; }
.addon--rich .toggle { grid-column: 4; }
.addon--rich .addon-name { font-size: 15px; }

/* Dimmed state for unchecked add-ons */
.addon[data-active="false"] .addon-name,
.addon[data-active="false"] .addon-amount { color: var(--ink-500); }
.addon[data-active="false"] .thumb { opacity: 0.55; }
.addon-name {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 6px;
}
.addon-info {
  width: 14px; height: 14px;
  color: var(--ink-400);
}
.addon-desc {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 1px;
  grid-column: 1;
}
.addon-amount {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
  grid-row: 1;
  grid-column: 2;
}
/* Strike-through "list price" shown next to a bundle's actual price
   (e.g. Worry-Free: $70 list → $50 bundled). */
.addon-strike {
  color: var(--ink-400);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: 2px;
}
.addon-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  grid-row: 1 / 3;
  grid-column: 1;
}

/* ---------- Toggle ---------- */
.toggle {
  position: relative;
  width: 38px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--cream-300);
  cursor: pointer;
  transition: background-color 200ms ease;
  flex: none;
  grid-row: 1;
  grid-column: 3;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 200ms ease;
}
.toggle[aria-pressed="true"] { background: var(--coral); }
.toggle[aria-pressed="true"]::after { transform: translateX(16px); }
.toggle:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

/* ---------- Receipt totals ---------- */
.totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--cream-300);
}
.totals-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.totals-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--cream-300);
}
.totals-grand-label {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.totals-grand-value {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Single-product hero (variant of summary)
   ============================================================ */
.product-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}
.product-hero-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: var(--cream-200);
  overflow: hidden;
}
.product-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.product-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 4px;
}
.product-hero-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}
.product-hero-price {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.product-hero-desc {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.45;
  margin: 0;
}
.product-hero-tag {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}

/* ============================================================
   Order confirmation
   ============================================================ */

/* Heavy-sans meta header (ORDER CONFIRMED / RESERVATION HELD) — the
   "this transaction has resolved" voice. Sits above the warmer serif
   greeting. Geist 700 is the heaviest weight we load. */
.confirm-hero { margin-bottom: 56px; }
.confirm-meta-title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0;
}
.confirm-meta-sub {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 14px 0 0;
}

.confirm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 80px;
  align-items: start;
}

/* Container for the success / cancel page content — caps width so the
   serif greet and steps don't run edge-to-edge on wide displays. */
.confirm-stack { max-width: 720px; }

.confirm-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.confirm-badge-top svg { width: 14px; height: 14px; }

.confirm-greet {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 24px;
}
.confirm-greet em {
  font-style: italic;
}
.confirm-body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 44ch;
  margin: 0 0 48px;
}

.confirm-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  padding: 24px 0;
  border-top: 1px solid var(--cream-300);
  border-bottom: 1px solid var(--cream-300);
  margin-bottom: 56px;
}
.confirm-meta-label {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 8px;
}
.confirm-meta-value {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 10px;
}
.confirm-meta-value .order-num {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.status-pip {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-glow);
}

.confirm-next-head {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 28px;
}
.confirm-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 48px;
  list-style: none;
  padding: 0;
}
.confirm-step {
  display: flex;
  gap: 24px;
  padding: 22px 0;
}
.confirm-step + .confirm-step { border-top: 1px dashed var(--cream-300); }
.confirm-step:first-child { padding-top: 4px; }
.step-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 26px;
  color: var(--coral);
  line-height: 1;
  flex: none;
  width: 32px;
  padding-top: 2px;
}
.step-body { display: flex; flex-direction: column; gap: 4px; }
.step-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.step-text {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 52ch;
  margin: 0;
}

.cta--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--cream-300);
  box-shadow: none;
  font-weight: 500;
  width: auto;
  padding: 0 28px;
  height: 56px;
}
.cta--ghost:hover { background: var(--cream-100); filter: none; }

/* Right column: confirmation summary (also receipt-styled) */
.confirm-summary {
  position: sticky;
  top: 32px;
  align-self: start;
  background: var(--cream-100);
  border-radius: var(--r-panel);
  padding: 36px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.confirm-summary-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: center;
  padding: 4px 0 18px;
}
.confirm-summary-item + .confirm-summary-item {
  padding-top: 18px;
  border-top: 1px dashed var(--cream-300);
}
.confirm-summary-item .thumb { width: 72px; height: 72px; border-radius: 14px; }
.confirm-item-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 2px;
  color: var(--ink-900);
}
.confirm-item-desc {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-deep);
  line-height: 1.4;
}

/* Line-item rows below the product card (one per addon if present). */
.confirm-line-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 18px 0 0;
  margin: 0;
  border-top: 1px dashed var(--cream-300);
}
.confirm-line-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-700);
}
.confirm-line-item-price {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-900);
}

/* M&S "no charge today" block (replaces the line items + total for the
   moving-and-storage flow, where nothing was charged). */
.confirm-ms-status {
  padding-top: 18px;
  border-top: 1px dashed var(--cream-300);
}
.confirm-ms-status-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}
.confirm-ms-status-body {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 8px 0 0;
}

/* Final coral-soft pill at the bottom of the summary card — the
   reassurance signal ("White-glove delivery guaranteed", "Cancel
   anytime", etc.). */
.confirm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-self: flex-start;
}
.confirm-status-pill svg { width: 14px; height: 14px; }

/* ============================================================
   Mobile shell (≤ 480px)
   ============================================================ */
.mobile-shell {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px 140px;
  position: relative;
}
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
}
.mobile-header img.logo { height: 22px; }
.mobile-header .mobile-steps {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.mobile-header .mobile-steps em {
  font-style: normal;
  color: var(--coral-deep);
}

.mobile-hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cream-200);
  margin-bottom: 16px;
}
.mobile-hero img { width: 100%; height: 100%; object-fit: cover; }
.mobile-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.mobile-hero-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.1;
}
.mobile-hero-price {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.mobile-hero-desc {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-500);
  margin: 4px 0 0;
  line-height: 1.45;
}

.mobile-second-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  margin-top: 16px;
  border-top: 1px dashed var(--cream-300);
}
.mobile-second-item .thumb { width: 56px; height: 56px; border-radius: 12px; }
.mobile-second-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mobile-second-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink-900);
}
.mobile-second-desc {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--ink-500);
}
.mobile-second-price {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.mobile-section { margin-top: 40px; }
.mobile-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.mobile-section-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  color: var(--coral);
  line-height: 1;
}
.mobile-section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0;
}
.mobile-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.mobile-fields .full { grid-column: 1 / -1; }

/* Sticky pay bar — hidden by default; the mobile @media block reveals it. */
.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(251, 247, 238, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--cream-300);
  padding: 14px 20px 18px;
  display: none;
  align-items: center;
  gap: 14px;
  z-index: 10;
}
.mobile-bar-total {
  display: flex;
  flex-direction: column;
  flex: none;
}
.mobile-bar-total-label {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.mobile-bar-total-amount {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.mobile-bar .cta {
  flex: 1;
  margin: 0;
  height: 56px;
  padding: 0 24px;
  font-size: 15px;
}

/* Mobile confirmation */
.mobile-confirm-greet {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 16px 0 16px;
}
.mobile-confirm-greet em { font-style: italic; }
.mobile-confirm-body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
  margin: 0 0 32px;
}
.mobile-confirm-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
  padding: 22px 0;
  border-top: 1px solid var(--cream-300);
  border-bottom: 1px solid var(--cream-300);
}
.mobile-confirm-meta-label {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.mobile-confirm-meta-value {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-confirm-meta-value .order-num {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.mobile-confirm-summary {
  background: var(--cream-100);
  border-radius: var(--r-card);
  padding: 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  max-width: 1240px;
  margin: 80px auto 0;
  padding: 32px 56px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--cream-300);
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink-500);
}
.site-footer .logo { height: 24px; opacity: 0.6; }
.footer-links {
  display: flex;
  gap: 28px;
}
.footer-links a {
  color: var(--ink-500);
  transition: color 180ms ease;
}
.footer-links a:hover { color: var(--ink-900); }

/* ============================================================
   Responsive — mobile (≤ 768px)
   Adapts the desktop markup: stacks the grid, reorders summary
   above the form, shrinks hero, hides the in-form CTA in favor
   of the sticky .mobile-bar.
   ============================================================ */
@media (max-width: 768px) {
  .page {
    padding: 24px 20px 140px;
    max-width: 100%;
  }

  /* Top nav */
  .top-nav { padding-bottom: 24px; }
  .top-nav .logo { height: 22px; }
  .top-nav-steps {
    font-size: 10px;
    gap: 8px;
    letter-spacing: 0.12em;
  }
  .top-nav-steps .sep { width: 14px; }

  /* Hero */
  .page-hero { margin-bottom: 32px; max-width: 100%; }
  .page-title {
    font-size: 42px;
    line-height: 1.02;
  }
  .page-title-sub {
    font-size: 14.5px;
    margin-top: 12px;
  }

  /* Grid: stack to single column, summary first */
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .summary {
    order: -1;
    position: static;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    gap: 20px;
  }

  /* Sections */
  .section + .section { margin-top: 40px; }
  .section-head { margin-bottom: 20px; }
  .section-title { font-size: 24px; }
  .section-num { font-size: 18px; }

  /* Stack all field grids to single column */
  .field-grid,
  .field-grid.cols-3-1 { grid-template-columns: 1fr; }
  .field-grid + .field-grid { margin-top: 12px; }
  .input, .select { height: 60px; }

  /* Product hero (Bigger Bed) */
  .product-hero-name { font-size: 26px; }
  .product-hero-price { font-size: 18px; }

  /* Receipt totals — compact on mobile (sticky bar carries the grand total) */
  .totals-grand-value { font-size: 34px; }

  /* Hide in-form CTA + note on mobile; .mobile-bar replaces them */
  #checkout-form > .checkout-forms .cta,
  #checkout-form > .checkout-forms .cta-note { display: none; }

  /* Reveal the sticky bar */
  .mobile-bar { display: flex; }

  /* Confirmation pages — scale serif greet + step copy down for mobile */
  .confirm-stack { max-width: 100%; }
  .confirm-hero { margin-bottom: 32px; }
  .confirm-meta-title {
    font-size: 36px;
    letter-spacing: -0.015em;
  }
  .confirm-meta-sub { margin-top: 10px; }
  .confirm-greet {
    font-size: 52px;
    line-height: 0.98;
    margin-bottom: 16px;
  }
  .confirm-body {
    font-size: 15px;
    margin-bottom: 32px;
  }
  .confirm-next-head { margin-bottom: 20px; }
  .confirm-step { padding: 18px 0; gap: 16px; }
  .step-num { font-size: 22px; width: 26px; }
  .step-title { font-size: 20px; }
  .step-text { font-size: 14.5px; }
  /* Confirmation right-rail: same single-column treatment as the checkout
     summary (chrome stripped so it flows above the form). */
  .confirm-grid { grid-template-columns: 1fr; gap: 32px; }
  .confirm-summary {
    order: -1;
    position: static;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .confirm-summary-item .thumb { width: 60px; height: 60px; border-radius: 12px; }
  .confirm-item-name { font-size: 20px; }
  .confirm-ms-status-title { font-size: 26px; }

  /* Footer — stack, smaller. Pages with a sticky pay bar (checkout) need
     extra bottom padding so the footer-links clear the bar. */
  .site-footer {
    flex-direction: column;
    gap: 18px;
    padding: 24px 20px 32px;
    text-align: center;
    margin-top: 32px;
  }
  body:has(.mobile-bar) .site-footer { padding-bottom: 120px; }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 20px;
  }
}