/* assets_v1/css/search_page/search_dev_patch.css */

/* Let the real search stylesheet do almost everything */
#app-shell,
#step-container {
  width: 100%;
}

#step-container {
  max-width: none;
  margin: 0;
  overflow: visible;
  scroll-margin-top: var(--tw-sticky-offset, 128px);
}

/* Keep link CTAs behaving like proper buttons */
#continue-to-taste,
#continue-to-results,
#start-over-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* =========================
   STEP SUMMARY — FINAL OVERRIDE
   ========================= */

#step1-summary,
#step12-summary,
.step-summary {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 196, 0, 0.35);
  border-radius: 16px;
  background: rgba(8, 18, 44, 0.72);
  box-shadow: 0 0 18px rgba(255, 140, 0, 0.08);
  box-sizing: border-box;
}

#step1-summary .step-summary__group+.step-summary__group,
#step12-summary .step-summary__group+.step-summary__group,
.step-summary .step-summary__group+.step-summary__group {
  margin-top: 12px;
}

#step1-summary .step-summary__group,
#step12-summary .step-summary__group,
.step-summary .step-summary__group {
  min-width: 0;
}

#step1-summary .step-summary__title,
#step12-summary .step-summary__title,
.step-summary .step-summary__title {
  display: block;
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffc400;
  line-height: 1.2;
}

#step1-summary .step-summary__chips,
#step12-summary .step-summary__chips,
.step-summary .step-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

#step1-summary .step-summary__chips>span,
#step12-summary .step-summary__chips>span,
.step-summary .step-summary__chips>span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f7ff;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#step1-summary .step-summary__chips>span strong,
#step12-summary .step-summary__chips>span strong,
.step-summary .step-summary__chips>span strong {
  color: #ffffff;
  font-weight: 700;
}

#step12-summary .step-summary__chips>span.discover-summary-pill--tastebud,
.step-summary .step-summary__chips>span.discover-summary-pill--tastebud {
  gap: 7px;
  padding: 5px 10px 5px 6px;
}

.discover-summary-pill__number {
  display: inline-flex;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 196, 0, 0.16);
  border: 1px solid rgba(255, 196, 0, 0.36);
  color: #ffc400;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.discover-summary-pill__label {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 196, 0, 0.35);
  color: #fff;
  text-decoration: none;
}

.btn-secondary:hover {
  text-decoration: none;
}

/* Make inline results span the full filters grid width */
#filters-inline-results,
.inline-results-shell {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  display: block;
  margin-top: 20px;
}

/* Give the shell a proper full-width layout */
.inline-results-shell {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 196, 0, 0.18);
  background: rgba(6, 15, 40, 0.82);
  box-sizing: border-box;
}

/* Top / bottom action rows */
.inline-results-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.inline-results-actions--top {
  margin-bottom: 16px;
}

.inline-results-actions--bottom {
  margin-top: 18px;
}

/* Keep continue button clean and centered */
.inline-continue-btn {
  min-width: 180px;
  text-align: center;
}

/* Full-width results list */
#filters-inline-list,
.inline-results-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Make inline result cards fill available space */
#filters-inline-list .result-card,
.inline-results-list .result-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Better top row layout inside inline cards */
#filters-inline-list .result-card__top,
.inline-results-list .result-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* On bigger screens, allow a comfortable two-column grid if you want it */
@media (min-width: 1100px) {

  #filters-inline-list,
  .inline-results-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* On tablet/mobile, keep it single column */
@media (max-width: 1099px) {

  #filters-inline-list,
  .inline-results-list {
    grid-template-columns: 1fr;
  }
}

.taste-slot {

  transition: transform .2s ease;

}
.btn-orange--xl {
  min-height: 56px;
  padding: 0.95rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
}

.btn-orange--primary {
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.24);
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-orange--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.30);
}

.discover-progress-wrap {
  margin: 1.25rem 0 1rem;
}

.discover-progress {
  padding: 1rem 1rem 1.1rem;
  border-radius: 18px;
  background: rgba(6, 16, 48, 0.72);
  border: 1px solid rgba(255, 184, 0, 0.35);
  backdrop-filter: blur(10px);
}

.discover-progress__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.75rem;
}

.discover-progress__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c84c;
}

.discover-progress__count {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.discover-progress__bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
  margin-bottom: 0.95rem;
}

.discover-progress__fill {
  display: block;
  height: 100%;
  width: 33%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
  transition: width 0.28s ease;
}

.discover-progress__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.discover-progress__step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.discover-progress__step.is-active,
.discover-progress__step.is-complete {
  opacity: 1;
}

.discover-progress__step.is-active {
  transform: translateY(-1px);
}

.discover-progress__dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  flex-shrink: 0;
}

.discover-progress__step.is-complete .discover-progress__dot,
.discover-progress__step.is-active .discover-progress__dot {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color: #111827;
  border-color: transparent;
}

.discover-progress__label {
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
}

.btn-orange--xl {
  min-height: 56px;
  padding: 0.95rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
}

.btn-orange--primary {
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.24);
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-orange--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.30);
}

@media (max-width: 767px) {
  .discover-progress__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .discover-progress__steps {
    grid-template-columns: 1fr;
  }

  .btn-orange--xl {
    width: 100%;
  }
}

.filters-helper {
  font-size: 0.9rem;
  line-height: 1.4;
}

.filter-field__warning {
  margin: 0.55rem 0 0;
  color: #fca5a5;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.debug-select.is-invalid {
  border-color: rgba(248, 113, 113, 0.85);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.18);
}

.results-empty-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.results-empty-card__cta {
  text-decoration: none;
}

@media (max-width: 768px) {
  .filters-helper {
    font-size: 0.82rem;
    line-height: 1.35;
  }
}

/* =====================================================
   Phase 1 polish layer: overrides loaded after search CSS
   ===================================================== */
#step1-summary,
#step12-summary,
.step-summary,
.inline-results-shell,
.discover-progress {
  border-radius: var(--tw-radius-lg, 18px);
  border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.13));
  background: var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
  box-shadow: var(--tw-premium-shadow-soft, 0 12px 28px rgba(0, 0, 0, 0.26));
}

#step1-summary .step-summary__title,
#step12-summary .step-summary__title,
.step-summary .step-summary__title,
.discover-progress__eyebrow {
  color: var(--tw-accent-gold);
  letter-spacing: 0.08em;
}

#step1-summary .step-summary__chips>span,
#step12-summary .step-summary__chips>span,
.step-summary .step-summary__chips>span {
  min-height: 32px;
  border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.13));
  background: rgba(255, 255, 255, 0.055);
  color: var(--color-text);
}

@media (max-width: 380px) {

  #step1-summary,
  #step12-summary,
  .step-summary {
    padding: 12px;
  }

  #step1-summary .step-summary__chips,
  #step12-summary .step-summary__chips,
  .step-summary .step-summary__chips {
    gap: 6px;
  }

  #step1-summary .step-summary__chips>span,
  #step12-summary .step-summary__chips>span,
  .step-summary .step-summary__chips>span {
    width: 100%;
    justify-content: flex-start;
  }
}

.btn-secondary,
.btn-orange.btn-secondary,
#clear-tastes,
#cancel-search-btn,
#start-over-link {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.13));
  color: var(--color-text);
  box-shadow: none;
}

.btn-orange--xl {
  min-height: 54px;
  border-radius: 999px;
}

.btn-orange--primary {
  box-shadow: 0 14px 30px rgba(249, 115, 22, 0.22);
}

.discover-progress {
  padding: 0.9rem 1rem 1rem;
}

.discover-progress__count,
.discover-progress__label {
  color: var(--color-text);
}

.discover-progress__bar {
  height: 8px;
  background: rgba(148, 163, 184, 0.18);
}

.discover-progress__dot {
  width: 28px;
  height: 28px;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.07);
}

.discover-progress__step.is-complete .discover-progress__dot,
.discover-progress__step.is-active .discover-progress__dot {
  color: #111827;
}

.inline-results-shell {
  padding: clamp(1rem, 2vw, 1.25rem);
}

@media (max-width: 767px) {
  .discover-progress__steps {
    gap: 0.55rem;
  }

  .discover-progress__step {
    min-height: 38px;
  }
}

/* =====================================================
   Sharp-1 precision layer: active discover experience
   ===================================================== */
.tw-panel {
  width: min(100%, var(--tw-shell-max-app, 1040px));
  max-width: var(--tw-shell-max-app, 1040px);
  padding: clamp(0.95rem, 1.6vw, 1.55rem);
  border-radius: var(--tw-ui-radius-card, var(--tw-radius-lg, 14px));
  background:
    linear-gradient(145deg, rgba(249, 115, 22, 0.045), transparent 38%),
    var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
  border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.16));
  box-shadow: var(--tw-premium-shadow, 0 12px 30px rgba(0, 0, 0, 0.28));
}

.debug-header {
  gap: 0.75rem;
  margin-bottom: var(--tw-section-gap-sm, 0.75rem);
}

.debug-header h1 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.1;
}

.debug-hero {
  padding: 0.78rem 0.9rem;
  margin-bottom: var(--tw-section-gap-sm, 0.75rem);
}

.debug-hero,
.discover-progress,
.step-summary,
.tw-guidance-card,
.filter-section-intro,
.taste-helper,
.taste-rail,
.taste-inspo,
.results-explainer,
.results-shell,
.result-section-heading,
.result-card {
  border-radius: var(--tw-ui-radius-card, var(--tw-radius-md, 10px));
  border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.16));
  box-shadow: var(--tw-premium-shadow-soft, 0 8px 18px rgba(0, 0, 0, 0.18));
  transition:
    border-color var(--tw-motion-quick, 160ms ease),
    box-shadow var(--tw-motion-quick, 160ms ease),
    transform var(--tw-motion-quick, 160ms ease);
}

.filters-label,
.debug-label,
.badge-pill,
.tw-match-badge,
.taste-chip,
.result-restaurant-name span,
.order-link {
  border-radius: var(--tw-ui-radius-chip, var(--tw-radius-sm, 8px));
}

.hero-meta .cities span {
  font-size: 0.95rem;
  line-height: 1.45;
}

.hero-meta .pill {
  border-radius: var(--tw-ui-radius-chip, var(--tw-radius-sm, 8px));
  box-shadow: none;
}

.discover-progress-wrap {
  margin: var(--tw-section-gap-sm, 0.75rem) 0 var(--tw-section-gap-sm, 0.75rem);
}

.discover-progress {
  padding: 0.72rem 0.82rem;
}

.discover-progress__top {
  margin-bottom: 0.55rem;
}

.discover-progress__bar {
  height: 6px;
  margin-bottom: 0.7rem;
}

.discover-progress__dot {
  width: 24px;
  height: 24px;
  font-size: 0.78rem;
}

.discover-progress__label,
.discover-progress__count {
  font-size: 0.78rem;
}

.filters-helper {
  margin-bottom: 0.75rem;
  font-size: 0.86rem;
}

.tw-guidance-card,
.filter-section-intro {
  padding: var(--tw-ui-card-pad-md, 0.82rem);
}

.tw-guidance-card__body,
.filter-section-intro p {
  font-size: 0.84rem;
  line-height: 1.42;
}

.filters-section-card {
  margin-bottom: var(--tw-section-gap-sm, 0.75rem);
}

.filters-section-title {
  margin: 0 0 0.3rem;
  color: var(--tw-accent-gold, #facc15);
  font-size: clamp(1rem, 2vw, 1.16rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.filters-section-helper {
  margin: 0;
  color: var(--tw-helper-text, rgba(226, 232, 240, 0.78));
  font-size: 0.9rem;
  line-height: 1.42;
}

.filters-grid {
  gap: var(--tw-section-gap-sm, 0.75rem);
}

.filter-field.filter-field--city-main label {
  font-size: 0.78rem;
}

.filters-grid > .filter-field--restaurant:has(#restaurant-input) {
  grid-column: auto;
}

@media (min-width: 769px) {
  .filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filters-grid > .filter-field--city,
  .filters-grid > .filter-field--restaurant:has(#restaurant-input) {
    grid-column: auto;
  }

  .filters-grid > .filter-section-intro,
  .filters-grid > .filter-actions,
  .filters-grid > #filters-inline-results {
    grid-column: 1 / -1;
  }
}

.filters-grid > .filter-field--city.filter-field--city-main,
.filters-grid > .filter-field--restaurant:has(#restaurant-input) {
  grid-column: 1 / -1;
}

.filter-field,
.filter-field--focus {
  padding: var(--tw-ui-card-pad-sm, 0.68rem);
  border-radius: var(--tw-ui-radius-card, var(--tw-radius-md, 10px));
  box-shadow: none;
}

.filter-field label,
.filter-field--focus label {
  margin-bottom: 0.34rem;
  font-size: 0.72rem;
}

.debug-input,
.debug-select {
  min-height: 42px;
  border-radius: var(--tw-ui-radius-chip, var(--tw-radius-sm, 8px));
}

.search-actions {
  gap: var(--tw-ui-gap-sm, 0.55rem);
  margin-top: var(--tw-section-gap-sm, 0.75rem);
}

.btn-orange {
  min-height: var(--tw-ui-control-min-height, 40px);
  padding: var(--tw-ui-control-pad-y, 0.58rem) var(--tw-ui-control-pad-x, 0.9rem);
  border-radius: var(--tw-ui-radius-control, var(--tw-radius-md, 10px));
  box-shadow: none;
  font-size: 0.87rem;
  letter-spacing: 0.02em;
}

#continue-to-taste,
#continue-to-results,
.inline-continue-btn,
.btn-orange--primary {
  min-height: var(--tw-ui-control-min-height-lg, 46px);
  border-radius: var(--tw-ui-radius-control, var(--tw-radius-md, 10px));
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.2);
  font-weight: 800;
}

.btn-secondary,
.btn-orange.btn-secondary,
#clear-tastes,
#cancel-search-btn,
#start-over-link {
  background: rgba(255, 255, 255, 0.045);
}

#shuffle-tastes,
#show-synth-results {
  background: rgba(34, 211, 238, 0.085);
  border-color: rgba(34, 211, 238, 0.2);
}

.taste-header-row {
  gap: var(--tw-section-gap-md, 1rem);
}

.taste-helper {
  padding: 0.78rem 0.85rem;
}

.taste-helper-title {
  margin: 0 0 0.36rem;
  color: var(--tw-accent-gold, #facc15);
  font-size: clamp(1rem, 2vw, 1.16rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.taste-helper p {
  color: var(--tw-helper-text, rgba(226, 232, 240, 0.78));
  font-size: 0.9rem;
  line-height: 1.42;
}

.taste-order-card {
  padding: 0.72rem 0.82rem;
  border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
  border-radius: var(--tw-ui-radius-card, var(--tw-radius-md, 10px));
  background: rgba(34, 211, 238, 0.06);
}

.taste-order-card p {
  margin: 0 0 0.46rem;
  color: var(--color-text, #f8fafc);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.taste-order-example {
  display: grid;
  gap: 0.18rem;
  color: var(--tw-helper-text, rgba(226, 232, 240, 0.78));
  font-size: 0.84rem;
  line-height: 1.38;
}

.taste-order-example strong {
  color: var(--tw-accent-gold, #facc15);
}

.taste-rail,
.results-shell,
.inline-results-shell {
  padding: clamp(0.82rem, 1.5vw, 1rem);
  scroll-margin-top: var(--tw-sticky-offset, 128px);
}

#taste-row {
  gap: 0.6rem;
}

.taste-slot,
#taste-row .taste-slot:first-child {
  min-height: 58px;
  padding: 0.68rem 0.78rem;
  border-radius: var(--tw-ui-radius-card, var(--tw-radius-md, 10px));
  box-shadow: none;
}

#taste-row .taste-slot:first-child {
  min-height: 66px;
}

#taste-row .taste-slot:nth-child(2) {
  margin-top: 1.3rem;
}

.taste-inspo {
  padding: 0.75rem 0.82rem;
}

.taste-chip {
  min-height: var(--tw-ui-chip-min-height, 32px);
  padding: var(--tw-ui-chip-pad-y, 0.34rem) var(--tw-ui-chip-pad-x, 0.58rem);
  box-shadow: none;
}

.results-explainer {
  padding: 0.82rem 0.88rem;
}

.results-explainer__title {
  font-size: 0.98rem;
}

.results-explainer__list {
  gap: 0.34rem;
}

.result-section-heading {
  padding: 0.8rem 0.85rem;
  margin-top: 0.85rem;
}

.result-card {
  padding: var(--tw-ui-card-pad-lg, 0.95rem);
  margin-bottom: 0.72rem;
  background: var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
  scroll-margin-top: var(--tw-sticky-offset, 128px);
}

.search-actions--footer {
  margin-top: var(--tw-section-gap-md, 1rem);
}

.result-card--best-match,
.result-card--strong,
.result-card--close,
.result-card--similar,
.result-card--broad,
.result-card--close-alternative {
  border-left-width: 2px;
}

.result-card .tw-match {
  padding: 0.6rem 0.64rem;
  border-radius: var(--tw-ui-radius-chip, var(--tw-radius-sm, 8px));
}

.result-meta-row {
  margin-top: 0.62rem;
  padding-top: 0.58rem;
}

.result-card .order-link {
  min-height: var(--tw-ui-control-min-height, 40px);
  box-shadow: none;
}

@media (max-width: 767px) {
  .discover-progress__top {
    flex-direction: row;
    align-items: center;
  }

  .discover-progress__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .discover-progress__step {
    min-height: 32px;
    gap: 0.28rem;
  }

  .discover-progress__label {
    font-size: 0.68rem;
  }
}

@media (max-width: 640px) {
  #step-container,
  .taste-rail,
  .results-shell,
  .inline-results-shell,
  .result-card {
    scroll-margin-top: var(--tw-sticky-offset-mobile, 180px);
  }

  .tw-panel {
    padding: var(--tw-ui-card-pad-md, 0.82rem);
    border-radius: var(--tw-ui-radius-card, 12px);
  }

  .debug-header,
  .debug-hero,
  .discover-progress-wrap {
    margin-bottom: 0.62rem;
  }

  .debug-hero {
    padding: 0.68rem 0.72rem;
  }

  .filters-grid {
    gap: var(--tw-section-gap-xs, 0.55rem);
  }

  .filter-field,
  .filter-field--focus,
  .tw-guidance-card,
  .filter-section-intro,
  .taste-helper,
  .taste-rail,
  .results-explainer,
  .results-shell {
    padding: 0.68rem;
  }

  .debug-input,
  .debug-select,
  .btn-orange {
    min-height: 44px;
  }

  .result-card {
    padding: 0.82rem;
  }
}

/* =====================================================
   Phase 1 mobile-first cleanup: active discover pages
   ===================================================== */
@media (max-width: 768px) {
  .tw-panel,
  #app-shell,
  #step-container,
  .filters-grid,
  .taste-rail,
  .results-shell,
  .inline-results-shell,
  .result-card {
    min-width: 0;
    max-width: 100%;
  }

  .debug-header {
    flex-direction: column;
    align-items: stretch;
  }

  .debug-header h1,
  .hero-meta .cities span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .filters-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-actions,
  .restaurant-actions-row,
  .results-empty-card__actions {
    width: 100%;
  }

  .search-actions {
    align-items: stretch;
  }

  .search-actions .btn-orange,
  .search-actions a.btn-orange,
  .inline-continue-btn,
  .results-empty-card__cta {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .taste-chip {
    min-width: 0;
    white-space: normal;
  }

  .result-card-actions,
  .result-card .result-item-order,
  .result-card .order-link {
    width: 100%;
  }
}

/* =====================================================
   TasteBud laptop containment: MacBook and smaller desktop
   ===================================================== */
#taste-section,
.taste-header-row,
.taste-helper,
.taste-rail,
#taste-row,
#taste-row .taste-slot,
.taste-inspo,
.taste-inspo__chips {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#taste-row .taste-slot {
  flex: 0 1 auto;
  align-self: stretch;
}

#taste-section .search-actions .btn-orange,
#taste-section .search-actions a.btn-orange,
.search-actions--primary #continue-to-results {
  max-width: 100%;
  box-sizing: border-box;
}

#taste-section {
  display: grid;
  gap: var(--tw-section-gap-md, 1rem);
}

.taste-helper,
.taste-rail,
.taste-inspo {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.taste-inspo__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.taste-chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.taste-keyword {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1440px) {
  body:has(#taste-section) .tw-main {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  body:has(#taste-section) .tw-panel {
    overflow: visible;
  }

  .taste-header-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--tw-section-gap-md, 1rem);
  }

  .taste-helper {
    width: 100%;
  }

  .taste-rail {
    display: grid;
    gap: var(--tw-section-gap-sm, 0.75rem);
  }

  #taste-row {
    overflow: visible;
  }

  #taste-row .taste-slot,
  #taste-row .taste-slot:first-child {
    grid-template-columns: minmax(2.3rem, auto) minmax(0, 1fr);
    row-gap: 0.45rem;
    align-items: center;
    height: auto;
    padding-right: 3.85rem;
  }

  #taste-row .taste-slot:nth-child(2) {
    margin-top: 0;
  }

  #taste-row .taste-slot:nth-child(2)::before {
    position: static;
    grid-column: 1 / -1;
    margin: 0 0 -0.05rem;
    line-height: 1.2;
  }

  .taste-keyword {
    grid-column: 1 / -1;
  }

  .taste-lock-btn {
    top: auto;
    bottom: 0.76rem;
    transform: none;
  }

  .taste-lock-btn:active {
    transform: scale(0.96);
  }

  #taste-section .search-actions {
    align-items: stretch;
    gap: 0.7rem;
  }

  #taste-section .search-actions .btn-orange,
  #taste-section .search-actions a.btn-orange {
    flex: 1 1 13rem;
    min-width: min(100%, 13rem);
    white-space: normal;
    text-align: center;
  }

  .search-actions--primary {
    justify-content: stretch;
    margin-top: var(--tw-section-gap-md, 1rem);
  }

  .search-actions--primary #continue-to-results {
    flex: 1 1 18rem;
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 1180px) {
  body:has(#taste-section) .page-shell {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }

  .taste-rail__intro span {
    flex: 1 1 14rem;
    min-width: min(100%, 14rem);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #taste-section .search-actions .btn-orange,
  #taste-section .search-actions a.btn-orange {
    width: 100%;
    flex-basis: 100%;
  }

  #taste-section .search-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .taste-inspo__chips {
    gap: 0.5rem;
  }
}

/* =====================================================
   Patron soft CTA prompt
   ===================================================== */
.patron-soft-cta {
  position: fixed;
  inset: 0;
  z-index: 4600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: rgba(2, 6, 23, 0.64);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.patron-soft-cta[hidden] {
  display: none;
}

.patron-soft-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.patron-soft-cta__dialog {
  position: relative;
  width: min(100%, 460px);
  max-height: min(88vh, 620px);
  overflow-y: auto;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  border: 1px solid rgba(226, 232, 240, 0.18);
  border-radius: var(--tw-ui-radius-card, 12px);
  background:
    linear-gradient(145deg, rgba(249, 115, 22, 0.08), transparent 42%),
    var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.96));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  color: var(--color-text, #f8fafc);
  transform: translateY(8px) scale(0.98);
  transition: transform 180ms ease;
}

.patron-soft-cta.is-visible .patron-soft-cta__dialog {
  transform: translateY(0) scale(1);
}

.patron-soft-cta__dialog:focus {
  outline: none;
}

.patron-soft-cta__dialog:focus-visible {
  outline: 2px solid var(--tw-focus-ring, #facc15);
  outline-offset: 3px;
}

.patron-soft-cta__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226, 232, 240, 0.18);
  border-radius: var(--tw-ui-radius-control, 10px);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.patron-soft-cta__close:hover,
.patron-soft-cta__close:focus-visible {
  border-color: rgba(250, 204, 21, 0.55);
  background: rgba(250, 204, 21, 0.12);
}

.patron-soft-cta__eyebrow {
  margin: 0 2.75rem 0.45rem 0;
  color: var(--tw-accent-gold, #facc15);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.patron-soft-cta__title {
  margin: 0 2.75rem 0.65rem 0;
  color: var(--color-text, #f8fafc);
  font-size: clamp(1.25rem, 4.8vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.patron-soft-cta__body {
  margin: 0;
  color: var(--color-muted, #cbd5e1);
  font-size: 0.96rem;
  line-height: 1.5;
}

.patron-soft-cta__usage {
  margin: 0.9rem 0 0;
  padding: 0.68rem 0.78rem;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: var(--tw-ui-radius-chip, 10px);
  background: rgba(34, 211, 238, 0.08);
  color: var(--color-text, #f8fafc);
  font-size: 0.9rem;
  font-weight: 700;
}

.patron-soft-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.patron-soft-cta__button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.9rem;
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: var(--tw-ui-radius-control, 10px);
  color: var(--color-text, #f8fafc);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.patron-soft-cta__button--primary {
  border-color: transparent;
  background: var(--tw-btn-primary-bg, linear-gradient(135deg, #f97316, #facc15));
  color: var(--tw-btn-primary-text, #111827);
}

.patron-soft-cta__button--secondary,
.patron-soft-cta__button--ghost {
  background: rgba(255, 255, 255, 0.055);
}

.patron-soft-cta__button--ghost {
  flex: 1 1 100%;
}

.patron-soft-cta__button:hover,
.patron-soft-cta__button:focus-visible {
  border-color: rgba(250, 204, 21, 0.5);
  text-decoration: none;
}

[data-theme="light"] .patron-soft-cta {
  background: rgba(15, 23, 42, 0.38);
}

[data-theme="light"] .patron-soft-cta__dialog {
  background:
    linear-gradient(145deg, rgba(249, 115, 22, 0.08), transparent 42%),
    #ffffff;
  color: #0f172a;
}

[data-theme="light"] .patron-soft-cta__body {
  color: #475569;
}

@media (max-width: 520px) {
  .patron-soft-cta {
    align-items: flex-end;
    padding: 0.75rem;
  }

  .patron-soft-cta__dialog {
    width: 100%;
    max-height: 86vh;
  }

  .patron-soft-cta__actions,
  .patron-soft-cta__button {
    width: 100%;
  }
}

/* =====================================================
   Patron hard search gate
   ===================================================== */
.patron-hard-gate {
  position: fixed;
  inset: 0;
  z-index: 4700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: rgba(2, 6, 23, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.patron-hard-gate[hidden] {
  display: none;
}

.patron-hard-gate.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.patron-hard-gate__dialog {
  width: min(100%, 480px);
  max-height: min(88vh, 620px);
  overflow-y: auto;
  padding: clamp(1.05rem, 2.6vw, 1.45rem);
  border: 1px solid rgba(250, 204, 21, 0.26);
  border-radius: var(--tw-ui-radius-card, 12px);
  background:
    linear-gradient(145deg, rgba(250, 204, 21, 0.1), transparent 46%),
    var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.98));
  box-shadow: 0 26px 78px rgba(0, 0, 0, 0.48);
  color: var(--color-text, #f8fafc);
  transform: translateY(8px) scale(0.98);
  transition: transform 180ms ease;
}

.patron-hard-gate.is-visible .patron-hard-gate__dialog {
  transform: translateY(0) scale(1);
}

.patron-hard-gate__dialog:focus {
  outline: none;
}

.patron-hard-gate__dialog:focus-visible {
  outline: 2px solid var(--tw-focus-ring, #facc15);
  outline-offset: 3px;
}

.patron-hard-gate__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--tw-accent-gold, #facc15);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.patron-hard-gate__title {
  margin: 0 0 0.7rem;
  color: var(--color-text, #f8fafc);
  font-size: clamp(1.25rem, 4.8vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.patron-hard-gate__body {
  margin: 0;
  color: var(--color-muted, #cbd5e1);
  font-size: 0.97rem;
  line-height: 1.5;
}

.patron-hard-gate__usage {
  margin: 0.95rem 0 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: var(--tw-ui-radius-chip, 10px);
  background: rgba(250, 204, 21, 0.1);
  color: var(--color-text, #f8fafc);
  font-size: 0.9rem;
  font-weight: 800;
}

.patron-hard-gate__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.patron-hard-gate__button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.92rem;
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: var(--tw-ui-radius-control, 10px);
  color: var(--color-text, #f8fafc);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.patron-hard-gate__button--primary {
  border-color: transparent;
  background: var(--tw-btn-primary-bg, linear-gradient(135deg, #f97316, #facc15));
  color: var(--tw-btn-primary-text, #111827);
}

.patron-hard-gate__button--secondary {
  background: rgba(255, 255, 255, 0.055);
}

.patron-hard-gate__button:hover,
.patron-hard-gate__button:focus-visible {
  border-color: rgba(250, 204, 21, 0.5);
  text-decoration: none;
}

[data-theme="light"] .patron-hard-gate {
  background: rgba(15, 23, 42, 0.42);
}

[data-theme="light"] .patron-hard-gate__dialog {
  background:
    linear-gradient(145deg, rgba(249, 115, 22, 0.08), transparent 42%),
    #ffffff;
  color: #0f172a;
}

[data-theme="light"] .patron-hard-gate__body {
  color: #475569;
}

@media (max-width: 520px) {
  .patron-hard-gate {
    align-items: flex-end;
    padding: 0.75rem;
  }

  .patron-hard-gate__dialog {
    width: 100%;
    max-height: 86vh;
  }

  .patron-hard-gate__actions {
    grid-template-columns: 1fr;
  }

  .patron-hard-gate__button {
    width: 100%;
  }
}