/* Selvia front-end. The all-in-one catalog look is wrapped in :where() so it has
   ZERO specificity — every default below is overridden the moment you style the
   element in Bricks (your edits always win). Tweak --sv-* variables for a quick
   re-theme, or restyle any element/class in the builder. */

.selvia-warning {
	background: #ff6b6b;
	color: #fff;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.45;
}

[data-selvia-volume] {
	cursor: pointer;
}

.selvia-form-message {
	margin-top: 10px;
	font-size: 14px;
}

.selvia-form-message.is-success {
	color: #1a7f37;
}

.selvia-form-message.is-error {
	color: #cf222e;
}

.selvia-warning-wrap .selvia-warning {
	margin: 0;
}

/* ============================================================
   All-in-one catalog app — default DESIGN (matches the mockups).
   Wrapped in :where() = zero specificity = easily overridable in Bricks.
   ============================================================ */
:where( [data-selvia-app] ) {
	--sv-accent: #2f6fb0;
	--sv-navy: #16466f;
	--sv-line: #e3e9f0;
	--sv-ink: #2a3744;
	--sv-muted: #7b8794;
	--sv-soft: #fbfdff;
	color: var( --sv-ink );
}

/* Behaviour (not visual): keep these so blocks act like buttons. */
[data-selvia-app] button,
[data-selvia-app] .selvia-card,
[data-selvia-app] .selvia-tab,
[data-selvia-app] .selvia-vol,
[data-selvia-app] .selvia-back,
[data-selvia-app] .selvia-arrow {
	cursor: pointer;
	font-family: inherit;
}

/* Header */
:where( [data-selvia-app] .selvia-head ) {
	padding-bottom: 16px;
	border-bottom: 1px solid var( --sv-line );
}
:where( [data-selvia-app] .selvia-head-title ) {
	padding: 2px 0 2px 14px;
	border-left: 4px solid var( --sv-accent );
}
:where( [data-selvia-app] .selvia-head-h ) {
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	color: var( --sv-ink );
}
:where( [data-selvia-app] .selvia-head-sub ) {
	font-size: 14px;
	color: var( --sv-muted );
}

/* Tabs */
:where( [data-selvia-app] .selvia-tab ) {
	padding: 10px 18px;
	background: #fff;
	border: 1px solid var( --sv-line );
	border-radius: 8px;
	font-size: 14px;
	color: var( --sv-ink );
	transition: all 0.15s ease;
}
/* Hover — same look as the active tab. */
[data-selvia-app] .selvia-tab:hover {
	background: #6ec6e8;
}
[data-selvia-app] .selvia-tab:hover,
[data-selvia-app] .selvia-tab:hover .selvia-tab-text {
	color: #fff;
}
[data-selvia-app] .selvia-tab:hover .selvia-tab-icon {
	filter: brightness( 0 ) invert( 1 );
}
/* Active tab — normal specificity so it overrides your own Bricks tab styling. */
[data-selvia-app] .selvia-tab.is-active {
	background: #6ec6e8;
}
[data-selvia-app] .selvia-tab.is-active,
[data-selvia-app] .selvia-tab.is-active .selvia-tab-text {
	color: #fff;
}
[data-selvia-app] .selvia-tab.is-active .selvia-tab-icon {
	filter: brightness( 0 ) invert( 1 );
}
:where( [data-selvia-app] .selvia-tab-icon ) {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: center/contain no-repeat;
}
/* Collapse the icon span when no icon URL is set. */
[data-selvia-app] .selvia-tab-icon[style*="url()"],
[data-selvia-app] .selvia-tab-icon[style$="url("],
[data-selvia-app] .selvia-tab-icon:not([style]) {
	display: none;
}

/* ============================================================
   Smoothness — purely additive transitions/animations for tab
   switching, button states, and panel/grid/detail reveals.
   ============================================================ */
@keyframes selvia-fade-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* Smooth the colour/filter swap on tab label + icon (hover & active). */
[data-selvia-app] .selvia-tab-text,
[data-selvia-app] .selvia-tab-icon {
	transition: color 0.18s ease, filter 0.18s ease;
}

/* Smooth state changes on the switchable buttons. */
[data-selvia-app] .selvia-vol,
[data-selvia-app] .selvia-vol .selvia-vol-text,
[data-selvia-app] .selvia-back,
[data-selvia-app] .selvia-arrow {
	transition: background 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Fade-in whenever a section is (re)shown — re-runs each time the JS
   flips it back from display:none, so tab/flavour/volume/detail switches
   all ease in instead of snapping. */
[data-selvia-app] .selvia-panel,
[data-selvia-app] .selvia-flavors,
[data-selvia-app] .selvia-volgrid,
[data-selvia-app] .selvia-detail {
	animation: selvia-fade-in 0.25s ease both;
}

/* Respect users who prefer no motion. */
@media ( prefers-reduced-motion: reduce ) {
	[data-selvia-app] .selvia-panel,
	[data-selvia-app] .selvia-flavors,
	[data-selvia-app] .selvia-volgrid,
	[data-selvia-app] .selvia-detail {
		animation: none;
	}
}

/* Content card */
:where( [data-selvia-app] .selvia-card-wrap ) {
	margin-top: 20px;
	padding: 28px;
	background: #fff;
	border: 1px solid var( --sv-line );
	border-radius: 14px;
}
:where( [data-selvia-app] .selvia-step ) {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 15px;
	font-weight: 600;
	margin: 6px 0 24px;
	color: var( --sv-ink );
}
/* Hide the "choose volume" step title once a product detail is open. */
[data-selvia-app] .selvia-panel.is-detail .selvia-step {
	display: none;
}

/* Tiles (flavours + volumes) */
:where( [data-selvia-app] .selvia-card ) {
	padding: 18px 12px 12px;
	background: var( --sv-soft );
	border: 1px solid var( --sv-line );
	border-radius: 10px;
	color: var( --sv-muted );
	font-size: 14px;
	transition: all 0.15s ease;
}
:where( [data-selvia-app] .selvia-card:hover ) {
	border-color: var( --sv-accent );
	box-shadow: 0 6px 20px rgba( 47, 111, 176, 0.12 );
	transform: translateY( -2px );
}
:where( [data-selvia-app] .selvia-card img ) {
	max-width: 100%;
	height: 130px;
	object-fit: contain;
}

/* Center the tiles — including a partial last row. Bricks renders these as
   `display:grid` with `grid-template-columns: repeat(auto-fill, minmax(150px,1fr))`,
   where a lone tile on the last row stays LEFT-aligned (auto-fit only collapses
   fully-empty columns, and a full first row leaves none to collapse). Switching
   to flex wrapping with `justify-content:center` centers EVERY row, partial ones
   included. Bricks emits `.brxe-ID.brxe-block{display:grid;…}` (specificity 0,2,0),
   so we add `.brxe-block` to reach 0,3,0 and win WITHOUT `!important`. `!important`
   is wrong here: the JS toggles these grids via inline `display:none`, which an
   `!important` flex would override (the flavour grid would never hide → the product
   tile leaks into the volume step). Plain (high-specificity) flex lets inline
   `none` win when hidden, and beats the Bricks grid when shown. */
[data-selvia-app] .selvia-flavors.brxe-block,
[data-selvia-app] .selvia-vol-grid.brxe-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
[data-selvia-app] .selvia-flavors > .selvia-card,
[data-selvia-app] .selvia-vol-grid > .selvia-card {
	flex: 1 1 180px;
	max-width: 320px;
}

/* Back links */
:where( [data-selvia-app] .selvia-back ) {
	border: 0;
	background: none;
	color: var( --sv-muted );
	font-size: 14px;
	text-align: left;
}
:where( [data-selvia-app] .selvia-volgrid > .selvia-back ) {
	margin-bottom: 14px;
}
:where( [data-selvia-app] .selvia-detail > .selvia-back ) {
	width: 100%;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var( --sv-line );
}

/* Detail */
:where( [data-selvia-app] .selvia-detail-media ) {
	position: relative;
	background: var( --sv-soft );
	border-radius: 10px;
	padding: 20px;
	min-height: 300px;
}
:where( [data-selvia-app] .selvia-detail-media img ) {
	max-height: 340px;
	object-fit: contain;
}
/* The bound product photo in the detail view (`[data-selvia-main]`) is a Bricks
   image element that carries `object-fit: cover` + a fixed height. On tall
   bottles (e.g. the energy drinks, ~195×512) `cover` cropped the top and bottom.
   Force `contain` so the whole bottle shows, letter-boxed inside its box. Needs
   real specificity + !important to beat the Bricks per-element rule (the
   `:where()` default above has zero specificity and lost to it). */
[data-selvia-app] .selvia-detail-media img,
[data-selvia-app] [data-selvia-main],
[data-selvia-app] [data-selvia-main] img {
	object-fit: contain !important;
	height: auto !important;
	max-height: 340px;
}
:where( [data-selvia-app] .selvia-arrow ) {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	border: 0;
	background: rgba( 255, 255, 255, 0.85 );
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: var( --sv-accent );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.1 );
	z-index: 2;
}
:where( [data-selvia-app] .selvia-arrow--prev ) { left: 8px; }
:where( [data-selvia-app] .selvia-arrow--next ) { right: 8px; }

:where( [data-selvia-app] .selvia-detail-title ) {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	color: var( --sv-ink );
}
:where( [data-selvia-app] .selvia-detail-desc ) {
	font-size: 13.5px;
	line-height: 1.6;
	color: #50606e;
}
:where( [data-selvia-app] .selvia-vol-label ) {
	font-size: 13px;
	color: var( --sv-muted );
}
:where( [data-selvia-app] .selvia-vol ) {
	padding: 7px 14px;
	background: #fff;
	border: 1px solid var( --sv-line );
	border-radius: 6px;
	font-size: 13px;
	color: var( --sv-ink );
}
/* Active volume button — normal specificity so it overrides your own Bricks
   styling on .selvia-vol, just like the active tab does. */
[data-selvia-app] .selvia-vol.is-active,
[data-selvia-app] .selvia-vol.is-active .selvia-vol-text {
	background: #6ec6e8;
	border-color: #6ec6e8;
	color: #fff;
}
:where( [data-selvia-app] .selvia-order ) {
	margin-top: 6px;
	padding: 13px 28px;
	background: var( --sv-navy );
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.03em;
	align-self: flex-start;
	transition: background 0.15s ease;
}
:where( [data-selvia-app] .selvia-order:hover ) {
	background: var( --sv-accent );
}

/* Sidebar */
:where( [data-selvia-app] .selvia-detail-side ) {
	padding-left: 24px;
	border-left: 1px solid var( --sv-line );
}
:where( [data-selvia-app] .selvia-side-title ) {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 10px;
	color: var( --sv-ink );
}
:where( [data-selvia-app] .selvia-spec ) {
	padding: 7px 0;
	border-bottom: 1px dashed var( --sv-line );
}
:where( [data-selvia-app] .selvia-spec-k ) {
	font-size: 13px;
	font-weight: 600;
	color: var( --sv-accent );
}
:where( [data-selvia-app] .selvia-spec-v ) {
	font-size: 13px;
	text-align: right;
	color: var( --sv-muted );
}
:where( [data-selvia-app] .selvia-note ) {
	font-size: 12px;
	color: var( --sv-muted );
	margin-top: 4px;
}

/* Notes with a heading: markup comes from Fields::note_html() via {selvia_note}.
   The container (.selvia-note-i) is deliberately left unstyled — its look is
   set in Bricks. Only the line break and the bold toggle live here. */
:where( [data-selvia-app] .selvia-note-h ),
:where( [data-selvia-app] .selvia-note-b ) {
	display: block;
}
:where( [data-selvia-app] .selvia-note-b--bold ) {
	font-weight: 700;
}

/* Responsive — normal specificity so it can collapse the Bricks grid on mobile.
   (Only applies under 860px; desktop layout stays fully Bricks-controlled.) */
@media ( max-width: 860px ) {
	[data-selvia-app] .selvia-detail-grid {
		grid-template-columns: 1fr;
	}
	[data-selvia-app] .selvia-detail-side {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var( --sv-line );
		padding-top: 18px;
	}
}

/* ============================================================
   Mobile slider for the initial choice grids (flavours / volumes).
   Built by initChoiceSliders() in selvia-front.js: on phones the
   tiles are reparented into .selvia-slider-track and a .selvia-dots
   pagination row is added. Desktop keeps the wrapped-flex grid.
   ============================================================ */
[data-selvia-app] .selvia-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}
[data-selvia-app] .selvia-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d3dae1;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
[data-selvia-app] .selvia-dot.is-active {
	background: #6ec6e8;
	transform: scale( 1.15 );
}

@media ( max-width: 767px ) {
	[data-selvia-app] .selvia-slider-track {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		/* Base track = full viewport width. This suits the FLAVOUR slider
		   (Соковмісні напої) whose wide horizontal labels want the room.
		   !important beats a page-level Bricks custom-CSS rule
		   `[data-selvia-app] .selvia-slider-track{width:18.438rem}` that would
		   otherwise apply to every track. The VOLUME slider opts back OUT of full
		   width below (design calls for a narrow, centred 18.438rem card). */
		width: 100% !important;
		max-width: 100% !important;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	[data-selvia-app] .selvia-slider-track::-webkit-scrollbar {
		display: none;
	}
	/* VOLUME slider (ОБЕРІТЬ ОБ'ЄМ — bottles): a narrow 18.438rem (≈295px) card
	   centred on screen, per the design. Higher specificity + !important beats the
	   full-width base rule above. `margin-inline:auto` centres the narrow track
	   robustly (the original relied on flex centring that iOS Safari dropped, so
	   the track sat left and the cards looked "pushed left"). max-width:100% keeps
	   it safe on phones narrower than 295px. */
	[data-selvia-app] [data-selvia-volgrid] .selvia-slider-track {
		width: 18.438rem !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	/* One card == exactly one viewport. `min-width:0` + `width:100%` cancel the
	   desktop-tuned Bricks widths/min-widths on the flavour tile (juice labels
	   carry width/min-width:19.375rem ≈ 310px) that made the card wider than the
	   phone, so its right edge got clipped by the track. `scroll-snap-align:start`
	   (not `center`) is the robust choice for full-width slides: `center` on a
	   slide the exact width of the scroller makes iOS Safari rest between two
	   cards, showing a sliver of the neighbour and looking shifted. `start` snaps
	   each card flush-left = clean paging on every browser. */
	[data-selvia-app] .selvia-slider-track > .selvia-card {
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		/* The Bricks flavour card is `flex-direction:column` but inherits the
		   default `flex-wrap:wrap` and a FIXED height (9.688rem ≈ 155px). On the
		   phone slider the image switches to `height:auto`, so the WIDE juice
		   labels (Tarragon / Лимонад / Мохіто — 2× source images) scale ~5px
		   TALLER than the narrow ones. That tipped image+name past the 155px box,
		   and `flex-wrap:wrap` spilled the NAME into a second column to the RIGHT
		   of the image (text "flew off" sideways) instead of sitting below it.
		   Force single-column: never wrap, and let the card grow to its content so
		   the label always sits centred UNDER the image. */
		flex-wrap: nowrap;
		height: auto;
	}
	/* Larger bottle / flavour image so a single card fills the phone. The
	   `min-width:0` drops the Bricks juice-label min-width on the <img> so the
	   picture scales down to fit and stays centred instead of overflowing.
	   `max-width:90%` lets the wide flavour labels grow close to the full card
	   width (bottles are height-bound by max-height, so this only enlarges the
	   labels, which read too small at the old 70%). */
	[data-selvia-app] .selvia-slider-track > .selvia-card img {
		height: auto;
		max-height: 48vh;
		width: auto;
		min-width: 0;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	/* Line tabs (Selvia негазована / сильногазована / соки / енергетики) —
	   a single horizontally-scrollable row instead of wrapping. */
	[data-selvia-app] .selvia-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	[data-selvia-app] .selvia-tabs::-webkit-scrollbar {
		display: none;
	}
	[data-selvia-app] .selvia-tabs > .selvia-tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Energy-drinks flavour slider only. Energy photos are tall VERTICAL bottles;
	   juices are wide HORIZONTAL labels, so the Bricks flavour card + image carry
	   a FIXED height (9.688rem / 6.875rem) tuned for those labels. The tall bottle
	   overflowed that fixed box and the slider (overflow-y: hidden) clipped it.
	   For the energy line only: block-flow the grid (dots drop below), free the
	   card from its fixed height so it grows to the image, and size the bottle to
	   fit — matching the "choose volume" step. Juice/water sliders stay untouched. */
	[data-selvia-app] [data-selvia-panel][data-line="Енергетичні напої"] .selvia-flavors {
		display: block;
	}
	/* Force the track + card to fill the panel width. The Bricks flavour card
	   carries width:19.375rem, so the flex track shrink-wrapped to it and sat
	   left-aligned, leaving a gap on the right. Full width → the card fills the
	   viewport and the centered bottle lands dead-centre. */
	[data-selvia-app] [data-selvia-panel][data-line="Енергетичні напої"] .selvia-slider-track {
		width: 100%;
	}
	[data-selvia-app] [data-selvia-panel][data-line="Енергетичні напої"] .selvia-slider-track > .selvia-card {
		height: auto;
		width: 100%;
		min-width: 0;
		padding: 18px 12px 12px;
	}
	[data-selvia-app] [data-selvia-panel][data-line="Енергетичні напої"] .selvia-slider-track > .selvia-card img {
		height: auto;
		max-height: 42vh;
		width: auto;
		max-width: 100%;
		/* Bricks sets min-width: 19.375rem on this image (tuned for the wide juice
		   label); left as-is it forces the bottle wider than the card and pushes it
		   off-centre. Reset it so the card can center the bottle. */
		min-width: 0;
		margin-left: auto;
		margin-right: auto;
		object-fit: contain;
	}
}

/* ============================================================
   Desktop — energy-drinks FLAVOUR grid only (Classic / Grape).
   The Bricks flavour card + image carry a fixed min-width (~232px)
   tuned for the WIDE horizontal juice labels. Energy photos are tall
   VERTICAL bottles, so `object-fit:contain` inside that wide-but-short
   box shrank the bottle to ~82px tall — a tiny bottle marooned in a
   wide empty card. Reshape the energy flavour card into the same
   PORTRAIT proportions as the "choose volume" tile so the bottle fills
   it. Scoped to the energy line only; juice/water flavour cards and the
   mobile slider (≤767px, handled above) stay untouched. */
@media ( min-width: 768px ) {
	/* Match the "choose volume" tile gap (1.5rem) instead of the flavour
	   grid's default 16px. */
	[data-selvia-app] [data-selvia-panel][data-line="Енергетичні напої"] .selvia-flavors {
		gap: 1.5rem;
	}
	[data-selvia-app] [data-selvia-panel][data-line="Енергетичні напої"] .selvia-flavors > .selvia-card {
		min-width: 0;
		width: 12.5rem;
		max-width: 12.5rem;
		height: auto;
		padding: 0.75rem;
		background-color: #F0F7FD;
		justify-content: flex-end;
	}
	/* Kill the juice-tuned min-width on the image and let the tall bottle
	   grow to the volume-tile height, centred in the card. */
	[data-selvia-app] [data-selvia-panel][data-line="Енергетичні напої"] .selvia-flavors > .selvia-card img {
		min-width: 0;
		width: auto;
		max-width: 100%;
		height: 12.5rem;
		object-fit: contain;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   Floating "scroll to top" button — fixed bottom-right, 3rem square,
   always visible on desktop, hidden on phones (≤767px). Click scrolls
   to the top of the page (handler in selvia-front.js).
   ============================================================ */
.selvia-to-top {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	filter: drop-shadow( 0 6px 16px rgba( 0, 0, 0, 0.18 ) );
	/* Hidden until scrolled past the hero (JS toggles .is-visible). */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( 12px );
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.selvia-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY( 0 );
}
.selvia-to-top.is-visible:hover {
	transform: translateY( -3px );
}
.selvia-to-top svg {
	width: 100%;
	height: 100%;
	display: block;
}
@media ( max-width: 767px ) {
	.selvia-to-top {
		display: none !important;
	}
}
/* Lift Google's reCAPTCHA v3 badge above the scroll-to-top button (desktop). */
@media ( min-width: 768px ) {
	.grecaptcha-badge {
		bottom: 5.5rem !important;
	}
}

/* Honeypot — keep it out of view */
.selvia-order-form input[name="hp"] {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}