.booking-shell {
  display: grid;
  grid-template-areas: "aside" "stepper" "form";
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}
.booking-shell > .stepper { grid-area: stepper; }
.booking-shell > #booking-form { grid-area: form; min-width: 0; }
.booking-shell > .booking-aside { grid-area: aside; }
.booking-shell .estimate-panel { position: static; }
@media (min-width: 1080px) {
  .booking-shell {
    grid-template-columns: 1fr 340px;
    grid-template-areas: "stepper aside" "form aside";
    align-items: start;
    gap: var(--sp-7);
  }
  /* Stick the whole aside column (both cards) as one unit, not just the
     estimate panel — sticking only the first card let it visually overlap
     the second, non-sticky card below it while scrolling. */
  .booking-shell > .booking-aside { position: sticky; top: 100px; }
}

.booking-panel {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
@media (min-width: 640px) { .booking-panel { padding: var(--sp-8); } }

.booking-step { display: none; }
.booking-step.is-active { display: block; animation: fadeIn var(--dur-med) var(--ease-out); }
.booking-step__head { margin-bottom: var(--sp-6); }
.booking-step__head .eyebrow { margin-bottom: var(--sp-2); }

/* radio/checkbox-driven choice cards */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px) { .choice-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 780px) { .choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .choice-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-input:focus-visible + .choice-card { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.choice-card:has(.choice-input:checked),
.choice-input:checked + .choice-card {
  border-color: var(--color-gold);
  background: linear-gradient(180deg, rgba(62,28,0,0.10), rgba(62,28,0,0.03));
}

.builder-toggle { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 4px; gap: 4px; margin-bottom: var(--sp-6); }
.builder-toggle label { padding: 0.6em 1.4em; border-radius: var(--radius-pill); font-size: var(--fs-body-sm); color: var(--color-ink-muted); cursor: pointer; }
.builder-toggle .choice-input:checked + label { background: var(--color-gold); color: var(--color-on-gold); font-weight: 600; }

.builder-group { margin-bottom: var(--sp-6); }
.builder-group h5 { font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-gold); margin-bottom: var(--sp-3); }
.builder-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
}
.builder-row__label { flex-grow: 1; }
.builder-row__label strong { display: block; }
.builder-row__label span { font-size: var(--fs-body-sm); color: var(--color-ink-muted); }
.builder-row__price { font-size: var(--fs-body-sm); color: var(--color-gold-bright); white-space: nowrap; }
.qty-stepper { display: none; align-items: center; gap: var(--sp-2); }
.builder-row:has(input:checked) .qty-stepper { display: flex; }
.builder-row:has(input:checked) { border-color: var(--color-gold-dim); }
.qty-stepper button { width: 26px; height: 26px; border: 1px solid var(--color-border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.qty-stepper input { width: 32px; text-align: center; background: none; border: 0; padding: 0; }

.step-nav { display: flex; justify-content: flex-end; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid var(--color-border); }

.review-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.review-block { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-5); min-width: 0; }
.review-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.review-block__head h5 { font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-gold); }
.review-block dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-body-sm); }
.review-block dt { color: var(--color-ink-faint); }
.review-block dd { color: var(--color-ink); min-width: 0; overflow-wrap: break-word; }
@media (min-width: 780px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }

.confirmation { text-align: center; padding-block: var(--sp-8); }
.confirmation__icon {
  width: 72px; height: 72px; margin-inline: auto var(--sp-6);
  border-radius: 50%; border: 1px solid var(--color-gold);
  display: flex; align-items: center; justify-content: center; color: var(--color-gold);
}
.confirmation__ref { font-family: var(--font-display); color: var(--color-gold-bright); font-size: 1.3rem; margin-block: var(--sp-4); }

@media (min-width: 1080px) {
  .booking-layout { grid-template-columns: 1fr 340px; }
}