/* storefront/catering.css — The catering offer: catering type cards, package cards (counts list),
   price lists for live stations / trays / mini bites, the "Also from Mini Kitchen" band and the
   "Build your package" form with its running estimate.
   Part 5 of 9; files are linked in this order in views/storefront.html (cascade order matters). */

.container-narrow {
  max-width: 880px;
  margin-inline: auto;
}

/* Bilingual names: the visitor's language first, the other one quietly underneath */
.bi-name {
  display: block;
}

.bi-other {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
}

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}

.check-list li {
  position: relative;
  padding-inline-start: 22px;
}

.check-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  top: 0.45em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--brand-ink);
  border-bottom: 1.5px solid var(--brand-ink);
  transform: rotate(-45deg);
}

/* ============================================================================
   PACKAGE CARDS: name + price side by side, then what the customer chooses as a counted list
   ============================================================================ */
.packages-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* Seasonal offers: one or two cards stay a comfortable width, centred */
.packages-grid-1,
.packages-grid-2 {
  margin-inline: auto;
  align-items: stretch;
}
.packages-grid-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}
.packages-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 860px;
}
.special-offer {
  border-color: var(--brand-primary);
}

/* Catering types on the home page: the same card as the packages, four in a row */
.packages-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.type-package .package-card-media {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
}

.type-package .package-card-media img {
  height: auto;
}

.type-package .package-card-title {
  font-size: 1.25rem;
}

.type-package .package-card-price .package-price-value {
  font-size: 1.7rem;
}

.package-card-price .package-price-from {
  margin-bottom: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.type-package-text {
  flex: 1;
  margin: 16px 0 20px;
}

.package-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.event-package .package-card-title {
  margin: 8px 0 0;
}

.event-package .package-card-price {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  text-align: end;
  line-height: 1.1;
}

.package-card-price .package-price-value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.package-card-price .package-price-unit {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.event-package-plain {
  border-top: 2px solid var(--brand-primary);
}

.package-counts-label {
  margin-top: var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.package-counts {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 var(--space-5);
  font-size: 0.92rem;
}

.package-counts li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.package-count {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-ivory);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.package-count.is-all {
  font-size: 0.66rem;
  color: var(--brand-ink);
}

.package-counts .is-included .package-count {
  background: var(--brand-soft);
}

/* Recommended package: gold frame, ribbon on top, a touch of lift */
.package-card.is-recommended {
  border-color: var(--brand-primary);
  box-shadow:
    0 0 0 1px var(--brand-primary),
    var(--shadow-soft);
}

.package-card.is-recommended:hover {
  box-shadow:
    0 0 0 1px var(--brand-primary),
    var(--shadow-lift);
}

.package-ribbon {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.package-ribbon i {
  font-size: 0.62rem;
  color: #f0d79a;
}

.event-package-plain .package-ribbon {
  position: static;
  align-self: flex-start;
  margin: 20px 24px -6px;
}

.package-card.is-recommended .package-card-footer .btn-primary {
  background: var(--ink);
}

.extras-note {
  margin: 28px auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.extras-note strong {
  color: var(--ink);
}

/* Packages page: heading above each tab */
.tab-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}

.tab-intro-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.tab-intro-text {
  color: var(--text-muted);
  margin: 8px auto 0;
}

/* ============================================================================
   CATERING MENU (dishes by course, no prices) — laid out like a printed bilingual menu card
   ============================================================================ */
.menu-card {
  max-width: 1040px;
  margin: 0 auto;
}

/* Buffet / Birthday Mini switch */
.menu-switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--bg-card);
}

.menu-switch-btn {
  padding: 9px 22px;
  border: none;
  border-radius: var(--radius-control);
  background: none;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.menu-switch-btn.active {
  background: var(--ink);
  color: #fff;
}

/* Course links: stay under the header while the menu scrolls */
.menu-index {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px;
  margin-bottom: 8px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.menu-index::-webkit-scrollbar {
  display: none;
}

.menu-index-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--bg-card);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.menu-index-link:hover {
  border-color: var(--brand-primary);
}

.menu-index-count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  text-align: center;
}

/* The sheet: one white card, courses separated by hairlines */
.menu-sheet {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(8px, 2vw, 16px) clamp(20px, 4vw, 48px);
}

.menu-section {
  padding: clamp(28px, 3.5vw, 40px) 0;
  scroll-margin-top: calc(var(--header-h) + 72px);
}

.menu-section + .menu-section {
  border-top: 1px solid var(--line);
}

.menu-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.menu-section-names {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.menu-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  color: var(--ink);
  outline: none;
}

.menu-section-other {
  font-size: 1.05rem;
  color: var(--brand-ink);
}

.menu-section-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.menu-choose {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.menu-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.menu-pill {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.menu-pill strong {
  color: var(--brand-ink);
}

.menu-pill-all {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-ink);
}

/* Dishes: name at the start, the other language at the end, dotted leader between */
.menu-dishes {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 64px);
}

.menu-dishes-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menu-dish-row {
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  min-width: 0;
}

.menu-dish-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.menu-dish-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
}

/* The other language sits at the far end of the line. It carries its own dir, so it is placed with
   the page's direction (physical sides) rather than its own logical start/end. */
.menu-dish-other {
  flex: 0 1 auto;
  max-width: 48%;
  min-width: 0;
  text-align: right;
  font-size: 0.95rem;
  color: var(--text-muted);
}

[dir='rtl'] .menu-dish-other {
  text-align: left;
}

.menu-dish-row .dish-details {
  margin-top: 4px;
}

.menu-more {
  display: none;
  margin-top: 16px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: none;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
  cursor: pointer;
}

.menu-course-empty {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 760px) {
  .menu-dishes-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  /* Long courses show their first dishes until "Show all" is pressed */
  .menu-section.is-long:not(.is-open) .menu-dish-row:nth-child(n + 9) {
    display: none;
  }
  .menu-section.is-long .menu-more {
    display: inline-flex;
  }
}

/* Flavours / details under a dish (catering menu and package builder) */
.dish-details {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

/* ============================================================================
   PRICE LISTS (live stations, trays, mini bites)
   ============================================================================ */
.price-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.price-list-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 64px);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.price-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
}

.price-row-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.price-row-price {
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink);
}

.price-row-unit {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.price-row-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 18px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.price-option strong {
  color: var(--ink);
  white-space: nowrap;
}

/* ============================================================================
   "ALSO FROM MINI KITCHEN" BAND (home)
   ============================================================================ */
.also-band {
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.also-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}

.also-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.also-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: start;
  transition: border-color 0.2s ease;
}

.also-link:hover {
  border-color: var(--line-strong);
}

.also-link strong {
  color: var(--ink);
  margin-inline-end: 6px;
}

.also-link i {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================================================
   BUILD YOUR PACKAGE
   ============================================================================ */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.builder-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.builder-step {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 30px);
}

.builder-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  margin-bottom: 18px;
}

.builder-step-title > span {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-primary);
  color: var(--brand-ink);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.builder-step-title small {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.builder-help {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* One choice group ("Hot main courses — choose 3") */
.builder-group {
  min-width: 0;
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
}

.builder-group.invalid {
  border-color: var(--danger);
}

.builder-group-info {
  background: var(--bg-ivory);
  border-color: transparent;
}

.builder-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: 100%;
  padding: 0;
  float: inline-start; /* lets the legend sit inside the fieldset box */
  margin-bottom: 12px;
}

.builder-group-info .builder-group-head {
  float: none;
  margin-bottom: 0;
}

.builder-group-title {
  font-weight: 600;
  color: var(--ink);
}

.builder-group-note {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.builder-group-hint {
  clear: both;
  font-size: var(--fs-xs);
  color: var(--danger);
}

.builder-group-hint:empty {
  display: none;
}

.builder-counter,
.builder-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.builder-counter.done {
  color: var(--success);
}

.builder-tag {
  padding: 2px 10px;
  border-radius: var(--radius-control);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.builder-checks {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.builder-checks-inline {
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
}

.builder-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.builder-check:hover {
  border-color: var(--line-strong);
}

.builder-check.checked {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}

.builder-check input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--ink);
}

.builder-check:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.builder-check .bi-other {
  font-size: 0.76rem;
  font-weight: 400;
}

/* Station / tray / bite rows: name on one side, controls on the other */
.builder-rows {
  border-top: 1px solid var(--line);
}

.builder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.builder-row-name {
  flex: 1 1 200px;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.builder-row-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
}

.builder-row-controls select {
  width: auto;
  max-width: 100%;
}

.builder-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.builder-qty input,
.builder-qty-input {
  width: 84px;
  flex-shrink: 0;
  text-align: center;
}

.builder-row-qty {
  cursor: pointer;
}

.builder-details + .builder-details {
  margin-top: 12px;
}

.builder-details summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
  color: var(--ink);
}

.builder-details summary small {
  font-weight: 500;
  color: var(--text-muted);
  margin-inline-start: 6px;
}

/* Running estimate */
.builder-summary {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand-primary);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 30px);
}

.builder-lines {
  list-style: none;
  margin: 14px 0 20px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.builder-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.builder-lines strong {
  white-space: nowrap;
  color: var(--ink);
}

.builder-lines em {
  white-space: nowrap;
  font-style: normal;
  color: var(--text-muted);
}

.builder-lines .builder-lines-empty {
  color: var(--text-muted);
}

.builder-total-label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.builder-total {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--ink);
  line-height: 1.15;
  margin-top: 4px;
}

.builder-total-lbp {
  font-size: 0.88rem;
  color: var(--brand-ink);
  font-weight: 600;
}

.builder-fineprint {
  margin: 14px 0 18px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.builder-errors {
  font-size: var(--fs-small);
  color: var(--danger);
}

.builder-errors:not(:empty) {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-field);
}

.builder-errors ul {
  margin-top: 4px;
  padding-inline-start: 18px;
}

.form-control[aria-invalid='true'] {
  border-color: var(--danger);
}

/* Progress strip above the form: Package → Dishes → Add-ons → Your details */
.builder-progress-wrap {
  grid-column: 1 / -1;
}

.builder-progress {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.builder-progress-step button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-field);
  background: none;
  text-align: start;
  transition: background-color 0.2s ease;
}

.builder-progress-step button:hover {
  background: var(--bg-ivory);
}

.builder-progress-dot {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  transition: var(--transition);
}

.builder-progress-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.builder-progress-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.builder-progress-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-progress-step.is-current .builder-progress-dot {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.builder-progress-step.is-current button {
  background: var(--bg-ivory);
}

.builder-progress-step.is-done .builder-progress-dot {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
  font-size: 0.7rem;
}

/* Inline messages under the field that needs attention */
.field-error {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--danger);
}

.builder-group > .field-error {
  clear: both;
  margin-top: 10px;
}

.builder-group.invalid {
  background: #fdf6f5;
}

.builder-assure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.builder-assure i {
  color: var(--brand-ink);
}

/* After sending: confirmation panel in place of the form */
.builder-sent {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--success);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.builder-sent:focus {
  outline: none;
}

.builder-sent-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: #fff;
  font-size: 1.3rem;
}

.builder-sent-title {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 10px 0 12px;
}

.builder-sent p {
  margin: 0 auto;
  color: var(--text-muted);
}

.builder-sent .hero-actions {
  justify-content: center;
  margin-top: var(--space-5);
}

/* Phone bottom bar on catering pages (js: package-builder.js renderBar). Shown ≤ 760px only. */
.builder-bar {
  display: none;
}

/* ============================================================================
   BREAKPOINTS
   ============================================================================ */
@media (max-width: 1100px) {
  .packages-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
  .packages-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .builder {
    grid-template-columns: minmax(0, 1fr);
  }
  .builder-summary {
    position: static;
  }
  .builder-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .how-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .how-step + .how-step::before {
    display: none;
  }
  .price-list-two {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .packages-grid-2,
  .packages-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .builder-checks {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .builder-check {
    padding: 8px 10px;
  }
  .builder-group {
    padding: 14px;
  }
  .builder-progress {
    padding: 4px;
    gap: 2px;
  }
  .builder-progress-step button {
    padding: 8px;
    gap: 8px;
  }
  .builder-progress-meta {
    display: none;
  }
  .package-card-price .package-price-value {
    font-size: 1.8rem;
  }
  .price-list-stations .price-row {
    flex-wrap: wrap;
  }
  .price-row-options {
    justify-content: flex-start;
  }
  .also-link {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* Phones: the form steps lose their outer frame so the dish lists get the full width */
  .builder-step {
    padding: 18px 14px;
  }
  .builder-group {
    padding: 12px;
  }
}

@media (max-width: 560px) {
  /* Package buttons stay on one line each */
  .package-card-footer .btn {
    white-space: nowrap;
    padding-inline: 14px;
  }
  .package-card-footer .btn-primary {
    flex: 2 1 auto;
  }
  /* How it works: icon beside the text, so the three steps stay short */
  .how-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px;
  }
  .how-step-icon {
    grid-row: span 3;
  }
  .how-step-num {
    margin-top: 0;
  }
}