/**
 * Topski Search Panel — "prototyp 1" look of the wa-fibosearch-rail field and panel.
 *
 * Everything is scoped under .wa-header-search (the field) or .wa-ac-box (the panel) and
 * doubles the class where the rail's own rule would otherwise win, so the rail's defaults
 * stay untouched for anything not restyled here.
 */

/* ---- tokens ---- */
.wa-ac-box,
.wa-header-search {
	--tsp-red: #f00000;
	--tsp-red-dark: #c80000;
	--tsp-ink: #1d1d1b;
	--tsp-muted: #6f6f6c;
	--tsp-line: #e4e4e2;
	--tsp-soft: #f4f4f3;
	--tsp-green: #26b11a;
	--tsp-head-font: 'Bebas Neue', 'Oswald', sans-serif;
	--tsp-font: 'PT Sans', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   Field — same look as the original FiboSearch field in the header
--------------------------------------------------------------------------- */
.wa-header-search .wa-sf-form {
	margin: 0;
}
.wa-header-search .wa-sf-field {
	height: 50px;
	padding: 0;
	border-radius: 0;
	display: flex;
	align-items: stretch;
}
.wa-header-search .wa-sf-field .wa-sf-input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 12px;
	border: 1px solid var(--tsp-ink);
	border-right: 0;
	border-radius: 0;
	box-shadow: none;
	background: #fff;
	color: var(--tsp-ink);
	font: 15px/1.2 var(--tsp-font);
}
.wa-header-search .wa-sf-field .wa-sf-input[type="search"]::placeholder {
	color: #8a8a87;
}
.wa-header-search .wa-sf-field .wa-sf-input[type="search"]:focus {
	border-color: var(--tsp-ink);
}
.wa-header-search .wa-sf-field .wa-sf-input[type="search"]:focus-visible {
	outline: 0;
}
.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"] {
	position: static;
	transform: none;
	flex: none;
	width: 154px;
	height: 50px;
	border-radius: 0;
	background: var(--tsp-ink);
	color: #fff;
	font: 700 14px/1 var(--tsp-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: none;
}
.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"]::before {
	content: 'Vyhľadávanie';
}
.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"] .wa-sf-icon {
	display: none;
}
.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"]:hover,
.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"]:focus-visible {
	background: var(--tsp-red);
	box-shadow: none;
}

@media (max-width: 1023px) {
	/* Na mobile je pole nižšie: 44 px namiesto 50 px. */
	.wa-header-search .wa-sf-field {
		height: 44px;
	}
	.wa-header-search .wa-sf-field .wa-sf-input[type="search"] {
		height: 44px;
		border: 0;
	}
	.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"] {
		width: 44px;
		height: 44px;
		background: #8d8d8a;
	}
	.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"]::before {
		content: none;
	}
	.wa-header-search .wa-sf-form .wa-sf-submit[type="submit"] .wa-sf-icon {
		display: block;
		color: #fff;
	}
}

/* ---------------------------------------------------------------------------
   Panel box — container width, hung from the bottom of the header row
   (--tsp-top is set by topski-search-panel.js)
--------------------------------------------------------------------------- */
.wa-ac-box.wa-ac-box {
	--wa-ac-surface: #fff;
	--wa-ac-tint: #fff;
	--wa-ac-line: var(--tsp-line);
	--wa-ac-line-soft: var(--tsp-soft);
	--wa-ac-ink: var(--tsp-ink);
	--wa-ac-muted: var(--tsp-muted);
	--wa-ac-mark: var(--tsp-red);
	--wa-ac-price-color: var(--tsp-ink);
	--wa-ac-col-max-h: calc(100vh - var(--tsp-vtop, 180px) - 24px);
	z-index: 1000;
	top: var(--tsp-top, 0) !important;
	left: 50% !important;
	width: min(1288px, 100vw - 32px) !important;
	transform: translateX(-50%);
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
	font: 15px/1.4 var(--tsp-font);
	color: var(--tsp-ink);
}
.wa-ac-box.wa-ac-box::before {
	background: linear-gradient(90deg, transparent, var(--tsp-red), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
}

/* dim the page under the header while the panel is open */
body:has(.wa-ac-box.wa-ac-open)::after {
	content: '';
	position: fixed;
	inset: var(--tsp-vtop, 0) 0 0 0;
	z-index: 999;
	background: rgba(15, 15, 14, .42);
	pointer-events: none;
}

.wa-ac-box .wa-ac-col {
	padding: 20px 22px 22px;
	background: #fff;
}
.wa-ac-box .wa-ac-col + .wa-ac-col {
	border-left: 1px solid var(--tsp-line);
}
.wa-ac-box .wa-ac-col--rail + .wa-ac-col:not(.wa-ac-col--rail),
.wa-ac-box .wa-ac-col:not(.wa-ac-col--rail):has(+ .wa-ac-col--rail) {
	border-right: 0;
}
.wa-ac-box .wa-ac-slot + .wa-ac-slot {
	margin-top: 20px;
}

/* section titles in the topski nav type */
.wa-ac-box .wa-ac-title,
.wa-ac-box .wa-ac-title--mid {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font: 400 20px/1 var(--tsp-head-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tsp-ink);
}
.wa-ac-box .wa-ac-title::after {
	content: none;
}
.wa-ac-box .wa-ac-pcount {
	font: 400 13px var(--tsp-font);
	letter-spacing: 0;
	color: var(--tsp-muted);
}
.wa-ac-box .wa-ac-clear {
	padding: 0;
	font: 700 13px var(--tsp-font);
	color: var(--tsp-red);
}
.wa-ac-box .wa-ac-clear:hover {
	background: none;
	color: var(--tsp-red-dark);
}

/* ---- recent + popular phrases: a list with icons ---- */
.wa-ac-box .wa-ac-pills {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
}
.wa-ac-box .wa-ac-pill {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: none;
	font: 400 15px/1.3 var(--tsp-font);
	color: var(--tsp-ink);
	text-align: left;
}
.wa-ac-box .wa-ac-pill::before {
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	background: #9a9a97;
	-webkit-mask: var(--tsp-pill-icon) center / contain no-repeat;
	mask: var(--tsp-pill-icon) center / contain no-repeat;
	--tsp-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='m3 17 6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
}
.wa-ac-box [data-w="recent"] .wa-ac-pill::before {
	--tsp-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.wa-ac-box .wa-ac-pill:hover,
.wa-ac-box .wa-ac-pill:focus-visible {
	transform: none;
	box-shadow: none;
	color: var(--tsp-red);
}
.wa-ac-box .wa-ac-pill--promoted {
	font-weight: 700;
}

/* ---- lists: categories ---- */
.wa-ac-box .wa-ac-list a {
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 6px 0;
	border-radius: 0;
	border-bottom: 1px solid var(--tsp-soft);
	box-shadow: none;
	font: 400 15px/1.3 var(--tsp-font);
	color: var(--tsp-ink);
	white-space: normal;
}
.wa-ac-box .wa-ac-list li + li a {
	box-shadow: none;
}
.wa-ac-box .wa-ac-list a:hover,
.wa-ac-box .wa-ac-list a:focus-visible {
	padding-left: 0;
	background: none;
	box-shadow: none;
	color: var(--tsp-red);
}
.wa-ac-box .wa-ac-count,
.wa-ac-box .wa-ac-list a:hover .wa-ac-count {
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font: 400 13px var(--tsp-font);
	color: var(--tsp-muted);
}

/* ---- brands: chips ---- */
.wa-ac-box .wa-ac-list.wa-ac-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wa-ac-box .wa-ac-list.wa-ac-brands a {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid var(--tsp-line);
	font-size: 14px;
	white-space: nowrap;
}
.wa-ac-box .wa-ac-list.wa-ac-brands a:hover {
	border-color: var(--tsp-ink);
	color: var(--tsp-ink);
}
.wa-ac-box .wa-ac-brand-ic {
	display: none;
}

/* ---- category tabs ---- */
.wa-ac-box .wa-ac-tabs {
	gap: 4px 0;
	margin: 0 0 6px;
	border-bottom: 2px solid var(--tsp-ink);
}
.wa-ac-box .wa-ac-tab.wa-ac-pill {
	display: inline-block;
	padding: 8px 14px 7px;
	border: 0;
	border-radius: 0;
	background: none;
	font: 400 18px/1 var(--tsp-head-font);
	letter-spacing: .04em;
	color: var(--tsp-muted);
}
.wa-ac-box .wa-ac-tab.wa-ac-pill::before {
	content: none;
}
.wa-ac-box .wa-ac-tab.wa-ac-pill:hover {
	color: var(--tsp-ink);
}
.wa-ac-box .wa-ac-tab.wa-ac-tab--active,
.wa-ac-box .wa-ac-tab.wa-ac-tab--active:hover {
	background: var(--tsp-ink);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Product rows: thumb | brand, name, Skladom | -% | price | cart
--------------------------------------------------------------------------- */
.wa-ac-box .wa-ac-product {
	gap: 12px;
	margin: 0;
	padding: 7px 4px;
	border-radius: 0;
	border-bottom: 1px solid var(--tsp-soft);
}
.wa-ac-box .wa-ac-product::before {
	content: none;
}
.wa-ac-box .wa-ac-product:hover,
.wa-ac-box .wa-ac-product:focus-within,
.wa-ac-box .wa-ac-product:has(.wa-ac-active) {
	background: #fafaf9;
	border-bottom-color: var(--tsp-soft);
	box-shadow: none;
}
.wa-ac-box .wa-ac-product-link {
	gap: 12px;
	color: var(--tsp-ink);
}
.wa-ac-box .wa-ac-thumb,
.wa-ac-box .wa-ac-product:hover .wa-ac-thumb {
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
}
.wa-ac-box .wa-ac-thumb img,
.wa-ac-box .wa-ac-product:hover .wa-ac-thumb img {
	object-fit: contain;
	transform: none;
}
.wa-ac-box .wa-ac-pinfo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.wa-ac-box .wa-ac-badge {
	order: -1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: 700 11px/1.4 var(--tsp-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}
.wa-ac-box .wa-ac-pname,
.wa-ac-box .wa-ac-product:hover .wa-ac-pname {
	max-height: none;
	font: 400 14.5px/1.25 var(--tsp-font);
	color: var(--tsp-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wa-ac-box .wa-ac-sku {
	display: none;
}
.wa-ac-box .wa-ac-stock {
	display: block;
	margin-top: 2px;
	font: 700 12.5px var(--tsp-font);
	color: var(--tsp-green);
}

/* price: old one above, sale price red */
.wa-ac-box .wa-ac-price {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 74px;
	padding-left: 0;
	font: 700 16px/1.15 var(--tsp-font);
	letter-spacing: 0;
	color: var(--tsp-ink);
	white-space: nowrap;
}
.wa-ac-box .wa-ac-price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}
.wa-ac-box .wa-ac-price del,
.wa-ac-box .wa-ac-price del * {
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	color: #9a9a97;
	opacity: 1;
}
.wa-ac-box .wa-ac-price ins,
.wa-ac-box .wa-ac-price ins * {
	text-decoration: none;
	color: var(--tsp-red);
}
.wa-ac-box .tsp-badge {
	flex: none;
	padding: 4px 6px;
	background: var(--tsp-red);
	color: #fff;
	font: 700 12px/1 var(--tsp-font);
}

/* cart: black square, icon only (the variable / bundle link gets the same face) */
.wa-ac-box .wa-ac-miniadd,
.wa-ac-box .wa-ac-miniview {
	flex: none;
	width: 36px;
	min-width: 0;
	height: 32px;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 0;
	background: var(--tsp-ink);
	box-shadow: none;
	color: #fff;
	justify-content: center;
}
.wa-ac-box .wa-ac-miniadd svg {
	width: 16px;
	height: 16px;
}
.wa-ac-box .wa-ac-miniadd .wa-ac-miniadd-t,
.wa-ac-box .wa-ac-miniview .wa-ac-miniadd-t,
.wa-ac-box .wa-ac-miniview svg {
	display: none;
}
.wa-ac-box .wa-ac-miniview::before {
	content: '';
	width: 16px;
	height: 16px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 4h2l2.4 11h10.8L21 7H6.2'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 4h2l2.4 11h10.8L21 7H6.2'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wa-ac-box .wa-ac-miniadd:hover,
.wa-ac-box .wa-ac-miniview:hover {
	background: var(--tsp-red);
	color: #fff;
	transform: none;
	box-shadow: none;
}
.wa-ac-box .wa-ac-miniview--off {
	background: #b5b5b2;
}

/* best match: first row of the "Všetko" list */
.wa-ac-box .wa-ac-products > .wa-ac-product:first-child:has(> .wa-ac-product-link[data-list="autocomplete_results"]) {
	padding-left: 10px;
	background: #fff6f6;
	box-shadow: inset 3px 0 0 var(--tsp-red);
}
.wa-ac-box .wa-ac-products > .wa-ac-product:first-child:has(> .wa-ac-product-link[data-list="autocomplete_results"]) .wa-ac-pinfo::before {
	content: 'Najlepšia zhoda';
	order: -2;
	margin-bottom: 3px;
	padding: 4px 8px 3px;
	background: var(--tsp-red);
	color: #fff;
	font: 400 12px/1 var(--tsp-head-font);
	letter-spacing: .1em;
}

/* "Zobraziť všetky výsledky" */
.wa-ac-box .wa-ac-showall {
	margin-top: 14px;
}
.wa-ac-box .wa-ac-showall a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	height: auto;
	padding: 13px 18px 11px;
	border: 0;
	border-radius: 0;
	background: var(--tsp-red);
	box-shadow: none;
	color: #fff;
	font: 400 20px/1 var(--tsp-head-font);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.wa-ac-box .wa-ac-showall a:hover,
.wa-ac-box .wa-ac-showall a.wa-ac-active {
	background: var(--tsp-red-dark);
	box-shadow: none;
}
.wa-ac-box .wa-ac-showall-num,
.wa-ac-box .wa-ac-showall a.wa-ac-active .wa-ac-showall-num {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}
.wa-ac-box .wa-ac-showall-num::before {
	content: '(';
}
.wa-ac-box .wa-ac-showall-num::after {
	content: ')';
}
.wa-ac-box .wa-ac-showall svg {
	width: 16px;
	height: 16px;
}

.wa-ac-box .wa-ac-state {
	font: 400 15px var(--tsp-font);
	color: var(--tsp-muted);
}

/* ---------------------------------------------------------------------------
   Phone: full width under the search row, products first, grey separators
--------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.wa-ac-box.wa-ac-box {
		left: 0 !important;
		width: 100% !important;
		transform: none;
		box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
	}
	.wa-ac-box .wa-ac-tab.wa-ac-pill {
		padding: 7px 10px 6px;
		font-size: 16px;
	}
}
@media (max-width: 819.98px) {
	.wa-ac-box.wa-ac-box.wa-ac-open {
		max-height: calc(100dvh - var(--tsp-vtop, 160px));
	}
	.wa-ac-box.wa-ac-open:not(.wa-ac-recent-only) .wa-ac-slot {
		padding: 14px 14px 16px;
		border-top: 8px solid var(--tsp-soft);
	}
	.wa-ac-box .wa-ac-slot + .wa-ac-slot {
		margin-top: 0;
	}
	.wa-ac-box .wa-ac-product {
		margin: 0;
		padding: 7px 0;
	}
	.wa-ac-box .wa-ac-thumb,
	.wa-ac-box .wa-ac-product:hover .wa-ac-thumb {
		width: 52px;
		height: 52px;
	}
	.wa-ac-box .wa-ac-product-link {
		align-items: flex-start;
	}
	.wa-ac-box .wa-ac-price {
		font-size: 16px;
	}
	.wa-ac-box .tsp-badge {
		display: none;
	}
	.wa-ac-box .wa-ac-miniadd,
	.wa-ac-box .wa-ac-miniview {
		width: 36px;
		height: 32px;
		padding: 0;
	}
	.wa-ac-box .wa-ac-products > .wa-ac-product:first-child:has(> .wa-ac-product-link[data-list="autocomplete_results"]) {
		padding-left: 10px;
	}
}

/* ---------------------------------------------------------------------------
   Phone: full-screen search (body.tsp-overlay, set by topski-search-panel.js on tap),
   same as the FiboSearch mobile overlay it replaces — back arrow + field on top,
   the panel fills the rest of the screen, the page is hidden behind white.
--------------------------------------------------------------------------- */
.tsp-sf-back {
	display: none;
}
@media (max-width: 1023px) {
	html:has(body.tsp-overlay),
	body.tsp-overlay {
		overflow: hidden;
	}
	body.tsp-overlay::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: #fff;
		pointer-events: none;
	}
	/* The sticky Oxygen header (z-index 99) is the field's stacking context: lift it over the
	   white backdrop and hide everything in it except the field itself. */
	body.tsp-overlay .oxy-header-wrapper {
		z-index: 100002 !important; /* Oxygen sets it on the element id */
		visibility: hidden;
	}
	.wa-header-search .wa-sf-form.tsp-sf-form--overlay {
		visibility: visible;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100002;
		margin: 0;
		background: #fff;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	}
	.wa-header-search .tsp-sf-form--overlay .wa-sf-field {
		height: 44px;
	}
	.wa-header-search .tsp-sf-form--overlay .tsp-sf-back {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--tsp-ink);
		color: #fff;
		cursor: pointer;
	}
	.wa-header-search .tsp-sf-form--overlay .wa-sf-submit[type="submit"] {
		display: none;
	}
	.wa-header-search .tsp-sf-form--overlay .wa-sf-field .wa-sf-input[type="search"] {
		border: 0;
		font-size: 16px;
	}

	body.tsp-overlay .wa-ac-box.wa-ac-box {
		position: fixed;
		top: 44px !important;
		left: 0 !important;
		bottom: 0;
		z-index: 100001;
		width: 100% !important;
		max-height: none;
		transform: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: none;
	}
	body.tsp-overlay .wa-ac-box.wa-ac-box.wa-ac-open {
		max-height: none;
		align-content: start;
	}
	body.tsp-overlay .wa-ac-box .wa-ac-col {
		max-height: none;
	}
	body.tsp-overlay .wa-ac-box .wa-ac-close {
		display: none;
	}
	/* the dim of the desktop panel is replaced by the white backdrop above */
	body.tsp-overlay:has(.wa-ac-box.wa-ac-open)::after {
		inset: 0;
		background: #fff;
	}
}