/* ==========================================================================
   Směr „Značka" (`eshop_front_styl = znacka`): světlý, čistý, akcent a logo
   z nastavení instance. Jen tokeny a globální typografie — komponenty kreslí
   sdílená pravidla přes tytéž proměnné, jako směr „Půlnoc".

   Akcent: `--eshop-akcent` z nastavení (`eshop_front_akcent`), výchozí
   #0f7c7f = tyrkysová značky ztmavená na kontrast 5:1 s bílou (AA pro text
   i tlačítka). Čistá tyrkysová loga (#14999c, 3,5:1) nese `--c-akcent2`
   jen dekorativně (ikony, velké plochy), nikdy malý text.
   ========================================================================== */

html[data-smer="znacka"] {
	--pismo-display: "Jost", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
	--pismo-text: "Jost", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;

	--c-pozadi: #ffffff;
	--c-pozadi2: #f3f6f6;
	--c-povrch: #ffffff;
	--c-text: #172023;
	--c-text-tlumene: #4a575b;
	--c-slabe: #647175;
	--c-akcent: var(--eshop-akcent, #0f7c7f);
	--c-akcent2: #14999c;
	--c-akcent-text: var(--c-akcent);
	--c-akcent-jemny: color-mix(in srgb, var(--c-akcent) 9%, #ffffff);
	--c-na-akcentu: #ffffff;
	--c-linka: #e1e7e8;
	--c-chyba: #b3261e;
	--stin-karta: 0 1px 2px rgba(16, 28, 30, .05), 0 10px 30px -18px rgba(16, 28, 30, .28);

	/* Typografie: méně módní revue, víc obchod — menší titulky, klidný rytmus. */
	--t-h3: clamp(18px, 1.5vw, 21px);
	--t-h2: clamp(24px, 2.6vw, 34px);
	--t-h1: clamp(28px, 3.4vw, 44px);
	--t-obri: clamp(40px, 6vw, 76px);
	--prostrk-stitek: .14em;
	--vyska-radku-display: 1.15;
	--r-ovladac: 10px;
	--sekce: clamp(56px, 9vh, 112px);
	--max-sirka: 1440px;
	/* Jack: jedna výška od hlavičky k prvnímu obsahu pro všechny stránky
	   (dřív 24–56 px podle toho, která dávka stránku stavěla). */
	--stranka-nahore: var(--k6);
	color-scheme: light;
}

html[data-smer="znacka"][data-motiv="tmavy"] {
	/* Tmavý motiv = dnešní „Půlnoc", jen s tyrkysovým akcentem značky. */
	--c-pozadi: #0c0a0d;
	--c-pozadi2: #17141a;
	--c-povrch: #141116;
	--c-text: #f2ede6;
	--c-text-tlumene: #bdb5bc;
	--c-slabe: #9e959d;
	--c-akcent: #3ec0c6;
	--c-akcent2: #3ec0c6;
	--c-akcent-text: #5fd0d5;
	--c-akcent-jemny: color-mix(in srgb, #3ec0c6 14%, #0c0a0d);
	--c-na-akcentu: #0c0a0d;
	--c-linka: rgba(242, 237, 230, .14);
	--c-chyba: #ff8a80;
	--stin-karta: 0 1px 2px rgba(0, 0, 0, .4);
	color-scheme: dark;
}

/* Směr „Půlnoc": tokeny, které vrstva komponent potřebuje navíc. */
html[data-smer="pulnoc"] {
	--c-povrch: var(--c-pozadi2);
	--c-na-akcentu: var(--c-text);
	--c-akcent-jemny: color-mix(in srgb, var(--c-akcent) 16%, var(--c-pozadi));
	--c-chyba: #ff8a80;
	--r-ovladac: 2px;
	--stin-karta: none;
}

html[data-smer="pulnoc"][data-motiv="svetly"] {
	--c-chyba: #b3261e;
}

/* ----- Globální typografie ve směru „Značka" ----- */
[data-smer="znacka"] body {
	font-feature-settings: "kern", "liga";
	text-rendering: optimizeLegibility;
}

[data-smer="znacka"] h1,
[data-smer="znacka"] h2,
[data-smer="znacka"] h3,
[data-smer="znacka"] .display {
	font-weight: 500;
	letter-spacing: -.01em;
}

[data-smer="znacka"] h1 {
	font-size: var(--t-h1);
}

[data-smer="znacka"] .stitek {
	font-size: 12px;
	font-weight: 500;
	color: var(--c-akcent-text);
}

[data-smer="znacka"] :focus-visible {
	outline: 2px solid var(--c-akcent);
	outline-offset: 2px;
}

[data-smer="znacka"] ::selection {
	background: color-mix(in srgb, var(--c-akcent) 24%, transparent);
	color: var(--c-text);
}

/* ----- Tlačítka ----- */
[data-smer="znacka"] .btn,
[data-smer="znacka"] button[type="submit"],
[data-smer="znacka"] input[type="submit"] {
	min-height: 48px;
	padding: 12px 28px;
	border-radius: 999px;
	color: var(--c-na-akcentu);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
}

[data-smer="znacka"] .btn:hover,
[data-smer="znacka"] button[type="submit"]:hover,
[data-smer="znacka"] input[type="submit"]:hover {
	transform: none;
	background: color-mix(in srgb, var(--c-akcent) 88%, #000000);
	box-shadow: none;
}

[data-smer="znacka"] .btn--duch {
	border-color: var(--c-linka);
	background: transparent;
	color: var(--c-text);
}

[data-smer="znacka"] .btn--duch:hover {
	border-color: var(--c-text);
	background: transparent;
}

/* Odkazy v textu jsou rozpoznatelné i bez barvy (WCAG 1.4.1).
   Jen v textu — ne v navigaci (drobky) ani v seznamech pilulek, kde
   podtržení dělalo z téhož prvku na každé stránce něco jiného. */
[data-smer="znacka"] main p a:not([class]),
[data-smer="znacka"] main li:not(nav li, .oblibene-odkazy li) a:not([class]) {
	color: var(--c-akcent-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (max-width: 700px) {
	html[data-smer="znacka"] {
		--stranka-nahore: var(--k5);
	}
}

/* ----- Drobečková navigace: jeden vzhled pro katalog, detail i obsah ----- */
[data-smer="znacka"] nav[aria-label="Drobečková navigace"] a {
	color: var(--c-text-tlumene);
	text-decoration: none;
}

[data-smer="znacka"] nav[aria-label="Drobečková navigace"] a:hover {
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (pointer: coarse) {
	[data-smer="znacka"] nav[aria-label="Drobečková navigace"] a {
		min-height: 44px;
	}
}

/* ----- Flash zprávy: na ose obsahu jako upozornění v košíku ----- */
[data-smer="znacka"] main > .cms-flash {
	width: calc(min(100%, var(--max-sirka)) - 2 * var(--okraj));
	margin-top: var(--stranka-nahore);
	padding: var(--k4) var(--k5);
	border-radius: var(--r-ovladac);
	font-size: 15px;
}

/* ----- Formulářová pole ----- */
[data-smer="znacka"] input[type="text"],
[data-smer="znacka"] input[type="email"],
[data-smer="znacka"] input[type="tel"],
[data-smer="znacka"] input[type="password"],
[data-smer="znacka"] input[type="number"],
[data-smer="znacka"] select,
[data-smer="znacka"] textarea {
	border-radius: var(--r-ovladac);
}

/* Formuláře e-shopu (`_head-eshop-style`) dávají polím `--r-jemne` přes
   selektor s trojím :not() — přebil pravidlo výš jen u <input>, takže
   v kontaktu i pokladně měla pole 2 px a textarea 10 px. Jeden poloměr. */
[data-smer="znacka"] :is(.eshop-contact, .eshop-checkout, .eshop-cart, .eshop-ucet, .eshop-payment, .eshop-order-status) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	border-radius: var(--r-ovladac);
}

[data-smer="znacka"] .eshop-contact form {
	border-radius: 12px;
}

/* Nativní „Choose File" (systémové písmo, šedý čtverec) v pilulkovém
   rozhraní značky — tlačítko výběru souboru jako vedlejší tlačítko. */
[data-smer="znacka"] input[type="file"]::file-selector-button {
	margin-right: var(--k3);
	padding: 8px 16px;
	border: 1px solid var(--c-linka);
	border-radius: 999px;
	background: var(--c-povrch);
	color: var(--c-text);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

[data-smer="znacka"] input[type="file"]::file-selector-button:hover {
	border-color: var(--c-text);
}

/* ----- Patička ----- */
[data-smer="znacka"] footer.obal {
	padding-block: var(--k7) var(--k6);
	border-top: 1px solid var(--c-linka);
}

[data-smer="znacka"] .pata-sloupce {
	margin-top: 0;
}

[data-smer="znacka"] .pata-spodek .cms-footer__eshop-legal p {
	gap: var(--k1) var(--k4);
}