/**
 * WA FiboSearch Rail — standalone autocomplete box.
 *
 * Self-contained styling for our own box (FiboSearch CSS is dequeued).
 *
 * COLOURS come from the shop's own tokens (--primary, --accent, --base, …),
 * measured as live on mobilky.sk. Nothing here introduces a new hue: the two
 * shades the palette lacks — a darker brand for headings and a darker lime to
 * sit under the cart button — are DERIVED from those tokens with color-mix, so
 * a retheme carries the panel with it. Every derived value has a literal
 * fallback for engines without color-mix.
 *
 * ALIGNMENT: the panel is full-bleed (background and shadow span the viewport)
 * while its content lines up with the site container. Those numbers are not a
 * guess — .oxy-header-container measures max-width:1340px with a constant 12px
 * padding-inline at every width from 390 to 1920, so the content edge is
 * `max(12px, (100% - 1340px)/2 + 12px)` and the panel uses exactly that.
 *
 * TOKENS: every tunable visual value below is a CSS custom property, declared
 * once on `.wa-ac-box` (the panel), with the search field's own tokens declared
 * separately on `.wa-sf-form` — two independent subtrees this stylesheet paints
 * — each with its current value as the fallback/default. The defaults declared in this
 * file are the single source of truth shipped with the plugin; the admin
 * "Štýly" screen (option wa_fibo_styles) can override any of them by printing
 * an inline `style` block after this file, so its declarations win on the
 * cascade without this file ever needing to change.
 */

.wa-ac-box {
	/* Brand */
	--wa-ac-brand: var( --primary, #623385 );
	--wa-ac-brand-hover: var( --primary-hover, #6f3a98 );
	/* Headings + price. Fallback = --primary mixed 78% with black. */
	--wa-ac-brand-dark: #4c2868;

	/* The accent marks: the rule under a heading, the bar on an active product
	   row, the focus ring. The shop already pairs purple with lime (that is what
	   every add-to-cart button is), so the accent token is the on-brand answer
	   and no new hue has to be minted. */
	--wa-ac-mark: var( --accent, #a0c801 );

	/* Cart button. The 2px base has to be DARKER than the face; --accent-hover
	   is lighter, so it cannot serve here. Fallback = --accent 82% with black. */
	--wa-ac-cart: var( --accent, #a0c801 );
	--wa-ac-cart-hover: var( --accent-hover, #b7e401 );
	--wa-ac-cart-shadow: #83a401;

	--wa-ac-ink: var( --base, #444 );
	--wa-ac-muted: var( --shade-medium, #6b7280 );
	--wa-ac-line: var( --secondary, #efebf3 );
	--wa-ac-line-soft: var( --primary-ultra-light, #f3edf8 );
	--wa-ac-tint: var( --primary-ultra-light, #f3edf8 );

	/* Neutral surfaces, on-brand text and the two hover-overlay tints — they
	   were already slightly different literals (.05 vs .06) at their two sites,
	   so each keeps its own token instead of being forced to a shared value. */
	--wa-ac-brand-light: var( --primary-light, #dbc8ea );
	--wa-ac-surface: #fff;
	--wa-ac-on-brand: #fff;
	--wa-ac-scrollbar-thumb: #d4d4d8;
	--wa-ac-scrollbar-thumb-hover: #a1a1aa;
	--wa-ac-overlay-soft: rgba( 0, 0, 0, .05 );
	--wa-ac-overlay: rgba( 0, 0, 0, .06 );

	/* Site container, measured — NOT var(--container): that token does not exist
	   on this install, so relying on it silently fell back to 1300px and put the
	   panel 4–8px out of line with the header at every width. */
	--wa-ac-container: 1340px;
	--wa-ac-gutter: 12px;
	--wa-ac-pad: max( var( --wa-ac-gutter ), calc( ( 100% - var( --wa-ac-container ) ) / 2 + var( --wa-ac-gutter ) ) );

	/* Panel & columns */
	--wa-ac-panel-bg: var( --wa-ac-surface, #fff );
	--wa-ac-panel-border-w: 1px;
	--wa-ac-panel-radius: 0;
	--wa-ac-panel-shadow: 0 24px 48px -24px rgba( 0, 0, 0, .28 );
	--wa-ac-col-gap: 0;
	--wa-ac-col-pad: 18px 20px 22px;
	--wa-ac-col-max-h: 66vh;
	--wa-ac-col-divider-w: 1px;
	--wa-ac-scrollbar-w: 8px;
	--wa-ac-state-pad: 28px 24px;
	--wa-ac-slot-gap: 20px;
	--wa-ac-close-top: 10px;
	--wa-ac-close-size: 34px;
	--wa-ac-close-icon-size: 17px;
	--wa-ac-close-hover-bg: var( --wa-ac-overlay );

	/* Radius scale (xs/s/m/l/pill) */
	--wa-ac-radius-xs: 6px;
	--wa-ac-radius-s: 8px;
	--wa-ac-radius-m: 9px;
	--wa-ac-radius-l: 10px;
	--wa-ac-radius-pill: 999px;

	/* Typography */
	--wa-ac-font-size-base: 14px;
	--wa-ac-focus-w: 2.5px;
	--wa-ac-focus-offset: 2px;

	/* Section headings */
	--wa-ac-title-gap: 10px;
	--wa-ac-title-mb: 11px;
	--wa-ac-title-pb: 7px;
	--wa-ac-title-rule-w: 2px;
	--wa-ac-title-fs: 12px;
	--wa-ac-title-fw: 800;
	--wa-ac-title-ls: .11em;
	--wa-ac-title-lh: 1.2;
	--wa-ac-title-color: var( --wa-ac-brand-dark );
	--wa-ac-title-mark-w: 32px;
	--wa-ac-title-mark-h: 2px;
	--wa-ac-title-fs-mid: 13px;
	--wa-ac-pcount-fw: 600;
	--wa-ac-clear-fs: 12px;
	--wa-ac-clear-fw: 600;
	--wa-ac-clear-pad: 2px 6px;
	--wa-ac-clear-hover-bg: var( --wa-ac-overlay-soft );

	/* Pills (recent / popular / promoted) */
	--wa-ac-pill-gap: 7px;
	--wa-ac-pill-pad: 6px 13px;
	--wa-ac-pill-bg: var( --wa-ac-surface, #fff );
	--wa-ac-pill-border-w: 1.5px;
	--wa-ac-pill-fs: 13px;
	--wa-ac-pill-fw: 500;
	--wa-ac-pill-lh: 1.2;
	--wa-ac-pill-hover-shadow: 0 4px 10px -6px rgba( 0, 0, 0, .55 );
	--wa-ac-pill-fw-promoted: 700;

	/* Lists (categories, brands) */
	--wa-ac-list-gap: 10px;
	--wa-ac-list-pad: 8px 12px;
	--wa-ac-list-fs: 14px;
	--wa-ac-list-fw: 500;
	--wa-ac-list-hover-bg: var( --wa-ac-surface, #fff );
	--wa-ac-list-hover-pad-l: 16px;
	--wa-ac-list-hover-shadow: 0 4px 14px -8px rgba( 0, 0, 0, .45 );
	--wa-ac-count-minw: 34px;
	--wa-ac-count-fs: 12px;
	--wa-ac-count-fw: 700;
	--wa-ac-count-border-w: 1px;
	--wa-ac-count-pad: 2px 7px;
	--wa-ac-brand-ic-size: 14px;

	/* Products */
	--wa-ac-product-gap: 14px;
	--wa-ac-product-pad: 8px 14px;
	--wa-ac-product-divider-w: 1px;
	--wa-ac-product-mark-inset: 7px;
	--wa-ac-product-mark-w: 3px;
	--wa-ac-product-mark-radius: 3px;
	--wa-ac-product-mark-scale: scaleY( .4 );
	--wa-ac-product-hover-bg: var( --wa-ac-tint );
	--wa-ac-product-hover-shadow: 0 6px 18px -8px rgba( 0, 0, 0, .28 );
	--wa-ac-thumb-size: 54px;
	--wa-ac-thumb-border-w: 1px;
	--wa-ac-thumb-zoom: scale( 1.08 );
	--wa-ac-pname-max-h: 2.6em;
	--wa-ac-pname-fs: 14px;
	--wa-ac-pname-fw: 600;
	--wa-ac-pname-lh: 1.3;
	--wa-ac-price-pad-l: 14px;
	--wa-ac-price-fs: 17px;
	--wa-ac-price-fw: 800;
	--wa-ac-price-ls: -.02em;
	--wa-ac-price-color: var( --wa-ac-brand-dark );
	--wa-ac-price-old-fw: 400;
	--wa-ac-price-old-fs: 12.5px;
	--wa-ac-price-old-gap: 6px;
	--wa-ac-tab-gap: 8px;
	--wa-ac-tab-mb: 12px;
	--wa-ac-tab-active-bg: var(--wa-ac-brand);
	--wa-ac-tab-active-fg: var(--wa-ac-on-brand, #fff);
	--wa-ac-tab-active-border: var(--wa-ac-brand);

	/* Buttons */
	--wa-ac-btn-gap: 8px;
	--wa-ac-btn-h: 40px;
	--wa-ac-btn-minw: 142px;
	--wa-ac-btn-pad-x: 18px;
	--wa-ac-btn-fs: 14px;
	--wa-ac-btn-fw: 700;
	--wa-ac-btn-base-h: 2px;
	--wa-ac-btn-icon-size: 17px;
	--wa-ac-btn-hover-shadow: 0 8px 16px -6px rgba( 0, 0, 0, .35 );
	--wa-ac-btn-outline-w: 2px;
	--wa-ac-loading-opacity: .7;
	--wa-ac-showall-mt: 14px;
	--wa-ac-showall-gap: 12px;
	--wa-ac-showall-h: 50px;
	--wa-ac-showall-fs: 15.5px;
	--wa-ac-showall-hover-shadow: 0 12px 24px -12px rgba( 0, 0, 0, .6 );
	--wa-ac-showall-num-hover-bg: rgba( 255, 255, 255, .22 );
	--wa-ac-showall-arrow-x: 4px;
	--wa-ac-showall-icon-size: 19px;
	--wa-ac-showall-num-fs: 13px;
	--wa-ac-showall-num-pad: 3px 10px;

	/* Motion */
	--wa-ac-t-dur: .18s;
	--wa-ac-ease: cubic-bezier( .4, 0, .2, 1 );
	--wa-ac-t: var( --wa-ac-t-dur ) var( --wa-ac-ease );
	--wa-ac-thumb-zoom-t: .25s cubic-bezier( .4, 0, .2, 1 );
	--wa-ac-lift-s: translateY( -1px );
	--wa-ac-lift-m: translateY( -2px );
	--wa-ac-press: translateY( 1px );
	--wa-ac-close-hover-rotate: rotate( 90deg );
	--wa-ac-progress-h: 2px;
	--wa-ac-progress-fade: .15s ease;
	--wa-ac-progress-width: 40%;
	--wa-ac-progress-speed: 1.1s;

	/* Tablet / mobile */
	--wa-ac-tablet-rail-w: 240px;
	--wa-ac-tablet-row-min: 240px;
	--wa-ac-tablet-row-gap: 0 32px;
	--wa-ac-narrow-col-pad: 12px 14px;
	--wa-ac-narrow-list-fs: 12.5px;
	--wa-ac-narrow-pills-pb: 4px;
	--wa-ac-narrow-scrollbar-h: 6px;
	--wa-ac-narrow-pill-pad: 4px 9px;
	--wa-ac-narrow-pill-fs: 11.5px;
	--wa-ac-mobile-max-h: 80vh;
	--wa-ac-mobile-slot-pad-y: 14px;
	--wa-ac-mobile-product-gap: 10px;
	--wa-ac-mobile-product-pad: 8px 12px;
	--wa-ac-mobile-thumb-size: 40px;
	--wa-ac-mobile-pname-fs: 13px;
	--wa-ac-mobile-price-fs: 14px;
	--wa-ac-mobile-price-pad-l: 8px;
	--wa-ac-mobile-btn-pad-x: 12px;
	--wa-ac-mobile-btn-fs: 13px;
}

/* ---------------------------------------------------------------------------
   Search field ([wa_search_field]).

   Its own root, because the field is a separate subtree from the panel — see
   Styles\Registry::roots(). Defaults reproduce the header design this site
   carries in its theme today, so the theme's rules can be deleted in phase 4
   without anything moving.
--------------------------------------------------------------------------- */
.wa-sf-form {
	--wa-sf-height: 4.8rem;
	--wa-sf-pad-x: var( --space-m, 2.4rem );
	--wa-sf-pad-y: 10px;
	--wa-sf-radius: var( --radius-m, 1rem );
	--wa-sf-wrap-pad: 0.8rem;
	--wa-sf-wrap-radius: var( --radius-m, 1rem );
	--wa-sf-bg: #fff;
	--wa-sf-ink: var( --base, #444 );
	--wa-sf-placeholder: var( --shade-medium, #6b7280 );
	--wa-sf-border-w: 2px;
	/* Prstenec v pokoji kreslí `box-shadow`, nie rámček — presne ako produkčné
	   pole. Rozdiel je viditeľný: rámček by pri `box-sizing: border-box` ukrojil
	   2 px z bielej plochy dovnútra, tieň leží mimo nej, takže pole zostáva
	   celých 4,8 rem vysoké. Rámček je preto priehľadný a farbu dostane až vo
	   fokuse, kde produkcia tieň naopak zháša. */
	--wa-sf-border: transparent;
	--wa-sf-ring: var( --primary-light, #dbc8ea );
	--wa-sf-border-focus: var( --primary, #623385 );
	/* Pole nededí veľkosť písma zo stránky: produkčné má 1,4 rem a riadkovanie
	   1,15, kým telo webu 1,6 rem / 1,5. Zdedené písmo pole zväčšovalo. */
	--wa-sf-font-size: 1.4rem;
	--wa-sf-line-height: 1.15;
	--wa-sf-submit-size: 33px;
	--wa-sf-submit-inset: 15px;
	/* 18 px, nie 20 — rovnako ako produkčná lupa. */
	--wa-sf-icon-size: 18px;
	--wa-sf-icon: var( --primary, #623385 );
}

/* Obal je o dvojnásobok svojho odsadenia vyšší než samotné pole
   (4,8 rem + 2 × 0,8 rem = 6,4 rem). Kým formulár tých 16 px navyše priznával
   výške, rástli smerom NADOL a pole sedelo o 8 px nižšie než ikona účtu
   a košík vedľa neho. Záporný okraj tú rezervu z toku odoberie na oboch
   stranách, takže formulár zaberá presne toľko miesta ako pole a jeho stred
   sadne na stred slotu — v pružnom aj blokovom rodičovi rovnako.

   Prečo nie `height: 100%` s centrovaním: hostiteľský `.ct-shortcode` má na
   tomto webe spodné odsadenie 22 px, takže percento by sa vyhodnotilo z 26 px
   a pole by vyskočilo o 11 px hore. Rezerva je naša, počítame ju z vlastného
   tokenu a na tvar hostiteľa sa nespoliehame. */
.wa-sf-form {
	width: 100%;
	margin: calc( -1 * var( --wa-sf-wrap-pad ) ) 0;
}

/* The wrapper the panel visually continues from: rounded on top only, so an
   open panel meets it seamlessly. Also the positioning context for the submit. */
.wa-sf-field {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	/* `--wa-sf-height` je výška SAMOTNÉHO poľa; obal k nej pridáva svoje
	   odsadenie na oboch stranách. Kým tu stálo len `var( --wa-sf-height )`,
	   obal meral 4,8 rem, pole z neho dostalo 4,8 rem − 2 × 0,8 rem = 3,2 rem
	   a bolo o tretinu nižšie než na produkcii. */
	height: calc( var( --wa-sf-height ) + 2 * var( --wa-sf-wrap-pad ) );
	padding: var( --wa-sf-wrap-pad );
	border-radius: var( --wa-sf-wrap-radius ) var( --wa-sf-wrap-radius ) 0 0;
	display: flex;
	align-items: center;
}

/* Visible to screen readers only. Not `display: none` — that would hide it from
   them too, which is the entire point of having a label here. */
.wa-sf-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* Rovnaký dôvod ako pri tlačidle nižšie: na stránkach s triedou `woocommerce`
   si téma vešia vzhľad na `.woocommerce input[type="search"]` (0,2,1) — výška
   `auto`, 1 px sivý rámček, 4 px zaoblenie, odsadenie 8/12 px. Holé
   `.wa-sf-input` (0,1,0) tomu podľahlo a pole bolo na väčšine webu 34 px
   namiesto 48 px. `.wa-sf-field .wa-sf-input[type="search"]` má (0,3,0). */
.wa-sf-field .wa-sf-input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding-block: var( --wa-sf-pad-y );
	padding-inline: var( --wa-sf-pad-x );
	border: var( --wa-sf-border-w ) solid var( --wa-sf-border );
	box-shadow: 0 0 0 var( --wa-sf-border-w ) var( --wa-sf-ring );
	border-radius: var( --wa-sf-radius );
	background: var( --wa-sf-bg );
	color: var( --wa-sf-ink );
	font: inherit;
	/* Až za `font: inherit` — skratka by veľkosť aj riadkovanie prepísala späť. */
	font-size: var( --wa-sf-font-size );
	line-height: var( --wa-sf-line-height );
	/* The browser's own search affordances fight the design and differ per
	   engine; the field brings its own clear/submit behaviour. */
	appearance: none;
}

.wa-sf-field .wa-sf-input[type="search"]::placeholder {
	color: var( --wa-sf-placeholder );
	opacity: 1; /* Firefox dims placeholders by default. */
}

.wa-sf-field .wa-sf-input[type="search"]::-webkit-search-cancel-button,
.wa-sf-field .wa-sf-input[type="search"]::-webkit-search-decoration {
	appearance: none;
}

.wa-sf-field .wa-sf-input[type="search"]:focus {
	outline: none;
	border-color: var( --wa-sf-border-focus );
	/* Vo fokuse prstenec zhasína a jeho miesto preberá farebný rámček. */
	box-shadow: none;
}

/* Keyboard users must still see focus. :focus-visible only, so a mouse click
   does not draw a ring the design never had. */
.wa-sf-field .wa-sf-input[type="search"]:focus-visible {
	outline: 2px solid var( --wa-sf-border-focus );
	outline-offset: 2px;
}

/* Selektor je zámerne konkrétnejší, než by tvar kódu vyžadoval.
   Pole je v hlavičke, teda na každej stránke — a na tých, kde WooCommerce pridá
   telu triedu `woocommerce`, si téma vešia vzhľad na `.woocommerce
   button[type=submit]` (0,2,1). Samotné `.wa-sf-submit` (0,1,0) tomu podľahlo:
   tlačidlo dostalo tyrkysové pozadie, 4 px zaoblenie, rámček a odsadenie
   16/24 px, čím narástlo na 50×34 px, text zbelel — a lupa, ako flexová
   položka v pretečenom tlačidle, sa zmrštila na nulovú šírku. Na domovskej to
   nebolo vidieť, lebo tá triedu `woocommerce` nemá.

   `.wa-sf-form .wa-sf-submit[type="submit"]` má (0,3,0), takže vyhráva bez
   `!important` — a vyhráva aj nad čímkoľvek, čo si téma zavesí na holé
   `button`. Vlastnosti nižšie nie sú kozmetika: každá z nich je tá, ktorú
   téma prepisovala. */
.wa-sf-form .wa-sf-submit[type="submit"] {
	position: absolute;
	top: 50%;
	right: var( --wa-sf-submit-inset );
	transform: translateY( -50% );
	width: var( --wa-sf-submit-size );
	height: var( --wa-sf-submit-size );
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: transparent;
	color: var( --wa-sf-icon );
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.wa-sf-form .wa-sf-submit[type="submit"]:hover,
.wa-sf-form .wa-sf-submit[type="submit"]:focus-visible {
	background: var( --accent-ultra-light, #faffe6 );
	/* Prstenec tej istej farby — bez neho je podsvietenie o 4 px menšie než
	   na produkcii, lebo tam ho kruh dostáva navyše k pozadiu. */
	box-shadow: 0 0 0 2px var( --accent-ultra-light, #faffe6 );
}

.wa-sf-icon {
	width: var( --wa-sf-icon-size );
	height: var( --wa-sf-icon-size );
	display: block;
	/* Lupa je flexová položka v tlačidle. Bez tohto ju stačí pretiecť
	   odsadením zvonku a zmrští sa na nulu namiesto toho, aby tlačidlo
	   pretiekla — čo presne robila téma na WooCommerce stránkach. */
	flex: none;
}

.wa-ac-box {
	position: absolute;
	/* Sit in the theme's z-index scale as the search-suggestions panel: above the
	   backdrop (38) / native search-panel (46) and page content, but BELOW the
	   mega menu (.mega = 60) and header (100) so opening the nav covers it. */
	z-index: 50;
	display: none;
	/* NOTE: grid-template-columns is set INLINE by the JS from the column config
	   (any number of columns, any widths). Never declare it here for desktop. */
	gap: var( --wa-ac-col-gap );
	background: var( --wa-ac-panel-bg );
	padding-inline: var( --wa-ac-pad );
	border: 0;
	border-top: var( --wa-ac-panel-border-w ) solid var( --wa-ac-line );
	border-bottom: var( --wa-ac-panel-border-w ) solid var( --wa-ac-line );
	border-radius: var( --wa-ac-panel-radius );
	box-shadow: var( --wa-ac-panel-shadow );
	/* Required, not cosmetic: it is what cuts the rails' tint flood off at the
	   viewport edge. Column scrolling lives on .wa-ac-col, so nothing is lost. */
	overflow: hidden;
	box-sizing: border-box;
	font-size: var( --wa-ac-font-size-base );
	color: var( --wa-ac-ink );
}

@supports ( color: color-mix( in srgb, red 50%, black ) ) {
	.wa-ac-box {
		--wa-ac-brand-dark: color-mix( in srgb, var( --primary, #623385 ) 78%, black );
		--wa-ac-cart-shadow: color-mix( in srgb, var( --accent, #a0c801 ) 82%, black );
	}
}

.wa-ac-box.wa-ac-open {
	display: grid;
}
/* Recent-searches-only state (empty/short query): single compact column. */
.wa-ac-box.wa-ac-recent-only.wa-ac-open {
	display: block;
}
.wa-ac-box.wa-ac-recent-only .wa-ac-col {
	border: 0;
	background: var( --wa-ac-surface );
	box-shadow: none;
}

/* Full-bleed variant: content runs edge to edge (small safety gutter only)
   instead of being constrained to the site container. */
.wa-ac-box.wa-ac-box--full {
	--wa-ac-pad: var( --wa-ac-gutter );
}

/* Indeterminate top progress bar — shown only while a fetch is in flight
   (class wa-ac-busy). The box keeps its results, so nothing below flickers. */
.wa-ac-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var( --wa-ac-progress-h );
	z-index: 6;
	opacity: 0;
	transition: opacity var( --wa-ac-progress-fade );
	background: linear-gradient( 90deg, transparent, var( --wa-ac-mark ), transparent );
	background-size: var( --wa-ac-progress-width ) 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}
.wa-ac-box.wa-ac-busy::before {
	opacity: 1;
	animation: wa-ac-bar var( --wa-ac-progress-speed ) linear infinite;
}
@keyframes wa-ac-bar {
	0%   { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}

/* ---------------------------------------------------------------------------
   Columns.

   Position-agnostic: any column may hold any widget, so they all get the same
   box treatment and independent scroll (the box height stays stable as results
   change: it never grows past the viewport or jumps between queries).
   min-width: 0 on every column so a long product title cannot blow out a track.
--------------------------------------------------------------------------- */
.wa-ac-col {
	min-width: 0;
	padding: var( --wa-ac-col-pad );
	box-sizing: border-box;
	background: var( --wa-ac-surface );
	max-height: var( --wa-ac-col-max-h );
	overflow-y: auto;
	overscroll-behavior: contain;
}
.wa-ac-col::-webkit-scrollbar {
	width: var( --wa-ac-scrollbar-w );
}
.wa-ac-col::-webkit-scrollbar-thumb {
	background: var( --wa-ac-scrollbar-thumb );
	border-radius: var( --wa-ac-radius-s );
}

/*
 * Rails — the tinted side lists.
 *
 * "Rail" is decided in the RENDERER (a column that drew no products widget) and
 * arrives as a class, deliberately not from a measured width: on a tablet the
 * right rail is laid out across the full container, and a width threshold would
 * strip its tint exactly where the design calls for it.
 *
 * The tint stops at the column. The reference design bled it out to the viewport
 * edge, which is quiet at the 1440px it was drawn for (a 62px lip) but scales
 * with the gutter, not with the panel: at 1920 it is 302px and at 2560 it is
 * 622px — a slab of colour wider than the 240px rail it is supposed to belong
 * to. Tinting exactly the two rails is what the arrangement is meant to read as.
 */
.wa-ac-col--rail {
	background: var( --wa-ac-tint );
}

/* The products column keeps a white face and picks up a hairline only on the
   side where a rail actually sits, so a template without rails gets no stray
   borders. */
.wa-ac-col--rail + .wa-ac-col:not( .wa-ac-col--rail ) {
	border-left: var( --wa-ac-col-divider-w ) solid var( --wa-ac-line );
}
.wa-ac-col:not( .wa-ac-col--rail ):has( + .wa-ac-col--rail ) {
	border-right: var( --wa-ac-col-divider-w ) solid var( --wa-ac-line );
}

/* States (loading / no results / error) */
.wa-ac-state {
	grid-column: 1 / -1;
	padding: var( --wa-ac-state-pad );
	color: var( --wa-ac-muted );
	text-align: center;
}

/* One widget = one slot. A plain wrapper on desktop (no box of its own, so the
   column looks exactly as before), but it is the element the generated device
   stylesheet addresses: [data-w="products"] { order / display }. Without it the
   products widget would be three loose siblings and could not move as a unit. */
.wa-ac-slot {
	min-width: 0;
}
.wa-ac-slot + .wa-ac-slot {
	margin-top: var( --wa-ac-slot-gap );
}

/* ---------------------------------------------------------------------------
   Section headings
--------------------------------------------------------------------------- */
.wa-ac-block {
	margin-bottom: 0;
}
.wa-ac-title {
	display: flex;
	align-items: center;
	gap: var( --wa-ac-title-gap );
	margin: 0 0 var( --wa-ac-title-mb );
	padding-bottom: var( --wa-ac-title-pb );
	border-bottom: var( --wa-ac-title-rule-w ) solid var( --wa-ac-line );
	position: relative;

	font-size: var( --wa-ac-title-fs );
	font-weight: var( --wa-ac-title-fw );
	letter-spacing: var( --wa-ac-title-ls );
	text-transform: uppercase;
	color: var( --wa-ac-title-color );
	line-height: var( --wa-ac-title-lh );
}
/* The short accent rule that sits on top of the heading's own underline. */
.wa-ac-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: var( --wa-ac-title-mark-w );
	height: var( --wa-ac-title-mark-h );
	background: var( --wa-ac-mark );
}
.wa-ac-title--mid {
	font-size: var( --wa-ac-title-fs-mid );
}
.wa-ac-pcount {
	color: var( --wa-ac-muted );
	font-weight: var( --wa-ac-pcount-fw );
}
.wa-ac-cats-head {
	align-items: flex-start;
}

.wa-ac-clear {
	margin-left: auto;
	font-size: var( --wa-ac-clear-fs );
	font-weight: var( --wa-ac-clear-fw );
	letter-spacing: 0;
	text-transform: none;
	color: var( --wa-ac-muted );
	text-decoration: none;
	padding: var( --wa-ac-clear-pad );
	border-radius: var( --wa-ac-radius-xs );
	transition: color var( --wa-ac-t ), background var( --wa-ac-t );
}
.wa-ac-clear:hover {
	color: var( --wa-ac-brand );
	background: var( --wa-ac-clear-hover-bg );
}

/* ---------------------------------------------------------------------------
   Pills (recent / popular / promoted)
--------------------------------------------------------------------------- */
.wa-ac-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wa-ac-pill-gap );
}
.wa-ac-pill {
	display: inline-block;
	padding: var( --wa-ac-pill-pad );
	border-radius: var( --wa-ac-radius-pill );
	background: var( --wa-ac-pill-bg );
	border: var( --wa-ac-pill-border-w ) solid var( --wa-ac-line );
	color: var( --wa-ac-ink );
	font-size: var( --wa-ac-pill-fs );
	font-weight: var( --wa-ac-pill-fw );
	line-height: var( --wa-ac-pill-lh );
	text-decoration: none;
	transition: border-color var( --wa-ac-t ), color var( --wa-ac-t ), transform var( --wa-ac-t ), box-shadow var( --wa-ac-t );
}
.wa-ac-pill:hover,
.wa-ac-pill:focus-visible {
	border-color: var( --wa-ac-brand );
	color: var( --wa-ac-brand );
	transform: var( --wa-ac-lift-s );
	box-shadow: var( --wa-ac-pill-hover-shadow );
}
/* The visitor's own history reads a shade softer than the shop's suggestions. */
.wa-ac-pill--personal {
	border-color: var( --wa-ac-brand-light );
}
/* A paid/curated suggestion has to be distinguishable from an organic one. */
.wa-ac-pill--promoted {
	border-color: var( --wa-ac-brand );
	color: var( --wa-ac-brand );
	font-weight: var( --wa-ac-pill-fw-promoted );
}

/* ---------------------------------------------------------------------------
   Lists (categories / brands / taxonomies)
--------------------------------------------------------------------------- */
.wa-ac-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wa-ac-list a {
	display: flex;
	align-items: center;
	gap: var( --wa-ac-list-gap );
	padding: var( --wa-ac-list-pad );
	margin: 0 -12px;
	border-radius: var( --wa-ac-radius-s );
	font-size: var( --wa-ac-list-fs );
	font-weight: var( --wa-ac-list-fw );
	color: var( --wa-ac-ink );
	text-decoration: none;
	white-space: nowrap;
	transition: background var( --wa-ac-t ), color var( --wa-ac-t ), padding-left var( --wa-ac-t ), box-shadow var( --wa-ac-t );
}
/* Hairline between rows drawn as an inset shadow, so it does not fight the
   rounded hover plate the way a real border would. */
.wa-ac-list li + li a {
	box-shadow: inset 0 1px 0 var( --wa-ac-line );
}
.wa-ac-list a:hover,
.wa-ac-list a:focus-visible {
	background: var( --wa-ac-list-hover-bg );
	color: var( --wa-ac-brand );
	padding-left: var( --wa-ac-list-hover-pad-l );
	box-shadow: var( --wa-ac-list-hover-shadow );
	outline: none;
}
.wa-ac-count {
	margin-left: auto;
	flex: 0 0 auto;
	min-width: var( --wa-ac-count-minw );
	text-align: center;
	font-size: var( --wa-ac-count-fs );
	font-weight: var( --wa-ac-count-fw );
	color: var( --wa-ac-muted );
	background: var( --wa-ac-surface );
	border: var( --wa-ac-count-border-w ) solid var( --wa-ac-line );
	border-radius: var( --wa-ac-radius-pill );
	padding: var( --wa-ac-count-pad );
	transition: background var( --wa-ac-t ), color var( --wa-ac-t ), border-color var( --wa-ac-t );
}
.wa-ac-list a:hover .wa-ac-count {
	background: var( --wa-ac-brand );
	border-color: var( --wa-ac-brand );
	color: var( --wa-ac-on-brand );
}
/* Small brand icon in the brands list. */
.wa-ac-list.wa-ac-brands a {
	justify-content: flex-start;
}
.wa-ac-brand-ic {
	flex: none;
	display: inline-flex;
	width: var( --wa-ac-brand-ic-size );
	height: var( --wa-ac-brand-ic-size );
	color: var( --wa-ac-brand );
}
.wa-ac-brand-ic svg {
	width: var( --wa-ac-brand-ic-size );
	height: var( --wa-ac-brand-ic-size );
}

/* ---------------------------------------------------------------------------
   Products
--------------------------------------------------------------------------- */
.wa-ac-products {
	display: flex;
	flex-direction: column;
}

.wa-ac-product {
	display: flex;
	align-items: center;
	gap: var( --wa-ac-product-gap );
	padding: var( --wa-ac-product-pad );
	margin: 0 -14px;
	border-radius: var( --wa-ac-radius-l );
	border-bottom: var( --wa-ac-product-divider-w ) solid var( --wa-ac-line-soft );
	position: relative;
	transition: background var( --wa-ac-t ), box-shadow var( --wa-ac-t );
}
.wa-ac-product::before {
	content: '';
	position: absolute;
	left: 0;
	top: var( --wa-ac-product-mark-inset );
	bottom: var( --wa-ac-product-mark-inset );
	width: var( --wa-ac-product-mark-w );
	border-radius: var( --wa-ac-product-mark-radius );
	background: var( --wa-ac-mark );
	opacity: 0;
	transform: var( --wa-ac-product-mark-scale );
	transition: opacity var( --wa-ac-t ), transform var( --wa-ac-t );
}
/*
 * Hover, focus and the KEYBOARD cursor are one state.
 *
 * :has() is what lets the row react to a class the JS puts on the link inside
 * it — move() marks .wa-ac-product-link, because that is the element it also
 * has to scroll into view and follow on Enter. Styling the row from the link
 * keeps that single source of truth instead of asking the JS to mark two nodes.
 */
.wa-ac-product:hover,
.wa-ac-product:focus-within,
.wa-ac-product:has( .wa-ac-active ) {
	background: var( --wa-ac-product-hover-bg );
	border-bottom-color: transparent;
	box-shadow: var( --wa-ac-product-hover-shadow );
	z-index: 2;
}
.wa-ac-product:hover::before,
.wa-ac-product:focus-within::before,
.wa-ac-product:has( .wa-ac-active )::before {
	opacity: 1;
	transform: scaleY( 1 );
}

.wa-ac-product-link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var( --wa-ac-product-gap );
	text-decoration: none;
	color: inherit;
}

.wa-ac-thumb {
	flex: 0 0 auto;
	width: var( --wa-ac-thumb-size );
	height: var( --wa-ac-thumb-size );
	border-radius: var( --wa-ac-radius-m );
	background: var( --wa-ac-surface );
	border: var( --wa-ac-thumb-border-w ) solid var( --wa-ac-line );
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var( --wa-ac-t );
}
.wa-ac-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform var( --wa-ac-thumb-zoom-t );
}
.wa-ac-product:hover .wa-ac-thumb {
	border-color: var( --wa-ac-brand-light );
}
.wa-ac-product:hover .wa-ac-thumb img {
	transform: var( --wa-ac-thumb-zoom );
}

.wa-ac-pinfo {
	flex: 1;
	min-width: 0;
	display: block;
}
/* Two lines, and a matching max-height so the row keeps a stable ~70px whether
   the title wraps or not. */
.wa-ac-pname {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: var( --wa-ac-pname-max-h );
	font-size: var( --wa-ac-pname-fs );
	font-weight: var( --wa-ac-pname-fw );
	line-height: var( --wa-ac-pname-lh );
	color: var( --wa-ac-ink );
	transition: color var( --wa-ac-t );
}
.wa-ac-product:hover .wa-ac-pname {
	color: var( --wa-ac-brand );
}

/* SKU / EAN is still rendered (analytics and the DOM contract depend on it) but
   is not shown: it is a supplier code, and it pushed the title to one line. */
.wa-ac-sku {
	display: none !important;
}

.wa-ac-price {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: var( --wa-ac-price-pad-l );
	font-size: var( --wa-ac-price-fs );
	font-weight: var( --wa-ac-price-fw );
	letter-spacing: var( --wa-ac-price-ls );
	color: var( --wa-ac-price-color );
	white-space: nowrap;
	text-align: right;
}
/* WooCommerce wraps the sale price in <ins> (underlined by default) and the old
   price in <del>. Force the current price to brand, the old one to muted. */
.wa-ac-price ins,
.wa-ac-price ins *,
.wa-ac-price .woocommerce-Price-amount {
	color: var( --wa-ac-price-color );
	text-decoration: none;
	background: none;
}
.wa-ac-price del,
.wa-ac-price del * {
	font-weight: var( --wa-ac-price-old-fw );
	font-size: var( --wa-ac-price-old-fs );
	color: var( --wa-ac-muted );
	margin-right: var( --wa-ac-price-old-gap );
}

/* ---------------------------------------------------------------------------
   Add to cart — the primary action
--------------------------------------------------------------------------- */
.wa-ac-miniadd {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --wa-ac-btn-gap );
	height: var( --wa-ac-btn-h );
	min-width: var( --wa-ac-btn-minw );
	padding: 0 var( --wa-ac-btn-pad-x );
	border: 0;
	border-radius: var( --wa-ac-radius-m );
	background: var( --wa-ac-cart );
	color: var( --wa-ac-on-brand ) !important;
	font-size: var( --wa-ac-btn-fs );
	font-weight: var( --wa-ac-btn-fw );
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 var( --wa-ac-btn-base-h ) 0 var( --wa-ac-cart-shadow );
	transition: background var( --wa-ac-t ), transform var( --wa-ac-t ), box-shadow var( --wa-ac-t );
}
.wa-ac-miniadd svg {
	width: var( --wa-ac-btn-icon-size );
	height: var( --wa-ac-btn-icon-size );
	flex: 0 0 auto;
}
/* CRITICAL: Wooptima's delegated handler tests `event.target.dataset`, not
   closest() — a click landing on the icon or the label would be ignored and the
   product would never reach the cart. Production cards get this from
   wooptima-gridbuilder-blocks.css; this panel is not a WPGB grid, so the rule
   has to be repeated here (same as wa-instant-search/assets/css/results.css). */
.wa-ac-miniadd svg,
.wa-ac-miniadd img,
.wa-ac-miniadd span {
	pointer-events: none;
}
.wa-ac-miniadd:hover {
	background: var( --wa-ac-cart-hover );
	transform: var( --wa-ac-lift-m );
	box-shadow: var( --wa-ac-btn-hover-shadow ), 0 2px 0 var( --wa-ac-cart-shadow );
}
.wa-ac-miniadd:active {
	transform: var( --wa-ac-press );
	box-shadow: 0 1px 0 var( --wa-ac-cart-shadow );
}
/* States — the add-to-cart callback swaps these classes. */
.wa-ac-miniadd.is-added {
	background: var( --wa-ac-brand-dark );
	box-shadow: 0 2px 0 var( --wa-ac-brand );
}
.wa-ac-miniadd.loading {
	opacity: var( --wa-ac-loading-opacity );
	pointer-events: none;
}

/* "Výber možností" (variabilný produkt na sklade): obrys, nie zelené tlačidlo
   pridania — varianta sa vyberá až na produkte. Stav DOSTUPNOSTI to nemení,
   preto ostáva v brandovej farbe; nedostupnosť rieši `--off` nižšie. */
.wa-ac-miniview {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var( --wa-ac-btn-h );
	min-width: var( --wa-ac-btn-minw );
	padding: 0 var( --wa-ac-btn-pad-x );
	border: var( --wa-ac-btn-outline-w ) solid var( --wa-ac-cart );
	border-radius: var( --wa-ac-radius-m );
	background: transparent;
	color: var( --wa-ac-cart-shadow );
	font-size: var( --wa-ac-btn-fs );
	font-weight: var( --wa-ac-btn-fw );
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background var( --wa-ac-t ), color var( --wa-ac-t );
}
.wa-ac-miniview:hover {
	background: var( --wa-ac-cart );
	color: var( --wa-ac-on-brand );
}
/* "Zobraziť" pre NEDOSTUPNÝ produkt: šedé „disabled" s ikonou „i" v krúžku,
   rovnaký stav ako karta v mriežke (wa-instant-search results.css, vetva
   `.outofstock`). Odkaz zostáva funkčný — vedie na detail produktu; šedá
   hovorí, že sa odtiaľto nedá kúpiť, nie že sa nedá klikať. */
.wa-ac-miniview--off {
	gap: var( --wa-ac-btn-gap );
	border-color: #d8d8dd;
	background: #e6e6e9;
	color: #5b5b60;
}
.wa-ac-miniview--off svg {
	width: var( --wa-ac-btn-icon-size );
	height: var( --wa-ac-btn-icon-size );
	flex: 0 0 auto;
}
.wa-ac-miniview--off:hover {
	background: #dcdce0;
	color: #3f3f44;
}

/* ---------------------------------------------------------------------------
   Show all results
--------------------------------------------------------------------------- */
.wa-ac-showall {
	margin-top: var( --wa-ac-showall-mt );
}
.wa-ac-showall a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --wa-ac-showall-gap );
	height: var( --wa-ac-showall-h );
	border-radius: var( --wa-ac-radius-l );
	border: var( --wa-ac-btn-outline-w ) solid var( --wa-ac-brand );
	color: var( --wa-ac-brand );
	font-size: var( --wa-ac-showall-fs );
	font-weight: var( --wa-ac-btn-fw );
	text-decoration: none;
	transition: background var( --wa-ac-t ), color var( --wa-ac-t ), box-shadow var( --wa-ac-t );
}
.wa-ac-showall a:hover,
.wa-ac-showall a.wa-ac-active {
	background: var( --wa-ac-brand );
	color: var( --wa-ac-on-brand );
	box-shadow: var( --wa-ac-showall-hover-shadow );
}
.wa-ac-showall a:hover .wa-ac-showall-num,
.wa-ac-showall a.wa-ac-active .wa-ac-showall-num {
	background: var( --wa-ac-showall-num-hover-bg );
	border-color: transparent;
	color: var( --wa-ac-on-brand );
}
.wa-ac-showall a:hover svg,
.wa-ac-showall a.wa-ac-active svg {
	transform: translateX( var( --wa-ac-showall-arrow-x ) );
}
.wa-ac-showall svg {
	width: var( --wa-ac-showall-icon-size );
	height: var( --wa-ac-showall-icon-size );
	flex: none;
	transition: transform var( --wa-ac-t );
}
.wa-ac-showall-num {
	font-size: var( --wa-ac-showall-num-fs );
	font-weight: var( --wa-ac-btn-fw );
	padding: var( --wa-ac-showall-num-pad );
	border-radius: var( --wa-ac-radius-pill );
	background: var( --wa-ac-tint );
	border: var( --wa-ac-count-border-w ) solid var( --wa-ac-line );
	color: var( --wa-ac-brand );
	transition: background var( --wa-ac-t ), color var( --wa-ac-t ), border-color var( --wa-ac-t );
}

/* ---------------------------------------------------------------------------
   Close.

   Anchored to the panel and to the container's right edge, so it holds that
   position in every band. It is a direct child of the box (see paint()): inside
   a column it was a descendant of a scroll container, which clips.
--------------------------------------------------------------------------- */
.wa-ac-close {
	position: absolute;
	top: var( --wa-ac-close-top );
	right: var( --wa-ac-pad );
	z-index: 5;
	width: var( --wa-ac-close-size );
	height: var( --wa-ac-close-size );
	padding: 0;
	border: 0;
	background: none;
	border-radius: var( --wa-ac-radius-m );
	display: grid;
	place-items: center;
	color: var( --wa-ac-muted );
	cursor: pointer;
	transition: background var( --wa-ac-t ), color var( --wa-ac-t ), transform var( --wa-ac-t );
}
.wa-ac-close svg {
	width: var( --wa-ac-close-icon-size );
	height: var( --wa-ac-close-icon-size );
}
.wa-ac-close:hover {
	background: var( --wa-ac-close-hover-bg );
	color: var( --wa-ac-brand-dark );
	transform: var( --wa-ac-close-hover-rotate );
}

/* ---------------------------------------------------------------------------
   Keyboard / accessibility
--------------------------------------------------------------------------- */
.wa-ac-box a:focus-visible,
.wa-ac-box button:focus-visible {
	outline: var( --wa-ac-focus-w ) solid var( --wa-ac-mark );
	outline-offset: var( --wa-ac-focus-offset );
	border-radius: var( --wa-ac-radius-s );
}

@media ( prefers-reduced-motion: reduce ) {
	.wa-ac-box *,
	.wa-ac-box *::before,
	.wa-ac-box *::after {
		transition-duration: .01ms !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Devices. The stage rules for the tablet and mobile bands (flex columns and
   the three-column reflow; display:contents stack, one-line product row, icon
   buttons) are NOT in this file: their media queries depend on the breakpoints
   set in Search Rail > Layout (option wa_fibo_rail_breakpoints, default 720 /
   1024), so Layout\Css generates them from includes/Layout/stage.css.tpl and
   prints them inline right after this stylesheet.

     mobile   <= mobile px          — columns dissolve, one stack
     tablet   mobile+1 .. tablet px — three columns reflow into two rows
     desktop  >  tablet px          — the stored layout, verbatim
--------------------------------------------------------------------------- */

/* Taby kategórií nad zoznamom produktov */
.wa-ac-tabs { display: flex; flex-wrap: wrap; gap: var(--wa-ac-tab-gap); margin: 0 0 var(--wa-ac-tab-mb); }
.wa-ac-tab { cursor: pointer; font-family: inherit; }
.wa-ac-tab--active,
.wa-ac-tab--active:hover {
	background: var(--wa-ac-tab-active-bg);
	border-color: var(--wa-ac-tab-active-border);
	color: var(--wa-ac-tab-active-fg);
	transform: none;
}
/* Počet v tabe je súčasť pilulky, nie samostatný štítok. .wa-ac-count je
   navrhnutý pre riadky zoznamu, kde stojí sám a potrebuje vlastný obrys —
   vnútri pilulky, ktorá už rámik má, z toho vznikne škatuľa v škatuli. */
.wa-ac-tab .wa-ac-count {
	border: 0;
	background: transparent;
	min-width: 0;
	padding: 0;
	margin-left: 4px;
	color: inherit;
	opacity: .65;
}
.wa-ac-tab--active .wa-ac-count { color: inherit; opacity: .8; }
.wa-ac-tabgroup[hidden] { display: none; }