/**
 * 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, .wa-header-search` (the two independent subtrees this
 * stylesheet paints — the autocomplete panel and the header search field) 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, .wa-header-search {
	/* 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;

	/* 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;

	/* Header search (structural shim visual values) */
	--wa-ac-hdr-input-border-w: 2px;
	--wa-ac-hdr-input-bg: #fff;
	--wa-ac-hdr-input-pad-y: 10px;
	--wa-ac-hdr-submit-size: 33px;
	--wa-ac-hdr-submit-icon: 20px;
}

.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;
}

/* "Zobraziť" (variable / non-purchasable products): outline, not the green add
   button — the visitor still has to pick a variant on the product page. */
.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 );
}

/* ---------------------------------------------------------------------------
   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;
	}
}

/* ---------------------------------------------------------------------------
   Header search structural shim.

   We dequeue FiboSearch's native CSS entirely. The theme's compiled header
   design (uploads/scorg/css/*-header-compiled.css) owns all the LOOK (colors,
   radius, border via box-shadow, icon fill, submit position) but assumes the
   base provides a few STRUCTURAL rules. We supply only those — nothing visual,
   so there's no conflict with the theme. Reference values match the layout
   FiboSearch's base produced.
--------------------------------------------------------------------------- */
/* !important: these structural rules must beat the theme's GLOBAL button/input
   styling (which otherwise leaves the submit a teal 50x34 box etc.). They set
   only layout/box props — orthogonal to the compiled header CSS, which owns
   position, radius, colors and the box-shadow ring — so there is no conflict. */
.wa-header-search .dgwt-wcas-search-wrapp,
.wa-header-search .dgwt-wcas-search-form,
.wa-header-search .dgwt-wcas-sf-wrapp {
	width: 100% !important;
}
.wa-header-search .dgwt-wcas-sf-wrapp {
	position: relative !important; /* anchor for the absolutely-positioned submit */
	box-sizing: border-box !important;
}
.wa-header-search .dgwt-wcas-search-input {
	width: 100% !important;
	box-sizing: border-box !important;
	border: var( --wa-ac-hdr-input-border-w ) solid transparent !important; /* theme draws the ring via box-shadow */
	background: var( --wa-ac-hdr-input-bg ) !important;
	padding-block: var( --wa-ac-hdr-input-pad-y ) !important;           /* vertical only; theme sets padding-inline */
}
.wa-header-search .dgwt-wcas-search-submit {
	position: absolute !important;
	width: var( --wa-ac-hdr-submit-size ) !important;
	height: var( --wa-ac-hdr-submit-size ) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 100% !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}
.wa-header-search .dgwt-wcas-search-submit svg {
	max-width: var( --wa-ac-hdr-submit-icon ) !important;
}
.wa-header-search .dgwt-wcas-voice-search,
.wa-header-search .dgwt-wcas-preloader {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Devices. Two bands, and they must not overlap — the generated per-device
   stylesheet (Layout\Css) writes `order` / `display:none` into exactly these
   two media queries, so a viewport that matched both would get contradictory
   arrangements:

     desktop  >= 1180px        — the stored layout, verbatim
     tablet   820–1179.98px    — three columns reflow into two rows
     mobile   <  820px         — columns dissolve, one stack, one order sequence

   The boundaries are measured, not inherited: with 240px + 280px rails the
   product column runs out of room for a title at about 1150px (at 1024px a
   two-line title gets 176px, which truncates mid-word), while the tablet's
   single rail still leaves 244px at 820px. Layout\Css::TABLET / MOBILE carry
   the same numbers and must be changed together with these.

   Nothing here decides WHAT is hidden or in which order — that is admin data.
   These rules only build the stage those generated rules act on.
--------------------------------------------------------------------------- */

@media ( min-width: 820px ) and ( max-width: 1179.98px ) {
	/* A flex column, so `order` can move widgets WITHIN their column. Visually
	   identical to the block flow it replaces (stretch + the same margins);
	   the close button is absolutely positioned and stays out of flow. */
	.wa-ac-box.wa-ac-open .wa-ac-col {
		display: flex;
		flex-direction: column;
	}

	/*
	 * The three-column reflow: rail + products stay side by side, the second
	 * rail drops to a full-width row below and splits into as many tracks as it
	 * has room for.
	 *
	 * Scoped to .wa-ac-cols-3 because it is a statement about a SPECIFIC shape.
	 * CSS cannot count its own grid items, so the renderer publishes the count
	 * (see paint()); a template with two or four columns matches nothing here
	 * and keeps the ordinary track list.
	 *
	 * !important on the track list: the renderer writes the desktop tracks as an
	 * inline style, which beats any stylesheet rule on specificity.
	 */
	.wa-ac-box.wa-ac-cols-3.wa-ac-open:not( .wa-ac-recent-only ) {
		grid-template-columns: var( --wa-ac-tablet-rail-w ) minmax( 0, 1fr ) !important;
	}
	.wa-ac-box.wa-ac-cols-3.wa-ac-open:not( .wa-ac-recent-only ) .wa-ac-col[data-col="0"] {
		grid-column: 1;
		grid-row: 1;
	}
	.wa-ac-box.wa-ac-cols-3.wa-ac-open:not( .wa-ac-recent-only ) .wa-ac-col[data-col="1"] {
		grid-column: 2;
		grid-row: 1;
		border-right: 0;
	}
	.wa-ac-box.wa-ac-cols-3.wa-ac-open:not( .wa-ac-recent-only ) .wa-ac-col[data-col="2"] {
		grid-column: 1 / -1;
		grid-row: 2;
		/* Beats the flex rule above on specificity, which is the point: the
		   widgets in this rail now sit side by side, not stacked. `order` still
		   works — grid honours it exactly as flex does. */
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( var( --wa-ac-tablet-row-min ), 1fr ) );
		gap: var( --wa-ac-tablet-row-gap );
		align-items: start;
		border-top: var( --wa-ac-col-divider-w ) solid var( --wa-ac-line );
		/* It is a row of short lists, not a scrolling rail. */
		max-height: none;
		overflow: visible;
	}
	.wa-ac-box.wa-ac-cols-3.wa-ac-open:not( .wa-ac-recent-only ) .wa-ac-col[data-col="2"] .wa-ac-slot + .wa-ac-slot {
		margin-top: 0;
	}

	/* Compact treatment for a genuinely narrow rail. The flag is MEASURED (see
	   NARROW_COL_PX in autocomplete.js) and re-evaluated on every paint and
	   resize, so the rail that goes full width above correctly loses it. */
	.wa-ac-col--narrow {
		padding: var( --wa-ac-narrow-col-pad );
	}
	.wa-ac-col--narrow .wa-ac-list a {
		font-size: var( --wa-ac-narrow-list-fs );
	}
	/* Pills in a narrow rail: one line with horizontal scroll so it's visible
	   they continue — the next pill peeks in from the right edge. */
	.wa-ac-col--narrow .wa-ac-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
		padding-bottom: var( --wa-ac-narrow-pills-pb );
	}
	.wa-ac-col--narrow .wa-ac-pills::-webkit-scrollbar {
		height: var( --wa-ac-narrow-scrollbar-h );
	}
	.wa-ac-col--narrow .wa-ac-pills::-webkit-scrollbar-thumb {
		background: var( --wa-ac-scrollbar-thumb );
		border-radius: var( --wa-ac-radius-xs );
	}
	.wa-ac-col--narrow .wa-ac-pill {
		flex: 0 0 auto;
		padding: var( --wa-ac-narrow-pill-pad );
		font-size: var( --wa-ac-narrow-pill-fs );
		white-space: nowrap;
	}
}

/* Mobile band: one stack. Collapse to a single column for ANY number of
   configured columns — !important is REQUIRED, because the JS writes the track
   list as an inline style, which beats any stylesheet rule on specificity. */
@media ( max-width: 819.98px ) {
	.wa-ac-box.wa-ac-open {
		grid-template-columns: 1fr !important;
		max-height: var( --wa-ac-mobile-max-h );
		overflow-y: auto;
	}
	/* The columns dissolve: with display:contents they stop generating a box, so
	   their slots become direct grid items of the panel. That is what lets ONE
	   order sequence arrange the whole stack regardless of which column a widget
	   sits in on desktop — otherwise `order` could only sort within a column.
	   The compact recent-only box is display:block, not a grid, so it is excluded
	   and keeps a real column.

	   The rail tint goes with those boxes, deliberately: a stack has no side
	   rails to distinguish, and the admin's cross-column mobile ordering is the
	   feature worth keeping here. */
	.wa-ac-box.wa-ac-open:not( .wa-ac-recent-only ) .wa-ac-col {
		display: contents;
	}
	/* The column's padding went with its box; the slots carry it now. Horizontal
	   padding still comes from the panel itself (padding-inline). */
	.wa-ac-box.wa-ac-open:not( .wa-ac-recent-only ) .wa-ac-slot {
		padding-block: var( --wa-ac-mobile-slot-pad-y );
		margin-top: 0;
		/* Divider on EVERY slot, not on `+ .wa-ac-slot`: slots from different
		   columns are not DOM siblings, and `order` changes which one is on top,
		   so "all but the first" is not expressible here. The line under the
		   panel's top edge reads as part of the frame. */
		border-top: var( --wa-ac-col-divider-w ) solid var( --wa-ac-line );
	}

	/*
	 * The product row stays a SINGLE line: thumb | title | price | cart.
	 *
	 * The alternative — wrapping the button onto its own full-width line — buys
	 * the title no room (it was already free to use two lines) and costs a whole
	 * row of height per product, so four results fill the screen instead of
	 * eight. Everything shrinks instead, and the button drops its label: it keeps
	 * its icon and its aria-label, which is what actually names it.
	 */
	.wa-ac-product {
		gap: var( --wa-ac-mobile-product-gap );
		padding: var( --wa-ac-mobile-product-pad );
		margin: 0 -12px;
	}
	.wa-ac-product-link {
		gap: var( --wa-ac-mobile-product-gap );
	}
	.wa-ac-thumb {
		width: var( --wa-ac-mobile-thumb-size );
		height: var( --wa-ac-mobile-thumb-size );
		border-radius: var( --wa-ac-radius-s );
	}
	.wa-ac-pname {
		font-size: var( --wa-ac-mobile-pname-fs );
	}
	.wa-ac-price {
		font-size: var( --wa-ac-mobile-price-fs );
		padding-left: var( --wa-ac-mobile-price-pad-l );
	}

	/* Icon-only square. min-width has to be reset — the desktop button reserves
	   142px for its label, which would push the title out of the row. */
	.wa-ac-miniadd {
		width: var( --wa-ac-btn-h );
		min-width: 0;
		height: var( --wa-ac-btn-h );
		padding: 0;
		gap: 0;
	}
	.wa-ac-miniadd .wa-ac-miniadd-t {
		display: none;
	}

	/* "Zobraziť" has no icon of its own (see WIDGETS.products), so hiding its
	   label would leave an empty box. It keeps its text and just gets compact. */
	.wa-ac-miniview {
		height: var( --wa-ac-btn-h );
		min-width: 0;
		padding: 0 var( --wa-ac-mobile-btn-pad-x );
		font-size: var( --wa-ac-mobile-btn-fs );
	}
}