/* ──────────────────────────────────────────────────────────────
   LA GRATA · Sticky Bar v2
   Variants: mobile G (3 rows), mobile H (2 rows + pill), desktop G (1 row)
   ────────────────────────────────────────────────────────────── */

.lgsbv2-root,
.lgsbv2-sheet,
.lgsbv2-scrim {
	--lgsbv2-cacao-deep: #2B1810;
	--lgsbv2-cacao:      #4F2F1F;
	--lgsbv2-crema:      #F3EAD1;
	--lgsbv2-crema-soft: #ECE2C2;
	--lgsbv2-dorado:     #C8A66A;
	--lgsbv2-page-bg:    #FBF6EC;
	--lgsbv2-ink:        #2B1810;
	--lgsbv2-ink-muted:  rgba(43,24,16,0.55);
	--lgsbv2-rule:       rgba(43,24,16,0.10);

	font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
.lgsbv2-root *,
.lgsbv2-sheet *,
.lgsbv2-scrim * { box-sizing: inherit; }

/* Fonts the user already has in their theme. If Fraunces is not registered globally,
   the bar falls back to a serif. Keeping the import opt-in via the @font-face below
   is intentional — uncomment if needed. */
.lgsbv2-display {
	font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
	letter-spacing: -0.01em;
}
.lgsbv2-mono {
	font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ──────────────────────────────────────────────────────────────
   ROOT POSITIONING
   ────────────────────────────────────────────────────────────── */
.lgsbv2-root {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9990;
	display: flex; justify-content: center;
	padding: 0 12px calc(var(--lgsbv2-offset-bottom, 12px) + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
	transform: translateY(120%);
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.lgsbv2-root.is-visible {
	transform: translateY(0);
}
.lgsbv2-root.is-visible .lgsbv2-bar {
	pointer-events: auto;
}

/* ──────────────────────────────────────────────────────────────
   COMMON BAR SHELL
   ────────────────────────────────────────────────────────────── */
.lgsbv2-bar {
	background: var(--lgsbv2-cacao-deep);
	color: var(--lgsbv2-crema);
	border-radius: 22px;
	border: 1px solid rgba(243,234,209,0.16);
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55),
		inset 0 1px 0 rgba(243,234,209,0.10);
	overflow: hidden;
	width: 100%;
	max-width: 540px;
}

.lgsbv2-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ──────────────────────────────────────────────────────────────
   ROW · TOPPINGS SUMMARY (used in mobile G)
   ────────────────────────────────────────────────────────────── */
.lgsbv2-top-row {
	width: 100%;
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px 9px 14px;
	background: transparent;
	border: 0; border-bottom: 1px solid rgba(243,234,209,0.10);
	color: var(--lgsbv2-crema);
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: background .2s;
}
.lgsbv2-top-row.has-selection {
	background: rgba(200,166,106,0.10);
}
.lgsbv2-top-row .lgsbv2-counter {
	width: 22px; height: 22px; border-radius: 999px;
	background: rgba(243,234,209,0.08);
	border: 1px solid rgba(243,234,209,0.22);
	color: var(--lgsbv2-crema);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
	flex-shrink: 0;
	transition: background .2s, border-color .2s, color .2s;
}
.lgsbv2-top-row.has-selection .lgsbv2-counter {
	background: var(--lgsbv2-dorado);
	border-color: var(--lgsbv2-dorado);
	color: var(--lgsbv2-cacao-deep);
}
.lgsbv2-top-row-label {
	flex: 1; min-width: 0;
	font-size: 13px; font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lgsbv2-top-row-extra {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; font-weight: 600;
	color: var(--lgsbv2-dorado);
	letter-spacing: 0.04em;
	flex-shrink: 0;
}
.lgsbv2-chev {
	width: 12px; height: 12px;
	stroke: currentColor; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round;
	fill: none; flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   FORMAT SEGMENTED
   ────────────────────────────────────────────────────────────── */
.lgsbv2-format-row {
	display: flex; gap: 0;
	padding: 6px 6px 2px;
	border-bottom: 1px solid rgba(243,234,209,0.10);
}
.lgsbv2-format-row.is-only-row {
	border-bottom: 0;
}
.lgsbv2-fmt {
	flex: 1; border: 0; background: transparent;
	color: rgba(243,234,209,0.55);
	padding: 8px 6px 12px;
	border-radius: 11px;
	cursor: pointer;
	font: inherit; line-height: 1.1;
	text-align: center;
	position: relative;
	transition: background .15s, color .15s;
}
.lgsbv2-fmt:hover { background: rgba(243,234,209,0.05); }
.lgsbv2-fmt.is-active {
	background: rgba(243,234,209,0.10);
	color: var(--lgsbv2-crema);
}
.lgsbv2-fmt-label {
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.10em; text-transform: uppercase;
}
.lgsbv2-fmt-sub {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; font-weight: 500;
	margin-top: 4px; opacity: 0.55;
	letter-spacing: 0.04em;
}
.lgsbv2-fmt.is-active .lgsbv2-fmt-sub { opacity: 0.85; }
.lgsbv2-fmt.is-active::after {
	content: ''; position: absolute;
	bottom: 4px; left: 50%; transform: translateX(-50%);
	width: 14px; height: 2px; border-radius: 2px;
	background: var(--lgsbv2-dorado);
}

/* ──────────────────────────────────────────────────────────────
   ACTION ROW (qty + price + CTA / pill + price + CTA)
   ────────────────────────────────────────────────────────────── */
.lgsbv2-action-row {
	display: flex; align-items: center; gap: 10px;
	padding: 8px;
}

.lgsbv2-qty {
	display: inline-flex; align-items: center;
	background: rgba(243,234,209,0.08);
	border: 1px solid rgba(243,234,209,0.18);
	border-radius: 999px;
	flex-shrink: 0;
}
.lgsbv2-qty button {
	width: 32px; height: 38px;
	background: transparent; border: 0;
	color: var(--lgsbv2-crema);
	font-size: 16px; cursor: pointer;
	font: inherit; line-height: 1; padding: 0;
}
.lgsbv2-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.lgsbv2-qty-v {
	min-width: 20px; text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px; font-weight: 600;
	color: var(--lgsbv2-crema);
}

.lgsbv2-price {
	line-height: 1; margin-left: 4px;
}
.lgsbv2-price-amount {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 21px;
	letter-spacing: -0.01em;
}
.lgsbv2-price-amount .woocommerce-Price-currencySymbol { font-size: inherit; }
.lgsbv2-price-meta {
	font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(243,234,209,0.55);
	margin-top: 3px; font-weight: 500;
}
.lgsbv2-price-meta strong {
	color: var(--lgsbv2-dorado); font-weight: 600;
	font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
}

.lgsbv2-grow { flex: 1; min-width: 0; }

.lgsbv2-cta {
	background: var(--lgsbv2-crema);
	color: var(--lgsbv2-cacao-deep);
	border: 0; border-radius: 999px;
	padding: 13px 18px;
	font: inherit;
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.10em; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 8px;
	cursor: pointer;
	flex-shrink: 0;
	transition: opacity .15s, transform .15s;
}
.lgsbv2-cta:hover { transform: translateY(-1px); }
.lgsbv2-cta:active { transform: translateY(0); }
.lgsbv2-cta.is-loading { opacity: 0.6; pointer-events: none; }
.lgsbv2-cta.is-out { opacity: 0.5; pointer-events: none; }
.lgsbv2-cta svg {
	width: 13px; height: 13px;
	stroke: currentColor; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round;
	fill: none;
}

/* ──────────────────────────────────────────────────────────────
   VARIANT H · toppings pill (sits in action row, no qty stepper)
   ────────────────────────────────────────────────────────────── */
.lgsbv2-toppings-pill {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(243,234,209,0.08);
	border: 1px solid rgba(243,234,209,0.18);
	color: var(--lgsbv2-crema);
	border-radius: 999px;
	padding: 9px 14px 9px 8px;
	cursor: pointer;
	font: inherit;
	font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	transition: background .2s, border-color .2s;
}
.lgsbv2-toppings-pill.has-selection {
	background: rgba(200,166,106,0.16);
	border-color: rgba(200,166,106,0.40);
}
.lgsbv2-toppings-pill .lgsbv2-counter {
	width: 22px; height: 22px; border-radius: 999px;
	background: transparent;
	border: 1px solid rgba(243,234,209,0.30);
	color: var(--lgsbv2-crema);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
}
.lgsbv2-toppings-pill.has-selection .lgsbv2-counter {
	background: var(--lgsbv2-dorado);
	border-color: var(--lgsbv2-dorado);
	color: var(--lgsbv2-cacao-deep);
}

/* ──────────────────────────────────────────────────────────────
   DESKTOP G (≥ breakpoint)
   ────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
	.lgsbv2-root {
		padding-left: 24px;
		padding-right: 24px;
	}
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-bar {
		max-width: 1320px;
		border-radius: 22px;
		padding: 12px 14px 12px 18px;
		display: flex; align-items: center; gap: 14px;
		position: relative;
	}

	/* Identity (thumb + name + subtitle) */
	.lgsbv2-identity {
		display: flex; align-items: center; gap: 14px;
		min-width: 0; max-width: 280px;
	}
	.lgsbv2-thumb {
		width: 48px; height: 48px; border-radius: 14px;
		overflow: hidden; flex-shrink: 0;
		background: rgba(243,234,209,0.08);
		border: 1px solid rgba(243,234,209,0.16);
	}
	.lgsbv2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.lgsbv2-identity-text { min-width: 0; line-height: 1.1; }
	.lgsbv2-identity-sub {
		font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
		color: var(--lgsbv2-dorado); font-weight: 600; margin-bottom: 4px;
	}
	.lgsbv2-identity-name {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 17px; font-weight: 500;
		letter-spacing: -0.005em;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}

	.lgsbv2-divider {
		width: 1px; height: 38px;
		background: rgba(243,234,209,0.14);
		flex-shrink: 0;
	}

	/* Format on desktop: inset pill group, not full-width row */
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-format-row {
		display: inline-flex;
		background: rgba(243,234,209,0.06);
		border: 1px solid rgba(243,234,209,0.14);
		border-radius: 12px;
		padding: 3px;
		flex-shrink: 0;
		border-bottom: 0;
	}
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-fmt {
		flex: 0 0 auto;
		padding: 8px 16px;
		border-radius: 9px;
		text-align: left;
	}
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-fmt.is-active {
		background: var(--lgsbv2-crema);
		color: var(--lgsbv2-cacao-deep);
	}
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-fmt.is-active::after { display: none; }
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-fmt-sub { opacity: 0.7; }
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-fmt.is-active .lgsbv2-fmt-sub { opacity: 0.7; }

	/* Toppings inline chip on desktop — large block */
	.lgsbv2-toppings-inline {
		flex: 1 1 auto; min-width: 140px;
		position: relative;
	}
	.lgsbv2-toppings-inline-btn {
		width: 100%;
		display: flex; align-items: center; gap: 10px;
		background: rgba(243,234,209,0.06);
		border: 1px solid rgba(243,234,209,0.14);
		color: var(--lgsbv2-crema);
		border-radius: 12px;
		padding: 9px 12px;
		cursor: pointer;
		text-align: left;
		font: inherit;
		transition: background .2s, border-color .2s;
	}
	.lgsbv2-toppings-inline-btn:hover {
		background: rgba(243,234,209,0.10);
	}
	.lgsbv2-toppings-inline-btn.has-selection {
		background: rgba(200,166,106,0.12);
		border-color: rgba(200,166,106,0.35);
	}
	.lgsbv2-toppings-inline-btn .lgsbv2-counter {
		width: 22px; height: 22px; border-radius: 999px;
		background: rgba(243,234,209,0.10);
		border: 1px solid rgba(243,234,209,0.22);
		color: var(--lgsbv2-crema);
		display: inline-flex; align-items: center; justify-content: center;
		font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
		flex-shrink: 0;
	}
	.lgsbv2-toppings-inline-btn.has-selection .lgsbv2-counter {
		background: var(--lgsbv2-dorado);
		border-color: var(--lgsbv2-dorado);
		color: var(--lgsbv2-cacao-deep);
	}
	.lgsbv2-toppings-inline-body {
		flex: 1; min-width: 0;
		display: flex; flex-direction: column;
		line-height: 1.15;
	}
	.lgsbv2-toppings-inline-label {
		display: block;
		font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
		color: rgba(243,234,209,0.55); font-weight: 600; margin-bottom: 2px;
	}
	.lgsbv2-toppings-inline-names {
		display: block;
		font-size: 12.5px; font-weight: 500; line-height: 1.15;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.lgsbv2-toppings-inline-btn .lgsbv2-top-row-extra {
		margin-left: auto;
		flex-shrink: 0;
	}

	/* Hide the mobile pill in desktop (defensive) */
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-toppings-pill { display: none !important; }

	/* Total on desktop */
	.lgsbv2-total-block { line-height: 1; text-align: right; flex-shrink: 0; }
	.lgsbv2-total-block .lgsbv2-price-meta { margin-bottom: 4px; }
	.lgsbv2-total-block .lgsbv2-price-amount { font-size: 24px; }

	.lgsbv2-root[data-mode="desktop"] .lgsbv2-cta {
		padding: 14px 22px; font-size: 12px;
	}
	.lgsbv2-root[data-mode="desktop"] .lgsbv2-cta svg { width: 14px; height: 14px; }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE BOTTOM SHEET (toppings)
   ────────────────────────────────────────────────────────────── */
.lgsbv2-scrim {
	position: fixed; inset: 0;
	background: rgba(43,24,16,0.45);
	z-index: 9991;
	opacity: 0;
	transition: opacity .25s;
	pointer-events: none;
}
.lgsbv2-scrim.is-visible { opacity: 1; pointer-events: auto; }

.lgsbv2-sheet {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9992;
	background: var(--lgsbv2-page-bg);
	color: var(--lgsbv2-ink);
	border-radius: 24px 24px 0 0;
	box-shadow: 0 -20px 50px -10px rgba(0,0,0,0.30);
	padding: 10px 0 max(20px, env(safe-area-inset-bottom));
	max-height: 78vh;
	display: none;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.lgsbv2-sheet.is-open {
	display: flex;
	transform: translateY(0);
}
.lgsbv2-sheet-handle {
	width: 40px; height: 4px; border-radius: 999px;
	background: rgba(43,24,16,0.18);
	margin: 0 auto 14px;
}
.lgsbv2-sheet-header {
	display: flex; align-items: baseline; gap: 8px;
	padding: 0 20px 14px;
}
.lgsbv2-sheet-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 22px; font-weight: 400;
	letter-spacing: -0.015em; margin: 0;
	color: var(--lgsbv2-cacao-deep);
}
.lgsbv2-sheet-meta {
	font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--lgsbv2-ink-muted); font-weight: 600;
}
.lgsbv2-sheet-close {
	margin-left: auto;
	background: transparent; border: 0; cursor: pointer;
	color: var(--lgsbv2-ink-muted);
	font-size: 22px; line-height: 1; padding: 4px 8px;
	font-family: inherit;
}
.lgsbv2-sheet-body {
	flex: 1; overflow-y: auto;
	padding: 0 14px;
	display: flex; flex-direction: column; gap: 4px;
	-webkit-overflow-scrolling: touch;
}
.lgsbv2-topping-item {
	display: flex; align-items: center; gap: 14px;
	background: transparent;
	border: 0; border-radius: 14px;
	padding: 12px 14px;
	cursor: pointer;
	text-align: left;
	color: var(--lgsbv2-ink);
	font: inherit;
	transition: background .15s;
}
.lgsbv2-topping-item.is-active {
	background: rgba(200,166,106,0.14);
}
.lgsbv2-topping-box {
	width: 22px; height: 22px; border-radius: 8px;
	background: transparent;
	border: 1.5px solid rgba(43,24,16,0.25);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; color: #fff;
	transition: background .15s, border-color .15s;
}
.lgsbv2-topping-item.is-active .lgsbv2-topping-box {
	background: var(--lgsbv2-dorado);
	border-color: var(--lgsbv2-dorado);
}
.lgsbv2-topping-box svg {
	width: 12px; height: 12px;
	stroke: currentColor; stroke-width: 3.5;
	stroke-linecap: round; stroke-linejoin: round;
	fill: none; opacity: 0;
	transition: opacity .15s;
}
.lgsbv2-topping-item.is-active .lgsbv2-topping-box svg { opacity: 1; }
.lgsbv2-topping-name {
	flex: 1;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 17px;
	letter-spacing: -0.005em;
}
.lgsbv2-topping-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px; font-weight: 600;
	color: var(--lgsbv2-ink-muted);
	letter-spacing: 0.02em;
}
.lgsbv2-topping-item.is-active .lgsbv2-topping-price {
	color: var(--lgsbv2-dorado);
}
.lgsbv2-sheet-footer {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 20px 0;
	border-top: 1px solid var(--lgsbv2-rule);
	margin-top: 8px;
}
.lgsbv2-sheet-footer-info {
	line-height: 1;
}
.lgsbv2-sheet-footer-meta {
	font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--lgsbv2-ink-muted); font-weight: 600;
}
.lgsbv2-sheet-footer-count {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 18px; margin-top: 4px;
	letter-spacing: -0.01em;
	color: var(--lgsbv2-cacao-deep);
}
.lgsbv2-sheet-done {
	margin-left: auto;
	background: var(--lgsbv2-cacao-deep);
	color: var(--lgsbv2-crema);
	border: 0; border-radius: 999px;
	padding: 14px 20px;
	font-size: 11.5px; font-weight: 700;
	letter-spacing: 0.10em; text-transform: uppercase;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 10px;
	font-family: inherit;
}
.lgsbv2-sheet-done svg {
	width: 13px; height: 13px;
	stroke: currentColor; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round;
	fill: none;
}

/* ──────────────────────────────────────────────────────────────
   DESKTOP POPOVER (replaces bottom sheet on ≥ breakpoint)
   ────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
	.lgsbv2-sheet.is-open {
		position: fixed;
		left: auto; bottom: auto;
		width: 360px;
		max-height: 380px;
		border-radius: 18px;
		background: #fff;
		border: 1px solid var(--lgsbv2-rule);
		box-shadow: 0 24px 60px -16px rgba(43,24,16,0.30);
		padding: 14px 0;
		transform: translateY(0);
	}
	.lgsbv2-sheet-handle { display: none; }
	.lgsbv2-sheet-footer { display: none; }
	.lgsbv2-sheet-body { padding: 0 6px; max-height: 280px; }
	.lgsbv2-sheet-header { padding: 0 16px 10px; }
	.lgsbv2-sheet-title { font-size: 17px; font-weight: 500; }
	.lgsbv2-topping-item { padding: 9px 12px; border-radius: 10px; gap: 12px; }
	.lgsbv2-topping-box { width: 18px; height: 18px; border-radius: 6px; }
	.lgsbv2-topping-name { font-size: 14px; }
	.lgsbv2-scrim {
		background: transparent;
	}
}

/* ──────────────────────────────────────────────────────────────
   NO-TOPPINGS STATE — adjustments
   ────────────────────────────────────────────────────────────── */
.lgsbv2-root.no-toppings .lgsbv2-top-row,
.lgsbv2-root.no-toppings .lgsbv2-toppings-pill,
.lgsbv2-root.no-toppings .lgsbv2-toppings-inline { display: none !important; }

/* When there are no toppings AND there is only one format (or none, simple product),
   the bar collapses to a single action row. */
.lgsbv2-root.no-toppings.no-variations .lgsbv2-format-row { display: none; }

/* ──────────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.lgsbv2-root,
	.lgsbv2-sheet,
	.lgsbv2-scrim,
	.lgsbv2-cta { transition: none !important; }
}