/* Food Customizer — product-page layout (product.png-style), dark & elegant. */
.fc-product-wrap {
	--fc-ink: #f2ede4;
	--fc-muted: rgba(242, 237, 228, .55);
	--fc-line: rgba(242, 237, 228, .22);
	--fc-line-strong: rgba(242, 237, 228, .7);
	--fc-surface: rgba(255, 255, 255, .028);
	max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px;
}

.fc-pp { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; grid-template-rows: 1fr auto; gap: 26px 44px; align-items: start; }
.fc-pp-left { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 16px; }
.fc-pp-main { grid-column: 2; text-align: center; }
.fc-pp-footer { grid-column: 1 / 3; }

/* Single-column stacked layout (happy.bg style): image → buy bar → cards → combine. */
.fc-pp--stack { display: block; max-width: 640px; margin: 0 auto; }
.fc-pp--stack .fc-pp-image { margin: 0 0 16px; }
.fc-pp--stack .fc-pp-image img { max-width: 100%; width: 100%; height: auto; border-radius: var(--fc-radius-box, 6px); }
.fc-pp--stack .fc-pp-title { text-align: center; font-size: var(--fc-fs-title, 1.7rem); margin: 0 0 4px; }
.fc-pp--stack .fc-pp-weight { text-align: center; margin-bottom: 4px; }
.fc-pp-buybar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; margin: 10px 0 4px; border-top: var(--fc-bw, 1px) solid var(--fc-line); border-bottom: var(--fc-bw, 1px) solid var(--fc-line); }
.fc-pp-buybar .fc-pp-final { margin-right: auto; }
.fc-pp-stock { color: var(--fc-accent, #dd5903); font-weight: 600; font-size: var(--fc-fs-small, .8rem); margin: 8px 0 0; }
.fc-pp-stack-body { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.fc-pp--stack .fc-combine { margin-top: 28px; }

/* Desktop only (≥1025px): two-column layout. Phones AND tablets (≤1024px) use
   the single-column mobile stack above. */
@media (min-width: 1025px) {
	.fc-pp--stack {
		display: grid;
		grid-template-columns: minmax(280px, 360px) 1fr;
		grid-template-areas:
			"cards image"
			"cards title"
			"cards buybar"
			"cards combine";
		/* Keep image→name→buy tight; push any leftover height (from tall option
		   cards on the left) into the last row so it doesn't gap the top. */
		grid-template-rows: auto auto auto 1fr;
		gap: 10px 44px;
		align-items: start;
		max-width: 1100px;
	}
	/* RTL layout: option cards on the right, image on the left. */
	body.fc-layout-rtl .fc-pp--stack {
		grid-template-columns: 1fr minmax(280px, 360px);
		grid-template-areas:
			"image cards"
			"title cards"
			"buybar cards"
			"combine cards";
	}
	.fc-pp--stack .fc-pp-image { grid-area: image; margin: 0; }
	.fc-pp--stack .fc-pp-image img { width: 100%; max-width: 560px; height: auto; border-radius: var(--fc-radius-box, 6px); display: block; margin: 0 auto; }
	.fc-pp--stack .fc-pp-title { grid-area: title; }
	/* Keep the options panel (Съставки / Премахни продукти / options) in view
	   while scrolling the taller image+description column. `align-self: start`
	   keeps the panel its natural height so it has room to travel; top clears
	   the site header. */
	.fc-pp--stack .fc-pp-stack-body { grid-area: cards; margin-top: 0; position: sticky; top: 110px; align-self: start; }
	.fc-pp--stack .fc-pp-buybar { grid-area: buybar; }
	.fc-pp--stack .fc-combine { grid-area: combine; margin-top: 18px; }
}

/* Mobile/tablet (≤1024px): for variable products, lift the variation selection
   (ИЗБОР / attribute pills) ABOVE the price bar, so the customer chooses the
   variant first and then sees the price. `display: contents` on the options
   wrapper hoists the cards into the stack's flex flow so `order` can reposition
   just the variation cards; everything else keeps its order. Desktop is untouched. */
@media (max-width: 1024px) {
	/* align-items: stretch overrides the `.fc-pp` rule (the element carries both
	   `fc-pp` and `fc-pp--stack`) so every item is full-width, as in the old block
	   layout — otherwise short variation cards shrink to their content width. */
	.fc-pp--stack { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
	.fc-pp--stack > .fc-pp-image { order: 1; margin: 0; }
	.fc-pp--stack > .fc-pp-title { order: 2; margin: 0; }
	.fc-pp--stack > .fc-pp-weight { order: 3; margin: 0; }
	.fc-pp--stack > .fc-pp-stack-body { display: contents; }
	/* Order: Съставки → variation → Опции БЕЗ/ОЩЕ → allergens → price → combine.
	   All option cards sit above the final-price bar (happy.bg-style). */
	.fc-pp--stack .fc-pp-ingredients-card { order: 4; }
	.fc-pp--stack .fc-pp-var-card { order: 5; }
	.fc-pp--stack .fc-pp-stack-body > .fc-card-box:not(.fc-pp-var-card):not(.fc-pp-ingredients-card),
	.fc-pp--stack .fc-pp-stack-body > .fc-pp-allergens { order: 6; }
	.fc-pp--stack > .fc-pp-buybar { order: 7; margin: 0; }
	.fc-pp--stack > .fc-pp-unavailable { order: 8; margin: 0; }
	.fc-pp--stack > .fc-combine { order: 9; margin: 0; }
}

/* Boxes — dark framed, not white */
.fc-card-box { background: var(--fc-surface); border: var(--fc-bw, 1px) solid var(--fc-line); border-radius: var(--fc-radius-box, 6px); padding: 18px 20px; }
.fc-card-box h3 { margin: 0 0 12px; font-family: var(--fc-ff-heading, 'Cormorant Garamond', serif); font-size: var(--fc-fs-heading, .72rem); letter-spacing: .1em; text-transform: uppercase; color: var(--fc-muted); font-weight: 600; text-align: center; }
.fc-pp-desc { color: var(--fc-muted); font-size: var(--fc-fs-body, .9rem); line-height: 1.55; }

/* Options */
.fc-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: var(--fc-bw, 1px) solid var(--fc-line); border-radius: var(--fc-radius, 4px); margin-bottom: 8px; background: transparent; cursor: pointer; }
.fc-opt:last-child { margin-bottom: 0; }
.fc-opt span { color: var(--fc-ink); }
.fc-opt-right { display: flex; align-items: center; gap: 10px; }
.fc-opt-price { color: var(--fc-muted); font-size: var(--fc-fs-body, .88rem); white-space: nowrap; }
.fc-variant input, .fc-remove input { width: 17px; height: 17px; accent-color: var(--fc-ink); }
.fc-variant:has(input:checked) { border-color: var(--fc-line-strong); }

/* Option pills (тесто/сос) — full-width stacked buttons filling the box */
.fc-var-pills { display: flex; flex-direction: column; gap: 8px; }
.fc-var-pill { width: 100%; box-sizing: border-box; text-align: center; background: transparent; color: var(--fc-ink); border: var(--fc-bw, 1px) solid var(--fc-line); border-radius: var(--fc-radius, 3px); padding: 12px 14px; font-size: var(--fc-fs-pill, .82rem); font-weight: 500; line-height: 1.3; cursor: pointer; transition: all .15s; }
.fc-var-pill:hover {
	background: var(--fc-opt-hov-bg, transparent);
	border-color: var(--fc-opt-hov-line, var(--fc-line-strong));
	color: var(--fc-opt-hov-text, var(--fc-ink));
}
/* a chosen pill keeps its accent fill while the pointer is over it */
.fc-var-pill.is-active:hover { background: var(--fc-accent, var(--fc-ink)); border-color: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); }
.fc-var-pill.is-active { background: var(--fc-accent, var(--fc-ink)); border-color: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); }

/* Collapsible cards (БЕЗ / ОЩЕ) */
.fc-collapsible { padding: 0; overflow: hidden; }
.fc-collapse-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; background: none; border: 0; cursor: pointer; font-family: var(--fc-ff-heading, 'Cormorant Garamond', serif); font-size: var(--fc-fs-heading, .72rem); letter-spacing: .1em; text-transform: uppercase; color: var(--fc-muted); font-weight: 600; }
.fc-chev { transition: transform .2s; }
.fc-collapsible.is-open .fc-chev { transform: rotate(180deg); }
.fc-collapse-body { padding: 0 16px 16px; display: none; }
.fc-collapsible.is-open .fc-collapse-body { display: block; }

/* Stepper */
.fc-stepper, .fc-qty-stepper { display: inline-flex; align-items: center; gap: 10px; }
.fc-stepper button, .fc-qty-stepper button { width: 34px; height: 34px; border-radius: var(--fc-radius, 3px); border: var(--fc-bw, 1px) solid var(--fc-line); background: transparent; font-size: 17px; line-height: 1; cursor: pointer; color: var(--fc-ink); transition: border-color .15s; }
.fc-stepper button:hover, .fc-qty-stepper button:hover { border-color: var(--fc-line-strong); }
.fc-qty, .fc-main-qty { min-width: 20px; text-align: center; font-weight: 600; }

/* Allergens */
.fc-pp-allergens { text-align: center; }
.fc-pp-allergens h3 { margin: 6px 0 10px; font-family: var(--fc-ff-heading, 'Cormorant Garamond', serif); font-size: var(--fc-fs-heading, .72rem); letter-spacing: .1em; text-transform: uppercase; color: var(--fc-muted); font-weight: 600; }
.fc-allergen-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
/* Allergen chips in Jost (Latin-only font; Cyrillic falls back to Roboto/sans). */
.fc-allergen-chip { font-family: 'Jost', 'Roboto', sans-serif; font-weight: 500; font-size: var(--fc-fs-small, .68rem); padding: 3px 10px; border-radius: var(--fc-radius, 3px); border: var(--fc-bw, 1px) solid var(--fc-line); color: var(--fc-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Main image + title */
.fc-pp-image { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fc-pp-image img { max-width: 560px; width: 100%; height: auto; border-radius: var(--fc-radius-box, 6px); }
.fc-pp-title { font-size: var(--fc-fs-title, 2rem); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--fc-ink); margin: 0 0 6px; }
.fc-pp-weight { color: var(--fc-muted); font-size: var(--fc-fs-small, 1.05rem); font-weight: 500; }

/* "Combine with" slider */
.fc-combine { margin-top: 34px; }
.fc-combine-title { font-family: var(--fc-ff-heading, 'Cormorant Garamond', serif); font-size: var(--fc-fs-heading, .72rem); text-transform: uppercase; letter-spacing: .1em; color: var(--fc-muted); font-weight: 600; margin-bottom: 16px; text-align: center; }
.fc-combine-slider { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fc-combine-card { flex: 0 0 162px; scroll-snap-align: start; background: var(--fc-surface); border: var(--fc-bw, 1px) solid var(--fc-line); border-radius: var(--fc-radius-box, 6px); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; text-align: left; }
.fc-combine-card:hover { border-color: var(--fc-line-strong); transform: translateY(-2px); }
.fc-combine-link { display: flex; flex-direction: column; text-decoration: none; }
.fc-combine-img { display: block; aspect-ratio: 1; background: #0e0c0a; margin: 8px 8px 0; border-radius: var(--fc-radius, 4px); overflow: hidden; }
.fc-combine-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-combine-name { padding: 9px 11px 4px; font-size: var(--fc-fs-body, .82rem); font-weight: 500; color: var(--fc-ink); line-height: 1.3; }
.fc-combine-foot { display: flex; flex-direction: column; gap: 9px; padding: 0 11px 11px; margin-top: auto; }
.fc-combine-price { font-size: .82rem; font-weight: 600; color: var(--fc-ink); }
.fc-combine-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; background: transparent !important; color: var(--fc-ink) !important; border: var(--fc-bw, 1px) solid var(--fc-line-strong); border-radius: var(--fc-radius, 3px); padding: 8px 10px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: background .2s, border-color .2s; }
.fc-combine-btn:hover { background: rgba(255, 255, 255, .09) !important; }
.fc-combine-btn.loading { opacity: .6; pointer-events: none; }
.fc-combine-btn.fc-added { background: rgba(255, 255, 255, .16) !important; }

/* Footer bar */
.fc-pp-footer { display: flex; align-items: center; justify-content: flex-end; gap: 26px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--fc-line); margin-top: 6px; }
.fc-pp-final { display: flex; flex-direction: column; margin-right: auto; }
.fc-pp-final small { color: var(--fc-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.fc-pp-price { font-size: var(--fc-fs-pp-price, 1.7rem); font-weight: 600; color: var(--fc-ink); }
/* "Избери опции" prompt shown before every option is chosen (no --num class). */
.fc-pp-price:not(.fc-pp-price--num) { font-size: 1rem; font-weight: 500; color: var(--fc-muted); }
.fc-pp-add.button {
	background: var(--fc-btn-bg, transparent) !important; color: var(--fc-btn-text, var(--fc-ink)) !important; border: var(--fc-bw, 1px) solid var(--fc-btn-bg, var(--fc-line-strong)) !important; border-radius: var(--fc-radius, 3px) !important;
	height: 40px; padding: 0 26px !important; box-sizing: border-box; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-weight: 600 !important; font-size: var(--fc-fs-button, .82rem) !important; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.fc-pp-add.button:hover { background: var(--fc-btn-bg-hov, rgba(255, 255, 255, .1)) !important; color: var(--fc-btn-text-hov, var(--fc-ink)) !important; border-color: var(--fc-btn-bg-hov, var(--fc-ink)) !important; }

/* --- "What's needed" hint on the add button --------------------------------
   When a required option (e.g. a flavour) isn't chosen, the button stays
   interactive but dimmed, and hovering it (or tapping on touch) shows a small
   tooltip like „Избери Вкус". The click handler blocks the real add-to-cart. */
.fc-pp-add { position: relative; }
.fc-pp-add--incomplete { opacity: .5; cursor: help; }
.fc-pp-add--incomplete:hover { opacity: .62; }
.fc-pp-add--incomplete::after {
	content: attr(data-hint);
	position: absolute; left: 50%; bottom: calc(100% + 11px);
	transform: translateX(-50%) translateY(5px);
	background: var(--fc-ink, #f2ede4); color: var(--fc-page-bg, #1a140d);
	padding: 8px 13px; border-radius: var(--fc-radius, 4px);
	font-size: 12.5px; font-weight: 600; letter-spacing: .01em; text-transform: none;
	white-space: nowrap; line-height: 1.2; box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
	opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 30;
}
.fc-pp-add--incomplete::before {
	content: ""; position: absolute; left: 50%; bottom: calc(100% + 5px);
	transform: translateX(-50%) translateY(5px);
	border: 6px solid transparent; border-top-color: var(--fc-ink, #f2ede4);
	opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 30;
}
.fc-pp-add--incomplete:hover::after, .fc-pp-add--incomplete.fc-hint-show::after,
.fc-pp-add--incomplete:hover::before, .fc-pp-add--incomplete.fc-hint-show::before {
	opacity: 1; transform: translateX(-50%) translateY(0);
}
/* Flash the variation card the customer still needs to pick (on click / touch). */
.fc-pp-var-card.fc-flash { animation: fc-flash 1.15s ease; }
@keyframes fc-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
	25%, 60% { box-shadow: 0 0 0 3px var(--fc-accent, #dd5903); }
}
.fc-pp-add.loading { opacity: .6; pointer-events: none; }
.fc-pp-add[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.fc-pp-unavailable {
	margin: 14px 0 0;
	padding: 12px 15px;
	border-radius: var(--fc-radius, 3px);
	background: rgba(190, 60, 50, .12);
	border: 1px solid rgba(190, 60, 50, .5);
	color: #f0b9b2;
	font-weight: 500;
	text-align: center;
}
.fc-pp-add.fc-added { background: rgba(255, 255, 255, .16) !important; }

/* Loading spinner */
.fc-pp-loading { display: flex; justify-content: center; padding: 80px 0; }
.fc-spinner { width: 38px; height: 38px; border: 2px solid var(--fc-line); border-top-color: var(--fc-ink); border-radius: 50%; animation: fc-spin .8s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }

/* Dark page bg + reveal the transparent overlap header (unchanged) */
body.fc-food-single { background-color: var(--fc-page-bg, var(--dark-bg-color, #0b0b0b)) !important; }

/* Category navigation (featured cards + pills) at the top of a product page.
   Cards/pills styling comes from shop.css (loaded on product pages too). */
.fc-cat-nav { display: block; margin: 0 0 30px; }
.fc-cat-nav .fc-cat-cards { margin-bottom: 16px; }
.fc-cat-nav .fc-pill { text-decoration: none; }
.fc-cat-nav .fc-cat-card { text-decoration: none; }

/* Enable position:sticky for the options panel. The theme's #page wrapper uses
   overflow-x:hidden, which forces overflow-y to compute as `auto` and turns #page
   into a scroll container — that silently disables sticky on all descendants.
   `overflow: clip` prevents the same horizontal overflow WITHOUT creating a
   scroll container, so the sticky panel resolves against the viewport. Scoped to
   food product pages only, so the rest of the site is untouched. */
body.fc-food-single #page { overflow: clip; }
body.fc-food-single .fc-product-wrap { padding-top: var(--fc-header-pad, 118px); }

@media (max-width: 1024px) {
	.fc-pp { grid-template-columns: 1fr; gap: 20px 0; }
	.fc-pp-left { grid-row: auto; order: 2; }
	.fc-pp-main { grid-column: 1; order: 1; }
	.fc-pp-footer { order: 3; }
	.fc-pp-image { margin-bottom: 12px; }
	.fc-pp-image img { max-width: 320px; }
	.fc-pp-title { font-size: 1.5rem; }

	/* Stack the option selectors vertically — full-width rows so long Bulgarian
	   option names are readable and easy to tap. */
	.fc-var-pills { flex-direction: column; gap: 8px; }
	.fc-var-pill { width: 100%; text-align: left; padding: 13px 15px; font-size: .92rem; }

	/* Footer: price above a full-width add-to-cart button. */
	.fc-pp-footer { flex-direction: column; align-items: stretch; gap: 14px; }
	.fc-pp-final { margin-right: auto; align-items: flex-start; text-align: left; }
	.fc-pp-add.button { width: 100%; text-align: center; }
	.fc-qty-stepper { justify-content: center; }
}
.fc-product-wrap { font-family: var(--fc-ff-body, inherit); }

/* Quantity is a real input (typeable) styled like the plain number it replaced. */
input.fc-main-qty {
	width: 3.4em;
	min-width: 42px;
	padding: 2px 0;
	text-align: center;
	font: inherit;
	font-weight: 600;
	color: var(--fc-ink);
	background: transparent;
	border: var(--fc-bw, 1px) solid transparent;
	border-radius: var(--fc-radius, 3px);
	-moz-appearance: textfield;
}
input.fc-main-qty:hover { border-color: var(--fc-line, rgba(242,237,228,.22)); }
input.fc-main-qty:focus {
	outline: none;
	border-color: var(--fc-line-strong);
	background: transparent;
}
input.fc-main-qty::-webkit-outer-spin-button,
input.fc-main-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Option rows on hover — admin-controlled (Food Customizer → Design →
   "Option rows on hover"). The tokens are only emitted when those colours are
   set, so an empty setting simply leaves the row unhighlighted. The nested
   selectors need the extra weight to beat `.fc-opt span { color: … }`. */
.fc-opt:hover {
	background: var(--fc-opt-hov-bg, transparent);
	border-color: var(--fc-opt-hov-line, var(--fc-line));
}
.fc-opt:hover span,
.fc-opt:hover .fc-opt-price,
.fc-opt:hover .fc-qty {
	color: var(--fc-opt-hov-text, var(--fc-ink));
}
.fc-opt:hover .fc-plus,
.fc-opt:hover .fc-minus {
	color: var(--fc-opt-hov-text, var(--fc-ink));
	border-color: var(--fc-opt-hov-text, var(--fc-line));
}

/* Packaging note under the price: present, but clearly secondary to the amount. */
.fc-pp-price-note {
	display: block;
	margin-top: 4px;
	font-size: var(--fc-fs-small, .78rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--fc-muted);
	letter-spacing: .01em;
}