/* ============================================================================
   assets/css/shop.css — lucide-sk
   ----------------------------------------------------------------------------
   Enqueue: wp_enqueue_scripts (functions.php → lucide_sk_enqueue_front),
   podmienka `is_woocommerce() || is_cart() || is_checkout()`, závislosť
   `lucide-sk-tokens`.

   Čo je v tokens.css a tu sa NEOPAKUJE: mriežky (.lu-shop-layout,
   .lu-detail-layout, .lu-grid), pomer strán a object-fit obrázka
   (.lu-card__media img), kostra karty (.lu-card, .lu-card__cta), tlačidlá
   (.lu-btn*), dostupnosť (.lu-availability*), ceny (.lu-price*), štítok
   (.lu-badge), USP pás (.lu-usp-row) a lepivý nákupný box (.lu-buybox).
   Tu je len to, čo z toho robí hotový obchod.

   Mobile-first. Farby výhradne z --lu-* / --wp--preset--*.
   ========================================================================== */

/* ============================================================================
   1. RÁM ARCHÍVU — omrvinky, hlavička kategórie, toolbar
   ========================================================================== */
.lu-main--shop,
.lu-main--product {
	padding-block-end: var(--lu-sp-60);
}

.lu-crumbs {
	column-gap: var(--lu-sp-15);
	row-gap: var(--lu-sp-5);
	padding-block: var(--lu-sp-15);
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
}

.lu-crumbs a {
	color: var(--lu-ink-muted);
}

.lu-crumbs a:hover {
	color: var(--lu-black);
}

.lu-back {
	margin: 0;
}

.lu-cathead {
	border-block-end: 1px solid var(--lu-line-soft);
}

.lu-cathead__title {
	margin: 0;
	line-height: var(--lu-lh-tight);
}

/* ---- toolbar: počet výsledkov + „Oldalanként“ + radenie -------------------- */
.lu-toolbar {
	column-gap: var(--lu-sp-15);
	row-gap: var(--lu-sp-10);
	padding-block: var(--lu-sp-15);
}

.lu-toolbar__count {
	margin: 0;
	color: var(--lu-count);
	font-size: var(--lu-fs-sm);
}

.lu-toolbar__right {
	column-gap: var(--lu-sp-15);
	row-gap: var(--lu-sp-10);
}

.lu-perpage {
	display: flex;
	align-items: center;
	gap: var(--lu-sp-10);
	margin: 0;
}

.lu-perpage__label {
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
	white-space: nowrap;
}

.lu-perpage__select,
.lu-toolbar__sort select,
.lu-orderby {
	min-block-size: 44px;
	padding: 8px 12px;
	background: var(--lu-white);
	color: var(--lu-ink);
	border: 1px solid var(--lu-line);
	border-radius: var(--lu-r-0);
	font-family: var(--lu-font-body);
	font-size: var(--lu-fs-sm);
	cursor: pointer;
}

.lu-toolbar__sort {
	margin: 0;
}

/* ============================================================================
   2. PANEL FILTROV (blocks/product-filters)
   ----------------------------------------------------------------------------
   Pod 992 px je to blok nad mriežkou, od 992 px lepivý bočný panel.
   Hodnoty sú odkazy — štvorček .lu-facet__box je čisto dekoratívny, preto
   nesmie byť jediným nositeľom stavu: aktívna hodnota je aj tučná a tmavšia.
   ========================================================================== */
.lu-filters {
	padding: var(--lu-sp-15);
	background: var(--lu-white);
	border: 1px solid var(--lu-line-soft);
}

.lu-filters__head {
	display: flex;
	align-items: center;
	gap: var(--lu-sp-10);
	padding-block-end: var(--lu-sp-10);
	border-block-end: 1px solid var(--lu-line-soft);
}

.lu-filters__title {
	margin: 0;
	font-size: var(--lu-fs-md);
	font-weight: var(--lu-fw-medium);
	letter-spacing: var(--lu-ls-caps);
	text-transform: uppercase;
}

.lu-filters__reset {
	margin-inline-start: auto;
	font-size: var(--lu-fs-sm);
	white-space: nowrap;
}

.lu-filters__summary {
	margin: var(--lu-sp-10) 0 0;
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
}

.lu-filters__chips,
.lu-no-results__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: var(--lu-sp-10) 0 0;
	padding: 0;
	list-style: none;
}

/* ---- štítok zaškrtnutej hodnoty ----------------------------------------- */
.lu-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-block-size: 32px;
	padding: 4px 10px;
	background: var(--lu-surface-alt);
	color: var(--lu-ink);
	border-radius: var(--lu-r-pill);
	font-size: var(--lu-fs-xs);
	text-decoration: none;
}

.lu-chip:hover,
.lu-chip:focus-visible {
	background: var(--lu-surface-alt-hover);
	color: var(--lu-black);
	text-decoration: none;
}

.lu-chip__group {
	color: var(--lu-ink-muted);
}

.lu-icon--chip {
	inline-size: 12px;
	block-size: 12px;
	flex: none;
}

/* ---- jedna skupina faciet ------------------------------------------------ */
.lu-facet {
	border-block-end: 1px solid var(--lu-line-soft);
}

.lu-facet__summary {
	display: flex;
	align-items: center;
	gap: var(--lu-sp-10);
	padding-block: 12px;
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-medium);
	list-style: none;
	cursor: pointer;
}

.lu-facet__summary::-webkit-details-marker {
	display: none;
}

/* šípka: samostatný ::after, aby text summary ostal celý klikateľný */
.lu-facet__summary::after {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	margin-inline-start: auto;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--lu-t-fast);
}

.lu-facet[open] > .lu-facet__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.lu-facet__active {
	display: inline-grid;
	place-items: center;
	min-inline-size: 20px;
	block-size: 20px;
	padding-inline: 5px;
	background: var(--lu-blue-dark);
	color: var(--lu-white);
	border-radius: var(--lu-r-pill);
	font-size: var(--lu-fs-xs);
	line-height: 1;
}

.lu-facet__list {
	margin: 0 0 var(--lu-sp-10);
	padding: 0;
	list-style: none;
}

.lu-facet__link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: 32px;
	padding-block: 4px;
	color: var(--lu-ink);
	font-size: var(--lu-fs-sm);
	text-decoration: none;
}

.lu-facet__link:hover,
.lu-facet__link:focus-visible {
	color: var(--lu-black);
	text-decoration: underline;
}

.lu-facet__box {
	position: relative;
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	background: var(--lu-white);
	border: 1px solid var(--lu-line);
	border-radius: var(--lu-r-0);
}

.lu-facet__link.is-active {
	font-weight: var(--lu-fw-medium);
}

.lu-facet__link.is-active .lu-facet__box {
	background: var(--lu-blue-dark);
	border-color: var(--lu-blue-dark);
}

.lu-facet__link.is-active .lu-facet__box::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 5px;
	inline-size: 4px;
	block-size: 8px;
	border-inline-end: 2px solid var(--lu-white);
	border-block-end: 2px solid var(--lu-white);
	transform: rotate(45deg);
}

.lu-facet__name {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.lu-facet__count {
	margin-inline-start: auto;
	color: var(--lu-count);
	font-size: var(--lu-fs-xs);
}

.lu-facet__more {
	margin-block-end: var(--lu-sp-10);
}

.lu-facet__more-summary {
	padding-block: 6px;
	color: var(--lu-blue-dark);
	font-size: var(--lu-fs-sm);
	cursor: pointer;
}

/* ---- bočný panel od 992 px ----------------------------------------------- */
@media (min-width: 992px) {
	.lu-shop-layout__aside {
		position: sticky;
		top: calc(var(--lu-sticky-offset) + 20px);
		max-block-size: calc(100vh - var(--lu-sticky-offset) - 40px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ============================================================================
   3. MRIEŽKA PRODUKTOV
   ----------------------------------------------------------------------------
   POZOR: WooCommerce vkladá medzi obal `.lu-grid` a karty ešte zoznam
   (woocommerce/product-template). Mriežka z tokens.css by preto uložila do
   stĺpcov ten zoznam, nie karty. Obal sa tu vracia do bežného toku a počty
   stĺpcov sa prenášajú na zoznam — hranice ostávajú rovnaké ako v tokens.css
   (480 / 992 / 1440, štvrtý stĺpec len bez bočného panela).
   ========================================================================== */
.wp-block-woocommerce-product-collection.lu-grid {
	display: block;
}

.lu-grid > ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lu-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lu-grid > ul > li {
	display: flex;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

@media (min-width: 480px) {
	.lu-grid > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.lu-grid > ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	.lu-grid:not(.lu-grid--panel) > ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ============================================================================
   4. PRODUKTOVÁ KARTA
   ========================================================================== */
.lu-card {
	inline-size: 100%;
	padding: var(--lu-card-pad);
	gap: var(--lu-sp-10);
	transition: border-color var(--lu-t-base), box-shadow var(--lu-t-base);
}

/* core/group is-layout-constrained rieši odstupy marginmi; v karte ich drží gap */
.lu-card > * {
	margin-block: 0;
}

.lu-card:hover,
.lu-card:focus-within {
	border-color: var(--lu-line-soft);
	box-shadow: var(--lu-shadow-hover);
}

/* ---- médiá karty: hlavný obrázok + výmena za druhý pri hoveri ------------ */
.lu-card .lu-card__media {
	position: relative;
	inline-size: 100%;
	margin-block-end: var(--lu-sp-5);
}

.lu-card__media .lu-card__img,
.lu-card__media .lu-card__hover {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
}

.lu-card__media .lu-card__img a,
.lu-card__media .lu-card__img > div {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Druhý obrázok (blocks/card-second-image) je nad prvým a odkrýva ho
   `.is-hover`, ktoré nasadzuje assets/js/card-hover.js. */
.lu-card__hover {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--lu-t-base);
}

.lu-card.is-hover .lu-card__hover {
	opacity: 1;
}

/* akciový štítok od Woo drží roh, nech sa nezamieša do obrázka */
.lu-card__media .wc-block-components-product-sale-badge {
	position: absolute;
	inset-block-start: var(--lu-sp-10);
	inset-inline-start: var(--lu-sp-10);
	z-index: var(--lu-z-base);
	padding: 4px 8px;
	background: var(--lu-badge);
	color: var(--lu-white);
	border: 0;
	border-radius: var(--lu-r-0);
	font-size: var(--lu-fs-xs);
	font-weight: var(--lu-fw-bold);
	letter-spacing: var(--lu-ls-caps);
	text-transform: uppercase;
}

/* ---- texty karty ---------------------------------------------------------
   Veľkosť písma názvu určuje preset `has-large-font-size` (jadro ho generuje
   s !important), preto sa tu nastavuje len rez, riadkovanie a orezanie na
   dva riadky — inak by mriežka poskakovala podľa dĺžky názvu.               */
.lu-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-block-size: calc(2 * var(--lu-lh-tight) * 1em);
	line-height: var(--lu-lh-tight);
}

.lu-card__title a {
	color: var(--lu-ink);
	text-decoration: none;
}

.lu-card__title a:hover {
	color: var(--lu-black);
	text-decoration: underline;
}

.lu-card .lu-serial {
	margin: 0;
}

.lu-availability--card {
	font-size: var(--lu-fs-sm);
}

.lu-availability__eta {
	margin: 2px 0 0;
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-xs);
}

.lu-card__price {
	margin: 0;
	line-height: var(--lu-lh-price);
}

.lu-card__price del {
	margin-inline-end: 5px;
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-normal);
}

.lu-card__price ins {
	color: var(--lu-danger);
	text-decoration: none;
}

.lu-card__rule {
	margin-block: var(--lu-sp-5) 0;
	border-block-end-width: 1px;
	color: var(--lu-line-soft);
	opacity: 1;
}

/* ---- CTA lišta -----------------------------------------------------------
   Woo dáva triedu `.lu-btn` na OBAL tlačidla (div.wp-block-button), nie na
   samotný odkaz. Obal preto zbavíme vzhľadu tlačidla a prenesieme ho dnu.  */
.lu-card__cta {
	padding-block-start: var(--lu-sp-10);
}

.lu-btn.wp-block-button {
	min-block-size: 0;
	padding: 0;
	background: none;
	border: 0;
}

.lu-card__cta > * {
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
}

.lu-card__cta .wp-block-button__link,
.lu-card__cta .wp-block-read-more {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 44px;
	padding-inline: var(--lu-sp-10);
	font-size: var(--lu-fs-sm);
	text-align: center;
}

/* ============================================================================
   5. STRÁNKOVANIE
   ========================================================================== */
.lu-pagination {
	gap: 5px;
	margin-block-start: var(--lu-sp-40);
}

.lu-pagination .page-numbers,
.lu-pagination .wp-block-query-pagination-previous,
.lu-pagination .wp-block-query-pagination-next {
	display: inline-grid;
	place-items: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 12px;
	background: var(--lu-white);
	color: var(--lu-ink);
	border: 1px solid var(--lu-line-pagination);
	font-size: var(--lu-fs-sm);
	text-decoration: none;
}

.lu-pagination a:hover {
	background: var(--lu-surface-alt);
	color: var(--lu-black);
	text-decoration: none;
}

.lu-pagination .page-numbers.current {
	background: var(--lu-black);
	color: var(--lu-white);
	border-color: var(--lu-black);
	font-weight: var(--lu-fw-medium);
}

/* ============================================================================
   6. PRÁZDNY STAV (blocks/no-results)
   ========================================================================== */
.lu-no-results {
	padding: var(--lu-sp-40) var(--lu-sp-20);
	background: var(--lu-surface-alt);
	text-align: center;
}

.lu-no-results__title {
	margin: 0 0 var(--lu-sp-10);
	font-size: var(--lu-fs-xl);
}

.lu-no-results__lead {
	margin: 0 auto var(--lu-sp-15);
	max-inline-size: var(--lu-prose);
	color: var(--lu-ink-muted);
}

.lu-no-results__chips {
	justify-content: center;
	margin-block-end: var(--lu-sp-20);
}

.lu-no-results__chips .lu-chip {
	background: var(--lu-white);
}

.lu-no-results__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lu-sp-10);
	justify-content: center;
	margin: 0 0 var(--lu-sp-15);
}

.lu-no-results__help {
	margin: 0;
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
}

/* zástupný text dynamických blokov v editore aj na webe */
.lu-block-placeholder {
	margin: 0;
	padding: var(--lu-sp-15);
	background: var(--lu-surface-alt);
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
}

/* ============================================================================
   7. DETAIL PRODUKTU — nákupný box
   ----------------------------------------------------------------------------
   Lepivosť rieši tokens.css (.lu-buybox, top = výška navigačného pásu + 20).
   Tu je obsah boxu.
   ========================================================================== */
.lu-buybox {
	display: flex;
	flex-direction: column;
	gap: var(--lu-sp-15);
}

.lu-buybox > * {
	margin-block: 0;
}

.lu-detail__title {
	margin: 0;
	line-height: var(--lu-lh-tight);
}

.lu-detail__sub {
	margin: 0;
	line-height: var(--lu-lh-base);
}

.lu-buybox .lu-price__label {
	margin: 0;
}

.lu-buybox .lu-detail__price {
	margin: 0;
	color: var(--lu-blue-dark);
	font-size: var(--lu-fs-price-detail);
	font-weight: var(--lu-fw-bold);
	line-height: var(--lu-lh-price);
}

.lu-buybox .lu-detail__price del {
	margin-inline-end: var(--lu-sp-10);
	color: var(--lu-ink-muted);
	font-size: 0.5em;
	font-weight: var(--lu-fw-normal);
}

/* ≥ 24 px je „veľký text“, preto smie byť sýtejšia červená */
.lu-buybox .lu-detail__price ins {
	color: var(--lu-danger-strong);
	text-decoration: none;
}

.lu-availability--detail {
	font-size: var(--lu-fs-md);
}

/* ---- formulár do košíka --------------------------------------------------- */
.lu-addtocart form.cart,
.lu-addtocart .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--lu-sp-10);
	margin: 0;
}

.lu-addtocart .quantity input {
	inline-size: 84px;
	min-block-size: 48px;
	padding: 10px;
	background: var(--lu-white);
	color: var(--lu-ink);
	border: 1px solid var(--lu-line);
	border-radius: var(--lu-r-0);
	font-family: var(--lu-font-body);
	font-size: var(--lu-fs-md);
	text-align: center;
}

.lu-addtocart button,
.lu-addtocart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-block-size: 48px;
	padding: 13px 24px;
	background: var(--lu-black-pure);
	color: var(--lu-white);
	border: 0;
	border-radius: var(--lu-r-0);
	font-family: var(--lu-font-body);
	font-size: var(--lu-fs-md);
	font-weight: var(--lu-fw-medium);
	letter-spacing: var(--lu-ls-caps);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--lu-t-base);
}

.lu-addtocart button:hover,
.lu-addtocart .single_add_to_cart_button:hover {
	background: var(--lu-blue-dark);
}

.lu-addtocart .variations {
	inline-size: 100%;
	border-collapse: collapse;
}

.lu-addtocart .variations select {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 10px 15px;
	background: var(--lu-white);
	color: var(--lu-ink);
	border: 1px solid var(--lu-line);
	border-radius: var(--lu-r-0);
	font-family: var(--lu-font-body);
	font-size: var(--lu-fs-md);
}

/* ---- krémový blok výhod --------------------------------------------------- */
.lu-buybox__usp {
	color: var(--lu-ink); /* modrá na kréme má 3,27:1 — zakázaná */
}

.lu-usp-line {
	column-gap: 6px;
	row-gap: 0;
	align-items: baseline;
}

.lu-usp-line p {
	margin: 0;
}

.lu-shipping__amount {
	font-weight: var(--lu-fw-bold);
}

.lu-shipping__remaining,
.lu-shipping__reached {
	font-size: var(--lu-fs-sm);
}

.lu-usp-list {
	margin: var(--lu-sp-10) 0 0;
	padding: 0;
	list-style: none;
	line-height: 1.9;
}

/* ---- plávajúce CTA: len na mobile ---------------------------------------- */
.lu-floating-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	font-weight: var(--lu-fw-medium);
	text-align: center;
	text-decoration: none;
}

.lu-floating-cta:hover,
.lu-floating-cta:focus-visible {
	color: var(--lu-white);
	text-decoration: none;
}

@media (min-width: 992px) {
	.lu-floating-cta {
		display: none;
	}
}

/* ============================================================================
   8. DETAIL PRODUKTU — sekcie pod nákupným boxom
   ========================================================================== */
.lu-section {
	margin-block-start: var(--lu-sp-60);
}

.lu-section > h2 {
	margin-block-end: var(--lu-sp-20);
}

/* ---- energetický štítok (blocks/energy-label) ---------------------------- */
.lu-energy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lu-sp-10);
	margin: 0;
	font-size: var(--lu-fs-sm);
}

.lu-energy__class {
	display: inline-grid;
	place-items: center;
	min-inline-size: 34px;
	padding: 3px 8px;
	background: var(--lu-black-pure);
	color: var(--lu-white);
	border-radius: var(--lu-r-sm);
	font-weight: var(--lu-fw-bold);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Trieda je len doplnok farby — význam nesie text vedľa nej (WCAG 1.4.1). */
.lu-energy__class--a,
.lu-energy__class--b {
	background: var(--lu-success);
}

.lu-energy__class--c,
.lu-energy__class--d {
	background: var(--lu-blue-dark);
}

.lu-energy__class--e {
	background: var(--lu-eta);
}

.lu-energy__class--f,
.lu-energy__class--g {
	background: var(--lu-danger);
}

.lu-energy__text {
	color: var(--lu-ink-muted);
}

.lu-energy__link {
	font-size: var(--lu-fs-sm);
	text-decoration: underline;
}

/* ---- séria a krížový predaj: malé karty ---------------------------------- */
.lu-series__title {
	margin: 0 0 var(--lu-sp-10);
	font-size: var(--lu-fs-xl);
}

.lu-series__lead {
	margin: 0 0 var(--lu-sp-20);
	max-inline-size: var(--lu-prose);
	color: var(--lu-ink-muted);
}

.lu-minicards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lu-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.lu-minicards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.lu-minicard {
	background: var(--lu-white);
	border: 1px solid transparent;
	transition: border-color var(--lu-t-base), box-shadow var(--lu-t-base);
}

.lu-minicard:hover {
	border-color: var(--lu-line-soft);
	box-shadow: var(--lu-shadow-hover);
}

.lu-minicard__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	block-size: 100%;
	padding: var(--lu-sp-10);
	color: var(--lu-ink);
	text-decoration: none;
}

.lu-minicard__link:hover {
	color: var(--lu-ink);
	text-decoration: none;
}

.lu-minicard__media {
	display: block;
	inline-size: 100%;
}

.lu-minicard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-medium);
	line-height: 1.3;
}

.lu-minicard__sku,
.lu-minicard__avail,
.lu-minicard__price {
	margin: 0;
}

.lu-minicard__link:hover .lu-minicard__title {
	text-decoration: underline;
}

/* ---- USP piktogramy (blocks/usp-icons) -----------------------------------
   Blok si dáva na obal triedu `lu-usp`, ktorá je v tokens.css rezervovaná
   pre položku USP pásu (flex stĺpec, ikona 44 px). Tu ju prepisujeme
   na mriežku — bez zásahu do markupu bloku.                                 */
.lu-usp.lu-usp-icons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	flex: none;
	gap: var(--lu-sp-20);
	margin: 0;
	padding: var(--lu-sp-20) 0;
	list-style: none;
	border-block: 1px solid var(--lu-line-soft);
}

@media (min-width: 768px) {
	.lu-usp.lu-usp-icons {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.lu-usp-icons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.lu-usp-icons .lu-icon--usp {
	inline-size: 32px;
	block-size: 32px;
	stroke: currentColor;
	fill: none;
	color: var(--lu-blue-dark);
}

.lu-usp-icons .lu-usp-icons__label {
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-medium);
	letter-spacing: var(--lu-ls-caps);
	text-transform: uppercase;
}

.lu-usp-icons .lu-usp-icons__value {
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-normal);
	letter-spacing: normal;
	text-transform: none;
}

/* ---- technické parametre (blocks/technical-params) ----------------------- */
.lu-params__group {
	border-block-end: 1px solid var(--lu-line-soft);
}

.lu-params__summary {
	display: flex;
	align-items: center;
	gap: var(--lu-sp-10);
	padding-block: 14px;
	font-size: var(--lu-fs-md);
	font-weight: var(--lu-fw-medium);
	list-style: none;
	cursor: pointer;
}

.lu-params__summary::-webkit-details-marker {
	display: none;
}

.lu-params__summary::after {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	margin-inline-start: auto;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--lu-t-fast);
}

.lu-params__group[open] > .lu-params__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.lu-params__count {
	color: var(--lu-count);
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-normal);
}

.lu-params__table {
	inline-size: 100%;
	margin-block-end: var(--lu-sp-20);
	border-collapse: collapse;
	font-size: var(--lu-fs-sm);
}

.lu-params__row:nth-child(odd) {
	background: var(--lu-surface-alt);
}

.lu-params__key {
	inline-size: 45%;
	padding: 9px 12px;
	color: var(--lu-ink-muted);
	font-weight: var(--lu-fw-normal);
	text-align: start;
	vertical-align: top;
}

.lu-params__value {
	padding: 9px 12px;
	font-weight: var(--lu-fw-medium);
	vertical-align: top;
}

/* ---- na stiahnutie (blocks/downloads-row) -------------------------------- */
.lu-downloads__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lu-sp-10);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lu-downloads__item {
	margin: 0;
}

.lu-downloads__link {
	flex-wrap: wrap;
	justify-content: center;
}

.lu-downloads__note {
	inline-size: 100%;
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-xs);
	font-weight: var(--lu-fw-normal);
}

.lu-downloads__empty,
.lu-downloads__eprel {
	margin: var(--lu-sp-15) 0 0;
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
	text-align: center;
}

.lu-icon--download {
	flex: none;
}

/* ---- SEO text kategórie --------------------------------------------------- */
.lu-cat-seo {
	color: var(--lu-ink);
	line-height: var(--lu-lh-base);
}

/* ============================================================================
   9. KOŠÍK A POKLADŇA
   ----------------------------------------------------------------------------
   Blokový košík si nesie vlastné štýly; zjednocujeme len tvar (hranaté rohy),
   farbu hlavného tlačidla a linky, aby pokladňa nevyzerala ako iný web.
   ========================================================================== */
.wc-block-components-button:not(.is-link) {
	min-block-size: 48px;
	background: var(--lu-black-pure);
	color: var(--lu-white);
	border-radius: var(--lu-r-0);
	font-weight: var(--lu-fw-medium);
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--lu-blue-dark);
	color: var(--lu-white);
}

.wc-block-components-text-input input,
.wc-block-components-select__container,
.wc-block-components-address-form input {
	border-radius: var(--lu-r-0);
}

.wc-block-cart-items,
.wc-block-components-totals-item {
	border-color: var(--lu-line-cart);
}

.wc-block-components-totals-item__value {
	font-weight: var(--lu-fw-bold);
	color: var(--lu-blue-dark);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-color: var(--lu-error);
	color: var(--lu-error);
}

/* ============================================================================
   PJAX filtrovanie + cenový filter + dostupnosť (2026-08)
   ========================================================================== */
.lu-shop-layout.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.lu-price-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 2px 10px;
}

.lu-price-form__input {
	width: 76px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--lu-line, #ddd);
	border-radius: 3px;
	font-size: var(--lu-fs-sm, 0.875rem);
	background: var(--lu-white, #fff);
	color: var(--lu-ink, #333);
}
.lu-price-form__input:focus-visible {
	outline: 2px solid var(--lu-ink-strong, #0e0e0e);
	outline-offset: 1px;
}
/* šípky number inputu nechávame — sú užitočné; len Firefox default šírka */
.lu-price-form__dash { color: var(--lu-ink-muted, #8a8a8a); }

.lu-price-form__go {
	padding: 8px 14px;
	background: var(--lu-ink-strong, #0e0e0e);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lu-price-form__go:hover { background: #333; }

/* ============================================================================
   MODERNÉ FILTRE (2026-08): sticky sidebar, swatche, hľadanie, mobilný drawer
   ========================================================================== */

/* -- desktop: lepivý panel, ktorý sa sám scrolluje -- */
@media (min-width: 992px) {
	.lu-shop-layout__aside {
		position: sticky;
		top: calc(var(--lu-sticky-offset, 90px) + 12px);
		align-self: start;
		max-height: calc(100vh - var(--lu-sticky-offset, 90px) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding-right: 4px;
	}
	.lu-filters-toggle,
	.lu-filters__close,
	.lu-filters__apply { display: none; }
}

/* -- vizuálny poriadok skupín -- */
.lu-facet {
	border-bottom: 1px solid var(--lu-line, #e6e6e6);
	padding-block: 2px;
}
.lu-facet__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 0.15s ease;
}
.lu-facet__summary:hover { color: var(--lu-ink-strong, #0e0e0e); }
.lu-facet__count { margin-left: auto; color: var(--lu-ink-muted, #9a9a9a); font-size: 0.8rem; }

/* -- hľadanie v skupine -- */
.lu-facet__search {
	width: 100%;
	margin: 2px 0 8px;
	padding: 7px 10px;
	border: 1px solid var(--lu-line, #ddd);
	border-radius: 3px;
	font-size: 0.85rem;
	background: var(--lu-white, #fff);
	color: var(--lu-ink, #333);
}
.lu-facet__search:focus-visible {
	outline: 2px solid var(--lu-ink-strong, #0e0e0e);
	outline-offset: 1px;
}

/* -- farebné swatche -- */
.lu-facet__box--swatch {
	background: var(--lu-sw, #fff);
	border: 1px solid rgba(14, 14, 14, 0.25);
	border-radius: 50%;
}
.lu-facet__link.is-active .lu-facet__box--swatch {
	background: var(--lu-sw, #fff);
	box-shadow: 0 0 0 2px var(--lu-white, #fff), 0 0 0 4px var(--lu-ink-strong, #0e0e0e);
}
.lu-facet__link.is-active .lu-facet__box--swatch::after { content: none; }

/* -- mobil: off-canvas drawer -- */
.lu-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--lu-ink-strong, #0e0e0e);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}
.lu-filters-toggle::before { content: "⚲"; transform: rotate(-45deg); font-size: 1rem; }

@media (max-width: 991.98px) {
	.lu-shop-layout__aside {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1200;
		width: min(86vw, 400px);
		background: var(--lu-white, #fff);
		box-shadow: 8px 0 40px rgba(14, 14, 14, 0.22);
		transform: translateX(-104%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 16px 18px 84px;
	}
	.lu-filters-open .lu-shop-layout__aside { transform: translateX(0); }
	.lu-filters-open { overflow: hidden; }

	.lu-filters-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1190;
		background: rgba(14, 14, 14, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.28s ease;
	}
	.lu-filters-open .lu-filters-backdrop,
	html.lu-filters-open body .lu-filters-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.lu-filters__close {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		margin-left: auto;
		border: 0;
		background: transparent;
		font-size: 1.6rem;
		line-height: 1;
		color: var(--lu-ink, #333);
		cursor: pointer;
	}

	/* lepivé potvrdenie dole v draweri */
	.lu-filters__apply {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1210;
		width: min(86vw, 400px);
		padding: 12px 18px;
		background: var(--lu-white, #fff);
		box-shadow: 0 -6px 20px rgba(14, 14, 14, 0.12);
		transform: translateX(-104%);
		transition: transform 0.28s ease;
	}
	.lu-filters-open .lu-filters__apply { transform: translateX(0); }
	.lu-filters__apply-btn {
		width: 100%;
		padding: 12px;
		background: var(--lu-ink-strong, #0e0e0e);
		color: #fff;
		border: 0;
		border-radius: 3px;
		font-size: 0.86rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		cursor: pointer;
	}
}

/* -- Szín ako mriežka swatchov (štýl jogise.eu) ---------------------------- */
.lu-facet__list--swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px 2px 14px;
	list-style: none;
	margin: 0;
}
.lu-facet__item--swatch { margin: 0; }

.lu-swatch {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--lu-sw, #ccc);
	border: 1px solid rgba(14, 14, 14, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lu-swatch:hover,
.lu-swatch:focus-visible {
	transform: scale(1.14);
	box-shadow: 0 2px 8px rgba(14, 14, 14, 0.25);
}
.lu-swatch.is-active {
	box-shadow: 0 0 0 2px var(--lu-white, #fff), 0 0 0 4px var(--lu-ink-strong, #0e0e0e);
}

/* nemapované farby v swatch mriežke padajú na plný textový riadok */
.lu-facet__list--swatches .lu-facet__item:not(.lu-facet__item--swatch) {
	flex-basis: 100%;
}

/* Woo štýly (product-image.css, woocommerce-layout.css) sa načítajú PO našich
   a prebijú `height:100%` z tokens.css na `height:auto`. Portrait packshot
   (461×690) potom prečnieva zo štvorcového `.lu-card__media` a `overflow:hidden`
   ho oreže — to je ten „zoom". Preto tu height + width + contain s !important;
   object-fit sám o sebe nič nerobí, kým obrázok nemá výšku kontajnera. */
.lu-media img,
.lu-card__media img,
.lu-detail__media img,
.lu-card__media .lu-card__img img,
.lu-card__media .wc-block-components-product-image img,
.lu-card__media .wp-block-woocommerce-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: var(--lu-white, #fff);
}

/* ---- nekonečné scrolovanie ----------------------------------------------- */
.lu-infinite {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-block: clamp(18px, 3vw, 36px);
	min-height: 48px;
}

.lu-infinite__spinner {
	display: flex;
	gap: 6px;
}
.lu-infinite__spinner span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lu-ink-muted, #9a9a9a);
	animation: lu-dot 0.9s ease-in-out infinite;
}
.lu-infinite__spinner span:nth-child(2) { animation-delay: 0.15s; }
.lu-infinite__spinner span:nth-child(3) { animation-delay: 0.3s; }

@keyframes lu-dot {
	0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
	40%           { opacity: 1;    transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
	.lu-infinite__spinner span { animation: none; opacity: 0.6; }
}

.lu-infinite__more {
	padding: 12px 30px;
	background: var(--lu-ink-strong, #0e0e0e);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lu-infinite__more:hover { background: #333; }

.lu-infinite__end {
	margin: 0;
	color: var(--lu-ink-muted, #9a9a9a);
	font-size: 0.88rem;
}

/* Stránkovanie je pri bežiacom infinite scrolle len záloha pre SEO/bez-JS.
   Triedu nasadzuje infinite.js až keď sa naozaj aktivuje. */
.lu-infinite-on .lu-grid .wp-block-query-pagination { display: none; }