/* =====================================================================
   CATEGORY / LISTING REDESIGN 2026 — Variant C ("Market Standard")
   Mockup: ~/Projects/eshop-redesign/02-proposals/2026_06_01_category_benchmark.html
   Loaded versioned in header.tpl (?v=N) on listing pages, AFTER module CSS.
   Owns: filter restyle, sidebar help card. (Product card restyle: kolo 2.)
   Scope filter rules to .PM_ASBlockOutputVertical only — horizontal filter
   (search results / home) stays untouched.
   ===================================================================== */

/* ---- Design tokens (resolved from mockup; Inter is loaded site-wide) ---- */
.PM_ASBlockOutputVertical {
	--es-orange: #F57C00;
	--es-orange-dark: #E65100;
	--es-blue: #003a78;
	--es-blue-2: #0a2a4c;
	--es-blue-soft: #e3eef8;
	--es-ink: #0f172a;
	--es-ink-2: #1e4e82;
	--es-muted: #6b7280;
	--es-light: #9ca3af;
	--es-border: #e5e7eb;
	--es-border-2: #dbe4ef;
	--es-r-sm: 6px;
	--es-r-lg: 14px;
	font-family: 'Inter', 'Open Sans', sans-serif;
	color: var(--es-ink-2);
}

/* ---- Block title "Filtre" (clean, removes navy bar) ---- */
.PM_ASBlockOutputVertical .title_block,
.PM_ASBlockOutputVertical p.title_block {
	background: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 2px 14px !important;
	text-align: left !important;
	text-transform: none !important;
	height: auto !important;
	line-height: 1 !important;
}
.PM_ASBlockOutputVertical .PM_ASBlockTitle {
	display: inline !important;
	font: 800 13px/1 'Inter Tight', 'Inter', sans-serif !important;
	color: var(--es-ink) !important;
	background: none !important;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.PM_ASBlockOutputVertical .PM_ASBlockNbProductValue {
	color: var(--es-muted);
	font-weight: 600;
	font-size: 65%;
}

/* --- Borderless filter box (mockup had NO border/box around filters) --- */
.PM_ASBlockOutputVertical .block_content {
	border: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
}

/* ---- Reset link (shown by JS when a filter is active) ---- */
.PM_ASBlockOutputVertical .PM_ASResetSearch {
	font: 600 12px/1 'Inter', sans-serif;
	color: var(--es-muted);
	text-decoration: underline;
	padding: 0 2px 14px;
}

/* ---- Filter groups: separators + rhythm ---- */
.PM_ASBlockOutputVertical .PM_ASCriterionsGroupList .PM_ASCriterionsGroup {
	margin-bottom: 0;
}
.PM_ASBlockOutputVertical .PM_ASCriterions {
	border-top: 1px solid var(--es-border);
	padding: 15px 0;
}
.PM_ASBlockOutputVertical .PM_ASCriterions .PM_ASCriterionsGroupOuter {
	margin-top: 13px;
}

/* ---- Group title (bold, no uppercase, chevron affordance) ---- */
.PM_ASBlockOutputVertical .PM_ASCriterions .PM_ASCriterionsGroupTitle {
	position: relative;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 22px 0 0 !important;
	font: 700 14px/1.2 'Inter Tight', 'Inter', sans-serif !important;
	color: var(--es-ink) !important;
	text-transform: none !important;
	cursor: pointer;
}
.PM_ASBlockOutputVertical .PM_ASCriterionsGroupName {
	font-weight: 700;
	color: var(--es-ink);
}
.PM_ASBlockOutputVertical .PM_ASCriterions .PM_ASCriterionsGroupTitle:after {
	content: '';
	position: absolute;
	right: 4px;
	top: 2px;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--es-light);
	border-bottom: 2px solid var(--es-light);
	transform: rotate(45deg);
	transition: transform .2s;
}

/* ---- Checkbox rows ---- */
.PM_ASBlockOutputVertical ul.PM_ASCriterionGroupCheckbox {
	margin: 0;
	padding: 0;
}
.PM_ASBlockOutputVertical ul.PM_ASCriterionGroupCheckbox > li {
	margin: 0;
	padding: 0;
}
.PM_ASBlockOutputVertical .PM_ASCriterionGroupCheckbox .checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 5px 0;
	min-height: 0;
}
.PM_ASBlockOutputVertical .chkbox_container {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	display: block;
}
.PM_ASBlockOutputVertical .chkbox_container input,
.PM_ASBlockOutputVertical input.PM_ASCriterionCheckbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
.PM_ASBlockOutputVertical .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: var(--es-r-sm);
	border: 1.5px solid var(--es-border-2);
	background: #fff;
	box-shadow: none;
	transition: background .15s, border-color .15s;
}
.PM_ASBlockOutputVertical .PM_ASCriterionCheckbox:checked + .checkmark {
	background: var(--es-orange) !important;
	border-color: var(--es-orange) !important;
}
.PM_ASBlockOutputVertical .checkmark:after {
	content: '';
	position: absolute;
	display: none;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.PM_ASBlockOutputVertical .PM_ASCriterionCheckbox:checked + .checkmark:after {
	display: block;
}
.PM_ASBlockOutputVertical .PM_ASLabelCheckbox {
	flex: 1;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
.PM_ASBlockOutputVertical .PM_ASLabelLink {
	font-size: 14px;
	color: var(--es-ink-2);
}
.PM_ASBlockOutputVertical .PM_ASCriterionGroupCheckbox .PM_ASLabelCheckbox .PM_ASLabelLink:hover {
	color: var(--es-orange-dark);
	font-weight: 400;
}
.PM_ASBlockOutputVertical .PM_ASCriterionGroupCheckbox .PM_ASLabelCheckboxSelected .PM_ASLabelLink {
	color: var(--es-ink);
	font-weight: 600;
}
.PM_ASBlockOutputVertical div.PM_ASCriterionNbProduct {
	opacity: 1;
	color: var(--es-light);
	font-size: 12px;
	font-weight: 400;
}

/* ---- Price range slider (jQuery UI) ---- */
.PM_ASBlockOutputVertical .PM_ASCritRange.ui-slider,
.PM_ASBlockOutputVertical .PM_ASCritRange {
	max-width: none;
	height: 3px;
	margin: 16px 8px 4px;
	background: var(--es-border);
	border: 0;
	border-radius: 999px;
}
.PM_ASBlockOutputVertical .PM_ASCritRange .ui-slider-range {
	background: var(--es-orange);
	border-radius: 999px;
}
.PM_ASBlockOutputVertical .PM_ASCritRange .ui-slider-handle {
	width: 16px;
	height: 16px;
	top: -7px;
	margin-left: -8px;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid var(--es-orange) !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
	cursor: pointer;
	outline: none;
}
.PM_ASBlockOutputVertical .PM_ASCritRange .ui-slider-handle:hover,
.PM_ASBlockOutputVertical .PM_ASCritRange .ui-slider-handle:focus {
	background: var(--es-orange) !important;
}
.PM_ASBlockOutputVertical .PM_ASCritRangeValue {
	margin-top: 11px;
	font-size: 13px;
	font-weight: 600;
	color: var(--es-ink-2);
}

/* ---- Select-type filters ---- */
.PM_ASBlockOutputVertical .PM_ASCriterionsGroup select,
.PM_ASBlockOutputVertical select.form-control {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	border: 1.5px solid var(--es-border);
	border-radius: var(--es-r-sm);
	background: #fff;
	font-size: 13px;
	color: var(--es-ink-2);
}

/* ---- "Show more / less" toggle inside a group ---- */
.PM_ASBlockOutputVertical .PM_ASShowCriterionsGroupHidden {
	margin-top: 8px;
	font: 600 13px/1 'Inter', sans-serif;
	color: var(--es-blue);
	text-align: left;
	cursor: pointer;
}

/* ---- Sidebar help card "Poradíme s výberom" ---- */
.f-help {
	margin-top: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: linear-gradient(160deg, #fff, #e3eef8);
	padding: 15px;
	font-family: 'Inter', 'Open Sans', sans-serif;
}
.f-help h4 {
	font: 700 13.5px/1.3 'Inter Tight', 'Inter', sans-serif;
	color: #0a2a4c;
	margin: 0 0 4px;
}
.f-help p {
	font-size: 12px;
	color: #6b7280;
	margin: 0 0 9px;
	line-height: 1.4;
}
.f-help a.tel {
	display: inline-block;
	font: 800 16px/1 'Inter Tight', 'Inter', sans-serif;
	color: #0f172a;
}
.f-help a.tel:hover {
	color: #E65100;
}

/* =====================================================================
   PRODUCT CARD — listing grid (kolo 2). Scope: .pl-redesign (listing only;
   homepage/PDP keep legacy card). Overrides legacy product_list.css
   (fixed 522px height, bg image, float, center).
   ===================================================================== */
/* ---- Grid container: neutralize legacy li + Bootstrap container ----
   Scope :not(.tab-pane):not(.ppbcarousell) protects ppb/homefeatured carousels. */
ul.product_list.grid.pl-redesign:not(.tab-pane):not(.ppbcarousell) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	max-width: none;
	width: auto;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	clear: both;
}
/* KILL Bootstrap .container clearfix pseudo-elements — in a grid they become
   phantom cells (empty first cell + shifted last row). */
ul.product_list.grid.pl-redesign::before,
ul.product_list.grid.pl-redesign::after {
	content: none !important;
	display: none !important;
}
ul.product_list.grid.pl-redesign:not(.tab-pane):not(.ppbcarousell) > li {
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
	display: flex;
}
/* sidebar stays beside grid on desktop template down to ~768px → fewer cols */
@media (max-width: 991px) {
	ul.product_list.grid.pl-redesign:not(.tab-pane):not(.ppbcarousell) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	ul.product_list.grid.pl-redesign:not(.tab-pane):not(.ppbcarousell) { grid-template-columns: 1fr; }
}

/* ---- Card shell ---- */
.pl-redesign .pcard {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	text-align: left;
	transition: border-color .2s, box-shadow .2s;
}
.pl-redesign .pcard:hover {
	border-color: #dbe4ef;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
/* ---- Image ---- */
.pl-redesign .pc-media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: #fff;
	overflow: hidden;
}
.pl-redesign .pc-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	transition: transform .25s ease;
}
.pl-redesign .pcard:hover .pc-media img { transform: scale(1.04); }
/* badges (top-right) — keep productlabels module images where module positions them */
.pl-redesign .pc-badges-r { position: absolute; top: 12px; right: 12px; z-index: 2; }
.pl-redesign .pc-badges-r .badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 9px;
	border-radius: 999px;
	font: 700 10.5px/1 'Inter Tight', 'Inter', sans-serif;
	letter-spacing: .02em;
	border: 1.5px solid rgba(255, 255, 255, .9);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.pl-redesign .pc-badges-r .badge-sale { background: #d32f2f; color: #fff; }
.pl-redesign .pc-badges-r .badge-new { background: #003a78; color: #fff; }

/* ---- Body ---- */
.pl-redesign .pc-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 13px 15px 15px;
	border-top: 1px solid #e5e7eb;
}
.pl-redesign .pc-name {
	margin: 0;
	min-height: 0;
	font: 600 14.5px/1.35 'Inter', 'Open Sans', sans-serif;
}
.pl-redesign .pc-name .product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	min-height: 0;
	color: #0f172a;
	font-weight: 600;
	text-align: left;
}
.pl-redesign .pc-name .product-name:hover { color: #003a78; }
.pl-redesign .pc-desc {
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: #6b7280;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 58px;
}
/* ---- Footer (price / save / availability / CTA) ---- */
.pl-redesign .pc-foot {
	margin-top: auto;
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
/* offers wrapper holds price+save (microdata) — make it breathe like flat foot rows */
.pl-redesign .pc-foot [itemprop="offers"] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pl-redesign .pc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.pl-redesign .pc-now { font: 800 22px/1 'Inter Tight', 'Inter', sans-serif; color: #0f172a; letter-spacing: -.03em; }
.pl-redesign .pc-old { font-size: 13px; color: #9ca3af; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pl-redesign .pc-saverow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pl-redesign .pc-save {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	background: #fef2f2;
	border-radius: 999px;
	font: 700 11px/1 'Inter Tight', 'Inter', sans-serif;
	color: #d32f2f;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.pl-redesign .pc-dph { font-size: 11px; color: #9ca3af; }
.pl-redesign .pc-avail-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.pl-redesign .pc-avail {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font: 600 12.5px/1.2 'Inter', 'Open Sans', sans-serif;
	color: #2a8b3e;
}
.pl-redesign .pc-avail::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2a8b3e; flex: 0 0 8px; }
.pl-redesign .pc-avail.dif { color: #6b7280; }
.pl-redesign .pc-avail.dif::before { background: #f59e0b; }
.pl-redesign .pc-avail.out { color: #d32f2f; }
.pl-redesign .pc-avail.out::before { background: #d32f2f; }
.pl-redesign .pc-deliv {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #6b7280;
}
.pl-redesign .pc-deliv svg { width: 15px; height: 15px; color: #1e4e82; }
.pl-redesign .pc-deliv b { color: #0f172a; font-weight: 700; }
/* ---- CTA: orange cart + navy scales compare ---- */
.pl-redesign .pc-cta { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 3px; }
.pl-redesign .pc-cta .btn-cart {
	height: 46px;
	width: 100%;
	padding: 0 12px;
	background: #F57C00;
	color: #fff;
	border: 0;
	border-radius: 10px;
	font: 700 13.5px/1 'Inter Tight', 'Inter', sans-serif;
	text-transform: uppercase;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	cursor: pointer;
	transition: background .2s, transform .1s;
}
.pl-redesign .pc-cta .btn-cart:hover { background: #E65100; color: #fff; transform: translateY(-1px); }
.pl-redesign .pc-cta .btn-cart svg { width: 18px; height: 18px; }
.pl-redesign .pc-cta .btn-cart.disabled { background: #cbd5e1; cursor: default; }
.pl-redesign .pc-cta .btn-cart.disabled:hover { transform: none; background: #cbd5e1; }
.pl-redesign .pc-cta .btn-cmp {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid #b9c7d7;
	border-radius: 10px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #003a78;
	cursor: pointer;
	transition: all .2s;
}
.pl-redesign .pc-cta .btn-cmp:hover { border-color: #003a78; background: #e3eef8; }
.pl-redesign .pc-cta .btn-cmp.checked,
.pl-redesign .pc-cta .btn-cmp.added { background: #003a78; border-color: #003a78; color: #fff; }
.pl-redesign .pc-cta .btn-cmp svg { width: 18px; height: 18px; }

/* =====================================================================
   SUBCATEGORIES — clean tiles (kolo 3). #subcategories on category pages.
   Grid + kill Bootstrap .row clearfix phantom cells (same gotcha as product grid).
   ===================================================================== */
#subcategories {
	border-top: 1px solid #e5e7eb;
	max-width: none;
	margin: 0;
	padding: 18px 0 4px;
}
#subcategories .row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
}
#subcategories .row::before,
#subcategories .row::after { content: none !important; display: none !important; }
#subcategories .row > div {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* vertical tiles (mockup "Vyberte podľa potreby" style — image top, name below, no round bg) */
#subcategories .subcategory_item {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 18px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
#subcategories .subcategory_item:hover {
	border-color: #F57C00;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
	transform: translateY(-2px);
}
#subcategories .subcategory_item .subcategory-image {
	float: none;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
}
#subcategories .subcategory_item .subcategory-image a {
	display: block;
	width: 56px;
	height: 56px;
	border: 0;
	padding: 0;
}
#subcategories .subcategory_item:hover .subcategory-image a { border: 0; padding: 0; }
#subcategories .subcategory_item .subcategory-image a img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	vertical-align: middle;
}
#subcategories .subcategory_item h5 { margin: 0; }
#subcategories .subcategory_item .subcategory-name {
	font: 700 13.5px/1.3 'Inter', 'Open Sans', sans-serif;
	color: #1e4e82;
	text-transform: none;
}
#subcategories .subcategory_item:hover .subcategory-name { color: #003a78; }

/* =====================================================================
   PAGINATION — BOTTOM only (top stays original compact, fits narrow column).
   Bottom has room → bigger boxes than mockup. Count + "Zobraziť všetko" too.
   ===================================================================== */
.bottom-pagination-content #pagination_bottom { float: none; }
.bottom-pagination-content ul.pagination {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	float: none !important;
}
.bottom-pagination-content ul.pagination li {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
/* box = OUTER element only (li > a / li > span). Inner span stays plain
   (avoids the double-border "shadow" from nested <a><span>). */
.bottom-pagination-content ul.pagination li > a,
.bottom-pagination-content ul.pagination li > span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	font: 600 14.5px/1 'Inter', 'Open Sans', sans-serif;
	color: #1e4e82;
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}
.bottom-pagination-content ul.pagination li > a > span,
.bottom-pagination-content ul.pagination li > span > span {
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	font: inherit;
	color: inherit;
}
.bottom-pagination-content ul.pagination li > a:hover {
	border-color: #F57C00;
	color: #E65100;
}
.bottom-pagination-content ul.pagination li.active > span,
.bottom-pagination-content ul.pagination li.active.current > span {
	background: #F57C00 !important;
	border-color: #F57C00 !important;
	color: #fff !important;
}
/* neutralize legacy blue INNER span (global.css:6754 li.active > span span #0061ad) */
.bottom-pagination-content ul.pagination li.active > span span,
.bottom-pagination-content ul.pagination li.active.current > span span {
	background: none !important;
	border-radius: 0 !important;
	color: #fff !important;
}
.bottom-pagination-content ul.pagination li.truncate > span,
.bottom-pagination-content ul.pagination li.truncate {
	border: 0;
	background: none;
	box-shadow: none;
	min-width: 20px;
	color: #9ca3af;
}
.bottom-pagination-content ul.pagination li.disabled > a,
.bottom-pagination-content ul.pagination li.disabled > span {
	opacity: .4;
	cursor: default;
}
.bottom-pagination-content ul.pagination li .icon-chevron-left,
.bottom-pagination-content ul.pagination li .icon-chevron-right { font-size: 16px; line-height: 1; }
/* prev/next chevrons — bare, vertically centered with the number boxes */
.bottom-pagination-content ul.pagination li.pagination_previous > span,
.bottom-pagination-content ul.pagination li.pagination_previous > a,
.bottom-pagination-content ul.pagination li.pagination_next > span,
.bottom-pagination-content ul.pagination li.pagination_next > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-width: 36px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	color: #003a78;
}
.bottom-pagination-content ul.pagination li.pagination_next > a:hover { color: #E65100; border: 0; }
.bottom-pagination-content ul.pagination li.pagination_previous.disabled > span { opacity: .35; }
/* product count */
.bottom-pagination-content .heading-counter,
.bottom-pagination-content .product-count {
	font: 600 14px/1.4 'Inter', 'Open Sans', sans-serif;
	color: #6b7280;
}
/* "Zobraziť všetko" */
.bottom-pagination-content .showall button,
.bottom-pagination-content .showall .button {
	height: 44px;
	padding: 0 18px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	font: 600 13.5px/1 'Inter', 'Open Sans', sans-serif;
	color: #003a78;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.bottom-pagination-content .showall button:hover,
.bottom-pagination-content .showall .button:hover {
	border-color: #F57C00;
	color: #E65100;
}
/* reset vnoreného <span> v PS tlačidle (mal vlastné sivé pozadie + rámik = krabička v krabičke) */
.bottom-pagination-content .showall button span,
.bottom-pagination-content .showall .button span {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	text-transform: none;
}
/* bottom bar layout (like mockup): pagination CENTERED on top, count info text
   centered below. "Zobraziť všetko" hidden (mockup has none). Separated + spaced. */
.bottom-pagination-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding: 26px 0 8px;
	border-top: 1px solid #e5e7eb;
}
.content_sortPagiBar:not(.container) {
	padding-bottom: 38px;
}
.bottom-pagination-content > .container {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.bottom-pagination-content > .clearfix { display: none; }
/* order: pagination (col-lg-9) first, count (col-lg-3) below */
.bottom-pagination-content > .col-lg-9 { order: 1; }
.bottom-pagination-content > .col-lg-3 { order: 2; }
.bottom-pagination-content #pagination_bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	float: none !important;
	width: auto !important;
}
/* "Zobraziť všetko" — under the page numbers (user request 2026-06-02) */
.bottom-pagination-content #pagination_bottom .showall {
	display: block;
	order: 2;
	width: auto;
	float: none;
	margin: 0;
}
.bottom-pagination-content #pagination_bottom .showall > div { margin: 0; }
.bottom-pagination-content ul.pagination { justify-content: center; order: 1; }
/* count → centered grey info text below pagination */
.bottom-pagination-content .heading-counter {
	display: block;
	text-align: center;
	font: 500 13px/1.4 'Inter', 'Open Sans', sans-serif;
	color: #9ca3af;
}
.bottom-pagination-content #pagination_bottom .product-count:empty { display: none; }

/* =====================================================================
   ACTIVE FILTERS "Váš výber" → chips (kolo 3). pm_advancedsearch selection block.
   ===================================================================== */
.PM_ASSelectionsResults,
form.PM_ASSelections {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
}
.PM_ASSelectionsResults > p { margin: 0; }
.PM_ASSelectionsResults > p strong {
	font: 700 13px/1 'Inter', 'Open Sans', sans-serif;
	color: #0f172a;
}
.PM_ASSelectionsResults .PM_ASSelectionsCriterionsGroup,
.PM_ASSelectionsResults .PM_ASSelectionsCriterionsGroup ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.PM_ASSelectionsResults .PM_ASSelectionsCriterionsGroupName {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.PM_ASSelectionsResults .PM_ASSelectionsCriterionsGroupName > strong {
	font: 600 12.5px/1 'Inter', 'Open Sans', sans-serif;
	color: #6b7280;
	display: inline-block;
}
.PM_ASSelectionsResults .PM_ASSelectionsSelectedCriterion {
	display: inline-flex;
	padding: 0;
}
.PM_ASSelectionsResults a.PM_ASSelectionsRemoveLink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	background: #f3f6fb;
	border: 1px solid #dbe4ef;
	border-radius: 999px;
	font: 600 12.5px/1 'Inter', 'Open Sans', sans-serif;
	color: #1e4e82;
	text-decoration: none;
}
.PM_ASSelectionsResults a.PM_ASSelectionsRemoveLink:before {
	content: "\f00d";
	font-family: "FontAwesome", "FontAwesomeAS4";
	font-size: 10px;
	color: #003a78;
	padding: 0;
}
.PM_ASSelectionsResults a.PM_ASSelectionsRemoveLink:hover {
	border-color: #F57C00;
	color: #E65100;
	text-decoration: none !important;
}
.PM_ASSelectionsResults a.PM_ASSelectionsRemoveLink:hover:before { color: #E65100; }
/* sidebar reset / back links */
.PM_ASBlockOutputVertical .PM_ASResetGroup,
.PM_ASBlockOutputVertical .PM_ASBackLink,
.PM_ASBlockOutputVertical a[class*="Back"] {
	font: 600 12px/1 'Inter', 'Open Sans', sans-serif;
	color: #6b7280;
}

/* =====================================================================
   SORT TABS (kolo 3 B5) — clean underline tabs (existing options only:
   od najlacnejších / od najdrahších / Prvé skladom / A-Z / Z-A).
   ===================================================================== */
.content_sortPagiBar.container {
	border-bottom: 1px solid #e5e7eb;
	margin-right: 0;
}
.top-pagination-content .product_sort {
	padding: 0;
}
.product_sort .radioProductSort {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0;
	float: none;
	width: auto;
}
.product_sort .sort-control {
	float: none;
	margin: 0;
	padding: 0;
}
.product_sort .sort-control label {
	display: block;
	margin: 0 0 -1px 0;
	padding: 13px 15px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	font: 600 14px/1 'Inter', 'Open Sans', sans-serif;
	color: #6b7280;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.product_sort .sort-control label:hover {
	background: none;
	color: #0f172a;
}
.product_sort .sort-control.checked label {
	background: none;
	border: 0;
	border-bottom: 2px solid #F57C00;
	color: #E65100;
	font-weight: 700;
}

/* =====================================================================
   RESPONSIVE FIXES (v18) — tablet 768–1199px + mobile ≤767px.
   Mobile theme is OFF (PS_ALLOW_MOBILE_DEVICE=0) → every width uses this
   desktop theme responsively, so all breakpoint work lives here.
   ===================================================================== */

/* ---- TABLET: filter sidebar (col-sm-3) stays beside the grid down to 768px,
   so 3 columns only fit at ≥1200px. Force 2 cols on CATEGORY pages (where the
   sidebar exists) up to 1199px. Scoped to body#category so manufacturer/supplier/
   search (no sidebar, full-width listing) keep 3 cols. min-width:768 so the
   ≤767 single-column rule is not overridden by this higher-specificity selector. */
@media (min-width: 768px) and (max-width: 1199px) {
	body#category ul.product_list.grid.pl-redesign:not(.tab-pane):not(.ppbcarousell) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- TABLET: hide the TOP pager across the whole tablet band. Below 992px
   global.css already hides it; at 992–1199px it reappeared with legacy blue
   styling under the redesigned sort tabs. Bottom pager covers navigation. */
@media (max-width: 1199px) {
	.top-pagination-content div.pagination { display: none !important; }
}

/* ---- TABLET/MOBILE: keep sort tabs on one row (tighter padding). ---- */
@media (max-width: 991px) {
	.product_sort .sort-control label { padding: 11px 11px; font-size: 13.5px; }
}

/* =====================  MOBILE ≤767px  ===================== */
@media (max-width: 767px) {
	/* Sort tabs: horizontal scroll strip instead of a full-width vertical stack. */
	.product_sort .radioProductSort {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		align-items: stretch;
	}
	.product_sort .sort-control label { white-space: nowrap; padding: 11px 13px; }

	/* Filter off-canvas drawer: restore a side gutter. The borderless desktop
	   rule sets .block_content padding:0 (correct there — the column gives the
	   gutter), but in the 300px drawer it glues checkboxes/slider to the edges.
	   Doubled class beats the unprefixed padding:0 !important. */
	/* padding-bottom reserves room for the pinned .f-help footer so the last
	   filter group clears it when the (scrollable) drawer is scrolled to the end. */
	.PM_ASBlockOutputVertical.PM_ASBlockOutput .block_content { padding: 8px 16px 128px !important; }
	.PM_ASBlockOutputVertical.PM_ASBlockOutput .title_block,
	.PM_ASBlockOutputVertical.PM_ASBlockOutput p.title_block { padding: 14px 16px 12px !important; }
	.PM_ASBlockOutputVertical.PM_ASBlockOutput .PM_ASSelectionsResults { padding: 0 16px; }

	/* Bottom pagination: one row (numbered boxes + the next-chevron no longer
	   wrap onto a second line). Slightly smaller boxes to fit a 360px screen. */
	.bottom-pagination-content ul.pagination { flex-wrap: nowrap; gap: 5px; }
	.bottom-pagination-content ul.pagination li > a,
	.bottom-pagination-content ul.pagination li > span {
		min-width: 38px;
		height: 38px;
		padding: 0 4px;
		font-size: 13.5px;
	}
	.bottom-pagination-content ul.pagination li.pagination_previous > a,
	.bottom-pagination-content ul.pagination li.pagination_previous > span,
	.bottom-pagination-content ul.pagination li.pagination_next > a,
	.bottom-pagination-content ul.pagination li.pagination_next > span {
		min-width: 30px;
		height: 38px;
	}

	/* "Neviete vybrať?" help card = PART OF THE FILTER on mobile, not floating at
	   the top of the page above the category description. It's the drawer's
	   immediate sibling (#left_column), so it slides in sync with .PM_ASBlockOutput.open
	   and pins to the bottom of the drawer as a help footer. */
	#left_column .f-help {
		position: fixed;
		left: -320px;
		bottom: 0;
		width: 300px;
		margin: 0;
		border: 0;
		border-top: 1px solid #dbe4ef;
		border-radius: 0;
		padding: 13px 16px;
		z-index: 999999;
		box-shadow: 0 -6px 16px rgba(15, 23, 42, .08);
		transition: left .5s;
	}
	#left_column .PM_ASBlockOutput.open + .f-help { left: 0; }
	#left_column .f-help p { margin-bottom: 6px; }
}

/* =====================================================================
   MOBILE sort+filter toolbar (?v=21) — Alza-style "Zoradiť ▾" + "Filter"
   side by side. The native <select.selectProductSort> overlays the face
   (opacity 0) → native picker on tap, existing auto-submit JS, zero new JS.
   Markup in category.tpl (.es-mobile-toolbar) — category pages only.
   ===================================================================== */
.es-mobile-toolbar { display: none; }
@media (max-width: 767px) {
	.es-mobile-toolbar {
		display: flex;
		gap: 10px;
		margin: 14px 0 2px;
	}
	.es-mobile-toolbar > * { flex: 1 1 0; min-width: 0; }
	.sort-mobile { position: relative; }
	/* both controls share one clean look */
	.sort-mobile-face,
	.es-mobile-toolbar #buttonfiltermobile #toggleFilterBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 46px;
		margin: 0;
		padding: 0 10px;
		border: 1.5px solid #003a78 !important;
		border-radius: 10px !important;
		background: #003a78 !important;   /* modré pozadie + biely text (Alza štýl) — viditeľnejšie, odlíši sa od obsahu */
		color: #fff !important;
		font: 700 14px/1 'Inter', 'Open Sans', sans-serif !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		cursor: pointer;
	}
	.sort-mobile-face:active,
	.es-mobile-toolbar #buttonfiltermobile #toggleFilterBtn:active {
		background: #06294f !important;
		border-color: #06294f !important;
	}
	.sort-mobile-face i.fa,
	.es-mobile-toolbar #buttonfiltermobile #toggleFilterBtn i.fa { color: #fff !important; font-size: 15px; }
	.sort-mobile-face .sm-caret { color: rgba(255, 255, 255, .85); margin-left: 2px; }
	/* transparent native select overlays the face → native menu on tap */
	.sort-mobile select {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}
	.es-mobile-toolbar #buttonfiltermobile { display: block; width: auto; margin: 0; padding: 0; }
	/* the toolbar replaces the top sort/pagination bar on category mobile */
	body#category .content_sortPagiBar.container { display: none; }
}

/* =====================================================================
   CATEGORY TOP (?v=22) — H1, collapsible description, Poradíme guide band.
   ===================================================================== */
/* ---- H1 (modernise legacy grey uppercase → navy Inter Tight) ---- */
.content_scene_cat h1.page-heading,
.content_scene_cat h1.page-heading .cat-name {
	color: #0a2a4c;
	text-transform: none;
}
.content_scene_cat h1.page-heading {
	font: 800 26px/1.2 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	letter-spacing: -.01em;
	margin: 0 0 12px;
}
.content_scene_cat h1.page-heading .cat-name { font: inherit; }

/* ---- Collapsible description (lead + "Zobraziť viac", full text stays in DOM) ---- */
.content_scene_cat .cat_desc.rte { border: 0; }
.cat-desc-cb { display: none; }
.cat-desc-text {
	position: relative;
	max-width: 78ch;
	overflow: hidden;
	max-height: 5em;                 /* ~3 lines collapsed = the "lead" */
	font: 400 15px/1.65 'Inter', 'Open Sans', sans-serif;
	color: #28323d;                  /* tmavá, dobre čitateľná na svetlomodrej karte */
	transition: max-height .35s ease;
}
.cat-desc-text > *:first-child { margin-top: 0; }
.cat-desc-text::after {            /* soft fade hint over the clamp */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2.4em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 90%);
	pointer-events: none;
}
.cat-desc-cb:checked ~ .cat-desc-text { max-height: 240em; }
.cat-desc-cb:checked ~ .cat-desc-text::after { opacity: 0; }
.cat-desc-text--full { max-height: none; }
.cat-desc-text--full::after { display: none; }
.cat-desc-toggle {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	font: 700 13.5px/1 'Inter', 'Open Sans', sans-serif;
	color: #003a78;
	cursor: pointer;
	user-select: none;
}
.cat-desc-toggle::after { content: "Zobraziť viac \25BE"; }   /* ▾ */
.cat-desc-cb:checked ~ .cat-desc-toggle::after { content: "Zobraziť menej \25B4"; }  /* ▴ */
.cat-desc-toggle:hover { color: #E65100; }

/* =====================================================================
   STACKED full-width category top (?v=28, mockup "Variant C"):
   1) .es-head = H1 + site-level proof pill
   2) .es-intro = "Kde začať" karta (kicker + collapsible popis + trust row)
   3) .es-advisor-bar = wide navy Poradca bar (orange CTA → článok)
   Nahrádza staré 2-col .es-hero / .es-advisor karty.
   ===================================================================== */
.cat_desc.es-top { margin-bottom: 14px; }

/* ---- 1) H1 row + proof pill ---- */
.es-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
}
.es-head h1.page-heading { margin: 0; padding-bottom: 0; line-height: 1.1; }   /* kill legacy padding-bottom:17px → pill sadne opticky na stred s textom; intro karta drží spodný odstup */
/* site-level proof pill (hardcoded, univerzálny — text v es-proof-pill.tpl) */
.es-proof {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border-radius: 999px;
	background: #f3f7fc;
	border: 1px solid #dbe6f2;
	font: 400 13px/1 'Inter', 'Open Sans', sans-serif;
	color: #475467;
	white-space: nowrap;
}
.es-proof-stars { display: inline-flex; align-items: center; color: #F5A623; font-size: 14px; line-height: 1; }
.es-proof-score { font-weight: 800; color: #0a2a4c; line-height: 1; }
.es-proof-sep { color: #b6c4d6; }
.es-proof-div { flex: 0 0 auto; width: 1px; height: 13px; margin: 0 6px; background: #cdd9e6; }
.es-proof-lbl { font-size: 12px; color: #6b7a8d; }
.es-proof-src {
	margin-left: 5px;
	padding-left: 9px;
	border-left: 1px solid #dbe6f2;
	font-size: 12px;
	color: #6b7a8d;
}

/* ---- 2) "Kde začať" intro card ---- */
.es-intro {
	margin-top: 16px;
	padding: 16px 20px;
	border-radius: 14px;
	background: #f3f7fc;
	border: 1px solid #e4edf6;
	border-left: 3px solid #F57C00;
}
.es-intro-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
	font: 800 13px/1.2 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-intro-kicker .fa { color: #F57C00; font-size: 15px; }
/* popis vo vnútri karty: zruš biely fade (karta má farebné pozadie) */
.es-intro .cat_desc.rte { border: 0; margin: 0; }
/* BEZ fade — text nemá miznúť do stratena; čistý clamp + "Zobraziť viac" (user 2026-06-03) */
.es-intro .cat-desc-text::after { display: none; }
.es-intro .cat-desc-text h4 { color: #0a2a4c; }

/* intro body = text (čitateľná šírka) + "V skratke" panel vpravo (es-glance.tpl) */
.es-intro-body {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
/* ľavý stĺpec = kicker + text; glance vpravo zarovná vrch s kickerom (user 2026-06-03) */
.es-intro-main { flex: 1 1 auto; min-width: 0; }
.es-intro-text { min-width: 0; }
.es-glance {
	flex: 0 0 320px;
	align-self: flex-start;
	background: #fff;
	border: 1px solid #e1ebf5;
	border-radius: 12px;
	padding: 13px 16px;
}
.es-glance-h {
	margin-bottom: 10px;
	font: 800 11px/1 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #F57C00;
}
/* 2×N grid — namiesto vysokého vertikálneho zoznamu (user 2026-06-03): polovičná výška, škáluje */
.es-glance-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px 16px;
}
.es-glance-li { padding: 0; }
.es-glance-t {
	display: block;
	font: 700 12.5px/1.25 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-glance-hint {
	display: block;
	margin-top: 2px;
	font: 400 11.5px/1.35 'Inter', 'Open Sans', sans-serif;
	color: #6b7a8d;
}
/* Stack "V skratke" POD text už od tabletu (≤1199): so sidebarom je obsahový stĺpec úzky,
   2-stĺpcový intro by stlačil text do nečitateľne úzkeho stĺpca (user 2026-06-03 @970px).
   2-stĺpec (text | panel) ostáva len ≥1200px, kde je dosť miesta. */
@media (max-width: 1199px) {
	.es-intro-body { flex-direction: column; gap: 14px; }
	.es-glance { flex: 0 0 auto; width: 100%; }
}

/* trust row (spodok karty, 3 univerzálne inline signály — es-trustrow.tpl) */
.es-trustrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid #e4edf6;
}
.es-htr {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.es-htr i.fa { color: #16a34a; font-size: 18px; flex: 0 0 auto; }
.es-htr .es-htr-tx { display: flex; flex-direction: column; }
.es-htr .es-htr-tx b { font: 700 13px/1.25 'Inter', 'Open Sans', sans-serif; color: #28323d; }
.es-htr .es-htr-tx small { font: 400 12px/1.25 'Inter', 'Open Sans', sans-serif; color: #6b7a8d; }

/* ---- 3) Wide navy Poradca bar (full width) ---- */
.es-advisor-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	padding: 14px 20px;
	border-radius: 14px;
	background: linear-gradient(120deg, #082544, #0d3a6b);
	color: #fff;
	text-decoration: none;
}
.es-advisor-bar-ic {
	flex: 0 0 42px;
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #ffd9b8;
	font-size: 18px;
}
.es-advisor-bar-main {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.es-advisor-bar-main:hover { text-decoration: none; }
.es-advisor-bar-tx { flex: 1 1 auto; min-width: 0; }
.es-advisor-bar-kicker {
	display: block;
	font: 800 11px/1 'Inter', 'Open Sans', sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #ffb784;
	margin-bottom: 4px;
}
.es-advisor-bar-title {
	display: block;
	font: 700 15.5px/1.3 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	color: #fff;
}
.es-advisor-bar-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 10px;
	background: #F57C00;
	color: #fff !important;   /* prebíja legacy .content_scene_cat .content_scene .cat_desc a {color:#777} */
	font: 800 13.5px/1 'Inter', 'Open Sans', sans-serif;
	white-space: nowrap;
	transition: background .15s;
}
.es-advisor-bar-cta:hover { background: #E65100; }
/* sekundárny odkaz — scroll dole na es-bottom (sprievodca/FAQ/SEO), user 2026-06-03 */
.es-advisor-bar-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px 16px;
}
.es-advisor-bar-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 16px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .34);
	color: #fff !important;   /* prebíja legacy .content_scene_cat .content_scene .cat_desc a {color:#777} */
	font: 700 13px/1 'Inter', 'Open Sans', sans-serif;
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.es-advisor-bar-more:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff !important; text-decoration: none; }
/* anchor target — odsadenie od sticky hlavičky pri skoku */
#es-cat-more { scroll-margin-top: 90px; }

@media (max-width: 767px) {
	.es-head { gap: 6px 12px; }
	.es-proof { padding: 5px 11px; font-size: 12px; }
	.es-proof-src { display: none; }                 /* úspora miesta na mobile */
	.es-intro { padding: 14px 15px; }
	.es-advisor-bar { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
	.es-advisor-bar-main { flex: 1 1 100%; }
	.es-advisor-bar-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
	.es-advisor-bar-cta { width: 100%; justify-content: center; }
	.es-advisor-bar-more { justify-content: center; }
}

/* =====================================================================
   CATEGORY DESCRIPTION — drobné CSS úpravy obsahu pred kompletným rewritom
   (?v=25). Scoped na .cat-desc-text. Popis je ručné HTML (h4, fa-plus/minus
   pseudo-zoznamy, ul). Cieľ: aby +/− a nadpisy sadli do dizajnu.
   ===================================================================== */
.cat-desc-text p { margin: 0 0 12px; }
.cat-desc-text h4 {
	margin: 20px 0 10px;
	font: 800 16px/1.3 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
/* pros/cons riadky (i.fa + span + <br>) — vzdušnejšie, zarovnané */
.cat-desc-text .fa-plus,
.cat-desc-text .fa-minus {
	width: 1.15em;
	margin-right: 7px;
	font-size: 13px;
	text-align: center;
	line-height: 1.7;
}
/* + → ✓ (zelená), − → ✗ (červená) — jemnejšie tóny, prebíja inline color */
.cat-desc-text .fa-plus { color: #16a34a !important; }
.cat-desc-text .fa-plus::before { content: "\f00c"; }   /* check */
.cat-desc-text .fa-minus { color: #dc2626 !important; }
.cat-desc-text .fa-minus::before { content: "\f00d"; }  /* times */
/* riadkovanie pseudo-zoznamu (span medzi <br>) */
.cat-desc-text .fa-plus + span,
.cat-desc-text .fa-minus + span { line-height: 1.9; }
/* skutočný zoznam (Možnosti výbavy) */
.cat-desc-text ul {
	margin: 6px 0 12px;
	padding-left: 0;
	list-style: none;
}
.cat-desc-text ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 7px;
	line-height: 1.55;
}
.cat-desc-text ul li::before {
	content: "";
	position: absolute;
	left: 2px; top: 9px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #F57C00;
}

/* =====================================================================
   FILTER — "Nová energetická trieda" farebné EU swatch-e (?v=27, #081).
   Scope `.PM_ASEnergyNew` (pridané v checkbox tpl LEN keď názov skupiny
   obsahuje "Nová energ"); stará "Energetická trieda" ostáva BEZ farieb.
   ===================================================================== */
.PM_ASEnergyNew li[data-ec] .PM_ASLabelLink { display: inline-flex; align-items: center; }
.PM_ASEnergyNew li[data-ec] .PM_ASLabelLink::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 15px;
	margin-right: 9px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, .12);
}
.PM_ASEnergyNew li[data-ec="A"] .PM_ASLabelLink::before { background: #00a651; }   /* zelená */
.PM_ASEnergyNew li[data-ec="B"] .PM_ASLabelLink::before { background: #51b848; }
.PM_ASEnergyNew li[data-ec="C"] .PM_ASLabelLink::before { background: #c3d62e; }
.PM_ASEnergyNew li[data-ec="D"] .PM_ASLabelLink::before { background: #fff200; }   /* žltá */
.PM_ASEnergyNew li[data-ec="E"] .PM_ASLabelLink::before { background: #fdb913; }
.PM_ASEnergyNew li[data-ec="F"] .PM_ASLabelLink::before { background: #f37021; }
.PM_ASEnergyNew li[data-ec="G"] .PM_ASLabelLink::before { background: #ed1c24; }   /* červená */
/* vybraná hodnota = tmavý prstenec okolo swatchu */
.PM_ASEnergyNew li[data-ec] .PM_ASLabelCheckboxSelected .PM_ASLabelLink::before {
	box-shadow: 0 0 0 2px #0a2a4c;
}

/* =====================================================================
   REDESIGN 2026 (es_cat) — per-category content blocks (?v=31).
   TOP: .es-qf quick-filter chips (po .es-advisor-bar, vnútri .es-top).
   BOTTOM: .es-bottom = SEO text + FAQ + Sprievodca karty + Značky
   (pod gridom v category.tpl; mimo #PM_ASearchResults v search-results.tpl).
   Tokeny zladené s redesignom: Inter, navy #0a2a4c, orange #F57C00,
   border #e5e7eb, radius 14. Hardcoded hex (mimo .PM_ASBlockOutputVertical scope).
   ===================================================================== */

/* ---- TOP: quick-filter chips ---- */
.es-qf {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.es-qf-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid #e5e7eb;
	background: #fff;
	font: 600 13px/1 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}
.es-qf-chip:hover,
.es-qf-chip:focus {
	border-color: #F57C00;
	color: #E65100;
	background: #fff7f0;
	text-decoration: none;
}

/* AJAX filter (pm_advancedsearch4) pripája #PM_ASearchResults na KONIEC #center_column —
   ZA staticky vykreslený es-bottom → Sprievodca/FAQ skončili NAD produktami a prekrývali grid.
   Fix: flex-column + es-bottom order:1 = vždy posledný, nech modul vloží results kdekoľvek.
   POZOR na DVA body id: `category` (AJAX na kategórii) AJ `module-pm_advancedsearch4-searchresults`
   (full-load filter URL — po AJAX kliku body id ostáva, takže scope musí pokryť oba, inak sa
   pri reťazení filtrov bug vráti). Iné stránky s #center_column nedotknuté (es-bottom tam nie je). */
body#category #center_column,
body#module-pm_advancedsearch4-searchresults #center_column {
	display: flex;
	flex-direction: column;
}
body#category #center_column > #es-cat-more,
body#module-pm_advancedsearch4-searchresults #center_column > #es-cat-more { order: 1; }

/* ---- BOTTOM wrapper ---- */
.es-bottom {
	margin: 28px 0 8px;
	font-family: 'Inter', 'Open Sans', sans-serif;
	color: #1e4e82;
}
/* Full-width: pod produktmi využiť aj prázdny ľavý sidebar priestor (len keď je
   sidebar = #center_column.col-sm-9; bez sidebaru/mobil sa neaplikuje). */
@media (min-width: 768px) {
	#center_column.col-sm-9 .es-bottom {
		width: 133.333%;
		margin-left: -33.333%;
	}
}
.es-bottom > section,
.es-bottom > .es-bottom-cols { margin-top: 40px; }
.es-bottom > section:first-child,
.es-bottom > .es-bottom-cols:first-child { margin-top: 0; }
/* SEO + FAQ vedľa seba (2-stĺpec); 1 blok = plná šírka, 2 = vedľa seba; mobil stack */
.es-bottom-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 36px 44px;
	align-items: start;
}

/* ---- Section header (kicker + title) — mockup štýl ---- */
.es-sec-head { margin-bottom: 18px; }
.es-sec-tag { font: 600 11px/1 'Inter Tight', 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; }
.es-sec-title { margin: 0; font: 800 24px/1.1 'Inter Tight', 'Inter', 'Open Sans', sans-serif; color: #0a2a4c; letter-spacing: -.02em; }

/* ---- 3) SEO text ---- */
.es-seo {
	max-width: none;
	color: #475467;
	font-size: 15px;
	line-height: 1.7;
}
.es-seo p { max-width: none; }
.es-seo h2 {
	margin: 0 0 12px;
	font: 800 22px/1.25 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-seo h3 {
	margin: 22px 0 8px;
	font: 700 17px/1.3 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-seo p { margin: 0 0 12px; }
.es-seo ul, .es-seo ol { margin: 0 0 12px; padding-left: 22px; }
.es-seo li { margin-bottom: 6px; }
.es-seo a { color: #003a78; text-decoration: underline; }
.es-seo a:hover { color: #E65100; }

/* ---- 4) FAQ (native <details>) ---- */
.es-faq { max-width: none; }
.es-faq-wrap { max-width: none; }
.es-faq-title {
	margin: 0 0 14px;
	font: 800 22px/1.25 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-faq-item {
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	margin-bottom: 10px;
	overflow: hidden;
}
.es-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 15px 46px 15px 18px;
	position: relative;
	font: 700 15px/1.4 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-faq-item summary::-webkit-details-marker { display: none; }
.es-faq-item summary::after {
	content: "\002B"; /* + */
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 400;
	color: #F57C00;
	line-height: 1;
	transition: transform .15s;
}
.es-faq-item[open] summary::after { content: "\2212"; /* − */ }
.es-faq-item summary:hover { color: #E65100; }
.es-faq-ans {
	padding: 0 18px 16px;
	color: #475467;
	font-size: 14px;
	line-height: 1.7;
}
.es-faq-ans p { margin: 0 0 10px; }
.es-faq-ans p:last-child { margin-bottom: 0; }
.es-faq-ans a { color: #003a78; text-decoration: underline; }
.es-faq-ans a:hover { color: #E65100; }

/* ---- 5) Sprievodca / guide karty ---- */
.es-guide-grid {
	display: grid;
	grid-template-columns: 1fr;   /* mobil: stack pod-druhým (žiadne 2+1 s medzerou) */
	gap: 16px;
}
@media (min-width: 768px) {
	/* N kariet = N rovnakých stĺpcov → vyplnia celú šírku (--es-guide-n z tpl podľa počtu) */
	.es-guide-grid { grid-template-columns: repeat(var(--es-guide-n, 3), 1fr); }
}
.es-guide-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	padding: 10px;                 /* obrázok odsadený → môže mať zaoblené VŠETKY rohy (blog štýl) */
	text-decoration: none;
	transition: box-shadow .2s, transform .15s, border-color .15s;
}
.es-guide-card:hover {
	box-shadow: 0 8px 22px rgba(10, 42, 76, .10);
	transform: translateY(-2px);
	text-decoration: none;
}
.es-guide-ic {
	height: 78px;
	display: grid;
	place-items: center;
	color: #003a78;
	background: linear-gradient(160deg, #fff, #f3f6fb);
	border: 1px solid #eef2f7;
	border-radius: 10px;
}
.es-guide-ic svg { width: 34px; height: 34px; }
/* obrázkový variant — cover foto z blogu, 16:9 ako blog Poradňa (nižšie, elegantnejšie), zaoblené všetky rohy */
.es-guide-ic--img {
	height: auto;
	aspect-ratio: 16 / 9;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
}
.es-guide-ic--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.es-guide-card:hover .es-guide-ic--img img { transform: none; }
.es-guide-b {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 8px 4px;
}
.es-guide-gk {
	font: 800 10.5px/1 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #F57C00;
}
.es-guide-h3 {
	font: 700 16.5px/1.3 'Inter Tight', 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-guide-read {
	margin-top: 6px;
	font: 600 13.5px/1 'Inter', 'Open Sans', sans-serif;
	color: #003a78;
}
.es-guide-card:hover .es-guide-read { color: #E65100; }

/* ---- 6) Značky (brand links) ---- */
.es-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	padding-top: 6px;
}
.es-brands-lbl {
	font: 700 14px/1.5 'Inter', 'Open Sans', sans-serif;
	color: #0a2a4c;
}
.es-brands-links a {
	font: 600 14px/1.5 'Inter', 'Open Sans', sans-serif;
	color: #003a78;
	text-decoration: none;
}
.es-brands-links a:hover { color: #E65100; text-decoration: underline; }
.es-brands-sep { margin: 0 6px; color: #cdd9e6; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
	.es-bottom { margin-top: 22px; }
	.es-bottom > section { margin-top: 22px; }
	.es-seo h2, .es-faq-title { font-size: 19px; }
	.es-guide-grid { grid-template-columns: 1fr; }
	.es-qf-chip { padding: 6px 13px; font-size: 12px; }
}