/* ============================================================================
   assets/css/tokens.css — lucide-sk
   ----------------------------------------------------------------------------
   ZDROJ PRAVDY JE theme.json. Väčšina tokenov nižšie sú len ALIASY na
   --wp--preset--* / --wp--custom--*. Ak sa má zmeniť farba, veľkosť písma,
   odsadenie, tieň alebo zaoblenie, mení sa to V theme.json a tento súbor
   sa nedotýka. Literálnu hodnotu tu majú len veci, ktoré theme.json nevie
   vyjadriť: media query, z-index, priehľadné overlaye, interné farby
   a :focus-visible.

   Enqueue: cez `enqueue_block_assets` (nie wp_enqueue_scripts) — musí byť
   načítaný aj v iframe editora, lebo root padding v theme.json je
   var(--lu-gutter, 15px).
   ========================================================================== */

:root {
	/* ---- root padding: jediná hodnota, ktorá sa mení media query ---------- */
	--lu-gutter: 15px;

	/* ---- farby: aliasy na paletu z theme.json ---------------------------- */
	--lu-white: var(--wp--preset--color--base);
	--lu-black: var(--wp--preset--color--contrast);
	--lu-black-pure: var(--wp--preset--color--footer-black);
	--lu-ink: var(--wp--preset--color--ink);
	--lu-ink-muted: var(--wp--preset--color--ink-muted);
	--lu-ink-placeholder: var(--wp--preset--color--ink-placeholder);
	--lu-ink-subtle: var(--wp--preset--color--ink-subtle);
	--lu-cream: var(--wp--preset--color--cream);
	--lu-surface-alt: var(--wp--preset--color--surface-alt);
	--lu-surface-warm: var(--wp--preset--color--surface-warm);
	--lu-blue: var(--wp--preset--color--accent);
	--lu-blue-dark: var(--wp--preset--color--accent-dark);
	--lu-nav-hover: var(--wp--preset--color--nav-hover);
	--lu-success: var(--wp--preset--color--success);
	--lu-success-dot: var(--wp--preset--color--success-dot);
	--lu-danger: var(--wp--preset--color--sale);
	--lu-badge: var(--wp--preset--color--badge);
	--lu-line: var(--wp--preset--color--line);
	--lu-disabled: var(--wp--preset--color--disabled);

	/* ---- farby, ktoré NEPATRIA do editorskej palety (interné) ------------ */
	--lu-danger-strong: #e82b00; /* len veľký text (cena na detaile) a plné plochy */
	--lu-search-btn: #282828;
	--lu-dropdown-hover: #d5d5d5;
	--lu-surface-alt-hover: #e7e7e7;
	--lu-line-soft: #e1e1e1;
	--lu-line-cart: #c4c4c4;
	--lu-line-pagination: #ddd;
	--lu-count: #666;
	--lu-error: #c71d1a;
	--lu-eta: #8a6d3b;
	--lu-black-a80: rgba(14, 14, 14, 0.8);
	--lu-black-a60: rgba(14, 14, 14, 0.6);
	--lu-usp-bar-bg: rgba(14, 14, 14, 0.85);
	--lu-scrim: rgba(0, 0, 0, 0.3);

	/* ---- typografia: aliasy na presety ----------------------------------- */
	--lu-font-body: var(--wp--preset--font-family--body);
	--lu-font-display: var(--wp--preset--font-family--display);
	--lu-fw-light: 300;
	--lu-fw-normal: 400;
	--lu-fw-medium: 600;
	--lu-fw-bold: 700;
	--lu-lh-tight: 1.1;
	--lu-lh-base: 1.55;
	--lu-lh-price: 1;
	--lu-ls-logo: var(--wp--custom--letter-spacing--logo);
	--lu-ls-hero: var(--wp--custom--letter-spacing--hero);
	--lu-ls-caps: var(--wp--custom--letter-spacing--caps); /* = 1px, pevná hodnota */

	--lu-fs-xs: var(--wp--preset--font-size--x-small);
	--lu-fs-sm: var(--wp--preset--font-size--small);
	--lu-fs-sm-plus: var(--wp--preset--font-size--small-plus);
	--lu-fs-md: var(--wp--preset--font-size--medium);
	--lu-fs-md-plus: var(--wp--preset--font-size--medium-plus);
	--lu-fs-lg: var(--wp--preset--font-size--large);
	--lu-fs-xl: var(--wp--preset--font-size--x-large);
	--lu-fs-2xl: var(--wp--preset--font-size--xx-large);
	--lu-fs-3xl: var(--wp--preset--font-size--xxx-large);
	--lu-fs-display: var(--wp--preset--font-size--display);
	--lu-fs-mega: var(--wp--preset--font-size--mega);

	/* veľkosti, ktoré nemá zmysel ponúkať redaktorovi v editore */
	--lu-fs-card-title: 1.2rem;
	--lu-fs-price-card: var(--wp--custom--price--card);
	--lu-fs-price-detail: var(--wp--custom--price--detail);
	--lu-fs-price-currency: 0.6em;
	--lu-fs-price-decimals: 0.5em;

	/* ---- odsadenia: aliasy na spacing presety ---------------------------- */
	--lu-sp-5: var(--wp--preset--spacing--xxs);
	--lu-sp-10: var(--wp--preset--spacing--xs);
	--lu-sp-15: var(--wp--preset--spacing--sm);
	--lu-sp-20: var(--wp--preset--spacing--md);
	--lu-sp-30: var(--wp--preset--spacing--lg);
	--lu-sp-40: var(--wp--preset--spacing--xl);
	--lu-sp-60: var(--wp--preset--spacing--xxl);
	--lu-sp-80: var(--wp--preset--spacing--xxxl);
	--lu-grid-gap: var(--wp--custom--grid--gap);
	--lu-grid-min: var(--wp--custom--grid--min);
	--lu-card-pad: 10px 20px;

	/* ---- tvar ------------------------------------------------------------ */
	--lu-r-0: var(--wp--custom--radius--none);
	--lu-r-sm: var(--wp--custom--radius--sm);
	--lu-r-md: var(--wp--custom--radius--md);
	--lu-r-lg: var(--wp--custom--radius--lg);
	--lu-r-pill: var(--wp--custom--radius--pill);
	--lu-r-circle: var(--wp--custom--radius--circle);
	--lu-shadow-none: var(--wp--preset--shadow--none);
	--lu-shadow-hover: var(--wp--preset--shadow--hover);
	--lu-shadow-panel: var(--wp--preset--shadow--panel);
	--lu-shadow-drawer: var(--wp--preset--shadow--drawer);

	/* ---- pohyb ----------------------------------------------------------- */
	--lu-t-fast: var(--wp--custom--transition--fast);
	--lu-t-base: var(--wp--custom--transition--base);
	--lu-t-slow: var(--wp--custom--transition--slow);
	--lu-zoom-hover: scale(1.05);

	/* ---- layout ---------------------------------------------------------- */
	--lu-container: 1440px;
	--lu-container-fluid: 91%;
	--lu-content: 1200px;
	--lu-prose: var(--wp--custom--prose);
	--lu-header-h: var(--wp--custom--header--height);
	--lu-nav-h: var(--wp--custom--header--nav-height);
	--lu-header-total: calc(var(--lu-header-h) + var(--lu-nav-h));
	--lu-sticky-offset: var(--lu-nav-h);
	--lu-aspect-product: var(--wp--custom--aspect--product);

	/* ---- vrstvenie ------------------------------------------------------- */
	--lu-z-base: 1;
	--lu-z-sticky: var(--wp--custom--z--sticky);
	--lu-z-header: var(--wp--custom--z--header);
	--lu-z-dropdown: var(--wp--custom--z--dropdown);
	--lu-z-drawer: var(--wp--custom--z--drawer);
	--lu-z-modal: var(--wp--custom--z--modal);
	--lu-z-toast: var(--wp--custom--z--toast);
}

/* ---- root padding: verná kaskáda lucide.com + priznaná odchýlka od 992 px --
   ich tretí stupeň je späť 15px; my dávame 24px, lebo v blokovej téme je root
   padding JEDINÉ odsadenie od okraja okna (nemáme ich .container 91 %).      */
@media (min-width: 768px) {
	:root { --lu-gutter: 30px; }
}
@media (min-width: 992px) {
	:root { --lu-gutter: 24px; }
}

/* ---- kompatibilita s jadrom ------------------------------------------------
   defaultSpacingSizes:false vypne jadrové presety so slugmi 20–80. Vložený
   jadrový alebo WooCommerce pattern na ne však môže odkazovať. Dopĺňame ich
   s PÔVODNÝMI JADROVÝMI hodnotami, aby cudzí pattern nespadol na nedefinovanú
   premennú.                                                                  */
:root {
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
}

/* ============================================================================
   FOCUS INDIKÁTOR
   NEPATRÍ do theme.json: WP_Theme_JSON povoľuje pre elements len :link,
   :any-link, :visited, :hover, :focus a :active. ":focus-visible" by WordPress
   ticho zahodil — bez chyby, bez varovania — a téma by nemala viditeľný focus.
   Obrys #2b66a7 vs biela = 5,90:1 → spĺňa SC 1.4.11 aj 2.4.11.
   ========================================================================== */
:where(a[href], area, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--lu-blue-dark);
	outline-offset: 2px;
	border-radius: 1px;
}

/* na tmavých pásoch (hlavička, pätka, USP pás) je obrys biely (19,31:1) */
.lu-header :focus-visible,
.lu-footer :focus-visible,
.lu-usp-row :focus-visible {
	outline-color: var(--lu-white);
}

/* ---- prefers-reduced-motion: token + jeho záchranná sieť, obe 1 ms ------- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--lu-t-fast: 1ms;
		--lu-t-base: 1ms;
		--lu-t-slow: 1ms;
		--lu-zoom-hover: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================
   ZÁKLADNÉ KOMPONENTY
   Len to, čo je spoločné pre celý web. Karta, mriežka, filtre a detail
   produktu majú vlastný assets/css/shop.css (samostatná dodávka).
   ========================================================================== */

/* skip link a vizuálne skryté texty (stav skladu, názvy farieb pri hoveri) */
.lu-visually-hidden:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lu-skip-link {
	position: absolute;
	left: -9999px;
	z-index: var(--lu-z-toast);
	background: var(--lu-black);
	color: var(--lu-white);
	padding: 10px 20px;
	font-weight: var(--lu-fw-medium);
}
.lu-skip-link:focus {
	left: var(--lu-sp-15);
	top: var(--lu-sp-10);
}

/* offset pre kotvy pod lepivým pásom navigácie (48 px) */
html {
	scroll-padding-top: calc(var(--lu-sticky-offset) + 20px);
}

/* ---- tlačidlá -------------------------------------------------------------
   Primárne CTA: čierne, hranaté, hover --lu-blue-dark (nie #397fcc — biely
   text na ňom má len 4,13:1 a padal by pod WCAG AA).                         */
.lu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lu-sp-10);
	min-height: 44px;
	padding: 13px 24px;
	border: 2px solid transparent; /* drží miesto, aby sa layout pri hoveri nehýbal */
	border-radius: var(--lu-r-0);
	font-family: var(--lu-font-body);
	font-size: var(--lu-fs-md);
	font-weight: var(--lu-fw-medium);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--lu-t-base), color var(--lu-t-base), border-color var(--lu-t-base);
}

.lu-btn--primary {
	background: var(--lu-black-pure);
	color: var(--lu-white);
}
.lu-btn--primary:hover,
.lu-btn--primary:focus-visible {
	background: var(--lu-blue-dark);
	color: var(--lu-white);
}

/* --ghost / --light sú názvy použité v šablónach a patternoch; sekundárne CTA
   („Detail", „Zobraziť viac") má rovnaký tvar ako primárne, len biele s rámom. */
.lu-btn--secondary,
.lu-btn--ghost,
.lu-btn--light {
	background: var(--lu-white);
	color: var(--lu-ink);
	border-color: var(--lu-line);
}
.lu-btn--secondary:hover,
.lu-btn--secondary:focus-visible,
.lu-btn--ghost:hover,
.lu-btn--ghost:focus-visible,
.lu-btn--light:hover,
.lu-btn--light:focus-visible {
	background: var(--lu-surface-alt);
	color: var(--lu-black);
}

/* pilulkové tlačidlo na stiahnutie (manuál, CE, 3D) */
.lu-btn--pill {
	background: var(--lu-surface-alt);
	color: #626262; /* 5,26:1 na #eee ✅ */
	border-radius: var(--lu-r-pill);
	font-size: var(--lu-fs-lg);
}
.lu-btn--pill:hover,
.lu-btn--pill:focus-visible {
	background: #888;
	color: var(--lu-white);
}
.lu-btn--pill svg { color: var(--lu-blue-dark); }

/* neaktívne: tmavý text na #BFBFBF (10,50:1), NIE biely (1,84:1) */
.lu-btn[aria-disabled="true"],
.lu-btn:disabled {
	background: var(--lu-disabled);
	color: var(--lu-black);
	border-color: transparent;
	cursor: default;
	pointer-events: none;
}

.lu-btn--block { width: 100%; }

/* plávajúce mobilné CTA na detaile produktu */
.lu-floating-cta {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: var(--lu-z-sticky);
	background: var(--lu-blue-dark); /* NIE #397fcc — biely text by mal 4,13:1 */
	color: var(--lu-white);
	border-radius: var(--lu-r-0);
	padding: 12px 6px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* ---- formulárové prvky --------------------------------------------------- */
.lu-input,
.lu-select,
.lu-textarea {
	width: 100%;
	min-height: 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);
	line-height: var(--lu-lh-base);
}
.lu-input::placeholder,
.lu-textarea::placeholder {
	color: var(--lu-ink-placeholder); /* 4,54:1 — nie #a2a2a2 (2,55:1) */
	opacity: 1;
}

/* ---- plochy -------------------------------------------------------------- */
.lu-surface-cream {
	background: var(--lu-cream);
	border-radius: var(--lu-r-lg); /* zaoblenie > 0 smie byť len na krémových blokoch */
	padding: var(--lu-sp-20);
	color: var(--lu-ink); /* 10,01:1 na kréme; modrá #397fcc má len 3,27:1 → zakázaná */
}
.lu-surface-alt {
	background: var(--lu-surface-alt);
	padding: var(--lu-sp-15) var(--lu-sp-20);
}
.lu-surface-dark {
	background: var(--lu-black);
	color: var(--lu-white);
}

/* ---- mriežky ------------------------------------------------------------- */
/* Archív: filter + mriežka. NEPOUŽÍVAME core/columns — jadro sa láme na 782 px,
   naša hranica je 992 px (tam ide filter z bočného panela na akordeón).      */
.lu-shop-layout {
	display: grid;
	gap: var(--lu-grid-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 992px) {
	.lu-shop-layout { grid-template-columns: minmax(220px, 25%) 1fr; }
}

/* Detail produktu 55/45 nad 992 px (v šablónach `.lu-detail-layout`). */
.lu-product-layout,
.lu-detail-layout {
	display: grid;
	gap: var(--lu-grid-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 992px) {
	.lu-product-layout,
	.lu-detail-layout { grid-template-columns: 55fr 45fr; }
}

/* Produktová mriežka 1 / 2 / 3 / 4 stĺpce (480 / 992 / 1440). */
.lu-grid {
	display: grid;
	gap: var(--lu-grid-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 480px) { .lu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .lu-grid { grid-template-columns: repeat(3, 1fr); } }
/* 4. stĺpec len tam, kde NIE JE bočný filtračný panel (`.lu-grid--panel`) */
@media (min-width: 1440px) {
	.lu-grid:not(.lu-grid--panel) { grid-template-columns: repeat(4, 1fr); }
}

/* ---- produktový obrázok: aspect-ratio namiesto ich JS columnConform() ---- */
.lu-media,
.lu-card__media,
.lu-detail__media {
	aspect-ratio: var(--lu-aspect-product);
	background: var(--lu-white);
	overflow: hidden;
}
.lu-media img,
.lu-card__media img,
.lu-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--lu-t-fast);
}
.lu-media--placeholder {
	background: var(--lu-surface-warm); /* nikdy prázdny <img> */
	display: grid;
	place-items: center;
	color: var(--lu-ink-muted);
	letter-spacing: var(--lu-ls-logo);
	text-transform: uppercase;
	font-size: var(--lu-fs-sm);
}
.lu-card.is-hover .lu-media img,
.lu-card.is-hover .lu-card__media img { transform: var(--lu-zoom-hover); }

/* ---- kostra produktovej karty --------------------------------------------
   Detailné štýlovanie karty (hover swap, orezanie názvu na 2 riadky, akčná
   lišta) je v assets/css/shop.css. Tu je len to, bez čoho karta vyzerá zle
   aj v editore: bez tieňa, bez zaoblenia, CTA pribité na spodok.            */
.lu-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	background: var(--lu-white);
	border: 1px solid transparent; /* drží miesto pre hover, layout sa nehýbe */
	border-radius: var(--lu-r-0);
	box-shadow: var(--lu-shadow-none);
}
.lu-card__cta {
	display: flex;
	column-gap: var(--lu-sp-10);
	border-top: 1px solid var(--lu-line-soft);
	margin-top: var(--lu-sp-15);
}
.lu-serial {
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-medium);
	color: var(--lu-ink-muted);
}

/* ---- dostupnosť: text nesie význam, bodka je len doplnok (WCAG 1.4.1) ---- */
.lu-availability {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-medium);
}
.lu-availability::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--lu-r-circle);
	background: currentColor;
	flex: none;
}
.lu-availability--in-stock { color: var(--lu-success); }
.lu-availability--in-stock::before { background: var(--lu-success-dot); }
.lu-availability--supplier { color: var(--lu-blue-dark); }
.lu-availability--supplier::before { background: var(--lu-blue); }
.lu-availability--preorder { color: var(--lu-blue-dark); }
.lu-availability--eta { color: var(--lu-eta); }
.lu-availability--preorder::before,
.lu-availability--eta::before {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
}
.lu-availability--none { color: var(--lu-danger); } /* nie holé `red` (4,00:1) */
.lu-availability--none::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---- ceny ---------------------------------------------------------------- */
.lu-price {
	color: var(--lu-blue-dark); /* 5,90:1 — #397fcc má 4,13:1 a pri 17,6px bold padá */
	font-weight: var(--lu-fw-bold);
	line-height: var(--lu-lh-price);
}
.lu-price--card { font-size: var(--lu-fs-price-card); }
.lu-price--detail { font-size: var(--lu-fs-price-detail); }
.lu-price__label {
	display: block;
	color: var(--lu-ink-muted);
	font-size: var(--lu-fs-sm);
	font-weight: var(--lu-fw-normal);
}
.lu-price__currency { font-size: var(--lu-fs-price-currency); }
.lu-price__decimals { font-size: var(--lu-fs-price-decimals); font-weight: var(--lu-fw-medium); }
.lu-price--sale { color: var(--lu-danger); }
.lu-price--detail.lu-price--sale { color: var(--lu-danger-strong); } /* ≥24px = veľký text */
.lu-price--old {
	color: var(--lu-ink-muted);
	text-decoration: line-through;
	font-weight: var(--lu-fw-normal);
}

/* ---- USP pás (náhrada ich zapečeného JPG) -------------------------------- */
.lu-usp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	padding: 18px 20px;
	background: var(--lu-usp-bar-bg);
	color: var(--lu-white);
}
.lu-usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1 1 90px;
	text-align: center;
}
.lu-usp svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.lu-usp span {
	font-size: 13px;
	font-weight: var(--lu-fw-medium);
	letter-spacing: var(--lu-ls-caps);
	text-transform: uppercase;
	line-height: 1.15;
}

/* ---- štítok / stužka ----------------------------------------------------- */
.lu-badge {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	background: var(--lu-badge); /* biely 9px text = 4,87:1 ✅ */
	color: var(--lu-white);
	border-radius: var(--lu-r-circle);
	font-size: 9px;
	font-weight: var(--lu-fw-bold);
	letter-spacing: var(--lu-ls-caps);
	text-transform: uppercase;
	text-align: center;
}

/* ---- oznamovacia oblasť pre AJAX filtre (aria-live) ---------------------- */
.lu-status { font-size: var(--lu-fs-sm); color: var(--lu-ink-muted); }
.lu-error { color: var(--lu-error); }

/* ---- lepivý nákupný box na detaile --------------------------------------- */
@media (min-width: 992px) {
	.lu-buybox { position: sticky; top: calc(var(--lu-sticky-offset) + 20px); }
}

/* ---- úzky text (VOP, blog) ----------------------------------------------- */
.lu-prose { max-width: var(--lu-prose); }

/* ---- Quicksand: LEN v hlavnom obsahu homepage a na polaroid popiskoch -----
   theme.json nevie cieliť body.home, a nadpisy v katalógu, na detaile a
   v pätke musia zostať Open Sans (rovnako ako na lucide.com).               */
.home main :where(h1, h2, h3, h4, h5, h6),
.home main :where(.wp-block-heading),
.lu-polaroid__caption {
	font-family: var(--lu-font-display);
	font-weight: var(--lu-fw-bold); /* Quicksand máme len v reze 700 */
}