/* Pick-up address panel */
.pickup-location {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--pink, #faf0f2);
  border: 1px solid var(--border, #ebe6e8);
}
.apex-lux .pickup-location {
  background: var(--lux-surface, #fff);
  border-color: var(--lux-line, #ebe6e8);
}
.pickup-location.hidden {
  display: none;
}
.pickup-location__title {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--maroon, #7a1528);
}
.pickup-location__addr {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--maroon-dark, #5c0f1e);
}
.pickup-location__note {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted, #6b5c60);
}
.pickup-location__checkout-note {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--muted, #6b5c60);
}
.pickup-location__actions {
  margin: 0;
  font-size: 0.875rem;
}
.pickup-location__maps,
.pickup-location__phone {
  font-weight: 600;
  color: var(--maroon, #7a1528);
}
.pickup-location__sep {
  margin: 0 0.35rem;
  color: var(--muted);
}
.pickup-location__confirmed {
  margin: 0.65rem 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: #1b5e20;
}
.pickup-location__confirmed.hidden,
.pickup-location__pending.hidden {
  display: none;
}
.pickup-location__pending {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.pickup-time {
  margin-top: 0.75rem;
}
.pickup-time.hidden {
  display: none;
}
.pickup-time__label {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--maroon-dark, #5c0f1e);
}
.pickup-time__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.pickup-time__chip {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border, #ebe6e8);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 2.5rem;
  touch-action: manipulation;
}
.pickup-time__chip.is-selected {
  border-color: var(--maroon, #7a1528);
  background: var(--pink, #faf0f2);
  color: var(--maroon-dark, #5c0f1e);
}
.pickup-time__auto-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

/* 1-hour delivery / pick-up window */
.fulfilment-time {
  margin: 0.75rem 0 0;
}
.fulfilment-time__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
.fulfilment-time__field > span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--maroon-dark, #5c0f1e);
}

.apex-lux .fulfilment-time__field > span {
  color: var(--lux-accent);
}
.fulfilment-time select,
.fulfilment-time [data-fulfilment-time-select] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border, #ebe6e8);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  color: var(--text, #2a1f22);
  appearance: auto;
  touch-action: manipulation;
}
.fulfilment-time__hint {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted, #6b5c60);
}
.fulfilment-time__confirmed {
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: #1b5e20;
}
.fulfilment-time__confirmed.hidden {
  display: none;
}

.fulfilment-time__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
}
.fulfilment-time__legend.hidden {
  display: none;
}
.slot-legend__item--available {
  color: #1b5e20;
}
.slot-legend__item--taken {
  color: #b71c1c;
}

.fulfilment-time__confirmation-note {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--lux-muted, #6e5c63);
}

/* Slot colours in dropdown (supported in most browsers) */
.fulfilment-time select option.slot-opt--available {
  color: #1b5e20;
  background-color: #e8f5e9;
  font-weight: 600;
}
.fulfilment-time select option.slot-opt--taken {
  color: #b71c1c;
  background-color: #ffebee;
  font-weight: 600;
}
.fulfilment-time select option.slot-opt--taken:disabled {
  color: #b71c1c;
  background-color: #ffcdd2;
}

/* Mobile slot list — native <select> options ignore colours on iOS/Android */
.slot-picker-mobile {
  display: none;
}

@media (max-width: 719px) {
  .fulfilment-time__field {
    position: relative;
  }

  .fulfilment-time [data-fulfilment-time-select] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .slot-picker-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 14.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.2rem;
  }

  .slot-picker-mobile__placeholder {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted, #6b5c60);
    text-align: center;
    border: 1px dashed var(--border, #ebe6e8);
    border-radius: 8px;
    background: #fff;
  }

  .slot-picker__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 0.75rem;
    min-height: 2.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .slot-picker__btn--available {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #1b5e20;
  }

  .slot-picker__btn--available.is-selected {
    box-shadow: 0 0 0 2px #2e7d32;
    font-weight: 700;
  }

  .slot-picker__btn--taken {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #b71c1c;
    opacity: 0.92;
    cursor: not-allowed;
  }

  .slot-picker__status {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
}

/* Stripe setup banner (localhost test) */
.stripe-setup-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #fff3cd;
  border: 1px solid #e6c200;
  color: #5c4a10;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.stripe-setup-banner a {
  font-weight: 700;
  color: var(--maroon, #7a1528);
}
.stripe-setup-banner.hidden {
  display: none;
}

/* Apex delivery UI — include on any page with .delivery-panel (helium, cart, future shops) */

.config-step:has(.delivery-panel),
.config-step[data-step="3"] {
  overflow: visible;
}

.config-step__body:has(.delivery-panel) {
  overflow: visible;
}

.delivery-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  isolation: isolate;
}

/* Suburb finder — full width, same as street */
.delivery-location__suburb {
  margin-bottom: 0;
}

.delivery-location__suburb .delivery-location__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--maroon, #7a1528);
}

.apex-lux .delivery-location__suburb .delivery-location__label {
  color: var(--lux-text, #2a1520);
  font-weight: 500;
}

.delivery-location__suburb .address-field {
  position: relative;
  display: block;
}

.delivery-location__suburb .address-field input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  border-radius: 10px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.apex-lux .delivery-location__suburb .address-field input {
  border: 1px solid var(--lux-line);
  border-radius: var(--lux-radius, 10px);
  background: #fff;
}

.delivery-msg--quote {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
}

.apex-lux .delivery-msg--quote {
  border-radius: var(--lux-radius, 10px);
}

.delivery-panel .field--compact {
  margin-bottom: 0;
}

/* Font-size/weight/margin removed from this selector — it was overriding
   the shared .field span heading rule (and the heading->helper->control
   spacing rule) with its own slightly different values for this one
   field, which is exactly the "Delivery Address heading looks different
   from the others" inconsistency. display:block is already the default
   for a span here via .field span's own rule, nothing left to add. */

.delivery-panel .address-field input {
  min-height: 2.75rem;
  font-size: 1rem;
}

.fulfilment-row--simple {
  align-items: stretch;
}

.fulfilment-row--simple .choice-pill {
  display: flex;
  min-width: 0;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fulfilment-row--simple .choice-pill span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  gap: 0.2rem;
  padding: 0.8rem 0.45rem;
  min-height: 4.25rem;
  text-align: center;
  box-sizing: border-box;
}

.fulfilment-row--simple .choice-pill strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

.fulfilment-row--simple .choice-pill small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  max-width: 100%;
  padding: 0 0.15rem;
}

.fulfilment-row--simple .choice-pill:active span {
  transform: scale(0.98);
}

@media (max-width: 719px) {
  .fulfilment-row--simple {
    gap: 0.55rem;
  }

  .fulfilment-row--simple .choice-pill span {
    min-height: 4.5rem;
    padding: 0.85rem 0.5rem;
  }

  .fulfilment-row--simple .choice-pill strong {
    font-size: 1rem;
  }

  .fulfilment-row--simple .choice-pill small {
    font-size: 0.7rem;
    line-height: 1.4;
  }
}

@media (max-width: 359px) {
  .fulfilment-row--simple {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .fulfilment-row--simple .choice-pill span {
    min-height: 3.75rem;
    padding: 0.8rem 0.65rem;
  }
}

.apex-lux .fulfilment-row--simple .choice-pill input:checked + span small {
  color: var(--lux-muted);
}

.field--required > span:first-child .field__req,
.field__req {
  font-size: 0.65rem;
  font-weight: 600;
  font-style: normal;
  color: var(--maroon, #7a1528);
  margin-left: 0.25rem;
}

.field__opt {
  font-size: 0.65rem;
  font-weight: 500;
  font-style: normal;
  color: var(--muted);
}

.contact-fields .field__opt {
  margin-left: 0.2rem;
}

.address-field {
  position: relative;
}

.address-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border, #ebe6e8);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(40, 20, 30, 0.12);
  max-height: 11rem;
  overflow-y: auto;
  z-index: 200;
}

.address-suggest.hidden {
  display: none;
}

.address-suggest__loading,
.address-suggest__hint {
  padding: 0.65rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
  list-style: none;
}

.address-field input.hidden {
  display: none;
}

.address-locked {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #ebe6e8);
  border-radius: 10px;
  background: var(--pink, #faf0f2);
}

.apex-lux .address-locked {
  border-color: var(--lux-line);
  border-radius: var(--lux-radius, 10px);
  background: var(--lux-surface, #fff);
}

.address-locked__text {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
}

.address-locked__change {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--maroon, #7a1528);
  text-decoration: underline;
  cursor: pointer;
  min-height: 2.75rem;
  touch-action: manipulation;
}

.address-field input.hidden {
  display: none;
}

.address-suggest__btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.75rem;
  min-height: 2.75rem;
  border: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1.35;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
  .address-suggest__btn {
    min-height: 2.875rem;
    padding: 0.75rem;
  }

  .delivery-location__suburb .address-field input,
  .delivery-panel .address-field input {
    min-height: 3rem;
    font-size: 16px;
  }

  .fulfilment-row--simple .choice-pill span {
    min-height: 4.75rem;
    padding: 0.9rem 0.55rem;
  }

  .delivery-msg--quote {
    font-size: 0.875rem;
    line-height: 1.45;
  }
}

.address-suggest__btn:hover,
.address-suggest__btn:focus {
  background: var(--pink, #faf0f2);
}

.event-date__label {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--maroon-dark, #5c0f1e);
}

.apex-lux .event-date__label {
  color: var(--lux-accent);
}

.event-date__hint {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.event-date__native {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border, #ebe6e8);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: inherit;
  background: #fff;
  color-scheme: light;
  touch-action: manipulation;
}

.apex-lux .event-date__native {
  border-color: var(--lux-line);
  border-radius: var(--lux-radius);
}

.event-date__native:focus {
  outline: 2px solid var(--maroon, #7a1528);
  outline-offset: 2px;
}

.event-date__error {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #b71c1c;
  font-weight: 500;
}

.event-date__error.hidden {
  display: none;
}

@media (max-width: 719px) {
  .event-date--mobile {
    position: relative;
  }

  .event-date__picker-label {
    position: relative;
    display: block;
    min-height: 3rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .event-date__picker-face {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--border, #ebe6e8);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--maroon-dark, #5c0f1e);
    pointer-events: none;
    box-sizing: border-box;
  }

  .event-date__picker-icon {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.15rem;
    border: 2px solid var(--maroon, #7a1528);
    border-radius: 4px;
    background:
      linear-gradient(var(--maroon, #7a1528), var(--maroon, #7a1528)) center 0.2rem /
      calc(100% - 0.28rem) 2px no-repeat;
  }

  .event-date--mobile:not(.event-date--has-value) .event-date__picker-text {
    color: var(--muted, #6b5c60);
    font-weight: 500;
  }

  .event-date__picker-label.has-value .event-date__picker-face {
    border-color: var(--maroon, #7a1528);
    background: var(--pink, #faf0f2);
  }

  .apex-lux .event-date__picker-face {
    border-color: var(--lux-line);
    border-radius: var(--lux-radius);
  }

  .event-date__native--tap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 3rem;
    margin: 0;
    padding: 0;
    opacity: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    font-size: 16px;
  }

  .event-date__native--tap::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* URGENT FIX — mobile calendar: the native OS date-picker widget is no
     longer used for day selection on mobile (see js/event-date-picker.js's
     buildGridPanel) since it could not reliably show a per-day
     disabled/greyed state the way desktop's native dropdown already does.
     The underlying <input type="date"> stays the real value/validation
     source (event-date__native--grid-mode just keeps it present for form
     submission and off the visible layout) — the face becomes the real,
     clickable control instead of a transparent input sitting on top of it. */
  .event-date__native--grid-mode {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .event-date--mobile .event-date__picker-face {
    pointer-events: auto;
  }

  /* A fixed, centred overlay (with its own backdrop) rather than an
     absolutely-positioned dropdown — the surrounding checkout form is long
     enough on mobile that a dropdown anchored under the date field could
     overlap unrelated content further down the page (e.g. the time-slot
     list). A modal-style overlay can never collide with anything else. */
  .event-date__grid-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(30, 10, 15, 0.35);
  }

  .event-date__grid-backdrop.hidden {
    display: none;
  }

  .event-date__grid-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(320px, calc(100vw - 2rem));
    z-index: 20;
    background: #fff;
    border: 1px solid var(--border, #ebe6e8);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 0.9rem;
    box-sizing: border-box;
    max-height: 85vh;
    overflow-y: auto;
  }

  .event-date__grid-panel.hidden {
    display: none;
  }

  .event-date__grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .event-date__grid-month {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--maroon-dark, #5c0f1e);
  }

  .event-date__grid-nav {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid var(--border, #ebe6e8);
    border-radius: 8px;
    background: #fff;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--maroon, #7a1528);
    cursor: pointer;
  }

  .event-date__grid-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .event-date__grid-weekdays,
  .event-date__grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
  }

  .event-date__grid-weekdays {
    margin-bottom: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted, #6b5c60);
  }

  .event-date__grid-day {
    min-height: 2.4rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--maroon-dark, #5c0f1e);
    cursor: pointer;
    touch-action: manipulation;
  }

  .event-date__grid-day:disabled {
    color: #c9bdc0;
    background: #f5f1f2;
    cursor: not-allowed;
  }

  .event-date__grid-day.is-today:not(:disabled) {
    border-color: var(--maroon, #7a1528);
  }

  .event-date__grid-day.is-selected {
    background: var(--maroon, #7a1528);
    color: #fff;
  }
}

/* Google Places dropdown — above checkout bar */
.pac-container {
  z-index: 6000 !important;
  border-radius: 10px;
  font-family: inherit;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.delivery-address-field--lookup {
  position: relative;
}

.delivery-address-field input {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.delivery-address-field--lookup .address-suggest {
  z-index: 500;
}

/* Mobile — event date row below address suggestions */
@media (max-width: 719px) {
  .config-step__body > .field:has([data-event-date-picker]),
  .config-step__body > .fulfilment-time {
    position: relative;
    z-index: 1;
  }

  .delivery-panel:focus-within {
    position: relative;
    z-index: 40;
    isolation: auto;
  }

  .delivery-address-field--lookup:focus-within {
    z-index: 41;
  }

  .delivery-address-field--lookup .address-suggest {
    z-index: 50;
  }
}

.address-suggest__main {
  display: block;
  font-weight: 500;
  line-height: 1.35;
}

.address-suggest__sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted, #6b6568);
  margin-top: 0.15rem;
}

.delivery-address-field .field__hint a {
  color: var(--maroon, #7a1530);
  font-weight: 600;
}

.contact-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Reuses the exact computed typography of .event-date__hint's "Minimum 3
   days' notice" text (0.7rem / 400 / var(--muted) / 1.55 line-height) as
   the single standard for every small/secondary helper across Delivery
   and Pick-up — not a new, visually-similar style. */
.field__hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted, #6b5560);
  line-height: 1.55;
  margin: 0 0 0.35rem;
}

/* Heading -> helper -> control rhythm: zero gap between a heading and its
   own helper text (they read as one unit), normal gap between the helper
   (or the heading directly, when there's no helper) and the control that
   follows. A heading with no helper keeps its own normal margin-bottom
   (.field span's own rule) as the gap straight to the control. */
.field span:has(+ .field__hint) {
  margin-bottom: 0;
}

.delivery-handoff {
  margin-top: 0.35rem;
}

.delivery-handoff__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--maroon-dark, #5c0f1e);
  margin-bottom: 0;
}

.apex-lux .delivery-handoff__label {
  color: var(--lux-accent);
}

.delivery-handoff__hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted, #6b5560);
  line-height: 1.55;
  margin: 0 0 0.45rem;
}

.delivery-handoff__choices {
  margin-top: 0.15rem;
}

.recipient-toggle__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--maroon-dark, #5c0f1e);
}

.apex-lux .recipient-toggle__label {
  color: var(--lux-accent);
}

/* Step 3 / cart delivery block spacing */
.page-helium--simple .config-step[data-step="3"] .config-step__body {
  margin-top: 1.25rem;
  margin-bottom: 6rem;
}

/* Cart: normal section margin only — .page-cart already reserves
   calc(5.5rem + safe-bottom) of page-level padding-bottom to clear the
   fixed Pay bar (see .page-cart in styles.css), so a second, much larger
   6rem margin stacked here on top of that was pure dead space between
   Balloon Bags and the Terms/Privacy/Balloon Care acknowledgement that
   follows — not needed for bar clearance, just an accidental gap. */
.page-cart .cart-page__details {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.page-cart .cart-page__details .config-step__body {
  padding-bottom: 0.25rem;
}

/* Shared field-group top gap — ONE rule instead of per-field margin
   patches. .field's own margin-bottom (0.75rem) already provides this
   gap between two adjacent .field elements, but several non-.field
   containers in this flow (.delivery-panel, .delivery-handoff) have no
   trailing margin of their own, so whatever came right after them (e.g.
   Delivery Date after the address panel, Recipient Name after the
   "When We Arrive" handoff panel) sat flush with no top separation at
   all. A single top margin on every non-first child of the step body
   normalizes this regardless of what precedes it — margins collapse with
   the previous element's own margin-bottom in normal block flow, so this
   never doubles up, it just guarantees a floor. */
.page-cart .config-step__body > * + * {
  margin-top: 1.25rem;
}

/* Cart page inner spacing/readability — ONE shared content gutter, applied
   equally left AND right to the panel's own containers (heading row +
   body), scoped to .page-cart so every other page's identical shared
   components (.config-step, .pickup-location, .bags-qty-row, etc — all
   used site-wide on product configurator pages too) are unaffected.
   Previously this was a set of per-field left-only padding patches
   (.pickup-location, .bags-qty-row, .field input, .fulfilment-time select
   each adding their own extra left padding on top of the container's),
   which is exactly what made the right side run close to the edge while
   the left had visible spacing — replaced with a single top-level gutter
   so every child (delivery, pick-up, address, time slot, bags row) aligns
   to the same left AND right edge automatically. Top/bottom padding, box
   widths (100% inputs; block-level panels unaffected by box-sizing:
   border-box), fonts, colours and functionality are all untouched. */
.page-cart .config-step summary,
.page-cart .config-step__head,
.page-cart .config-step__body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* The Delivery/Pick-up button group had 0px above it (flush against the
   "Delivery & pay" section heading) but ~10px below (the natural top-margin
   of whatever panel/field renders next) — matched here so the group gets
   the same breathing room on both sides, using the existing gap below as
   the reference rather than inventing a new value. Scoped to the cart page
   only; other pages using this same shared .fulfilment-row--simple
   component are unaffected. */
.page-cart .fulfilment-row--simple {
  margin-top: 0.65rem;
}

.page-cart .order-row {
  padding-left: 0.25rem;
}

/* Protection bags — mobile layout & touch targets */
@media (max-width: 719px) {
  .bags-qty-row {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .bags-qty-row__label {
    flex: 1 1 100%;
    min-width: 0;
    line-height: 1.35;
  }

  .bags-qty-stepper--cart {
    flex-shrink: 0;
  }

  .bags-qty-row__sum {
    margin-left: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .bags-qty-stepper__btn {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    touch-action: manipulation;
  }
}