/*
 * Bayzell Storefront (alpha.15.24.0.0.0)
 * -----------------------------------------------------------------
 * All styles are scoped under `.bz-storefront` so they can't leak
 * into the surrounding page or be leaked into by the host theme.
 * Themes vary wildly across Bayzell customers — defensive reset is
 * cheap insurance.
 *
 * Design principles:
 *  - Neutral base palette so any branch logo/brand reads clearly
 *  - Mobile-first (90%+ of restaurant customers order from phones)
 *  - Cards and clear whitespace — mirrors the transactional email style
 *  - Every touch target ≥ 44px (accessibility + fat fingers on phones)
 */

/* ================================================================
 * Scoped reset + design tokens
 * ================================================================ */
.bz-storefront {
	/* alpha.15.24.1.0.0 — Bayzell brand refresh. Dark & premium.
	   Dark header for restaurant DTC feel, orange as interactive
	   accent, neutral surfaces so branch logos + food imagery pop. */
	--bz-bg:            #f8fafc;
	--bz-surface:       #ffffff;
	--bz-panel:         #f3f4f6;
	--bz-text:          #1f2937;
	--bz-text-dim:      #6b7280;
	--bz-border:        #e5e7eb;
	--bz-border-2:      #d1d5db;
	--bz-brand:         #F89831;
	--bz-brand-hover:   #d97919;
	--bz-brand-soft:    #fef3e2;
	--bz-dark:          #2a2828;
	--bz-dark-2:        #3a3838;
	--bz-success:       #22c55e;
	--bz-error:         #dc2626;
	--bz-warning:       #d97706;

	--bz-radius:        10px;
	--bz-radius-lg:     14px;
	--bz-shadow:        0 1px 3px rgba(0, 0, 0, 0.08);
	--bz-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.12);
	--bz-font: system-ui, -apple-system, "Segoe UI", sans-serif;

	/* alpha.15.25.0.4.5 — widened from 960px to give big menus room
	   to breathe (4 cards per row on desktop, per operator feedback).
	   Cards still cap at ~275px each so text stays readable; on
	   viewports narrower than ~1300px the container itself narrows
	   with the viewport. */
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
	background: var(--bz-bg);
	color: var(--bz-text);
	font-family: var(--bz-font);
	font-size: 15px;
	line-height: 1.5;
	min-height: 60vh;
	box-shadow: var(--bz-shadow);
	border-radius: var(--bz-radius-lg);
	overflow: hidden;
	position: relative;
}

/* alpha.15.24.1.0.0 — icons default. Every .bz-icon takes its color
   from the surrounding text via currentColor. */
.bz-storefront .bz-icon {
	display: inline-block;
	vertical-align: -0.15em;
	flex-shrink: 0;
}

/* Defensive resets for known theme leaks */
.bz-storefront * {
	box-sizing: border-box;
}
.bz-storefront h2,
.bz-storefront h3 {
	margin: 0 0 12px;
	color: var(--bz-text);
	font-weight: 600;
	line-height: 1.3;
}
.bz-storefront h2 { font-size: 1.35rem; }
.bz-storefront h3 { font-size: 1.1rem; }
.bz-storefront p {
	margin: 0 0 12px;
	color: var(--bz-text-dim);
}
.bz-storefront button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}
.bz-storefront a {
	color: var(--bz-brand);
	text-decoration: none;
}
.bz-storefront a:hover {
	text-decoration: underline;
}

/* ================================================================
 * Header — logo + title + context bar
 * ================================================================ */
.bz-header {
	/* alpha.15.24.1.0.0 — dark premium band. Orange accent line under
	   title anchors the brand color without shouting. */
	background: var(--bz-dark);
	color: #fff;
	padding: 28px 20px 24px;
	text-align: center;
	position: relative;
	border-bottom: 3px solid var(--bz-brand);
}
.bz-logo-container {
	width: 128px;
	height: 128px;
	background: #fff;
	border-radius: 50%;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.bz-logo-container img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.bz-logo-initials {
	font-size: 2rem;
	font-weight: 700;
	color: var(--bz-brand);
	letter-spacing: 0.02em;
}
.bz-title {
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
}
.bz-context-badge {
	margin-top: 14px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #f3f4f6;
}
.bz-context-badge .bz-linkbtn {
	color: var(--bz-brand);
	text-decoration: none;
	background: transparent;
	padding: 0 0 0 6px;
	font-size: 0.8125rem;
	font-weight: 500;
}
.bz-context-badge .bz-linkbtn:hover { text-decoration: underline; }

/* ================================================================
 * Body wrapper — flexible content area
 * ================================================================ */
.bz-body {
	padding: 24px 20px 100px;
	background: var(--bz-bg);
	min-height: 300px;
}
.bz-back-btn {
	background: transparent;
	color: var(--bz-text-dim);
	font-size: 0.875rem;
	padding: 4px 0;
	margin-bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.bz-back-btn:hover {
	/* alpha.15.25.0.11.9.4 — user spec: white on dark pill. !important
	   because the host theme's link hover rules outrank us here. */
	color: #ffffff !important;
	background: #2a2828;
}

/* ================================================================
 * Step counter (alpha.15.25.0.4.5)
 * Four-stage progress indicator: Sucursal → Orden → Datos → Pago.
 * Rendered as its own strip below the header on every non-modal
 * screen so the shopper always sees where they are in the flow.
 *
 * Visual language:
 *   - Active step: brand orange badge + full-color text
 *   - Done steps: green check + dimmed text (won't be reached until
 *     Phase 2.1 ships Datos, but kept consistent for continuity)
 *   - Upcoming steps: neutral outlined badge + dim text
 * ================================================================ */
.bz-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 16px;
	background: var(--bz-surface);
	border-bottom: 1px solid var(--bz-border);
	font-size: 0.82rem;
	flex-wrap: wrap;
}
.bz-step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.bz-step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--bz-panel, #f3f4f6);
	color: var(--bz-text-dim);
	border: 1px solid var(--bz-border);
}
.bz-step-label {
	color: var(--bz-text-dim);
	font-weight: 500;
}
.bz-step.is-active .bz-step-badge {
	background: var(--bz-brand, #F89831);
	color: #fff;
	border-color: var(--bz-brand, #F89831);
}
.bz-step.is-active .bz-step-label {
	color: var(--bz-text);
	font-weight: 600;
}
.bz-step.is-done .bz-step-badge {
	background: #059669;
	color: #fff;
	border-color: #059669;
}
.bz-step.is-done .bz-step-label {
	color: var(--bz-text);
}
.bz-step-sep {
	flex: 0 0 20px;
	height: 1px;
	background: var(--bz-border);
	margin: 0 2px;
}
/* Compact on small screens — hide the labels, keep only the badges +
   separators so the counter doesn't wrap or eat vertical space. */
@media (max-width: 520px) {
	.bz-steps { padding: 10px 12px; gap: 4px; }
	.bz-step-label { display: none; }
	.bz-step-sep { flex-basis: 12px; }
}

/* ================================================================
 * Landing — order-type picker cards
 * ================================================================ */
.bz-landing {
	text-align: center;
}
.bz-landing h2 {
	margin-bottom: 20px;
}
.bz-order-type-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 480px) {
	.bz-order-type-grid { grid-template-columns: 1fr 1fr; }
}
/* alpha.15.24.2.0.3 — order-type card refinement.
   All text colors explicit on both states so host themes can't leak
   button:hover styles into our surface. Dark hover matches the
   storefront header aesthetic — orange icon reads beautifully
   against #2a2828, label/desc switch to white with a soft shadow
   for depth. */
.bz-storefront .bz-order-type-card {
	background-color: var(--bz-surface) !important;
	border: 1px solid var(--bz-border);
	border-radius: var(--bz-radius-lg);
	padding: 28px 20px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
	color: var(--bz-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Label + desc at rest — explicit so no inheritance surprises */
.bz-order-type-label {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--bz-text);
	transition: color 0.2s ease;
}
.bz-order-type-desc {
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
	text-align: center;
	transition: color 0.2s ease;
}

/* Hover — dark & premium. alpha.15.24.3.0.2 — .bz-storefront prefix
   and !important on background so Elementor doesn't paint over our
   deliberate dark hover with its default button hover color. */
.bz-storefront .bz-order-type-card:hover {
	background-color: var(--bz-dark) !important;
	border-color: var(--bz-brand);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(42, 40, 40, 0.28);
}
.bz-storefront .bz-order-type-card:hover .bz-order-type-label {
	color: #ffffff;
}
.bz-storefront .bz-order-type-card:hover .bz-order-type-desc {
	color: rgba(255, 255, 255, 0.72);
}

/* Active (mouse down) — subtle press-in for tactile feedback */
.bz-storefront .bz-order-type-card:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(42, 40, 40, 0.24);
	background-color: var(--bz-dark) !important;
}

/* Icon — orange in both states. Explicit currentColor override
   protects against theme button styles trying to recolor SVGs. */
.bz-order-type-icon {
	color: var(--bz-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
	transition: transform 0.2s ease;
}
.bz-storefront .bz-order-type-card:hover .bz-order-type-icon {
	transform: scale(1.05);
}

/* ================================================================
 * Picker screens (delivery-picker, pickup-picker)
 * ================================================================ */
.bz-picker-hint {
	font-size: 0.875rem;
	margin-bottom: 16px;
}
.bz-address-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	background: var(--bz-surface);
	padding: 16px;
	border-radius: var(--bz-radius);
	border: 1px solid var(--bz-border);
	margin-bottom: 16px;
}
@media (min-width: 520px) {
	.bz-address-grid { grid-template-columns: 1fr 1fr; }
}
.bz-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bz-field > span {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--bz-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.bz-field select {
	padding: 10px 12px;
	border: 1px solid var(--bz-border-2);
	border-radius: 6px;
	background: var(--bz-surface);
	font-size: 0.9375rem;
	font-family: inherit;
	min-height: 44px;
}
.bz-field select:disabled {
	background: var(--bz-panel);
	color: var(--bz-text-dim);
}
.bz-nozone-hint {
	background: var(--bz-brand-soft);
	border-left: 3px solid var(--bz-brand);
	padding: 10px 14px;
	font-size: 0.875rem;
	color: var(--bz-text);
	border-radius: 4px;
	grid-column: 1 / -1;
}

/* ================================================================
 * Coverage status
 * ================================================================ */
.bz-coverage-status {
	background: var(--bz-surface);
	border: 1px solid var(--bz-border);
	border-radius: var(--bz-radius);
	padding: 16px;
	margin-top: 12px;
}
.bz-coverage-status.bz-status-ok {
	background: #f0fdf4;
	border-color: #bbf7d0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.bz-coverage-status.bz-status-ok > span:first-child {
	color: #166534;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.bz-coverage-status.bz-status-ok .btn,
.bz-coverage-status.bz-status-ok .bz-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bz-coverage-status.bz-status-error {
	background: #fef2f2;
	border-color: #fecaca;
}
.bz-coverage-status.bz-status-error strong {
	color: var(--bz-error);
	display: block;
	margin-bottom: 8px;
}
.bz-coverage-fallback {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.bz-coverage-status.bz-status-multi > div:first-child {
	font-weight: 500;
	margin-bottom: 12px;
}

/* ================================================================
 * Branch cards
 * ================================================================ */
.bz-branch-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bz-storefront .bz-branch-card {
	background-color: var(--bz-surface) !important;
	border: 1px solid var(--bz-border);
	border-radius: var(--bz-radius);
	padding: 14px 16px;
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
	display: block;
	width: 100%;
	color: var(--bz-text);
	cursor: pointer;
}
.bz-storefront .bz-branch-card:hover {
	border-color: var(--bz-brand);
	background-color: var(--bz-brand-soft) !important;
	transform: translateY(-1px);
}
/* alpha.15.24.2.0.3 — explicit hover text colors so themes with
   button:hover overrides can't blank out the card content. Branch
   cards keep dark text (informational list; less dramatic than the
   landing choice cards).
   alpha.15.24.3.0.2 — .bz-storefront prefix for Elementor-proof
   specificity. */
.bz-storefront .bz-branch-card:hover .bz-branch-card-name  { color: var(--bz-text); }
.bz-storefront .bz-branch-card:hover .bz-branch-card-addr,
.bz-storefront .bz-branch-card:hover .bz-branch-card-phone { color: var(--bz-text-dim); }
.bz-branch-card-name {
	font-weight: 600;
	color: var(--bz-text);
	font-size: 1rem;
	margin-bottom: 4px;
}
.bz-branch-card-addr {
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
	margin-bottom: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bz-branch-card-phone {
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
	margin-bottom: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bz-branch-card-fee {
	font-size: 0.8125rem;
	color: var(--bz-brand);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bz-branch-card-fee.bz-free {
	color: var(--bz-success);
}

/* ================================================================
 * No-coverage fallback
 * ================================================================ */
.bz-nocov-icon {
	color: var(--bz-brand);
	text-align: center;
	margin: 12px 0;
	display: flex;
	justify-content: center;
}
.bz-cta-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}
.bz-cta-stack .bz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ================================================================
 * Menu
 * ================================================================ */
/* ================================================================
 * Menu — adaptive card grid (alpha.15.24.2.0.0)
 * ================================================================
 * Restaurant-style vertical cards: image on top, name + description +
 * price below. The whole card is tappable for simple products;
 * complex products (variants/complementos/combos) show a chip in
 * Phase 1 and don't add to cart yet.
 *
 * Adaptive breakpoints:
 *   Wide desktop (>1000px) → 3 columns  ← primary target
 *   Regular desktop (700-1000px) → 2 columns
 *   Mobile (<700px) → 1 column
 *
 * Cards are auto-sized by the grid; content-based aspect ratios keep
 * the image area proportional at every width.
 */
.bz-menu-cat {
	margin-bottom: 28px;
}
.bz-menu-cat h3 {
	background: transparent;
	padding: 0 0 8px;
	margin-bottom: 14px;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bz-text);
	font-weight: 600;
	border-bottom: 1px solid var(--bz-border);
}
.bz-menu-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 700px) {
	.bz-menu-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 1000px) {
	.bz-menu-grid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
}
/* alpha.15.25.0.4.5 — 4-col tier for wide desktops. Matches the widened
   container (max-width 1240px). Under 1200px viewports fall back to
   3-col (still 1000px breakpoint), keeping cards at a comfortable width. */
@media (min-width: 1200px) {
	.bz-menu-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Card shell — used for both button (tappable) and div (disabled).
   alpha.15.24.2.0.3 — explicit colors on every text child so host
   themes with `button:hover { color: ... }` rules can't leak in and
   turn descriptions white/invisible. Same defense applied to the
   order-type cards above. */
/* Card shell — used for both button (tappable) and div (disabled).
   alpha.15.24.3.0.2 — Elementor defense. Elementor Pro injects
   `button:hover { background-color: ... !important }` at high
   specificity, blowing through simple hover rules. We prefix with
   .bz-storefront to raise our specificity above single-class rules,
   and use `!important` on the background properties specifically —
   matching the injection point with the same weapon so we win the
   cascade. Non-critical properties (transform, box-shadow) don't
   need it — Elementor doesn't touch those. */
.bz-storefront .bz-card {
	background-color: var(--bz-surface) !important;
	border: 1px solid var(--bz-border);
	border-radius: var(--bz-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0;
	font: inherit;
	color: var(--bz-text);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	position: relative;
}
.bz-storefront .bz-card.bz-tappable {
	cursor: pointer;
}
.bz-storefront .bz-card.bz-tappable:hover {
	transform: translateY(-2px);
	border-color: var(--bz-brand);
	box-shadow: var(--bz-shadow-lg);
	background-color: var(--bz-surface) !important;
}
.bz-storefront .bz-card.bz-tappable:active {
	transform: translateY(0);
	background-color: var(--bz-surface) !important;
}
.bz-storefront .bz-card.bz-soldout {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: var(--bz-surface) !important;
}
.bz-card.bz-soldout .bz-card-name {
	text-decoration: line-through;
}
.bz-card.bz-complex {
	cursor: default;
}

/* Card image area — fixed aspect ratio keeps grid rows aligned */
.bz-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--bz-panel);
	position: relative;
	overflow: hidden;
}
.bz-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gmail-style colored letter avatar for missing images */
.bz-card-avatar {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bz-card-avatar span {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Card body — name, description, footer */
.bz-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.bz-card-name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--bz-text);
	line-height: 1.3;
}
.bz-card-desc {
	font-size: 0.875rem;
	color: var(--bz-text-dim);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}
.bz-card-footer {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bz-card-price {
	font-weight: 700;
	color: var(--bz-text);
	font-size: 1.05rem;
}

/* Tap-to-add affordance — subtle plus circle bottom-right on hover */
.bz-card-add {
	background: var(--bz-brand);
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.bz-card.bz-tappable:hover .bz-card-add {
	transform: scale(1.1);
}

/* Badges — sold-out + complex-product state */
.bz-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 500;
	white-space: nowrap;
}
.bz-badge-soldout {
	background: var(--bz-brand-soft);
	color: var(--bz-brand-hover);
}
.bz-badge-complex {
	background: #eef2ff;
	color: #3730a3;
	font-size: 0.65rem;
	padding: 4px 8px;
}

/* ================================================================
 * Cart FAB + sheet
 * ================================================================ */
.bz-storefront .bz-cart-fab {
	position: fixed;
	bottom: 20px;
	/* alpha.15.25.0.4.13 — moved from centered (left: 50% + translateX)
	   to right-edge so the FAB no longer covers the "Powered by Bayzell"
	   footer text. Standard FAB placement pattern (Uber Eats, DoorDash);
	   users know to look bottom-right for cart actions.
	   alpha.15.25.0.5.3.2 — on wide viewports where the storefront's
	   1240px container leaves empty space on the right, pull the FAB
	   inward so it sits closer to the container's right edge rather
	   than the viewport's. Keeps the FAB visually anchored to the
	   content, not floating in the site margin. */
	right: 20px;
	background-color: var(--bz-brand) !important;
	color: #fff !important;
	border-radius: 999px;
	padding: 12px 22px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: var(--bz-shadow-lg);
	font-size: 0.9375rem;
	font-weight: 500;
	min-width: 260px;
	max-width: 90%;
	justify-content: space-between;
	z-index: 100;
	border: none;
}
@media (min-width: 1280px) {
	.bz-storefront .bz-cart-fab {
		right: 300px;
	}
}
/* alpha.15.25.0.7.1.7.1 — on mobile the FAB at bottom:20px sat on
   top of the "Powered by Bayzell" footer. Lift it clear (user spec:
   100px or less, as long as the footer stays visible). 90px clears
   the footer line with margin while staying thumb-reachable. */
@media (max-width: 699px) {
	.bz-storefront .bz-cart-fab {
		bottom: 90px;
	}
}
.bz-cart-fab-icon { display: inline-flex; }
.bz-storefront .bz-cart-fab:hover {
	background-color: var(--bz-brand-hover) !important;
	transform: translateY(-2px);
}
.bz-cart-fab-count {
	background: rgba(255, 255, 255, 0.25);
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
}
.bz-cart-fab-label { flex: 1; text-align: left; }
.bz-cart-fab-total { font-weight: 600; }

.bz-cart-sheet { max-width: 500px; }
.bz-cart-line {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bz-border);
}
.bz-cart-line:last-of-type { border-bottom: none; }
.bz-cart-line-name { font-weight: 500; font-size: 0.9375rem; }
.bz-cart-line-variant {
	color: var(--bz-text-dim);
	font-weight: 400;
	font-size: 0.875rem;
}
.bz-cart-line-price { font-size: 0.75rem; color: var(--bz-text-dim); }
.bz-cart-line-qty {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bz-qtybtn {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: var(--bz-panel);
	color: var(--bz-text);
	font-weight: 600;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bz-qtybtn:hover { background: var(--bz-border); }
.bz-cart-line-qty span {
	min-width: 24px;
	text-align: center;
	font-weight: 500;
}
.bz-cart-line-total {
	font-weight: 600;
	color: var(--bz-text);
	min-width: 70px;
	text-align: right;
	font-size: 0.9375rem;
}
.bz-cart-summary {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 2px solid var(--bz-border);
}
.bz-cart-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 0.9375rem;
	color: var(--bz-text-dim);
}
.bz-cart-row-total {
	color: var(--bz-text);
	font-weight: 600;
	font-size: 1.1rem;
	padding-top: 6px;
	border-top: 1px solid var(--bz-border);
	margin-top: 6px;
}
.bz-cart-min-warn {
	background: #fef3c7;
	color: #92400e;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.875rem;
	margin-top: 12px;
}
.bz-cart-checkout {
	width: 100%;
	margin-top: 16px;
}
.bz-cart-checkout-note {
	font-size: 0.75rem;
	color: var(--bz-text-dim);
	text-align: center;
	margin-top: 8px;
}

/* ================================================================
 * Buttons
 * ================================================================ */
.bz-btn {
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: all 0.15s;
	min-height: 44px;
}
.bz-storefront .bz-btn-primary {
	background-color: var(--bz-brand) !important;
	color: #fff !important;
}
.bz-storefront .bz-btn-primary:hover { background-color: var(--bz-brand-hover) !important; }
.bz-storefront .bz-btn-primary:disabled { background-color: var(--bz-border-2) !important; color: var(--bz-text-dim) !important; cursor: not-allowed; }
.bz-storefront .bz-btn-ghost {
	background-color: transparent !important;
	color: var(--bz-brand) !important;
	border: 1px solid var(--bz-border-2);
}
.bz-storefront .bz-btn-ghost:hover {
	background-color: var(--bz-panel) !important;
	color: var(--bz-brand-hover) !important;
}

/* ================================================================
 * Modals
 * ================================================================ */
.bz-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 200;
	/* alpha.15.25.0.5.2.1 — prevent touch drags on the overlay
	   backdrop from scrolling the body underneath (mobile Safari and
	   Chrome both propagate empty-space scroll gestures otherwise).
	   Combined with .bz-modal's overscroll-behavior below, the modal
	   becomes a true scroll boundary. Also apply overflow: hidden as
	   a safety net for older browsers that don't support
	   overscroll-behavior yet. */
	overscroll-behavior: contain;
	overflow: hidden;
	touch-action: none;
}
.bz-modal {
	background: var(--bz-surface);
	border-radius: var(--bz-radius-lg);
	padding: 24px;
	max-width: 420px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--bz-shadow-lg);
	position: relative;
	/* alpha.15.25.0.5.2.1 — modal is a scroll boundary. When the
	   shopper flick-scrolls at the top/bottom edge, the gesture is
	   absorbed here instead of chaining to the body. touch-action
	   lets the modal accept vertical pans (so scrolling inside works
	   as expected) but denies the horizontal/pinch defaults. */
	overscroll-behavior: contain;
	touch-action: pan-y;
}
.bz-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--bz-text-dim);
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bz-modal-close:hover { background: var(--bz-panel); color: var(--bz-text); }
.bz-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 16px;
}

/* ================================================================
 * Picker modal (alpha.15.25.0.4.0)
 * Product picker for complex items — Combo Compuesto in this release.
 * Wider max-width than the default modal because pool rows + steppers
 * benefit from breathing room, and the total row deserves emphasis.
 * ================================================================ */
.bz-picker-modal { max-width: 520px; }
.bz-picker-loading {
	padding: 40px 0;
	text-align: center;
	color: var(--bz-text-dim);
}
.bz-picker-title {
	margin: 0 0 12px;
	padding-right: 32px;
}
.bz-picker-body { display: flex; flex-direction: column; gap: 10px; }
.bz-picker-mode {
	font-size: 0.78rem;
	color: var(--bz-text-dim);
	padding: 0 4px;
}
/* alpha.15.25.0.4.8 — warn variant used by the attributed picker when
   the current combination has no matching variation or the matching one
   is out of stock. Uses a soft red tone so it reads as informational
   rather than a hard error. */
.bz-picker-mode.bz-picker-warn {
	color: #dc2626;
	background: #fef2f2;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #fecaca;
	font-weight: 500;
	text-align: center;
}
.bz-picker-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	background: var(--bz-brand-soft, #fff7ed);
	border-radius: 8px;
	font-weight: 600;
}
.bz-picker-total-amt {
	font-size: 1.1rem;
	color: var(--bz-brand, #F89831);
}
.bz-picker-counter {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--bz-panel, #f9fafb);
	border-radius: 8px;
	font-size: 0.9rem;
}
.bz-picker-counter-label { color: var(--bz-text-dim); }
.bz-picker-counter-badge {
	background: #e5e7eb;
	color: var(--bz-text);
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
}
.bz-picker-counter-badge.is-full { background: #22c55e; color: #fff; }
.bz-picker-count-short { color: #dc2626; font-weight: 500; font-size: 0.82rem; }

.bz-picker-pool {
	border: 1px solid var(--bz-border);
	border-radius: 8px;
	overflow: hidden;
}
.bz-picker-row,
.bz-picker-addon-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--bz-border);
}
.bz-picker-row:last-child,
.bz-picker-addon-row:last-child { border-bottom: none; }
.bz-picker-row-body { flex: 1; min-width: 0; }
.bz-picker-row-name { font-weight: 500; display: flex; align-items: center; gap: 6px; }
.bz-picker-row-meta {
	font-size: 0.8rem;
	color: var(--bz-text-dim);
	margin-top: 2px;
}
.bz-picker-row-disc {
	color: #059669;
	font-size: 0.75rem;
	font-weight: 600;
}
.bz-picker-row-req {
	color: #dc2626;
	font-weight: 700;
	font-size: 0.95rem;
}
.bz-picker-row-req.is-met { color: #059669; }

.bz-picker-stepper {
	display: flex;
	align-items: center;
	gap: 6px;
}
.bz-picker-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bz-panel);
	color: var(--bz-text);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bz-border);
	transition: background 80ms ease, border-color 120ms ease;
}
.bz-picker-btn:hover:not(:disabled) {
	background: var(--bz-surface);
	border-color: var(--bz-brand, #F89831);
}
.bz-picker-btn:disabled { opacity: .35; cursor: not-allowed; }
.bz-picker-qty {
	min-width: 24px;
	text-align: center;
	font-weight: 600;
}

.bz-picker-addons {
	border: 1px solid var(--bz-border);
	border-radius: 8px;
	overflow: hidden;
}
.bz-picker-addons-title {
	padding: 8px 12px;
	background: var(--bz-panel, #f9fafb);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--bz-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid var(--bz-border);
}

/* Simple combo picker — component slots + pill selectors (alpha.15.25.0.4.1) */
.bz-picker-included {
	border: 1px solid var(--bz-border);
	border-radius: 8px;
	padding: 10px 12px;
	background: var(--bz-panel, #f9fafb);
}
.bz-picker-included-title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bz-text-dim);
	margin-bottom: 6px;
}
.bz-picker-included-row {
	font-size: 0.85rem;
	color: var(--bz-text);
	padding: 2px 0;
}
.bz-picker-slots {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bz-picker-slot {
	border: 1px solid var(--bz-border);
	border-radius: 8px;
	padding: 12px;
}
.bz-picker-slot-title {
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bz-text-dim);
	margin-bottom: 8px;
}
.bz-picker-slot-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bz-picker-pill {
	border: 1px solid var(--bz-border);
	background: var(--bz-surface);
	color: var(--bz-text);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 80ms ease, border-color 120ms ease, color 120ms ease;
}
.bz-picker-pill:hover {
	border-color: var(--bz-brand, #F89831);
	background-color: #f89831 !important;
}
.bz-picker-pill:hover .bz-picker-pill-delta-down { color: #d1fae5; }
.bz-picker-pill.is-selected {
	background: var(--bz-brand, #F89831);
	border-color: var(--bz-brand, #F89831);
	color: #fff;
	font-weight: 500;
}
.bz-picker-pill-delta {
	font-size: 0.75rem;
	opacity: 0.8;
	margin-left: 2px;
}
.bz-picker-pill-delta-down { color: #059669; }
.bz-picker-pill.is-selected .bz-picker-pill-delta-down { color: #d1fae5; }
/* alpha.15.25.0.4.7 — disabled state for out-of-stock variants in the
   variable picker. Pill stays visible so shoppers see the option
   exists, but can't be tapped and shows an Agotado label. */
.bz-picker-pill.is-disabled,
.bz-picker-pill:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: var(--bz-panel, #f3f4f6);
}
.bz-picker-pill.is-disabled:hover,
.bz-picker-pill:disabled:hover {
	background: var(--bz-panel, #f3f4f6) !important;
	border-color: var(--bz-border);
}
.bz-picker-pill-out {
	color: #dc2626 !important;
	font-weight: 600;
}

.bz-picker-notes-wrap { display: flex; flex-direction: column; gap: 4px; }
.bz-picker-notes-wrap label {
	font-size: 0.8rem;
	color: var(--bz-text-dim);
}
.bz-picker-notes-wrap textarea {
	width: 100%;
	resize: vertical;
	padding: 8px 10px;
	border: 1px solid var(--bz-border);
	border-radius: 6px;
	font: inherit;
	background: var(--bz-surface);
	color: var(--bz-text);
}

/* Rich cart lines — combo picks / addons / notes as indented sub-rows. */
.bz-cart-line-extras {
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bz-cart-line-extra {
	font-size: 0.8rem;
	color: var(--bz-text-dim);
	padding-left: 4px;
}
.bz-cart-line-addon { color: #059669; }
.bz-cart-line-extra-price {
	color: #059669;
	font-weight: 500;
}
.bz-cart-line-note {
	margin-top: 4px;
	font-size: 0.78rem;
	color: var(--bz-text-dim);
	padding: 4px 8px;
	background: var(--bz-panel, #f9fafb);
	border-radius: 4px;
}

/* ================================================================
 * Toast
 * ================================================================ */
.bz-toast {
	position: fixed;
	bottom: 90px;
	left: 50%;
	transform: translateX(-50%);
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 0.9375rem;
	color: #fff;
	box-shadow: var(--bz-shadow-lg);
	z-index: 300;
	max-width: 90%;
}
.bz-toast-success { background: var(--bz-success); }
.bz-toast-error   { background: var(--bz-error); }
/* alpha.15.25.0.11.9.4 — on mobile the FAB lives at bottom:90px
   (7.1.7.1 footer fix) — the exact altitude of the toast, so
   «Agregado al carrito» landed on top of «Ver carrito» right after
   every add-to-cart, hiding the one button the shopper needs next.
   Same breakpoint as the FAB rule ON PURPOSE: if one moves, move
   both. 150px = 90px FAB bottom + ~48px FAB height + margin. */
@media (max-width: 699px) {
	.bz-toast {
		bottom: 150px;
	}
}

/* ================================================================
 * Empty / loading states
 * ================================================================ */
.bz-loading,
.bz-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--bz-text-dim);
	font-style: italic;
}
.bz-error {
	background: #fef2f2;
	color: var(--bz-error);
	padding: 16px;
	border-radius: 6px;
	margin: 16px 0;
}

/* ================================================================
 * Footer — Powered by Bayzell
 * ================================================================ */
.bz-footer {
	background: var(--bz-panel);
	padding: 12px 20px;
	text-align: center;
	font-size: 0.75rem;
	color: var(--bz-text-dim);
	border-top: 1px solid var(--bz-border);
}
.bz-footer a { color: var(--bz-text-dim); }
.bz-footer a:hover { color: var(--bz-brand); text-decoration: underline; }
.bz-footer strong { color: var(--bz-text); font-weight: 600; }
.bz-footer-sep { margin: 0 6px; }

/* =====================================================================
 * Delivery colonia picker (alpha.15.24.3.0.0)
 * =====================================================================
 * Search box + grouped colonia chips. Sucursal-first flow means the
 * customer has already committed to a branch — this screen just says
 * "which colonia?" against the branch's coverage list.
 */
.bz-search-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bz-surface);
	border: 1px solid var(--bz-border);
	border-radius: 999px;
	padding: 8px 14px;
	margin-bottom: 18px;
	color: var(--bz-text-dim);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bz-search-box:focus-within {
	border-color: var(--bz-brand);
	box-shadow: 0 0 0 3px rgba(248, 152, 49, 0.15);
	color: var(--bz-brand);
}
.bz-search-box input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	color: var(--bz-text);
	padding: 4px 0;
}
.bz-colonia-groups {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.bz-colonia-group h4 {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bz-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 10px;
}
.bz-colonia-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bz-storefront .bz-colonia-chip {
	background-color: var(--bz-surface) !important;
	border: 1px solid var(--bz-border);
	color: var(--bz-text);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.bz-storefront .bz-colonia-chip:hover {
	background-color: var(--bz-dark) !important;
	color: #fff;
	border-color: var(--bz-brand);
	transform: translateY(-1px);
}
.bz-storefront .bz-colonia-chip.bz-risky {
	border-color: var(--bz-brand);
	background-color: var(--bz-brand-soft) !important;
	color: var(--bz-brand-hover);
}
.bz-storefront .bz-colonia-chip.bz-risky:hover {
	background-color: var(--bz-dark) !important;
	color: #fff;
}

/* Branch card meta row for delivery branch cards */
.bz-branch-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 8px;
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
}
.bz-branch-card-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.bz-branch-card-fee { color: var(--bz-brand); font-weight: 500; }
.bz-branch-card-fee.bz-free { color: var(--bz-success); }
.bz-branch-card-min  { color: var(--bz-text-dim); }
.bz-branch-card-time { color: var(--bz-text-dim); }

/* =====================================================================
 * Menu: featured section + collapsible categories (alpha.15.24.3.0.0)
 * ===================================================================== */
/* Category heading — simplified in alpha.15.25.0.4.9 since the rail
   handles navigation. No longer a button; just a text heading that
   labels the current category grid. Kept the same visual treatment as
   before for continuity. */
.bz-storefront .bz-menu-cat-heading {
	background-color: transparent !important;
	color: var(--bz-text);
	padding: 12px 0;
	margin-bottom: 14px;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	border-bottom: 1px solid var(--bz-border);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ================================================================
 * Horizontal category rail (alpha.15.25.0.4.9)
 * Replaces the collapsible category pattern with a sticky rail of
 * chips. Kills infinite scroll on big menus (10+ categories); shopper
 * sees the whole menu map in one glance and taps to jump to what they
 * want. Right-edge fade gradient hints at scrollability when chips
 * overflow. First-mount attention pulse draws the eye to the rail so
 * shoppers who haven't seen this pattern know it's interactive.
 * ================================================================ */
.bz-cat-rail {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bz-bg);
	margin: 0 -20px 20px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bz-border);
	/* Right-edge fade gradient — informs the shopper that there's
	   more content off-screen when the rail overflows. Uses a
	   positioned pseudo-element via ::after. */
	overflow: hidden;
}
.bz-cat-rail::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 32px;
	pointer-events: none;
	background: linear-gradient(to left, var(--bz-bg) 30%, rgba(255, 255, 255, 0));
}
/* alpha.15.25.0.4.9.2 — label above the chip row inside the sticky
   nav so it stays visible on scroll. Small uppercase text matches the
   category heading treatment, keeping the design consistent.
   alpha.15.25.0.4.9.3 — bumped size + weight + color for stronger
   visual anchor. Full text color, semibold, larger. Retains uppercase
   for consistency with the section-header language. */
.bz-cat-rail-label {
	padding: 0 20px 8px;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bz-text);
}

/* alpha.15.25.0.4.9.3 — chevron nav buttons. Sit at the left/right
   edges of the chip row, aligned with the row's vertical center.
   Round, brand-orange, subtle shadow — reads as a clear "there's more,
   tap me" affordance rather than blending in. Hidden by default; the
   parent .bz-cat-rail carries has-more-left / has-more-right classes
   (toggled by updateRailChevrons) to reveal them.

   Right chevron gets a gentle bounce animation to draw the eye — this
   is the primary discovery affordance since shoppers arrive with the
   rail scrolled to the leftmost position. Left chevron doesn't animate;
   it's a "return" affordance, not a discovery one. */
.bz-cat-rail-scroll-wrap {
	position: relative;
}
/* alpha.15.25.0.4.9.5 — .bz-storefront prefix + !important on the
   visual properties to defeat Elementor / theme button rules that
   otherwise strip our background and color. Same defense pattern we
   use for chips (see .bz-cat-chip:hover). Border explicit as none
   since some themes add default button borders. Icon color pinned
   via a descendant rule because .bz-icon uses currentColor — if the
   button's color leaks to inherit, the SVG turns black. */
.bz-storefront .bz-cat-rail-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50% !important;
	background: #2a2828 !important;
	background-color: #2a2828 !important;
	color: #fff !important;
	border: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(42, 40, 40, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, background 120ms ease;
	z-index: 3;
	padding: 0;
}
.bz-storefront .bz-cat-rail-nav .bz-icon {
	color: #fff !important;
}
.bz-storefront .bz-cat-rail-nav:hover {
	background: #000 !important;
	background-color: #000 !important;
}
.bz-cat-rail-nav-left  { left:  4px; }
.bz-cat-rail-nav-right { right: 4px; }

.bz-cat-rail.has-more-left  .bz-cat-rail-nav-left,
.bz-cat-rail.has-more-right .bz-cat-rail-nav-right {
	opacity: 1;
	pointer-events: auto;
}

/* Gentle bounce on the right chevron — signals "tap me to explore".
   Only runs when the rail actually overflows AND there's more to
   the right; doesn't cover left because it's a return path, not
   discovery. */
@keyframes bz-chevron-bounce {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(4px); }
}
.bz-cat-rail.has-more-right .bz-cat-rail-nav-right {
	animation: bz-chevron-bounce 1.4s ease-in-out infinite;
}
.bz-cat-rail-inner {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 20px;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
	/* alpha.15.25.0.4.9.4 — no scroll-behavior: smooth here. Smooth
	   scrolling was previously enabled globally, but that caused a
	   visible flicker after chip picks: render() rebuilt the rail at
	   scrollLeft=0, then renderPreservingRailScroll() restored the
	   snapshot, and CSS smooth turned that instantaneous restore into
	   a visible animation from 0 → snapshot position.
	   Instead, chevron taps (which WANT smooth) explicitly opt in via
	   scrollBy({ behavior: 'smooth' }). Scroll restoration on chip
	   picks uses the default instant behavior — no flicker. */
}
.bz-cat-rail-inner::-webkit-scrollbar { display: none; }
.bz-cat-chip {
	flex: 0 0 auto;
	background: var(--bz-panel, #f3f4f6);
	color: var(--bz-text);
	border: 1px solid var(--bz-border);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.bz-cat-chip:hover {
	background-color: var(--bz-brand-soft, #fff7ed) !important;
	border-color: var(--bz-brand, #F89831);
	color: #2a2828 !important;
}
.bz-cat-chip.is-active {
	background: var(--bz-brand, #F89831);
	color: #fff;
	border-color: var(--bz-brand, #F89831);
}
.bz-cat-chip.is-active:hover {
	background: var(--bz-brand-hover, #e08525);
}
.bz-cat-chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: rgba(0, 0, 0, 0.08);
	color: inherit;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
}
.bz-cat-chip.is-active .bz-cat-chip-count {
	background: rgba(255, 255, 255, 0.25);
}

/* Attention pulse — subtle bounce that draws the eye to the rail on
   first mount. Runs 3 times over ~3 seconds then stops. Removed by
   JS as soon as the shopper interacts with the rail (via
   state.railHintDismissed). */
@keyframes bz-cat-rail-pulse {
	0%, 100% { transform: translateX(0); }
	40%      { transform: translateX(12px); }
	70%      { transform: translateX(-4px); }
}
.bz-cat-rail-hint .bz-cat-rail-inner {
	animation: bz-cat-rail-pulse 1.6s ease-in-out 3;
}

/* Featured: same as regular category but with an accent border and
   no collapse (always visible). Distinguished by heading treatment. */
.bz-menu-featured .bz-featured-heading {
	color: var(--bz-brand);
	border-bottom-color: var(--bz-brand);
	cursor: default;
}
.bz-menu-featured .bz-featured-heading:hover {
	color: var(--bz-brand);
}

/* ================================================================
 * Datos step (alpha.15.25.0.5.2)
 * ================================================================ */

.bz-datos {
	max-width: 640px;
	margin: 0 auto;
	padding: 8px 4px 24px;
}
.bz-datos-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}
.bz-datos-back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px !important;
	font-size: 0.875rem !important;
}
.bz-storefront .bz-datos-title {
	font-size: 1.5rem !important;
	font-weight: 700;
	color: var(--bz-text) !important;
	margin: 0 !important;
	background-color: transparent !important;
}

.bz-datos-field-group {
	margin-bottom: 18px;
}
.bz-datos-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bz-text);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.bz-storefront .bz-datos-input {
	width: 100%;
	padding: 12px 14px !important;
	font-size: 0.9375rem !important;
	color: var(--bz-text) !important;
	background-color: #fff !important;
	border: 1px solid var(--bz-border) !important;
	border-radius: 8px !important;
	box-sizing: border-box;
	transition: border-color 120ms ease, box-shadow 120ms ease;
	font-family: inherit;
}
.bz-storefront .bz-datos-input:focus {
	outline: none;
	border-color: var(--bz-brand) !important;
	box-shadow: 0 0 0 3px var(--bz-brand-soft, #fff7ed);
}
.bz-storefront .bz-datos-input[readonly] {
	background-color: var(--bz-panel, #f3f4f6) !important;
	color: var(--bz-text-dim) !important;
	cursor: not-allowed;
}

/* NIT row — three-column on wide, stacks on narrow. Input takes
   available space; CF and Buscar buttons size to their content. */
.bz-datos-nit-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.bz-datos-nit-input {
	flex: 1;
	min-width: 0;
}
.bz-datos-nit-cf,
.bz-datos-nit-search {
	flex: 0 0 auto;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.bz-datos-nit-row {
		flex-direction: column;
	}
	.bz-datos-nit-cf,
	.bz-datos-nit-search {
		width: 100%;
	}
}

/* Lookup status strip — colored feedback under the NIT row. */
.bz-datos-status {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.4;
}
.bz-datos-status-searching {
	background: var(--bz-panel, #f3f4f6);
	color: var(--bz-text-dim);
	border: 1px solid var(--bz-border);
}
.bz-datos-status-hit {
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
}
.bz-datos-status-miss {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}
.bz-datos-status-warn {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* Actions row — Continuar button + disabled note. */
.bz-datos-actions {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--bz-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bz-storefront .bz-datos-continue {
	width: 100%;
	padding: 14px !important;
	font-size: 1rem !important;
	font-weight: 600;
}
.bz-storefront .bz-datos-continue:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.bz-datos-note {
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
	text-align: center;
	line-height: 1.5;
}

/* alpha.15.25.0.5.2.1 — body scroll lock. Applied to <html> by
   render() whenever a modal is present in the tree. Uses !important
   to defeat theme rules that force body scrolling on the storefront
   page (Elementor, some themes with body-scroll="always" attributes).
   position: fixed on body is the iOS-Safari-proof form of the lock,
   BUT it also nukes the scroll position — so we combine the two:
   overflow: hidden gets most browsers; the position: fixed hack is
   opt-in via a data attribute if the shopper reports issues. */
html.bz-storefront-modal-open,
html.bz-storefront-modal-open body {
	overflow: hidden !important;
	overscroll-behavior: contain !important;
}

/* ================================================================
 * Datos step — validation states + save checkbox (alpha.15.25.0.5.3)
 * ================================================================ */

.bz-storefront .bz-datos-input.bz-datos-input-error {
	border-color: #dc2626 !important;
	background-color: #fef2f2 !important;
}
.bz-storefront .bz-datos-input.bz-datos-input-error:focus {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.bz-datos-error {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: #b91c1c;
	line-height: 1.4;
}
.bz-datos-error .bz-icon {
	flex-shrink: 0;
	color: #b91c1c;
}

/* Save-to-Bayzell checkbox card. Prominent but not obnoxious —
   soft-tinted background so it stands out from the rest of the form
   without screaming for attention. Whole card is a click target
   (label wraps input + copy). */
.bz-datos-save {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	margin: 4px 0 24px;
	background: var(--bz-brand-soft, #fff7ed);
	border: 1px solid var(--bz-brand, #F89831);
	border-radius: 10px;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.bz-datos-save:hover {
	background: #ffedd5;
}
.bz-datos-save input[type="checkbox"] {
	flex-shrink: 0;
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	accent-color: var(--bz-brand, #F89831);
	cursor: pointer;
}
.bz-datos-save-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}
.bz-datos-save-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bz-text);
	line-height: 1.35;
}
.bz-datos-save-hint {
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
	line-height: 1.4;
}

/* ================================================================
 * Datos step — delivery block (alpha.15.25.0.5.4)
 * ================================================================ */

.bz-datos-delivery-block {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px dashed var(--bz-border);
}

/* "Entrega" section header — softer than the main title but stronger
   than a field label. Delimits the delivery-only block from the
   contact fields above. */
.bz-datos-section-label {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--bz-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 14px;
}

/* Colonia read-only pill — visually distinct from an input so the
   shopper reads it as confirmation (not an editable field). Soft
   brand tint + pin icon. */
.bz-datos-colonia-readonly {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	margin-bottom: 18px;
	background: var(--bz-brand-soft, #fff7ed);
	border: 1px solid var(--bz-brand, #F89831);
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--bz-text);
	line-height: 1.4;
}
.bz-datos-colonia-readonly .bz-icon {
	color: var(--bz-brand);
	flex-shrink: 0;
}
.bz-datos-colonia-label {
	color: var(--bz-text-dim);
	font-weight: 500;
}

/* Missing-colonia fallback — soft warn box, not a hard error. */
.bz-datos-colonia-missing {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	margin-bottom: 18px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	font-size: 0.875rem;
	color: #b91c1c;
	line-height: 1.4;
}
.bz-datos-colonia-missing .bz-icon {
	color: #b91c1c;
	flex-shrink: 0;
}

/* Optional-field marker on labels — dim inline tag. */
.bz-datos-optional {
	font-weight: 400;
	color: var(--bz-text-dim);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.8125rem;
}

/* Textarea reuses .bz-datos-input for base styling; overrides vertical
   sizing and prevents horizontal resize (which breaks the layout). */
.bz-storefront .bz-datos-textarea {
	min-height: 80px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}

/* ================================================================
 * Datos step — pickup slot picker (alpha.15.25.0.5.5)
 * ================================================================ */

.bz-datos-pickup-block {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px dashed var(--bz-border);
}

.bz-datos-pickup-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
	line-height: 1.4;
}
.bz-datos-pickup-hint .bz-icon {
	color: var(--bz-text-dim);
	flex-shrink: 0;
}

/* Empty state — soft warn when no slots remain today. Same tone as
   the colonia-missing state so the visual grammar stays consistent. */
.bz-datos-pickup-empty {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	font-size: 0.875rem;
	color: #b91c1c;
	line-height: 1.4;
}
.bz-datos-pickup-empty .bz-icon {
	color: #b91c1c;
	flex-shrink: 0;
}

/* Pill grid — auto-wrapping row of 30-min windows. On narrow screens
   the pills stack more tightly; on wide screens they flow horizontally.
   Not scrolling — a wrapping grid handles reasonable slot counts (up
   to ~30) without needing chevron affordances like the category rail. */
.bz-datos-pickup-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bz-storefront .bz-datos-pickup-slot {
	flex: 0 0 auto;
	background: #fff !important;
	color: var(--bz-text) !important;
	border: 1px solid var(--bz-border) !important;
	padding: 10px 16px !important;
	border-radius: 999px !important;
	font-size: 0.9375rem !important;
	font-weight: 500;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	white-space: nowrap;
	font-family: inherit;
}
.bz-storefront .bz-datos-pickup-slot:hover {
	background: var(--bz-brand-soft, #fff7ed) !important;
	border-color: var(--bz-brand, #F89831) !important;
	color: #2a2828 !important;
}
.bz-storefront .bz-datos-pickup-slot.is-selected {
	background: var(--bz-brand, #F89831) !important;
	color: #fff !important;
	border-color: var(--bz-brand, #F89831) !important;
}
.bz-storefront .bz-datos-pickup-slot.is-selected:hover {
	background: var(--bz-brand-hover, #e08525) !important;
	color: #fff !important;
}

/* ================================================================
 * Pago step (alpha.15.25.0.5.6 → restyled .5.8.1)
 * ================================================================ */

.bz-pago {
	max-width: 640px;
	margin: 0 auto;
	padding: 8px 4px 24px;
}

/* Subtitle under the "Resumen de tu pedido" heading — sets context
   before the shopper starts scanning. Dim + smaller than title. */
.bz-pago-subtitle {
	margin-top: 6px;
	font-size: 0.875rem;
	color: var(--bz-text-dim);
	line-height: 1.4;
}

/* Every major block now sits in a proper card: soft shadow, rounded
   corners, generous padding. This is what makes the page read as
   deliberate rather than utilitarian. */
.bz-pago-card {
	background: #fff;
	border: 1px solid var(--bz-border);
	border-radius: 12px;
	padding: 18px 18px;
	margin-top: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}
.bz-pago-card-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--bz-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 14px;
}
.bz-pago-card-heading .bz-icon {
	color: var(--bz-brand);
	flex-shrink: 0;
}

/* Context (Cliente + Entrega/Recolección). Two-row layout with
   icon-badge on the left, label + value on the right. Feels like an
   airline boarding pass more than a receipt. */
.bz-pago-context {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bz-pago-context-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.bz-pago-context-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bz-brand-soft, #fff7ed);
	border-radius: 50%;
	color: var(--bz-brand, #F89831);
}
.bz-pago-context-icon .bz-icon {
	color: var(--bz-brand);
}
.bz-pago-context-body {
	flex: 1;
	min-width: 0;
}
.bz-pago-context-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--bz-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 2px;
}
.bz-pago-context-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bz-text);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* Order lines — compact but readable. Bordered rows inside the card,
   not a nested double-border like before. */
.bz-pago-lines {
	display: flex;
	flex-direction: column;
}
.bz-pago-line {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
}
.bz-pago-line + .bz-pago-line {
	border-top: 1px solid var(--bz-border);
}
.bz-pago-line-qty {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--bz-brand, #F89831);
	line-height: 1.4;
}
.bz-pago-line-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bz-pago-line-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bz-text);
	line-height: 1.35;
}
.bz-pago-line-variant {
	font-weight: 500;
	color: var(--bz-text-dim);
}
.bz-pago-line-extras,
.bz-pago-line-notes {
	font-size: 0.8125rem;
	color: var(--bz-text-dim);
	line-height: 1.4;
}
.bz-pago-line-notes {
	display: flex;
	align-items: center;
	gap: 4px;
	font-style: italic;
}
.bz-pago-line-notes .bz-icon {
	color: var(--bz-text-dim);
	flex-shrink: 0;
}
.bz-pago-line-total {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--bz-text);
	white-space: nowrap;
	text-align: right;
}

/* Totals card — summary rows on top, hero total on the bottom with a
   subtle gradient accent. Total is the moment; give it presence. */
.bz-pago-totals {
	padding: 18px 18px 0;
}
.bz-pago-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
}
.bz-pago-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.9375rem;
	color: var(--bz-text-dim);
	line-height: 1.4;
}
.bz-pago-row span:last-child {
	font-weight: 600;
	color: var(--bz-text);
}
.bz-pago-total-hero {
	margin: 0 -18px;
	padding: 18px 18px;
	background: linear-gradient(135deg, var(--bz-brand-soft, #fff7ed) 0%, #fff 100%);
	border-top: 1px solid var(--bz-border);
	border-radius: 0 0 12px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bz-pago-total-hero-label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bz-text);
}
.bz-pago-total-hero-amount {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--bz-brand, #F89831);
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Provider block — refined. Headline gets emphasis, hint is
   supporting copy, trust badges reinforce the security message
   without shouting. */
.bz-pago-provider {
	background: linear-gradient(135deg, var(--bz-brand-soft, #fff7ed) 0%, #fff 100%);
	border: 1px solid var(--bz-brand, #F89831);
}
.bz-pago-provider-headline {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--bz-text);
	line-height: 1.4;
}
.bz-pago-provider-headline .bz-icon {
	color: var(--bz-brand);
	flex-shrink: 0;
}
.bz-pago-provider-hint {
	margin-top: 8px;
	margin-left: 28px;
	font-size: 0.875rem;
	color: var(--bz-text-dim);
	line-height: 1.5;
}
.bz-pago-provider-trust {
	margin-top: 14px;
	margin-left: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bz-pago-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--bz-brand, #F89831);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--bz-text);
}
.bz-pago-trust-badge .bz-icon {
	color: var(--bz-brand);
	flex-shrink: 0;
}

/* Pay button — hero CTA. Larger, more presence, subtle shadow. */
.bz-storefront .bz-pago-pay {
	width: 100%;
	padding: 16px !important;
	font-size: 1.0625rem !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 12px rgba(248, 152, 49, 0.25);
	transition: transform 120ms ease, box-shadow 120ms ease;
}
.bz-storefront .bz-pago-pay:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(248, 152, 49, 0.35);
}
.bz-storefront .bz-pago-pay:active:not(:disabled) {
	transform: translateY(0);
}
.bz-storefront .bz-pago-pay:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}
.bz-storefront .bz-pago-pay .bz-icon {
	color: #fff;
}

/* Security disclaimer note — reads as a trust cue, not a warning. */
.bz-datos-actions .bz-datos-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
}
.bz-datos-actions .bz-datos-note .bz-icon {
	color: var(--bz-text-dim);
	flex-shrink: 0;
}

/* alpha.15.25.0.5.7.3 — "Desde" prefix on variable-price cards.
   Smaller + dimmer than the price itself so the value stays the
   primary read; the prefix is a subordinate qualifier. */
.bz-card-price-from {
	font-size: 0.75em;
	font-weight: 500;
	color: var(--bz-text-dim);
	letter-spacing: 0.02em;
}

/* ================================================================
 * Sucursal cerrada (alpha.15.25.0.5.8.8)
 * ================================================================ */

/* Closed chip on branch cards — small pill that surfaces the closed
   state before the shopper commits. Bottom of the card so cards keep
   consistent layout; visible but not shouting. */
.bz-branch-card-closed {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	padding: 4px 10px;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.bz-branch-card-closed .bz-icon {
	color: #b91c1c;
	flex-shrink: 0;
}

/* Dim closed cards so open ones read as the primary options. Still
   tappable — tap flows to the full-screen closed explainer. */
.bz-branch-card-dim {
	opacity: 0.70;
}
.bz-branch-card-dim:hover {
	opacity: 1;
}

/* Closed-sucursal full screen. Mirrors bz-nocov styling for
   consistency with the "no coverage" pattern. */
.bz-closed-icon {
	color: var(--bz-brand);
	text-align: center;
	margin: 12px 0;
	display: flex;
	justify-content: center;
}
.bz-closed-branch {
	margin: 16px auto;
	padding: 14px 16px;
	background: var(--bz-brand-soft, #fff7ed);
	border: 1px solid var(--bz-brand, #F89831);
	border-radius: 10px;
	max-width: 380px;
	text-align: left;
}
.bz-closed-branch strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--bz-text);
}
.bz-closed-branch-addr {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 0.875rem;
	color: var(--bz-text-dim);
	line-height: 1.4;
}
.bz-closed-branch-addr .bz-icon {
	color: var(--bz-text-dim);
	flex-shrink: 0;
}

/* ================================================================
 * alpha.15.25.0.7.1.6 — mobile polish batch (user-reported)
 * ================================================================ */

/* 1) Closed-branch badge overflowing the card edge. Contain and wrap
   inside the card instead of hanging past it. */
.bz-branch-card { min-width: 0; }
.bz-branch-card-closed {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
	overflow-wrap: anywhere;
	margin-top: 6px;
	text-align: left;
}

/* 2) Destacados: 2x2 grid on mobile instead of 4 stacked tiles, so
   Categorías is reachable without scrolling through the whole hero. */
@media (max-width: 699px) {
	.bz-menu-featured .bz-menu-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
}

/* 3) Categorías title — per spec: at least 45px so the section is
   unmissable while scrolling. (Tunable here if it reads too large on
   small devices.) */
.bz-cat-rail-label {
	font-size: 45px;
	line-height: 1.1;
	padding: 4px 20px 10px;
	letter-spacing: 0;
	text-transform: none;
}

/* 4) Categorías rail presence: larger, bolder chips on a tinted band
   so the rail reads as navigation, not decoration. */
.bz-cat-rail {
	background: var(--bz-brand-soft, #fff7ed);
	border-top: 1px solid var(--bz-border);
	border-bottom: 2px solid var(--bz-brand, #F89831);
	padding-top: 10px;
	padding-bottom: 10px;
}
.bz-cat-chip {
	padding: 12px 20px;
	font-size: 1rem;
	font-weight: 600;
}

/* 5) Bundle/variant picker pills with long labels (Grande · Hawaiana ·
   Orilla De Queso +Q150) overflowed horizontally on mobile. Pills
   become full-width rows: label wraps, price delta stays intact on
   the right. */
.bz-picker-pill {
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
	text-align: left;
}
.bz-picker-pill-delta { white-space: nowrap; }
@media (max-width: 699px) {
	.bz-picker-slot-pills {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.bz-picker-pill {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
	}
}