/* =============================================================================
   OXO storefront — vzhľad variantných prvkov
   -----------------------------------------------------------------------------
   Prvky, ktoré má len niektorý návrh (assets/varianty.js). Rozloženie tu smie
   byť špecifické — sú to bloky, ktoré v iných návrhoch vôbec nie sú.
   Farby a tvary si aj tu berú z tokenov --sk-*, takže sedia s témou.
   ========================================================================== */

/* --- bežiaci pás (1 Liquid) ----------------------------------------------- */
.ox-v-pas {
	margin-top: clamp(28px, 4vw, 56px);
	border-block: 1px solid var(--sk-linka);
	overflow: hidden; padding-block: 14px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ox-v-pas__stopa {
	display: flex; align-items: center; gap: 22px; width: max-content;
	font-family: var(--sk-font-nadpis); font-size: clamp(18px, 2vw, 28px);
	line-height: var(--sk-nadpis-lh); text-transform: var(--sk-nadpis-transform);
	white-space: nowrap; animation: ox-v-posun 26s linear infinite;
}
.ox-v-pas__stopa i { color: var(--sk-akcent); font-style: normal; }
@keyframes ox-v-posun { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-pas__stopa { animation: none; } }
.ox-v-liquid__kvapka img { animation: ox-v-plava 7s ease-in-out infinite; }
@keyframes ox-v-plava { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-liquid__kvapka img { animation: none; } }

/* --- kinetická typografia (2 Kinetic) ------------------------------------- */
.ox-v-kinetic__nadpis span { display: inline-block; animation: ox-v-vlna 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes ox-v-vlna { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-kinetic__nadpis span { animation: none; } }
.ox-v-kinetic__spodok { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 28px; align-items: center; margin-block: 20px; }
@media (max-width: 800px) { .ox-v-kinetic__spodok { grid-template-columns: 1fr; } }

/* --- časopis (3 Editorial) ------------------------------------------------ */
.ox-v-editorial__hlava { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--sk-text); padding-bottom: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.ox-v-editorial__vydanie { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
.ox-v-editorial__stlpce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin-block: 26px; }
.ox-v-editorial__stlpce .ox-lead { margin: 0; font-size: clamp(17px, 1.5vw, 21px); }
@media (max-width: 900px) { .ox-v-editorial__stlpce { grid-template-columns: 1fr; } }

/* --- príchute (4 Candy Pop) ----------------------------------------------- */
.ox-v-candy__prichute { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.ox-v-candy__pilulka {
	padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
	background: var(--sk-ruz); color: var(--sk-atrament);
	box-shadow: 0 6px 0 -2px rgba(224, 0, 26, .28);
	animation: ox-v-skok 2.6s var(--sk-prechod) infinite;
	animation-delay: calc(var(--n) * .16s);
}
@keyframes ox-v-skok { 0%, 88%, 100% { transform: translateY(0); } 94% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-candy__pilulka { animation: none; } }

/* --- HUD (5 Arcade) ------------------------------------------------------- */
.ox-v-arcade__hud {
	display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
	border: 2px solid var(--sk-atrament); padding: 10px 16px; margin-bottom: 26px;
	font-family: var(--sk-font-nadpis); font-size: 13px; letter-spacing: .14em;
	text-transform: uppercase; line-height: var(--sk-nadpis-lh);
}
.ox-v-arcade__hud b { color: var(--sk-akcent); margin-left: 6px; }
.ox-v-arcade__blik { margin-left: auto; color: var(--sk-akcent); animation: ox-v-blik 1.4s steps(2) infinite; }
@keyframes ox-v-blik { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-arcade__blik { animation: none; } }
.ox-v-arcade__obrazovka img { border: 3px solid var(--sk-atrament); border-radius: 2px; }
.ox-v-level {
	display: block; padding: 24px; text-decoration: none; color: inherit;
	border: 2px solid var(--sk-atrament); background: var(--sk-povrch);
	transition: transform .16s var(--sk-prechod), box-shadow .16s var(--sk-prechod);
}
.ox-v-level:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--sk-akcent); }
.ox-v-level__stitok { display: inline-block; background: var(--sk-atrament); color: #fff; padding: 4px 10px; font-size: 11px; letter-spacing: .16em; margin-bottom: 12px; }

/* --- dátová mriežka (8 Particles) ----------------------------------------- */
.ox-v-mriezka-dat { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--sk-linka); border: 1px solid var(--sk-linka); }
.ox-v-dat { background: var(--sk-bg); padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; }
.ox-v-dat b { font-family: var(--sk-font-nadpis); font-size: clamp(28px, 3vw, 40px); line-height: var(--sk-nadpis-lh); color: var(--sk-akcent); }
.ox-v-dat span { font-size: 13.5px; color: var(--sk-text-tlmeny); }

/* =============================================================================
   9 SHOWCASE — vitrína (verne podľa konceptu 09-showcase.html)
   Kruh produktových kariet v strede, nadpis vľavo, cenový panel vpravo,
   ovládanie dole. Hrdina má vlastné pozadie, aby cezeň nepresvital efekt.
   ========================================================================== */
.ox-v-showcase {
	padding: 0;
	background: radial-gradient(120% 80% at 50% 8%, var(--sk-krem) 0%, var(--sk-biela) 58%);
}
.ox-vitrina {
	position: relative;
	display: grid;
	grid-template-columns: minmax(240px, 27vw) 1fr minmax(240px, 27vw);
	grid-template-rows: 1fr auto;
	min-height: min(74vh, 720px);
	max-width: var(--sk-maxw); margin-inline: auto;
}
.ox-vitrina__scena {
	grid-column: 1 / -1; grid-row: 1 / -1; place-self: stretch;
	perspective: 1250px; perspective-origin: 50% 44%;
	z-index: 1; touch-action: pan-y; cursor: grab; overflow: hidden;
}
.ox-vitrina__scena--tahame { cursor: grabbing; }
.ox-vitrina__koleso {
	position: absolute; left: 50%; top: 44%; width: 0; height: 0;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--polomer, 420px) * -1));
}
.ox-vitrina__karta {
	position: absolute; left: -95px; top: -155px; width: 190px; height: 310px;
	transform: rotateY(var(--u)) translateZ(var(--polomer, 420px));
	background: var(--sk-biela); border-radius: var(--sk-r-velky);
	box-shadow: 0 0 0 1px rgba(27, 27, 27, .1), 0 26px 46px -30px rgba(27, 27, 27, .55);
	display: flex; flex-direction: column; gap: 4px; padding: 14px 15px 16px;
	text-decoration: none; color: var(--sk-text); backface-visibility: hidden;
	transition: box-shadow .3s var(--sk-prechod), opacity .3s var(--sk-prechod);
	opacity: .45;
}
.ox-vitrina__karta--celo { opacity: 1; box-shadow: 0 0 0 1px rgba(255, 0, 29, .4), 0 34px 56px -30px rgba(27, 27, 27, .6); }
.ox-vitrina__foto {
	display: block; background: var(--sk-biela); border-radius: var(--sk-r-maly);
	aspect-ratio: 1 / 1; overflow: hidden; box-shadow: inset 0 0 0 1px var(--sk-linka);
}
.ox-vitrina__foto img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
.ox-vitrina__kat { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-tlmeny); margin-top: 10px; }
.ox-vitrina__nazov {
	font-family: var(--sk-font-nadpis); font-size: 14.5px; line-height: var(--sk-nadpis-lh);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ox-vitrina__cena { margin-top: auto; font-family: var(--sk-font-display); font-size: 20px; color: var(--sk-akcent); }

.ox-vitrina__vlavo, .ox-vitrina__vpravo { z-index: 3; align-self: center; pointer-events: none; padding-block: 24px; }
.ox-vitrina__vlavo { grid-column: 1; grid-row: 1; padding-left: var(--sk-pad); padding-right: 12px; }
.ox-vitrina__vpravo { grid-column: 3; grid-row: 1; text-align: right; justify-self: end; max-width: 360px; padding-right: var(--sk-pad); padding-left: 12px; }
.ox-vitrina__vlavo > *, .ox-vitrina__vpravo > * { pointer-events: auto; }
.ox-vitrina__h1 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); max-width: 11ch; }
.ox-vitrina__h1 em { font-style: normal; color: var(--sk-akcent); }
.ox-vitrina__lead { color: var(--sk-text-tlmeny); font-size: 15px; max-width: 30ch; margin: 18px 0 24px; }
.ox-vitrina__cta { gap: 10px; }

.ox-pv { transition: opacity .3s var(--sk-prechod); }
.ox-pv--vymena { opacity: .25; }
.ox-pv__idx { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--sk-text-tlmeny); margin: 0; }
.ox-pv__idx b { color: var(--sk-akcent); }
.ox-pv__kat { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-tlmeny); margin: 14px 0 0; }
.ox-pv__nazov { font-family: var(--sk-font-nadpis); font-size: clamp(1.3rem, 2vw, 2rem); line-height: var(--sk-nadpis-lh); margin: 6px 0 0; }
.ox-pv__cena {
	font-family: var(--sk-font-display); font-size: clamp(2.4rem, 4.4vw, 4.2rem);
	color: var(--sk-akcent); margin: 8px 0 0; white-space: nowrap; line-height: 1.05;
}
.ox-pv__cena small {
	font-family: var(--sk-font-text); font-size: .24em; font-weight: 600; color: var(--sk-text-tlmeny);
	letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: 4px;
}
.ox-pv__btn {
	margin-top: 16px; display: inline-flex; align-items: center; gap: 9px;
	border: 1.5px solid var(--sk-text); border-radius: var(--sk-r-pilulka);
	padding: 12px 20px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--sk-text);
	transition: background .18s var(--sk-prechod), color .18s var(--sk-prechod);
}
.ox-pv__btn:hover { background: var(--sk-text); color: var(--sk-bg); }

.ox-vitrina__lista {
	grid-column: 1 / -1; grid-row: 2; z-index: 3;
	display: flex; align-items: center; justify-content: center; gap: 18px;
	padding: 0 var(--sk-pad) 28px; flex-wrap: wrap;
}
.ox-vitrina__arw {
	width: 46px; height: 46px; border-radius: var(--sk-r-pilulka);
	border: 1.5px solid var(--sk-linka); display: grid; place-items: center;
	background: rgba(255, 255, 255, .8); cursor: pointer; color: var(--sk-text);
	transition: border-color .18s var(--sk-prechod), color .18s var(--sk-prechod), transform .18s var(--sk-prechod);
}
.ox-vitrina__arw:hover { border-color: var(--sk-akcent); color: var(--sk-akcent); transform: scale(1.06); }
.ox-vitrina__arw svg { width: 15px; height: 15px; }
.ox-vitrina__bodky { display: flex; gap: 9px; align-items: center; }
.ox-vitrina__bodka {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
	background: var(--sk-linka); cursor: pointer; transition: all .2s var(--sk-prechod);
}
.ox-vitrina__bodka[aria-selected="true"] { background: var(--sk-akcent); width: 26px; border-radius: 999px; }
.ox-vitrina__hint {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sk-text-tlmeny); font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.ox-vitrina__hint i { width: 26px; height: 14px; border: 1.5px solid var(--sk-text-tlmeny); border-radius: 8px; position: relative; display: inline-block; }
.ox-vitrina__hint i::after {
	content: ""; position: absolute; top: 3px; left: 5px; width: 3px; height: 5px;
	background: var(--sk-text-tlmeny); border-radius: 2px; animation: ox-vit-swipe 1.8s ease-in-out infinite;
}
@keyframes ox-vit-swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }

.ox-vitrina__nacitava {
	position: absolute; inset: 0; display: grid; place-items: center; z-index: 4;
	pointer-events: none; transition: opacity .6s var(--sk-prechod);
}
.ox-vitrina__nacitava--prec { opacity: 0; }
.ox-vitrina__nacitava b {
	font-family: var(--sk-font-display); color: var(--sk-akcent); font-size: 13px;
	letter-spacing: .2em; animation: ox-vit-blik 1.1s ease-in-out infinite;
}
@keyframes ox-vit-blik { 50% { opacity: .3; } }

/* červený bežiaci pás pod vitrínou */
.ox-pas-cerveny { background: var(--sk-akcent); color: #fff; overflow: hidden; padding: 16px 0; position: relative; z-index: 5; }
.ox-pas-cerveny__stopa { display: flex; width: max-content; animation: ox-pas-posun 26s linear infinite; }
.ox-pas-cerveny__stopa span {
	font-family: var(--sk-font-display); font-size: clamp(19px, 2.4vw, 30px);
	padding-inline: 22px; white-space: nowrap; display: inline-flex; align-items: center; gap: 22px;
}
.ox-pas-cerveny__stopa span::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--sk-krem); display: inline-block; }
@keyframes ox-pas-posun { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	.ox-pas-cerveny__stopa, .ox-vitrina__hint i::after, .ox-vitrina__nacitava b { animation: none; }
}

@media (max-width: 1100px) {
	.ox-vitrina { grid-template-columns: minmax(180px, 26vw) 1fr minmax(180px, 26vw); }
	.ox-vitrina__lead { display: none; }
}
@media (max-width: 860px) {
	.ox-vitrina {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(40svh, 1fr) auto auto;
		min-height: auto;
	}
	.ox-vitrina__scena { grid-column: 1; grid-row: 2; min-height: 40svh; }
	.ox-vitrina__vlavo { grid-column: 1; grid-row: 1; align-self: start; text-align: center; padding: 20px var(--sk-pad) 4px; }
	.ox-vitrina__h1 { max-width: none; margin-inline: auto; }
	.ox-vitrina__cta { display: none; }
	.ox-vitrina__vpravo { grid-column: 1; grid-row: 3; text-align: center; justify-self: center; max-width: none; padding: 0 var(--sk-pad) 4px; align-self: end; }
	.ox-vitrina__lista { grid-column: 1; grid-row: 4; padding-bottom: 22px; gap: 12px; }
	.ox-vitrina__hint { display: none; }
	.ox-pv__nazov { font-size: 1.3rem; }
	.ox-pv__cena { font-size: clamp(2.2rem, 11vw, 3rem); }
}

/* --- časová os (10 Story) ------------------------------------------------- */
.ox-v-osa { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.ox-v-osa__krok { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-bottom: 34px; position: relative; }
.ox-v-osa__krok:not(:last-child)::before { content: ''; position: absolute; left: 27px; top: 46px; bottom: 0; width: 2px; background: var(--sk-linka); }
.ox-v-osa__bod { width: 46px; height: 46px; border-radius: 50%; background: var(--sk-akcent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sk-font-display); font-size: 19px; z-index: 1; }
.ox-v-osa__krok h3 { margin-bottom: 6px; }

/* --- čistý zoznam (11 Minimal) -------------------------------------------- */
.ox-v-minimal__riadok { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 26px; align-items: end; margin-top: 22px; }
@media (max-width: 800px) { .ox-v-minimal__riadok { grid-template-columns: 1fr; align-items: start; } }
.ox-v-zoznam { list-style: none; margin: 0; padding: 0; }
.ox-v-zoznam li { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--sk-linka); flex-wrap: wrap; }
.ox-v-zoznam b { font-family: var(--sk-font-nadpis); font-size: clamp(19px, 2vw, 26px); line-height: var(--sk-nadpis-lh); text-transform: var(--sk-nadpis-transform); }
.ox-v-zoznam span { color: var(--sk-text-tlmeny); font-size: 14.5px; }

/* --- štítky v pohybe (6 Motion) ------------------------------------------- */
.ox-v-motion__stopky { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ox-v-motion__stopky span {
	padding: 8px 16px; border-radius: var(--sk-r-pilulka);
	border: 1px solid var(--sk-linka); font-size: 13.5px; font-weight: 600;
	animation: ox-v-nabeh .7s var(--sk-prechod) both; animation-delay: calc(var(--n) * .1s);
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-motion__stopky span { animation: none; } }

/* --- technický hrdina (8 Particles) --------------------------------------- */
.ox-v-particles__mriezka { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
@media (max-width: 960px) { .ox-v-particles__mriezka { grid-template-columns: 1fr; } }
.ox-v-particles__udaje { display: grid; gap: 1px; background: var(--sk-linka); border: 1px solid var(--sk-linka); margin: 0; }
.ox-v-particles__udaje > div { background: var(--sk-bg); padding: 18px 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.ox-v-particles__udaje dt { font-size: 11.5px; letter-spacing: .16em; color: var(--sk-text-tlmeny); }
.ox-v-particles__udaje dd { margin: 0; font-family: var(--sk-font-nadpis); font-size: 24px; line-height: var(--sk-nadpis-lh); color: var(--sk-akcent); }

/* --- kapitola (10 Story) -------------------------------------------------- */
.ox-v-story__kapitola {
	display: inline-block; margin-bottom: 18px; padding: 6px 16px;
	border-radius: var(--sk-r-pilulka); background: var(--sk-bg-2);
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
	color: var(--sk-akcent);
}

/* --- spoločné kusy -------------------------------------------------------- */
.ox-v-citat { margin: 0; max-width: 24ch; }
.ox-v-citat p { font-family: var(--sk-font-nadpis); font-size: clamp(24px, 3.6vw, 46px); line-height: var(--sk-nadpis-lh); text-transform: var(--sk-nadpis-transform); margin: 0 0 16px; }
.ox-v-citat cite { font-style: normal; font-size: 14px; color: var(--sk-text-tlmeny); }
.ox-v-cislo { text-align: center; padding: 26px 16px; }
.ox-v-cislo b { display: block; font-family: var(--sk-font-display); font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; color: var(--sk-akcent); }
.ox-v-cislo span { font-size: 14px; color: var(--sk-text-tlmeny); }
.ox-v-cislo--pocitadlo b { animation: ox-v-nabeh .8s var(--sk-prechod) both; }
@keyframes ox-v-nabeh { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-cislo--pocitadlo b { animation: none; } }
.ox-v-slovnik { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin: 0; }
.ox-v-slovnik dt { font-family: var(--sk-font-nadpis); font-size: 20px; line-height: var(--sk-nadpis-lh); margin-bottom: 6px; }
.ox-v-slovnik dd { margin: 0; color: var(--sk-text-tlmeny); font-size: 14.5px; }
.ox-v-krok-karta { background: var(--sk-povrch); border-radius: var(--sk-r-velky); box-shadow: var(--sk-tien-karta), var(--sk-obrys); padding: 26px; }
.ox-v-krok-karta__cislo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sk-akcent); color: #fff; font-family: var(--sk-font-display); font-size: 20px; margin-bottom: 14px; }

/* =============================================================================
   1-liquid — hrdina „tekutá kvapka“ (verne podľa konceptu 1-liquid.html)
   -----------------------------------------------------------------------------
   Hrdina zámerne NEMÁ nepriehľadné pozadie: tekutá červená kvapka, ktorú kreslí
   efekt témy (assets/temy/efekty/1-liquid.js), JE pozadím tohto návrhu — presne
   ako v koncepte. Čitateľnosť sadzby zabezpečuje závoj `::before`: plocha farby
   --sk-bg, ktorej priehľadnosť riadi maska. Kvapka leží vpravo, závoj je preto
   silný vľavo (pod textom) a vpravo úplne mizne.
   ========================================================================== */
.ox-v-liq {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 84vh; min-height: min(84svh, 820px);
	padding-block: clamp(36px, 5vw, 88px) clamp(84px, 9vw, 124px);
	overflow: hidden;
}
.ox-v-liq::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: var(--sk-bg);
	-webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.42) 56%, rgba(0,0,0,0) 76%);
	        mask-image: linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.42) 56%, rgba(0,0,0,0) 76%);
}
/* Zrno — v koncepte je cez celú stránku; tu len nad hrdinom, aby nešpinilo
   produktové fotky v katalógu. `multiply` je bezpečný (difference by nad
   červenou vyrobil tyrkysovú — viď KONTRAKT.md). */
.ox-v-liq::after {
	content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	opacity: .22; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.ox-v-liq__vnutro { position: relative; z-index: 2; }
.ox-v-liq__h1 { font-size: clamp(45px, 8.4vw, 120px); letter-spacing: -.02em; margin: 0; }
.ox-v-liq__lead { max-width: 44ch; margin: 22px 0 0; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.65; }
.ox-v-liq__akcie { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Tlačidlá: atrament vyteká zospodu (v koncepte .btn::before) ---------------- */
.ox-v-liq__btn { position: relative; overflow: hidden; padding: 17px 30px; letter-spacing: .03em; }
.ox-v-liq__btn > span { position: relative; z-index: 2; }
.ox-v-liq__btn::before {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: var(--sk-atrament); transform: translateY(101%);
	transition: transform .5s var(--sk-prechod);
}
.ox-v-liq__btn:hover::before { transform: translateY(0); }
/* Základ prefarbuje .ox-btn--obrys pri hoveri pozadím — tu to má robiť výlučne
   vytekajúci atrament, preto rovnaká špecificita a neskoršie poradie. */
.ox-v-liq__btn--obrys { border-color: var(--sk-linka); }
.ox-v-liq__btn--obrys:hover:not(:disabled) { background: transparent; color: var(--sk-biela); border-color: transparent; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-liq__btn::before { transition: none; } }

/* Pomôcka „Scrolluj“ ------------------------------------------------------- */
.ox-v-liq__skrol {
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
	color: var(--sk-text-tlmeny); pointer-events: none;
}
.ox-v-liq__skrol i { width: 1px; height: 44px; background: linear-gradient(var(--sk-akcent), transparent); animation: ox-v-liq-ciara 1.9s infinite; }
@keyframes ox-v-liq-ciara {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}
.ox-v-liq--bezpohybu .ox-v-liq__skrol i { animation: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-liq__skrol i { animation: none; } }

/* Nábeh obsahu (.rv v koncepte). Skrytý stav platí až keď ho zapne JS —
   bez skriptu musí byť hrdina normálne čitateľný. ---------------------------- */
.ox-v-liq--js .ox-v-liq-rv {
	opacity: 0; transform: translateY(38px);
	transition: opacity .9s var(--sk-prechod), transform .9s var(--sk-prechod);
}
.ox-v-liq--js .ox-v-liq-rv--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	.ox-v-liq--js .ox-v-liq-rv { opacity: 1; transform: none; transition: none; }
}

/* Vlastný kurzor: bodka + dobiehajúci prstenec ----------------------------- */
.ox-v-liq-kurzor {
	position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none;
	border-radius: 50%; opacity: 0; will-change: transform;
}
.ox-v-liq-kurzor--bod { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--sk-akcent); transition: opacity .25s var(--sk-prechod); }
.ox-v-liq-kurzor--prstenec {
	width: 38px; height: 38px; margin: -19px 0 0 -19px;
	border: 1.5px solid var(--sk-akcent);
	transition: width .3s var(--sk-prechod), height .3s var(--sk-prechod),
	            margin .3s var(--sk-prechod), opacity .25s var(--sk-prechod);
}
.ox-v-liq-kurzor--bod.ox-v-liq-kurzor--vidno { opacity: 1; }
.ox-v-liq-kurzor--prstenec.ox-v-liq-kurzor--vidno { opacity: .55; }
.ox-v-liq-kurzor--prstenec.ox-v-liq-kurzor--velky { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
@media (pointer: coarse) { .ox-v-liq-kurzor { display: none; } }

/* Krémový hárok s otočeným červeným pásom ---------------------------------- */
.ox-v-liq-pas {
	position: relative; z-index: 2; overflow: hidden;
	background: var(--sk-bg-2);
	border-radius: var(--sk-r-velky) var(--sk-r-velky) 0 0;
	box-shadow: 0 -30px 80px -40px rgba(27, 27, 27, .32);
	/* Spodných 48 px je „poistka“: nasledujúca krémová sekcia má vlastné
	   zaoblené rohy a bez prekrytia by v nich presvital biely zárez. */
	padding-block: clamp(22px, 3vw, 40px) 48px;
	margin-bottom: -48px;
}
.ox-v-liq-pas__ram { overflow: hidden; padding-block: 12px; }   /* klip proti pretoku po otočení */
.ox-v-liq-pas__band {
	background: var(--sk-akcent); color: var(--sk-biela);
	width: 108%; margin-left: -4%; padding-block: 14px; overflow: hidden;
	transform: rotate(-1.4deg);
}
.ox-v-liq-pas__stopa {
	display: flex; align-items: center; width: max-content;
	font-family: var(--sk-font-display); font-size: clamp(18px, 2.4vw, 32px); line-height: 1.4;
	animation: ox-v-liq-posun 26s linear infinite;
}
.ox-v-liq-pas__stopa span { display: inline-flex; align-items: center; gap: 34px; padding-inline: 17px; white-space: nowrap; }
.ox-v-liq-pas__stopa span::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--sk-krem); flex: 0 0 auto; }
@keyframes ox-v-liq-posun { to { transform: translateX(-50%); } }
.ox-v-liq-pas--bezpohybu .ox-v-liq-pas__stopa { animation: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-v-liq-pas__stopa { animation: none; } }

/* Podpisová sekcia — červená výzva s bublinami ----------------------------- */
.ox-v-liq-cta {
	position: relative; overflow: hidden; text-align: center;
	background: var(--sk-akcent); color: var(--sk-biela);
	border-radius: var(--sk-r-velky);
	padding: clamp(46px, 7vw, 96px) clamp(24px, 5vw, 80px);
}
.ox-v-liq-cta__bublina {
	position: absolute; z-index: 1; border-radius: 50%; background: var(--sk-biela); opacity: .13;
	width: var(--v); height: var(--v); left: var(--x); top: var(--y);
}
.ox-v-liq-cta__h { position: relative; z-index: 2; margin: 0; color: var(--sk-biela); font-size: clamp(32px, 6vw, 88px); }
.ox-v-liq-cta__p { position: relative; z-index: 2; max-width: 52ch; margin: 20px auto 0; font-size: 16px; line-height: 1.6; }
.ox-v-liq-cta__btn { position: relative; z-index: 2; margin-top: 26px; background: var(--sk-biela); color: var(--sk-akcent); }
.ox-v-liq-cta__btn:hover:not(:disabled) { color: var(--sk-biela); }

/* Užšie okná a nízke notebooky -------------------------------------------- */
@media (max-width: 860px) {
	/* Na úzkom okne je text cez celú šírku, takže závoj musí kryť zhora nadol;
	   spodok necháme priehľadný, nech je kvapka vidieť. */
	.ox-v-liq::before {
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.2) 92%, rgba(0,0,0,0) 100%);
		        mask-image: linear-gradient(180deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.2) 92%, rgba(0,0,0,0) 100%);
	}
	.ox-v-liq__akcie { margin-top: 28px; }
	.ox-v-liq__btn { padding: 15px 24px; }
}
@media (max-width: 460px) {
	.ox-v-liq__btn { width: 100%; }        /* dve pilulky vedľa seba by sa lámali */
	.ox-v-liq__skrol { bottom: 18px; }
}
/* Nad hrdinom je ešte lišta návrhov (44 px) a hlavička (74 px). Na bežnom
   notebooku by pri plnej veľkosti nadpisu vypadli tlačidlá pod ohyb — nadpis
   sa preto s výškou okna zmenšuje. */
@media (max-height: 960px) and (min-width: 1100px) {
	.ox-v-liq { padding-block: 40px 84px; }
	.ox-v-liq__h1 { font-size: clamp(40px, 6.6vw, 96px); }
}
@media (max-height: 840px) and (min-width: 1100px) {
	.ox-v-liq { min-height: min(88svh, 640px); padding-block: 32px 74px; }
	.ox-v-liq__h1 { font-size: clamp(38px, 5.6vw, 78px); }
}

/* =============================================================================
   2-kinetic — hrdina „roztoč si pohár“ (verne podľa konceptu 2-kinetic.html)
   -----------------------------------------------------------------------------
   Červená plocha na výšku okna, text vľavo, otáčací pohár (Canvas 2D) vpravo,
   dole pomôcka „Potiahni pohár“, pod hrdinom atramentový bežiaci pás.
   Hrdina má vlastné NEPRIEHĽADNÉ pozadie: pod stránkou beží WebGL efekt témy
   (stúpajúce boba bubliny) a cez priesvitnú plochu by sa bil s pohárom.
   ========================================================================== */
.ox-v-2kinetic {
	position: relative;
	display: grid;
	align-items: center;
	padding: 0;
	min-height: min(84svh, 780px);
	background: var(--sk-akcent);
	color: var(--sk-biela);
	isolation: isolate;                 /* zrno sa smie miešať len vnútri hrdinu */
}
/* zrno ako v koncepte (tam bolo cez celý web) — dátové URI, žiadny externý súbor */
.ox-v-2kinetic::after {
	content: ""; position: absolute; inset: 0; z-index: 4;
	pointer-events: none; opacity: .18; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Kontrastný prstenec fokusu: červený z jadra by na červenej ploche zanikol. */
.ox-v-2kinetic :focus-visible { outline-color: var(--sk-biela); }

.ox-v-2kinetic__platno {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; display: block;
	cursor: grab; touch-action: pan-y;  /* vodorovný ťah točí, zvislý stále scrolluje stránku */
}
.ox-v-2kinetic__platno--tahame { cursor: grabbing; }

.ox-v-2kinetic__vnutro {
	position: relative; z-index: 3;
	width: 100%; max-width: var(--sk-maxw); margin-inline: auto;
	padding: clamp(30px, 5vw, 60px) var(--sk-pad) clamp(60px, 8vw, 96px);
	pointer-events: none;               /* pohár sa dá chytiť aj „cez“ text, ako v koncepte */
}
.ox-v-2kinetic__vnutro > * { max-width: min(620px, 52vw); }

.ox-v-2kinetic__oko {
	font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
	opacity: .82; margin: 0 0 20px;
}
.ox-v-2kinetic__h1 {
	color: var(--sk-biela);
	font-size: clamp(44px, 7vw, 118px);
	letter-spacing: -.02em;
	margin: 0;
	text-wrap: initial;                 /* zalomenie riadkov riešia <br> a slová */
}
.ox-v-2kinetic__slovo { display: inline-block; }
.ox-v-2kinetic__slovo--obrys {
	color: transparent;
	-webkit-text-stroke: max(1.5px, .022em) rgba(255, 255, 255, .85);
}
@supports not (-webkit-text-stroke: 2px #fff) {
	.ox-v-2kinetic__slovo--obrys { color: rgba(255, 255, 255, .58); }
}
/* Nábeh zapína až JS (trieda) — keby skript zlyhal, nadpis nesmie ostať neviditeľný. */
.ox-v-2kinetic__h1--nabeh .ox-v-2kinetic__slovo {
	animation: ox-2kin-hore .95s var(--sk-prechod) both;
	animation-delay: calc(var(--i) * .1s);
}
@keyframes ox-2kin-hore { from { transform: translateY(110%); opacity: 0; } }

.ox-v-2kinetic__lead {
	color: rgba(255, 255, 255, .92);
	margin: 26px 0 0; max-width: 44ch;
	font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6;
}
.ox-v-2kinetic__akcie {
	display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px;
	pointer-events: auto;               /* jediné miesto hrdinu, ktoré berie kliky */
}
.ox-v-2kinetic__btn {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 17px 32px; border-radius: var(--sk-btn-r);
	background: var(--sk-biela); color: var(--sk-akcent);
	font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none; will-change: transform;
	transition: transform .35s var(--sk-prechod);
}
.ox-v-2kinetic__vypln {
	position: absolute; inset: 0; background: var(--sk-atrament);
	transform: translateY(101%); transition: transform .5s var(--sk-prechod);
}
.ox-v-2kinetic__btn:hover .ox-v-2kinetic__vypln { transform: none; }
.ox-v-2kinetic__btn > span:last-child { position: relative; z-index: 2; transition: color .35s var(--sk-prechod); }
.ox-v-2kinetic__btn:hover > span:last-child { color: var(--sk-biela); }
.ox-v-2kinetic__btn--linka {
	background: transparent; color: var(--sk-biela);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.ox-v-2kinetic__tah {
	position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
	z-index: 3; margin: 0; white-space: nowrap;
	font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: .75;
}

/* bežiaci pás pod hrdinom ---------------------------------------------------- */
.ox-v-2kinetic-pas {
	background: var(--sk-atrament); color: var(--sk-krem);
	overflow: hidden; padding: 14px 0; position: relative; z-index: 5;
}
.ox-v-2kinetic-pas__stopa { display: flex; width: max-content; animation: ox-2kin-pas 26s linear infinite; }
.ox-v-2kinetic-pas:hover .ox-v-2kinetic-pas__stopa { animation-play-state: paused; }  /* nech sa dá kliknúť */
.ox-v-2kinetic-pas__polovica {
	display: flex; align-items: center; gap: 26px; padding-right: 26px;
	font-family: var(--sk-font-display); font-size: clamp(18px, 2.2vw, 30px);
	line-height: 1.3; white-space: nowrap; text-transform: var(--sk-nadpis-transform);
}
.ox-v-2kinetic-pas__polovica b { color: var(--sk-akcent); font-weight: inherit; }
.ox-v-2kinetic-pas__odkaz { color: inherit; text-decoration: none; transition: color .2s var(--sk-prechod); }
a.ox-v-2kinetic-pas__odkaz:hover { color: var(--sk-akcent); }
@keyframes ox-2kin-pas { to { transform: translateX(-50%); } }

/* podpisová sekcia „02 — Čísla“ ---------------------------------------------- */
.ox-v-2kinetic-cisla__oko {
	display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600;
	letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.ox-v-2kinetic-cisla em { font-style: normal; color: var(--sk-akcent); }
.ox-v-2kinetic-cislo {
	padding: 32px 26px; border-radius: var(--sk-r-stredny);
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
}
.ox-v-2kinetic-cislo b {
	display: block; font-family: var(--sk-font-nadpis); line-height: var(--sk-nadpis-lh);
	font-size: clamp(34px, 4.6vw, 60px); color: var(--sk-akcent);
}
.ox-v-2kinetic-cislo span { display: block; margin-top: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }

@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	.ox-v-2kinetic__h1--nabeh .ox-v-2kinetic__slovo { animation: none; }
	.ox-v-2kinetic-pas__stopa { animation: none; }
	.ox-v-2kinetic__btn { transition: none; }
}

/* Úzke okná: pohár je hore, text pod ním na stred (rovnako ako v koncepte). */
@media (max-width: 900px) {
	.ox-v-2kinetic { min-height: min(94svh, 880px); text-align: center; }
	.ox-v-2kinetic__vnutro { padding-top: 40svh; padding-bottom: 78px; }
	.ox-v-2kinetic__vnutro > * { max-width: none; }
	.ox-v-2kinetic__lead { margin-inline: auto; }
	.ox-v-2kinetic__akcie { justify-content: center; }
	.ox-v-2kinetic__h1 { font-size: clamp(40px, 11vw, 72px); }
}
@media (max-width: 430px) {
	.ox-v-2kinetic__btn { padding: 15px 22px; }
	.ox-v-2kinetic__tah { font-size: 10px; letter-spacing: .18em; bottom: 18px; }
}
/* Nízke notebooky: hrdina sa musí zmestiť nad ohyb aj s bežiacim pásom. */
@media (max-height: 840px) and (min-width: 1100px) {
	.ox-v-2kinetic { min-height: min(88svh, 640px); }
	.ox-v-2kinetic__h1 { font-size: clamp(40px, 5.6vw, 84px); }
	.ox-v-2kinetic__lead { margin-top: 18px; }
	.ox-v-2kinetic__akcie { margin-top: 26px; }
}

/* =============================================================================
   3-editorial — hrdina „titulka časopisu“ (verne podľa konceptu 3-editorial.html)
   -----------------------------------------------------------------------------
   Atramentová lišta hore, dvojstĺpec text/fotka, dve plávajúce kartičky a pod
   hrdinom biely pás dôvery. Hrdina má vlastné NEPRIEHĽADNÉ pozadie (krémový
   prechod z konceptu): pod stránkou beží efekt témy s tými istými bobuľami a
   dve vrstvy rovnakých gúľ by sa bili. Bobule preto kreslíme nad prechodom
   sami — v troch hĺbkových vrstvách, ktoré vodí kurzor (assets/varianty/3-editorial.js).
   ========================================================================== */
.ox-v-3ed {
	position: relative;
	padding: 0;                       /* lišta musí sedieť na hornej hrane hrdinu */
	background: linear-gradient(160deg, var(--sk-krem), var(--sk-biela) 62%);
}

/* Lišta s prísľubmi ---------------------------------------------------------- */
.ox-v-3ed__lista {
	position: relative; z-index: 3;
	background: var(--sk-atrament); color: var(--sk-biela);
	font-size: 12.5px; letter-spacing: .02em;
}
.ox-v-3ed__lista-vnutro {
	display: flex; justify-content: center; flex-wrap: wrap;
	gap: 6px clamp(14px, 2.4vw, 26px); padding-block: 9px;
}
.ox-v-3ed__lista b { color: var(--sk-ruz); font-weight: 600; }

/* Bobule na pozadí ----------------------------------------------------------- */
.ox-v-3ed__bobule { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ox-v-3ed__vrstva { position: absolute; inset: 0; will-change: transform; }
.ox-v-3ed__vrstva--daleko { filter: blur(2px); }   /* hĺbka: vzdialené gule sú mäkšie */
.ox-v-3ed__bobula {
	position: absolute; left: var(--x); top: var(--y);
	width: var(--v); height: var(--v); border-radius: 50%; opacity: var(--o);
	/* svetlo zľava hore ako na guli v koncepte (MeshPhysicalMaterial + clearcoat) */
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9), var(--c) 62%);
	animation: ox-3ed-hojda var(--t) ease-in-out infinite;
	animation-delay: var(--d);
}
@keyframes ox-3ed-hojda { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Dvojstĺpec ----------------------------------------------------------------- */
.ox-v-3ed__mriezka {
	position: relative; z-index: 2;
	display: grid; align-items: center;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(24px, 3.4vw, 40px);
	padding-block: clamp(48px, 6vw, 88px);
}
.ox-v-3ed__odznak {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--sk-biela); border: 1px solid var(--sk-linka);
	padding: 7px 14px; border-radius: var(--sk-r-pilulka);
	font-size: 12px; font-weight: 600; margin-bottom: 22px;
}
/* Zelená „skladom“ nie je firemná farba a tokeny ju nemajú — berieme tú istú,
   akou svieti .ox-odznak--ok v jadre. */
.ox-v-3ed__odznak i { width: 7px; height: 7px; border-radius: 50%; background: #0e8a3e; flex: 0 0 auto; }
.ox-v-3ed__h1 {
	margin: 0; font-size: clamp(40px, 6.6vw, 92px); letter-spacing: -.015em;
	text-wrap: initial;               /* riadky lámu <br>, nie prehliadač */
}
.ox-v-3ed__lead {
	margin: 20px 0 0; max-width: 46ch;
	font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; color: var(--sk-text-tlmeny);
}
.ox-v-3ed__akcie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ox-v-3ed__btn { padding: 15px 28px; min-height: 52px; font-size: 14px; }

/* Fotka s kartičkami --------------------------------------------------------- */
.ox-v-3ed__vizual { position: relative; margin: 0; }
.ox-v-3ed__foto { display: block; }
.ox-v-3ed__foto img {
	width: 100%; max-width: 520px; max-height: min(58vh, 520px); margin-inline: auto;
	object-fit: contain;
	/* Firemná červená je nemenná a drop-shadow() nevie prijať token s alfou. */
	filter: drop-shadow(0 30px 50px rgba(255, 0, 29, .22));
	transition: filter .3s var(--sk-prechod);
}
/* Katalógová fotka má biele pozadie — červený presvit by z nej spravil obdĺžnik,
   preto dostane vlasový rám ako fotka v časopise. */
.ox-v-3ed__foto--katalog img {
	filter: none; background: var(--sk-biela);
	border-radius: var(--sk-r-obrazok); box-shadow: var(--sk-obrys), 0 26px 50px -34px rgba(27, 27, 27, .5);
}
.ox-v-3ed__popiska {
	max-width: 520px; margin: 16px auto 0; padding-top: 10px;
	border-top: 1px solid var(--sk-linka);
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
	font-size: 12.5px; color: var(--sk-text-tlmeny); text-align: left;
}
.ox-v-3ed__popiska[hidden] { display: none; }
.ox-v-3ed__popiska b { color: var(--sk-text); font-weight: 600; }
.ox-v-3ed__popiska a { color: var(--sk-akcent); font-weight: 700; white-space: nowrap; }
.ox-v-3ed__kartica {
	position: absolute; display: flex; align-items: center; gap: 10px;
	background: var(--sk-biela); border-radius: var(--sk-r-stredny);
	padding: 12px 15px; font-size: 12.5px; line-height: 1.35;
	box-shadow: 0 14px 40px -12px rgba(27, 27, 27, .28), var(--sk-obrys);
	animation: ox-3ed-vznasa 5s ease-in-out infinite;
}
.ox-v-3ed__kartica b { font-family: var(--sk-font-display); color: var(--sk-akcent); font-size: 16px; }
.ox-v-3ed__kartica--hore { top: 6%; left: -2%; animation-delay: .4s; }
.ox-v-3ed__kartica--dole { bottom: 14%; right: 0; animation-delay: 1.4s; }
@keyframes ox-3ed-vznasa { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* Pás dôvery pod hrdinom ----------------------------------------------------- */
.ox-v-3ed-dovera { position: relative; z-index: 2; background: var(--sk-biela); border-block: 1px solid var(--sk-linka); }
.ox-v-3ed-dovera__mriezka { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; }
.ox-v-3ed-dovera__polozka { display: flex; align-items: center; gap: 12px; padding: 20px 18px; font-size: 13.5px; line-height: 1.4; }
.ox-v-3ed-dovera__ikona {
	width: 38px; height: 38px; border-radius: 50%; background: var(--sk-krem);
	display: grid; place-items: center; font-size: 17px; flex: 0 0 auto;
}
.ox-v-3ed-dovera__polozka b { display: block; font-size: 14px; margin-bottom: 2px; }
.ox-v-3ed-dovera__polozka small { display: block; font-size: 12.5px; color: var(--sk-text-tlmeny); }

/* Nábeh obsahu (v koncepte `.rv`) — skrytý stav zapína až skript ------------- */
.ox-v-3ed-rv--pripravene {
	opacity: 0; transform: translateY(26px);
	transition: opacity .8s var(--sk-prechod), transform .8s var(--sk-prechod);
}
.ox-v-3ed-rv--pripravene.ox-v-3ed-rv--in { opacity: 1; transform: none; }

/* Číslovanie v podpisovej sekcii --------------------------------------------- */
.ox-v-3ed-sek__cislo { display: block; font-family: var(--sk-font-display); color: var(--sk-akcent); font-size: 15px; line-height: var(--sk-nadpis-lh); }

/* Vypnutý pohyb -------------------------------------------------------------- */
.ox-v-3ed--bezpohybu .ox-v-3ed__bobula,
.ox-v-3ed--bezpohybu .ox-v-3ed__kartica { animation: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	.ox-v-3ed__bobula, .ox-v-3ed__kartica { animation: none; }
	.ox-v-3ed-rv--pripravene { opacity: 1; transform: none; transition: none; }
}

/* Užšie okná ----------------------------------------------------------------- */
@media (max-width: 900px) {
	/* ako v koncepte: jeden stĺpec, sadzba na stred, kartičky preč (nemajú kam) */
	.ox-v-3ed__mriezka { grid-template-columns: 1fr; text-align: center; }
	.ox-v-3ed__lead { margin-inline: auto; }
	.ox-v-3ed__akcie { justify-content: center; }
	.ox-v-3ed__kartica { display: none; }
	.ox-v-3ed__popiska { justify-content: center; text-align: center; }
}
@media (max-width: 430px) {
	.ox-v-3ed__lista { font-size: 11.5px; }
	.ox-v-3ed__btn { flex: 1 1 100%; }      /* dve pilulky vedľa seba by sa lámali */
	.ox-v-3ed__odznak { margin-bottom: 16px; }
	.ox-v-3ed-dovera__polozka { padding: 16px 4px; }
}
/* Nízke notebooky (720–860 px): hrdina sa musí zmestiť tak, aby boli vidieť aj
   tlačidlá — presne tá istá poistka ako v koncepte. */
@media (min-width: 901px) and (max-height: 860px) {
	.ox-v-3ed__mriezka { padding-block: clamp(26px, 3.4vh, 52px); gap: 30px; }
	.ox-v-3ed__h1 { font-size: clamp(38px, 5.1vw, 66px); }
	.ox-v-3ed__lead { margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
	.ox-v-3ed__akcie { margin-top: 20px; }
	.ox-v-3ed__odznak { margin-bottom: 14px; }
	.ox-v-3ed__foto img { max-height: 46vh; }
}

/* =============================================================================
   04-candy — hrdina „cukríkový pult“ (verne podľa konceptu 04-candy.html)
   -----------------------------------------------------------------------------
   Ružovo-krémové škvrny na bielej, plátno so skákajúcimi bobuľami, vľavo sadzba
   s červeným riadkom, vpravo kruhový výrez fotky v bielo-ružovom prstenci s
   dvoma nálepkami, dole pomôcka a pod hrdinom červený bežiaci pás.

   Hrdina má vlastné NEPRIEHĽADNÉ pozadie: pod stránkou beží efekt témy s tými
   istými bobuľami cez celé okno a dve vrstvy rovnakých guľôčok by sa bili.
   Pohyb zapína trieda `--pohyb` (dáva ju JS podľa OXO_POHYB), nie médiá-otázka —
   inak by prepínač „◐“ na zostave so systémovým obmedzením animácií nič nerobil.
   ========================================================================== */
.ox-v-04c {
	position: relative; isolation: isolate;
	display: grid; align-items: center;
	padding: 0;                       /* rytmus si riadi vnútro, nie základ */
	min-height: min(86svh, 840px);
	overflow: hidden;
	/* dve škvrny z konceptu: ružová vpravo hore, krémová vľavo dole */
	background:
		radial-gradient(90% 70% at 78% 12%, var(--sk-ruz) 0%, transparent 62%),
		radial-gradient(70% 60% at 8% 88%, var(--sk-krem) 0%, transparent 60%),
		var(--sk-biela);
}
.ox-v-04c__platno {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; display: block;
	touch-action: manipulation;       /* klik vyhodí bobule, prst stále scrolluje */
}
/* biele stlmenie pri spodnej hrane — bobule tam „zapadnú“ za mliečne sklo */
.ox-v-04c::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0;
	height: 110px; z-index: 2; pointer-events: none;
	background: linear-gradient(to top, var(--sk-biela), transparent);
}

.ox-v-04c__vnutro {
	position: relative; z-index: 3;
	display: grid; align-items: center;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(20px, 3.4vw, 44px);
	padding-block: clamp(34px, 5vw, 74px);
	pointer-events: none;             /* kliky prechádzajú na plátno… */
}
.ox-v-04c__vnutro a, .ox-v-04c__vnutro button { pointer-events: auto; }   /* …okrem odkazov */
.ox-v-04c__text { position: relative; z-index: 2; }

.ox-v-04c__h1 {
	margin: 14px 0 20px;
	/* Luckiest Guy je široké písmo: nad ~5,4vw sa „ktoré v ústach“ zlomí na dva
	   riadky a hrdina prerastie cez ohyb aj na 900 px vysokom okne. */
	font-size: clamp(38px, 5.4vw, 86px);
	line-height: var(--sk-nadpis-lh);
	text-wrap: initial;               /* riadky lámu <br>, nie prehliadač */
}
/* červený „výkrik“ na treťom riadku — v koncepte `.hero h1 .lg` */
.ox-v-04c__lg {
	display: block; color: var(--sk-akcent);
	font-size: .62em; line-height: var(--sk-nadpis-lh); padding-top: .06em;
}
.ox-v-04c__lead { max-width: 52ch; margin: 0; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.7; }
.ox-v-04c__akcie { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ox-v-04c__chipy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ox-v-04c__chipy .ox-chip { cursor: default; }   /* sú to prísľuby, nie filtre */

/* Kruhový výrez fotky ------------------------------------------------------- */
.ox-v-04c__art { position: relative; display: grid; place-items: center; padding: 14px; }
.ox-v-04c__ram {
	position: relative; display: block; width: min(86%, 420px); aspect-ratio: 1;
	border-radius: 50%; overflow: hidden; background: var(--sk-biela);
	box-shadow: 0 0 0 10px var(--sk-biela), 0 0 0 20px var(--sk-ruz), var(--sk-tien);
}
.ox-v-04c__ram img { width: 100%; height: 100%; object-fit: cover; }
/* Katalógová fotka má produkt v strede a biele pozadie — výrezom by sme jej
   odrezali okraje, preto ju do kruhu vpasujeme celú. */
.ox-v-04c__ram--katalog img { object-fit: contain; padding: 9%; }
.ox-v-04c--pohyb .ox-v-04c__ram { animation: ox-04c-hojda 5.2s ease-in-out infinite; }
@keyframes ox-04c-hojda {
	0%, 100% { transform: translateY(0) rotate(-1.5deg); }
	50%      { transform: translateY(-22px) rotate(1.5deg); }
}

.ox-v-04c__nalepka {
	position: absolute; z-index: 4; display: grid; place-items: center; text-align: center;
	border-radius: var(--sk-r-pilulka); padding: 12px;
	background: var(--sk-akcent); color: var(--sk-biela);
	font-family: var(--sk-font-display); line-height: var(--sk-nadpis-lh);
	box-shadow: var(--sk-tien);
}
/* menšie natočenie + väčšie písmo = čitateľné (poznámka z konceptu) */
.ox-v-04c__nalepka--a { top: 2%; right: -1%; width: 126px; height: 126px; font-size: 17px; transform: rotate(-7deg); }
.ox-v-04c__nalepka--b { bottom: 6%; left: -3%; width: 112px; height: 112px; font-size: 16px; transform: rotate(6deg); background: var(--sk-atrament); }
.ox-v-04c--pohyb .ox-v-04c__nalepka--a { animation: ox-04c-kyv-a 4.4s ease-in-out infinite; }
.ox-v-04c--pohyb .ox-v-04c__nalepka--b { animation: ox-04c-kyv-b 5.6s ease-in-out infinite; }
@keyframes ox-04c-kyv-a { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(-2deg) scale(1.04); } }
@keyframes ox-04c-kyv-b { 0%, 100% { transform: rotate(6deg) scale(1); }  50% { transform: rotate(1deg) scale(1.04); } }

/* popiska so skutočným produktom (koncept ju nemal — hrdina e-shopu predáva) */
.ox-v-04c__popiska {
	/* stĺpec je grid s `place-items:center`, takže položka má šírku obsahu —
	   bez stropu by dlhý názov produktu vytiekol do stĺpca so sadzbou */
	max-width: 100%; margin: 20px 0 0; font-size: 12.5px; line-height: 1.5;
	color: var(--sk-text-tlmeny); text-align: center;
}
.ox-v-04c__popiska[hidden] { display: none; }
.ox-v-04c__popiska b { color: var(--sk-text); font-weight: 600; }
.ox-v-04c__popiska a { color: var(--sk-akcent); font-weight: 700; white-space: nowrap; }

/* Pomôcka „Klikni do bubliniek“ — bez pohybu nemá zmysel pozývať na klikanie -- */
.ox-v-04c__hint { display: none; }
.ox-v-04c--pohyb .ox-v-04c__hint {
	display: inline-flex; align-items: center;
	position: absolute; left: 50%; bottom: 22px; z-index: 4;
	padding: 10px 20px; border-radius: var(--sk-r-pilulka);
	background: var(--sk-biela);      /* cez bubliny bol priesvitný nečitateľný */
	box-shadow: var(--sk-tien-karta), var(--sk-obrys);
	font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
	color: var(--sk-text-tlmeny); white-space: nowrap; pointer-events: none;
	animation: ox-04c-pulz 2.6s ease-in-out infinite;
}
@keyframes ox-04c-pulz {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -6px); }
}

/* Bežiaci pás pod hrdinom ---------------------------------------------------- */
.ox-v-04c-pas {
	position: relative; z-index: 5; overflow: hidden; padding: 16px 0;
	background: var(--sk-akcent); color: var(--sk-biela);
}
.ox-v-04c-pas__stopa { display: flex; width: max-content; }
.ox-v-04c-pas__stopa span {
	display: inline-flex; align-items: center; gap: 12px;
	padding-inline: 17px; white-space: nowrap;
	font-family: var(--sk-font-display);
	font-size: clamp(18px, 2.3vw, 30px); line-height: var(--sk-nadpis-lh);
}
.ox-v-04c-pas__stopa i { font-style: normal; opacity: .55; }
/* stopa je dvakrát tá istá štvorica, posun o -50 % je preto neviditeľný */
.ox-v-04c-pas--pohyb .ox-v-04c-pas__stopa { animation: ox-04c-pas 26s linear infinite; }
@keyframes ox-04c-pas { to { transform: translateX(-50%); } }

/* Podpisová sekcia „Štyri kroky a je to“ ------------------------------------- */
.ox-v-04c-krok { position: relative; }
.ox-v-04c-krok__emo { position: absolute; top: 20px; right: 22px; font-size: 26px; line-height: 1; }
.ox-v-04c-krok h3 { margin-bottom: 8px; }
.ox-v-04c-krok p { margin: 0; font-size: 14px; }

/* Užšie okná ----------------------------------------------------------------- */
@media (max-width: 980px) {
	/* ako v koncepte: jeden stĺpec, sadzba na stred, fotka nad textom */
	.ox-v-04c { min-height: auto; }
	.ox-v-04c__vnutro { grid-template-columns: 1fr; text-align: center; gap: 14px; padding-block: clamp(26px, 6vw, 48px); }
	.ox-v-04c__lead { margin-inline: auto; }
	.ox-v-04c__akcie, .ox-v-04c__chipy { justify-content: center; }
	.ox-v-04c__art { order: -1; margin-bottom: 6px; }
	.ox-v-04c__nalepka--a { top: 0; right: -4px; width: 104px; height: 104px; font-size: 13px; }
	.ox-v-04c__nalepka--b { left: -6px; width: 88px; height: 88px; font-size: 12px; }
	.ox-v-04c--pohyb .ox-v-04c__hint { display: none; }
}
@media (max-width: 430px) {
	.ox-v-04c__akcie .ox-btn { flex: 1 1 100%; }   /* dve pilulky vedľa seba by sa lámali */
	.ox-v-04c__ram { width: min(76%, 300px); }
	.ox-v-04c__nalepka--a { width: 88px; height: 88px; font-size: 12px; }
	.ox-v-04c__nalepka--b { width: 76px; height: 76px; font-size: 11px; }
}
/* Nízke notebooky: nad hrdinom je ešte lišta návrhov (44 px) a hlavička (74 px),
   pri plnej veľkosti nadpisu by chipy vypadli pod ohyb. */
@media (min-width: 981px) and (max-height: 860px) {
	.ox-v-04c { min-height: min(92svh, 640px); }
	.ox-v-04c__h1 { font-size: clamp(34px, 4.8vw, 70px); margin: 10px 0 16px; }
	.ox-v-04c__lead { font-size: 16px; line-height: 1.6; }
	.ox-v-04c__akcie { margin-top: 22px; }
	.ox-v-04c__chipy { margin-top: 18px; }
	.ox-v-04c__ram { width: min(74%, 330px); }
}

/* =============================================================================
   05-arcade — hrdina „arkádová skrinka“ (verne podľa konceptu 05-arcade.html)
   -----------------------------------------------------------------------------
   Vľavo sadzba (Insert coin → nadpis → lead → tlačidlá → tri fakty), vpravo
   herný automat: čierna lišta, aréna s plátnom hry, HUD, štartovacia obrazovka
   a pätka s postupom k zľave. Pod hrdinom červený bežiaci pás.

   Hrdina má vlastné NEPRIEHĽADNÉ pozadie: efekt témy (assets/temy/efekty/05-arcade.js)
   kreslí cez celú stránku tie isté padajúce pixelové bobule a cez priesvitnú
   plochu by sa bili s bobuľami v aréne.

   Firemná červená #D60019 je podľa KONTRAKT.md nemenná — kde treba priehľadnosť
   (posunuté tiene, žiara), je zapísaná ako rgba(255, 0, 29,…): tokeny s alfou
   pracovať nevedia.
   ========================================================================== */
.ox-v-ark {
	padding-block: clamp(34px, 5vw, 72px) clamp(40px, 5.5vw, 82px);
	background:
		radial-gradient(46vw 46vw at 6% -6%, var(--sk-krem) 0%, rgba(255, 247, 230, 0) 62%),
		var(--sk-biela);
}
.ox-v-ark__mriezka {
	display: grid; align-items: center;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: clamp(28px, 4vw, 60px);
}

/* Sadzba vľavo ------------------------------------------------------------- */
.ox-v-ark__oko {
	display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
	font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
	color: var(--sk-akcent);
}
.ox-v-ark__oko em { width: 9px; height: 9px; background: var(--sk-akcent); font-style: normal; flex: 0 0 auto; }
.ox-v-ark__h1 {
	margin: 0; font-size: clamp(40px, 7vw, 96px);
	text-wrap: initial;                 /* riadky lámu <br>, nie prehliadač */
}
/* <u> nesie červené „Vyhraj zľavu.“ — podčiarknutie by v Antone splynulo. */
.ox-v-ark__h1 u { text-decoration: none; color: var(--sk-akcent); text-shadow: 0 0 30px rgba(255, 0, 29, .32); }
.ox-v-ark__lead {
	max-width: 44ch; margin: 20px 0 0;
	color: var(--sk-text-tlmeny); font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.65;
}
.ox-v-ark__akcie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ox-v-ark__btn { padding: 15px 26px; font-size: 13px; letter-spacing: .14em; }
.ox-v-ark__fakty {
	display: flex; flex-wrap: wrap; gap: 22px;
	margin-top: 30px; padding-top: 22px; border-top: 2px dashed var(--sk-linka);
}
.ox-v-ark__fakt b {
	display: block; font-family: var(--sk-font-nadpis); font-size: 26px;
	line-height: var(--sk-nadpis-lh); padding-top: .05em; color: var(--sk-text);
}
.ox-v-ark__fakt span {
	font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--sk-text-tlmeny);
}

/* Skrinka automatu --------------------------------------------------------- */
.ox-v-ark__skrinka {
	position: relative; display: flex; flex-direction: column; min-width: 0;
	background: var(--sk-biela);
	box-shadow: inset 0 0 0 3px var(--sk-atrament), 14px 14px 0 rgba(255, 0, 29, .16);
}
.ox-v-ark__vrch {
	display: flex; align-items: center; gap: 10px; padding: 12px 14px;
	background: var(--sk-atrament); color: var(--sk-biela);
	border-bottom: 3px solid var(--sk-atrament);
}
.ox-v-ark__dioda { width: 10px; height: 10px; background: var(--sk-akcent); flex: 0 0 auto; }
.ox-v-ark__ttl {
	font-family: var(--sk-font-display); font-size: 12.5px; letter-spacing: .13em;
	line-height: var(--sk-nadpis-lh); padding-top: .06em;
}
.ox-v-ark__verzia {
	margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
	opacity: .72; font-variant-numeric: tabular-nums;
}

/* Aréna: podklad je z konceptu (ruž zhora, krém dole) a je nepriehľadný ----- */
.ox-v-ark__arena {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 4.35; min-height: 320px;
	background:
		radial-gradient(120% 90% at 50% 0%, var(--sk-ruz) 0%, rgba(255, 217, 214, 0) 58%),
		linear-gradient(180deg, var(--sk-biela) 0%, var(--sk-krem) 100%);
	cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.ox-v-ark__platno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ox-v-ark__scan {
	position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: repeating-linear-gradient(180deg, rgba(27, 27, 27, .055) 0 1px, transparent 1px 4px);
}
.ox-v-ark__vineta {
	position: absolute; inset: 0; z-index: 3; pointer-events: none;
	box-shadow: inset 0 0 70px rgba(27, 27, 27, .13), inset 0 0 0 1px rgba(27, 27, 27, .08);
}

/* HUD nad plátnom. Kým beží štartovacia obrazovka, je skrytý — cez rozmazané
   prekrytie pôsobil ako „duchovia“ (rovnaká poznámka je v koncepte). */
.ox-v-ark__hud {
	position: absolute; inset: 0; z-index: 4; pointer-events: none; padding: 14px;
	opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.ox-v-ark__arena--hra .ox-v-ark__hud { opacity: 1; visibility: visible; }
.ox-v-ark__hudrad { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ox-v-ark__hudbox {
	background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 2px var(--sk-atrament);
	padding: 7px 11px; min-width: 0;
}
.ox-v-ark__hudbox small {
	display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
	color: var(--sk-text-tlmeny);
}
.ox-v-ark__hudbox b {
	display: block; font-family: var(--sk-font-nadpis); font-size: 22px;
	line-height: var(--sk-nadpis-lh); padding-top: .06em;
}
.ox-v-ark__hudbox--hlavny b { color: var(--sk-akcent); }
.ox-v-ark__combo {
	margin-left: auto; background: var(--sk-akcent); color: var(--sk-biela);
	padding: 9px 12px 7px; font-family: var(--sk-font-nadpis); font-size: 16px;
	line-height: var(--sk-nadpis-lh); white-space: nowrap;
	opacity: 0; transform: translateY(-6px); transition: .22s var(--sk-prechod);
}
.ox-v-ark__combo--on { opacity: 1; transform: none; }

/* Štartovacia obrazovka ---------------------------------------------------- */
.ox-v-ark__start {
	position: absolute; inset: 0; z-index: 6;
	display: grid; place-content: center; justify-items: center; gap: 14px;
	text-align: center; padding: 24px;
	background: rgba(255, 255, 255, .82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
	transition: opacity .35s var(--sk-prechod), visibility .35s;
}
.ox-v-ark__start--prec { opacity: 0; visibility: hidden; pointer-events: none; }
.ox-v-ark__starth {
	margin: 0; font-family: var(--sk-font-nadpis); text-transform: uppercase;
	font-size: clamp(22px, 3.2vw, 34px); line-height: var(--sk-nadpis-lh); padding-top: .05em;
}
.ox-v-ark__startp { margin: 0; font-size: 13px; color: var(--sk-text-tlmeny); max-width: 30ch; }
.ox-v-ark__press {
	border: 0; cursor: pointer;
	background: var(--sk-akcent); color: var(--sk-biela);
	font-family: var(--sk-font-nadpis); text-transform: uppercase; letter-spacing: .06em;
	font-size: 20px; line-height: var(--sk-nadpis-lh); padding: 15px 30px 13px;
	filter: drop-shadow(0 0 22px rgba(255, 0, 29, .5));
	animation: ox-ark-pulz 1.5s ease-in-out infinite;
	transition: transform .18s var(--sk-prechod);
}
.ox-v-ark__press:hover { transform: scale(1.05); }
.ox-v-ark__press[hidden] { display: none; }
@keyframes ox-ark-pulz {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 0, 29, .35)); }
	50%      { filter: drop-shadow(0 0 30px rgba(255, 0, 29, .7)); }
}

/* Pätka skrinky: postup, kód, reštart -------------------------------------- */
.ox-v-ark__spodok { border-top: 3px solid var(--sk-atrament); padding: 14px; }
.ox-v-ark__plabel {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	margin-bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
	text-transform: uppercase; color: var(--sk-text-tlmeny);
}
.ox-v-ark__plabel span:last-child { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.ox-v-ark__bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 16px; }
.ox-v-ark__bar i { background: var(--sk-ruz); box-shadow: inset 0 0 0 1.5px rgba(27, 27, 27, .16); transition: background .25s, box-shadow .25s; }
.ox-v-ark__bar i.ox-v-ark__bar-on { background: var(--sk-akcent); box-shadow: inset 0 0 0 1.5px var(--sk-akcent-tmavy); }
.ox-v-ark__odomk {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	margin-top: 13px; padding: 13px; background: var(--sk-atrament); color: var(--sk-biela);
	animation: ox-ark-pad .5s var(--sk-prechod);
}
.ox-v-ark__odomk[hidden] { display: none; }   /* inak by flex prebil atribút hidden */
@keyframes ox-ark-pad { from { opacity: 0; transform: translateY(10px); } }
.ox-v-ark__kod {
	font-family: var(--sk-font-nadpis); font-size: 22px; line-height: var(--sk-nadpis-lh);
	padding: 7px 13px 5px; background: var(--sk-akcent); letter-spacing: .1em;
}
.ox-v-ark__odomk small { font-size: 11px; opacity: .82; flex: 1 1 130px; min-width: 130px; line-height: 1.45; }
.ox-v-ark__kopiruj {
	background: none; border: 0; cursor: pointer; color: inherit; text-decoration: none;
	font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	padding: 9px 13px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
	transition: background .2s var(--sk-prechod), color .2s var(--sk-prechod);
}
.ox-v-ark__kopiruj:hover { background: var(--sk-biela); color: var(--sk-atrament); }
.ox-v-ark__restart {
	margin-top: 11px; background: none; border: 0; padding: 4px 0; cursor: pointer;
	font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--sk-text-tlmeny); transition: color .2s var(--sk-prechod);
}
.ox-v-ark__restart::after { content: "_"; margin-left: .2em; color: var(--sk-akcent); animation: ox-ark-blik 1s steps(2, end) infinite; }
.ox-v-ark__restart:hover { color: var(--sk-akcent); }

/* Blikanie diódy aj kurzora ------------------------------------------------ */
.ox-v-ark__oko em, .ox-v-ark__dioda { animation: ox-ark-blik 1.2s steps(2, end) infinite; }
@keyframes ox-ark-blik { 50% { opacity: 0; } }

/* Bežiaci pás pod hrdinom -------------------------------------------------- */
.ox-v-ark-pas {
	position: relative; z-index: 5; overflow: hidden;
	background: var(--sk-akcent); color: var(--sk-biela);
	border-block: 3px solid var(--sk-atrament); padding: 12px 0;
}
.ox-v-ark-pas__stopa { display: flex; width: max-content; animation: ox-ark-pas 26s linear infinite; }
.ox-v-ark-pas__stopa span {
	display: inline-flex; align-items: center; gap: 22px;
	font-family: var(--sk-font-nadpis); text-transform: uppercase;
	font-size: clamp(15px, 2vw, 19px); line-height: var(--sk-nadpis-lh); padding-top: .06em;
	padding-inline: 22px; white-space: nowrap;
}
.ox-v-ark-pas__stopa span::after { content: ""; width: 9px; height: 9px; background: var(--sk-biela); flex: 0 0 auto; }
@keyframes ox-ark-pas { to { transform: translateX(-50%); } }

/* Vypnutý pohyb (prepínač v lište aj systémové nastavenie) ------------------ */
.ox-v-ark--bezpohybu .ox-v-ark__oko em,
.ox-v-ark--bezpohybu .ox-v-ark__dioda,
.ox-v-ark--bezpohybu .ox-v-ark__restart::after,
.ox-v-ark--bezpohybu .ox-v-ark__press,
.ox-v-ark-pas--bezpohybu .ox-v-ark-pas__stopa { animation: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	.ox-v-ark__oko em, .ox-v-ark__dioda, .ox-v-ark__restart::after,
	.ox-v-ark__press, .ox-v-ark-pas__stopa, .ox-v-ark__odomk { animation: none; }
}

/* Podpisová sekcia — výsledková tabuľka „Čo dostanete“ --------------------- */
.ox-v-ark-board__uvod { max-width: 38ch; margin: 0; font-size: 15px; }
.ox-v-ark-board { box-shadow: inset 0 0 0 2px var(--sk-atrament); background: var(--sk-biela); }
.ox-v-ark-board__hlava {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 13px 16px; background: var(--sk-atrament); color: var(--sk-biela);
	font-size: 10.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
}
.ox-v-ark-board__zoznam { list-style: none; margin: 0; padding: 0; }
.ox-v-ark-board__zoznam li {
	display: flex; align-items: center; gap: 14px; padding: 15px 16px;
	border-bottom: 1px dashed var(--sk-linka); transition: background .2s var(--sk-prechod);
}
.ox-v-ark-board__zoznam li:last-child { border-bottom: 0; }
.ox-v-ark-board__zoznam li:hover { background: var(--sk-krem); }
.ox-v-ark-board__rk { flex: 0 0 30px; font-family: var(--sk-font-nadpis); font-size: 16px; line-height: var(--sk-nadpis-lh); color: var(--sk-akcent); }
.ox-v-ark-board__tx { min-width: 0; }
.ox-v-ark-board__tx b { display: block; font-size: 14.5px; font-weight: 700; }
.ox-v-ark-board__tx span { font-size: 12.8px; color: var(--sk-text-tlmeny); }
.ox-v-ark-board__pt { margin-left: auto; font-family: var(--sk-font-nadpis); font-size: 15px; line-height: var(--sk-nadpis-lh); white-space: nowrap; }
.ox-v-ark-board__pata {
	display: flex; flex-wrap: wrap; gap: 11px; padding: 16px;
	background: var(--sk-krem); border-top: 2px solid var(--sk-atrament);
}

/* Užšie okná --------------------------------------------------------------- */
@media (max-width: 1000px) {
	/* jeden stĺpec ako v koncepte — skrinka ide pod sadzbu a zúži sa */
	.ox-v-ark__mriezka { grid-template-columns: 1fr; }
	.ox-v-ark__skrinka { width: 100%; max-width: 560px; margin-inline: auto; }
	.ox-v-ark__arena { aspect-ratio: 4 / 3.9; }
	.ox-v-ark__lead { max-width: none; }
}
@media (max-width: 620px) {
	.ox-v-ark__fakty { gap: 16px; }
	.ox-v-ark__hudbox { padding: 6px 9px; }
	.ox-v-ark__hudbox b { font-size: 19px; }
	.ox-v-ark__combo { font-size: 14px; padding: 8px 10px 6px; }
	.ox-v-ark__bar { gap: 3px; height: 14px; }
	.ox-v-ark__kod { font-size: 19px; }
}
@media (max-width: 430px) {
	/* dve tlačidlá vedľa seba by sa na 390 px lámali do písmen */
	.ox-v-ark__btn { flex: 1 1 100%; }
	.ox-v-ark__arena { min-height: 300px; }
	.ox-v-ark__hud { padding: 10px; }
	.ox-v-ark__spodok, .ox-v-ark__vrch { padding: 11px; }
	.ox-v-ark__ttl { font-size: 11px; letter-spacing: .1em; }
}
/* Nízke notebooky: skrinka aj tlačidlá sa musia zmestiť nad ohyb. */
@media (min-width: 1001px) and (max-height: 860px) {
	.ox-v-ark { padding-block: 30px 44px; }
	.ox-v-ark__h1 { font-size: clamp(36px, 4.8vw, 66px); }
	.ox-v-ark__lead { margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
	.ox-v-ark__akcie { margin-top: 20px; }
	.ox-v-ark__fakty { margin-top: 20px; padding-top: 16px; }
	.ox-v-ark__arena { min-height: 260px; aspect-ratio: 4 / 3.4; }
}

/* =============================================================================
   === 06-motion — hrdina „tri typografické stavy“ =============================
   Verne podľa konceptu 06-motion.html: plátno s perleťovými bobuľami a dvoma
   prstencami, biely závoj, fotka bobúľ vľavo hore, pohár vpravo dole, v strede
   striedajúce sa nadpisy, dole ovládanie a „Scrolluj“, pod hrdinom červený pás.
   Pohyb je zapnutý triedou `--pohyb` (dáva ju JS podľa OXO_POHYB), nie
   médiá-otázkou: jadro systémové nastavenie už zohľadnilo a lišta ho vie prebiť.
   ========================================================================== */
.ox-v-pohyb {
	padding: 0;
	min-height: min(84vh, 780px);
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	/* vlastné NEPRIEHĽADNÉ pozadie — pod stránkou beží efekt témy s tou istou
	   scénou a dve vrstvy rovnakých bobúľ by sa bili */
	background: radial-gradient(64% 52% at 50% 40%, var(--sk-krem) 0%, var(--sk-biela) 62%);
}
.ox-v-pohyb__platno { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
/* biely závoj medzi bobuľami a sadzbou — bez neho je typografia „zašumená“ */
.ox-v-pohyb__zavoj {
	position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block;
	/* Priehľadnosť rieši `opacity`, nie rgba() v gradiente — farby smú prísť len
	   z tokenov a tie sú nepriehľadné hexy. Koncept mal v strede 0,88. */
	opacity: .92;
	background:
		radial-gradient(50% 38% at 50% 42%, var(--sk-biela) 0%, var(--sk-biela) 28%, transparent 78%),
		radial-gradient(64% 56% at 50% 45%, var(--sk-krem) 0%, transparent 72%);
}

/* --- javisko s troma stavmi ------------------------------------------------ */
.ox-v-pohyb__javisko {
	position: relative; z-index: 3; grid-row: 1; min-width: 0;
	display: grid; grid-template-areas: "stav"; place-items: center; text-align: center;
	padding: clamp(44px, 7vh, 92px) var(--sk-pad) clamp(14px, 2.6vh, 30px);
	pointer-events: none;                 /* kliky patria plátnu a fotkám pod ním */
}
.ox-v-pohyb__stav {
	grid-area: stav;                      /* všetky tri v jednej bunke → nič neposkakuje */
	width: 100%; max-width: 62rem; min-width: 0;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	visibility: hidden; opacity: 0;
}
.ox-v-pohyb__stav--aktivny, .ox-v-pohyb__stav--odchod { visibility: visible; opacity: 1; }
.ox-v-pohyb__stav a, .ox-v-pohyb__stav button { pointer-events: auto; }
.ox-v-pohyb__stav .ox-oko { margin-bottom: 0; }
.ox-v-pohyb__h1, .ox-v-pohyb__h2 { margin: 0; max-width: 100%; }
.ox-v-pohyb__h1 { font-size: clamp(38px, 8.6vw, 124px); }
.ox-v-pohyb__h2 { font-size: clamp(32px, 6.4vw, 88px); }
.ox-v-pohyb__lead {
	margin: 0; max-width: 44ch; color: var(--sk-text-tlmeny);
	font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6;
}
.ox-v-pohyb__akcie { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.ox-v-pohyb__pilulka {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
	color: var(--sk-text); background: var(--sk-biela);
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-pilulka); padding: 9px 18px;
}
.ox-v-pohyb__pilulka i { width: 7px; height: 7px; border-radius: 50%; background: var(--sk-akcent); flex: 0 0 auto; }
.ox-v-pohyb--pohyb .ox-v-pohyb__pilulka i { animation: ox-pohyb-tep 1.9s var(--sk-prechod) infinite; }
@keyframes ox-pohyb-tep { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: .45; } }

/* --- sadzba po písmenách ---------------------------------------------------
   Maska je na SLOVE a má zámerne veľký zvislý padding s rovnakým záporným
   marginom: Anton inak nechá mäkčene a dĺžne orezané o hranu masky. */
.ox-v-pohyb__slovo {
	display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap;
	padding: .2em .04em .12em; margin: -.2em -.04em -.12em;
}
.ox-v-pohyb__znak { display: inline-block; }
.ox-v-pohyb--pohyb .ox-v-pohyb__stav--aktivny .ox-v-pohyb__znak {
	animation: ox-pohyb-vjazd 1s var(--sk-prechod) both;
	animation-delay: calc(var(--i, 0) * .026s);
}
.ox-v-pohyb--pohyb .ox-v-pohyb__stav--odchod .ox-v-pohyb__znak {
	animation: ox-pohyb-odchod .3s cubic-bezier(.55, 0, .9, .35) both;
	animation-delay: calc(var(--o, 0) * .006s);   /* odchod ide od konca nadpisu */
}
.ox-v-pohyb--pohyb .ox-v-pohyb__stav--aktivny .ox-v-pohyb__cast {
	animation: ox-pohyb-nabeh .8s var(--sk-prechod) both; animation-delay: var(--d, 0s);
}
.ox-v-pohyb--pohyb .ox-v-pohyb__stav--odchod .ox-v-pohyb__cast { animation: ox-pohyb-zhasni .24s ease-in both; }
@keyframes ox-pohyb-vjazd { from { transform: translateY(118%); } to { transform: none; } }
@keyframes ox-pohyb-odchod { from { transform: none; } to { transform: translateY(-120%); } }
@keyframes ox-pohyb-nabeh { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ox-pohyb-zhasni { to { opacity: 0; transform: translateY(-26px); } }

/* --- fotka bobúľ a pohár --------------------------------------------------- */
.ox-v-pohyb__boba {
	position: absolute; z-index: 2; margin: 0;
	left: calc(var(--sk-pad) - 6px); top: 17%; width: clamp(120px, 15vw, 235px);
}
.ox-v-pohyb__ram {
	display: block; aspect-ratio: 16 / 10; overflow: hidden;
	border-radius: var(--sk-r-obrazok); background: var(--sk-biela);
	box-shadow: var(--sk-tien); will-change: transform;
}
.ox-v-pohyb__ram img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* katalógová fotka má biele pozadie a produkt v strede → nerežeme, vpasujeme */
.ox-v-pohyb__ram--katalog img { object-fit: contain; padding: 8%; }
.ox-v-pohyb__popiska {
	display: flex; flex-direction: column; gap: 2px; margin-top: 10px;
	font-size: 11.5px; line-height: 1.35; color: var(--sk-text-tlmeny);
}
.ox-v-pohyb__popiska[hidden] { display: none; }   /* inak by flex prebil atribút hidden */
.ox-v-pohyb__popiska b { font-weight: 700; color: var(--sk-text); }
.ox-v-pohyb__popiska span { font-family: var(--sk-font-display); font-size: 15px; color: var(--sk-akcent); }
.ox-v-pohyb__pohar {
	position: absolute; z-index: 2; width: clamp(140px, 17vw, 265px); height: auto;
	right: calc(var(--sk-pad) - 6px); bottom: -6%;
	filter: drop-shadow(var(--sk-tien)); pointer-events: none; will-change: transform;
}

/* --- ovládanie stavov ------------------------------------------------------ */
.ox-v-pohyb__lista {
	position: relative; z-index: 4; grid-row: 2;
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px;
	padding: 0 var(--sk-pad) clamp(20px, 3.4vh, 34px);
}
.ox-v-pohyb__sipka {
	width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
	border: 1.5px solid var(--sk-linka); border-radius: var(--sk-r-pilulka);
	background: var(--sk-biela); color: var(--sk-text);
	transition: border-color .4s var(--sk-prechod), color .4s var(--sk-prechod), transform .4s var(--sk-prechod);
}
.ox-v-pohyb__sipka:hover { border-color: var(--sk-akcent); color: var(--sk-akcent); transform: translateY(-2px); }
.ox-v-pohyb__sipka svg { width: 15px; height: 15px; }
.ox-v-pohyb__bodky { display: flex; align-items: center; gap: 10px; }
.ox-v-pohyb__bodka {
	width: 34px; height: 4px; padding: 0; border: 0; overflow: hidden; cursor: pointer;
	border-radius: var(--sk-r-pilulka); background: var(--sk-linka);
}
/* výplň bodky je zároveň ukazovateľ času do ďalšieho stavu (v koncepte to bol
   tenký prúžok progresu pod hlavičkou) */
.ox-v-pohyb__bodka i { display: block; width: 100%; height: 100%; background: var(--sk-akcent); transform: scaleX(0); transform-origin: left; }
.ox-v-pohyb__bodka--aktivna i { transform: scaleX(1); }
.ox-v-pohyb--pohyb .ox-v-pohyb__bodka--aktivna i { animation: ox-pohyb-plnenie var(--trvanie, 5.2s) linear both; }
@keyframes ox-pohyb-plnenie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ox-v-pohyb__scroll {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
	color: var(--sk-text-tlmeny);
}
.ox-v-pohyb__scroll i { display: block; width: 1px; height: 32px; background: linear-gradient(var(--sk-akcent), transparent); }

/* --- červený bežiaci pás pod hrdinom --------------------------------------- */
.ox-v-pohyb-pas {
	position: relative; z-index: 5; overflow: hidden;
	background: var(--sk-akcent); color: var(--sk-biela); padding: 14px 0;
}
.ox-v-pohyb-pas__stopa { display: flex; width: max-content; }
.ox-v-pohyb-pas--pohyb .ox-v-pohyb-pas__stopa { animation: ox-pohyb-pas 26s linear infinite; }
.ox-v-pohyb-pas__stopa span {
	display: inline-flex; align-items: center; gap: 20px; white-space: nowrap; padding-inline: 20px;
	font-family: var(--sk-font-display); text-transform: uppercase;
	font-size: clamp(19px, 2.6vw, 32px); line-height: var(--sk-nadpis-lh);
}
.ox-v-pohyb-pas__stopa span::after { content: ""; width: 11px; height: 11px; border-radius: 999px; background: var(--sk-biela); flex: 0 0 auto; }
@keyframes ox-pohyb-pas { to { transform: translateX(-50%); } }

/* --- podpisová sekcia „Tri kroky a máš to“ --------------------------------- */
.ox-v-pohyb-krok { position: relative; overflow: hidden; }
.ox-v-pohyb-krok__cislo {
	position: absolute; right: 16px; top: 4px; pointer-events: none;
	font-family: var(--sk-font-nadpis); font-size: 72px; line-height: var(--sk-nadpis-lh);
	color: var(--sk-akcent); opacity: .16;
}
.ox-v-pohyb-krok__foto {
	display: grid; place-items: center; height: 158px; margin-bottom: 16px; overflow: hidden;
	background: var(--sk-biela); border-radius: var(--sk-r-obrazok); box-shadow: var(--sk-obrys);
}
.ox-v-pohyb-krok__foto img { max-height: 138px; width: auto; object-fit: contain; }
.ox-v-pohyb-krok h3 { position: relative; margin-bottom: 8px; }
.ox-v-pohyb-krok p { margin: 0; font-size: 14.5px; line-height: 1.62; }

/* --- užšie a nižšie okná --------------------------------------------------- */
@media (max-width: 820px) {
	.ox-v-pohyb { min-height: min(88svh, 700px); }
	/* fotky idú takmer za hranu — na 390 px by inak sedeli v nadpise */
	.ox-v-pohyb__boba { width: 118px; left: -30px; top: 12%; opacity: .9; }
	.ox-v-pohyb__pohar { width: 132px; right: -30px; bottom: -3%; opacity: .9; }
	.ox-v-pohyb__popiska { display: none; }
	.ox-v-pohyb__lead { font-size: 15px; }
}
@media (max-width: 620px) {
	.ox-v-pohyb__scroll { display: none; }          /* bar by sa inak zalamoval */
	/* pilulka sa na 390 px inak láme na dva riadky s osamoteným rokom */
	.ox-v-pohyb__pilulka { font-size: 10px; letter-spacing: .15em; padding: 8px 14px; }
	.ox-v-pohyb__lista { gap: 12px; }
	.ox-v-pohyb__akcie { width: 100%; }
	.ox-v-pohyb__akcie .ox-btn { flex: 1 1 100%; }  /* dve tlačidlá vedľa seba sa na 390 px lámu */
}
@media (max-height: 700px) {
	.ox-v-pohyb { min-height: 560px; }
	.ox-v-pohyb__scroll { display: none; }
}

/* =============================================================================
   07-fluid — hrdina „Tekutá radosť v pohári“ (verne podľa konceptu 07-fluid.html)
   -----------------------------------------------------------------------------
   Hrdina zámerne NEMÁ nepriehľadné pozadie: červená tekutina, ktorú kreslí efekt
   témy (assets/temy/efekty/07-fluid.js), JE jeho pozadím — presne ako canvas
   #fluid v koncepte. Čitateľnosť sadzby drží závoj `::before`: plocha --sk-bg,
   ktorej hustotu riadi maska. Tekutina sa drží vpravo dole, závoj je preto
   najsilnejší vľavo pod textom a vpravo sa úplne rozpustí.
   ========================================================================== */
.ox-v-fl {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 84vh; min-height: min(88svh, 860px);
	padding-block: clamp(28px, 4.4vw, 70px) clamp(76px, 9vw, 118px);
	overflow: hidden;
}
.ox-v-fl::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: var(--sk-bg);
	-webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.9) 38%, rgba(0,0,0,.36) 62%, rgba(0,0,0,0) 84%);
	        mask-image: linear-gradient(100deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.9) 38%, rgba(0,0,0,.36) 62%, rgba(0,0,0,0) 84%);
}
/* Zrno — v koncepte je cez celú stránku, tu len nad hrdinom, aby nešpinilo
   produktové fotky v katalógu. Bez `mix-blend-mode`: multiply by na tmavej
   ploche zrno pohltil a difference nad červenou vyrába tyrkysovú (KONTRAKT.md). */
.ox-v-fl::after {
	content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ox-v-fl__mriezka {
	position: relative; z-index: 2;
	display: grid; align-items: center;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(20px, 3.4vw, 60px);
}

/* Sadzba vľavo ------------------------------------------------------------- */
.ox-v-fl__kick {
	display: inline-block; transform: rotate(-3.5deg); transform-origin: 0 100%;
	font-family: var(--sk-font-display); color: var(--sk-akcent);
	font-size: clamp(15px, 1.9vw, 26px); line-height: 1.3; padding-top: .1em; margin-bottom: .3em;
}
.ox-v-fl__h1 { margin: 0; font-size: clamp(2.9rem, 7.6vw, 8rem); }
/* Riadok je maska: text sa doň vysunie zospodu. `padding-top` je poistka, aby
   maska neodrezala dĺžne a mäkčene v Antone. */
.ox-v-fl__riadok { display: block; overflow: hidden; padding-top: .07em; }
.ox-v-fl__riadok > span { display: block; }
.ox-v-fl__h1 em { font-style: normal; color: var(--sk-akcent); }
.ox-v-fl__copy {
	max-width: 46ch; margin: clamp(12px, 1.6vw, 20px) 0 0;
	font-size: clamp(15px, 1.12vw, 17.5px); line-height: 1.68; color: var(--sk-text-tlmeny);
}
.ox-v-fl__akcie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 2.2vw, 26px); }
.ox-v-fl__sip { display: inline-block; transition: transform .4s var(--sk-prechod); }
.ox-v-fl__btn:hover .ox-v-fl__sip { transform: translateX(4px); }
.ox-v-fl__pozn {
	display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0;
	font-size: 12.8px; color: var(--sk-text-tlmeny);
}
.ox-v-fl__pozn span::before {
	content: '●'; color: var(--sk-akcent); font-size: .5em; vertical-align: .35em; margin-right: 7px;
}

/* Produkt v tekutej kvapke vpravo ------------------------------------------ */
.ox-v-fl__vizual { position: relative; display: grid; place-items: center; margin: 0; min-height: min(52vh, 460px); }
.ox-v-fl__kvapka {
	position: relative; display: block; width: min(100%, 430px); aspect-ratio: 1 / 1.04;
	overflow: hidden; background: var(--sk-biela);   /* fotky produktov majú biely podklad */
	border-radius: 56% 44% 47% 53% / 48% 52% 48% 52%;
	box-shadow: var(--sk-tien);
	animation: ox-v-fl-morf 16s ease-in-out infinite;
	will-change: transform, border-radius;
}
.ox-v-fl__kvapka img { width: 100%; height: 100%; object-fit: contain; padding: 13%; }
@keyframes ox-v-fl-morf {
	0%, 100% { border-radius: 56% 44% 47% 53% / 48% 52% 48% 52%; }
	33%      { border-radius: 43% 57% 62% 38% / 58% 42% 58% 42%; }
	66%      { border-radius: 61% 39% 38% 62% / 40% 60% 43% 57%; }
}
.ox-v-fl__odznak {
	position: absolute; right: 2%; top: 4%; z-index: 2;
	width: clamp(84px, 9.4vw, 118px); height: clamp(84px, 9.4vw, 118px); border-radius: 50%;
	background: var(--sk-akcent); color: var(--sk-biela);
	display: grid; place-items: center; text-align: center;
	font-family: var(--sk-font-display); font-size: clamp(11px, .95vw, 14px);
	line-height: 1.3; padding-top: .1em; box-shadow: var(--sk-btn-tien);
}
.ox-v-fl__popiska { margin: 16px 0 0; font-size: 12.5px; color: var(--sk-text-tlmeny); text-align: center; }
.ox-v-fl__popiska b { color: var(--sk-text); font-weight: 700; }
.ox-v-fl__popiska:empty { display: none; }   /* kým sa neozve katalóg, nedrží miesto */

/* Pomôcka „Skroluj“ -------------------------------------------------------- */
.ox-v-fl__skrol {
	position: absolute; left: var(--sk-pad); bottom: 26px; z-index: 2;
	display: flex; align-items: center; gap: 12px; pointer-events: none;
	font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: var(--sk-text-tlmeny);
}
.ox-v-fl__skrol i { display: block; width: 56px; height: 1px; background: var(--sk-linka); position: relative; overflow: hidden; }
.ox-v-fl__skrol i::after {
	content: ''; position: absolute; inset: 0; background: var(--sk-akcent);
	transform: translateX(-100%); animation: ox-v-fl-cue 2.4s cubic-bezier(.66, 0, .34, 1) infinite;
}
@keyframes ox-v-fl-cue { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* Nábeh obsahu. Skrytý stav platí až keď ho zapne JS — bez skriptu musí byť
   hrdina normálne čitateľný. --------------------------------------------- */
.ox-v-fl--js .ox-v-fl__riadok > span { transform: translateY(105%); transition: transform 1.05s var(--sk-prechod); }
.ox-v-fl--js .ox-v-fl__riadok:nth-child(2) > span { transition-delay: .09s; }
.ox-v-fl--js .ox-v-fl__riadok:nth-child(3) > span { transition-delay: .18s; }
.ox-v-fl--js .ox-v-fl-rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--sk-prechod), transform .9s var(--sk-prechod); }
.ox-v-fl--js .ox-v-fl__copy  { transition-delay: .40s; }
.ox-v-fl--js .ox-v-fl__akcie { transition-delay: .55s; }
.ox-v-fl--js .ox-v-fl__pozn  { transition-delay: .80s; }
.ox-v-fl--js .ox-v-fl__vizual {
	opacity: 0; transform: scale(.94) translateY(24px);
	transition: opacity 1.1s .35s var(--sk-prechod), transform 1.3s .35s var(--sk-prechod);
}
.ox-v-fl--js.ox-v-fl--nabeh .ox-v-fl__riadok > span,
.ox-v-fl--js.ox-v-fl--nabeh .ox-v-fl-rv,
.ox-v-fl--js.ox-v-fl--nabeh .ox-v-fl__vizual { opacity: 1; transform: none; }

/* Kurzor-kvapka: prstenec s červenou žiarou, nad odkazmi sa nafúkne -------- */
.ox-v-fl-kurzor {
	position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none;
	width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
	border: 1.5px solid var(--sk-akcent); opacity: 0; will-change: transform;
	transition: width .3s var(--sk-prechod), height .3s var(--sk-prechod),
	            margin .3s var(--sk-prechod), opacity .3s var(--sk-prechod);
}
/* Náplň je vlastný pseudoprvok, aby sa červená brala z tokenu a nemusela sa
   nikde písať ako rgba() natvrdo. */
.ox-v-fl-kurzor::before {
	content: ''; position: absolute; inset: -1.5px; border-radius: 50%; opacity: .24;
	background: radial-gradient(circle at 50% 40%, var(--sk-akcent), transparent 68%);
}
.ox-v-fl-kurzor--vidno { opacity: 1; }
.ox-v-fl-kurzor--horuci { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@media (hover: none), (pointer: coarse) { .ox-v-fl-kurzor { display: none; } }

/* Červený bežiaci pás pod hrdinom ----------------------------------------- */
.ox-v-fl-pas {
	position: relative; z-index: 2; overflow: hidden;
	background: var(--sk-akcent); color: var(--sk-biela); padding-block: 14px;
}
.ox-v-fl-pas__stopa {
	display: flex; width: max-content; animation: ox-v-fl-posun 26s linear infinite;
	font-family: var(--sk-font-nadpis); font-size: clamp(16px, 2vw, 26px);
	line-height: var(--sk-nadpis-lh); text-transform: var(--sk-nadpis-transform);
}
.ox-v-fl-pas:hover .ox-v-fl-pas__stopa { animation-play-state: paused; }   /* ako v koncepte */
.ox-v-fl-pas__stopa span {
	display: inline-flex; align-items: center; gap: .6em;
	padding-inline: .5em; white-space: nowrap;
}
.ox-v-fl-pas__stopa span::after { content: '·'; color: var(--sk-ruz); }
@keyframes ox-v-fl-posun { to { transform: translateX(-50%); } }

/* Podpisová sekcia — veľké CTA s dýchajúcou kalužou ------------------------ */
.ox-v-fl-cta { position: relative; overflow: hidden; text-align: center; }
.ox-v-fl-cta__kaluz {
	position: absolute; left: 50%; top: 50%; width: min(120vw, 1200px); aspect-ratio: 1;
	translate: -50% -50%; z-index: 0; opacity: .22; filter: blur(8px);
	background: radial-gradient(circle, var(--sk-akcent) 0%, var(--sk-ruz) 40%, transparent 66%);
	animation: ox-v-fl-dych 12s ease-in-out infinite;
}
@keyframes ox-v-fl-dych { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(8deg); } }
.ox-v-fl-cta__vnutro { position: relative; z-index: 1; }
.ox-v-fl-cta .ox-oko { justify-content: center; }
.ox-v-fl-cta__h { margin: 6px 0 0; font-size: clamp(2.4rem, 7vw, 6rem); }
.ox-v-fl-cta__p { max-width: 44ch; margin: 18px auto 26px; color: var(--sk-text-tlmeny); }

/* Bez pohybu (?motion=0 aj systémové nastavenie) --------------------------- */
.ox-v-fl--bezpohybu .ox-v-fl__kvapka,
.ox-v-fl--bezpohybu .ox-v-fl__skrol i::after,
.ox-v-fl-pas--bezpohybu .ox-v-fl-pas__stopa { animation: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	.ox-v-fl__kvapka, .ox-v-fl__skrol i::after,
	.ox-v-fl-pas__stopa, .ox-v-fl-cta__kaluz { animation: none; }
	.ox-v-fl--js .ox-v-fl__riadok > span,
	.ox-v-fl--js .ox-v-fl-rv,
	.ox-v-fl--js .ox-v-fl__vizual { opacity: 1; transform: none; transition: none; }
}

/* Užšie okná --------------------------------------------------------------- */
@media (max-width: 980px) {
	.ox-v-fl__mriezka { grid-template-columns: 1fr; gap: 10px; }
	/* Kvapka ide nad sadzbu — ako v koncepte, kde má hero-float `order:-1`. */
	.ox-v-fl__vizual { order: -1; min-height: auto; }
	.ox-v-fl__kvapka { width: min(66%, 272px); }
	.ox-v-fl__odznak { right: 4%; top: 0; width: clamp(74px, 19vw, 104px); height: clamp(74px, 19vw, 104px); }
	/* Text je cez celú šírku, takže závoj musí kryť zhora nadol; spodok ostáva
	   priehľadný, nech je tekutina vidieť. */
	.ox-v-fl::before {
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.9) 58%, rgba(0,0,0,.3) 90%, rgba(0,0,0,0) 100%);
		        mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.9) 58%, rgba(0,0,0,.3) 90%, rgba(0,0,0,0) 100%);
	}
}
@media (max-width: 640px) {
	.ox-v-fl { min-height: auto; padding-block: 22px 54px; }
	.ox-v-fl__h1 { font-size: clamp(2.5rem, 12.5vw, 3.6rem); }
	.ox-v-fl__kvapka { width: min(62%, 232px); }
	.ox-v-fl__skrol { display: none; }            /* v koncepte tiež mizne */
	.ox-v-fl__copy { font-size: 15px; }
}
@media (max-width: 430px) {
	/* Dve pilulky vedľa seba by sa na 390 px lámali do jednotlivých písmen. */
	.ox-v-fl__akcie .ox-btn { flex: 1 1 100%; }
	.ox-v-fl__pozn { gap: 4px 12px; font-size: 12px; }
	.ox-v-fl__kick { font-size: 15px; }
}
/* Nad hrdinom je ešte lišta návrhov (44 px) a hlavička (74 px) — na nízkom
   notebooku by pri plnej veľkosti nadpisu vypadli tlačidlá pod ohyb. */
@media (min-width: 1100px) and (max-height: 860px) {
	.ox-v-fl { min-height: min(90svh, 640px); padding-block: 26px 66px; }
	.ox-v-fl__h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
	.ox-v-fl__vizual { min-height: 0; }
	.ox-v-fl__kvapka { width: min(100%, 330px); }
}

/* =============================================================================
   08-particles — hrdina „časticová scéna“ (verne podľa konceptu 08-particles.html)
   -----------------------------------------------------------------------------
   Hrdina je vysoký niekoľko obrazoviek a scéna sa v ňom PRIPÍNA — presne ako
   `position:sticky` v koncepte. Sticky tu ale nefunguje: jadro má `overflow-x`
   na `body` aj `overflow:hidden` na `.ox-hero`, čo z hrdinu spraví scroll-
   kontajner a sticky v ňom zamrzne. Pripínanie preto rieši `08-particles.js`
   prepínaním tried (absolútna → fixná → zaparkovaná dole).

   Scéna má vlastné nepriehľadné pozadie: téma 08 kreslí častice aj na pozadí
   celej stránky (assets/temy/efekty/08-particles.js) a dva mraky bodov cez
   seba by boli len šum. Pod hrdinom sa efekt schová, nižšie pracuje naplno.
   ========================================================================== */
.ox-v-cast {
	position: relative;
	/* dráha, po ktorej sa tvar premení cez tri fázy (OXO → pohár → guľôčka) */
	height: 250vh;
	height: 250svh;
	padding: 0;
	/* .ox-hero má `overflow:hidden` — orezalo by pripnutú scénu */
	overflow: visible;
	background: var(--sk-bg);
	--ox-cast-hlava: 118px;   /* lišta návrhov + hlavička; JS ju domeria */
}
.ox-v-cast__scena {
	position: absolute; top: 0; left: 0; right: 0;
	height: calc(100vh - var(--ox-cast-hlava));
	height: calc(100svh - var(--ox-cast-hlava));
	overflow: hidden;
	background: var(--sk-bg);
	isolation: isolate;
}
/* Pripína sa POD hlavičku, nie pod okraj okna — inak by z fázového textu,
   ktorý sedí dole, nebolo pri nule vidieť nič. */
.ox-v-cast--pripnuta .ox-v-cast__scena { position: fixed; top: var(--ox-cast-hlava); z-index: 1; }
.ox-v-cast--dole .ox-v-cast__scena { top: auto; bottom: 0; }

/* Vláskové linky na pozadí — „technická elegancia“ z konceptu -------------- */
.ox-v-cast__mriezka {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	display: flex; justify-content: space-between; padding-inline: var(--sk-pad);
}
.ox-v-cast__mriezka i {
	width: 1px; flex: 0 0 1px;
	background: linear-gradient(180deg, transparent, var(--sk-linka) 14%, var(--sk-linka) 86%, transparent);
}
@media (max-width: 760px) { .ox-v-cast__mriezka i:nth-child(even) { display: none; } }

/* Plátno s časticami a záloha, keď 2D kontext nie je k dispozícii ---------- */
.ox-v-cast__platno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
.ox-v-cast__zaloha { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; }
.ox-v-cast__zaloha span {
	font-family: var(--sk-font-display); color: var(--sk-akcent);
	font-size: min(30vw, 300px); line-height: var(--sk-nadpis-lh);
	letter-spacing: var(--sk-nadpis-spacing);
}
.ox-v-cast--bezplatna .ox-v-cast__platno { display: none; }
.ox-v-cast--bezplatna .ox-v-cast__zaloha { display: grid; }

/* Závoj pod sadzbou — čitateľnosť riešime prekrytím, nikdy blend-mode ------ */
.ox-v-cast__zavoj {
	position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
	z-index: 4; pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, var(--sk-bg) 78%);
}

/* Výpis stavu scény vpravo hore -------------------------------------------- */
.ox-v-cast__hud,
.ox-v-cast__idx button,
.ox-v-cast__hint {
	font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; font-variant-numeric: tabular-nums;
	color: var(--sk-text-tlmeny);
}
.ox-v-cast__hud {
	position: absolute; top: 24px; right: var(--sk-pad); z-index: 5;
	display: grid; gap: 5px; text-align: right; pointer-events: none;
}
.ox-v-cast__hud b { color: var(--sk-akcent); font-weight: 700; }

/* Index fáz vpravo — v koncepte iba ukazovateľ, tu aj ovládanie ------------ */
.ox-v-cast__idx {
	position: absolute; right: var(--sk-pad); top: 50%; transform: translateY(-50%);
	z-index: 5; display: grid; gap: 16px;
}
.ox-v-cast__idx button {
	display: flex; align-items: center; justify-content: flex-end; gap: 10px;
	padding: 2px 0; border: 0; background: none; cursor: pointer; font-family: inherit;
	opacity: .45; transition: opacity .4s var(--sk-prechod), color .4s var(--sk-prechod);
}
.ox-v-cast__idx button::after {
	content: ''; width: 16px; height: 1px; background: currentColor;
	transition: width .4s var(--sk-prechod);
}
.ox-v-cast__idx button:hover { opacity: .85; }
.ox-v-cast__idx button[aria-current="true"] { opacity: 1; color: var(--sk-akcent); }
.ox-v-cast__idx button[aria-current="true"]::after { width: 40px; }
@media (max-width: 900px) { .ox-v-cast__idx { display: none; } }

/* Fázové texty vľavo dole — ležia cez seba a prelínajú sa podľa scrollu ---- */
.ox-v-cast__fazy {
	position: absolute; left: var(--sk-pad); bottom: clamp(46px, 8vh, 104px);
	z-index: 5; width: min(560px, 74vw);
}
.ox-v-cast__faza {
	position: absolute; left: 0; bottom: 0; width: 100%;
	opacity: 0; transform: translateY(24px); pointer-events: none;
	will-change: opacity, transform;
}
.ox-v-cast__faza .ox-oko { margin-bottom: 10px; }
.ox-v-cast__h {
	font-size: clamp(34px, 6.2vw, 88px);
	line-height: var(--sk-nadpis-lh);   /* Anton so slovenskou diakritikou */
	margin: 4px 0 14px;
}
.ox-v-cast__h em { font-style: normal; color: var(--sk-akcent); }
.ox-v-cast__faza p {
	margin: 0; max-width: 44ch; color: var(--sk-text-tlmeny);
	font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.62;
}
.ox-v-cast__akcie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ox-v-cast__akcie .ox-btn { min-height: 44px; padding-block: 11px; }

/* Pilulka so skutočným tovarom pod fázami 02 a 03 -------------------------- */
.ox-v-cast__tovar {
	display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
	margin-top: 18px; padding: 7px 16px 7px 7px;
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-pilulka);
	background: var(--sk-povrch); color: var(--sk-text);
	transition: border-color .25s var(--sk-prechod);
}
.ox-v-cast__tovar:hover { border-color: var(--sk-akcent); }
.ox-v-cast__tovar-foto {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
	/* produktové fotky majú biele pozadie — pod nimi musí ostať biela */
	background: var(--sk-biela); box-shadow: var(--sk-obrys);
}
.ox-v-cast__tovar-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.ox-v-cast__tovar-telo { display: grid; gap: 1px; min-width: 0; }
.ox-v-cast__tovar-telo b {
	font-size: 13.5px; font-weight: 700;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ox-v-cast__tovar-telo i { font-style: normal; font-size: 12.5px; color: var(--sk-akcent); font-weight: 700; }
.ox-v-cast__tovar svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--sk-akcent); }

/* Pomôcka „skroluj ďalej“ -------------------------------------------------- */
.ox-v-cast__hint {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	z-index: 5; display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.ox-v-cast__hint i {
	display: block; width: 1px; height: 26px; position: relative; overflow: hidden;
	background: var(--sk-linka);
}
.ox-v-cast__hint i::after {
	content: ''; position: absolute; inset: 0; background: var(--sk-akcent);
	animation: ox-v-cast-kvapka 1.9s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes ox-v-cast-kvapka { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@media (max-width: 760px) { .ox-v-cast__hint { display: none; } }

/* Kinetický pás pod hrdinom ------------------------------------------------ */
.ox-v-cast-pas {
	position: relative; z-index: 2; overflow: hidden;
	background: var(--sk-akcent); color: var(--sk-biela);
	padding-block: 16px; border-top: 1px solid var(--sk-akcent-tmavy);
}
.ox-v-cast-pas__stopa { display: flex; width: max-content; animation: ox-v-cast-posun 34s linear infinite; }
.ox-v-cast-pas:hover .ox-v-cast-pas__stopa { animation-play-state: paused; }
.ox-v-cast-pas__stopa b {
	font-family: var(--sk-font-nadpis); font-weight: 400;
	text-transform: var(--sk-nadpis-transform); letter-spacing: var(--sk-nadpis-spacing);
	font-size: clamp(18px, 2.5vw, 34px); line-height: var(--sk-nadpis-lh);
	padding-inline: 22px; white-space: nowrap;
}
.ox-v-cast-pas__stopa b span { color: var(--sk-ruz); }
@keyframes ox-v-cast-posun { to { transform: translateX(-50%); } }

/* Podpisová sekcia — „Štyri kroky. Žiadna veda.“ --------------------------- */
.ox-v-cast-postup__lead { max-width: 38ch; margin: 0; font-size: 15px; }
.ox-v-cast-kroky {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--sk-linka);
}
.ox-v-cast-krok {
	padding: 28px 24px 32px; border-right: 1px solid var(--sk-linka);
	transition: background .4s var(--sk-prechod);
}
.ox-v-cast-krok:last-child { border-right: 0; }
.ox-v-cast-krok:hover { background: var(--sk-bg-2); }
.ox-v-cast-krok__cislo {
	display: block; font-family: var(--sk-font-nadpis); color: var(--sk-akcent);
	font-size: clamp(40px, 4.4vw, 68px); line-height: var(--sk-nadpis-lh);
	letter-spacing: var(--sk-nadpis-spacing);
	opacity: .22; transition: opacity .4s var(--sk-prechod);
}
.ox-v-cast-krok:hover .ox-v-cast-krok__cislo { opacity: 1; }
.ox-v-cast-krok h3 { margin: 8px 0 8px; font-size: clamp(17px, 1.35vw, 21px); }
.ox-v-cast-krok p { margin: 0; font-size: 13.6px; line-height: 1.58; }
@media (max-width: 1000px) {
	.ox-v-cast-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ox-v-cast-krok:nth-child(2n) { border-right: 0; }
	.ox-v-cast-krok { border-bottom: 1px solid var(--sk-linka); }
}
@media (max-width: 560px) {
	.ox-v-cast-kroky { grid-template-columns: 1fr; }
	.ox-v-cast-krok { border-right: 0; }
}

/* Bez pohybu (OXO_POHYB === false) ----------------------------------------- */
/* Zámerne to nevisí na `prefers-reduced-motion`: jadro ho už zohľadnilo pri
   výpočte OXO_POHYB a ?motion=1 ho vie prebiť (firemné zostavy ho mávajú
   zapnuté natrvalo). Hrdina sa zmrští na jednu obrazovku a stojí na fáze 01. */
.ox-v-cast--bezpohybu { height: auto; }
.ox-v-cast--bezpohybu .ox-v-cast__scena { position: relative; top: auto; bottom: auto; }
.ox-v-cast--bezpohybu .ox-v-cast__hint { display: none; }
.ox-v-cast-pas--bezpohybu .ox-v-cast-pas__stopa { animation: none; }

/* Užšie okná — nič nesmie pretiecť do strany ani pri 390 px ---------------- */
@media (max-width: 760px) {
	.ox-v-cast { height: 205vh; height: 205svh; }
	.ox-v-cast__fazy { width: calc(100% - var(--sk-pad) * 2); bottom: clamp(34px, 6vh, 74px); }
	.ox-v-cast__zavoj { height: 64%; }
	.ox-v-cast__hud { top: 16px; font-size: 9px; letter-spacing: .12em; }
	.ox-v-cast__h { margin-bottom: 10px; }
}
@media (max-width: 430px) {
	/* Dve pilulky vedľa seba by sa na 390 px lámali do jednotlivých písmen. */
	.ox-v-cast__akcie .ox-btn { flex: 1 1 100%; }
	.ox-v-cast__h { font-size: clamp(30px, 9.6vw, 44px); }
	.ox-v-cast__faza p { font-size: 13.5px; }
	.ox-v-cast__tovar { width: 100%; }
}
/* Nízke notebooky: dráha sa počíta z výšky okna, takže tu stačí ubrať sadzbe. */
@media (min-width: 1100px) and (max-height: 860px) {
	.ox-v-cast__h { font-size: clamp(32px, 4.6vw, 62px); }
	.ox-v-cast__fazy { bottom: 40px; }
	.ox-v-cast__akcie { margin-top: 14px; }
}

/* =============================================================================
   10-story — hrdina „filmový príbeh“ (verne podľa konceptu 10-story.html)
   -----------------------------------------------------------------------------
   Bez JS (a v režime bez pohybu) sú kapitoly poskladané pod sebou — hrdina je
   vždy celý čitateľný. Trieda `--film`, ktorú dopĺňa JS, z nich spraví pripnutú
   scénu s krížovým prelínaním, presne ako v koncepte.

   Pozadie scény zámerne NIE JE nepriehľadné: koridor bobúľ kreslí efekt témy
   (assets/temy/efekty/10-story.js) — je to tá istá 3D scéna ako v koncepte,
   takže ju necháme presvitať a čitateľnosť sadzby držíme závojom vo farbe
   kapitoly (`--bgc` dopĺňa JS), rovnako ako `.story-ui::before` v koncepte.
   ========================================================================== */
.ox-v-pribeh { padding: 0; }
.ox-v-pribeh__draha { position: relative; }
.ox-v-pribeh__scena { position: relative; --bgc: 255, 255, 255; }

/* Pripnutie robí JS cez `position: fixed` — `sticky` v tomto jadre nedrží,
   lebo `body` má `overflow-x: hidden` a stáva sa scroll-kontajnerom. */
.ox-v-pribeh--film .ox-v-pribeh__draha { height: 420vh; height: 420svh; }
.ox-v-pribeh--film .ox-v-pribeh__scena {
	position: absolute; left: 0; right: 0; top: 0; z-index: 1;
	height: 100vh; height: calc(100svh - var(--vrch, 0px));
	overflow: hidden;
}
.ox-v-pribeh--film .ox-v-pribeh__scena--pripnuta { position: fixed; top: var(--vrch, 0px); }
.ox-v-pribeh--film .ox-v-pribeh__scena--dole { top: auto; bottom: 0; }

/* Filmový závoj — mäkký prechod vo farbe kapitoly, aby text vždy čitateľne
   sedel nad 3D scénou. Vpravo ostáva scéna nezakrytá. */
.ox-v-pribeh__zavoj { display: none; }
.ox-v-pribeh--film .ox-v-pribeh__zavoj {
	display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(96deg,
		rgba(var(--bgc), .94) 0%,
		rgba(var(--bgc), .82) 20%,
		rgba(var(--bgc), .34) 36%,
		rgba(var(--bgc), 0) 52%);
}

.ox-v-pribeh__kapitoly { position: relative; z-index: 1; }
.ox-v-pribeh--film .ox-v-pribeh__kapitoly { position: absolute; inset: 0; }

.ox-v-pribeh__kapitola {
	display: grid; align-items: center; gap: clamp(20px, 3vw, 44px);
	padding: clamp(36px, 6vw, 84px) var(--sk-pad);
	max-width: var(--sk-maxw); margin-inline: auto;
}
.ox-v-pribeh__kapitola + .ox-v-pribeh__kapitola { border-top: 1px solid var(--sk-linka); }
@media (min-width: 980px) {
	.ox-v-pribeh__kapitola { grid-template-columns: minmax(0, 1.06fr) minmax(0, .72fr); }
}
.ox-v-pribeh--film .ox-v-pribeh__kapitola {
	position: absolute; inset: 0; border-top: 0;
	align-content: center;
	padding: clamp(18px, 4vh, 56px) var(--sk-pad) clamp(78px, 12vh, 120px);
	opacity: 0; visibility: hidden; will-change: opacity;
}
@media (min-width: 980px) {
	/* vpravo ostáva pruh na indikátor kapitol — ako v koncepte */
	.ox-v-pribeh--film .ox-v-pribeh__kapitola {
		padding-right: calc(var(--sk-pad) + 190px); gap: clamp(24px, 4vw, 70px);
	}
}

.ox-v-pribeh__text { position: relative; z-index: 1; }
.ox-v-pribeh--film .ox-v-pribeh__text {
	max-width: 640px; transform: translate3d(0, var(--posun, 0px), 0);
}
/* biely závoj priamo pod sadzbou — cez hustý oblak bobúľ bola zle čitateľná */
.ox-v-pribeh--film .ox-v-pribeh__text::before {
	content: ''; position: absolute; inset: -38px -78px -38px -58px; z-index: -1; pointer-events: none;
	background: radial-gradient(70% 60% at 38% 50%,
		rgba(var(--bgc), .94) 0%, rgba(var(--bgc), .74) 55%, rgba(var(--bgc), 0) 82%);
}

.ox-v-pribeh__oko {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	color: var(--sk-akcent); margin-bottom: clamp(10px, 1.6vh, 20px);
}
.ox-v-pribeh__oko i { width: 8px; height: 8px; border-radius: var(--sk-r-pilulka); background: var(--sk-akcent); flex: 0 0 auto; }

.ox-v-pribeh__h { margin: 0; font-size: clamp(34px, 6.2vw, 92px); max-width: 13ch; }
.ox-v-pribeh__h em { font-style: normal; color: var(--sk-akcent); }
.ox-v-pribeh__p {
	margin: clamp(14px, 2.2vh, 26px) 0 0; max-width: 52ch;
	font-size: clamp(15px, 1.1vw, 19px); color: var(--sk-text-tlmeny);
}
.ox-v-pribeh__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(14px, 2.4vh, 26px); }
.ox-v-pribeh__meta span {
	font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
	padding: 6px 13px; border-radius: var(--sk-r-pilulka);
	background: var(--sk-povrch); box-shadow: var(--sk-obrys);
}
.ox-v-pribeh__akcie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }

/* Obrazová vrstva — paralax dvojnásobný oproti textu, vsuvka ešte silnejší. */
.ox-v-pribeh__obraz { position: relative; min-height: clamp(200px, 40vh, 460px); }
.ox-v-pribeh--film .ox-v-pribeh__obraz { transform: translate3d(0, calc(var(--posun, 0px) * 2), 0); }
.ox-v-pribeh__karta {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: min(100%, 380px); display: block; color: inherit; text-decoration: none;
	background: var(--sk-biela); border-radius: var(--sk-r-obrazok);
	padding: 10px 10px 12px; box-shadow: var(--sk-tien), var(--sk-obrys);
	transition: transform .45s var(--sk-prechod), box-shadow .45s var(--sk-prechod);
}
.ox-v-pribeh__karta:hover { transform: translateY(-50%) scale(1.025); box-shadow: var(--sk-tien), 0 0 0 1px var(--sk-akcent); }
/* Produktové fotky majú vlastné biele pozadie → dlaždica musí ostať biela. */
.ox-v-pribeh__foto {
	display: block; overflow: hidden; aspect-ratio: 4 / 3;
	background: var(--sk-biela); border-radius: var(--sk-r-maly);
}
.ox-v-pribeh__foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.ox-v-pribeh__stitok { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 6px 0; }
.ox-v-pribeh__stitok b {
	font-family: var(--sk-font-nadpis); font-size: 15px;
	line-height: var(--sk-nadpis-lh); text-transform: var(--sk-nadpis-transform);
}
.ox-v-pribeh__stitok i { font-style: normal; font-family: var(--sk-font-display); font-size: 16px; color: var(--sk-akcent); text-align: right; }
/* Vsuvka je „prišpendlená“ nad hlavnú fotku — hore vľavo, aby neprekryla názov
   a cenu v spodnej lište karty. Mierne pootočenie je z konceptu. */
.ox-v-pribeh__vsuvka {
	position: absolute; left: 0; top: 4%; width: min(44%, 176px);
	border-radius: var(--sk-r-maly); box-shadow: var(--sk-tien-karta);
	transform: rotate(-3deg);
}
.ox-v-pribeh--film .ox-v-pribeh__vsuvka { transform: translate3d(0, calc(var(--posun, 0px) * .6), 0) rotate(-3deg); }

/* Indikátor kapitol — vpravo v strede (na mobile pilulka dole). */
.ox-v-pribeh__kapnav { display: none; }
.ox-v-pribeh--film .ox-v-pribeh__kapnav {
	display: grid; gap: 14px; position: absolute; z-index: 3;
	right: var(--sk-pad); top: 50%; transform: translateY(-50%);
	padding: 15px 17px; border-radius: var(--sk-r-stredny);
	background: rgba(var(--bgc), .58); box-shadow: var(--sk-obrys);
	backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.ox-v-pribeh__kn {
	display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
	padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
	color: var(--sk-text); opacity: .42; transition: opacity .35s var(--sk-prechod);
}
.ox-v-pribeh__kn:hover { opacity: .78; }
.ox-v-pribeh__kn--na { opacity: 1; }
.ox-v-pribeh__kn--na .ox-v-pribeh__kn-cislo,
.ox-v-pribeh__kn--na .ox-v-pribeh__kn-stitok { color: var(--sk-akcent); }
.ox-v-pribeh__kn-cislo { font-family: var(--sk-font-nadpis); font-size: 13px; line-height: var(--sk-nadpis-lh); letter-spacing: .06em; }
.ox-v-pribeh__kn-stitok { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.ox-v-pribeh__kn-pas { grid-column: 1 / -1; width: 96px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--sk-linka); }
.ox-v-pribeh__kn-pas i { display: block; height: 100%; background: var(--sk-akcent); transform: scaleX(var(--f, 0)); transform-origin: left; transition: transform .12s linear; }

/* Nápoveda na skrolovanie — v koncepte vľavo dole, na mobile mizne. */
.ox-v-pribeh__skrol { display: none; }
.ox-v-pribeh--film .ox-v-pribeh__skrol {
	display: flex; align-items: center; gap: 12px; margin: 0;
	position: absolute; z-index: 3; left: var(--sk-pad); bottom: clamp(18px, 4vh, 40px);
	font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sk-text-tlmeny); transition: opacity .4s var(--sk-prechod);
}
.ox-v-pribeh__kolaj { position: relative; overflow: hidden; flex: 0 0 auto; width: 1px; height: 44px; background: var(--sk-linka); }
.ox-v-pribeh__kolaj::after {
	content: ''; position: absolute; left: 0; top: -60%; width: 100%; height: 60%;
	background: var(--sk-akcent); animation: ox-v-pribeh-kolaj 1.9s var(--sk-prechod) infinite;
}
@keyframes ox-v-pribeh-kolaj { 0% { top: -60%; } 70%, 100% { top: 100%; } }

/* Červený bežiaci pás pod hrdinom ------------------------------------------ */
.ox-v-pribeh-pas { position: relative; z-index: 2; overflow: hidden; padding: 14px 0; background: var(--sk-akcent); color: var(--sk-biela); }
.ox-v-pribeh-pas__stopa { display: flex; width: max-content; animation: ox-v-pribeh-posun 26s linear infinite; }
.ox-v-pribeh-pas__stopa span {
	display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 28px);
	font-family: var(--sk-font-nadpis); text-transform: uppercase; letter-spacing: .02em;
	font-size: clamp(18px, 2.1vw, 30px); line-height: var(--sk-nadpis-lh);
	padding-inline: clamp(14px, 2vw, 28px); white-space: nowrap;
}
.ox-v-pribeh-pas__stopa i { font-style: normal; color: var(--sk-ruz); }
@keyframes ox-v-pribeh-posun { to { transform: translateX(-50%); } }
/* Zastavenie riadi JS podľa OXO_POHYB, nie médiá-otázka — prepínač „◐“ v lište
   musí vedieť pohyb aj vynútiť na počítači so systémovým obmedzením animácií. */
.ox-v-pribeh-pas--stoji .ox-v-pribeh-pas__stopa,
.ox-v-pribeh:not(.ox-v-pribeh--film) .ox-v-pribeh__kolaj::after { animation: none; }

/* Užšie okná ---------------------------------------------------------------- */
@media (max-width: 979px) {
	/* Na mobile je scéna nad textom → závoj musí kryť zhora nadol, stred ostáva
	   priehľadný, nech je koridor vidieť. */
	.ox-v-pribeh--film .ox-v-pribeh__zavoj {
		background: linear-gradient(180deg,
			rgba(var(--bgc), .42) 0%, rgba(var(--bgc), .06) 28%,
			rgba(var(--bgc), .5) 44%, rgba(var(--bgc), .93) 56%, rgba(var(--bgc), .97) 100%);
	}
	.ox-v-pribeh--film .ox-v-pribeh__draha { height: 340vh; height: 340svh; }
	.ox-v-pribeh--film .ox-v-pribeh__kapitola { grid-template-columns: 1fr; gap: 14px; padding: clamp(14px, 3vh, 28px) var(--sk-pad) 92px; }
	.ox-v-pribeh--film .ox-v-pribeh__obraz { order: -1; min-height: clamp(140px, 22vh, 230px); }
	.ox-v-pribeh--film .ox-v-pribeh__text::before { inset: -22px -28px; }
	/* Odsek by na výšku mobilu vytlačil tlačidlá zo záberu. */
	.ox-v-pribeh--film .ox-v-pribeh__p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
	.ox-v-pribeh__karta { width: min(64%, 250px); }
	.ox-v-pribeh__vsuvka { width: min(38%, 132px); }
	.ox-v-pribeh__h { font-size: clamp(30px, 7.6vw, 44px); }
	.ox-v-pribeh__p { font-size: 15px; }
	.ox-v-pribeh--film .ox-v-pribeh__kapnav {
		right: auto; left: 50%; top: auto; bottom: calc(12px + env(safe-area-inset-bottom));
		transform: translateX(-50%); grid-auto-flow: column; gap: 10px;
		padding: 9px 12px; border-radius: var(--sk-r-pilulka);
	}
	.ox-v-pribeh__kn { grid-template-columns: auto; gap: 4px; justify-items: center; }
	.ox-v-pribeh__kn-stitok { font-size: 11px; }
	.ox-v-pribeh__kn-pas { width: 38px; }
	.ox-v-pribeh--film .ox-v-pribeh__skrol { display: none; }
}
/* Nízky mobil: štítky kapitoly sú prvé, čo môže ísť preč — tlačidlá nesmú
   vypadnúť zo záberu. */
@media (max-width: 979px) and (max-height: 700px) {
	.ox-v-pribeh--film .ox-v-pribeh__meta { display: none; }
	.ox-v-pribeh--film .ox-v-pribeh__p { -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
}
@media (max-width: 430px) {
	/* Dve pilulky vedľa seba by sa na 390 px lámali do jednotlivých písmen. */
	.ox-v-pribeh__akcie .ox-btn { flex: 1 1 100%; }
	.ox-v-pribeh__stitok { flex-wrap: wrap; gap: 2px 10px; }
	.ox-v-pribeh__meta span { font-size: 11.5px; padding: 5px 10px; }
}
/* Nízky notebook: dráha aj sadzba sa musia zmestiť do plochej obrazovky. */
@media (min-width: 980px) and (max-height: 820px) {
	.ox-v-pribeh__h { font-size: clamp(32px, 4.6vw, 62px); }
	.ox-v-pribeh--film .ox-v-pribeh__obraz { min-height: clamp(180px, 34vh, 320px); }
}

/* =============================================================================
   SPOLOČNÝ ZÁKLAD NÁVRHOV 12–16 — „video hrdina + vitrína čistoty“
   -----------------------------------------------------------------------------
   Päť návrhov (12 Splash … 16 Luxe) zdieľa rovnakú kostru domovskej stránky:
     1. `.ox-vh`   — červený video-hrdina. Skutočné video (3 padajúce poháre so
                     šplechnutím) dorobíme neskôr; dovtedy beží CSS podanie tej
                     istej scény v `.ox-vh__scena`. Až video príde, vloží sa do
                     `.ox-vh__video` (slot [data-ox-video-slot]) a scéna sa skryje.
     2. `.ox-svit` — carousel „prečo OXO“ (bez azofarbív…); klik otvára popup
                     `.ox-vpopup` s marketingovým popisom.
     3. Zvyšok domovskej stránky je spoločný pre všetky návrhy (pohlady.js).
   Rozdiely medzi návrhmi (časovanie pádu, tvar šplechu, tvar kariet) dodáva
   modifikátor `.ox-vh--<slug>` v CSS súbore témy — tu je len spoločná kostra.
   ========================================================================== */

/* --- video hrdina ---------------------------------------------------------- */
.ox-vh {
	position: relative; overflow: hidden;
	background: var(--sk-vh-bg, var(--sk-akcent)); color: #fff;
	min-height: clamp(460px, 66vh, 720px);
	display: grid; align-items: stretch;
}
.ox-vh__video { position: absolute; inset: 0; z-index: 0; }
.ox-vh__video video { width: 100%; height: 100%; object-fit: cover; }
.ox-vh__wrap {
	position: relative; z-index: 2; width: 100%;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(18px, 3vw, 44px); align-items: center;
	padding-block: clamp(26px, 4vw, 56px);
}
.ox-vh__obsah { position: relative; z-index: 2; }
.ox-vh .ox-vh__obsah .ox-oko { color: rgba(255, 255, 255, .85); }
.ox-vh .ox-vh__obsah .ox-h1 { color: #fff; }
.ox-vh .ox-vh__obsah .ox-lead { color: rgba(255, 255, 255, .88); max-width: 34em; }
.ox-vh .ox-vh__obsah .ox-chip { background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
/* tlačidlá na červenej: hlavné = biele, obrysové = biely rám */
.ox-vh .ox-vh__obsah .ox-btn--hlavne { background: #fff; color: var(--sk-akcent); }
.ox-vh .ox-vh__obsah .ox-btn--obrys { border-color: rgba(255, 255, 255, .65); color: #fff; }

/* poznámka, že tu príde video (placeholder) */
.ox-vh__poznamka {
	position: absolute; top: 14px; right: 14px; z-index: 4;
	font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(255, 255, 255, .82); background: rgba(27, 27, 27, .30);
	border: 1px dashed rgba(255, 255, 255, .45); border-radius: 999px;
	padding: 6px 12px; pointer-events: none;
}

/* scéna s padajúcimi pohármi */
.ox-vh__scena {
	position: relative; z-index: 1;
	height: clamp(300px, 46vh, 520px);
	pointer-events: none;
}
.ox-vh__pohar {
	position: absolute; bottom: 26px;
	width: clamp(86px, 11vw, 148px);
	filter: drop-shadow(0 22px 24px rgba(27, 27, 27, .30));
	animation: ox-vh-pad var(--vh-trvanie, 5.8s) cubic-bezier(.5, 0, .65, 1) infinite;
	animation-delay: var(--vh-onesk, 0s);
	will-change: transform, opacity;
}
.ox-vh__pohar--1 { left: 6%;  --vh-onesk: 0s;    --vh-rot: -8deg; }
.ox-vh__pohar--2 { left: 38%; --vh-onesk: .55s;  --vh-rot: 5deg; }
.ox-vh__pohar--3 { left: 70%; --vh-onesk: 1.15s; --vh-rot: -4deg; }
.ox-vh__pohar svg { display: block; width: 100%; height: auto; }
@keyframes ox-vh-pad {
	0%   { opacity: 1; transform: translateY(-78vh) rotate(var(--vh-rot, -6deg)); }
	11%  { transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2, 1.6, .4, 1); }
	16%  { transform: translateY(-4.5%) rotate(0deg); animation-timing-function: cubic-bezier(.6, 0, .8, 1); }
	20%  { transform: translateY(0) rotate(0deg); }
	86%  { opacity: 1; transform: translateY(0); }
	93%  { opacity: 0; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-78vh) rotate(var(--vh-rot, -6deg)); }
}

/* šplech pod pohárom — prstenec + kvapky; tvar si návrhy prefarbujú */
.ox-vh__splash { position: absolute; left: 50%; bottom: -14px; width: 150%; height: 64px;
	transform: translateX(-50%); pointer-events: none; }
.ox-vh__splash b {
	position: absolute; left: 50%; bottom: 8px; width: 100%; height: 34px;
	transform: translate(-50%, 0) scale(.2); border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, .85); opacity: 0;
	animation: ox-vh-splash-kruh var(--vh-trvanie, 5.8s) ease-out infinite;
	animation-delay: var(--vh-onesk, 0s);
}
.ox-vh__splash i {
	position: absolute; left: 50%; bottom: 12px; width: 10px; height: 10px;
	border-radius: 50%; background: rgba(255, 255, 255, .9); opacity: 0;
	animation: ox-vh-splash-kvapka var(--vh-trvanie, 5.8s) ease-out infinite;
	animation-delay: var(--vh-onesk, 0s);
	--kx: 0px; --ky: -34px;
}
.ox-vh__splash i:nth-child(1) { --kx: -52px; --ky: -40px; }
.ox-vh__splash i:nth-child(2) { --kx: -24px; --ky: -58px; width: 8px; height: 8px; }
.ox-vh__splash i:nth-child(3) { --kx: 8px;   --ky: -64px; }
.ox-vh__splash i:nth-child(4) { --kx: 34px;  --ky: -52px; width: 7px; height: 7px; }
.ox-vh__splash i:nth-child(5) { --kx: 56px;  --ky: -36px; }
@keyframes ox-vh-splash-kruh {
	0%, 10.5% { opacity: 0; transform: translate(-50%, 0) scale(.18); }
	13%       { opacity: .95; }
	30%       { opacity: 0; transform: translate(-50%, 0) scale(1.06); }
	100%      { opacity: 0; transform: translate(-50%, 0) scale(1.06); }
}
@keyframes ox-vh-splash-kvapka {
	0%, 10.5% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
	12.5%     { opacity: 1; }
	26%       { opacity: 0; transform: translate(calc(-50% + var(--kx)), var(--ky)) scale(1); }
	100%      { opacity: 0; transform: translate(calc(-50% + var(--kx)), var(--ky)) scale(1); }
}
/* tieň („podlaha“) pod pohárom */
.ox-vh__tien {
	position: absolute; left: 50%; bottom: -6px; width: 120%; height: 18px;
	transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(27, 27, 27, .34) 0%, rgba(27, 27, 27, 0) 78%);
}

/* bez pohybu (OXO_POHYB=false): statická snímka — poháre stoja na podlahe
   a šplech je zamrznutý v polovici */
.ox-vh--stoji .ox-vh__pohar { animation: none; transform: none; opacity: 1; }
.ox-vh--stoji .ox-vh__splash b { animation: none; opacity: .5; transform: translate(-50%, 0) scale(.85); }
.ox-vh--stoji .ox-vh__splash i { animation: none; opacity: 0; }

@media (max-width: 900px) {
	.ox-vh__wrap { grid-template-columns: 1fr; padding-block: 22px 30px; }
	.ox-vh__scena { height: clamp(210px, 34vh, 320px); order: 1; }
	.ox-vh { min-height: 0; }
	.ox-vh__pohar { width: clamp(64px, 17vw, 96px); bottom: 14px; }
	.ox-vh__poznamka { top: 8px; right: 8px; font-size: 9px; }
}

/* --- kampaňový vizuál: tri poháre z aktuálnej kampane ----------------------- */
/* Nahrádza kreslenú scénu (.ox-vh__scena). Obrázok má červené pozadie kampane
   (zosvetlené k firemnej červenej), okraje sa maskou rozpúšťajú do hrdinu,
   takže sedí v každej téme bez orezávania pohárov. */
.ox-vh__vizual {
	position: relative; z-index: 1;
	height: clamp(340px, 52vh, 580px);
	display: grid; place-items: center;
	--vh-px: 0; --vh-py: 0;                 /* paralaxa z kurzora (-1 … 1), dáva JS */
}
.ox-vh__kampan {
	position: relative; margin: 0;
	height: 100%; aspect-ratio: 1028 / 1145; max-width: 100%;
	transform: translate(calc(var(--vh-px) * 10px), calc(var(--vh-py) * 8px));
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
/* maska je na obrázku, nie na figure — nálepky ostávajú ostré až po okraj */
.ox-vh__pohare {
	display: block; width: 100%; height: 100%; object-fit: contain;
	animation: ox-vh-levituj 6.5s ease-in-out infinite;
	will-change: transform;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 86%, transparent 100%),
	                    linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 86%, transparent 100%),
	                    linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Three.js pozadie hrdinu (bobule v hĺbke) — pod obsahom, nad podkladom témy */
.ox-vh__pozadie { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--sk-vh-pozadie, .9); }
.ox-vh__pozadie canvas { display: block; width: 100% !important; height: 100% !important; }
@keyframes ox-vh-levituj {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
/* živé nálepky nad bielymi kruhmi kampane (poloha = podľa rastra) */
.ox-vh__nalepka {
	position: absolute; width: 21.5%; aspect-ratio: 1; border-radius: 50%;
	background: #fff; color: var(--sk-akcent);
	display: grid; place-content: center; text-align: center; gap: 1px;
	font-family: var(--sk-font-display); text-transform: uppercase; line-height: 1.02;
	box-shadow: 0 10px 26px -10px rgba(90, 0, 0, .55), inset 0 -3px 0 rgba(255, 0, 29, .10);
	animation: ox-vh-nalepka 5.2s ease-in-out infinite;
	transform: translate(calc(var(--vh-px) * -14px), calc(var(--vh-py) * -12px)) rotate(var(--n-rot, -8deg));
}
.ox-vh__nalepka i { font-style: normal; font-size: clamp(14px, 1.5vw, 22px); line-height: 1; display: block; }
.ox-vh__nalepka b { font-size: clamp(10px, 1.05vw, 15px); letter-spacing: .02em; display: block; }
.ox-vh__nalepka small { font-family: var(--sk-font-text); font-weight: 800; font-size: clamp(6.5px, .62vw, 9px); letter-spacing: .06em; display: block; color: var(--sk-atrament); opacity: .8; }
.ox-vh__nalepka--hore { left: 76.5%; top: -2.2%; --n-rot: -8deg; }
.ox-vh__nalepka--dole { left: 76.5%; top: 81.3%; --n-rot: 6deg; animation-delay: -2.4s; }
.ox-vh__nalepka--dole b { font-size: clamp(11px, 1.25vw, 18px); }
@keyframes ox-vh-nalepka {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -6px; }
}
/* chipy s tvrdeniami kampane */
.ox-chip--kampan { display: inline-flex; align-items: center; gap: 7px; }
.ox-chip--kampan i { font-style: normal; font-size: 1.05em; line-height: 1; opacity: .9; }

/* bez pohybu */
.ox-vh--stoji .ox-vh__pohare, .ox-vh--stoji .ox-vh__nalepka { animation: none; }

@media (max-width: 900px) {
	/* mobil: vizuál kampane ide PRED text (hrdina „produkt-first“), text pod ním */
	.ox-vh__vizual { height: clamp(230px, 40vh, 330px); order: -1; margin: -4px 0 48px; } /* spodná nálepka presahuje figure o ~1/5 svojej výšky */
	.ox-vh--kampan .ox-vh__wrap { padding-block: 10px 28px; }
	.ox-vh__nalepka b { font-size: 9px; }
	.ox-vh__nalepka--dole b { font-size: 11px; }
	.ox-vh__nalepka small { font-size: 6px; }
	.ox-hero__odznaky--kampan { gap: 8px; }
}

/* --- vitrína čistoty (carousel „prečo OXO“) -------------------------------- */
.ox-svit__pas {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: clamp(210px, 24vw, 290px);
	gap: clamp(12px, 1.6vw, 20px);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 6px 4px 18px;
	scrollbar-width: none; -ms-overflow-style: none;
	cursor: grab;
}
.ox-svit__pas::-webkit-scrollbar { display: none; }
.ox-svit__pas--tahame { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.ox-svit__pas--tahame .ox-svit__karta { pointer-events: none; }
.ox-svit__karta {
	scroll-snap-align: start;
	display: flex; flex-direction: column; text-align: left;
	border: 0; padding: 0; margin: 0; font: inherit; color: var(--sk-text);
	background: var(--sk-povrch); border-radius: var(--sk-r-stredny);
	box-shadow: var(--sk-tien-karta); overflow: hidden; cursor: pointer;
	transition: transform .45s var(--sk-prechod), box-shadow .45s var(--sk-prechod);
}
.ox-svit__karta:hover { transform: translateY(-6px); }
.ox-svit__karta:focus-visible { outline: 3px solid var(--sk-akcent); outline-offset: 3px; }
/* fotky majú biele pozadie → dlaždica MUSÍ byť biela, contain (pravidlo značky) */
.ox-svit__foto { aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; }
.ox-svit__foto img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.ox-svit__telo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ox-svit__nazov {
	font-family: var(--sk-font-nadpis); font-size: clamp(17px, 1.6vw, 21px);
	line-height: var(--sk-nadpis-lh); text-transform: var(--sk-nadpis-transform);
	letter-spacing: var(--sk-nadpis-spacing);
}
.ox-svit__text { font-size: 13.5px; color: var(--sk-text-tlmeny); margin: 0; }
.ox-svit__viac { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--sk-akcent);
	letter-spacing: .08em; text-transform: uppercase; }
.ox-svit__listy { display: flex; gap: 8px; }
.ox-svit__arw {
	width: 42px; height: 42px; border-radius: var(--sk-btn-r);
	border: 2px solid var(--sk-linka); background: var(--sk-povrch); color: var(--sk-text);
	display: grid; place-items: center; cursor: pointer;
	transition: background .25s var(--sk-prechod), color .25s var(--sk-prechod),
	            border-color .25s var(--sk-prechod), transform .25s var(--sk-prechod);
}
.ox-svit__arw:hover { background: var(--sk-akcent); border-color: var(--sk-akcent); color: #fff; transform: translateY(-2px); }
.ox-svit__arw svg { width: 15px; height: 15px; }
.ox-svit__arw:disabled { opacity: .35; pointer-events: none; }

/* --- popup s marketingovým popisom ----------------------------------------- */
.ox-vpopup .ox-modal__okno { max-width: 640px; padding: 0; overflow: hidden; }
.ox-vpopup__hlava { position: relative; background: #fff; }
.ox-vpopup__hlava img { width: 100%; height: clamp(180px, 30vh, 260px); object-fit: contain; padding: 18px; display: block; }
.ox-vpopup__zatvor {
	position: absolute; top: 12px; right: 12px;
	width: 40px; height: 40px; border-radius: 50%;
	border: 0; cursor: pointer; font-size: 17px; line-height: 1;
	background: var(--sk-atrament); color: #fff;
	display: grid; place-items: center;
	transition: transform .25s var(--sk-prechod), background .25s var(--sk-prechod);
}
.ox-vpopup__zatvor:hover { background: var(--sk-akcent); transform: rotate(90deg); }
.ox-vpopup__telo { padding: clamp(20px, 3vw, 30px); }
.ox-vpopup__telo .ox-oko { color: var(--sk-akcent); }
.ox-vpopup__nadpis {
	font-family: var(--sk-font-nadpis); font-size: clamp(22px, 2.6vw, 30px);
	line-height: var(--sk-nadpis-lh); text-transform: var(--sk-nadpis-transform);
	letter-spacing: var(--sk-nadpis-spacing); margin: 4px 0 10px;
}
.ox-vpopup__text { color: var(--sk-text); line-height: 1.65; margin: 0 0 18px; }
.ox-vpopup__akcie { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
	.ox-vpopup .ox-modal__okno { max-width: 100%; }
	.ox-vpopup__hlava img { height: 150px; }
}

/* --- 3D vitrína claimov (showcase carousel návrhov 12–16) ------------------ */
/* Otočný kruh kariet ako v návrhu 09 Showcase; karty preberajú vzhľad
   .ox-svit__karta, takže témy ich ďalej štýlujú bez zmeny. */
.ox-svit3d { position: relative; overflow: hidden; }
.ox-svit3d__scena {
	height: clamp(380px, 50vh, 480px);
	perspective: 1500px;
	display: grid; place-items: center;
	touch-action: pan-y;               /* zvislý scroll stránky ostáva prstom voľný */
	cursor: grab;
	user-select: none; -webkit-user-select: none;
}
.ox-svit3d__scena--tahame { cursor: grabbing; }
.ox-svit3d__scena--tahame .ox-svit3d__karta { pointer-events: none; }
.ox-svit3d__koleso {
	position: relative;
	width: min(var(--svit3d-w, 250px), 64vw);
	height: 86%;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--polomer, 340px) * -1));
}
.ox-svit3d__karta { opacity: .42; }
.ox-svit3d__karta--celo { opacity: 1; }
/* Poloha karty v kruhu je nedotknuteľná — prebíja aj hover posuny z tém
   (inak by hover „vytrhol“ kartu z kolesa). Dôraz prednej karty nechávame
   na opacity a tieňoch tém, nie na transformáciách. */
.ox-svit3d .ox-svit3d__karta.ox-svit3d__karta,
.ox-svit3d .ox-svit3d__karta.ox-svit3d__karta:hover {
	position: absolute; inset: 0; width: 100%; margin: 0;
	transform: rotateY(var(--u)) translateZ(var(--polomer, 340px));
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ox-svit3d__karta .ox-svit__foto { flex: 0 0 auto; }
.ox-svit3d__karta .ox-svit__telo { overflow: hidden; }
.ox-svit3d__bodky { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.ox-svit3d__bodka {
	width: 11px; height: 11px; border-radius: 50%; padding: 0;
	border: 2px solid var(--sk-akcent); background: transparent; cursor: pointer;
	transition: background .25s var(--sk-prechod), transform .25s var(--sk-prechod);
}
.ox-svit3d__bodka:hover { transform: scale(1.2); }
.ox-svit3d__bodka[aria-selected="true"] { background: var(--sk-akcent); transform: scale(1.15); }
@media (max-width: 900px) {
	.ox-svit3d__scena { height: clamp(330px, 46vh, 400px); }
	.ox-svit3d__koleso { width: min(230px, 62vw); }
}

/* =============================================================================
   SPOLOČNÝ ZÁKLAD NÁVRHOV 17–20 — „MOTION + SHOWCASE + RETRO“
   -----------------------------------------------------------------------------
   Štyri návrhy postavené z tých istých troch dielov:
     • 06 MOTION   → typografické stavy (písmená vychádzajú z masky), plátno
                     s bobuľami, dlhé dobehy, bežiaci pás,
     • 09 SHOWCASE → otočný kruh skutočných produktov + editoriálny panel
                     s veľkou cenou, ovládanie so šípkami, bodkami a pomôckou,
     • 15 RETRO    → materiál: plné farebné podložky namiesto rozmazania,
                     vstupenky s perforáciou, pruhy, smaltované odznaky.

   Kostra (rozloženie) je TU a je pre všetky štyri rovnaká; návrh mení iba
   usporiadanie polí (`.ox-msr--<slug>` nižšie) a materiál (v súbore témy).

   Prečo to ladí: hrdina má JEDEN index a jeden časovač — kruh, sadzba aj panel
   sa hýbu spolu. Ovládanie je jedno (šípky, bodky, ťah, koliesko) a platí
   naraz na produkt aj na text.
   ========================================================================== */
.ox-msr {
	padding: 0;
	position: relative;
	min-height: min(88vh, 860px);
	display: grid;
	/* vlastné NEPRIEHĽADNÉ pozadie — pod stránkou beží efekt témy s podobnou
	   scénou a dve vrstvy rovnakých bodiek by sa bili */
	background: var(--sk-msr-bg, radial-gradient(72% 58% at 50% 34%, var(--sk-krem) 0%, var(--sk-bg) 66%));
}
.ox-msr__platno { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
/* závoj medzi rastrom a sadzbou — bez neho je typografia „zašumená“ */
.ox-msr__zavoj {
	position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block;
	opacity: var(--sk-msr-zavoj, .9);
	background:
		radial-gradient(46% 40% at 30% 44%, var(--sk-bg) 0%, var(--sk-bg) 30%, transparent 78%),
		radial-gradient(66% 60% at 50% 46%, var(--sk-bg-2) 0%, transparent 74%);
}
/* pruhovaná hrana markízy dole — každá téma jej dá vlastný vzor */
.ox-msr__pruh {
	position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 4;
	pointer-events: none;
}

/* --- rozloženie hrdinu ------------------------------------------------------ */
.ox-msr__mriezka {
	position: relative; z-index: 3;
	width: 100%; max-width: var(--sk-maxw); margin-inline: auto;
	/* Rytmus je zamerne viazany na VYSKU okna (vh), nie na sirku: hrdina rodiny
	   sa musi zmestit nad ohyb aj na 1440x1000 aj na nizkych notebookoch. */
	padding: clamp(22px, 3.4vh, 52px) var(--sk-pad) clamp(14px, 2.2vh, 28px);
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	grid-template-areas:
		"javisko vitrina"
		"panel   vitrina"
		"lista   lista";
	grid-template-rows: auto auto auto;
	gap: clamp(12px, 1.6vh, 22px) clamp(18px, 3vw, 48px);
	align-items: center; align-content: center;
}
.ox-msr__javisko { grid-area: javisko; min-width: 0; }
.ox-msr__vitrina { grid-area: vitrina; min-width: 0; align-self: stretch; display: grid; align-items: center; }
.ox-msr__panel   { grid-area: panel;   min-width: 0; align-self: start; }
.ox-msr__lista   { grid-area: lista;   min-width: 0; }

/* --- typografické stavy (podpis návrhu 06) ---------------------------------- */
.ox-msr__javisko {
	position: relative;
	display: grid; grid-template-areas: "stav"; align-items: center;
}
/* Vlastný závoj pod sadzbou. Spoločný závoj hrdinu leží v strede plochy, ale
   sadzba býva podľa návrhu vľavo aj vpravo — bez tohto sa stane, že sýta bobuľa
   z plátna skončí presne pod odsekom a text sa na nej stratí (overené na 390 px). */
.ox-msr__javisko::before {
	content: ''; position: absolute; inset: -7% -9%; z-index: -1; pointer-events: none;
	opacity: var(--msr-javisko-zavoj, .8);
	background: radial-gradient(ellipse at 34% 46%,
		var(--sk-bg) 0%, var(--sk-bg) 46%, transparent 78%);
}
.ox-msr__stav {
	grid-area: stav;                      /* všetky stavy v jednej bunke → nič neposkakuje */
	min-width: 0; display: flex; flex-direction: column; gap: 12px;
	align-items: var(--msr-zarovnanie, flex-start);
	text-align: var(--msr-text, left);
	visibility: hidden; opacity: 0;
}
.ox-msr__stav--aktivny, .ox-msr__stav--odchod { visibility: visible; opacity: 1; }
/* 17. 9. 2026 (Peter: „pri preklikávaní sa texty prekrývajú“): odchádzajúci stav drží
   viditeľnosť LEN kvôli odchodovej animácii. Keď animácie nebežia (systémové „obmedziť
   animácie“ alebo vypnutý pohyb), musí zmiznúť hneď — inak sa dva stavy prekryjú. */
.ox-msr:not(.ox-msr--pohyb) .ox-msr__stav--odchod { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-msr__stav--odchod:not(.ox-msr__stav--aktivny) { visibility: hidden; opacity: 0; } }
.ox-msr__stav .ox-oko { margin-bottom: 0; }
.ox-msr__h1, .ox-msr__h2 { margin: 0; max-width: 100%; }
.ox-msr__h1 { font-size: clamp(31px, 4.6vw, 70px); }
.ox-msr__h2 { font-size: clamp(27px, 3.8vw, 58px); }
.ox-msr__lead {
	margin: 0; max-width: 44ch; color: var(--sk-text-tlmeny);
	font-size: clamp(14.5px, 1.05vw, 17px); line-height: 1.6;
	text-wrap: pretty;                    /* posledne dva riadky sa vyvazia — ziadna sirota */
}
.ox-msr__akcie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; justify-content: var(--msr-zarovnanie, flex-start); }
.ox-msr__pilulka {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
	color: var(--sk-text); background: var(--sk-povrch);
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-pilulka); padding: 8px 16px;
}
.ox-msr__pilulka i { width: 7px; height: 7px; border-radius: 50%; background: var(--sk-akcent); flex: 0 0 auto; }
.ox-msr--pohyb .ox-msr__pilulka i { animation: ox-msr-tep 1.9s var(--sk-prechod) infinite; }
@keyframes ox-msr-tep { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: .45; } }

/* Maska je na SLOVE a má zámerne veľký zvislý padding s rovnakým záporným
   marginom: Anton inak nechá mäkčene a dĺžne orezané o hranu masky. */
.ox-msr__slovo {
	display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap;
	padding: .2em .04em .12em; margin: -.2em -.04em -.12em;
}
.ox-msr__znak { display: inline-block; }
.ox-msr--pohyb .ox-msr__stav--aktivny .ox-msr__znak {
	animation: ox-msr-vjazd .95s var(--sk-prechod) both;
	animation-delay: calc(var(--i, 0) * .026s);
}
.ox-msr--pohyb .ox-msr__stav--odchod .ox-msr__znak {
	animation: ox-msr-odchod .3s cubic-bezier(.55, 0, .9, .35) both;
	animation-delay: calc(var(--o, 0) * .006s);   /* odchod ide od konca nadpisu */
}
.ox-msr--pohyb .ox-msr__stav--aktivny .ox-msr__cast {
	animation: ox-msr-nabeh .75s var(--sk-prechod) both; animation-delay: var(--d, 0s);
}
.ox-msr--pohyb .ox-msr__stav--odchod .ox-msr__cast { animation: ox-msr-zhasni .24s ease-in both; }
@keyframes ox-msr-vjazd { from { transform: translateY(118%); } to { transform: none; } }
@keyframes ox-msr-odchod { from { transform: none; } to { transform: translateY(-120%); } }
@keyframes ox-msr-nabeh { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ox-msr-zhasni { to { opacity: 0; transform: translateY(-24px); } }

/* --- kruh skutočných produktov (podpis návrhu 09) --------------------------- */
.ox-msr__scena {
	position: relative;
	height: var(--msr-scena-v, clamp(330px, 46vh, 460px));
	perspective: 1400px; perspective-origin: 50% 46%;
	display: grid; place-items: center;
	touch-action: pan-y;                  /* zvislý scroll stránky ostáva prstom voľný */
	cursor: grab; user-select: none; -webkit-user-select: none;
}
.ox-msr__scena--tahame { cursor: grabbing; }
.ox-msr__scena--tahame .ox-msr__karta { pointer-events: none; }
/* Koleso je presne veľké ako KARTA — nie ako scéna. Keby dedilo výšku scény,
   karta by sa naťahovala do pásu a fotka by v nej plávala v prázdne. */
.ox-msr__koleso {
	position: relative;
	width: min(var(--msr-karta-w, 206px), 60vw);
	height: min(var(--msr-karta-v, 330px), 88%);
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--polomer, 340px) * -1));
}
/* Poloha karty v kruhu je nedotknuteľná — prebíja aj hover posuny z tém
   (inak by hover „vytrhol“ kartu z kolesa). Dôraz prednej karty nesie
   opacity a tieň, nikdy transform. */
.ox-msr__koleso .ox-msr__karta.ox-msr__karta,
.ox-msr__koleso .ox-msr__karta.ox-msr__karta:hover {
	position: absolute; inset: 0; width: 100%; margin: 0;
	/* 17. 9. 2026 (Peter): bočné karty o kúsok menšie, predná v plnej veľkosti */
	transform: rotateY(var(--u)) translateZ(var(--polomer, 340px)) scale(var(--k-mierka, 1));
	transition: transform .35s var(--sk-prechod, ease);
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ox-msr__karta {
	display: flex; flex-direction: column; text-align: left; text-decoration: none;
	color: var(--sk-text); background: var(--sk-povrch);
	border-radius: var(--sk-r-velky); overflow: hidden;
	box-shadow: var(--sk-tien-karta), var(--sk-obrys);
	opacity: .40;
	transition: opacity .35s var(--sk-prechod), box-shadow .35s var(--sk-prechod);
}
.ox-msr__karta--celo { opacity: 1; }
.ox-msr__karta:focus-visible { outline: 3px solid var(--sk-akcent); outline-offset: 3px; }
/* fotky majú biele pozadie → dlaždica MUSÍ ostať biela, contain (pravidlo značky) */
.ox-msr__foto { aspect-ratio: 1 / 1; background: var(--sk-biela); display: grid; place-items: center; flex: 0 0 auto; }
.ox-msr__foto img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
.ox-msr__telo { padding: 12px 14px 15px; display: flex; flex-direction: column; gap: 3px; flex: 1; overflow: hidden; }
.ox-msr__kat { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
.ox-msr__nazov {
	font-family: var(--sk-font-nadpis); font-size: 14.5px; line-height: var(--sk-nadpis-lh);
	letter-spacing: var(--sk-nadpis-spacing); text-transform: var(--sk-nadpis-transform);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ox-msr__cena { margin-top: auto; padding-top: 6px; font-family: var(--sk-font-display); font-size: 19px; line-height: 1.25; color: var(--sk-akcent); }
.ox-msr__nacitava {
	position: absolute; inset: 0; display: grid; place-items: center; z-index: 4;
	pointer-events: none; transition: opacity .6s var(--sk-prechod);
}
.ox-msr__nacitava--prec { opacity: 0; }
.ox-msr__nacitava b {
	font-family: var(--sk-font-display); color: var(--sk-akcent); font-size: 12.5px;
	letter-spacing: .2em; line-height: var(--sk-nadpis-lh);
}
.ox-msr--pohyb .ox-msr__nacitava b { animation: ox-msr-blik 1.1s ease-in-out infinite; }
@keyframes ox-msr-blik { 50% { opacity: .3; } }

/* --- editoriálny panel s veľkou cenou (podpis návrhu 09) -------------------- */
.ox-msr__panel { position: relative; text-align: var(--msr-panel-text, left); }
/* Panel stojí mimo stredu, kam nedočiahne spoločný závoj hrdinu — a práve tam
   plávajú bobule z plátna. Dostáva preto vlastný závoj, rovnako ako sadzba. */
.ox-msr__panel::before {
	content: ''; position: absolute; inset: -10% -8%; z-index: -1; pointer-events: none;
	opacity: var(--msr-javisko-zavoj, .8);
	background: radial-gradient(ellipse at 50% 50%,
		var(--sk-bg) 0%, var(--sk-bg) 44%, transparent 78%);
}
/* Dva riadky su VYHRADENE: niektore nazvy sa zalomia a bez tohto by panel
   (a s nim cely hrdina aj obsah pod nim) skakal pri kazdom kroku carouselu. */
.ox-msr__panel .ox-pv__nazov {
	margin: 6px 0 0; min-height: 2.3em; min-height: 2lh;
	/* grid, nie flex: anonymna polozka gridu sa roztiahne na plnu sirku, takze
	   text-align (vpravo v 18 a 20) funguje dalej. Rezerva na druhy riadok sa
	   rozdeli nad a pod nazov — 18 px hore a 18 px dole vyzera ako bezna medzera,
	   37 px na jednom mieste vyzeralo ako diera. */
	display: grid; align-content: center;
}
.ox-msr__panel .ox-pv__cena { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.ox-msr__panel-akcie { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; justify-content: var(--msr-zarovnanie, flex-start); }

/* --- ovládanie (šípky, bodky, pomôcka) ------------------------------------- */
.ox-msr__lista {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 14px; padding-top: clamp(6px, 1.6vh, 18px);
	justify-content: var(--msr-lista, flex-start);
}
.ox-msr__arw {
	width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
	border: 2px solid var(--sk-linka); border-radius: var(--sk-btn-r);
	background: var(--sk-povrch); color: var(--sk-text);
	transition: background .3s var(--sk-prechod), color .3s var(--sk-prechod),
	            border-color .3s var(--sk-prechod), transform .3s var(--sk-prechod),
	            box-shadow .3s var(--sk-prechod);
}
.ox-msr__arw:hover { background: var(--sk-akcent); border-color: var(--sk-akcent); color: var(--sk-biela); transform: translateY(-2px); }
.ox-msr__arw svg { width: 15px; height: 15px; }
.ox-msr__bodky { display: flex; align-items: center; gap: 8px; }
.ox-msr__bodka {
	width: 30px; height: 5px; padding: 0; border: 0; overflow: hidden; cursor: pointer;
	border-radius: var(--sk-r-pilulka); background: var(--sk-linka);
	transition: width .3s var(--sk-prechod);
}
.ox-msr__bodka i { display: block; width: 100%; height: 100%; background: var(--sk-akcent); transform: scaleX(0); transform-origin: left; }
.ox-msr__bodka--aktivna { width: 44px; }
.ox-msr__bodka--aktivna i { transform: scaleX(1); }
/* výplň bodky je zároveň ukazovateľ času do ďalšieho kroku */
.ox-msr--pohyb .ox-msr__bodka--aktivna i { animation: ox-msr-plnenie var(--msr-trvanie, 5.2s) linear both; }
@keyframes ox-msr-plnenie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ox-msr__hint {
	display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto;
	font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sk-text-tlmeny);
}
.ox-msr__hint i { width: 26px; height: 14px; border: 1.5px solid var(--sk-text-tlmeny); border-radius: 8px; position: relative; display: inline-block; flex: 0 0 auto; }
.ox-msr__hint i::after {
	content: ""; position: absolute; top: 3px; left: 5px; width: 3px; height: 5px;
	background: var(--sk-text-tlmeny); border-radius: 2px;
}
.ox-msr--pohyb .ox-msr__hint i::after { animation: ox-msr-swipe 1.8s ease-in-out infinite; }
@keyframes ox-msr-swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }

/* --- bežiaci pás pod hrdinom ------------------------------------------------ */
.ox-msr-pas {
	position: relative; z-index: 5; overflow: hidden;
	background: var(--sk-akcent); color: var(--sk-biela); padding: 13px 0;
}
.ox-msr-pas__stopa { display: flex; width: max-content; }
.ox-msr-pas--pohyb .ox-msr-pas__stopa { animation: ox-msr-pas 28s linear infinite; }
.ox-msr-pas:hover .ox-msr-pas__stopa { animation-play-state: paused; }
.ox-msr-pas__stopa span {
	display: inline-flex; align-items: center; gap: 20px; white-space: nowrap; padding-inline: 20px;
	font-family: var(--sk-font-display); text-transform: uppercase;
	font-size: clamp(18px, 2.4vw, 30px); line-height: var(--sk-nadpis-lh);
}
.ox-msr-pas__stopa span::after {
	content: ""; width: 10px; height: 10px; border-radius: 999px;
	background: currentColor; flex: 0 0 auto; opacity: .85;
}
@keyframes ox-msr-pas { to { transform: translateX(-50%); } }

/* --- podpisová sekcia „Tri kroky a máš to“ ---------------------------------- */
.ox-msr-krok {
	position: relative; overflow: hidden;
	background: var(--sk-povrch); border-radius: var(--sk-r-velky);
	box-shadow: var(--sk-tien-karta), var(--sk-obrys);
	padding: 24px;
}
.ox-msr-krok__cislo {
	position: absolute; right: 14px; top: 2px; pointer-events: none;
	font-family: var(--sk-font-display); font-size: 66px; line-height: var(--sk-nadpis-lh);
	color: var(--sk-akcent); opacity: .15;
}
.ox-msr-krok__foto {
	display: grid; place-items: center; height: 150px; margin-bottom: 14px; overflow: hidden;
	background: var(--sk-biela); border-radius: var(--sk-r-obrazok); box-shadow: var(--sk-obrys);
}
.ox-msr-krok__foto img { max-height: 132px; width: auto; object-fit: contain; }
/* perforácia vstupenky — materiál jej dáva téma, kostra len miesto */
.ox-msr-krok__perf { display: block; height: 0; margin: 0 0 4px; }
.ox-msr-krok h3 { position: relative; margin-bottom: 8px; }
.ox-msr-krok p { margin: 0; font-size: 14.5px; line-height: 1.62; }

/* --- tmavý hrdina (`cfg.tmavy`) ---------------------------------------------
   Nočný pult: hrdina je tmavý, zvyšok webu ostáva svetlý. Prefarbenie je TU
   a je spoločné — inak by ho každá téma riešila po svojom a niektorý prvok
   (ovládanie, panel, pomôcka) by ostal čierny na čiernom. Presne to sa stalo
   tmavým skinom na /noveoxo pri audite. */
.ox-msr--tmavy { color: var(--sk-biela); }
.ox-msr--tmavy .ox-msr__zavoj { opacity: var(--sk-msr-zavoj, .55); background:
	radial-gradient(52% 44% at 50% 46%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 46%, transparent 80%); }
.ox-msr--tmavy .ox-msr__javisko::before {
	opacity: 1;
	background: radial-gradient(ellipse at 34% 46%,
		rgba(0,0,0,.60) 0%, rgba(0,0,0,.42) 46%, transparent 78%);
}
.ox-msr--tmavy .ox-msr__panel::before {
	opacity: 1;
	background: radial-gradient(ellipse at 50% 50%,
		rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 46%, transparent 78%);
}
.ox-msr--tmavy .ox-msr__h1,
.ox-msr--tmavy .ox-msr__h2 { color: var(--sk-biela); }
.ox-msr--tmavy .ox-msr__lead { color: rgba(255,255,255,.80); }
.ox-msr--tmavy .ox-oko { color: var(--sk-ruz); }
.ox-msr--tmavy .ox-msr__pilulka {
	background: rgba(255,255,255,.10); color: var(--sk-biela);
	border-color: rgba(255,255,255,.34);
}
.ox-msr--tmavy .ox-msr__arw {
	background: rgba(255,255,255,.08); color: var(--sk-biela);
	border-color: rgba(255,255,255,.34);
}
.ox-msr--tmavy .ox-msr__arw:hover { background: var(--sk-akcent); border-color: var(--sk-akcent); }
.ox-msr--tmavy .ox-msr__bodka { background: rgba(255,255,255,.24); }
.ox-msr--tmavy .ox-msr__hint { color: rgba(255,255,255,.66); }
.ox-msr--tmavy .ox-msr__hint i { border-color: rgba(255,255,255,.66); }
.ox-msr--tmavy .ox-msr__hint i::after { background: rgba(255,255,255,.66); }
.ox-msr--tmavy .ox-msr__panel .ox-pv__idx,
.ox-msr--tmavy .ox-msr__panel .ox-pv__kat { color: rgba(255,255,255,.66); }
.ox-msr--tmavy .ox-msr__panel .ox-pv__nazov { color: var(--sk-biela); }
.ox-msr--tmavy .ox-msr__panel .ox-pv__cena small { color: rgba(255,255,255,.66); }
/* obrysové tlačidlo na tmavom: biely rám, biely text (jadro má atramentový) */
.ox-msr--tmavy .ox-btn--obrys { border-color: rgba(255,255,255,.55); color: var(--sk-biela); }
.ox-msr--tmavy .ox-btn--obrys:hover:not(:disabled) { background: var(--sk-biela); color: var(--sk-atrament); }
.ox-msr--tmavy .ox-btn--obrys:disabled { color: rgba(255,255,255,.55); }
/* karty vitríny ostávajú SVETLÉ — produktové fotky majú biele pozadie (KONTRAKT §5) */

/* =============================================================================
   Usporiadanie polí — jediné, čím sa štyri návrhy rodiny líšia v rozložení
   ========================================================================== */
/* --- červený hrdina (`cfg.cerveny`) -----------------------------------------
   Sýta firemná červená pod celým hrdinom. Ide vždy spolu s `.ox-msr--tmavy`
   (svetlá sadzba), navyše opravuje presne tie prvky, ktoré na červenej ZMIZNÚ,
   lebo sú samy červené: cena v paneli, výplň bodiek, hlavné tlačidlo, hlásenie
   „načítavam“ a hover šípok. Bez tohto bloku by červený hrdina vyzeral ako
   poloprázdny — a presne toto je chyba, ktorú tmavé skiny na /noveoxo urobili. */
.ox-msr--cerveny .ox-msr__zavoj {
	opacity: var(--sk-msr-zavoj, .5);
	background: radial-gradient(54% 46% at 50% 46%, rgba(120, 0, 14,.42) 0%, rgba(120, 0, 14,.18) 52%, transparent 82%);
}
.ox-msr--cerveny .ox-msr__javisko::before {
	opacity: 1;
	background: radial-gradient(ellipse at 34% 46%,
		rgba(120, 0, 14,.40) 0%, rgba(120, 0, 14,.24) 46%, transparent 78%);
}
.ox-msr--cerveny .ox-msr__panel::before {
	opacity: 1;
	background: radial-gradient(ellipse at 50% 50%,
		rgba(120, 0, 14,.40) 0%, rgba(120, 0, 14,.24) 46%, transparent 78%);
}
.ox-msr--cerveny .ox-oko { color: var(--sk-biela); }
/* Na červenej sú drobné texty tlmenou bielou takmer nečitateľné — dvíhame ich. */
.ox-msr--cerveny .ox-msr__panel .ox-pv__idx,
.ox-msr--cerveny .ox-msr__panel .ox-pv__kat,
.ox-msr--cerveny .ox-msr__panel .ox-pv__cena small,
.ox-msr--cerveny .ox-msr__hint { color: rgba(255,255,255,.88); }
.ox-msr--cerveny .ox-msr__hint i { border-color: rgba(255,255,255,.88); }
.ox-msr--cerveny .ox-msr__hint i::after { background: rgba(255,255,255,.88); }
.ox-msr--cerveny .ox-msr__lead { color: rgba(255,255,255,.92); }
/* bočné karty na červenej stmavnú menej — pri .40 z nich ostali ružové duchy */
.ox-msr--cerveny .ox-msr__karta { opacity: .52; }
.ox-msr--cerveny .ox-msr__karta--celo { opacity: 1; }
.ox-msr--cerveny .ox-msr__pilulka i { background: var(--sk-biela); }
.ox-msr--cerveny .ox-msr__panel .ox-pv__idx b { color: var(--sk-biela); }
.ox-msr--cerveny .ox-msr__panel .ox-pv__cena { color: var(--sk-biela); }
.ox-msr--cerveny .ox-msr__bodka i { background: var(--sk-biela); }
.ox-msr--cerveny .ox-msr__nacitava b { color: var(--sk-biela); }
.ox-msr--cerveny .ox-msr__arw:hover {
	background: var(--sk-biela); border-color: var(--sk-biela); color: var(--sk-akcent);
}
/* hlavné tlačidlo je červené — na červenej ploche sa musí obrátiť na biele */
.ox-msr--cerveny .ox-btn--hlavne {
	background: var(--sk-biela); color: var(--sk-akcent); border-color: transparent;
}
.ox-msr--cerveny .ox-btn--hlavne:hover:not(:disabled) {
	background: var(--sk-krem); color: var(--sk-akcent-tmavy);
}

/* 17 DINER — sadzba vľavo, kruh vpravo, panel pod sadzbou. */
.ox-msr--17-diner { --msr-zarovnanie: flex-start; --msr-text: left; --msr-lista: flex-start; }

/* 18 CHROME — kruh je ZA sadzbou (ako javisko v návrhu 06), panel vpravo dole. */
.ox-msr--18-chrome {
	--msr-zarovnanie: flex-start; --msr-text: left; --msr-lista: flex-start;
	--msr-panel-text: right;
	min-height: min(82vh, 780px);
	/* 18 je jediny, kto uklada javisko+vitrinu, panel a listu POD seba do troch
	   riadkov — scena preto musi byt NIZSIA nez v 17/19/20, inak hrdina pretecie
	   okno a ovladanie skonci pod ohybom. Karta je tiez mensia: sadzba stoji pred
	   nou a velka karta by jej liezla do riadkov. */
	--msr-scena-v: clamp(300px, 40vh, 400px);
	--msr-karta-w: 196px; --msr-karta-v: 300px;
	--msr-javisko-zavoj: .4;
}
/* sadzba je v 18 v tom istom riadku ako vitrina — drzime ju kratsiu */
.ox-msr--18-chrome .ox-msr__h1 { font-size: clamp(30px, 4.1vw, 60px); }
.ox-msr--18-chrome .ox-msr__h2 { font-size: clamp(26px, 3.5vw, 52px); }
.ox-msr--18-chrome .ox-msr__mriezka {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stred" "panel" "lista";
}
.ox-msr--18-chrome .ox-msr__javisko,
.ox-msr--18-chrome .ox-msr__vitrina { grid-area: stred; }
/* ⚠️ Javisko a vitrína síce zdieľajú jednu bunku, ale NESTOJA NA SEBE: sadzba
   drží ľavú polovicu, kruh pravú a prekrývajú sa len pár percent v strede.
   Kým mali obe plnú šírku, biele Anton písmená ležali priamo na BIELEJ karte
   vitríny — a schovať kartu sa nesmie (KONTRAKT §5), takže to nezachránil
   žiadny závoj. */
.ox-msr--18-chrome .ox-msr__javisko {
	z-index: 3; pointer-events: none;
	justify-self: start; width: min(58%, 660px);
}
.ox-msr--18-chrome .ox-msr__stav a,
.ox-msr--18-chrome .ox-msr__stav button { pointer-events: auto; }
.ox-msr--18-chrome .ox-msr__vitrina {
	z-index: 1; justify-self: end; width: min(50%, 600px);
}
.ox-msr--18-chrome .ox-msr__panel { justify-self: end; max-width: 380px; }
.ox-msr--18-chrome .ox-msr__panel-akcie { justify-content: flex-end; }
.ox-msr--18-chrome .ox-msr__hint { margin-inline-start: auto; }

/* 19 JUKEBOX — kruh je hlavný hrdina (vľavo, väčší), sadzba a panel vpravo. */
.ox-msr--19-jukebox {
	--msr-zarovnanie: flex-start; --msr-text: left; --msr-lista: flex-start;
	--msr-scena-v: clamp(360px, 54vh, 520px); --msr-karta-w: 230px; --msr-karta-v: 368px;
}
.ox-msr--19-jukebox .ox-msr__mriezka {
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	grid-template-areas:
		"vitrina javisko"
		"vitrina panel"
		"lista   lista";
}

/* 20 DRIVE-IN — sadzba vľavo cez obidva riadky, kruh vpravo, panel POD kruhom. */
.ox-msr--20-drivein {
	--msr-zarovnanie: flex-start; --msr-text: left; --msr-lista: flex-start;
	--msr-panel-text: right;
	/* Panel stoji POD scenou (nie vedla nej ako v 17/19), takze scena musi byt
	   nizsia — inak sa hrdina nezmesti nad ohyb a lista sa orezne. */
	--msr-scena-v: clamp(320px, 42vh, 420px);
}
.ox-msr--20-drivein .ox-msr__mriezka {
	grid-template-areas:
		"javisko vitrina"
		"javisko panel"
		"lista   lista";
}
.ox-msr--20-drivein .ox-msr__javisko { align-self: center; }
.ox-msr--20-drivein .ox-msr__panel { justify-self: end; text-align: right; }
.ox-msr--20-drivein .ox-msr__panel-akcie { justify-content: flex-end; }

/* 21 SHOWROOM — rovnaké rozloženie ako 20 (sadzba vľavo, kruh vpravo, panel pod
   kruhom); Three.js pozadie sedí pod závojom v rovnakej vrstve ako plátno. */
.ox-msr--rodina-show {
	--msr-zarovnanie: flex-start; --msr-text: left; --msr-lista: flex-start;
	--msr-panel-text: right;
	/* Karta nesie tvrdenie (nadnadpis + názov na 2 riadky + popis na 2 riadky +
	   odkaz), nie cenu — potrebuje vyššie telo, inak sa text ORÍZNE. */
	/* Scéna musí byť vyššia než karta (karta = 88 % scény), inak karty prerastú rám.
	   Zároveň nie MOC vyššia — rám má karty objímať, nie ich strácať v prázdne. */
	--msr-scena-v: clamp(392px, 45vh, 412px);
	--msr-karta-w: 212px; --msr-karta-v: 356px;
}
.ox-msr--rodina-show .ox-msr__mriezka {
	grid-template-areas:
		"javisko vitrina"
		"javisko panel"
		"lista   lista";
}
.ox-msr--rodina-show .ox-msr__javisko { align-self: center; }
.ox-msr--rodina-show .ox-msr__panel { justify-self: end; text-align: right; }
.ox-msr--rodina-show .ox-msr__panel-akcie { justify-content: flex-end; }
.ox-msr .ox-vh__pozadie { z-index: 0; }
/* Three.js motor vetvy 21 (msrThree): canvas leží pod závojom aj obsahom, plnú
   silu má scéna sama — téma ju tlmí tokenom --sk-vh-pozadie len keď treba. */
.ox-msr__three { opacity: var(--sk-vh-pozadie, 1); }
.ox-msr__three canvas { display: block; width: 100% !important; height: 100% !important; }
/* filmové zrno nad scénou (award detail): SVG šum ako data-URI, silu dáva téma
   tokenom --sk-msr-zrno (0 = vypnuté); leží pod obsahom, nad plátnom */
.ox-msr--rodina-show::after {
	content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	opacity: var(--sk-msr-zrno, 0); mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 160px 160px;
}

/* --- nábeh obsahu pri skrolovaní (k.nabeh) ----------------------------------
   Štyri druhy: `posun` (22 px + opacity, predvolený), `maska` (text vyjde spod
   hrany — pre nadpisy a nadnadpisy), `clip` (fotka sa odhalí zdola + vnútorné
   zväčšenie) a `cislo` (počítadlo dobehne, JS). Stagger 60 ms (`--rv-stagger`),
   po dobehnutí JS triedy zhodí, aby hover prechody jadra ostali nedotknuté. */
.ox-rv { transition-delay: calc(var(--rv-i, 0) * var(--rv-stagger, 60ms)); }
.ox-rv--posun { opacity: 0; transform: translateY(22px); transition-property: opacity, transform; transition-duration: .7s, .85s; transition-timing-function: var(--sk-prechod); }
.ox-rv--posun.ox-rv--in { opacity: 1; transform: none; }
/* maska: prvok je „vysadený“ zdola — clip-path nechá text vyjsť spod hrany bez
   toho, aby prekryl susedný riadok (žiadny wrapper, žiadny layout shift) */
.ox-rv--maska { clip-path: inset(-20% 0 100% 0); transform: translateY(18%); transition-property: clip-path, transform; transition-duration: .9s; transition-timing-function: var(--sk-prechod); }
.ox-rv--maska.ox-rv--in { clip-path: inset(-20% 0 -20% 0); transform: none; }
/* clip: fotka/doska sa odhalí zdola nahor a jej obsah dojde zo zväčšenia */
.ox-rv--clip { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--sk-prechod); }
.ox-rv--clip.ox-rv--in { clip-path: inset(0 0 0 0); }
.ox-rv--clip img { transform: scale(1.08); transition: transform 1.2s var(--sk-prechod); transition-delay: inherit; }
.ox-rv--clip.ox-rv--in img { transform: none; }
.ox-rv--cislo { opacity: 0; transition: opacity .5s var(--sk-prechod); font-variant-numeric: tabular-nums; }
.ox-rv--cislo.ox-rv--in { opacity: 1; }
/* slová: každé slovo vyjde spod VLASTNEJ účiary (obal sa oreže, prvok sám nie —
   preto ho IntersectionObserver vidí; pozri nabehRozdelSlova vo varianty.js) */
.ox-rv--slova .ox-rv__slovo { display: inline-block; clip-path: inset(-.35em 0 -.3em 0); }
.ox-rv--slova .ox-rv__slovo > span {
	display: inline-block; transform: translateY(118%);
	transition: transform .9s var(--sk-prechod);
	transition-delay: calc(var(--rv-i, 0) * var(--rv-stagger, 60ms) + var(--w, 0) * 45ms);
}
.ox-rv--slova.ox-rv--in .ox-rv__slovo > span { transform: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	.ox-rv, .ox-rv--posun, .ox-rv--maska, .ox-rv--clip, .ox-rv--cislo { opacity: 1; transform: none; clip-path: none; transition: none; }
	.ox-rv--clip img { transform: none; transition: none; }
	.ox-rv--slova .ox-rv__slovo > span { transform: none; transition: none; }
}

/* --- spoločná vrstva vetvy 21 (award štandard, potvrdené porotou 7. 9. 2026) ----
   1) scrim pod sadzbou z TMAVŠEJ ČERVENEJ (nie čiernej) s easingovými zastávkami —
      biela na #D60019 je 3.91:1, pod scrimom ≥ 4.6:1; 2) lead 18 px / 500 / 1.55;
   3) kurzorové svetlo (::before) hladené motorom cez --kx/--ky; 4) pás v px/s;
   5) magnet na dvoch tlačidlách panelu; 6) pomôcka zbledne po prvom ťahu. */
.ox-msr--rodina-show .ox-msr__javisko::before {
	opacity: 1; inset: -8% -10%;
	background: linear-gradient(180deg, rgba(140, 0, 16,0) 0%, rgba(140, 0, 16,.08) 30%, rgba(140, 0, 16,.18) 55%, rgba(140, 0, 16,.28) 78%, rgba(140, 0, 16,.34) 100%);
	/* okraje scrimu sa rozpúšťajú (prienik dvoch masiek) — pod leadom ostáva plná sila, obdĺžnik nemá hrany */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 80%, transparent 100%), linear-gradient(180deg, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 80%, transparent 100%), linear-gradient(180deg, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
/* mobil: sadzba v hornej časti bunky (sklené dosky Glass/Bento inak ukazujú prázdne pásy) */
@media (max-width: 1000px) { .ox-msr--rodina-show .ox-msr__javisko { align-items: start; } }
.ox-msr--rodina-show .ox-msr__panel::before {
	opacity: 1;
	background: radial-gradient(ellipse at 60% 50%, rgba(140, 0, 16,.30) 0%, rgba(140, 0, 16,.14) 50%, transparent 80%);
}
.ox-msr--rodina-show .ox-msr__lead { font-size: clamp(16px, 1.2vw, 18.5px); font-weight: 500; line-height: 1.55; max-width: 44ch; color: rgba(255,255,255,.96); }
.ox-msr--rodina-show .ox-msr__panel-text { color: rgba(255,255,255,.94); }
.ox-msr--rodina-show::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none;
	background: radial-gradient(640px circle at var(--kx, 50%) var(--ky, 50%), rgba(255,255,255,.08), rgba(255,255,255,.03) 35%, transparent 65%);
	opacity: var(--sk-msr-kurzor, 1);
}
@media (pointer: fine) { .ox-msr--rodina-show.ox-msr--pohyb::before { display: block; } }
.ox-msr-pas--pohyb .ox-msr-pas__stopa { animation-duration: var(--pas-trvanie, 28s); }
.ox-msr__hint { transition: opacity .4s var(--sk-prechod); }
.ox-msr__hint--splnene { opacity: .55; }
.ox-magnet { transition: transform .9s cubic-bezier(.34,1.56,.64,1); will-change: transform; }
.ox-magnet--drzi { transition: transform .12s linear; }
.ox-show__fakt i img { width: 26px; height: 26px; display: block; }
.ox-btn:active { transform: translateY(1px); }

/* --- kruh s TVRDENIAMI (namiesto produktov) --------------------------------- */
/* Karta je <button>: klik otvára popup s vysvetlením, nikam neodchádza. */
.ox-msr__karta--claim {
	appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0;
	font: inherit; text-align: left; cursor: pointer;
}
/* Bočné karty nesú TEXT, nie fotku tovaru — pri .52 bol nečitateľný. Dvíhame ich,
   dôraz prednej karty potom robí tieň a rám témy, nie zoslabenie ostatných. */
.ox-msr__karta--claim,
.ox-msr--cerveny .ox-msr__karta--claim,
.ox-msr--tmavy .ox-msr__karta--claim { opacity: .82; }
.ox-msr__karta--claim.ox-msr__karta--celo,
.ox-msr--cerveny .ox-msr__karta--claim.ox-msr__karta--celo,
.ox-msr--tmavy .ox-msr__karta--claim.ox-msr__karta--celo { opacity: 1; }
/* Rámček ikony je PODIEL z výšky karty, nie pomer strán: pri `aspect-ratio`
   prehral pomer s obsahom (SVG 160×160) a ikona vytŕčala 66 px do textu.
   Podiel navyše necháva fotku ustúpiť textu na nízkej karte. */
.ox-msr__karta--claim .ox-msr__foto { flex: 0 0 42%; aspect-ratio: auto; min-height: 92px; overflow: hidden; }
.ox-msr__karta--claim .ox-msr__foto img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
/* ikona tvrdenia je kresba, nie produktová fotka — smie ísť bližšie k okraju */
.ox-msr__karta--claim .ox-msr__foto img { padding: 5%; }
.ox-vpopup__hlava img { padding: 14px; }
/* Telo karty tvrdenia: každý riadok má vyhradené miesto, takže sa text nikdy
   neoreže na polovicu písmena (to sa dialo pri pevnej výške karty). */
.ox-msr__karta--claim .ox-msr__telo { padding: 12px 14px 14px; gap: 5px; overflow: visible; justify-content: center; }
.ox-msr__karta--claim .ox-msr__viac { margin-top: 9px; }
.ox-msr__karta--claim .ox-msr__kat { line-height: 1.3; }
.ox-msr__karta--claim .ox-msr__nazov {
	-webkit-line-clamp: 2; line-height: 1.22; min-height: 2.44em;
	display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.ox-msr__ktext {
	font-size: 12px; line-height: 1.45; color: var(--sk-text-tlmeny);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.9em;
}
.ox-msr__viac {
	margin-top: auto; padding-top: 8px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sk-akcent);
}
/* Obrázok v kruhu nesmie ísť ťahať — inak prehliadač spustí vlastný drag
   obrázka, pointermove prestane chodiť a koleso sa neotočí. */
.ox-msr__karta img, .ox-svit__foto img {
	-webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none;
}
.ox-msr__panel-text {
	margin: 8px 0 0; color: var(--sk-text-tlmeny);
	font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.55; text-wrap: pretty;
}
.ox-msr__panel--claim .ox-pv__nazov { font-size: clamp(1.5rem, 2.6vw, 2.6rem); }
.ox-msr--tmavy .ox-msr__panel-text { color: rgba(255, 255, 255, .82); }
.ox-msr--cerveny .ox-msr__panel-text { color: rgba(255, 255, 255, .92); }

/* =============================================================================
   DRUHÉ DEJSTVO VETVY 21 — sekcie POD hrdinom   (2. dejstvo, 10. 9. 2026)
   -----------------------------------------------------------------------------
   Sekcie (kategórie, dôvody, tri kroky, päta) generuje spoločný `pohlady.js` pre
   VŠETKY návrhy 1–21, preto sa rodinné pravidlá vešajú na `html[data-tema^="21"]`
   (jediný prefix, ktorý majú všetky slugy vetvy 21 a nikto iný).

   ⚠️⚠️ ZÚŽENIE NA DOMOV. `.ox-sek--krem`, `.ox-mriezka--4`, `.ox-mriezka--3` a
   `.ox-panel` NIE SÚ len na domove — sú aj na detaile produktu („Ďalej sa hodí“),
   na celej `/b2b` a na `/ucet`. Preto má KAŽDÉ pravidlo druhého dejstva jednu
   z troch bránok:
     ROOT  html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show))
     KAT   … :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4))
     DOV   … :where([data-ox21="dovody"],    #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel))
   Atribúty `data-ox21-domov` / `data-ox21` stampuje `pripravAkt2()` v
   `assets/varianty/21-showroom.js` — beží LEN na domove, nikdy z router-observera.
   Vetva `:has(> .ox-show)` je CSS-only degradácia, keby JS nedobehol; priamy
   potomok `.ox-show` je to, čo garantuje domov (na detaile ani na /b2b nie je).

   Poradie súborov je `_zaklad.css` → `temy/<slug>.css` → `varianty.css`, takže
   pri ZHODNEJ špecificite vyhráva tento súbor. Téma, ktorá chce prebiť pravidlo
   druhého dejstva, musí pridať špecificitu (napr. `[data-ox21-domov]` do reťazca).
   ========================================================================== */

/* --- 1) rytmus dejstva: trojstupňová škála vo vw -----------------------------
   Namiesto jedného `padding-block` striedame r1/r2/r3 (pomer ≈ 1 : 2 : 3).
   Medzera MEDZI sekciami je 0 — rytmus je vždy VNÚTRI sekcie. Rodinná hodnota
   z 1. kola ostáva ako predvolená pre CUDZIE trasy (/produkt, /b2b, /ucet);
   na domove ju škála nižšie PREPISUJE (nesčítava sa). */
html[data-tema^="21"] .ox-sek { padding-block: clamp(52px, 4.6vw, 78px); }
html[data-tema^="21"] .ox-sek--tesna { padding-block: clamp(34px, 3vw, 52px); }
@media (max-width: 700px) {
	html[data-tema^="21"] .ox-sek { padding-block: clamp(44px, 9vw, 60px); }
}

html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) {
	--akt-r1: clamp(34px, 4vw, 58px);
	--akt-r2: clamp(60px, 8vw, 116px);
	--akt-r3: clamp(88px, 13vw, 188px);
	--akt-prekryv: clamp(36px, 4.6vw, 88px);
	--akt-h2: clamp(36px, 5.95vw, 86px);
	counter-reset: akt;
	/* zem dejstva: ruž #FFD9D6 pri 12 % na bielej — firemná zmes, NIE béžová.
	   Vešia sa na #ox-obsah, nie na body: mimo domova ostáva zem nedotknutá. */
	background: #FFFAF9;
}
@media (max-width: 700px) {
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) {
		--akt-r1: 30px; --akt-r2: 52px; --akt-r3: 72px; --akt-prekryv: 24px;
	}
}

/* kapitola 01 — pripnutá scéna; spodok 0, aby B2B doska dosadla bez bielej diery.
   z-index 1 drží červenú dosku NAD ružovou zemou kapitoly 03 (zámerný prekryv). */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show {
	/* 15. 9. 2026 Peter: „tu je zbytočne medzera biela“ — veľký nádych r3 (až 188 px)
	   pod bežiacim pásom hrdinu pôsobil ako diera; ostáva len malý odstup r1. */
	padding-block: var(--akt-r1) 0; position: relative; z-index: 1;
}
/* kapitola 03 — jediná farebná zem dejstva + zasunutie predošlej kapitoly */
html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) {
	background: rgba(255, 217, 214, .5);
	margin-top: calc(-1 * var(--akt-prekryv));
	padding-block: calc(var(--akt-prekryv) + var(--akt-r2)) var(--akt-r2);
	position: relative; z-index: 0;
}
/* kapitola 04 — biela (ružová zem je vyššie), najväčší nádych dejstva */
html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) {
	background: transparent; padding-block: var(--akt-r3) var(--akt-r2);
}
/* kapitola 05 — tesne pod dôvodmi, veľký odstup pred pätou (prah + šev) */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-kroky {
	padding-block: var(--akt-r1) var(--akt-r3);
}

/* --- 2) nadnadpis = KAPITOLOVÉ ČÍSLO ---------------------------------------
   Farba: akcent #D60019 na bielej má 3.91:1 (pod AA pre 12 px) — v druhom
   dejstve ide tmavší stupeň #D60019 (4.93:1). Na červených a tmavých doskách
   biely. Linka nadnadpisu je vždy v `currentColor`. */
html[data-tema^="21"] .ox-sek .ox-oko,
html[data-tema^="21"] .ox-show .ox-oko { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-show__b2b .ox-oko,
html[data-tema^="21"] .ox-sek--tmava .ox-oko,
html[data-tema^="21"] #ox-pata .ox-oko { color: rgba(255, 255, 255, .9); }
html[data-tema^="21"] .ox-oko::before { background: currentColor; }

/* Na domove sa z 26×2 px pomlčky stáva ČÍSLO KAPITOLY (01–05) a pomlčka sa
   presúva do ::after. Bez JS: `counter-increment` je na SAMOTNOM `.ox-oko`,
   takže poradie DOM dá 01 prezentácia · 02 B2B pás · 03 sortiment · 04 prečo my
   · 05 ako na to. `.ox-msr__cast` je nadnadpis v HRDINOVI (tri stavy) — ten sa
   nesmie počítať, inak by sa kapitoly posunuli o tri.
   POVINNE `width/height:auto; background:none` — základ tam kreslí plôšku. */
html[data-tema^="21"] [data-ox21-domov] .ox-oko:not(.ox-msr__cast),
html[data-tema^="21"] #ox-obsah:has(> .ox-show) .ox-oko:not(.ox-msr__cast) {
	counter-increment: akt;
	align-items: center; gap: clamp(10px, .9vw, 12px);
	font-size: 12.5px; letter-spacing: .2em; margin-bottom: clamp(14px, 1.4vw, 20px);
}
html[data-tema^="21"] [data-ox21-domov] .ox-oko:not(.ox-msr__cast)::before,
html[data-tema^="21"] #ox-obsah:has(> .ox-show) .ox-oko:not(.ox-msr__cast)::before {
	content: counter(akt, decimal-leading-zero);
	width: auto; height: auto; background: none;
	font-variant-numeric: tabular-nums; letter-spacing: .2em;
}
html[data-tema^="21"] [data-ox21-domov] .ox-oko:not(.ox-msr__cast)::after,
html[data-tema^="21"] #ox-obsah:has(> .ox-show) .ox-oko:not(.ox-msr__cast)::after {
	content: ''; flex: 0 0 auto; width: clamp(24px, 3.4vw, 58px); height: 1px;
	background: currentColor; opacity: .45;
}

/* --- 3) jedna veľkosť kapitolového nadpisu ----------------------------------
   NIKDY na globálne `.ox-h2` — na detaile a v pokladni je to H1. `--akt-h2-lh`
   si prepisuje téma (Anton 1.02, Playfair/Jakarta/Manrope .94–.98, Luckiest
   Guy 1.08 — obrysy potrebujú vzduch). */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-hlava-sekcie .ox-h2,
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__text .ox-h2 {
	font-size: var(--akt-h2); line-height: var(--akt-h2-lh, 1.02);
	letter-spacing: -.005em; margin-bottom: .28em;
}

/* Hlavička sekcie: odkaz vpravo plával ~35 px pod účiarou H2 (flex-end na vysokom
   bloku oko+H2) a čítal sa ako chyba sadzby. Ide na účiaru nadnadpisu hore vpravo.
   Po presune „Celý sortiment →“ do prahu ostáva „Všetko →“ JEDINÝM sekčným odkazom
   v pravom hornom rohu celej stránky. */
html[data-tema^="21"] .ox-hlava-sekcie {
	align-items: start;
	column-gap: clamp(24px, 4vw, 64px);
	margin-bottom: clamp(26px, 3vw, 42px);
}
html[data-tema^="21"] .ox-hlava-sekcie > .ox-btn--tiche {
	margin-top: 4px; align-self: start; flex: 0 0 auto;
	font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
	padding: 6px 0; min-height: 0; border: 0; background: none; border-radius: 0;
	color: var(--sk-text); border-bottom: 1px solid var(--sk-linka);
	transition: color .2s var(--sk-prechod), border-color .2s var(--sk-prechod);
}
html[data-tema^="21"] .ox-hlava-sekcie > .ox-btn--tiche:hover {
	color: var(--sk-akcent-tmavy); border-color: var(--sk-akcent-tmavy); background: none;
}

/* --- 4) viditeľný fokus v celom druhom dejstve (Accessibility je samostatná
   položka Dev Award a býva najslabšie skóre) ------------------------------- */
html[data-tema^="21"] .ox-sek a:focus-visible,
html[data-tema^="21"] .ox-sek button:focus-visible,
html[data-tema^="21"] .ox-show a:focus-visible,
html[data-tema^="21"] .ox-show button:focus-visible {
	outline: 2px solid var(--sk-akcent-tmavy); outline-offset: 3px; border-radius: 2px;
}
html[data-tema^="21"] .ox-show__b2b a:focus-visible,
html[data-tema^="21"] .ox-show__b2b button:focus-visible,
html[data-tema^="21"] .ox-sek--tmava a:focus-visible,
html[data-tema^="21"] #ox-pata a:focus-visible {
	outline: 2px solid #fff; outline-offset: 3px;
}
/* Tabulátor nesmie spadnúť do prvku, ktorý ešte nedobehol nábeh (ostal by
   neviditeľný). Prefixované témou — `.ox-rv` používajú aj návrhy 1–20. */
html[data-tema^="21"] .ox-rv:focus-within {
	opacity: 1; transform: none; clip-path: none; transition: none;
}

/* --- 5) KAPITOLA 01 — prezentácia: pripnutá scéna + editoriálne fakty -------- */
.ox-show { padding-top: clamp(40px, 6vw, 84px); }
.ox-show__mriezka {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(22px, 4vw, 64px); align-items: center;
}
.ox-show__vizual {
	position: relative; border-radius: var(--sk-r-velky); overflow: hidden;
	background: radial-gradient(120% 90% at 82% -10%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
	            linear-gradient(175deg, var(--sk-akcent) 0%, var(--sk-akcent-tmavy) 100%);
	box-shadow: var(--sk-tien);
	--vh-px: 0; --vh-py: 0;
}
.ox-show__vizual .ox-vh__vizual { height: clamp(320px, 40vw, 520px); padding: 18px 18px 60px; } /* spodná nálepka presahuje figure */
.ox-show__text .ox-lead { max-width: 36em; }
.ox-show__fakty {
	list-style: none; padding: 0; margin: 22px 0 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
}
.ox-show__fakt {
	display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center;
	padding: 12px 14px; background: var(--sk-povrch); border-radius: var(--sk-r-maly);
	box-shadow: var(--sk-tien-karta), var(--sk-obrys);
}
.ox-show__fakt i {
	width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
	background: var(--sk-ruz); color: var(--sk-akcent-tmavy); font-style: normal; font-size: 17px; line-height: 1;
}
.ox-show__fakt b { display: block; font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform);
	letter-spacing: var(--sk-nadpis-spacing); font-size: 16px; line-height: 1.25; }
.ox-show__fakt small { display: block; color: var(--sk-text-tlmeny); font-size: 12.5px; line-height: 1.4; }
.ox-show__fakt i img { width: 26px; height: 26px; display: block; }

/* Pripnutá scéna — JEDINÝ pin celého aktu. `top` cez existujúcu konvenciu
   projektu (`calc(var(--ox-lista) + 96px)`, rovnako ako `.ox-detail__galeria`),
   nemeriame výšku hlavičky v JS. Pod 1000 px `static`.
   ⚠️ Do `.ox-show` ani `.ox-show__mriezka` NIKDY `overflow:hidden` — vizuál je
   zároveň cieľ nábehu typu `clip` a pin by sa ticho vypol. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__mriezka {
	grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
	column-gap: clamp(28px, 4.8vw, 80px); row-gap: clamp(24px, 4vw, 48px);
	align-items: start;
}
@media (min-width: 1001px) {
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__vizual {
		position: sticky; top: calc(var(--ox-lista, 0px) + 96px);
	}
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__text .ox-lead {
	max-width: 46ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55;
	margin-bottom: clamp(18px, 2vw, 28px);
}

/* 17. 9. 2026: druhý odsek leadu = príbeh sady RED (2024). Odznak RED = značka
   z hlavičky „OXO Bubble Tea (Red)“: biele Anton písmo na červenej, malý rádius. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__text .ox-lead--red {
	font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; color: var(--sk-text-tlmeny, inherit);
	padding-left: clamp(14px, 1.4vw, 20px); border-left: 3px solid var(--sk-akcent);
}
/* NÁVRH (17. 9. 2026, /oxo): odsek RED rozdelený — veta, rad „bez“ štítkov, veta.
   Štítky = to, čo sada RED NEPOTREBUJE: obrys v akcente, malé kapitálky ako .ox-oko,
   pred textom krížik. Odsek je <div>, aby v ňom mohol byť zoznam. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__text .ox-lead--red p { margin: 0 0 10px; font: inherit; color: inherit; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__text .ox-lead--red p:last-child { margin-bottom: 0; }
.ox-show__bez {
	list-style: none; margin: 4px 0 14px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 8px;
}
.ox-show__bez li {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 12px 6px 10px; border: 1.5px solid var(--sk-akcent); border-radius: 999px;
	color: var(--sk-akcent-tmavy, var(--sk-akcent)); background: rgba(255, 0, 29, .05);
	font-family: var(--sk-font-text); font-weight: 700; font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
.ox-show__bez li::before {
	content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
	background: var(--sk-akcent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23000'/%3E%3Cpath d='M4.3 4.3l5.4 5.4M9.7 4.3L4.3 9.7' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23000'/%3E%3Cpath d='M4.3 4.3l5.4 5.4M9.7 4.3L4.3 9.7' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 620px) { .ox-show__bez li { font-size: 11px; padding: 5px 10px 5px 8px; } }

.ox-show__red {
	display: inline-block; vertical-align: baseline; padding: 1px 8px 0; margin: 0 1px;
	border-radius: 6px; background: var(--sk-akcent); color: var(--sk-biela, #fff);
	font-family: var(--sk-font-nadpis); font-weight: 400; font-size: .95em; letter-spacing: .06em;
	line-height: 1.35; text-transform: uppercase;
}

/* 6 faktov: z dlaždíc na šesť editoriálnych riadkov cez CELÚ šírku stĺpca.
   Toto je zároveň to, čo vyrobí dráhu pripnutého vizuálu — na dva stĺpce
   pravý stĺpec nenarastie a sticky nemá kam ísť. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakty {
	grid-template-columns: 1fr; gap: 0; margin-top: clamp(20px, 2.4vw, 32px);
	border-top: 1px solid var(--sk-linka);
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt {
	position: relative;
	grid-template-columns: 34px minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px);
	align-items: baseline; padding: clamp(15px, 1.6vw, 22px) 0;
	background: none; box-shadow: none; border-radius: 0; border: 0;
	border-bottom: 1px solid var(--sk-linka);
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt i {
	width: 34px; height: 34px; background: none; border-radius: 0;
	align-self: start; transform: translateY(1px);
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt i img { width: 30px; height: 30px; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt > span {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(10px, 1.4vw, 26px); align-items: baseline;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt b {
	font-size: clamp(17px, 1.5vw, 22px); line-height: 1.16;
	transition: color .35s var(--sk-prechod);
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt small {
	font-size: 13.5px; line-height: 1.5;
}
/* Obchodná hierarchia: posledné dva fakty („Vyrobené v EÚ“, „Skladom na
   Slovensku“) sú jediné, ktoré predávajú termín dodania. Ostatné štyri sú tiché. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt:nth-child(n+5) b {
	color: var(--sk-akcent-tmavy);
}
/* Riadok v optickej osi okna (IntersectionObserver `-46% 0px -46%`): červená
   linka podrastie zľava doprava. Pri vypnutom pohybe sa trieda vôbec nepridáva. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt::after {
	content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
	background: var(--sk-akcent); transition: width .55s var(--sk-prechod);
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt.je-v-osi::after { width: 100%; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt.je-v-osi b { color: var(--sk-akcent-tmavy); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-show__fakt::after,
	html[data-tema^="21"] .ox-show__fakt b { transition: none; }
}

/* --- 6) KAPITOLA 02 — B2B pás: jediná sýta plocha aktu, cez celé okno --------
   FULL-BLEED bez JS a bez `overflow-x`: `_zaklad.css` už má `overflow-x: clip`
   na html aj body (`hidden` by zabil sticky hlavičku aj pin). Vnútorná hrana
   vychádza presne na ľavý okraj wrapu, presah šírky posuvníka sa oreže. */
.ox-show__b2b {
	margin-top: clamp(26px, 4vw, 48px);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(18px, 3vw, 40px);
	align-items: center; padding: clamp(22px, 3vw, 40px);
	background: var(--sk-atrament); color: #fff; border-radius: var(--sk-r-velky);
}
.ox-show__b2b .ox-h3 { color: #fff; font-size: clamp(22px, 2.4vw, 32px); margin: 6px 0 10px; }
.ox-show__b2b p { color: rgba(255,255,255,.9); margin: 0 0 16px; max-width: 34em; }
.ox-show__cesta { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: krok; }
.ox-show__cesta li {
	position: relative; padding: 14px 12px 12px; border-radius: var(--sk-r-stredny);
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	display: grid; gap: 4px; align-content: start; min-height: 112px;
}
.ox-show__cesta li::before {
	counter-increment: krok; content: counter(krok, decimal-leading-zero);
	font-family: var(--sk-font-display); color: currentColor; font-size: 20px; line-height: 1;
}
.ox-show__cesta b { font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform); letter-spacing: .02em; font-size: 14.5px; line-height: 1.25; }
.ox-show__cesta small { color: rgba(255,255,255,.92); font-size: 12.5px; line-height: 1.45; }
.ox-show__akcie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ox-show__b2b .ox-btn--obrys { border-color: rgba(255,255,255,.55); color: #fff; }

html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b {
	margin-top: var(--akt-r2);
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(56px, 7vw, 104px);
	padding-inline: calc(50vw - 50%);
	border-radius: 0;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	column-gap: clamp(28px, 5vw, 88px); row-gap: clamp(26px, 3vw, 44px);
	align-items: start;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b .ox-h3 {
	font-size: clamp(26px, 3.4vw, 48px); line-height: 1.06; margin: 4px 0 14px;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b p {
	font-size: 16.5px; line-height: 1.6; max-width: 44ch; margin-bottom: clamp(18px, 2vw, 26px);
}
/* Cesta 01–04 bez rámov: jedna horná linka a tri zvislé predely. Číslo kroku
   POVINNE `currentColor` — `var(--sk-akcent)` je červená na červenej doske. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta {
	gap: 0; border-top: 1px solid rgba(255,255,255,.24);
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta li {
	background: none; border: 0; border-radius: 0; min-height: 0;
	border-left: 1px solid rgba(255,255,255,.16);
	padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 22px) 0;
	gap: 6px;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta li:first-child { border-left: 0; padding-left: 0; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta li:last-child { padding-right: 0; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta li::before {
	display: block; font-size: clamp(28px, 3vw, 44px); line-height: 1; color: currentColor; margin-bottom: 6px;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta b { font-size: 15.5px; line-height: 1.28; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta small { font-size: 12.5px; color: #fff; } /* plná biela: na #D60019 4.95:1, .92 by padlo na 4.3 */
/* Dve najdrahšie konverzie stránky nesmú mať váhu ktoréhokoľvek iného tlačidla. */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__akcie .ox-btn {
	min-height: 60px; padding: 18px 34px; font-size: 16px;
}
/* ⚠️ Kontrast na SÝTEJ doske: biely 12,5 px text na plnej #D60019 má 3.91:1 a
   padá na AA. `pripravAkt2()` zmeria skutočné pozadie dosky a keď je kontrast
   bielej pod 4.5, pridá túto triedu — doska sa stmaví tmavšou červenou
   rgba(140, 0, 16,.30) (≈ #DC0019, biela 5.08:1) a farebnosť ostane firemná. */
html[data-tema^="21"] .ox-show__b2b.ox-21-doska--jasna {
	background-image: linear-gradient(rgba(140, 0, 16,.30), rgba(140, 0, 16,.30));
}

/* --- 7) KAPITOLA 03 — kategórie: SKYLINE namiesto štyroch dlaždíc ------------
   Pomery MUSIA byť v CSS (nie dopočítané), inak vzniká CLS pri lazy fotkách.
   Najväčšiu plochu dostane prvá karta (Sirupy) — najsilnejšia kategória. */
@media (min-width: 901px) {
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-mriezka--4 {
		grid-template-columns: 1.34fr .9fr 1.14fr .86fr;
		column-gap: clamp(16px, 2.6vw, 36px); row-gap: 0; align-items: end;
	}
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:nth-child(1) .ox-produkt__foto { aspect-ratio: 4 / 5; }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:nth-child(2) .ox-produkt__foto { aspect-ratio: 1 / 1; }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:nth-child(3) .ox-produkt__foto { aspect-ratio: 5 / 6; }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:nth-child(4) .ox-produkt__foto { aspect-ratio: 3 / 4; }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:nth-child(2) { margin-top: clamp(26px, 4vw, 72px); }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:nth-child(3) { margin-top: clamp(10px, 1.6vw, 30px); }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:nth-child(4) { margin-top: clamp(42px, 6.6vw, 116px); }
}
html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt {
	background: none; box-shadow: none; border-radius: 0; height: auto; overflow: visible;
}
html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto {
	background: #fff; position: relative;
}
html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto img { padding: 4% 6%; }
html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__telo {
	padding: clamp(12px, 1.3vw, 18px) 0 0; gap: 4px;
}
html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__nazov {
	font-size: clamp(20px, 2vw, 30px); line-height: 1.08;
}
html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__popis { font-size: 13.5px; }
@media (max-width: 900px) {
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-mriezka--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(14px, 3vw, 26px); row-gap: clamp(26px, 5vw, 40px); align-items: start;
	}
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt { margin-top: 0; }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto { aspect-ratio: 4 / 3; }
}
@media (max-width: 420px) {
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-mriezka--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- 8) karty (kategórie aj katalóg): hover ako remeslo ----------------------
   Jadro dvíha celú kartu o 4 px. Špička 2026 robí opak: karta STOJÍ, hýbe sa
   OBSAH (fotka 1.06 za 700 ms), pribudne lem a šípka sa posunie. */
html[data-tema^="21"] .ox-produkt { transition: box-shadow .35s var(--sk-prechod), border-color .25s var(--sk-prechod); }
html[data-tema^="21"] .ox-produkt__foto img { padding: 7% 9%; transition: transform .7s cubic-bezier(.16,1,.3,1); }
html[data-tema^="21"] .ox-produkt__telo { gap: 6px; }
html[data-tema^="21"] a.ox-produkt .ox-produkt__nazov {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
html[data-tema^="21"] a.ox-produkt .ox-produkt__nazov::after {
	content: '→'; font-family: var(--sk-font-text); font-size: 15px; font-weight: 700;
	color: var(--sk-akcent-tmavy); transform: translateX(-2px); opacity: .55;
	transition: transform .3s var(--sk-prechod), opacity .3s var(--sk-prechod);
}
html[data-tema^="21"] a.ox-produkt .ox-produkt__popis { -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; }
html[data-tema^="21"] .ox-produkt:focus-visible { outline: 2px solid var(--sk-akcent-tmavy); outline-offset: 3px; }
/* karta stojí — na VŠETKÝCH trasách rodiny; „hýbe sa obsah“ je len tam, kde je
   ukazovadlo naozaj jemné */
html[data-tema^="21"] .ox-produkt:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21"] .ox-produkt:hover .ox-produkt__foto img { transform: scale(1.06); }
	html[data-tema^="21"] a.ox-produkt:hover .ox-produkt__nazov::after { transform: translateX(6px); opacity: 1; }
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto::after {
		content: ''; position: absolute; inset: 0; pointer-events: none;
		box-shadow: inset 0 0 0 0 rgba(255, 0, 29,0);
		transition: box-shadow .15s var(--sk-prechod);
	}
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:hover .ox-produkt__foto::after,
	html[data-tema^="21"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt:focus-visible .ox-produkt__foto::after {
		box-shadow: inset 0 0 0 1px rgba(255, 0, 29,.55);
	}
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-produkt__foto img { transition: none; }
}

/* --- 9) KAPITOLA 04 — dôvody: 6 panelov → TYPOGRAFICKÝ INDEX ----------------
   Zanikajú naraz dva problémy: klišé šiestich škatúľ aj zdvojená mriežka
   s krokmi o sekciu nižšie. JEDEN stĺpec, nie dva — dvojstĺpec sa aj po zrušení
   rámov stále číta ako mriežka šiestich. */
html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-mriezka--3 {
	display: block; counter-reset: dovod; border-top: 1px solid var(--sk-linka);
}
html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel {
	position: relative;
	display: grid; grid-template-columns: clamp(46px, 5vw, 86px) minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(12px, 3vw, 54px); align-items: baseline;
	padding: clamp(18px, 2.3vw, 32px) 0; border-bottom: 1px solid var(--sk-linka);
	background: none; box-shadow: none; border-radius: 0;
}
html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel::before {
	counter-increment: dovod; content: counter(dovod, decimal-leading-zero);
	font-family: var(--sk-font-text); font-size: clamp(13px, 1.1vw, 16px); font-weight: 700;
	letter-spacing: .16em; color: var(--sk-akcent-tmavy); font-variant-numeric: tabular-nums;
	transition: transform .35s var(--sk-prechod);
}
html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel .ox-h3 {
	font-size: clamp(24px, 3.1vw, 44px); line-height: 1.06; margin: 0;
	transition: color .35s var(--sk-prechod);
}
html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel p {
	font-size: 15px; line-height: 1.6; max-width: 46ch; margin: 0;
}
html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel::after {
	content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
	background: var(--sk-akcent); transition: width .5s var(--sk-prechod);
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel:hover::after { width: 100%; }
	html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel:hover::before { transform: translateX(6px); }
	html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel:hover .ox-h3 { color: var(--sk-akcent-tmavy); }
}
@media (max-width: 900px) {
	html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel {
		grid-template-columns: clamp(34px, 9vw, 48px) minmax(0, 1fr); gap: 6px clamp(10px, 3vw, 18px);
	}
	html[data-tema^="21"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel p {
		grid-column: 2; max-width: none;
	}
}

/* --- 10) KAPITOLA 05 — tri kroky: iný raster než dôvody (schody) ------------- */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-kroky .ox-mriezka--3 {
	grid-template-columns: 1.22fr 1fr 1fr;
	column-gap: clamp(24px, 5vw, 82px); row-gap: clamp(30px, 4vw, 56px); align-items: start;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok {
	background: none; box-shadow: none; border-radius: 0; overflow: visible;
	padding: 18px 0 0; border-top: 2px solid var(--akt-krok-linka, var(--sk-atrament));
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok__cislo {
	position: static; display: block; opacity: 1; pointer-events: none;
	font-size: clamp(56px, 7vw, 110px); line-height: .86; margin: 0 0 10px;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok__foto {
	height: auto; aspect-ratio: 4 / 3; margin-bottom: 14px;
	background: #fff; box-shadow: none; border-radius: 0;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok__foto img {
	max-height: none; width: 100%; height: 100%; object-fit: contain; padding: 4% 8%;
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok h3 {
	font-size: clamp(20px, 2.1vw, 30px); line-height: 1.12;
}
@media (min-width: 901px) {
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok:nth-child(2) { margin-top: clamp(24px, 3.4vw, 60px); }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok:nth-child(3) { margin-top: clamp(48px, 6.8vw, 120px); }
}
@media (max-width: 900px) {
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-kroky .ox-mriezka--3 { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok { margin-top: 0; }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok__cislo { font-size: clamp(46px, 12vw, 64px); }
}

/* --- 11) ZÁVEREČNÝ PRAH pod krokmi ------------------------------------------
   `pripravAkt2()` PRESUNIE (neklonuje) existujúci odkaz „Celý sortiment →“ z hlavičky
   sekcie sem — odkaz dnes pláva 35 px pod účiarou H2 ako chyba a stránka nemá
   posledný krok pred pätou. Štýl `.ox-hlava-sekcie > .ox-btn--tiche` (13 px
   uppercase) sem už nedosiahne — je to pravidlo s priamym potomkom. */
html[data-tema^="21"] .ox-21-prah {
	margin-top: clamp(34px, 4.4vw, 68px);
	border-top: 1px solid var(--sk-linka); border-bottom: 1px solid var(--sk-linka);
}
html[data-tema^="21"] .ox-21-prah__odkaz.ox-btn {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	width: 100%; min-height: 104px; padding: 0; margin: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	color: var(--sk-text); text-transform: var(--sk-nadpis-transform);
	font-family: var(--sk-font-nadpis); font-weight: 400;
	font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: var(--sk-nadpis-spacing);
	transition: color .24s var(--sk-prechod);
}
html[data-tema^="21"] .ox-21-prah__sip {
	font-family: var(--sk-font-text); font-size: 28px; line-height: 1; flex: 0 0 auto;
	color: var(--sk-akcent-tmavy);
	transition: transform .24s var(--sk-prechod);
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21"] .ox-21-prah__odkaz.ox-btn:hover { background: none; color: var(--sk-akcent-tmavy); }
	html[data-tema^="21"] .ox-21-prah__odkaz.ox-btn:hover .ox-21-prah__sip { transform: translateX(10px); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-21-prah__sip { transition: none; }
}

/* --- 12) PÄTA ako posledná obrazovka -----------------------------------------
   387 px (43 % okna) → 760–860 px. Mriežku POVINNE pripnúť na 3 stopy: základ
   má `repeat(auto-fit, minmax(190px,1fr))` a v kombinácii s `grid-column:1/-1`
   na prvom stĺpci by vznikli fantómové prázdne stopy a stĺpce by sa stlačili
   doľava. Tri je správne číslo (Obchod / Informácie / Účet). */
html[data-tema^="21"] #ox-pata {
	margin-top: 0; position: relative;
	padding-block: clamp(84px, 10vw, 140px) 34px;
	--akt-sev: clamp(48px, 5.4vw, 104px);
}
/* Šev: biela do červenej neprechádza hranou, ale strihom. Tvar dodáva TÉMA cez
   `--akt-sev-tvar`, tu je len mechanizmus a neutrálna diagonála. */
html[data-tema^="21"] #ox-pata::before {
	content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--akt-sev));
	height: var(--akt-sev); background: var(--sk-pata-bg); pointer-events: none;
	clip-path: var(--akt-sev-tvar, polygon(0 100%, 100% 0, 100% 100%));
	-webkit-mask: var(--akt-sev-maska, none); mask: var(--akt-sev-maska, none);
}
html[data-tema^="21"] .ox-pata__mriezka {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3vw, 44px);
}
/* Obrí wordmark z EXISTUJÚCEHO <h4> — žiadny `content:`, text ostáva pre
   čítačky aj vyhľadávače. Odsek pod ním má INLINE štýl z `app.js`. */
html[data-tema^="21"] .ox-pata__stlpec:first-child {
	grid-column: 1 / -1; margin-bottom: clamp(26px, 4vw, 58px);
}
html[data-tema^="21"] .ox-pata__stlpec:first-child h4 {
	font-size: clamp(46px, 9.2vw, 132px); line-height: .86; letter-spacing: -.02em;
	text-transform: var(--sk-nadpis-transform); margin: 0 0 clamp(14px, 1.6vw, 22px);
	opacity: 1;
}
html[data-tema^="21"] .ox-pata__stlpec:first-child p {
	font-size: 17px !important; opacity: .9 !important; max-width: 44ch !important;
	line-height: 1.6; margin: 0;
}
/* Hierarchia naruby: návestia stĺpcov stlmiť, odkazy zosilniť. */
html[data-tema^="21"] .ox-pata__stlpec:not(:first-child) h4 {
	font-size: 12px; letter-spacing: .16em; opacity: .62;
	padding-bottom: 10px; margin-bottom: 16px;
	border-bottom: 1px solid rgba(255,255,255,.18);
}
html[data-tema^="21"] .ox-pata__stlpec ul { font-size: 17px; gap: 11px; }
html[data-tema^="21"] #ox-pata a { opacity: .92; }
/* ⚠️ Hover z jadra je `color: var(--sk-akcent)` = #D60019 na #920011 — takmer
   nečitateľné. Prebíjame na bielu s podčiarknutím. */
html[data-tema^="21"] #ox-pata a:hover {
	opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 5px;
}
html[data-tema^="21"] .ox-pata__spodok {
	margin-top: clamp(40px, 5vw, 72px); opacity: 1;
	font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
	color: #fff;                       /* AA aj na #D60019 (4.95:1) — tlmená biela by padla pod 4.5 */
}
/* vývojová poznámka — zmazať ju smie len majiteľ `app.js`; hierarchiu robí veľkosť, nie opacita */
html[data-tema^="21"] .ox-pata__spodok span:last-child {
	font-size: 11.5px; letter-spacing: 0; text-transform: none; color: #fff;
}
@media (max-width: 700px) {
	html[data-tema^="21"] .ox-pata__mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-pata__stlpec:first-child h4 { font-size: clamp(40px, 13vw, 64px); }
}
@media (max-width: 460px) {
	html[data-tema^="21"] .ox-pata__mriezka { grid-template-columns: minmax(0, 1fr); }
}

/* --- 13) ZRNO: materiálovosť robí jedna celoplošná vrstva, nie tiene na kartách
   z-index 5 = pod hlavičkou (60), pod `.ox-vpopup` a hlboko pod `#ox-toasty`
   (2147483000). Opacita ≤ .05, inak zašpiní 13 px texty. Hrdina má vlastnú
   zrnovú vrstvu, preto sa táto vešia na dejstvo, nie na `body`. ------------- */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show))::after {
	content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none;
	opacity: var(--sk-msr-zrno, .04);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 160px 160px;
}

/* --- 14) PRECHOD TRÁS -------------------------------------------------------
   ⚠️ NIKDY neanimovať `transform` ani `clip-path` na `#ox-obsah` — obe vyrobia
   containing block a na 320 ms rozhodia `position:fixed/sticky` potomkov
   (hlavička, mini-košík, pripnutý vizuál). Preto LEN opacity. */
@keyframes ox21-prichod { from { opacity: 0; } to { opacity: 1; } }
html[data-tema^="21"] #ox-obsah.ox-21-prichod { animation: ox21-prichod .32s var(--sk-prechod) both; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] #ox-obsah.ox-21-prichod { animation: none; }
}

/* --- 15) STAVY: farby mimo palety von, skeleton namiesto bodiek -------------
   Prebíjame v rodine, NIKDY v `_zaklad.css` (zdieľa ho 20 cudzích návrhov).
   Zelený toast vyskočí hneď po prvom „Pridané do košíka“ — presne keď sa
   porota pozerá. */
html[data-tema^="21"] .ox-toast--ok {
	background: var(--sk-atrament); color: #fff; border-left: 3px solid var(--sk-akcent);
}
html[data-tema^="21"] .ox-odznak--ok { background: var(--sk-atrament); color: #fff; }
html[data-tema^="21"] .ox-odznak--caka { background: var(--sk-ruz); color: var(--sk-atrament); }

/* Tri poskakujúce bodky → mriežka duchov s rezervovanou výškou (nulový CLS,
   nulový JS). `display: contents` nechá bodky stať sa bunkami cudzej mriežky,
   takže duchovia majú PRESNE šírku budúcich kariet. */
@keyframes ox21-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
html[data-tema^="21"] .ox-mriezka > .ox-nacitanie { display: contents; }
html[data-tema^="21"] .ox-mriezka > .ox-nacitanie .ox-nacitanie__bod {
	width: auto; height: auto; border-radius: var(--sk-r-velky);
	aspect-ratio: 3 / 4.1; background-color: rgba(255,217,214,.42);
	background-image: linear-gradient(100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 78%);
	background-size: 220% 100%; background-repeat: no-repeat;
	animation: ox21-shimmer 1.4s linear .25s infinite both;
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-mriezka > .ox-nacitanie .ox-nacitanie__bod { animation: none; background-image: none; }
}

/* --- 16) užšie okná pre kapitolu 01 a 02 ------------------------------------ */
@media (max-width: 1000px) {
	.ox-show__mriezka { grid-template-columns: 1fr; }
	.ox-show__vizual .ox-vh__vizual { height: clamp(260px, 60vw, 420px); padding-bottom: 44px; }
	.ox-show__b2b { grid-template-columns: 1fr; }
	.ox-show__cesta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__mriezka { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__vizual { position: static; }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta li:nth-child(odd) { border-left: 0; padding-left: 0; }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__cesta li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: clamp(16px, 1.8vw, 24px); }
}
@media (max-width: 620px) {
	.ox-show__fakty { grid-template-columns: 1fr; }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt > span { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__akcie .ox-btn { flex: 1 1 100%; }
	html[data-tema^="21"] .ox-21-prah__odkaz.ox-btn { min-height: 88px; }
}

/* --- 17) KAPITOLA 01 — Three.js scéna „bobule okolo pohárov“ ----------------
   Rešerš 14. 9. 2026 (SOTD: Palmo, STILL., La Revoltosa, /zeroz): award drink
   weby nesú 3D objekt CEZ CELÚ stránku. Motor `msrThree` vloží `.ox-msr__three`
   ako prvé dieťa pripnutého vizuálu; plátno ide NAD fotku (priehľadné, bez
   udalostí) — bobule krúžia pred pohármi po obvode a fakt v optickej osi okna
   im dá formáciu (partitúra `scenaAkt2` v 21-showroom.js). Len ≥ 1001 px. */
html[data-tema^="21"] .ox-show__vizual { isolation: isolate; }
html[data-tema^="21"] .ox-show__vizual .ox-msr__three { z-index: 2; opacity: 1; }
html[data-tema^="21"] .ox-show__vizual .ox-vh__vizual { z-index: 1; }

/* --- 18) ŠVY MEDZI PLOCHAMI — tvar dodáva téma ------------------------------
   La Revoltosa strihá červenú vlnou, Palmo oblúčikmi; rovná hrana je šablóna.
   Mechanizmus je tu, TVAR v téme cez premenné:
     --akt-sev-b2b        výška šva B2B dosky (0 = bez šva)
     --akt-sev-b2b-tvar   clip-path polygón (diagonála, schody)
     --akt-sev-b2b-maska  mask-image (oblúk, oblúčiky) — alternatíva k polygónu
     --akt-sev / --akt-sev-tvar / --akt-sev-maska   to isté pre pätu (#ox-pata::before)
   Horný šev rastie NAD dosku, spodný je ten istý tvar prevrátený. Farba je
   `background: inherit`, sedí aj so stmavením `.ox-21-doska--jasna`. Doska
   musí mať PLNÚ farbu (gradient by sa v pseudo-prvku začal odznova = švík). */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b { position: relative; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b::before,
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b::after {
	content: ''; position: absolute; left: 0; right: 0; height: var(--akt-sev-b2b, 0px);
	background: inherit; pointer-events: none; z-index: 1;
	clip-path: var(--akt-sev-b2b-tvar, none);
	-webkit-mask: var(--akt-sev-b2b-maska, none); mask: var(--akt-sev-b2b-maska, none);
}
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b::before { top: calc(1px - var(--akt-sev-b2b, 0px)); }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b::after { bottom: calc(1px - var(--akt-sev-b2b, 0px)); transform: scaleY(-1); }

/* Nálepka „Partnerská prevádzka“ (17. 9. 2026): v bunke krokov 01–04, pri
   spodnom pravom okraji (kroky sú align-items: start, nálepka align-self: end —
   ľavý stĺpec s tlačidlami je vyšší, takže pod krokmi ostáva miesto). Kruh
   z JPG s bielymi rohmi = border-radius 50 % + tieň; natočená ako prilepená,
   pri hoveri sa „odlepí“. Na jednom stĺpci (≤ 1000 px) sa radí pod kroky. */
/* ⚠️ Explicitne umiestnená nálepka by AUTOMATICKY radené kroky vytlačila do
   2. riadku (bunka 2/1 už obsadená) → kroky dostávajú tú istú bunku natvrdo a
   držia sa hore (21g mala align-self: center — pod nimi by nálepka nemala miesto). */
html[data-tema^="21"] .ox-show__b2b > .ox-show__cesta { grid-column: 2; grid-row: 1; align-self: start; }
.ox-show__nalepka {
	grid-column: 2; grid-row: 1; align-self: end; justify-self: end;
	width: clamp(160px, 14vw, 240px); aspect-ratio: 1;
	/* riadok má výšku ľavého stĺpca (~440 px), kroky ~200 px: nálepka sa preto
	   spustí o kus do spodného odsadenia panelu (padding-block ≥ 56 px), aby sa
	   kariet nedotýkala ani pri 1180 px */
	margin: 0 clamp(0px, 1vw, 12px) clamp(-58px, -3vw, -20px) 0;
	border-radius: 50%; overflow: hidden; position: relative; z-index: 2;
	box-shadow: 0 18px 40px rgba(60, 0, 0, .38), 0 2px 0 rgba(255,255,255,.35) inset;
	transform: rotate(-7deg);
	transition: transform .55s var(--sk-prechod), box-shadow .55s var(--sk-prechod);
	will-change: transform;
}
.ox-show__nalepka img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ox-show__nalepka:hover { transform: rotate(-2deg) scale(1.05); box-shadow: 0 28px 56px rgba(60, 0, 0, .45), 0 2px 0 rgba(255,255,255,.35) inset; }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-show__b2b > .ox-show__cesta { grid-column: auto; grid-row: auto; }
	.ox-show__nalepka { grid-column: auto; grid-row: auto; justify-self: center; width: clamp(160px, 44vw, 230px); margin: 4px 0 0; transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-show__nalepka { transition: none; } }

/* --- 18b) MARŽA, FAQ, ZAVOLÁME VÁM (17. 9. 2026) -------------------------------
   Marža = jedna zvýraznená veta pod leadom sekcie 02 (biela na červenej doske).
   FAQ = natívne <details>, linky ako fakty sekcie 01, šípka otočí sa pri open.
   Zavoláme vám = červená doska ako B2B, vľavo text, vpravo formulár na bielej. */
.ox-show__marza {
	margin: 0 0 clamp(18px, 2vw, 26px); padding: 14px 18px; border-radius: 14px;
	background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; line-height: 1.5; max-width: 46ch;
	border: 1px solid rgba(255, 255, 255, .28);
}
.ox-show__marza b { color: #fff; font-weight: 700; }
.ox-kalk-pozn-host { max-width: 62ch; margin: -6px 0 18px; color: var(--sk-text-tlmeny); font-size: 15px; line-height: 1.55; }
.ox-kalk-pozn-host a { color: var(--sk-akcent-tmavy); font-weight: 700; }

.ox-faq__zoznam { border-top: 1px solid var(--sk-linka); max-width: 860px; }
.ox-faq__polozka { border-bottom: 1px solid var(--sk-linka); }
.ox-faq__otazka {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: clamp(16px, 1.8vw, 24px) 0; font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform);
	font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; color: var(--sk-text);
}
.ox-faq__otazka::-webkit-details-marker { display: none; }
.ox-faq__otazka:hover { color: var(--sk-akcent-tmavy); }
.ox-faq__sip { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--sk-akcent); position: relative; transition: transform .35s var(--sk-prechod), background .35s var(--sk-prechod); }
.ox-faq__sip::before, .ox-faq__sip::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--sk-akcent); transform: translate(-50%, -50%); }
.ox-faq__sip::before { width: 12px; height: 2px; }
.ox-faq__sip::after { width: 2px; height: 12px; transition: transform .35s var(--sk-prechod); }
.ox-faq__polozka[open] .ox-faq__sip { background: var(--sk-akcent); }
.ox-faq__polozka[open] .ox-faq__sip::before, .ox-faq__polozka[open] .ox-faq__sip::after { background: #fff; }
.ox-faq__polozka[open] .ox-faq__sip::after { transform: translate(-50%, -50%) rotate(90deg); }
.ox-faq__odpoved { padding: 0 60px clamp(16px, 1.8vw, 24px) 0; max-width: 70ch; }
.ox-faq__odpoved p { margin: 0; color: var(--sk-text-tlmeny); font-size: 16px; line-height: 1.6; }

.ox-zavolame__doska {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center;
	padding: clamp(28px, 4vw, 56px); border-radius: 26px; color: #fff;
	background: linear-gradient(150deg, #D60019 0%, #B70015 52%, #8E0010 100%);
	box-shadow: 0 34px 64px -34px rgba(120, 0, 14, .85), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.ox-zavolame__text .ox-oko { color: rgba(255, 255, 255, .9); }
.ox-zavolame__text .ox-h2 { color: #fff; }
.ox-zavolame__text .ox-h2 em { color: var(--sk-ruz, #FFD9D6); font-style: normal; }
.ox-zavolame__text .ox-lead { color: rgba(255, 255, 255, .92); max-width: 44ch; }
.ox-zavolame__alt { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14.5px; }
.ox-zavolame__alt a { color: #fff; font-weight: 700; }
.ox-zavolame__form { display: grid; gap: 12px; padding: clamp(18px, 2vw, 28px); border-radius: 18px; background: #fff; color: var(--sk-text); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); }
.ox-zavolame__pole { display: grid; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
.ox-zavolame__pole em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ox-zavolame__pole input { width: 100%; box-sizing: border-box; font: 500 16px/1.3 var(--sk-font-text); padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--sk-linka); background: #fff; color: var(--sk-text); }
.ox-zavolame__pole input:focus { outline: none; border-color: var(--sk-akcent); box-shadow: 0 0 0 3px rgba(255, 0, 29, .15); }
.ox-zavolame__pasca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ox-zavolame__form .ox-btn { width: 100%; justify-content: center; margin-top: 4px; }
.ox-zavolame__stav { margin: 0; min-height: 1.3em; font-size: 14px; color: var(--sk-text-tlmeny); }
.ox-zavolame__stav--ok { color: #0a7a2f; font-weight: 700; }
.ox-zavolame__stav--chyba { color: var(--sk-akcent-tmavy); font-weight: 700; }
@media (max-width: 900px) {
	.ox-zavolame__doska { grid-template-columns: minmax(0, 1fr); }
	.ox-faq__odpoved { padding-right: 0; }
}

/* Film prípravy: skutočné video na výšku (9:16) + popisy krokov; záloha = 4 AI zábery s nájazdom */
.ox-priprava__javisko--video { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.ox-priprava__film.ox-priprava__film--video { aspect-ratio: 9 / 16; height: min(78vh, 720px); width: auto; margin-inline: auto; background: #1a0503; }
.ox-priprava__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ox-priprava__film--video .ox-priprava__cas i { transition: none; }
.ox-priprava__javisko--video .ox-priprava__kroks { align-self: center; }
@media (max-width: 900px) { .ox-priprava__film.ox-priprava__film--video { height: min(70vh, 600px); } }
/* Film prípravy: 4 zábery, prelínanie + Ken Burns nájazd, popisy krokov vpravo */
.ox-priprava__javisko { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.ox-priprava__film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: #2a0703; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); isolation: isolate; }
.ox-priprava__zaber { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1.1s var(--sk-prechod); will-change: opacity, transform; }
.ox-priprava__zaber--akt { opacity: 1; animation: ox-priprava-najazd 6.5s ease-out forwards; }
@keyframes ox-priprava-najazd { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.ox-priprava--stoji .ox-priprava__zaber--akt { animation: none; transform: scale(1.02); }
.ox-priprava__cas { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); overflow: hidden; z-index: 2; }
.ox-priprava__cas i { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; }
.ox-priprava__kroky { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ox-priprava__krok { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--sk-linka); background: var(--sk-povrch, #fff); cursor: pointer; opacity: .55; transition: opacity .35s var(--sk-prechod), transform .35s var(--sk-prechod), border-color .35s var(--sk-prechod), box-shadow .35s var(--sk-prechod); }
.ox-priprava__krok:hover { opacity: .85; }
.ox-priprava__krok--akt { opacity: 1; transform: translateX(6px); border-color: var(--sk-akcent); box-shadow: 0 14px 30px -18px rgba(255, 0, 29, .45); }
.ox-priprava__cislo { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sk-akcent); color: #fff; font-family: var(--sk-font-nadpis); font-size: 18px; }
.ox-priprava__krok b { font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform); font-size: 20px; line-height: 1.1; }
.ox-priprava__krok small { display: block; color: var(--sk-text-tlmeny); font-size: 14px; line-height: 1.45; margin-top: 4px; }
/* sekcia je na svetlom podklade témy → biele karty, tmavý text, aktívna s červeným rámom (bez 21g prepisu) */
.ox-priprava__krok { background: #fff; color: var(--sk-text); }
@media (max-width: 900px) { .ox-priprava__javisko { grid-template-columns: minmax(0, 1fr); } .ox-priprava__krok--akt { transform: none; } }

/* --- 19) ZÁCLONA PRECHODU TRÁS ----------------------------------------------
   Porota hodnotí najmä MEDZERU medzi stránkami. Namiesto holého fade: doska
   vo farbe témy vybehne zdola (260 ms), pod ňou sa vymení obsah a posunie
   okno, potom odíde nahor (480 ms). Vlastný prvok v <body> — NIKDY transform
   na #ox-obsah (rozbil by sticky hlavičku aj pin). Pod hlavičkou (74 px),
   nad mini-košíkom (55), pod hlavičkou (60). Bez pohybu: prvok sa nepoužije. */
.ox-21-zaclona {
	position: fixed; left: 0; right: 0; top: calc(var(--ox-lista, 0px) + 74px); bottom: 0; z-index: 58;
	background: var(--sk-akcent); color: #fff; pointer-events: none;
	display: grid; place-items: center; overflow: hidden;
	transform: translateY(101%); will-change: transform;
	transition: transform .48s cubic-bezier(.76, 0, .24, 1);
}
.ox-21-zaclona::after {
	content: 'OXO'; font-family: var(--sk-font-display); font-weight: 400;
	font-size: clamp(64px, 16vw, 240px); line-height: 1; letter-spacing: -.02em;
	text-transform: uppercase; opacity: .16;
}
/* v pokoji neviditeľná (fixed prvok pod oknom by inak vidno na celostránkových snímkach a stál by paint) */
.ox-21-zaclona { visibility: hidden; }
.ox-21-zaclona--kryje, .ox-21-zaclona--odchadza { visibility: visible; }
.ox-21-zaclona--kryje { transform: none; transition-duration: .26s; }
.ox-21-zaclona--odchadza { transform: translateY(-101%); transition-duration: .48s; }
.ox-21-zaclona--skok { transition: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-21-zaclona { display: none; } }

/* --- 20) ÚVODNÉ VIDEO „MY SME BUBBLE TEA“ (nad hrdinom, celá vetva 21) --------
   Peter 14. 9.: „pri skrole veľká červená medzera zbytočná“ (bola to pripnutá
   sekcia 175svh + wipe) a „video má vľavo/vpravo malý okraj“ (contain na
   širšom okne). Preto:
     · úvod je PRIPNUTÝ (sticky) v obale `.ox-uvod-obal` spolu s hrdinom a
       hrdina ho pri skrole PREKRYJE zdola (cover) — žiadna extra výška,
       žiadna doska; obal je zároveň hranica pripnutia, takže úvod nikdy
       nepodlieza neskoršie sekcie s priesvitným pozadím,
     · na desktope má úvod presne pomer videa (56,25 vw) a video je `cover`
       → celé, bez okrajov; na mobile 100svh cover,
     · `--uvod-p` = koľko výšky úvodu už hrdina zakryl: slová sa rozletia
       a zbleднú, video sa mierne zmenší a stmavne (hĺbka pod prekrytím).
   Slová vletia z rotateX(90°) so staggerom 60 ms (prompt „GSAP ScrollTrigger
   3D reveal“). Video 512×288: zrno zakryje mäkkosť. Bez pohybu (`--stoji`):
   slová stoja, poster. */
html[data-tema^="21"] .ox-uvod-obal { position: relative; }
html[data-tema^="21"] .ox-uvod-obal > .ox-msr { position: relative; z-index: 1; }
html[data-tema^="21"] .ox-uvod {
	position: sticky; top: 0; z-index: 0;
	height: 100svh; height: 100dvh; margin: 0; padding: 0;
	background: #8E0010; color: #fff; --uvod-p: 0;
}
@media (min-width: 701px) {
	/* 16:9, ale nikdy vyššie než okno — na Macu (1512/1728 px, iné DPI) bolo video neúmerne veľké */
	html[data-tema^="21"] .ox-uvod { height: min(56.25vw, calc(100svh - 96px), 900px); }
}
html[data-tema^="21"] .ox-uvod__scena {
	position: relative; height: 100%; overflow: hidden;
	display: grid; place-items: center; isolation: isolate; background: #8E0010;
}
html[data-tema^="21"] .ox-uvod__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
	background: #8E0010;
	filter: saturate(1.06) brightness(calc(1 - var(--uvod-p) * .55));
	/* ŽIADNE zmenšovanie pri prekrývaní — odkrývalo by okraj zeme okolo videa (Peter: „malý okraj“) */
	will-change: filter;
}
/* jemný scrim len pod textom (čitateľnosť), nič nezakrýva */
html[data-tema^="21"] .ox-uvod__scena::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(70% 40% at 50% 52%, rgba(140, 0, 16,.28) 0%, rgba(140, 0, 16,0) 100%);
}
html[data-tema^="21"] .ox-uvod__zrno {
	/* 15. 9. 2026: video je už 1080p (ESRGAN) — zrno nemusí kryť mäkkosť, ostáva len jemná textúra .05 */
	position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 180px 180px;
}
html[data-tema^="21"] .ox-uvod__nadpis {
	position: relative; z-index: 3; margin: 0; padding: 0 5vw; text-align: center;
	font-family: var(--sk-font-display); font-weight: 400; text-transform: uppercase;
	font-size: clamp(48px, 11.8vw, 188px); line-height: .9; letter-spacing: -.012em;
	color: #fff; text-shadow: 0 .04em .12em rgba(140, 0, 16,.4);
	perspective: 1000px; perspective-origin: 50% 50%;
	opacity: calc(1 - clamp(0, var(--uvod-p) / .55, 1));
	will-change: opacity;
}
html[data-tema^="21"] .ox-uvod__riadok { display: block; will-change: transform; }
html[data-tema^="21"] .ox-uvod__riadok:nth-child(1) { transform: translate(calc(var(--uvod-p) * -14vw), calc(var(--uvod-p) * -18vh)) rotate(calc(var(--uvod-p) * -4deg)); }
html[data-tema^="21"] .ox-uvod__riadok:nth-child(2) { transform: translate(calc(var(--uvod-p) * 14vw), calc(var(--uvod-p) * -8vh)) rotate(calc(var(--uvod-p) * 3deg)); }
html[data-tema^="21"] .ox-uvod__slovo { display: inline-block; white-space: nowrap; }
/* 15. 9. 2026 Peter: nadpis sa VYPISUJE písmeno po písmene (uvodZapoj), začne po 1 s.
   Písmeno je skryté, kým nedostane --je; kurzor bliká za posledným napísaným. */
html[data-tema^="21"] .ox-uvod__pismeno {
	display: inline-block; transform-origin: 50% 100%;
	opacity: 0; transform: translateY(.18em) scale(.9);
	transition: transform .34s cubic-bezier(.16, 1, .3, 1), opacity .14s ease-out;
}
html[data-tema^="21"] .ox-uvod__pismeno--je,
html[data-tema^="21"] .ox-uvod--stoji .ox-uvod__pismeno { opacity: 1; transform: none; }
html[data-tema^="21"] .ox-uvod__kurzor {
	display: inline-block; width: .07em; height: .8em; margin-left: .05em; vertical-align: -.02em;
	background: #fff; border-radius: .02em; box-shadow: 0 0 .25em rgba(255, 255, 255, .7);
	animation: ox-uvod-kurzor .8s steps(2, jump-none) infinite;
}
@keyframes ox-uvod-kurzor { from { opacity: 1; } to { opacity: 0; } }
/* ⚠️ Žiadny `background-clip: text` na nadpise: potomkovia s 3D transformáciou majú vlastné
   kompozitné vrstvy a Chrome potom orezané pozadie kreslí zle (riadky sa „zliali“). */
html[data-tema^="21"] .ox-uvod--napisane .ox-uvod__nadpis { animation: ox-uvod-lesk 1.6s ease-out 0s 1 both; }
@keyframes ox-uvod-lesk {
	0% { text-shadow: 0 .04em .12em rgba(140, 0, 16,.4), 0 0 .5em rgba(255,255,255,0); }
	35% { text-shadow: 0 .04em .12em rgba(140, 0, 16,.4), 0 0 .5em rgba(255,255,255,.55); }
	100% { text-shadow: 0 .04em .12em rgba(140, 0, 16,.4), 0 0 .5em rgba(255,255,255,0); }
}
html[data-tema^="21"] .ox-uvod__hint {
	position: absolute; left: 50%; bottom: clamp(18px, 3.4vh, 34px); z-index: 3; transform: translateX(-50%);
	display: grid; justify-items: center; gap: 8px; color: #fff; text-decoration: none;
	font-family: var(--sk-font-text); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	opacity: calc(1 - var(--uvod-p) * 4);
}
html[data-tema^="21"] .ox-uvod__hint i { display: block; width: 1px; height: 44px; background: rgba(255,255,255,.7); position: relative; overflow: hidden; }
html[data-tema^="21"] .ox-uvod__hint i::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff; animation: ox-uvod-hint 1.8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ox-uvod-hint { to { top: 100%; } }
html[data-tema^="21"] .ox-uvod__hint:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
html[data-tema^="21"] .ox-uvod--stoji .ox-uvod__video { filter: none; }
html[data-tema^="21"] .ox-uvod--stoji .ox-uvod__hint i::after { animation: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-uvod__pismeno { transition: none; transform: none; opacity: 1; }
	html[data-tema^="21"] .ox-uvod__kurzor { display: none; }
	html[data-tema^="21"] .ox-uvod--napisane .ox-uvod__nadpis { animation: none; }
	html[data-tema^="21"] .ox-uvod__hint i::after { animation: none; }
}
@media (max-width: 700px) {
	html[data-tema^="21"] .ox-uvod__video { object-position: 50% 45%; }
	html[data-tema^="21"] .ox-uvod__nadpis { font-size: clamp(48px, 16.7vw, 106px); line-height: .92; }
	html[data-tema^="21"] .ox-uvod__riadok:nth-child(1) { transform: translate(calc(var(--uvod-p) * -10vw), calc(var(--uvod-p) * -14vh)); }
	html[data-tema^="21"] .ox-uvod__riadok:nth-child(2) { transform: translate(calc(var(--uvod-p) * 10vw), calc(var(--uvod-p) * -6vh)); }
}

/* --- 21) PÁSY: nikdy nezastavujú, logo pás pod videom, bez označovania ---------
   Peter 14. 9.: pás tvrdení sa na hover nesmie zastaviť; ten istý pás s tromi
   logami (OXOnewBigd, Oxo_final, Greek — ako na oxobubbletea.eu pod videom) ide
   POD úvodné video, teda na vrch bloku, ktorý video prekrýva. Označovanie textu
   v hrdinovi, úvode, pásoch a pripnutom vizuáli je vypnuté — ťah po javisku
   (koleso, prasknutie) inak modro označoval sadzbu. */
html[data-tema^="21"] .ox-msr-pas:hover .ox-msr-pas__stopa { animation-play-state: running; }
html[data-tema^="21"] .ox-uvod-obal > .ox-uvod-pas { position: relative; z-index: 1; }
/* Peter 14. 9.: „logá väčšie a pozadie červené“ */
html[data-tema^="21"] .ox-uvod-pas {
	background: var(--sk-akcent); color: #fff; padding: 0;
	border-top: 1px solid rgba(255,255,255,.14);
}
html[data-tema^="21"] .ox-uvod-pas .ox-msr-pas__stopa { align-items: center; }
html[data-tema^="21"] .ox-uvod-pas__logo {
	display: inline-flex; align-items: center; gap: 0; height: clamp(96px, 9.5vw, 136px);
	padding-inline: clamp(28px, 3.6vw, 64px); font-size: 0;
}
html[data-tema^="21"] .ox-uvod-pas__logo img { height: clamp(64px, 6.4vw, 92px); width: auto; display: block; }
html[data-tema^="21"] .ox-uvod-pas__logo::after { width: 9px; height: 9px; margin-left: clamp(28px, 3.6vw, 64px); background: #fff; opacity: .9; }
html[data-tema^="21"] .ox-uvod, html[data-tema^="21"] .ox-uvod-pas,
html[data-tema^="21"] .ox-msr, html[data-tema^="21"] .ox-msr-pas,
html[data-tema^="21"] .ox-show__vizual, html[data-tema^="21"] .ox-21-prah, html[data-tema^="21"] .ox-21-zaclona {
	-webkit-user-select: none; user-select: none;
}
html[data-tema^="21"] .ox-msr img, html[data-tema^="21"] .ox-uvod img, html[data-tema^="21"] .ox-uvod-pas img { -webkit-user-drag: none; user-drag: none; }
html[data-tema^="21"] .ox-msr input, html[data-tema^="21"] .ox-msr textarea { -webkit-user-select: text; user-select: text; }

/* --- 22) CUDZIE TRASY: remeslo katalógu, detailu a B2B (14. 9. 2026) ------------
   Rovnaký rukopis ako domov: galéria detailu s pomalým priblížením fotky,
   cena v tmavšom akcente, drobnopis meta v mono rytme, filtre ako pilulky
   s jasným aktívnym stavom, tmavé plochy = tmavšia červená (nikdy čierna). */
html[data-tema^="21"] .ox-detail__galeria { overflow: hidden; }
html[data-tema^="21"] .ox-detail__galeria img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21"] .ox-detail__galeria:hover img { transform: scale(1.045); }
}
html[data-tema^="21"] .ox-detail__info .ox-h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; }
html[data-tema^="21"] .ox-cena { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-detail__meta { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-detail__meta b { color: var(--sk-text); }
html[data-tema^="21"] .ox-detail__popis h3 { font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform); letter-spacing: var(--sk-nadpis-spacing); }
html[data-tema^="21"] #ox-filtre .ox-chip, html[data-tema^="21"] #ox-znacky .ox-chip {
	border-radius: 999px; padding: 8px 14px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
	transition: background .2s var(--sk-prechod), color .2s var(--sk-prechod), border-color .2s var(--sk-prechod);
}
html[data-tema^="21"] #ox-filtre .ox-chip[aria-pressed="true"], html[data-tema^="21"] #ox-znacky .ox-chip[aria-pressed="true"],
html[data-tema^="21"] #ox-filtre .ox-chip.je-aktivny, html[data-tema^="21"] #ox-znacky .ox-chip.je-aktivny {
	background: var(--sk-atrament); color: #fff; border-color: var(--sk-atrament);
}
html[data-tema^="21"] .ox-sek--tmava { background: #8C0010; }
html[data-tema^="21"] .ox-sek--tmava .ox-btn--hlavne { background: #fff; color: #8C0010; border-color: #fff; }
html[data-tema^="21"] .ox-hero__vizual img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21"] .ox-hero__vizual:hover img { transform: scale(1.03); }
}

/* --- 23) KOŠÍK a POKLADŇA: remeslo (14. 9. 2026) ------------------------------
   Prázdny stav bez emoji (na headless/starších systémoch = prázdny štvorec):
   ikona zo sady SVG. Riadky košíka vzdušnejšie, väčšia fotka, názov v písme
   nadpisov, „Odstrániť“ ako tichý vlasový odkaz, súčet v tmavšom akcente,
   kroky pokladne ako číslovaná linka (aktívny plný akcent). */
html[data-tema^="21"] .ox-prazdne__ikona {
	font-size: 0; line-height: 0; width: 88px; height: 88px; margin: 0 auto 18px;
	background: url(img/ikona-600ml.svg) center / contain no-repeat; opacity: .9;
}
html[data-tema^="21"] .ox-prazdne .ox-h3 { font-size: clamp(26px, 3vw, 40px); }
html[data-tema^="21"] .ox-riadok { grid-template-columns: clamp(84px, 8vw, 112px) minmax(0, 1fr) auto; padding-block: clamp(16px, 2vw, 26px); align-items: center; gap: clamp(16px, 2vw, 28px); }
html[data-tema^="21"] .ox-riadok__foto { width: clamp(84px, 8vw, 112px); height: clamp(84px, 8vw, 112px); border-radius: var(--sk-r-stredny); background: #fff; box-shadow: var(--sk-obrys); }
html[data-tema^="21"] .ox-riadok__foto img { object-fit: contain; padding: 8%; }
html[data-tema^="21"] .ox-riadok__nazov { font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform); letter-spacing: var(--sk-nadpis-spacing); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.15; }
html[data-tema^="21"] .ox-riadok__meta { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-riadok__cena { font-family: var(--sk-font-display); font-size: clamp(20px, 1.9vw, 28px); color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-riadok .ox-btn--tiche {
	background: none; border: 0; border-bottom: 1px solid var(--sk-linka); border-radius: 0; padding: 4px 0; min-height: 0;
	font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sk-text-tlmeny);
}
html[data-tema^="21"] .ox-riadok .ox-btn--tiche:hover { color: var(--sk-akcent-tmavy); border-color: var(--sk-akcent-tmavy); background: none; }
html[data-tema^="21"] .ox-mnozstvo { border-radius: 999px; overflow: hidden; }
html[data-tema^="21"] .ox-suhrn__spolu b { color: var(--sk-akcent-tmavy); font-size: clamp(28px, 2.6vw, 38px); }
html[data-tema^="21"] .ox-suhrn .ox-h3, html[data-tema^="21"] .ox-suhrn .ox-h2 { letter-spacing: .02em; }
html[data-tema^="21"] .ox-kroky { gap: 0; border-bottom: 1px solid var(--sk-linka); padding-bottom: 0; }
html[data-tema^="21"] .ox-kroky > * { background: none !important; border-radius: 0; padding: 12px 18px 14px 0; margin-right: 22px; box-shadow: none; position: relative; color: var(--sk-text-tlmeny); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
html[data-tema^="21"] .ox-kroky > *::after { content: ''; position: absolute; left: 0; right: 22px; bottom: -1px; height: 2px; background: transparent; }
html[data-tema^="21"] .ox-kroky > .je-aktivny, html[data-tema^="21"] .ox-kroky > [aria-current], html[data-tema^="21"] .ox-kroky > .ox-krok--aktivny { color: var(--sk-text); }
html[data-tema^="21"] .ox-kroky > .je-aktivny::after, html[data-tema^="21"] .ox-kroky > [aria-current]::after, html[data-tema^="21"] .ox-kroky > .ox-krok--aktivny::after { background: var(--sk-akcent); }
html[data-tema^="21"] .ox-kroky__ciara { display: none; }
html[data-tema^="21"] .ox-krok__cislo { background: none; color: var(--sk-akcent-tmavy); font-family: var(--sk-font-display); font-size: 16px; width: auto; height: auto; margin-right: 8px; }
html[data-tema^="21"] .ox-doprava-volba { border-radius: var(--sk-r-stredny); }
html[data-tema^="21"] .ox-blok .ox-h3 { font-size: clamp(20px, 2vw, 28px); margin-bottom: 14px; }

/* --- 24) „Klikni na otvorenie“ na kartách kruhu s fotkami (14. 9. 2026) -------
   Drobný uppercase návod s krúžkom „+“; na prednej karte plný a krúžok dýcha. */
html[data-tema^="21"] .ox-msr__klik {
	/* 15. 9. 2026 Peter (Mac): „KLIKNI NA OTVORENIE“ bolo odseknuté — macOS kreslí Inter
	   širšie a pri užšom okne text s .16em prečnieval z karty (overflow hidden).
	   Teraz: menšie stopy, text v <span> sa smie zalomiť na 2 riadky, ikona sa nezmenšuje,
	   celok nikdy nepresiahne šírku tela karty. */
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px;
	max-width: 100%; box-sizing: border-box;
	font-family: var(--sk-font-text); font-weight: 700; font-size: 10px; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase;
	white-space: normal; text-align: left;
	color: var(--sk-akcent-tmavy); opacity: .7; transition: opacity .25s var(--sk-prechod);
}
html[data-tema^="21"] .ox-msr__klik > span { min-width: 0; }
html[data-tema^="21"] .ox-msr__klik i {
	flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center;
	font-style: normal; font-size: 13px; line-height: 1; position: relative;
}
html[data-tema^="21"] .ox-msr__klik i::before { content: '+'; transform: translateY(-.5px); }
html[data-tema^="21"] .ox-msr__karta--celo .ox-msr__klik { opacity: 1; }
html[data-tema^="21"] .ox-msr--pohyb .ox-msr__karta--celo .ox-msr__klik i { animation: ox-klik-dych 1.8s ease-in-out infinite; }
@keyframes ox-klik-dych { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 0, 26, .35); } 50% { box-shadow: 0 0 0 5px rgba(224, 0, 26, 0); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { html[data-tema^="21"] .ox-msr__klik i { animation: none !important; } }
html[data-tema^="21"] .ox-msr__karta--claim:hover .ox-msr__klik { opacity: 1; }

/* --- 25) KALKULAČKA ZISKU + OXO STARTER (15. 9. 2026, podľa ostrého /b2b) -----
   Biela karta s červenou hlavou, dva stĺpce (set | zisk), hodnoty sliderov v
   bunkách, výsledky v dvoch kartách (tržby ruž, zisk biela s akcentom). */
html[data-tema^="21"] .ox-kalk {
	display: block; background: #fff; border-radius: var(--sk-r-velky); overflow: hidden;
	box-shadow: var(--sk-tien), var(--sk-obrys);
}
html[data-tema^="21"] .ox-kalk__hlava { background: var(--sk-akcent-tmavy); color: #fff; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px); text-align: center; }
html[data-tema^="21"] .ox-kalk__hlava .ox-h3 { color: #fff; font-size: clamp(26px, 3vw, 40px); margin: 0 0 6px; letter-spacing: .02em; }
html[data-tema^="21"] .ox-kalk__hlava p { margin: 0; color: rgba(255,255,255,.9); font-size: 15px; }
html[data-tema^="21"] .ox-kalk__telo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3.4vw, 52px); padding: clamp(22px, 3vw, 40px); }
html[data-tema^="21"] .ox-kalk__nadpis { font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform); letter-spacing: var(--sk-nadpis-spacing); font-size: clamp(17px, 1.5vw, 21px); margin: 22px 0 10px; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-kalk__nadpis:first-child { margin-top: 0; }
html[data-tema^="21"] .ox-kalk__zoznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html[data-tema^="21"] .ox-kalk__zoznam li { padding: 10px 14px; background: rgba(255,217,214,.35); border-radius: var(--sk-r-maly); font-size: 14.5px; font-weight: 600; }
html[data-tema^="21"] .ox-kalk__pole { display: block; margin-bottom: 8px; }
html[data-tema^="21"] .ox-kalk__select { width: 100%; padding: 11px 40px 11px 14px; border: 1.5px solid var(--sk-linka); border-radius: var(--sk-r-maly); background: #fff; font: inherit; font-size: 14.5px; }
html[data-tema^="21"] .ox-kalk__select:focus-visible { outline: 2px solid var(--sk-akcent-tmavy); outline-offset: 2px; }
html[data-tema^="21"] .ox-kalk__vyber { margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--sk-akcent); background: rgba(255,217,214,.25); font-size: 14px; line-height: 1.5; color: var(--sk-text); }
html[data-tema^="21"] .ox-kalk__vyber b { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-kalk__cena { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; margin: 14px 0; text-align: center; background: rgba(255,217,214,.35); border-radius: var(--sk-r-stredny); }
html[data-tema^="21"] .ox-kalk__cena span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-kalk__cena b { font-family: var(--sk-font-display); font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-kalk .ox-btn--plne { width: 100%; }
html[data-tema^="21"] .ox-kalk__prihlas { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-kalk__prihlas a { color: var(--sk-akcent-tmavy); font-weight: 700; }
html[data-tema^="21"] .ox-kalk__pod { margin: -4px 0 16px; color: var(--sk-text-tlmeny); font-size: 14px; }
html[data-tema^="21"] .ox-kalk__slider { margin-bottom: 18px; }
html[data-tema^="21"] .ox-kalk__slider .ox-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
html[data-tema^="21"] .ox-kalk__rad { display: grid; grid-template-columns: minmax(0, 1fr) 122px; gap: 14px; align-items: center; }
html[data-tema^="21"] .ox-kalk input[type="range"] { width: 100%; accent-color: var(--sk-akcent); height: 32px; }
html[data-tema^="21"] .ox-kalk__bunka { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; background: rgba(255,217,214,.35); border: 2px solid var(--sk-ruz); border-radius: var(--sk-r-stredny); }
html[data-tema^="21"] .ox-kalk__bunka input { width: 5ch; border: 0; background: none; text-align: center; font-family: var(--sk-font-display); font-size: 26px; line-height: 1; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-kalk__bunka small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-text-tlmeny); font-weight: 700; }
html[data-tema^="21"] .ox-kalk__karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
html[data-tema^="21"] .ox-kalk__karta { display: grid; justify-items: center; gap: 2px; padding: 20px 14px; border-radius: var(--sk-r-stredny); text-align: center; }
html[data-tema^="21"] .ox-kalk__karta--trzby { background: rgba(255,217,214,.45); }
html[data-tema^="21"] .ox-kalk__karta--zisk { background: #fff; box-shadow: 0 0 0 2px var(--sk-akcent) inset; }
html[data-tema^="21"] .ox-kalk__karta-nazov { font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform); letter-spacing: var(--sk-nadpis-spacing); font-size: 18px; color: var(--sk-akcent-tmavy); margin-bottom: 8px; }
html[data-tema^="21"] .ox-kalk__karta-nazov em { font-style: normal; font-family: var(--sk-font-text); font-size: 11px; letter-spacing: .06em; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-kalk__karta b { font-family: var(--sk-font-display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1; color: var(--sk-akcent-tmavy); font-variant-numeric: tabular-nums; }
html[data-tema^="21"] .ox-kalk__karta small { font-size: 12px; color: var(--sk-text-tlmeny); margin-bottom: 10px; }
html[data-tema^="21"] .ox-kalk--strata .ox-kalk__karta--zisk b { color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-kalk__pozn { margin: 14px 0; padding: 10px 14px; border-radius: var(--sk-r-maly); background: rgba(255,217,214,.25); font-size: 12.5px; line-height: 1.5; color: var(--sk-text-tlmeny); }
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-kalk__telo { grid-template-columns: 1fr; }
	html[data-tema^="21"] .ox-kalk__karty { grid-template-columns: 1fr; }
}

/* --- užšie okná ------------------------------------------------------------- */
@media (max-width: 1000px) {
	.ox-msr__mriezka,
	.ox-msr--18-chrome .ox-msr__mriezka,
	.ox-msr--19-jukebox .ox-msr__mriezka,
	.ox-msr--20-drivein .ox-msr__mriezka,
	.ox-msr--rodina-show .ox-msr__mriezka {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "javisko" "vitrina" "panel" "lista";
	}
	.ox-msr--18-chrome .ox-msr__javisko,
	.ox-msr--18-chrome .ox-msr__vitrina { grid-area: auto; width: auto; justify-self: stretch; }
	.ox-msr--18-chrome .ox-msr__javisko { grid-area: javisko; pointer-events: auto; }
	.ox-msr--18-chrome .ox-msr__vitrina { grid-area: vitrina; }
	.ox-msr, .ox-msr--18-chrome, .ox-msr--19-jukebox, .ox-msr--20-drivein {
		min-height: 0;
		--msr-scena-v: clamp(300px, 42vh, 380px);
		--msr-karta-w: 196px;
		--msr-karta-v: 300px;
	}
	.ox-msr--rodina-show {
		min-height: 0;
		--msr-scena-v: clamp(380px, 47vh, 404px);
		--msr-karta-w: 200px;
		--msr-karta-v: 344px;
	}
	.ox-msr__panel, .ox-msr--20-drivein .ox-msr__panel, .ox-msr--rodina-show .ox-msr__panel, .ox-msr--18-chrome .ox-msr__panel {
		justify-self: stretch; max-width: none; text-align: left;
	}
	.ox-msr--20-drivein, .ox-msr--rodina-show, .ox-msr--18-chrome { --msr-panel-text: left; }
	.ox-msr--20-drivein .ox-msr__panel-akcie, .ox-msr--rodina-show .ox-msr__panel-akcie, .ox-msr--18-chrome .ox-msr__panel-akcie { justify-content: flex-start; }
	.ox-msr--18-chrome { --msr-zarovnanie: flex-start; --msr-text: left; --msr-lista: flex-start; }
}
@media (max-width: 620px) {
	.ox-msr__hint { display: none; }                 /* lišta by sa inak zalamovala */
	.ox-msr__akcie { width: 100%; }
	.ox-msr__akcie .ox-btn { flex: 1 1 100%; }       /* dve tlačidlá vedľa seba sa na 390 px lámu */
	.ox-msr__pilulka { font-size: 9.5px; letter-spacing: .14em; padding: 7px 13px; }
	.ox-msr__mriezka { gap: 14px; }
	.ox-msr-krok__cislo { font-size: 52px; }
}
@media (max-height: 700px) {
	.ox-msr { min-height: 620px; }
}
/* Nízke notebooky (1366×768, 1280×720): hrdina vetvy 21 sa musí zmestiť nad ohyb aj
   s lištou — nižšia scéna a karta, tesnejšie telo karty (text sa nesmie orezať). */
@media (max-height: 820px) and (min-width: 1001px) {
	.ox-msr--rodina-show {
		min-height: 0;
		--msr-scena-v: clamp(340px, 46vh, 366px);
		--msr-karta-w: 198px; --msr-karta-v: 314px;
	}
	.ox-msr--rodina-show .ox-msr__mriezka { padding-top: 18px; padding-bottom: 10px; row-gap: 8px; }
	.ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__foto { flex-basis: 38%; min-height: 84px; }
	.ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__telo { padding: 10px 12px 11px; gap: 3px; }
	.ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov { font-size: 13.5px; }
	.ox-msr--rodina-show .ox-msr__ktext { font-size: 11.5px; min-height: 2.6em; }
	.ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__viac { margin-top: 6px; padding-top: 4px; }
	.ox-msr--rodina-show .ox-msr__panel .ox-pv__nazov { font-size: clamp(1.4rem, 2.2vw, 2rem); }
	.ox-msr--rodina-show .ox-msr__panel-text { margin-top: 4px; }
	.ox-msr--rodina-show .ox-msr__panel-akcie { margin-top: 10px; }
	.ox-msr--rodina-show .ox-msr__lista { padding-top: 2px; }
	.ox-msr--rodina-show .ox-msr__h1 { font-size: clamp(40px, 5.6vw, 84px); }
	.ox-msr--rodina-show .ox-msr__h2 { font-size: clamp(34px, 4.6vw, 70px); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	/* Pohyb riadi trieda --pohyb (jadro zohľadnilo systém v OXO_POHYB a lišta
	   ho vie prebiť); toto je len poistka pre tlač a pre staršie prehliadače. */
	.ox-msr:not(.ox-msr--pohyb) .ox-msr-pas__stopa,
	.ox-msr:not(.ox-msr--pohyb) .ox-msr__hint i::after { animation: none; }
}

/* --- 26) HRDINA 21 (15. 9. 2026 Peter): aktívne tvrdenie vľavo (názov + dlhý text
   z popupu), panel pod kolesom preč, karty LEN symbol (bez textov) a väčšie,
   šípky ← → po bokoch otáčajúceho sa katalógu. Neskoro v súbore = vyhráva
   nad témami pri rovnakej špecifickosti. -------------------------------- */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__panel--claim { display: none; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__mriezka {
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	grid-template-areas: "javisko vitrina" "javisko vitrina" "lista lista";
}
html[data-tema^="21"] .ox-msr--rodina-show {
	--msr-scena-v: clamp(400px, 52vh, 500px); --msr-karta-w: 250px; --msr-karta-v: 300px;
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina { position: relative; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw {
	position: absolute; top: 50%; z-index: 6; transform: translateY(-50%);
	/* Peter 15. 9.: „šípky nech sú výraznejšie“ — väčšie, plná akcentová výplň s bielym
	   rámom a tieňom: čitateľné na červenej zemi aj cez svetlé krajné karty */
	width: 56px; height: 56px; border-width: 2.5px;
	background: var(--sk-akcent); border-color: #fff; color: #fff;
	box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .18);
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg { width: 20px; height: 20px; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vlavo { left: clamp(-26px, -1.6vw, -8px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vpravo { right: clamp(-26px, -1.6vw, -8px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw:hover { transform: translateY(-50%) scale(1.08); background: #fff; border-color: #fff; color: var(--sk-akcent); }
/* karta = veľký symbol + názov pod ním (Peter 15. 9.: „pod obrázky daj naspäť popis
   Bez azofarbív a pod.“), nadnadpis/popis/odkaz ostávajú skryté (témy), odznak „+“ v rohu */
html[data-tema^="21"] .ox-msr__karta--claim { position: relative; }
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__telo { display: flex !important; flex: 0 0 auto; padding: 4px 12px 14px !important; justify-content: center; align-items: center; text-align: center; }
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__nazov { font-size: 15.5px; line-height: 1.15; text-align: center; }
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__foto { flex: 1 1 auto !important; min-height: 0 !important; height: auto; aspect-ratio: auto; }
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__foto img { padding: 4% !important; object-fit: contain !important; width: 100%; height: 100%; }
html[data-tema^="21"] .ox-msr__karta--claim > .ox-msr__klik { position: absolute; right: 10px; top: 10px; margin: 0; z-index: 3; opacity: .75; }
html[data-tema^="21"] .ox-msr__karta--claim > .ox-msr__klik > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-tema^="21"] .ox-msr__karta--claim > .ox-msr__klik i { flex-basis: 26px; width: 26px; height: 26px; font-size: 17px; background: rgba(255, 255, 255, .88); }
/* sadzba vľavo: názvy tvrdení + dlhý text → o stupeň menší nadpis, lead do 46 znakov */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h1,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h2 { font-size: clamp(38px, 4.9vw, 74px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__lead { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.5; max-width: 42ch; }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__mriezka { grid-template-columns: minmax(0, 1fr); grid-template-areas: "javisko" "vitrina" "lista"; }
	html[data-tema^="21"] .ox-msr--rodina-show { --msr-scena-v: clamp(340px, 46vh, 420px); --msr-karta-w: 220px; --msr-karta-v: 260px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw { width: 44px; height: 44px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vlavo { left: 2px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vpravo { right: 2px; }
}
/* aktívna (predná) karta: symbol sa zväčší (Peter 15. 9.); predná karta bez popupu = bez kurzora ruky */
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__foto img { transition: transform .6s var(--sk-prechod); transform: scale(.86); transform-origin: 50% 55%; }
html[data-tema^="21"] .ox-msr__karta--claim.ox-msr__karta--celo .ox-msr__foto img { transform: scale(1.06); }
html[data-tema^="21"] .ox-msr__karta--claim.ox-msr__karta--celo { cursor: default; }
html[data-tema^="21"] .ox-msr__karta--claim.ox-msr__karta--celo:hover .ox-msr__foto img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__foto img { transition: none; } }
/* Peter 15. 9.: „nech je o trošku zväčšené aj to biele pozadie“ — celá predná karta
   rastie cez samostatnú vlastnosť `scale` (skladá sa s inline rotateY/translateZ kolesa) */
html[data-tema^="21"] .ox-msr__karta--claim { transition: opacity .35s var(--sk-prechod), box-shadow .35s var(--sk-prechod), scale .6s var(--sk-prechod); }
html[data-tema^="21"] .ox-msr__karta--claim.ox-msr__karta--celo { scale: 1.08; z-index: 2; }
html[data-tema^="21"] .ox-msr__karta--claim.ox-msr__karta--celo .ox-msr__foto img,
html[data-tema^="21"] .ox-msr__karta--claim.ox-msr__karta--celo:hover .ox-msr__foto img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { html[data-tema^="21"] .ox-msr__karta--claim { transition: none; } }
/* Peter 15. 9.: „sprav to trošku širšie — text, obrázky, a okraje hore/dole väčšie“ —
   hrdina 21 dostane širší obsahový pás, väčšie karty a nadpis, viac vzduchu nad a pod */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__mriezka {
	max-width: min(1600px, 100%);
	padding-block: clamp(44px, 7vh, 104px) clamp(30px, 5vh, 72px);
	column-gap: clamp(28px, 4vw, 76px); row-gap: clamp(18px, 2.4vh, 32px);
}
html[data-tema^="21"] .ox-msr--rodina-show {
	--msr-scena-v: clamp(420px, 56vh, 600px);
	--msr-karta-w: clamp(250px, 15.5vw, 310px); --msr-karta-v: clamp(300px, 18.5vw, 370px);
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h1,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h2 { font-size: clamp(40px, 5.4vw, 92px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__lead { font-size: clamp(17px, 1.5vw, 24px); max-width: 44ch; }
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__nazov { font-size: clamp(15.5px, 1vw, 18px); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__mriezka { padding-block: clamp(28px, 4vh, 44px) 20px; }
	html[data-tema^="21"] .ox-msr--rodina-show { --msr-scena-v: clamp(340px, 46vh, 420px); --msr-karta-w: 220px; --msr-karta-v: 260px; }
}
/* Peter 15. 9. (Safari/Mac): hrdina bol na Macu nižší — Safari má menšie okno (lišty) a
   výška išla z vh. Pevné pixelové minimá → rovnaká výška na Macu aj Windowse. */
html[data-tema^="21"] .ox-msr--rodina-show { min-height: max(780px, min(88vh, 920px)); --msr-scena-v: clamp(520px, 58vh, 640px); --msr-karta-v: clamp(330px, 19vw, 390px); }
@media (max-width: 1000px) { html[data-tema^="21"] .ox-msr--rodina-show { min-height: 0; --msr-scena-v: clamp(340px, 46vh, 420px); --msr-karta-v: 260px; } }
/* --- 27) AUDIT 14 NÁVRHOV (15. 9. 2026): zjednotenie vetvy 21 ----------------
   Nájdené: v návrhoch mimo Noir (21-showroom, 21a, 21b, 21c, 21d, 21e) mali karty
   stále nadnadpis, popis a odkaz „Prečo →“ — pričom popup je od dnes vypnutý
   (`bezPopupu`), takže odkaz nikam neviedol a symbol bol o tretinu menší.
   Nadpis v 21d (serif) sa pri dlhom tvrdení lámal na 3 riadky a posledný sa
   strácal pod linkou. Preto: jednotná karta (symbol + názov) a nadpis, ktorý sa
   zmestí na 2 riadky v každej téme rodiny. ------------------------------- */
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__kat,
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__ktext,
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__viac { display: none !important; }
html[data-tema^="21"] .ox-msr__karta--claim .ox-msr__telo { padding: 2px 12px 15px !important; gap: 0 !important; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h1,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h2 {
	font-size: clamp(32px, 3.6vw, 62px); line-height: 1.04; max-width: 100%;
}
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h1,
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h2 { font-size: clamp(30px, 8.2vw, 46px); }
}

/* =============================================================================
   28) NoirG 1–4 — SPODNÉ SEKCIE (15. 9. 2026, Peter: „uprav spodné elementy —
   widgety — aby boli viac interaktívne, červené, viac sedeli s dizajnom“)
   ---------------------------------------------------------------------------
   Platí LEN pre 21g1–21g4 (`html[data-tema^="21g"]`), ostatné návrhy sa nemenia.
   Rytmus zeme: ruž (kategórie) → biela (prečo my) → SÝTO ČERVENÁ doska (kroky)
   → tmavá päta. Hrdina je červený, spodok webu bol dovtedy sivobiely katalóg —
   týmto sa stránka uzatvára v tej istej farbe, v akej začína.
   ========================================================================== */

/* --- 03 KATEGÓRIE: červené dlaždice namiesto bielych obdĺžnikov ------------- */
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(160deg, #FF122D 0%, #D60019 46%, #A60013 100%);
	border-radius: 22px; border: 0;
	box-shadow: 0 18px 38px -22px rgba(120, 0, 14, .75), inset 0 0 0 1px rgba(255, 255, 255, .16);
	transition: transform .5s var(--sk-prechod), box-shadow .5s var(--sk-prechod);
}
/* mäkké svetlo v rohu — dlaždica nie je plochá plocha, ale osvetlená doska */
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt::before {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 60%);
}
/* fotka produktu má biele pozadie → posadíme ju na svetlý disk, nech nesplýva */
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto {
	/* jednotné okno pre všetky štyri dlaždice — editoriálny rytmus robia rôzne
	   odsadenia zhora (nth-child margin-top), nie rôzne pomery fotky */
	position: relative; z-index: 1; aspect-ratio: 1 / 1 !important; margin: 14px; border-radius: 16px; overflow: hidden;
	/* podklad je ladený na štúdiové pozadie fotiek (#e4e6–#fff), aby nebolo vidieť
	   obdĺžnik obrázka; rohy fotky ešte zjemní maska */
	background: linear-gradient(180deg, #FAFBFA 0%, #F2F4F3 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto img {
	padding: 4% !important; transform: scale(1.06); mix-blend-mode: normal;
	-webkit-mask-image: radial-gradient(ellipse 96% 96% at 50% 50%, #000 76%, transparent 99%);
	        mask-image: radial-gradient(ellipse 96% 96% at 50% 50%, #000 76%, transparent 99%);
}
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt:hover .ox-produkt__foto img { transform: scale(1.13) rotate(-1.5deg); }
/* jemný lesk prejde dlaždicou pri prejdení myšou (award detail, nie gýč) */
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt .ox-produkt__foto::after {
	content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%);
	transform: translateX(-120%); transition: transform .9s var(--sk-prechod);
}
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto img { transition: transform .6s var(--sk-prechod); }
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__telo {
	position: relative; z-index: 1; padding: 2px 18px 22px; color: #fff; gap: 4px;
}
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__nazov { color: #fff; }
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__popis { color: rgba(255, 255, 255, .84); }
/* kruhová šípka vpravo dole = jasné „dá sa kliknúť“ */
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt .ox-produkt__nazov::after {
	color: #fff; opacity: .9; font-size: 17px;
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt:hover {
		transform: translateY(-8px);
		box-shadow: 0 34px 60px -26px rgba(120, 0, 14, .9), inset 0 0 0 1px rgba(255, 255, 255, .34);
	}
	html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt:hover .ox-produkt__foto::after { transform: translateX(120%); }
		html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt:hover .ox-produkt__nazov::after { transform: translateX(6px); opacity: 1; }
}
html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) a.ox-produkt:focus-visible {
	outline: 3px solid #fff; outline-offset: 3px;
}

/* --- 04 PREČO MY: riadok sa pri prejdení myšou zaleje červenou -------------- */
html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel {
	/* oddeľovač ostáva rovná linka (oblé konce vyzerali ako rozbitý rámček);
	   zaoblenie má až červená výplň pri prejdení myšou */
	padding-inline: clamp(14px, 1.6vw, 26px); border-radius: 0;
	border-bottom-color: rgba(224, 0, 26, .22);
	transition: color .4s var(--sk-prechod);
}
html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel::before {
	position: relative; z-index: 1;
	transition: transform .35s var(--sk-prechod), color .35s var(--sk-prechod);
}
html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel > * { position: relative; z-index: 1; }
/* výplň ide zľava (::after sme prebrali z tenkej linky na celú dosku) */
html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel::after {
	content: ''; position: absolute; inset: 0; bottom: -1px; z-index: 0; width: auto; height: auto;
	border-radius: 16px; transform: scaleX(0); transform-origin: left center;
	background: linear-gradient(100deg, #D60019 0%, #FF122D 100%);
	box-shadow: 0 18px 34px -24px rgba(120, 0, 14, .9);
	transition: transform .55s var(--sk-prechod);
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel:hover::after { width: auto; transform: scaleX(1); }
	html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel:hover::before { color: #fff; transform: translateX(6px); }
	html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel:hover .ox-h3,
	html[data-tema^="21g"] :where([data-ox21="dovody"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-panel)) .ox-panel:hover p { color: #fff; }
}

/* --- 05 KROKY: sýto červená doska, biele karty, červená plaketa čísla ------- */
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-kroky {
	position: relative; isolation: isolate;
	/* horný okraj bol po bielom radiálnom svetle až #D60019 a nadnadpis na ňom
	   klesol na 3,9:1 — začiatok prechodu je tmavší a svetlo slabšie (AA). */
	background: linear-gradient(168deg, #D10018 0%, #B00014 58%, #8A0010 100%);
	color: #fff;
}
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-kroky::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(70% 55% at 22% 0%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 70%);
}
html[data-tema^="21g"] .ox-msr-kroky .ox-h2,
html[data-tema^="21g"] .ox-msr-kroky .ox-oko,
html[data-tema^="21g"] .ox-msr-kroky .ox-h3 { color: #fff; }
html[data-tema^="21g"] .ox-msr-kroky .ox-oko::after { background: rgba(255, 255, 255, .55); }
html[data-tema^="21g"] .ox-msr-kroky .ox-text-tlmeny { color: #fff; }
html[data-tema^="21g"] .ox-msr-krok {
	position: relative; padding: 18px 20px 24px; border-radius: 22px;
	background: rgba(90, 4, 0, .28);                 /* tmavý závoj → biely text nad AA */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	transition: transform .5s var(--sk-prechod), background .4s var(--sk-prechod), box-shadow .5s var(--sk-prechod);
}
html[data-tema^="21g"] .ox-msr-krok__foto { border-radius: 16px; overflow: hidden; background: #fff; }
html[data-tema^="21g"] .ox-msr-krok__foto img { mix-blend-mode: multiply; transition: transform .6s var(--sk-prechod); }
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-krok__cislo {
	position: absolute; top: -14px; left: 18px; z-index: 2;
	width: 54px; height: 54px; display: grid; place-items: center;
	border-radius: 50%; background: #fff; color: var(--sk-akcent-tmavy);
	font-size: 22px; line-height: 1; opacity: 1; -webkit-text-stroke: 0;
	box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .6);
	transition: transform .45s var(--sk-prechod);
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] .ox-msr-krok:hover { transform: translateY(-8px); background: rgba(90, 4, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 32px 54px -28px rgba(0, 0, 0, .7); }
	html[data-tema^="21g"] .ox-msr-krok:hover .ox-msr-krok__foto img { transform: scale(1.06); }
	html[data-tema^="21g"] .ox-msr-krok:hover .ox-msr-krok__cislo { transform: scale(1.08) rotate(-4deg); }
}
/* --- prah „Celý sortiment →“ na červenej doske = biele tlačidlo-pás --------- */
html[data-tema^="21g"] .ox-21-prah { border-top: 1px solid rgba(255, 255, 255, .28); }
html[data-tema^="21g"] .ox-21-prah__odkaz.ox-btn {
	color: #fff; border-bottom-color: transparent;
}
html[data-tema^="21g"] .ox-21-prah__odkaz.ox-btn .ox-21-prah__sip {
	display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .1);
	transition: transform .45s var(--sk-prechod), background .35s var(--sk-prechod), color .35s var(--sk-prechod), border-color .35s var(--sk-prechod);
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] .ox-21-prah__odkaz.ox-btn:hover { color: #fff; background: none; }
	html[data-tema^="21g"] .ox-21-prah__odkaz.ox-btn:hover .ox-21-prah__sip { transform: translateX(8px); background: #fff; border-color: #fff; color: var(--sk-akcent-tmavy); }
}

/* --- päta: odkazy s červeným podčiarknutím zľava --------------------------- */
html[data-tema^="21g"] #ox-pata .ox-pata__stlpec h4 { color: #fff; }
html[data-tema^="21g"] #ox-pata .ox-pata__stlpec ul a {
	position: relative; display: inline-block; padding-bottom: 2px; text-decoration: none;
}
html[data-tema^="21g"] #ox-pata .ox-pata__stlpec ul a::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--sk-akcent); transform: scaleX(0); transform-origin: left center;
	transition: transform .4s var(--sk-prechod);
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] #ox-pata .ox-pata__stlpec ul a:hover { color: #fff; }
	html[data-tema^="21g"] #ox-pata .ox-pata__stlpec ul a:hover::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21g"] a.ox-produkt, html[data-tema^="21g"] .ox-msr-krok,
	html[data-tema^="21g"] .ox-panel::after, html[data-tema^="21g"] .ox-produkt__foto img { transition: none !important; }
}
/* --- 28b) NoirG spodok: doladenie po kontrole screenshotov ------------------ */
/* mobil: štvorcové okno robilo z dlaždice vežu — nižší pomer a menšie odsadenie */
@media (max-width: 900px) {
	html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__foto { aspect-ratio: 4 / 3 !important; margin: 10px; }
	html[data-tema^="21g"] :where([data-ox21="kategorie"], #ox-obsah:has(> .ox-show) .ox-sek--krem:has(.ox-mriezka--4)) .ox-produkt__telo { padding: 2px 14px 16px; }
}
/* prah „Celý sortiment →“: šípka bola na červenej sotva viditeľná */
html[data-tema^="21g"] .ox-21-prah__odkaz.ox-btn .ox-21-prah__sip {
	background: #fff; border-color: #fff; color: var(--sk-akcent-tmavy);
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55);
}
html[data-tema^="21g"] .ox-21-prah__odkaz.ox-btn { font-size: clamp(22px, 2.6vw, 34px); }
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] .ox-21-prah__odkaz.ox-btn:hover .ox-21-prah__sip { transform: translateX(10px) scale(1.06); }
}
/* pod prahom ostávalo príliš veľa prázdnej červene pred švom päty */
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-msr-kroky {
	padding-bottom: clamp(48px, 6vw, 92px);
}

/* --- 28c) NoirG: B2B widget („Nakupujete pre kaviareň…“) -------------------
   Bol to tmavohnedý obdĺžnik s drobnými štyrmi stĺpčekmi, v ktorých sa lámali
   slová („OBJEDNÁVKA V E-SHOPE“) a vpravo dole ostávala prázdna plocha.
   Po novom: sýto červená doska ako v krokoch, cesta v štyroch kartách s bielou
   číselnou plaketou a tlačidlá, ktoré reagujú. ------------------------------ */
html[data-tema^="21g"] .ox-show__b2b {
	position: relative; isolation: isolate; overflow: hidden;
	background: linear-gradient(150deg, #D60019 0%, #B70015 52%, #8E0010 100%);
	border-radius: 26px; align-items: stretch;
	box-shadow: 0 34px 64px -34px rgba(120, 0, 14, .85), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
html[data-tema^="21g"] .ox-show__b2b::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 60% at 12% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 70%);
}
html[data-tema^="21g"] .ox-show__b2b > div { align-self: center; }
html[data-tema^="21g"] .ox-show__cesta {
	/* akt 2 vedie nad cestou deliacu linku (`border-top`) — mala zmysel pri štyroch
	   stĺpcoch, nad samostatnými kartami visela vo vzduchu (Peter 15. 9.). */
	align-content: start; align-self: center; gap: 12px; border-top: 0;
}
html[data-tema^="21g"] .ox-show__cesta li {
	/* závoj je TMAVÝ, nie svetlý: svetlý zosvetľoval červenú a biely text klesal
	   na ~3,6:1 (pod AA). Tmavý dá 6,3:1 a karta pôsobí bohatšie. */
	padding: 16px; border-radius: 18px; min-height: 0; gap: 8px; align-content: start;
	background: rgba(90, 4, 0, .3); border: 1px solid rgba(255, 255, 255, .24);
	transition: transform .45s var(--sk-prechod), background .35s var(--sk-prechod), border-color .35s var(--sk-prechod);
}
/* plaketa čísla ostáva v toku (absolútna sa prekrývala s nadpisom kroku) */
html[data-tema^="21g"] .ox-show__cesta li::before {
	width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
	background: #fff; color: var(--sk-akcent-tmavy); font-size: 15px;
	transition: transform .4s var(--sk-prechod);
}
/* „Objednávka v e-shope“ je jediný dvojriadkový nadpis — bez rezervy by popis
   v tejto karte začínal nižšie než v ostatných troch. */
html[data-tema^="21g"] .ox-show__cesta b { font-size: 13.5px; letter-spacing: .04em; hyphens: none; min-height: 2.56em; }
@media (max-width: 900px) { html[data-tema^="21g"] .ox-show__cesta b { min-height: 0; } }
html[data-tema^="21g"] .ox-show__cesta small { color: #fff; }
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] .ox-show__cesta li:hover { transform: translateY(-5px); background: rgba(90, 4, 0, .45); border-color: rgba(255, 255, 255, .5); }
	html[data-tema^="21g"] .ox-show__cesta li:hover::before { transform: scale(1.1) rotate(-5deg); }
}
/* tlačidlá: biele plné + biely obrys, obe s pohybom */
html[data-tema^="21g"] .ox-show__akcie .ox-btn--hlavne {
	background: #fff; color: var(--sk-akcent-tmavy); border-color: #fff;
	box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
	transition: transform .35s var(--sk-prechod), box-shadow .35s var(--sk-prechod), background .3s var(--sk-prechod);
}
html[data-tema^="21g"] .ox-show__akcie .ox-btn--obrys { border-color: rgba(255, 255, 255, .7); color: #fff; transition: transform .35s var(--sk-prechod), background .3s var(--sk-prechod), border-color .3s var(--sk-prechod); }
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] .ox-show__akcie .ox-btn--hlavne:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .7); }
	html[data-tema^="21g"] .ox-show__akcie .ox-btn--obrys:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .16); border-color: #fff; }
}
/* --- sekčný odkaz „Všetko →“ = malá červená pilulka -------------------------- */
html[data-tema^="21g"] .ox-hlava-sekcie > .ox-btn--tiche {
	border: 1.5px solid rgba(224, 0, 26, .45); border-radius: 999px; padding: 9px 16px;
	color: var(--sk-akcent-tmavy); text-decoration: none;
	transition: background .3s var(--sk-prechod), color .3s var(--sk-prechod), border-color .3s var(--sk-prechod), transform .3s var(--sk-prechod);
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] .ox-hlava-sekcie > .ox-btn--tiche:hover { background: var(--sk-akcent-tmavy); border-color: var(--sk-akcent-tmavy); color: #fff; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21g"] .ox-show__cesta li, html[data-tema^="21g"] .ox-show__akcie .ox-btn { transition: none !important; }
}

/* --- 28d) NoirG: zoznam faktov v kapitole 02 -------------------------------
   Ikonky sú drobná čiarová kresba (ikona-*.svg) a po výmene kariet kolesa za
   farebné symboly pôsobili ako cudzí prvok. Dostanú červenú plaketu — malé
   ikony ostávajú čiarové (na 30 px sú čitateľné), ale hovoria tou istou rečou.
   Riadok navyše reaguje na myš: plaketa sa zaleje, text sa posunie. --------- */
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt {
	padding-inline: clamp(10px, 1.2vw, 18px); border-radius: 14px;
	transition: background .35s var(--sk-prechod);
}
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt i {
	width: 46px; height: 46px; border-radius: 50%; place-items: center;
	background: rgba(255, 217, 214, .6); box-shadow: inset 0 0 0 1px rgba(224, 0, 26, .18);
	transform: none; align-self: center;
	transition: background .35s var(--sk-prechod), transform .4s var(--sk-prechod), box-shadow .35s var(--sk-prechod);
}
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt i img { width: 26px; height: 26px; }
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt {
	grid-template-columns: 46px minmax(0, 1fr); align-items: center;
}
@media (hover: hover) and (pointer: fine) {
	html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt:hover { background: rgba(255, 217, 214, .35); }
	html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt:hover i { background: var(--sk-akcent-tmavy); box-shadow: 0 10px 22px -12px rgba(140, 0, 16, .8); transform: scale(1.06) rotate(-4deg); }
	html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt:hover i img { filter: brightness(0) invert(1); }
	html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__fakt:hover b { color: var(--sk-akcent-tmavy); }
}

/* --- 28e) OPRAVA (Peter 15. 9.): prvá karta cesty mala text nalepený na okraj -
   akt 2 robí z cesty štyri stĺpce oddelené linkami a prvej (na mobile každej
   nepárnej) berie ľavé odsadenie: `li:first-child { padding-left: 0 }`. To je
   o jednu pseudo-triedu špecifickejšie než náš predpis pre karty, takže nám
   prebíjalo `padding`. Tu to vraciame pre všetky karty NoirG. ------------- */
html[data-tema^="21g"] .ox-show__cesta li:first-child,
html[data-tema^="21g"] .ox-show__cesta li:last-child,
html[data-tema^="21g"] .ox-show__cesta li:nth-child(odd),
html[data-tema^="21g"] .ox-show__cesta li:nth-child(-n+2) {
	padding: 16px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 18px;
}
@media (max-width: 900px) {
	html[data-tema^="21g"] .ox-show__cesta li:first-child,
	html[data-tema^="21g"] .ox-show__cesta li:last-child,
	html[data-tema^="21g"] .ox-show__cesta li:nth-child(odd),
	html[data-tema^="21g"] .ox-show__cesta li:nth-child(-n+2) { padding: 16px; border: 1px solid rgba(255, 255, 255, .24); }
}

/* --- 29) POKLADŇA 2.0 (16. 9. 2026): typ zákazníka, firemné polia, marketing blok, QR ---- */
.ox-typ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ox-typ__volba { display: grid; gap: 4px; padding: 14px 16px 14px 44px; position: relative; border: 1.5px solid var(--sk-linka); border-radius: 14px; cursor: pointer; transition: border-color .25s, background .25s; }
.ox-typ__volba input { position: absolute; left: 16px; top: 18px; accent-color: var(--sk-akcent); }
.ox-typ__volba b { font-size: 15px; }
.ox-typ__volba small { color: var(--sk-text-tlmeny); font-size: 12.5px; line-height: 1.4; }
.ox-typ__volba--aktivna { border-color: var(--sk-akcent); background: rgba(255, 217, 214, .3); }
@media (max-width: 620px) { .ox-typ { grid-template-columns: 1fr; } }
.ox-firma-polia { padding: 12px 14px 4px; border-radius: 12px; background: rgba(255, 217, 214, .25); }
.ox-mkt__popis { margin: -4px 0 12px; color: var(--sk-text-tlmeny); font-size: 14px; }
.ox-mkt__radok { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--sk-linka); }
.ox-mkt__radok:first-of-type { border-top: 0; }
.ox-mkt__radok--caka { opacity: .55; pointer-events: none; }
.ox-mkt__obr { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fff; display: block; }
.ox-mkt__telo { display: grid; gap: 4px; }
.ox-mkt__telo small { color: var(--sk-text-tlmeny); font-size: 12.5px; }
.ox-mkt__vyber { max-width: 260px; font-size: 13.5px; padding: 8px 10px; }
.ox-mkt--marketing { background: rgba(255, 217, 214, .3); }
.ox-mkt__mn output { min-width: 32px; text-align: center; display: inline-block; font-weight: 700; }
.ox-qr { margin-bottom: 22px; }
html[data-tema^="21"] .ox-mkt__radok { border-top-color: rgba(224, 0, 26, .16); }

/* --- 30) správa validátora pomeru (Xcount-validator) v našom šate ------------ */
.ox-hlaska--validator { padding: 0; background: none; border: 0; }
.ox-bt { background: #fff; border: 1.5px solid rgba(224, 0, 26, .35); border-radius: 16px; padding: 18px 20px; color: var(--sk-text); }
.ox-bt .bt-notice-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ox-bt .bt-notice-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 217, 214, .7); display: grid; place-items: center; color: var(--sk-akcent-tmavy); }
.ox-bt .bt-notice-icon svg { width: 18px; height: 18px; }
.ox-bt .bt-notice-title { font-family: var(--sk-font-nadpis); text-transform: var(--sk-nadpis-transform); letter-spacing: var(--sk-nadpis-spacing); font-size: 20px; color: var(--sk-akcent-tmavy); }
.ox-bt .bt-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.ox-bt .bt-details { margin: 0 0 12px; font-size: 13px; }
.ox-bt .bt-details summary { cursor: pointer; color: var(--sk-akcent-tmavy); font-weight: 600; }
.ox-bt .bt-details-body { margin: 8px 0 0; color: var(--sk-text-tlmeny); line-height: 1.5; }
.ox-bt .bt-head { margin: 8px 0 6px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
.ox-bt .bt-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ox-bt .bt-row { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .03); }
.ox-bt .bt-row-missing { background: rgba(255, 217, 214, .35); }
.ox-bt .bt-row-main { display: flex; align-items: center; gap: 10px; }
.ox-bt .bt-ico { width: 20px; height: 20px; flex: 0 0 20px; }
.ox-bt .bt-ico-ok { color: #1F8F30; } .ox-bt .bt-ico-bad { color: var(--sk-akcent-tmavy); }
.ox-bt .bt-row-text { flex: 1; min-width: 0; }
.ox-bt .bt-row-title { font-weight: 700; font-size: 14px; }
.ox-bt .bt-unit { font-weight: 400; color: var(--sk-text-tlmeny); font-size: 12px; }
.ox-bt .bt-row-need { font-size: 12.5px; color: var(--sk-text-tlmeny); }
.ox-bt .bt-status { font-size: 12.5px; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .05); }
.ox-bt .bt-status-ok { background: rgba(31, 143, 48, .12); color: #1F8F30; }
.ox-bt .bt-status-bad { background: rgba(224, 0, 26, .12); color: var(--sk-akcent-tmavy); }
.ox-bt .bt-row-action { margin-top: 8px; padding-left: 30px; }
.ox-bt .bt-quick-add { appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: 8px 14px; font: 700 13px/1 var(--sk-font-text); background: var(--sk-akcent); color: #fff; display: inline-flex; align-items: center; gap: 6px; transition: transform .2s, background .2s; }
.ox-bt .bt-quick-add:hover { background: var(--sk-akcent-tmavy); transform: translateY(-1px); }
.ox-bt .bt-quick-add:disabled { opacity: .5; cursor: default; }
.ox-bt .bt-plus { font-size: 15px; }

/* --- 31) „do dopravy zadarmo“ (prah podľa typu zákazníka) ------------------- */
.ox-dz { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 217, 214, .35); font-size: 13.5px; }
.ox-dz__ok { color: #1F8F30; }
.ox-dz__pas { display: block; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.ox-dz__pas i { display: block; height: 100%; background: linear-gradient(90deg, #FF6A52, var(--sk-akcent-tmavy)); border-radius: 999px; transition: width .6s var(--sk-prechod); }
.ox-dz small { color: var(--sk-text-tlmeny); font-size: 12px; }

/* --- 32) „Môj účet“ 1:1 so starým webom + výber prevádzok + jazyk (16. 9. 2026) --- */
.ox-ucet-menu { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 30px; }
.ox-ucet-menu .ox-chip small { opacity: .75; margin-left: 4px; }
.ox-dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ox-dlazdica { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--sk-povrch, #fff); border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 6px 22px rgba(0, 0, 0, .05); text-decoration: none; color: inherit; transition: transform .25s var(--sk-prechod), box-shadow .25s var(--sk-prechod), border-color .25s; }
a.ox-dlazdica:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 0, 29, .12); border-color: rgba(255, 0, 29, .25); }
.ox-dlazdica__oko { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sk-akcent, #D60019); font-weight: 800; }
.ox-dlazdica__cislo { font: 800 34px/1 var(--sk-pismo-nadpis, inherit); }
.ox-dlazdica__text { color: var(--sk-text-tlmeny); font-size: 13.5px; }
.ox-dlazdica--cislo { align-items: flex-start; }
.ox-udaje { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 22px; margin: 0 0 22px; }
.ox-udaje__pole { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.ox-udaje__pole small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-text-tlmeny); margin-bottom: 3px; }
.ox-udaje__pole b { font-weight: 600; }
.ox-info { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(255, 217, 214, .35); font-size: 13.5px; margin-bottom: 18px; }
.ox-info__i { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sk-akcent, #D60019); color: #fff; font-weight: 800; text-align: center; line-height: 22px; font-size: 13px; }
.ox-zastupca { display: flex; gap: 18px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--sk-povrch, #fff); border: 1px solid rgba(0, 0, 0, .06); max-width: 620px; }
.ox-zastupca__foto { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: rgba(255, 0, 29, .08); display: grid; place-items: center; font-size: 30px; }
.ox-zastupca p { margin: 4px 0; }
.ox-zastupca a { color: inherit; }
.ox-qr-obj { padding: 18px 20px; border-radius: 16px; background: var(--sk-povrch, #fff); border: 1px solid rgba(0, 0, 0, .06); margin-bottom: 18px; }
.ox-qr-obj__hlava { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.ox-qr-obj .co89qrp-block, .ox-qr-obj .co89qrp-panel { margin: 0; }
.ox-prev-vyber__riadok { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.ox-prev-vyber__riadok--aktivna { border-color: rgba(255, 0, 29, .35); background: rgba(255, 0, 29, .04); }
.ox-prev-vyber__riadok input { width: 18px; height: 18px; accent-color: var(--sk-akcent, #D60019); }
.ox-prev-vyber__riadok span:not(.ox-odznak):not(.ox-prev-vyber__pocet) { display: flex; flex-direction: column; flex: 1; }
.ox-prev-vyber__riadok small { color: var(--sk-text-tlmeny); font-size: 12px; }
.ox-prev-vyber__pocet { font-size: 12px; color: var(--sk-text-tlmeny); white-space: nowrap; }
.ox-prev-vyber__akcie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.ox-jazyk { display: inline-flex; gap: 2px; margin-left: 10px; vertical-align: middle; }
.ox-jazyk__btn { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: inherit; font: 700 11px/1 inherit; letter-spacing: .08em; padding: 5px 7px; border-radius: 6px; cursor: pointer; opacity: .75; }
.ox-jazyk__btn:hover { opacity: 1; }
.ox-jazyk__btn--aktivny { opacity: 1; background: var(--sk-akcent, #D60019); border-color: var(--sk-akcent, #D60019); color: #fff; }
#ox-gte, .goog-te-banner-frame, .skiptranslate iframe, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.ox-tabulka .ox-btn + .ox-btn { margin-left: 4px; }
@media (max-width: 640px) { .ox-zastupca { flex-direction: column; } .ox-dlazdica__cislo { font-size: 28px; } }

/* --- 33) registrácia + pokladňa 1:1 so starým webom (16. 9. 2026) ------------ */
[hidden] { display: none !important; }
.ox-kroky button.ox-krok { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.ox-krok__text { display: inline-flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ox-krok__text small { font-weight: 500; font-size: 11px; color: var(--sk-text-tlmeny); }
.ox-krok-nadpis { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.ox-krok-nadpis .ox-krok__cislo { width: 30px; height: 30px; border-radius: 50%; background: var(--sk-akcent, #D60019); color: #fff; display: inline-grid; place-items: center; font-size: 14px; }
.ox-label__pozn { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--sk-text-tlmeny); }
.ox-hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--sk-text-tlmeny); }
.ox-input--zamknute { background: rgba(0, 0, 0, .035) !important; color: var(--sk-text-tlmeny); cursor: default; }
.ox-telefon { display: flex; gap: 8px; }
.ox-telefon__cc { flex: 0 0 150px; }
.ox-telefon .ox-input { flex: 1 1 auto; min-width: 0; }
.ox-pill { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(0, 0, 0, .06); }
.ox-pill--ok { background: rgba(31, 143, 48, .12); color: #1F8F30; }
.ox-pill--chyba { background: rgba(255, 0, 29, .1); color: var(--sk-akcent-tmavy, #D10018); }
.ox-pill--nedostupne, .ox-pill--nacitava { background: rgba(224, 168, 0, .14); color: #8a6400; }
.ox-nezhoda, .ox-manual { padding: 12px 14px; border-radius: 12px; background: #fff7e0; border-left: 5px solid #e0a800; font-size: 13.5px; }
.ox-potvrdenie { padding: 16px 18px; border-radius: 14px; background: rgba(255, 0, 29, .05); border: 1px dashed rgba(255, 0, 29, .35); }
.ox-potvrdenie__q { margin: 0 0 12px; font-weight: 700; }
.ox-potvrdenie__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ox-reg-akcie { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 8px; }
.ox-prev-karta { margin-bottom: 14px; }
.ox-prev-karta__hlava { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ox-prev-karta__zmaz { font-size: 14px; }
.ox-prev-karta__zamok { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(31, 143, 48, .1); color: #1F8F30; font-size: 13px; font-weight: 600; }
.ox-prev-karta--potvrdena { border-color: rgba(31, 143, 48, .35); }
.ox-prev-karta__akcie { display: flex; justify-content: flex-end; }
.ox-konfety { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.ox-konfety i { position: absolute; top: -12px; left: calc(var(--i) * 2.8%); width: 9px; height: 14px; background: hsl(calc(var(--i) * 37deg), 90%, 55%); opacity: .9; animation: ox-konf 2.6s cubic-bezier(.3, .6, .4, 1) calc(var(--i) * 45ms) 1 forwards; border-radius: 2px; }
@keyframes ox-konf { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } }
/* pokladňa: košíky prevádzok */
.ox-prev-kosik__hlava { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ox-prev-kosik__hlava span:first-of-type { color: var(--sk-akcent, #D60019); }
html .ox-prev-kosik .ox-riadok { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) auto auto minmax(96px, auto) !important; grid-template-areas: none !important; align-items: center; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
html .ox-prev-kosik .ox-riadok > * { grid-area: auto !important; }
.ox-prev-kosik .ox-riadok__foto { width: 64px; height: 64px; }
.ox-prev-kosik .ox-riadok__telo { min-width: 0; }
.ox-prev-kosik .ox-riadok__nazov { font-size: 15px; margin: 0; }
.ox-prev-kosik .ox-riadok__cena { text-align: right; font-weight: 800; color: var(--sk-akcent, #D60019); }
@media (max-width: 640px) { .ox-prev-kosik .ox-riadok { grid-template-columns: 52px minmax(0, 1fr) auto; } .ox-prev-kosik .ox-riadok__zmaz { grid-column: 3; } .ox-prev-kosik .ox-riadok__cena { grid-column: 2 / -1; text-align: left; } }
.ox-riadok__mn { margin-inline: 8px; }
.ox-riadok__zmaz { font-size: 14px; opacity: .7; }
.ox-riadok__zmaz:hover { opacity: 1; color: var(--sk-akcent, #D60019); }
.ox-riadok__cena small { display: block; font-size: 10px; color: var(--sk-text-tlmeny); font-weight: 500; text-align: right; }
.ox-riadok--caka { opacity: .5; pointer-events: none; }
.ox-prev-kosik__spolu { text-align: right; margin-top: 10px; font-size: 15px; }
.ox-prev-kosik__spolu b { color: var(--sk-akcent, #D60019); font-size: 18px; }
.ox-bt-box { margin-top: 14px; border: 1.5px solid rgba(255, 0, 29, .45); border-radius: 14px; overflow: hidden; background: #fff; }
.ox-bt-box__hlava { background: var(--sk-akcent, #D60019); color: #fff; padding: 9px 14px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; }
.ox-bt-box .ox-bt { padding: 12px 14px; }
.ox-bt-box--blik { animation: ox-blik .9s ease; }
@keyframes ox-blik { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 5px rgba(255, 0, 29, .35); } }
.ox-kupon__riadok { display: flex; gap: 10px; flex-wrap: wrap; }
.ox-kupon__riadok .ox-input { flex: 1 1 220px; }
.ox-kupon__aktivne { margin: 10px 0 0; font-size: 14px; }
.ox-kupon__zrus { border: 0; background: none; cursor: pointer; color: var(--sk-akcent, #D60019); font-weight: 700; }
.ox-suhlas { border: 1.5px dashed rgba(255, 0, 29, .45); }
.ox-suhlas p { font-size: 13.5px; }
.ox-suhlas .ox-check { margin-top: 8px; font-weight: 700; }
.ox-povinne { color: var(--sk-akcent, #D60019); }
.ox-mkt__dd { position: relative; }
.ox-mkt__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18); border: 1px solid rgba(0, 0, 0, .06); overflow: hidden; }
.ox-mkt__menu button { border: 0; background: none; text-align: left; padding: 10px 14px; font: inherit; cursor: pointer; }
.ox-mkt__menu button:hover { background: rgba(255, 0, 29, .07); }
.ox-sum-block .ox-h3 { margin-top: 0; }
.ox-sum-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 14px; }
.ox-sum-row span { color: var(--sk-text-tlmeny); }
.ox-sum-row b { font-weight: 600; text-align: right; }
.ox-sum-prev { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 14px; }
.ox-sum-prev small { display: block; color: var(--sk-text-tlmeny); margin-top: 3px; }
.ox-suhrn__rozpis { margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed rgba(0, 0, 0, .12); font-size: 13.5px; }
.ox-suhrn__rozpis > b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
.ox-platba-volba span { display: flex; flex-direction: column; }
.ox-platba-volba small { color: var(--sk-text-tlmeny); font-size: 12.5px; }
@media (max-width: 640px) { .ox-telefon__cc { flex-basis: 120px; } .ox-riadok__mn { margin-inline: 4px; } .ox-potvrdenie__btns .ox-btn { width: 100%; } }

/* --- 34) mini-košík, panel jazyka a „Vyžiadať zástupcu“ (prevzaté z lišty starého webu,
       vzhľad hlavičky ostáva z návrhov NoirG) ------------------------------------ */
.ox-vlajka { display: inline-flex; width: 27px; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex: 0 0 auto; }
.ox-vlajka--mini { width: 16px; height: 11px; border-radius: 2px; }
.ox-vlajka svg { width: 100%; height: 100%; display: block; }
#ox-hlavicka .ox-nav__akcie { position: relative; }
.ox-jazyk-panel, .ox-zastupca-panel { position: absolute; top: calc(100% + 10px); right: 0; left: auto; transform: none; }
/* mini-košík (oxo-cart-click-minicart) */ .ox-minikosik { position: absolute; top: calc(100% + 8px); right: 0; width: min(460px, calc(100vw - 30px)); background: #fff; border-radius: 20px; box-shadow: 0 22px 56px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .06); padding: 8px 18px 18px; font-family: Anton, Impact, sans-serif; z-index: 99990; color: #1B1B1B; text-align: left; }
.ox-mk__hlava { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 8px; }
.ox-mk__titul { font: 400 22px/1 'Luckiest Guy', cursive; letter-spacing: .5px; color: #1B1B1B; }
.ox-mk__pocet { font: 400 14px/1 Anton, Impact, sans-serif; letter-spacing: .5px; color: #fff; background: #D60019; border-radius: 999px; padding: 5px 11px; }
.ox-mk__zoznam { max-height: 60vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.ox-mk__prevadzka { font: 400 12px/1 Anton, Impact, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #767676; padding: 8px 4px 2px; }
.ox-mk__prevadzka b { color: #D60019; font-weight: 400; }
.ox-mk__prevadzka i { font-style: normal; color: #1F8F30; margin-left: 6px; }
.ox-mk__ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ox-mk__polozka { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 13px; align-items: center; padding: 9px 52px 9px 15px; border-radius: 16px; background: #FFF7E6; }
.ox-mk__polozka--caka { opacity: .5; pointer-events: none; }
.ox-mk__foto { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 14px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .08); overflow: hidden; }
.ox-mk__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ox-mk__nazov { font: 400 15px/1.2 Anton, Impact, sans-serif; letter-spacing: .3px; color: #1B1B1B; }
.ox-mk__mnozstvo { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 8px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); font: 400 15px/1 Anton, Impact, sans-serif; }
.ox-mk__q { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #D60019; background: #fff; color: #D60019; font: 700 15px/1 Inter, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ox-mk__q:hover { background: #D60019; color: #fff; }
.ox-mk__q:disabled { opacity: .35; pointer-events: none; }
.ox-mk__n { font: 400 16px/1 Anton, Impact, sans-serif; min-width: 16px; text-align: center; }
.ox-mk__u { font-size: 13px; letter-spacing: .3px; color: #555; }
.ox-mk__sep { color: #d8d8d8; margin: 0 1px; }
.ox-mk__cena { color: #D60019; }
.ox-mk__zmaz { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2.5px solid #D60019; color: #D60019; font: 700 18px/1 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform .15s ease, background .15s ease; }
.ox-mk__zmaz:hover { background: #D60019; color: #fff; transform: scale(1.08) rotate(90deg); }
.ox-mk__spolu { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 14px; padding: 15px 2px 0; border-top: 2px dashed #eee; font: 400 17px/1 Anton, Impact, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #1B1B1B; }
.ox-mk__spolu strong { font-weight: 400; color: #1B1B1B; }
.ox-mk__cta { display: block; width: 100%; text-align: center; padding: 16px; border-radius: 13px; background: #D60019; color: #fff; font: 400 18px/1 Anton, Impact, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 18px rgba(227, 6, 32, .30); transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.ox-mk__cta:hover { background: #D80019; transform: translateY(-1px); }
.ox-mk__prazdny { font: 400 16px/1.3 Anton, Impact, sans-serif; letter-spacing: .5px; text-align: center; color: #1B1B1B; background: #FFF7E6; border-radius: 14px; padding: 22px 16px; margin: 8px 0 12px; }
.ox-jazyk-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; padding: 12px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; box-shadow: 0 22px 56px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .06); z-index: 99990; display: flex; flex-direction: column; gap: 4px; }
.ox-jazyk-panel__hlava { font: 400 9px/1 Anton, Impact, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #767676; padding: 4px 8px 8px; }
.ox-jazyk-panel__volba { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: #1a1a1a; }
.ox-jazyk-panel__volba:hover { background: rgba(255, 0, 29, .06); }
.ox-jazyk-panel__volba.is-current { background: rgba(255, 0, 29, .08); }
.ox-jazyk-panel__txt { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ox-jazyk-panel__nazov { font: 400 16px/1 Anton, Impact, sans-serif; letter-spacing: .3px; }
.ox-jazyk-panel__sub { font: 400 9px/1 Anton, Impact, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #767676; }
.ox-jazyk-panel__check { color: #D60019; display: inline-flex; }
.ox-zastupca-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); background: #fff; border-radius: 16px; box-shadow: 0 22px 56px rgba(0, 0, 0, .22); overflow: hidden; z-index: 99990; text-align: left; font-family: Anton, Impact, sans-serif; cursor: default; }
.ox-zastupca-panel__hlava { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #D60019, #D00018); color: #fff; }
.ox-zastupca-panel__hlava b { display: block; font: 400 16px/1 'Luckiest Guy', cursive; letter-spacing: 1px; text-transform: uppercase; }
.ox-zastupca-panel__hlava small { display: block; margin-top: 4px; font: 400 11px/1 Anton, Impact, sans-serif; letter-spacing: .4px; opacity: .9; }
.ox-zastupca-panel__ikona { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #D60019; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ox-zastupca-panel__ikona svg { width: 20px; height: 20px; }
.ox-zastupca-panel__telo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ox-zastupca-panel__telo label { display: flex; flex-direction: column; gap: 5px; }
.ox-zastupca-panel__telo label > span { font: 400 9px/1 Anton, Impact, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #555; }
.ox-zastupca-panel__telo label > span i { color: #D60019; font-style: normal; }
.ox-zastupca-panel__telo label > span em { font-style: normal; color: #999; text-transform: none; letter-spacing: 0; }
.ox-zastupca-panel__telo .ox-input { font-family: Anton, Impact, sans-serif; letter-spacing: .4px; }
.ox-zastupca-panel__dva { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ox-zastupca-panel__akcie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.ox-zastupca-panel__akcie .ox-btn { font-family: 'Luckiest Guy', cursive; letter-spacing: 1px; text-transform: uppercase; }
.ox-zastupca-panel__stav { padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.ox-zastupca-panel__stav--ok { background: rgba(31, 143, 48, .12); color: #1F8F30; }
.ox-zastupca-panel__stav--chyba { background: rgba(255, 0, 29, .1); color: #D00018; }
.ox-kosik-obal { position: relative; display: inline-flex; }
.ox-ikonbtn--jazyk .ox-vlajka--mini { width: 20px; height: 14px; }
.ox-ikonbtn--zastupca { position: relative; }
@media (max-width: 600px) {
	.ox-minikosik { position: fixed; top: calc(var(--ox-lista, 0px) + 84px); right: 8px; left: 8px; width: auto; }
	.ox-jazyk-panel, .ox-zastupca-panel { position: fixed; top: calc(var(--ox-lista, 0px) + 84px); left: 8px; right: 8px; width: auto; transform: none; }
}

/* --- 35) mikro-interakcie hlavičky (hover košíka, pulz, pop počtu) ------------- */
#ox-hlavicka .ox-ikonbtn { transition: background-color .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s; }
#ox-hlavicka .ox-ikonbtn:active { transform: scale(.94); }
#ox-hlavicka .ox-ikonbtn svg { transition: transform .2s ease; }
#ox-hlavicka .ox-ikonbtn:hover svg { transform: scale(1.12); }
#ox-kosik-btn:hover svg { transform: scale(1.15) rotate(-6deg); }
#ox-hlavicka .ox-ikonbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.ox-ikonbtn--zastupca { animation: ox-pulz 2.4s ease-in-out infinite; }
.ox-ikonbtn--zastupca:hover, .ox-ikonbtn--zastupca[aria-expanded="true"] { animation: none; }
@keyframes ox-pulz { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 29, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .18); } }
.ox-kosik-pocet { transition: opacity .15s, transform .15s; }
.ox-kosik-pocet.ox-pop { animation: ox-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ox-pop { 0% { transform: scale(.4); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
.ox-minikosik { animation: ox-fadeInUp .22s ease-in; transform-origin: top right; }
@keyframes ox-fadeInUp { 0% { opacity: 0; transform: translate3d(0, 14px, 0); } 100% { opacity: 1; transform: none; } }
.ox-mk__polozka { transition: box-shadow .2s, transform .2s; }
.ox-mk__polozka:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .07); }
.ox-mk__foto img { transition: transform .25s ease; }
.ox-mk__polozka:hover .ox-mk__foto img { transform: scale(1.05) rotate(-2deg); }
.ox-mk__q { transition: background .15s, color .15s, transform .15s; }
.ox-mk__q:hover { transform: scale(1.1); }
.ox-mk__cta:hover { background: #C4081E; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(196, 8, 30, .48); }
.ox-mk__cta:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(196, 8, 30, .4); }
.ox-jazyk-panel, .ox-zastupca-panel, .ox-prevadzka-prep__panel { animation: ox-fadeInUp .22s ease-in; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ox-ikonbtn--zastupca, .ox-minikosik, .ox-jazyk-panel, .ox-zastupca-panel { animation: none; } }

/* --- 37) kalkulačka zisku je len pre prihlásených (ako oxobubbletea.eu) -------- */
.ox-kalk-zamok { text-align: center; padding: 34px 20px; border-radius: var(--sk-r-velky, 20px); background: var(--sk-povrch, #fff); box-shadow: var(--sk-tien-karta, 0 10px 30px rgba(0,0,0,.06)); }
.ox-kalk-zamok p { max-width: 52ch; margin: 0 auto 18px; color: var(--sk-text-tlmeny); }
.ox-kalk-zamok .ox-btn { margin: 4px; }

/* --- 38) päta v rovnakej červenej ako horná lišta (Peter 17. 9. 2026) ---------- */
html[data-tema] #ox-pata { background: var(--sk-hlavicka-bg, #D60019); color: #fff; }
html[data-tema] #ox-pata::before { display: none; }
html[data-tema] #ox-pata .ox-pata__stlpec h4, html[data-tema] #ox-pata a, html[data-tema] #ox-pata p,
html[data-tema] #ox-pata address, html[data-tema] #ox-pata .ox-pata__spodok { color: #fff; }
html[data-tema] #ox-pata .ox-pata__spodok { border-top-color: rgba(255, 255, 255, .22); }
html[data-tema] #ox-pata a:hover { color: #fff; opacity: 1; text-decoration: underline; }

/* --- 39) „(Red)" v menu ako horný index (značka radu, Peter 17. 9. 2026) -------- */
.ox-nav__odkaz .ox-nav__znacka { font-size: .62em; line-height: 1; vertical-align: super; margin-left: 2px; letter-spacing: .02em; opacity: .9; }
.ox-mobil-menu .ox-nav__odkaz .ox-nav__znacka { font-size: .55em; }

/* --- 40) veľkosti vo widgete (Peter 17. 9. 2026) ------------------------------
   karta + symbol väčšie, popisok na karte +100 %, titulka +30 %, lead o kúsok menší */
html[data-tema^="21"] .ox-msr--rodina-show {
	--msr-karta-w: clamp(290px, 18vw, 360px);        /* bola clamp(250px, 15.5vw, 310px) */
	--msr-karta-v: clamp(348px, 21.5vw, 430px);      /* bola clamp(300px, 18.5vw, 370px) */
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__foto { flex: 0 0 52%; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__foto img { padding: 2%; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov {
	font-size: clamp(31px, 2vw, 36px); line-height: 1.1; min-height: 0; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h1,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h2 { font-size: clamp(42px, 4.7vw, 81px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__lead {
	font-size: clamp(16px, 1.34vw, 20.2px);          /* Peter 17. 9.: ešte o kúsok väčší */
	line-height: 1.34;                                /* tesnejšie riadkovanie (bolo 1.5) */
}
/* druhý odstavec (vysvetlivka) je o 2 px menší než hlavný text */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__lead + .ox-msr__lead {
	margin-top: .1em; font-size: clamp(14px, 1.19vw, 18.1px); /* tesnejšia medzera, o 2 px menší */
}
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show { --msr-karta-w: 250px; --msr-karta-v: 300px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov { font-size: 24px; }
}

/* --- 41) bočné karty menšie + popisok vycentrovaný pod čiarou (Peter 17. 9. 2026) --- */
.ox-msr__koleso .ox-msr__karta.ox-msr__karta { --k-mierka: .88; }
.ox-msr__koleso .ox-msr__karta.ox-msr__karta--celo { --k-mierka: 1; }
/* text pod vlasovou čiarou je opticky príliš hore — vyvážime odsadenie tak,
   aby sedel v strede medzi čiarou a spodkom karty */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__telo {
	padding-top: 10px !important; padding-bottom: 10px !important;
	justify-content: center; align-items: center;
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov { margin: 0; }

/* --- 42) písmo hlavičky = písmo nadpisov (Anton), pilulka prevádzky preč (Peter 17. 9. 2026)
   „tu vsade pouzivaj FONT aj na podobnych miestach ako je na webe dole" — horná lišta,
   mobilné menu, návestia v päte a hlavičky panelov idú do displejového rezu.
   `line-height: 1.25` je povinné, inak Anton oreže slovenskú diakritiku. ------------- */
#ox-hlavicka .ox-nav__odkaz,
.ox-mobil-menu .ox-nav__odkaz {
	font-family: var(--sk-font-nadpis); font-weight: 400;
	text-transform: uppercase; letter-spacing: .045em; line-height: 1.25;
	font-size: clamp(15px, 1.15vw, 18px);
}
#ox-hlavicka .ox-nav__odkaz .ox-nav__znacka { text-transform: none; letter-spacing: 0; }
.ox-minikosik__hlava b, .ox-jazyk-panel__nadpis, .ox-zastupca-panel__nadpis,
html[data-tema^="21"] .ox-pata__stlpec:not(:first-child) h4,
html[data-tema^="21"] .ox-pata__spodok {
	font-family: var(--sk-font-nadpis); font-weight: 400; line-height: 1.25;
}
html[data-tema^="21"] .ox-pata__stlpec:not(:first-child) h4 { font-size: 13px; opacity: .72; }
/* prepínač prevádzky v hornej lište sa už nevykresľuje (výber je v košíku a v účte) */
#ox-pilulka-prevadzka-slot { display: none; }

/* --- 43) šípky vo vitríne: len veľká biela šípka (Peter 17. 9. 2026) ------------
   „namiesto tejto sypky - daj iba bielu bez pozadia a kruhu vacsiu a bielu" */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw {
	width: 68px; height: 68px; border: 0; border-radius: 0;
	background: transparent; box-shadow: none; color: #fff;
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45));
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg { width: 52px; height: 52px; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg path { stroke-width: 2.1; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw:hover {
	background: transparent; border-color: transparent; color: #fff;
	transform: translateY(-50%) scale(1.12);
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vlavo { left: clamp(-34px, -2.2vw, -12px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vpravo { right: clamp(-34px, -2.2vw, -12px); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw { width: 52px; height: 52px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg { width: 40px; height: 40px; }
}

/* --- 44) bočné karty v katalógu bez hover zväčšenia (Peter 17. 9. 2026) ---------
   Téma (21g*.css) dvíha obrázok každej karty na hover; predná karta si dôraz
   nechá, bočné majú ostať presne také, aké sú. */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim:not(.ox-msr__karta--celo):hover .ox-msr__foto img {
	transform: scale(.86);
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim:not(.ox-msr__karta--celo):hover {
	box-shadow: var(--msr-karta-tien, 0 24px 40px -18px rgba(90, 4, 0, .75));
}

/* --- 45) katalóg tvrdení o kúsok menší (Peter 17. 9. 2026) ---------------------
   „trosku zmensi toto cele o trosku aj loga o par pixelov" — karty ~8 % dole,
   symboly ešte o pár pixelov menšie (bočné aj predná). */
html[data-tema^="21"] .ox-msr--rodina-show {
	--msr-karta-w: clamp(268px, 16.6vw, 332px);
	--msr-karta-v: clamp(320px, 19.8vw, 396px);
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov {
	font-size: clamp(29px, 1.88vw, 33.5px);
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__foto img { transform: scale(.82); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim:not(.ox-msr__karta--celo):hover .ox-msr__foto img { transform: scale(.82); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim.ox-msr__karta--celo .ox-msr__foto img,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim.ox-msr__karta--celo:hover .ox-msr__foto img { transform: scale(.97); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show { --msr-karta-w: 232px; --msr-karta-v: 278px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov { font-size: 22px; }
}

/* --- 46) odsadenie odsekov a šípky ďalej od kariet (Peter 17. 9. 2026) ---------
   Medzeru medzi dvomi odsekmi textu robil `gap: 12px` na `.ox-msr__stav`, nie
   margin — sťahujeme ju späť záporným okrajom. Šípky idú ďalej od katalógu a
   kreslia sa presne ako vo verzii s rámom, len bez rámu. */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__lead + .ox-msr__lead { margin-top: -7px; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw {
	width: 58px; height: 58px;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .4));
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg { width: 44px; height: 44px; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg path { stroke-width: 2; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vlavo { left: clamp(-72px, -4.4vw, -34px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vpravo { right: clamp(-72px, -4.4vw, -34px); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw { width: 46px; height: 46px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg { width: 34px; height: 34px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vlavo { left: 0; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vpravo { right: 0; }
}

/* --- 47) karta o kúsok užšia + jemne zaoblené rohy, text o 1 px menší
   (Peter 17. 9. 2026) ---------------------------------------------------------- */
html[data-tema^="21"] .ox-msr--rodina-show {
	--msr-karta-w: clamp(246px, 15.2vw, 304px);      /* užšia = viac obdĺžnik */
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim {
	border-radius: 10px; overflow: hidden;
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__lead {
	font-size: clamp(15px, 1.27vw, 19.2px);          /* o 1 px menej */
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__lead + .ox-msr__lead {
	font-size: clamp(13px, 1.118vw, 17.1px);
}
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show { --msr-karta-w: 214px; }
}

/* --- 48) šípky menšie a o kúsok bližšie ku kartám (Peter 17. 9. 2026) ---------- */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw {
	width: 44px; height: 44px;
}
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg { width: 32px; height: 32px; }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vlavo { left: clamp(-50px, -3vw, -22px); }
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vpravo { right: clamp(-50px, -3vw, -22px); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw { width: 38px; height: 38px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg { width: 28px; height: 28px; }
}

/* --- 49) karta ešte o kúsok užšia (Peter 17. 9. 2026) -------------------------- */
html[data-tema^="21"] .ox-msr--rodina-show { --msr-karta-w: clamp(232px, 14.4vw, 288px); }
@media (max-width: 1000px) { html[data-tema^="21"] .ox-msr--rodina-show { --msr-karta-w: 204px; } }

/* --- 50) symbol na prednej karte o 2 px menší (Peter 17. 9. 2026) -------------- */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim.ox-msr__karta--celo .ox-msr__foto img,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim.ox-msr__karta--celo:hover .ox-msr__foto img {
	transform: scale(.959);
}

/* --- 51) popis na karte o 1 px menší (Peter 17. 9. 2026) ----------------------- */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov {
	font-size: clamp(28px, 1.82vw, 32.5px);
}
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__karta--claim .ox-msr__nazov { font-size: 21px; }
}

/* --- 52) šípky tenšie (Peter 17. 9. 2026) -------------------------------------- */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw svg path { stroke-width: 1.5; }

/* --- 53) úvod: písací stroj + pás tvrdení pod videom (Peter 17. 9. 2026) -------- */
html[data-tema^="21"] .ox-uvod__nadpis {
	font-size: clamp(44px, 10.8vw, 172px);           /* o kúsok menší nadpis */
}
html[data-tema^="21"] .ox-uvod--dlha .ox-uvod__nadpis {
	font-size: clamp(28px, 6vw, 98px);               /* dlhšia veta sa zmestí na dva riadky */
}
html[data-tema^="21"] .ox-uvod__nadpis .ox-uvod__riadok {
	display: block; min-height: 1.8em; text-wrap: balance;
}
html[data-tema^="21"] .ox-uvod__text { display: inline; white-space: pre-wrap; }   /* \n vo fráze = nový riadok */
/* pás tvrdení hneď pod videom: biele pozadie, červený text ako v hornej lište */
html[data-tema^="21"] .ox-uvod-obal > .ox-msr-pas--poduvodom {
	position: relative; z-index: 1;
	background: #fff; color: var(--sk-akcent);
	border-top: 0; border-bottom: 1px solid rgba(0, 0, 0, .08);
}
html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span::after { background: var(--sk-akcent); }
/* pás pod videom: bez masky (biely pruh má ísť od kraja po kraj) a hrubšie písmo */
html[data-tema^="21"] .ox-msr-pas--poduvodom {
	-webkit-mask-image: none; mask-image: none;
}
html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span {
	font-weight: 800; font-size: 14px; letter-spacing: .16em;
}

/* --- 54) titulka tvrdenia: väčší rozostup riadkov (Peter 17. 9. 2026) ----------
   „mäkčeň zasahuje do OXO nad tým“ — Anton má krátke horné dotiahnutia, preto
   dvojriadkovej titulke pridáme vzduch. */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h1,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h2 { line-height: 1.06; }

/* --- 55) ikonové tlačidlá v hornej lište sú kruhové (Peter 17. 9. 2026) -------- */
#ox-hlavicka .ox-ikonbtn,
.ox-nav__akcie .ox-ikonbtn { border-radius: 50%; }
#ox-hlavicka .ox-kosik-pocet { right: -2px; top: -2px; }

/* --- 56) mobil: šípky vitríny v okne (neskoršie pravidlá prebíjali media query) -- */
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vlavo { left: 2px; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw--vpravo { right: 2px; }
}

/* --- 57) kurzor písacieho stroja: presne vysoký ako verzálky (Peter 17. 9. 2026)
   „nech je rovnako vysoký ako text, teraz je hore orezaný“ — Anton má výšku
   verzálky ~0,73 em; inline-block na účiare presne kopíruje riadok textu. */
html[data-tema^="21"] .ox-uvod__kurzor {
	/* Anton má výšku verzálky 0,86 em (zmerané cez canvas measureText) — kurzor
	   musí byť presne taký vysoký, inak pôsobí orezaný. */
	display: inline-block; width: .085em; height: .86em; margin-left: .06em;
	vertical-align: baseline; background: #fff; border-radius: .01em;
	box-shadow: 0 0 .25em rgba(255, 255, 255, .7);
	animation: ox-uvod-kurzor .9s steps(2, jump-none) infinite;
}
/* aj pri systémovom „obmedziť pohyb“ kurzor bliká — je to súčasť písacieho stroja */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-uvod__kurzor { animation: ox-uvod-kurzor .9s steps(2, jump-none) infinite; }
}

/* --- 58) všetky vety písacieho stroja majú rovnakú veľkosť (Peter 17. 9. 2026) --
   Stupeň je zvolený tak, aby sa aj najdlhšia veta („Sme s Vami už viac ako 9 rokov 🙂“)
   zmestila na jeden riadok. */
html[data-tema^="21"] .ox-uvod__nadpis,
html[data-tema^="21"] .ox-uvod--dlha .ox-uvod__nadpis {
	font-size: clamp(30px, 6.2vw, 100px); line-height: 1.04;
}
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-uvod__nadpis,
	html[data-tema^="21"] .ox-uvod--dlha .ox-uvod__nadpis { font-size: clamp(26px, 7.4vw, 44px); }
}

/* --- 59) vizuál kampane z plagátu A2 (Peter 17. 9. 2026) -----------------------
   Nový výrez pohárov má pomer 1400 : 1339; guličky nad fotkou sú preč a poháre
   sa namiesto levitácie jemne približujú a vzďaľujú. */
.ox-vh__kampan { aspect-ratio: 1400 / 1339; }
.ox-vh__pohare { animation: ox-vh-dych 7.5s ease-in-out infinite; transform-origin: 50% 55%; }
@keyframes ox-vh-dych {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.045); }
}
/* nálepky sedia na kruhoch kampane aj pri novom pomere */
.ox-vh__nalepka--hore { top: -4%; }
.ox-vh__nalepka--dole { top: 79%; }

/* --- 60) odkazy v hornej lište hrubšie (Peter 17. 9. 2026) ---------------------
   Anton má len jeden rez, preto tučnosť dorábame syntetickým boldom prehliadača. */
#ox-hlavicka .ox-nav__odkaz,
.ox-mobil-menu .ox-nav__odkaz { font-weight: 700; }

/* --- 61) pás pod videom: väčšie a hrubšie písmo (Peter 17. 9. 2026) ------------ */
html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span {
	font-weight: 900; font-size: 17px; letter-spacing: .13em;
}
html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span::after { width: 7px; height: 7px; }
@media (max-width: 700px) {
	html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span { font-size: 14px; letter-spacing: .1em; }
}

/* --- 62) celý plagát A2 vo vizuáli kampane (Peter 17. 9. 2026) -----------------
   Plagát má byť vidieť celý, takže žiadna maska okrajov ani orez: pomer strán
   1191 : 1684, jemné zaoblenie a tieň ako vytlačený hárok, vlastné nálepky preč
   (plagát má svoje claimy). Priestor vo vitríne je vyšší, aby bol čitateľný. */
.ox-vh__kampan:has(.ox-vh__pohare--plagat) { aspect-ratio: 1191 / 1684; }
.ox-vh__pohare--plagat {
	-webkit-mask-image: none; mask-image: none;
	border-radius: 10px; box-shadow: 0 26px 60px -24px rgba(60, 0, 0, .75);
	object-fit: contain;
}
.ox-vh__kampan:has(.ox-vh__pohare--plagat) .ox-vh__nalepka { display: none; }
html[data-tema^="21"] .ox-show__vizual .ox-vh__vizual { height: clamp(420px, 46vw, 660px); padding-bottom: 18px; }
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-show__vizual .ox-vh__vizual { height: clamp(360px, 92vw, 560px); }
}

/* --- 63) plagát stojí, hýbu sa len poháre + preč s červeným rámom (Peter 17. 9. 2026)
   Vrstva `.ox-vh__pohare-vrstva` je ten istý výrez plagátu položený presne na svoje
   miesto (% podľa originálu). Okraje sú rozpustené maskou, takže jemné priblíženie
   nevytvorí šev — obsah pod ňou je identický. */
.ox-vh__pohare--plagat { animation: none; border-radius: 0; box-shadow: 0 22px 54px -26px rgba(60, 0, 0, .6); }
.ox-vh__pohare-vrstva {
	position: absolute; left: 5.038%; top: 30.879%; width: 89.841%; height: 52.553%;
	background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none;
	transform-origin: 50% 94%;
	animation: ox-vh-pohare 7.5s ease-in-out infinite;
	/* mäkké okraje: pri okraji je vrstva priehľadná, takže posun voči statickému
	   plagátu nie je vidieť (obsah je pod ňou identický) */
	-webkit-mask-image: radial-gradient(102% 100% at 50% 60%, #000 38%, transparent 86%);
	        mask-image: radial-gradient(102% 100% at 50% 60%, #000 38%, transparent 86%);
}
@keyframes ox-vh-pohare {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.018); }
}
.ox-vh--stoji .ox-vh__pohare-vrstva { animation: none; }
/* plagát nesedí na červenej dlaždici — rám preč */
.ox-show__vizual:has(.ox-vh__pohare--plagat) {
	background: none; box-shadow: none; border-radius: 0;
}
html[data-tema^="21"] .ox-show__vizual:has(.ox-vh__pohare--plagat) .ox-vh__vizual { padding: 0; }


/* --- 64) titulka tvrdenia: ešte väčší rozostup riadkov (Peter 17. 9. 2026) -----
   Diakritika Antonu (Ď, Ľ, Ý) prečnieva nad výšku verzálky, pri 1,06 sa riadky
   dotýkali. `line-height: 1.18` dáva čiarkam aj mäkčeňom vzduch. */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h1,
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__h2 { line-height: 1.18; }

/* --- 65) päta zovretá do jedného radu (Peter 17. 9. 2026) ----------------------
   „nech to nie je také roztiahnuté cez celú obrazovku“ — užší pás, menší wordmark
   a firma vedľa stĺpcov namiesto samostatného riadku nad nimi. */
html[data-tema^="21"] #ox-pata .ox-wrap { max-width: 1120px; }
html[data-tema^="21"] .ox-pata__mriezka {
	grid-template-columns: minmax(240px, 1.25fr) repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 40px);
	align-items: start;
}
html[data-tema^="21"] .ox-pata__stlpec:first-child {
	grid-column: auto; margin-bottom: 0;
}
html[data-tema^="21"] .ox-pata__stlpec:first-child h4 {
	font-size: clamp(30px, 3.1vw, 46px); line-height: 1.02; margin: 0 0 12px;
}
html[data-tema^="21"] .ox-pata__stlpec:first-child p { font-size: 14.5px !important; line-height: 1.5; }
html[data-tema^="21"] .ox-pata__stlpec:first-child address { font-size: 13px; line-height: 1.55; }
html[data-tema^="21"] .ox-pata__stlpec:not(:first-child) h4 {
	font-size: 12px; letter-spacing: .14em; padding-bottom: 8px; margin-bottom: 12px;
}
html[data-tema^="21"] .ox-pata__stlpec ul { font-size: 15px; gap: 8px; }
html[data-tema^="21"] .ox-pata__spodok { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-pata__mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-pata__stlpec:first-child { grid-column: 1 / -1; margin-bottom: 8px; }
	html[data-tema^="21"] .ox-pata__stlpec:first-child h4 { font-size: clamp(30px, 8vw, 48px); }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-pata__mriezka { grid-template-columns: minmax(0, 1fr); }
}
/* horný vzduch päty bol dimenzovaný na obrí wordmark cez celý riadok — už netreba */
html[data-tema^="21"] #ox-pata { padding-top: clamp(48px, 5vw, 76px); padding-bottom: 34px; }

/* --- 66) nadpisy sekcií: podčiarknuté „em“ potrebuje vzduch (Peter 17. 9. 2026)
   Pri `line-height: 1.02` sedela linka podčiarknutia priamo na verzálkach ďalšieho
   riadku („BEZ“ prekrývalo „NUTNOSTI“). */
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-hlava-sekcie .ox-h2,
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__text .ox-h2 {
	line-height: 1.2;
}
html[data-tema^="21"] .ox-show__text .ox-h2 em,
html[data-tema^="21"] .ox-hlava-sekcie .ox-h2 em,
html[data-tema^="21"] .ox-msr-kroky .ox-h2 em {
	text-underline-offset: 5px; text-decoration-thickness: 3px;
}

/* --- 67) tlač a poistka nábehu (Peter 17. 9. 2026) -----------------------------
   Nábeh obsahu pri skrolovaní drží prvky na `opacity: 0`, kým ich neohlási
   IntersectionObserver. Pri tlači (a v PDF) sa neskroluje, takže by sa vytlačila
   prázdna strana — v tlači preto nábeh vypíname. */
@media print {
	.ox-rv--posun, .ox-rv--maska, .ox-rv--clip {
		opacity: 1 !important; transform: none !important; clip-path: none !important;
	}
}

/* --- 68) čitateľnosť (WCAG AA) — audit 17. 9. 2026 ----------------------------
   • Odkazy v lište mali bielu na 90 % (3,91 : 1). Plná biela dáva 4,35 : 1, čo pri
     tučnom reze 17 px stačí pre veľký text; menej sa na firemnej červenej nedá.
   • Pás pod videom: #D60019 na bielej je 3,91 : 1. Tmavší odtieň značky #D60019
     dáva 4,93 : 1 a opticky je to stále tá istá červená. */
#ox-hlavicka .ox-nav__odkaz { color: #fff; }
html[data-tema^="21"] .ox-msr-pas--poduvodom { color: #D60019; }
html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span { color: #D60019; }
html[data-tema^="21"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span::after { background: #D60019; }

/* --- 69) dôvody ako dvojstĺpec: fotka vľavo, výber vpravo (Peter 18. 9. 2026) ---
   Fotka je pripnutá (sticky) a prelína sa podľa riadku, na ktorý človek ukáže.
   Riadky si držia sadzbu z bloku „dovody“, len užšie a v dvoch stĺpcoch. */
html[data-tema^="21"] .ox-dovody {
	display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(24px, 3.4vw, 64px); align-items: start;
}
html[data-tema^="21"] .ox-dovody__obraz {
	position: sticky; top: clamp(84px, 11vh, 118px);
	aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
	background: var(--sk-krem, #FFF7E6);
	box-shadow: 0 24px 56px -28px rgba(60, 0, 0, .55);
}
html[data-tema^="21"] .ox-dovody__foto {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transform: scale(1.06); transition: opacity .5s var(--sk-prechod), transform 1.1s var(--sk-prechod);
}
html[data-tema^="21"] .ox-dovody__foto--akt { opacity: 1; transform: none; }
/* riadky: číslo + text pod sebou (stĺpec je užší než predtým celá šírka) */
html[data-tema^="21"] .ox-dovody .ox-panel {
	grid-template-columns: clamp(38px, 3.4vw, 62px) minmax(0, 1fr);
	gap: clamp(10px, 1.4vw, 26px); align-items: start; cursor: pointer;
	transition: opacity .35s var(--sk-prechod);
}
html[data-tema^="21"] .ox-dovody .ox-panel .ox-h3 { font-size: clamp(21px, 2.2vw, 33px); }
html[data-tema^="21"] .ox-dovody .ox-panel p { grid-column: 2; margin-top: 8px; max-width: 52ch; }
html[data-tema^="21"] .ox-dovody .ox-panel:not(.ox-panel--akt) { opacity: .62; }
html[data-tema^="21"] .ox-dovody .ox-panel--akt { opacity: 1; }
html[data-tema^="21"] .ox-dovody .ox-panel--akt::after { width: 100%; }
html[data-tema^="21"] .ox-dovody .ox-panel--akt::before { transform: translateX(6px); }
html[data-tema^="21"] .ox-dovody .ox-panel:focus-visible { outline: 2px solid var(--sk-akcent); outline-offset: 4px; }
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-dovody { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	html[data-tema^="21"] .ox-dovody__obraz { aspect-ratio: 16 / 10; position: relative; top: 0; }
	html[data-tema^="21"] .ox-dovody .ox-panel:not(.ox-panel--akt) { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-dovody__foto { transition-duration: .25s, .25s; }
}
/* aktívny riadok (fokus, ťuknutie, skrolovanie na mobile) vyzerá ako pri myši */
html[data-tema^="21g"] .ox-dovody .ox-panel--akt::after { width: auto; transform: scaleX(1); }
html[data-tema^="21g"] .ox-dovody .ox-panel--akt::before { color: #fff; transform: translateX(6px); }
html[data-tema^="21g"] .ox-dovody .ox-panel--akt .ox-h3,
html[data-tema^="21g"] .ox-dovody .ox-panel--akt p { color: #fff; }
html[data-tema^="21"] .ox-dovody .ox-panel:not(.ox-panel--akt) { opacity: .8; }

/* =============================================================================
   WIDGETY (18. 9. 2026, Peter „sprav všetko“) — 10 widgetov podľa promptov zo
   superdesign.dev a komponentov z 21st.dev, prispôsobené OXO. Zdroje sú pri každom
   bloku. Pravidlá idú na koniec súboru, aby prebili staršie štýly rovnakých tried.
   ========================================================================== */
.ox-kbd { display: inline-block; font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace; padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .12); color: #444; }

/* --- W1 HLAVIČKA: utility pás · hľadacie pole · rail (Forge.Supply utility nav, 21st #27109) --- */
#ox-hlavicka .ox-util { background: #141414; color: #fff; font-size: 12.5px; }
#ox-hlavicka .ox-util__vnutro { max-width: var(--sk-maxw); margin-inline: auto; padding: 0 var(--sk-pad); height: 34px; display: flex; align-items: center; gap: 22px; white-space: nowrap; overflow: hidden; }
#ox-hlavicka .ox-util__pol { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .78); text-decoration: none; }
#ox-hlavicka .ox-util__pol svg { width: 14px; height: 14px; flex: none; opacity: .8; }
#ox-hlavicka .ox-util__pol b { color: #fff; font-weight: 600; }
#ox-hlavicka a.ox-util__pol:hover { color: #fff; }
#ox-hlavicka .ox-util__pol--akcent { color: var(--sk-ruz, #FFD9D6); }
#ox-hlavicka .ox-util__medzera { flex: 1; }
@media (max-width: 1080px) { #ox-hlavicka .ox-util__pol--md { display: none; } }
@media (max-width: 720px) { #ox-hlavicka .ox-util { display: none; } }
.ox-hladat-pole {
	display: none; align-items: center; gap: 10px; flex: 1 1 auto; max-width: 440px; min-width: 200px; height: 44px; margin-left: auto;
	padding: 0 6px 0 14px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); color: #fff; cursor: text;
	font: 500 13.5px/1 var(--sk-font-text); text-align: left; transition: background .2s var(--sk-prechod), border-color .2s var(--sk-prechod);
}
.ox-hladat-pole:hover, .ox-hladat-pole:focus-visible { background: #fff; color: var(--sk-text); border-color: #fff; outline: none; }
.ox-hladat-pole:hover .ox-kbd, .ox-hladat-pole:focus-visible .ox-kbd { background: rgba(0, 0, 0, .06); color: #444; }
.ox-hladat-pole__ik { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ox-hladat-pole__ik svg { width: 18px; height: 18px; }
.ox-hladat-pole__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.ox-hladat-pole .ox-kbd { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); color: #fff; }
@media (min-width: 1081px) { .ox-hladat-pole { display: inline-flex; } #ox-hlavicka #ox-hladat-btn { display: none; } .ox-nav__akcie { margin-left: 0; } }
#ox-hlavicka .ox-rail { background: var(--sk-bg, #fff); border-bottom: 1px solid var(--sk-linka); }
#ox-hlavicka .ox-rail__vnutro { max-width: var(--sk-maxw); margin-inline: auto; padding: 0 var(--sk-pad); height: 40px; display: flex; align-items: stretch; gap: clamp(14px, 1.8vw, 28px); overflow-x: auto; scrollbar-width: none; }
#ox-hlavicka .ox-rail__vnutro::-webkit-scrollbar { display: none; }
#ox-hlavicka .ox-rail__odkaz { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--sk-font-text); color: var(--sk-text-tlmeny); white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; padding: 0 2px; }
#ox-hlavicka .ox-rail__odkaz:hover { color: var(--sk-text); }
#ox-hlavicka .ox-rail__odkaz--aktivny { color: var(--sk-text); border-bottom-color: var(--sk-akcent); }
#ox-hlavicka .ox-rail__odkaz--hot { color: var(--sk-akcent-tmavy); }
#ox-hlavicka .ox-rail__odkaz--hot i { font-style: normal; background: var(--sk-akcent); color: #fff; font: 800 9px/1 var(--sk-font-text); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; }
#ox-hlavicka .ox-rail__odkaz--vpravo { margin-left: auto; }
@media (max-width: 720px) { #ox-hlavicka .ox-rail__odkaz--vpravo { display: none; } }
/* mobilné menu začína pod trojvrstvovou hlavičkou */
.ox-mobil-menu { inset: calc(var(--ox-lista, 0px) + 74px) 0 0 0; }
@media (min-width: 721px) { .ox-mobil-menu { inset: calc(var(--ox-lista, 0px) + 74px + 34px + 40px) 0 0 0; } }

/* --- W2 HĽADANIE ako ⌘K paleta (superdesign „Modal: command palette“, 21st #2075) --- */
.ox-hladanie.ox-paleta { position: fixed; inset: 0; z-index: 2147483000; background: rgba(20, 3, 2, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: start center; padding: clamp(40px, 9vh, 90px) 16px 16px; }
.ox-hladanie.ox-paleta[hidden] { display: none; }
.ox-paleta .ox-pal { width: min(720px, 100%); max-height: min(78vh, 640px); background: #fff; color: var(--sk-text); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .35); }
.ox-pal__vstup { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sk-linka); }
.ox-pal__vstup > svg { width: 20px; height: 20px; color: var(--sk-text-tlmeny); flex: none; }
.ox-pal__vstup .ox-input { flex: 1; min-height: 44px; font-size: 17px; border: 0; background: transparent; padding: 0; }
.ox-pal__vstup .ox-input:focus { box-shadow: none; outline: none; }
.ox-pal__esc { cursor: pointer; }
.ox-pal__zoznam { overflow-y: auto; padding: 6px 8px 10px; }
.ox-pal__skupina { padding: 12px 10px 4px; font: 700 10.5px/1 var(--sk-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
.ox-pal__riadok { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; color: var(--sk-text); text-decoration: none; }
.ox-pal__riadok:hover, .ox-pal__riadok--akt { background: var(--sk-krem, #FFF7E6); box-shadow: inset 0 0 0 1px rgba(255, 0, 29, .25); }
.ox-pal__ik { width: 30px; height: 30px; border-radius: 8px; background: #f3ede8; display: grid; place-items: center; flex: none; color: var(--sk-text-tlmeny); overflow: hidden; }
.ox-pal__ik svg { width: 16px; height: 16px; }
.ox-pal__ik img { width: 100%; height: 100%; object-fit: cover; }
.ox-pal__nazov { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-pal__meta { margin-left: auto; font-size: 12px; color: var(--sk-text-tlmeny); white-space: nowrap; }
.ox-pal__meta--cnt { background: rgba(255, 0, 29, .1); color: var(--sk-akcent); font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 999px; }
.ox-pal__riadok--viac { justify-content: center; color: var(--sk-akcent-tmavy); font-weight: 700; font-size: 13.5px; }
.ox-pal__nic { padding: 10px 12px 4px; margin: 0; font-size: 14px; color: var(--sk-text-tlmeny); }
.ox-pal__nic a { color: var(--sk-akcent-tmavy); font-weight: 600; }
.ox-pal__pata { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--sk-linka); font-size: 12px; color: var(--sk-text-tlmeny); background: #fbf8f4; align-items: center; }
.ox-pal__pata .ox-kbd { margin-right: 4px; }
.ox-pal__posledne { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-pal__posledne a { color: var(--sk-text); text-decoration: none; }
.ox-pal__posledne a:hover { color: var(--sk-akcent); }
@media (max-width: 600px) { .ox-hladanie.ox-paleta { padding: 10px; align-items: start; } .ox-paleta .ox-pal { max-height: 86vh; } .ox-pal__pata { display: none; } .ox-pal__meta { display: none; } }

/* --- W3 MINI-KOŠÍK drawer (superdesign „Cart Drawer: Upselling“, 21st Drawer #11442) --- */
.ox-mk-overlay { position: fixed; inset: 0; z-index: 2147482800; background: rgba(20, 3, 2, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ox-mk-overlay[hidden] { display: none; }
.ox-minikosik, .ox-pilulka__kosik-obal .ox-minikosik { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(440px, 100vw) !important; max-height: none !important; z-index: 2147482900 !important; border-radius: 0 !important; background: #fff; box-shadow: -30px 0 60px rgba(0, 0, 0, .3); display: flex; flex-direction: column; padding: 0 !important; transform: none !important; animation: ox-mk-in .32s var(--sk-prechod); overflow: hidden; }
.ox-minikosik[hidden] { display: none !important; }
@keyframes ox-mk-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ox-mk-otvoreny body, html.ox-mk-otvoreny { overflow: hidden; }
.ox-minikosik .ox-mk__hlava { display: flex; align-items: center; gap: 10px; padding: 18px 22px !important; border-bottom: 1px solid var(--sk-linka); background: #fff; }
.ox-minikosik .ox-mk__titul { font: 400 24px/1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--sk-text); }
.ox-minikosik .ox-mk__pocet { margin-left: 4px; font: 700 12px/1 var(--sk-font-text) !important; letter-spacing: .04em; color: var(--sk-text-tlmeny) !important; background: none !important; text-transform: uppercase; }
.ox-minikosik .ox-mk__zavri { margin-left: auto; order: 9; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sk-linka); background: #fff; cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.ox-minikosik .ox-mk__zavri:hover { background: var(--sk-akcent); color: #fff; border-color: var(--sk-akcent); }
.ox-mk__meter { padding: 14px 22px; background: var(--sk-krem, #FFF7E6); border-bottom: 1px solid var(--sk-linka); }
.ox-mk__meter[hidden] { display: none; }
.ox-mk__meter-t { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-bottom: 8px; color: var(--sk-text); }
.ox-mk__meter-t b { color: var(--sk-akcent); }
.ox-mk__meter-bar { height: 8px; border-radius: 8px; background: #eee1d9; overflow: hidden; }
.ox-mk__meter-bar i { display: block; height: 100%; background: var(--sk-akcent); border-radius: 8px; transition: width .6s var(--sk-prechod); }
.ox-minikosik .ox-mk__zoznam { flex: 1 1 auto; max-height: none !important; overflow-y: auto; padding: 0 !important; }
.ox-minikosik .ox-mk__polozka { grid-template-columns: 64px minmax(0, 1fr) !important; padding: 16px 22px !important; border-bottom: 1px solid var(--sk-linka); border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
.ox-minikosik .ox-mk__foto { width: 64px !important; height: 64px !important; border-radius: 12px !important; }
.ox-minikosik .ox-mk__nazov { font: 600 14.5px/1.3 var(--sk-font-text) !important; letter-spacing: 0 !important; text-transform: none; }
.ox-minikosik .ox-mk__prevadzka { padding: 10px 22px 0; }
.ox-mk__zostava { margin: 14px 22px; border: 1.5px dashed rgba(255, 0, 29, .5); border-radius: 14px; padding: 12px 14px; background: rgba(255, 0, 29, .04); }
.ox-mk__zostava[hidden] { display: none; }
.ox-mk__zostava-h { font: 700 13.5px/1.2 var(--sk-font-text); margin-bottom: 6px; }
.ox-mk__zostava .ox-bt { border: 0; padding: 0; background: none; }
.ox-mk__pata { padding: 16px 22px 18px; border-top: 1px solid var(--sk-linka); background: #fff; }
.ox-minikosik .ox-mk__spolu { padding: 0 0 12px !important; margin: 0; border: 0 !important; font-size: 15px; }
.ox-minikosik .ox-mk__spolu strong { font-size: 20px; font-weight: 800 !important; }
.ox-minikosik .ox-mk__cta { padding: 18px !important; border-radius: 6px !important; font: 700 14px/1 var(--sk-font-text) !important; letter-spacing: .04em; text-transform: uppercase; }
.ox-minikosik .ox-mk__prazdny { padding: 40px 22px; }

/* --- W4 COOKIES karta (superdesign „Consent that earns the click“, 21st #26801) --- */
.ox-cookies { position: fixed; left: 20px; right: auto; bottom: 20px; width: min(440px, calc(100vw - 40px)); transform: none; background: #fff; color: var(--sk-text); border-radius: 18px; padding: 20px 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06); display: block; font-size: 13.5px; z-index: 2147482950; }
.ox-cookies__h { margin: 0 0 8px; font: 400 20px/1 Anton, Impact, sans-serif; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.ox-cookies p { margin: 0 0 14px; line-height: 1.5; color: var(--sk-text-tlmeny); flex: none; }
.ox-cookies__kat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--sk-linka); border-radius: 12px; margin-bottom: 8px; }
.ox-cookies__kat b { font-size: 13.5px; display: block; }
.ox-cookies__kat small { font-size: 11.5px; color: var(--sk-text-tlmeny); }
.ox-tg { width: 44px; height: 26px; border-radius: 999px; background: #ddd; position: relative; flex: none; border: 0; cursor: pointer; padding: 0; transition: background .25s; }
.ox-tg::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .25s cubic-bezier(.16, 1, .3, 1); }
.ox-tg--on { background: var(--sk-akcent); }
.ox-tg--on::after { left: 21px; }
.ox-tg--lock { background: #bfb7b0; cursor: default; }
.ox-tg--lock::after { left: 21px; content: '✓'; display: grid; place-items: center; font-size: 12px; color: #777; }
.ox-cookies__tlacidla { display: flex; gap: 8px; margin-top: 14px; }
.ox-cookies__tlacidla .ox-btn { flex: 1; }
.ox-cookies .ox-btn--obrys { color: var(--sk-text); border-color: var(--sk-linka); }
.ox-cookies .ox-btn--obrys:hover { background: var(--sk-text); color: #fff; }
.ox-cookies__pozn { margin: 12px 0 0 !important; font-size: 11.5px !important; text-align: center; }
.ox-cookies a { color: var(--sk-text-tlmeny) !important; text-decoration: underline; }
@media (max-width: 560px) { .ox-cookies { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 16px; } }
.ox-cookies-otvorene .ox-pohar, .ox-cookies-otvorene .ox-dock { bottom: 18px; }
@media (max-width: 560px) { .ox-cookies-otvorene .ox-dock { bottom: calc(18px + var(--ox-cookies-h, 0px)); } }

/* --- W5 TLAČIDLÁ: stavy (superdesign „Stateful button system“ + „Jelly Squish“) --- */
.ox-btn { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s var(--sk-prechod), background .2s var(--sk-prechod), color .2s var(--sk-prechod); }
.ox-btn--hlavne:hover:not(:disabled) { box-shadow: 0 12px 26px -12px rgba(255, 0, 29, .75); }
.ox-btn:active:not(:disabled) { transform: scale(.96) !important; }
.ox-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sk-bg, #fff), 0 0 0 6px var(--sk-akcent) !important; }
.ox-btn--hotovo, .ox-btn--hotovo:hover { background: #0a7a2f !important; border-color: #0a7a2f !important; color: #fff !important; transform: none !important; }
.ox-btn:disabled { transform: none !important; }

/* --- W6 KARTA PRODUKTU (21st Product Card #26136) --- */
.ox-produkt__stitky .ox-odznak { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--sk-akcent); color: #fff; }
.ox-odznak--tmavy { background: var(--sk-text) !important; color: #fff !important; }
.ox-odznak--akcia { background: #b8860b !important; }
.ox-produkt__meta { margin: -2px 0 0; font-size: 12.5px; color: var(--sk-text-tlmeny); }
.ox-cena__dph { font-family: var(--sk-font-text); font-size: 11px; color: var(--sk-text-tlmeny); font-weight: 500; margin-left: auto; }
.ox-cena__zamok { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sk-font-text); color: var(--sk-text-tlmeny); background: #f5efe9; border-radius: 999px; padding: 6px 10px; }
.ox-produkt__akcie { align-items: center; }
.ox-produkt__quick { display: inline-flex; align-items: center; border: 1.5px solid var(--sk-linka); border-radius: 999px; overflow: hidden; flex: none; background: #fff; }
.ox-produkt__quick button { width: 32px; height: 36px; border: 0; background: none; cursor: pointer; font: 700 16px/1 var(--sk-font-text); color: var(--sk-text); }
.ox-produkt__quick button:hover { background: var(--sk-krem, #FFF7E6); color: var(--sk-akcent); }
.ox-produkt__quick output { width: 28px; text-align: center; font: 700 14px/1 var(--sk-font-text); }
.ox-produkt__akcie .ox-btn--plne { width: auto; flex: 1 1 auto; }
.ox-produkt--vypredane .ox-produkt__foto img { filter: grayscale(.6); opacity: .8; }
.ox-produkt:hover { border-color: rgba(255, 0, 29, .35); }

/* --- W7 DOCK okolo pohára (superdesign „Magnification Dock“, 21st FAB #24691) --- */
.ox-dock { position: fixed; right: 20px; bottom: 18px; z-index: 2147482900; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.ox-dock .ox-pohar { position: static !important; pointer-events: auto; }
.ox-dock__mini { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 6px; opacity: 0; transform: translateX(14px) scale(.9); transition: opacity .25s var(--sk-prechod), transform .3s var(--sk-prechod); pointer-events: none; }
.ox-dock--vidno:hover .ox-dock__mini, .ox-dock--vidno:focus-within .ox-dock__mini, .ox-dock--otvoreny .ox-dock__mini { opacity: 1; transform: none; pointer-events: auto; }
.ox-dock__b { position: relative; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--sk-linka); background: #fff; color: var(--sk-text); cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.ox-dock__b svg { width: 22px; height: 22px; }
.ox-dock__b:hover { transform: translateY(-8px) scale(1.16); background: var(--sk-akcent); color: #fff; border-color: var(--sk-akcent); }
.ox-dock__b::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(15, 15, 15, .9); color: #fff; font: 600 10.5px/1 var(--sk-font-text); letter-spacing: .06em; padding: 6px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ox-dock__b:hover::after, .ox-dock__b:focus-visible::after { opacity: 1; }
.ox-dock__pocet { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sk-akcent); color: #fff; font: 800 10px/18px var(--sk-font-text); text-align: center; }
.ox-dock__pocet[hidden] { display: none; }
@media (hover: none) { .ox-dock__b::after { display: none; } .ox-dock--vidno:hover .ox-dock__mini { opacity: 0; pointer-events: none; } .ox-dock--otvoreny .ox-dock__mini { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } }
@media (max-width: 560px) { .ox-dock { right: 10px; bottom: 10px; gap: 8px; } .ox-dock__b { width: 44px; height: 44px; border-radius: 13px; } }

/* --- W8 FILTRE segment + FAQ číslované (superdesign „Index / FAQ — Numbered Swiss“) --- */
.ox-chipy { display: inline-flex; flex-wrap: wrap; gap: 6px; background: #f5efe9; padding: 6px; border-radius: 999px; margin: 10px 0; }
.ox-chipy--znacky { margin-top: 22px; }
.ox-chipy .ox-chip { border: 0; background: transparent; padding: 10px 16px; border-radius: 999px; font: 700 12.5px/1 var(--sk-font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--sk-text-tlmeny); display: inline-flex; align-items: center; gap: 8px; }
.ox-chipy .ox-chip:hover { background: #fff; color: var(--sk-text); }
.ox-chipy .ox-chip[aria-pressed="true"] { background: var(--sk-text); color: #fff; }
.ox-chipy .ox-chip [data-pocet] { background: rgba(0, 0, 0, .06); border-radius: 999px; padding: 2px 7px; font-size: 11px; color: inherit; }
.ox-chipy .ox-chip[aria-pressed="true"] [data-pocet] { background: rgba(255, 255, 255, .2); }
.ox-chipy .ox-chip [data-pocet]:empty { display: none; }
.ox-faq__zoznam { border-top: 1.5px solid var(--sk-text) !important; max-width: 960px; }
.ox-faq__otazka { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 18px; align-items: start; padding: clamp(18px, 1.8vw, 24px) 0 !important; font-family: var(--sk-font-text) !important; text-transform: none !important; }
.ox-faq__c { font: 600 14px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-text-tlmeny); font-variant-numeric: tabular-nums; padding-top: 3px; }
.ox-faq__q { font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--sk-font-text); letter-spacing: -.01em; color: var(--sk-text); }
.ox-faq__sip { width: 22px !important; height: 22px !important; border: 0 !important; border-radius: 0 !important; background: none !important; justify-self: end; margin-top: 3px; }
.ox-faq__sip::before { width: 22px !important; height: 1.5px !important; background: var(--sk-text) !important; }
.ox-faq__sip::after { width: 1.5px !important; height: 22px !important; background: var(--sk-text) !important; }
.ox-faq__polozka[open] .ox-faq__sip { background: none !important; }
.ox-faq__polozka[open] .ox-faq__sip::before { background: var(--sk-akcent) !important; }
.ox-faq__polozka[open] .ox-faq__sip::after { transform: translate(-50%, -50%) scaleY(0) !important; }
.ox-faq__odpoved { padding: 0 60px clamp(16px, 1.8vw, 24px) 74px !important; }
@media (max-width: 620px) { .ox-faq__otazka { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 12px; } .ox-faq__odpoved { padding: 0 0 18px 46px !important; } }

/* --- W9 TOAST + HLÁŠKA ZOSTAVY (superdesign „Confirmation dialogs…“, 21st Toast #24297) --- */
#ox-toasty { right: 22px; bottom: 22px; gap: 10px; }
.ox-toast { position: relative; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: min(380px, calc(100vw - 44px)); padding: 12px 14px 14px !important; border-radius: 14px !important; background: #fff !important; color: var(--sk-text) !important; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); overflow: hidden; font-size: 14px; }
.ox-toast__ik { width: 34px; height: 34px; border-radius: 50%; background: var(--sk-text); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.ox-toast--ok .ox-toast__ik { background: #0a7a2f; }
.ox-toast--chyba .ox-toast__ik { background: var(--sk-akcent); }
.ox-toast__telo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ox-toast__telo b { font-weight: 600; font-size: 14px; line-height: 1.3; }
.ox-toast__telo small { color: var(--sk-text-tlmeny); font-size: 12px; line-height: 1.35; }
.ox-toast__akcia { border: 0; background: none; cursor: pointer; font: 700 12px/1 var(--sk-font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--sk-akcent); padding: 8px 6px; }
.ox-toast__pas { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sk-akcent); transform-origin: left; animation: ox-toast-pas linear forwards; }
.ox-toast--ok .ox-toast__pas { background: #0a7a2f; }
@keyframes ox-toast-pas { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* hláška zostavy (validátor): riadky ako zoznam „máte · treba · + Pridať“ */
.ox-bt { border: 1px solid var(--sk-linka) !important; border-radius: 16px !important; background: #fff !important; padding: 18px 20px !important; }
.ox-bt .bt-notice-title { font-family: Anton, Impact, sans-serif; text-transform: uppercase; font-size: 20px !important; letter-spacing: .01em; }
.ox-bt .bt-intro { color: var(--sk-text-tlmeny) !important; }
.ox-bt .bt-breakdown { gap: 0 !important; }
.ox-bt .bt-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 12px 0 !important; border-top: 1px solid var(--sk-linka); border-radius: 0 !important; background: none !important; }
.ox-bt .bt-quick-add, .ox-bt button[data-bt-pid] { background: var(--sk-akcent) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 8px 12px !important; font: 700 12px/1 var(--sk-font-text) !important; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.ox-bt .bt-quick-add:hover { background: var(--sk-akcent-tmavy) !important; }
.ox-bt .bt-quick-add:disabled { opacity: .5; }
.ox-bt--mk { padding: 0 !important; border: 0 !important; }
.ox-bt--mk .bt-notice-header, .ox-bt--mk .bt-details { display: none; }
.ox-bt--mk .bt-intro { font-size: 12.5px !important; margin: 0 0 6px !important; }
.ox-bt--mk .bt-row { padding: 8px 0 !important; font-size: 13px; }

/* --- W10 PÄTA (superdesign „Ember & Cream editorial footer“, 21st Newsletter Band #21497) --- */
.ox-pata__pas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 0 0 36px; border-bottom: 1px solid rgba(255, 255, 255, .25); margin-bottom: 34px; }
.ox-pata__pas-h { margin: 0 0 8px; font: 400 clamp(30px, 3vw, 44px)/.95 Anton, Impact, sans-serif; text-transform: uppercase; color: #fff; }
.ox-pata__pas p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.5; }
.ox-pata__form { display: flex; gap: 8px; background: rgba(0, 0, 0, .22); padding: 8px; border-radius: 999px; position: relative; flex-wrap: wrap; }
.ox-pata__input { flex: 1 1 180px; border: 0; border-radius: 999px; padding: 14px 18px; font: 500 14px/1 var(--sk-font-text); min-width: 0; color: var(--sk-text); }
.ox-pata__input:focus { outline: 2px solid #fff; }
.ox-pata__pasca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ox-pata__odoberat { background: #fff; color: var(--sk-akcent); border: 0; border-radius: 999px; padding: 14px 20px; font: 800 13px/1 var(--sk-font-text); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.ox-pata__odoberat:hover { background: var(--sk-krem, #FFF7E6); }
.ox-pata__stav { flex: 1 0 100%; font-size: 12.5px; color: rgba(255, 255, 255, .85); padding: 0 12px; min-height: 0; }
.ox-pata__stav:empty { display: none; }
.ox-pata__stav--ok { color: #d9ffd9; font-weight: 700; }
.ox-pata__stav--chyba { color: #ffe0dc; font-weight: 700; }
.ox-pata__soc { display: flex !important; gap: 10px; margin-top: 14px; }
.ox-pata__soc a { width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 0, 0, .25); display: grid !important; place-items: center; font: 800 13px/1 var(--sk-font-text); color: #fff; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s var(--sk-prechod), background .2s; }
.ox-pata__soc a:hover { transform: translateY(-3px); background: rgba(0, 0, 0, .4); }
.ox-pata__spodok { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ox-pata__status { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .25); border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: 12px; }
.ox-pata__status i { width: 8px; height: 8px; border-radius: 50%; background: #7CFF8E; box-shadow: 0 0 0 3px rgba(124, 255, 142, .3); }
@media (max-width: 900px) { .ox-pata__pas { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
/* dock: tip pohára hore (vľavo by prekrýval mini tlačidlá) */
.ox-dock .ox-pohar::before { right: 50%; top: auto; bottom: calc(100% + 6px); transform: translateX(50%); }

/* --- 70) štyri varianty widgetu „krok za krokom“ (Peter 18. 9. 2026) -----------
   Prepínajú sa cez `?kroky=a|b|c|d` (zapamätá sa). Spoločné: čipy a počítadlo sú
   v markupe vždy, každá varianta si zapne to svoje. */
.ox-priprava__cipy { display: none; }
.ox-priprava__pocitadlo { display: none; }
.ox-priprava__cip {
	display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
	border: 1px solid var(--sk-linka); background: #fff; color: var(--sk-text);
	border-radius: 999px; padding: 9px 16px; font-family: var(--sk-font-text); font-size: 13px;
	transition: background .3s var(--sk-prechod), color .3s var(--sk-prechod), border-color .3s var(--sk-prechod);
}
.ox-priprava__cip b { font-family: var(--sk-font-nadpis); font-size: 13px; letter-spacing: .06em; }
.ox-priprava__cip--akt { background: var(--sk-akcent); border-color: var(--sk-akcent); color: #fff; }

/* ---- A · filmový pás: video cez celú šírku, pod ním časová os --------------- */
html[data-tema^="21"] .ox-priprava--a .ox-priprava__javisko { display: block; }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: 16 / 9; height: auto; width: 100%; border-radius: 18px;
}
html[data-tema^="21"] .ox-priprava--a .ox-priprava__video { object-position: 50% 42%; }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__kroky {
	display: block; margin-top: 22px; border-top: 1px solid var(--sk-linka); padding-top: 18px;
}
html[data-tema^="21"] .ox-priprava--a .ox-priprava__krok {
	display: none; border: 0; background: none; padding: 0; opacity: 1; transform: none; box-shadow: none;
	grid-template-columns: minmax(0, 1fr);
}
html[data-tema^="21"] .ox-priprava--a .ox-priprava__krok--akt { display: block; }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__krok .ox-priprava__cislo { display: none; }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__krok b { font-size: clamp(22px, 2.4vw, 34px); }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__krok small { font-size: 15.5px; max-width: 62ch; }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__cipy {
	display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px;
}

/* ---- B · pokojný dvojstĺpec: bez dosiek, zvislá linka --------------------- */
html[data-tema^="21"] .ox-priprava--b .ox-priprava__javisko { align-items: start; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
html[data-tema^="21"] .ox-priprava--b .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: 4 / 5; height: auto; width: 100%; border-radius: 16px;
}
html[data-tema^="21"] .ox-priprava--b .ox-priprava__kroky { gap: 0; border-left: 1px solid var(--sk-linka); }
html[data-tema^="21"] .ox-priprava--b .ox-priprava__krok {
	border: 0; border-radius: 0; background: none; box-shadow: none; opacity: .55;
	padding: 16px 0 16px 22px; margin-left: -1px; border-left: 2px solid transparent; transform: none;
	grid-template-columns: 40px minmax(0, 1fr);
}
html[data-tema^="21"] .ox-priprava--b .ox-priprava__krok--akt { opacity: 1; border-left-color: var(--sk-akcent); }
html[data-tema^="21"] .ox-priprava--b .ox-priprava__cislo {
	width: 34px; height: 34px; background: none; color: var(--sk-akcent-tmavy);
	border: 1px solid var(--sk-linka); font-size: 14px;
}
html[data-tema^="21"] .ox-priprava--b .ox-priprava__krok--akt .ox-priprava__cislo { background: var(--sk-akcent); border-color: var(--sk-akcent); color: #fff; }

/* ---- C · jedna doska s červeným pásom, kroky ako harmonika ---------------- */
html[data-tema^="21"] .ox-priprava--c .ox-priprava__javisko {
	background: #fff; border-radius: 20px; overflow: hidden; align-items: stretch; gap: 0;
	box-shadow: 0 30px 60px -34px rgba(60, 0, 0, .5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
html[data-tema^="21"] .ox-priprava--c .ox-hlava-sekcie {
	background: var(--sk-akcent); color: #fff; border-radius: 20px 20px 0 0;
	padding: clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 30px); margin-bottom: 0; align-items: center;
}
html[data-tema^="21"] .ox-priprava--c .ox-hlava-sekcie .ox-h2,
html[data-tema^="21"] .ox-priprava--c .ox-hlava-sekcie .ox-oko { color: #fff; }
html[data-tema^="21"] .ox-priprava--c .ox-hlava-sekcie .ox-h2 { font-size: clamp(22px, 2.4vw, 34px); }
html[data-tema^="21"] .ox-priprava--c .ox-priprava__pocitadlo {
	display: inline-block; color: #fff; font-family: var(--sk-font-nadpis); letter-spacing: .12em; font-size: 14px; opacity: .9;
}
html[data-tema^="21"] .ox-priprava--c .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: auto; height: 100%; width: 100%; border-radius: 0; min-height: 420px;
}
html[data-tema^="21"] .ox-priprava--c .ox-priprava__kroky { gap: 0; padding: clamp(10px, 1.4vw, 18px) clamp(16px, 2vw, 26px); align-self: center; }
html[data-tema^="21"] .ox-priprava--c .ox-priprava__krok {
	border: 0; border-bottom: 1px solid var(--sk-linka); border-radius: 0; background: none;
	box-shadow: none; transform: none; opacity: .62; padding: 14px 0; grid-template-columns: 38px minmax(0, 1fr);
}
html[data-tema^="21"] .ox-priprava--c .ox-priprava__krok:last-child { border-bottom: 0; }
html[data-tema^="21"] .ox-priprava--c .ox-priprava__krok--akt { opacity: 1; }
html[data-tema^="21"] .ox-priprava--c .ox-priprava__krok small {
	max-height: 0; overflow: hidden; margin: 0; opacity: 0;
	transition: max-height .45s var(--sk-prechod), opacity .35s var(--sk-prechod), margin .35s var(--sk-prechod);
}
html[data-tema^="21"] .ox-priprava--c .ox-priprava__krok--akt small { max-height: 90px; opacity: 1; margin-top: 6px; }
html[data-tema^="21"] .ox-priprava--c .ox-priprava__cislo { width: 30px; height: 30px; font-size: 13px; }

/* ---- D · titulky vo videu + rad čipov pod ním ----------------------------- */
html[data-tema^="21"] .ox-priprava--d .ox-priprava__javisko { display: block; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: 16 / 9; height: auto; width: 100%; border-radius: 18px;
}
html[data-tema^="21"] .ox-priprava--d .ox-priprava__video { object-position: 50% 42%; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__javisko--video { position: relative; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__kroky {
	position: absolute; left: clamp(14px, 2vw, 30px); right: clamp(14px, 2vw, 30px); bottom: clamp(40px, 5vw, 64px);
	z-index: 3; display: block; pointer-events: none;
}
html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok {
	display: none; border: 0; box-shadow: none; opacity: 1; transform: none;
	background: rgba(12, 2, 1, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
	border-radius: 14px; padding: 14px 18px; max-width: 46ch; grid-template-columns: minmax(0, 1fr);
}
html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok--akt { display: block; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok .ox-priprava__cislo { display: none; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok b { color: #fff; font-size: clamp(18px, 1.9vw, 26px); }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok small { color: rgba(255, 255, 255, .88); font-size: 14.5px; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__cipy { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }

@media (max-width: 900px) {
	html[data-tema^="21"] .ox-priprava--b .ox-priprava__javisko,
	html[data-tema^="21"] .ox-priprava--c .ox-priprava__javisko { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-priprava--c .ox-priprava__film.ox-priprava__film--video { min-height: 0; aspect-ratio: 16 / 10; }
	html[data-tema^="21"] .ox-priprava--d .ox-priprava__kroky { position: static; margin-top: 12px; }
	html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok { background: var(--sk-povrch, #fff); color: var(--sk-text); -webkit-backdrop-filter: none; backdrop-filter: none; }
	html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok b { color: var(--sk-text); }
	html[data-tema^="21"] .ox-priprava--d .ox-priprava__krok small { color: var(--sk-text-tlmeny); }
}

/* --- HV) PREPÍNAČ HLAVIČIEK — návrhy 02 Pilulka · 05 Sklo · 08 B2B zóna (18. 9. 2026) ---
   html[data-ox-hlavicka="1|2|5|8"]; prvky .ox-hv8-* vkladá doplnky.js a mimo variantu 8 sú skryté. */
html:not([data-ox-hlavicka="8"]) .ox-hv8-seg, html:not([data-ox-hlavicka="8"]) .ox-hv8-user,
html:not([data-ox-hlavicka="8"]) .ox-hv8-suma, html:not([data-ox-hlavicka="8"]) .ox-hv8-sub { display: none !important; }

/* plávajúce tlačidlo dole vľavo */
#ox-hv { position: fixed; left: 18px; bottom: 18px; z-index: 2147482950; font-family: var(--sk-font-text); }
.ox-hv__fab { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 0; background: #141414; color: #fff; cursor: pointer; font: 700 12.5px/1 var(--sk-font-text); letter-spacing: .02em; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: transform .2s var(--sk-prechod), background .2s; }
.ox-hv__fab:hover { transform: translateY(-2px); background: #000; }
.ox-hv__fab svg { width: 18px; height: 18px; color: var(--sk-akcent); }
.ox-hv__lbl::before { content: "Hlavička: "; font-weight: 500; opacity: .7; }
.ox-hv__menu { position: absolute; left: 0; bottom: calc(100% + 10px); width: 270px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .06); animation: ox-fadeInUp .18s ease-out; }
.ox-hv__menu[hidden] { display: none; }
.ox-hv__h { font: 700 10.5px/1 var(--sk-font-text); letter-spacing: .12em; text-transform: uppercase; color: rgba(27, 27, 27, .5); padding: 8px 10px 10px; }
.ox-hv__p { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px 12px; border-radius: 10px; font-family: inherit; color: var(--sk-text); border-left: 3px solid transparent; }
.ox-hv__p b { display: block; font-size: 14px; }
.ox-hv__p small { display: block; font-size: 12px; color: rgba(27, 27, 27, .6); margin-top: 2px; }
.ox-hv__p:hover { background: rgba(255, 0, 29, .06); }
.ox-hv__p--on { border-left-color: var(--sk-akcent); background: rgba(255, 0, 29, .08); }
.ox-hv__p--on b { color: var(--sk-akcent); }
.ox-cookies-otvorene #ox-hv { display: none; }
@media (max-width: 560px) { #ox-hv { left: 10px; bottom: 10px; } .ox-hv__fab { height: 40px; padding: 0 12px 0 10px; } .ox-hv__lbl::before { content: none; } }

/* ===== 02 · PLÁVAJÚCA PILULKA (superdesign Floating Pill Coral, 21st #27109) ===== */
html[data-ox-hlavicka="2"] #ox-hlavicka { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; padding: 14px 16px 0; }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-util { display: none; }
html[data-ox-hlavicka="2"] .ox-hlavicka__vnutro { min-height: 70px; border-radius: 999px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .6) inset; padding: 0 12px 0 26px; color: var(--sk-text); gap: clamp(10px, 1.4vw, 22px); }
html[data-ox-hlavicka="2"] .ox-logo__znak { background: #1B1B1B; height: 42px; }
html[data-ox-hlavicka="2"] .ox-nav { flex: 0 0 auto; margin: 0 auto; background: var(--sk-krem, #FFF7E6); border-radius: 999px; padding: 5px; gap: 4px; }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__odkaz { color: rgba(27, 27, 27, .75); padding: 10px 18px; font-size: 14.5px; }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__odkaz:hover { background: rgba(255, 255, 255, .7); color: var(--sk-text); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__odkaz--aktivny, html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__odkaz.ox-rail__odkaz--aktivny { background: #fff; color: var(--sk-text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 -1px 0 rgba(0, 0, 0, .04); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__znacka { color: var(--sk-akcent); }
html[data-ox-hlavicka="2"] .ox-hladat-pole { flex: 0 0 auto; width: 44px; min-width: 0; max-width: 44px; height: 44px; margin-left: 0; padding: 0; justify-content: center; border-color: rgba(0, 0, 0, .14); background: transparent; color: var(--sk-text); }
html[data-ox-hlavicka="2"] .ox-hladat-pole__text, html[data-ox-hlavicka="2"] .ox-hladat-pole .ox-kbd { display: none; }
html[data-ox-hlavicka="2"] .ox-hladat-pole:hover { background: var(--sk-krem, #FFF7E6); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-ikonbtn { border-color: rgba(0, 0, 0, .14); color: var(--sk-text); background: transparent; }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-ikonbtn:hover { background: var(--sk-krem, #FFF7E6); border-color: rgba(0, 0, 0, .25); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-kosik-pocet { background: var(--sk-akcent); color: #fff; box-shadow: 0 0 0 2px #fff; }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__akcie { gap: 8px; }
/* B2B odkaz v pilulke ako jediné červené CTA */
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"] { background: var(--sk-akcent); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em; box-shadow: 0 10px 22px -10px rgba(255, 0, 29, .7); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"]:hover { background: var(--sk-akcent-tmava, #C4081E); color: #fff; }
html[data-ox-hlavicka="2"] .ox-mobil-menu { inset: calc(var(--ox-lista) + 84px) 0 0 0; }
@media (max-width: 1080px) { html[data-ox-hlavicka="2"] #ox-hlavicka { padding: 10px 10px 0; } html[data-ox-hlavicka="2"] .ox-hlavicka__vnutro { min-height: 60px; padding: 0 8px 0 16px; } }

/* ===== 05 · SKLENENÁ LIŠTA (superdesign Frost & Field glass navbar) ===== */
html[data-ox-hlavicka="5"] #ox-hlavicka { position: fixed; left: 0; right: 0; top: 0; background: linear-gradient(180deg, rgba(20, 3, 2, .38), rgba(20, 3, 2, .22)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .8); color: #fff; }
html[data-ox-hlavicka="5"] #ox-hlavicka::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 90, 70, .95), transparent); pointer-events: none; }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-util { display: none; }
html[data-ox-hlavicka="5"] .ox-hlavicka__vnutro { min-height: 78px; }
html[data-ox-hlavicka="5"]:not(.ox-hv-uvod) #ox-obsah { padding-top: 78px; }
html[data-ox-hlavicka="5"] .ox-logo__znak { background: #fff; }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav__odkaz { position: relative; color: rgba(255, 255, 255, .74); font-weight: 500; font-size: 15px; border-radius: 8px; }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav__odkaz:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav__odkaz--aktivny, html[data-ox-hlavicka="5"] #ox-hlavicka .ox-rail__odkaz--aktivny { color: #fff; }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav__odkaz--aktivny::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: linear-gradient(90deg, var(--sk-akcent), transparent); }
html[data-ox-hlavicka="5"] .ox-hladat-pole { border-radius: 12px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); max-width: 320px; }
html[data-ox-hlavicka="5"] .ox-hladat-pole:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); }
html[data-ox-hlavicka="5"] .ox-hladat-pole:hover .ox-kbd { background: rgba(255, 255, 255, .18); color: #fff; }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-ikonbtn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); color: #fff; }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-ikonbtn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-kosik-pocet { background: var(--sk-akcent); color: #fff; box-shadow: 0 0 0 2px rgba(20, 3, 2, .6); }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"] { background: linear-gradient(180deg, #FF2740, #D60019); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em; border-radius: 12px; padding: 12px 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 14px 30px -10px rgba(255, 0, 29, .9); }
html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"]::after { display: none; }
html[data-ox-hlavicka="5"] .ox-mobil-menu { inset: 78px 0 0 0; }
html[data-ox-hlavicka="5"] #ox-hlavicka.ox-hlavicka--odscrollovana { background: linear-gradient(180deg, rgba(20, 3, 2, .72), rgba(20, 3, 2, .6)); }

/* ===== 08 · B2B ZÁKAZNÍCKA ZÓNA (21st Floating Navbar #18090 + cart-drawer meter) ===== */
html[data-ox-hlavicka="8"] #ox-hlavicka .ox-util { display: none; }
html[data-ox-hlavicka="8"] #ox-hlavicka .ox-nav, html[data-ox-hlavicka="8"] .ox-hladat-pole { display: none !important; }
html[data-ox-hlavicka="8"] .ox-hlavicka__vnutro { min-height: 86px; }
html[data-ox-hlavicka="8"] .ox-hv8-seg { display: flex; margin: 0 auto; background: rgba(0, 0, 0, .22); border-radius: 999px; padding: 5px; gap: 4px; }
.ox-hv8-seg__p { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: 600 14.5px/1 var(--sk-font-text); color: rgba(255, 255, 255, .82); white-space: nowrap; text-decoration: none; transition: background .16s, color .16s; }
.ox-hv8-seg__p svg { width: 16px; height: 16px; }
.ox-hv8-seg__p:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ox-hv8-seg__p--on { background: #fff; color: var(--sk-text); font-weight: 700; }
.ox-hv8-user { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 5px 16px 5px 5px; color: #fff; text-decoration: none; line-height: 1.1; flex: 0 0 auto; }
.ox-hv8-user:hover { background: rgba(255, 255, 255, .22); }
.ox-hv8-user__av { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--sk-akcent); display: grid; place-items: center; font: 400 18px/1 var(--sk-font-display, Anton, Impact, sans-serif); flex: none; }
.ox-hv8-user b { display: block; font-size: 13.5px; }
.ox-hv8-user small { display: block; font-size: 11.5px; opacity: .85; margin-top: 2px; }
.ox-hv8-suma { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; color: #fff; margin: 0 2px 0 6px; }
.ox-hv8-suma b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ox-hv8-suma small { font-size: 11px; opacity: .85; margin-top: 2px; white-space: nowrap; }
html[data-ox-hlavicka="8"] #ox-hlavicka .ox-kosik-obal .ox-ikonbtn { background: #fff; color: var(--sk-akcent); border-color: #fff; }
html[data-ox-hlavicka="8"] #ox-hlavicka .ox-kosik-obal .ox-kosik-pocet { background: #141414; box-shadow: 0 0 0 2px var(--sk-akcent); }
.ox-hv8-sub { background: var(--sk-krem, #FFF7E6); color: rgba(27, 27, 27, .75); font-size: 13.5px; border-top: 1px solid rgba(0, 0, 0, .05); }
.ox-hv8-sub__v { max-width: var(--sk-maxw); margin-inline: auto; padding: 0 var(--sk-pad); height: 44px; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); white-space: nowrap; overflow: hidden; }
.ox-hv8-sub__v b { color: var(--sk-akcent); font-weight: 700; }
.ox-hv8-bar { flex: 1 1 auto; max-width: 420px; height: 8px; border-radius: 8px; background: #eadfcf; overflow: hidden; }
.ox-hv8-bar i { display: block; height: 100%; background: var(--sk-akcent); border-radius: 8px; transition: width .6s var(--sk-prechod); }
.ox-hv8-zostava { overflow: hidden; text-overflow: ellipsis; }
html[data-ox-hlavicka="8"] .ox-mobil-menu { inset: calc(var(--ox-lista) + 86px) 0 0 0; }
@media (max-width: 1280px) { .ox-hv8-seg__p { padding: 11px 14px; font-size: 13.5px; } .ox-hv8-user small { display: none; } }
@media (max-width: 1080px) { html[data-ox-hlavicka="8"] .ox-hv8-seg, html[data-ox-hlavicka="8"] .ox-hv8-user { display: none !important; } html[data-ox-hlavicka="8"] .ox-hlavicka__vnutro { min-height: 74px; } html[data-ox-hlavicka="8"] .ox-mobil-menu { inset: calc(var(--ox-lista) + 74px) 0 0 0; } }
@media (max-width: 720px) { html[data-ox-hlavicka="8"] .ox-hv8-sub, html[data-ox-hlavicka="8"] .ox-hv8-suma { display: none !important; } }
/* D: zdroj je zvislé video — v širokom ráme ho necháme celé a pozadie dolaďuje
   rozmazaný poster (inak by orez ukázal len detail ruky) */
html[data-tema^="21"] .ox-priprava--d .ox-priprava__film.ox-priprava__film--video { background: #1a0503; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__film--video::before {
	content: ''; position: absolute; inset: -6%; z-index: 0;
	background: var(--poster) center/cover no-repeat; filter: blur(26px) brightness(.5) saturate(1.1);
}
html[data-tema^="21"] .ox-priprava--d .ox-priprava__video { position: relative; z-index: 1; object-fit: contain; object-position: 50% 50%; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__cas { z-index: 2; }
/* HV doladenie: menu v 02/05 textovým písmom; sklo mimo úvodu = polopriesvitná červená */
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__odkaz, html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav__odkaz { font-family: var(--sk-font-text); text-transform: none; letter-spacing: 0; }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"], html[data-ox-hlavicka="5"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"] { text-transform: uppercase; letter-spacing: .03em; }
html[data-ox-hlavicka="5"]:not(.ox-hv-uvod) #ox-hlavicka { background: linear-gradient(180deg, rgba(224, 0, 26, .92), rgba(224, 0, 26, .84)); border-bottom-color: rgba(255, 255, 255, .22); }
html[data-ox-hlavicka="5"]:not(.ox-hv-uvod) #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"] { background: #fff; color: var(--sk-akcent); box-shadow: none; }

/* --- HV 02 oprava (Peter: „pozadie biele to kazí, top bar nech je celý červený“) + 02g sklenená pilulka --- */
html[data-ox-hlavicka="2"] #ox-hlavicka, html[data-ox-hlavicka="2g"] #ox-hlavicka { background: var(--sk-akcent, #D60019); padding: 14px 16px; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
html[data-ox-hlavicka="2"] .ox-hlavicka__vnutro { box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .55); }
@media (max-width: 1080px) { html[data-ox-hlavicka="2"] #ox-hlavicka, html[data-ox-hlavicka="2g"] #ox-hlavicka { padding: 10px; } }
html[data-ox-hlavicka="2"] .ox-mobil-menu, html[data-ox-hlavicka="2g"] .ox-mobil-menu { inset: calc(var(--ox-lista) + 98px) 0 0 0; }

/* 02g — rovnaká kostra ako 02, ale pilulka je sklo (frosted) na červenej */
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-util { display: none; }
html[data-ox-hlavicka="2g"] .ox-hlavicka__vnutro { min-height: 70px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .1)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .38) inset, 0 1px 0 rgba(255, 255, 255, .45) inset, 0 24px 50px -24px rgba(0, 0, 0, .6); padding: 0 12px 0 26px; color: #fff; gap: clamp(10px, 1.4vw, 22px); }
html[data-ox-hlavicka="2g"] .ox-logo__znak { background: #fff; height: 42px; }
html[data-ox-hlavicka="2g"] .ox-nav { flex: 0 0 auto; margin: 0 auto; background: rgba(0, 0, 0, .2); border-radius: 999px; padding: 5px; gap: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__odkaz { color: rgba(255, 255, 255, .85); padding: 10px 18px; font: 600 14.5px/1 var(--sk-font-text); text-transform: none; letter-spacing: 0; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__odkaz:hover { background: rgba(255, 255, 255, .16); color: #fff; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__odkaz--aktivny, html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__odkaz.ox-rail__odkaz--aktivny { background: #fff; color: var(--sk-text); font-weight: 700; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__znacka { color: #FFD9D6; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"] { background: #fff; color: var(--sk-akcent); font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"]:hover { background: #FFF7E6; color: var(--sk-akcent); }
html[data-ox-hlavicka="2g"] .ox-hladat-pole { flex: 0 0 auto; width: 44px; min-width: 0; max-width: 44px; height: 44px; margin-left: 0; padding: 0; justify-content: center; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #fff; }
html[data-ox-hlavicka="2g"] .ox-hladat-pole__text, html[data-ox-hlavicka="2g"] .ox-hladat-pole .ox-kbd { display: none; }
html[data-ox-hlavicka="2g"] .ox-hladat-pole:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: #fff; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-ikonbtn { border-color: rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .08); }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-ikonbtn:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-kosik-pocet { background: #fff; color: var(--sk-akcent); box-shadow: 0 0 0 2px var(--sk-akcent); }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__akcie { gap: 8px; }
@media (max-width: 1080px) { html[data-ox-hlavicka="2g"] .ox-hlavicka__vnutro { min-height: 60px; padding: 0 8px 0 16px; } }
html[data-ox-hlavicka="2"] .ox-hlavicka__vnutro { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* HV 02/02g: Peter 18. 9. — „za pilulkou transparentné pozadie, nech je vidieť obsah webu“ → hlavička pláva nad stránkou */
html[data-ox-hlavicka="2"] #ox-hlavicka, html[data-ox-hlavicka="2g"] #ox-hlavicka { position: fixed; left: 0; right: 0; top: 0; background: transparent; pointer-events: none; }
html[data-ox-hlavicka="2"] #ox-hlavicka > *, html[data-ox-hlavicka="2g"] #ox-hlavicka > * { pointer-events: auto; }
html[data-ox-hlavicka="2"]:not(.ox-hv-uvod) #ox-obsah, html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) #ox-obsah { padding-top: 98px; }
html[data-ox-hlavicka="2"] .ox-mobil-menu, html[data-ox-hlavicka="2g"] .ox-mobil-menu { inset: 98px 0 0 0; }
@media (max-width: 1080px) { html[data-ox-hlavicka="2"]:not(.ox-hv-uvod) #ox-obsah, html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) #ox-obsah { padding-top: 80px; } html[data-ox-hlavicka="2"] .ox-mobil-menu, html[data-ox-hlavicka="2g"] .ox-mobil-menu { inset: 80px 0 0 0; } }
/* sklenená pilulka nad svetlým obsahom podstránok: tmavšie sklo, aby biele texty ostali čitateľné */
html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) .ox-hlavicka__vnutro { background: linear-gradient(180deg, rgba(224, 0, 26, .9), rgba(224, 0, 26, .82)); }
/* HV 02: Peter — „hranaté aj oblé zároveň, bledá béžová“ → všetko pilulka, dráha menu červená a výraznejšia */
html[data-ox-hlavicka="2"] .ox-nav { background: rgba(255, 0, 29, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 0, 29, .45); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__odkaz, html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__odkaz { border-radius: 999px !important; color: var(--sk-akcent); font-weight: 700; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__odkaz { color: rgba(255, 255, 255, .9); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__odkaz:hover { background: rgba(255, 0, 29, .14); color: var(--sk-akcent-tmava, #C4081E); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav__znacka { color: var(--sk-text); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"] { background: var(--sk-akcent); color: #fff; box-shadow: 0 10px 22px -10px rgba(255, 0, 29, .8); }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"]:hover { background: var(--sk-akcent-tmava, #C4081E); color: #fff; }
/* HV: „Domov“ v menu len vo variantoch s pilulkou/sklom */
html:not([data-ox-hlavicka="2"]):not([data-ox-hlavicka="2g"]):not([data-ox-hlavicka="5"]) .ox-hv-domov { display: none !important; }
html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav .ox-nav__odkaz--aktivny:not([href$="/b2b"]), html[data-ox-hlavicka="2"] #ox-hlavicka .ox-nav .ox-rail__odkaz--aktivny:not([href$="/b2b"]) { background: #fff !important; color: var(--sk-akcent) !important; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz--aktivny:not([href$="/b2b"]), html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-rail__odkaz--aktivny:not([href$="/b2b"]) { background: #fff !important; color: var(--sk-akcent) !important; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz--aktivny .ox-nav__znacka { color: var(--sk-text); }
/* HV 02/02g: Peter — „top bar posuň hore o pár pixelov“ */
html[data-ox-hlavicka="2"] #ox-hlavicka, html[data-ox-hlavicka="2g"] #ox-hlavicka { padding-top: 6px; }
@media (max-width: 1080px) { html[data-ox-hlavicka="2"] #ox-hlavicka, html[data-ox-hlavicka="2g"] #ox-hlavicka { padding-top: 6px; } }
html[data-ox-hlavicka="2"]:not(.ox-hv-uvod) #ox-obsah, html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) #ox-obsah { padding-top: 90px; }
html[data-ox-hlavicka="2"] .ox-mobil-menu, html[data-ox-hlavicka="2g"] .ox-mobil-menu { inset: 90px 0 0 0; }

/* --- 71) úvodné video sa neoreže (Peter 18. 9. 2026) ---------------------------
   Na širokých a nízkych oknách (napr. 1920 × 940) `cover` orezal 16:9 video na
   pomer 2,13 a poháre boli neprimerane veľké. Video teraz drží svoj pomer a boky
   dopĺňa rozmazaný poster, takže pás ostáva celoplošný. */
html[data-tema^="21"] .ox-uvod__video { object-fit: contain; object-position: 50% 50%; background: transparent; }
html[data-tema^="21"] .ox-uvod__pozadie {
	position: absolute; inset: -4%; z-index: 0; pointer-events: none;
	background: var(--poster) center/cover no-repeat;
	filter: blur(34px) brightness(calc(.62 - var(--uvod-p) * .35)) saturate(1.05);
}
@media (max-width: 700px) {
	/* na mobile je okno vysoké a úzke — tam je celoplošný orez správny */
	html[data-tema^="21"] .ox-uvod__video { object-fit: cover; object-position: 50% 45%; }
	html[data-tema^="21"] .ox-uvod__pozadie { display: none; }
}
/* video musí byť NAD rozmazaným pozadím (v DOM-e je pred ním) */
html[data-tema^="21"] .ox-uvod__video { z-index: 1; }
html[data-tema^="21"] .ox-uvod__zrno { z-index: 2; }

/* --- 72) úvod presne na výšku okna (Peter 18. 9. 2026) -------------------------
   „nech nie je naspodu vidieť červený pás, ale nezoomuj video“ — scéna sa skráti
   tak, aby hlavička (75 px) + video + bežiaci pás (48 px) dali presne výšku okna.
   Video sa pritom NEOREŽE (object-fit: contain), len ubudne rozmazaného okraja. */
@media (min-width: 701px) {
	html[data-tema^="21"] .ox-uvod { height: min(56.25vw, calc(100svh - 123px), 1100px); }
}

/* --- 73) kompromis: bez bočných okrajov, ale mierny orez (Peter 18. 9. 2026) ---
   16:9 video v širšom ráme sa buď oreže (cover), alebo nechá okraje (contain) —
   tretia možnosť neexistuje. Volíme cover s ťažiskom vyššie, takže sa odreže len
   prázdna spodná časť záberu a poháre ostanú celé; okraje zmizli. */
html[data-tema^="21"] .ox-uvod__video { object-fit: cover; object-position: 50% 50%; }
html[data-tema^="21"] .ox-uvod__pozadie { display: none; }
@media (max-width: 700px) {
	html[data-tema^="21"] .ox-uvod__video { object-position: 50% 42%; }
}

/* --- 74) plávajúce hlavičky: úvod siaha až pod ne (Peter 18. 9. 2026) ----------
   Varianty 2, 2g a 5 ležia NAD videom, takže od výšky okna sa odpočítava len
   bežiaci pás (48 px) — inak by pod pásom presvital červený podklad. */
@media (min-width: 701px) {
	html[data-ox-hlavicka="2"] .ox-uvod,
	html[data-ox-hlavicka="2g"] .ox-uvod,
	html[data-ox-hlavicka="5"] .ox-uvod { height: min(56.25vw, calc(100svh - 48px), 1100px); }
}
/* výšku úvodu dopočíta `vyskaUvodu()` (meria hlavičku aj pás); konštanta je len záloha */
@media (min-width: 701px) {
	/* bez pomeru 16:9 — video je `cover`, takže scéna môže mať výšku podľa okna a
	   pás pod ňou sedí presne na spodnej hrane (strop 1100 px kvôli veľkým monitorom) */
	html[data-tema^="21"] .ox-uvod,
	html[data-ox-hlavicka="2"] .ox-uvod,
	html[data-ox-hlavicka="2g"] .ox-uvod,
	html[data-ox-hlavicka="5"] .ox-uvod { height: min(var(--ox-uvod-v, calc(100svh - 123px)), 1100px); }
}

/* --- 75) B2B odkaz je výzva, nie „aktívna položka“ (Peter 18. 9. 2026) ---------
   V hlavičke sa farebne odlišuje od bieleho aktívneho stavu: tmavá pilulka
   s bielym textom. To isté v segmentoch varianty 08. */
#ox-hlavicka .ox-nav__odkaz--b2b {
	/* 18. 9. 2026 Peter: „čiernu farbu zmeň za krajšiu“ — tmavé víno zo značkovej
	   palety, nie čierna; odlišuje sa od bieleho aktívneho stavu aj od červeného pásu */
	background: linear-gradient(135deg, #8E0010 0%, #5E000B 100%); color: #fff; border-radius: 999px;
	padding: 7px 16px; box-shadow: 0 10px 22px -14px rgba(94, 0, 11, .95);
}
#ox-hlavicka .ox-nav__odkaz--b2b:hover { background: linear-gradient(135deg, #A30013 0%, #6E000D 100%); color: #fff; }
#ox-hlavicka .ox-nav__odkaz--b2b::after { display: none; }
.ox-hv8-seg .ox-hv8-seg__p--b2b {
	background: linear-gradient(135deg, #8E0010 0%, #5E000B 100%); color: #fff;
}
.ox-hv8-seg .ox-hv8-seg__p--b2b.ox-hv8-seg__p--on { background: linear-gradient(135deg, #A30013 0%, #6E000D 100%); color: #fff; }

/* --- 76) prepínač návrhov pri widgete (Peter 18. 9. 2026) ---------------------
   Pilulka so šípkami sa ukáže pri prejdení myšou nad widgetom (vpravo hore) a
   prehadzuje návrhy TOHO widgetu. Je `fixed`, takže nezasahuje do rozloženia. */
.ox-wprep {
	position: fixed; left: 0; top: 0; z-index: 2147482500;
	display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px;
	border-radius: 999px; background: rgba(18, 3, 2, .82); color: #fff;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9);
	font-family: var(--sk-font-text, system-ui), sans-serif; font-size: 12px;
	opacity: 0; transform-origin: 100% 0; transition: opacity .2s ease;
	pointer-events: auto; user-select: none;
}
.ox-wprep--vidno { opacity: 1; }
.ox-wprep__sip {
	width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
	transition: background .2s ease;
}
.ox-wprep__sip:hover { background: rgba(255, 255, 255, .3); }
.ox-wprep__sip svg { width: 13px; height: 13px; }
.ox-wprep__text { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 6px; white-space: nowrap; }
.ox-wprep__poradie { font-variant-numeric: tabular-nums; opacity: .7; font-size: 11px; }
.ox-wprep__nazov { font-weight: 600; }
@media (hover: none), (pointer: coarse) { .ox-wprep { display: none; } }


/* --- 77) sadzba odkazov v lište (Peter 18. 9. 2026) ----------------------------
   „písmo o trošku menej hrubé a pridaj 1 px letter spacing“. */
#ox-hlavicka .ox-nav__odkaz,
.ox-mobil-menu .ox-nav__odkaz { font-weight: 500; letter-spacing: calc(.045em + 1px); }
#ox-hlavicka .ox-nav__odkaz--b2b { letter-spacing: calc(.045em + 1px); }

/* --- 78) starý plávajúci prepínač hlavičky preč (Peter 18. 9. 2026) ------------
   Hlavička sa prepína rovnako ako ostatné widgety — šípkami, ktoré sa ukážu pri
   prejdení myšou nad ňou. Samostatné tlačidlo vľavo dole už netreba. */
#ox-hv { display: none !important; }

/* --- 79) varianta A: menšie video, väčší popis (Peter 18. 9. 2026) -------------
   Zvislý záber v 16:9 ráme sa orezával na detail a text pod ním nebolo vidieť. */
html[data-tema^="21"] .ox-priprava--a .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: 16 / 9; max-height: min(52vh, 460px); width: auto; margin-inline: auto;
	background: #1a0503;
}
html[data-tema^="21"] .ox-priprava--a .ox-priprava__video { object-fit: contain; }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__krok b { font-size: clamp(26px, 2.9vw, 42px); }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__krok small { font-size: 17px; line-height: 1.5; margin-top: 8px; }
html[data-tema^="21"] .ox-priprava--a .ox-priprava__cip { font-size: 14px; padding: 10px 18px; }

/* --- 80) návrhy ďalších widgetov (Peter 18. 9. 2026) ---------------------------
   Obsah ostáva rovnaký, mení sa len dizajn — prepína `widgety.js` triedou. */

/* DÔVODY — B: pôvodný celoplošný číslovaný zoznam bez fotky */
html[data-tema^="21"] .ox-dovody--zoznam { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-dovody--zoznam .ox-dovody__obraz { display: none; }
html[data-tema^="21"] .ox-dovody--zoznam .ox-panel {
	grid-template-columns: clamp(46px, 5vw, 86px) minmax(0, 1.05fr) minmax(0, .95fr); opacity: 1;
}
html[data-tema^="21"] .ox-dovody--zoznam .ox-panel p { grid-column: 3; grid-row: 1; margin-top: 0; }
html[data-tema^="21"] .ox-dovody--zoznam .ox-panel .ox-h3 { font-size: clamp(24px, 3.1vw, 44px); }
/* DÔVODY — C: karty v mriežke (najstarší návrh) */
html[data-tema^="21"] .ox-dovody--karty { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-dovody--karty .ox-dovody__obraz { display: none; }
html[data-tema^="21"] .ox-dovody--karty .ox-dovody__zoznam {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; border-top: 0;
}
html[data-tema^="21"] .ox-dovody--karty .ox-panel {
	display: block; opacity: 1; padding: 22px; border: 1px solid var(--sk-linka); border-radius: 16px;
	background: #fff;
}
html[data-tema^="21"] .ox-dovody--karty .ox-panel::before { display: block; margin-bottom: 8px; }
html[data-tema^="21"] .ox-dovody--karty .ox-panel::after { display: none; }
html[data-tema^="21"] .ox-dovody--karty .ox-panel .ox-h3 { font-size: 22px; }
html[data-tema^="21"] .ox-dovody--karty .ox-panel p { margin-top: 8px; }

/* VIZUÁL KAMPANE — B: plagát v červenej doske s nálepkami (starší návrh) */
html[data-tema^="21"] .ox-show__vizual--doska { background: linear-gradient(175deg, var(--sk-akcent) 0%, var(--sk-akcent-tmavy) 100%); border-radius: var(--sk-r-velky); box-shadow: var(--sk-tien); }
html[data-tema^="21"] .ox-show__vizual--doska .ox-vh__vizual { padding: 20px 20px 56px; }
html[data-tema^="21"] .ox-show__vizual--doska .ox-vh__pohare--plagat { border-radius: 10px; }
html[data-tema^="21"] .ox-show__vizual--doska .ox-vh__nalepka { display: grid; }
/* VIZUÁL KAMPANE — C: plagát na výšku bez tieňa, na šírku stĺpca */
html[data-tema^="21"] .ox-show__vizual--ciste .ox-vh__pohare--plagat { box-shadow: none; border-radius: 0; }
html[data-tema^="21"] .ox-show__vizual--ciste .ox-vh__pohare-vrstva { display: none; }

/* PÄTA — B: veľký wordmark cez celý riadok (pôvodný návrh) */
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-pata__mriezka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-pata__stlpec:first-child { grid-column: 1 / -1; margin-bottom: clamp(26px, 4vw, 58px); }
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-pata__stlpec:first-child h4 { font-size: clamp(46px, 9.2vw, 132px); line-height: .86; }
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-pata__stlpec:first-child p { font-size: 17px !important; }
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-wrap { max-width: 1320px; }
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-pata__stlpec ul { font-size: 17px; gap: 11px; }

/* --- 81) návrhy widgetu pre prevádzky a widgetu „zavoláme vám“ (Peter 18. 9. 2026)
   Obsah je vždy rovnaký, mení sa len dizajn — prepína `widgety.js`. */

/* B2B widget — B: svetlá doska (krém, červené akcenty) */
html[data-tema^="21"] .ox-b2b--svetla {
	background: linear-gradient(160deg, #FFF7F6 0%, #FFE9E6 100%); color: var(--sk-text);
	box-shadow: 0 26px 54px -34px rgba(120, 0, 14, .5), inset 0 0 0 1px rgba(255, 0, 29, .18);
}
html[data-tema^="21"] .ox-b2b--svetla .ox-b2b__h,
html[data-tema^="21"] .ox-b2b--svetla .ox-b2b__lead { color: var(--sk-text); }
html[data-tema^="21"] .ox-b2b--svetla .ox-b2b__h em { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-b2b--svetla .ox-show__krok,
html[data-tema^="21"] .ox-b2b--svetla .ox-b2b__krok { background: #fff; color: var(--sk-text); }
/* B2B widget — C: široký pás, kroky v jednom riadku pod textom */
html[data-tema^="21"] .ox-b2b--pas { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-b2b--pas .ox-b2b__vizual { display: none; }
html[data-tema^="21"] .ox-b2b--pas .ox-b2b__lead { max-width: 70ch; }
html[data-tema^="21"] .ox-b2b--pas .ox-b2b__body { margin-top: 26px; }

/* „Zavoláme vám“ — B: svetlá doska s červeným rámom */
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__doska {
	background: #FFF7F6; color: var(--sk-text);
	box-shadow: 0 26px 54px -34px rgba(120, 0, 14, .45), inset 0 0 0 1.5px rgba(255, 0, 29, .3);
}
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__text .ox-h2,
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__text .ox-oko { color: var(--sk-text); }
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__text .ox-h2 em { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__text .ox-lead,
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__alt { color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__alt a { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-zavolame--svetla .ox-zavolame__form { box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .45); border: 1px solid var(--sk-linka); }
/* „Zavoláme vám“ — C: jeden stĺpec, formulár pod textom, užší blok */
html[data-tema^="21"] .ox-zavolame--stlpec .ox-zavolame__doska {
	grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; text-align: center;
}
html[data-tema^="21"] .ox-zavolame--stlpec .ox-zavolame__text .ox-lead { max-width: 60ch; margin-inline: auto; }
html[data-tema^="21"] .ox-zavolame--stlpec .ox-zavolame__form { text-align: left; }

/* --- 82) návrhy widgetu „Pre prevádzky“ na titulke (Peter 18. 9. 2026) --------- */
html[data-tema^="21"] .ox-show__b2b--svetla {
	background: linear-gradient(160deg, #FFF7F6 0%, #FFE6E2 100%); color: var(--sk-text);
}
html[data-tema^="21"] .ox-show__b2b--svetla .ox-h3,
html[data-tema^="21"] .ox-show__b2b--svetla p,
html[data-tema^="21"] .ox-show__b2b--svetla .ox-oko { color: var(--sk-text); }
html[data-tema^="21"] .ox-show__b2b--svetla .ox-show__marza { background: #fff; color: var(--sk-text); }
html[data-tema^="21"] .ox-show__b2b--svetla .ox-show__cesta li { background: #fff; color: var(--sk-text); box-shadow: 0 14px 30px -22px rgba(120, 0, 14, .5); }
html[data-tema^="21"] .ox-show__b2b--svetla .ox-show__cesta li b { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-show__b2b--svetla .ox-show__cesta li small { color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-show__b2b--svetla .ox-btn--obrys { border-color: var(--sk-akcent); color: var(--sk-akcent-tmavy); }

html[data-tema^="21"] .ox-show__b2b--pas { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-show__b2b--pas .ox-show__cesta {
	grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(20px, 2.4vw, 32px);
}
html[data-tema^="21"] .ox-show__b2b--pas .ox-show__nalepka { display: none; }
html[data-tema^="21"] .ox-show__b2b--pas p { max-width: 74ch; }

/* --- 83) sekcia 02 „Pre prevádzky“ — návrhy prenesené z mockupov (18. 9. 2026)
   Zdroj: `.playwright-mcp/navrhy-b2b.html` (relácia „OXO Web Fable“). Obsah je vždy
   ten istý, mení sa rozloženie; prepína `widgety.js` (`.ox-show__b2b--<id>`). */

/* spoločné prvky návrhov */
html[data-tema^="21"] .ox-b2bn__text { min-width: 0; }
html[data-tema^="21"] .ox-show__b2b [class^="ox-b2bn__"] { min-width: 0; }

/* 1 · BENTO ČÍSLA */
html[data-tema^="21"] .ox-show__b2b--bento { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
html[data-tema^="21"] .ox-b2bn__bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html[data-tema^="21"] .ox-b2bn__dlazdica {
	border-radius: 18px; padding: 20px 22px; background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-tema^="21"] .ox-b2bn__dlazdica b { font-family: var(--sk-font-nadpis); font-size: 26px; display: block; line-height: 1.1; margin-bottom: 6px; }
html[data-tema^="21"] .ox-b2bn__dlazdica span { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
html[data-tema^="21"] .ox-b2bn__dlazdica--velka {
	grid-column: 1 / 3; background: #fff; color: var(--sk-text);
	display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; padding: 24px 26px;
}
html[data-tema^="21"] .ox-b2bn__cislo { font-family: var(--sk-font-nadpis); font-size: 76px; line-height: .9; color: var(--sk-akcent); display: block; }
html[data-tema^="21"] .ox-b2bn__cislo small { font-size: 28px; color: var(--sk-text); margin-left: 6px; }
html[data-tema^="21"] .ox-b2bn__pop { color: var(--sk-text-tlmeny); font-size: 14px; max-width: 34ch; display: block; margin-top: 8px; }
html[data-tema^="21"] .ox-b2bn__pravy { font: 600 12px/1.6 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-text-tlmeny); text-align: right; }

/* 2 · ÚČET ZA JEDEN POHÁR */
html[data-tema^="21"] .ox-show__b2b--ucet { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; }
html[data-tema^="21"] .ox-b2bn__ucet {
	background: #fff; color: var(--sk-text); border-radius: 18px; padding: 24px 26px;
	box-shadow: 0 26px 54px -30px rgba(0, 0, 0, .55);
}
html[data-tema^="21"] .ox-b2bn__ucet h4 {
	margin: 0 0 14px; font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-tlmeny);
}
html[data-tema^="21"] .ox-b2bn__r {
	display: flex; justify-content: space-between; gap: 18px; padding: 10px 0;
	border-bottom: 1px dashed rgba(0, 0, 0, .12); font-size: 15px;
}
html[data-tema^="21"] .ox-b2bn__r span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-tema^="21"] .ox-b2bn__r--spolu {
	border-bottom: 0; margin-top: 4px; padding: 14px 0; font-family: var(--sk-font-nadpis);
	font-size: 26px; color: var(--sk-akcent-tmavy); border-top: 2px solid var(--sk-atrament);
}
html[data-tema^="21"] .ox-b2bn__pozn { margin: 12px 0 0; font-size: 12.5px; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-show__b2b--ucet .ox-show__cesta { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; }

/* 3 · ČASOVÁ OS */
html[data-tema^="21"] .ox-show__b2b--osa { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-b2bn__osa {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(22px, 3vw, 38px);
	counter-reset: osa; position: relative;
}
html[data-tema^="21"] .ox-b2bn__osa::before {
	content: ''; position: absolute; left: 6%; right: 6%; top: 18px; height: 2px; background: rgba(255, 255, 255, .35);
}
html[data-tema^="21"] .ox-b2bn__osa li { background: none; padding: 0 16px 0 0; position: relative; }
html[data-tema^="21"] .ox-b2bn__osa li i {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
	background: #fff; color: var(--sk-akcent); font-family: var(--sk-font-nadpis); font-size: 15px;
	position: relative; z-index: 1; margin-bottom: 12px; font-style: normal;
}
html[data-tema^="21"] .ox-b2bn__osa li b { display: block; font-family: var(--sk-font-nadpis); font-size: 20px; margin-bottom: 4px; }

/* 4 · SPLIT + CHECKLIST */
html[data-tema^="21"] .ox-show__b2b--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
html[data-tema^="21"] .ox-b2bn__check { background: #fff; color: var(--sk-text); border-radius: 20px; padding: clamp(20px, 2.4vw, 32px); position: relative; }
html[data-tema^="21"] .ox-b2bn__check ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
html[data-tema^="21"] .ox-b2bn__check li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
html[data-tema^="21"] .ox-b2bn__check li::before {
	content: '✓'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	background: var(--sk-akcent); color: #fff; font-size: 13px;
}
html[data-tema^="21"] .ox-b2bn__check li b { font-family: var(--sk-font-nadpis); font-size: 18px; display: block; }
html[data-tema^="21"] .ox-b2bn__check li span { color: var(--sk-text-tlmeny); font-size: 14px; }
html[data-tema^="21"] .ox-b2bn__check .ox-show__marza { background: var(--sk-krem, #FFF7E6); color: var(--sk-text); }
html[data-tema^="21"] .ox-b2bn__check .ox-show__nalepka { position: absolute; right: -18px; bottom: -22px; width: clamp(96px, 12vw, 148px); }

/* 5 · ROVNICA */
html[data-tema^="21"] .ox-show__b2b--rovnica { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-b2bn__vzorec {
	display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.6vw, 24px);
	margin: clamp(18px, 2.4vw, 30px) 0 18px;
}
html[data-tema^="21"] .ox-b2bn__vzorec span {
	font-family: var(--sk-font-nadpis); font-size: clamp(26px, 3.4vw, 50px); line-height: 1.05;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 14px; padding: 10px 18px;
}
html[data-tema^="21"] .ox-b2bn__vzorec i { font-style: normal; font-family: var(--sk-font-nadpis); font-size: clamp(22px, 2.6vw, 38px); opacity: .7; }
html[data-tema^="21"] .ox-show__b2b--rovnica .ox-show__cesta { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }

@media (max-width: 900px) {
	html[data-tema^="21"] .ox-show__b2b--bento,
	html[data-tema^="21"] .ox-show__b2b--ucet,
	html[data-tema^="21"] .ox-show__b2b--split { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bn__bento { grid-template-columns: 1fr; }
	html[data-tema^="21"] .ox-b2bn__dlazdica--velka { grid-column: auto; grid-template-columns: 1fr; }
	html[data-tema^="21"] .ox-b2bn__osa,
	html[data-tema^="21"] .ox-show__b2b--ucet .ox-show__cesta,
	html[data-tema^="21"] .ox-show__b2b--rovnica .ox-show__cesta { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bn__osa::before { display: none; }
}

/* číslo a popis vo veľkej dlaždici musia prebiť všeobecné `.ox-b2bn__dlazdica span` */
html[data-tema^="21"] .ox-b2bn__dlazdica .ox-b2bn__cislo {
	font-family: var(--sk-font-nadpis); font-size: clamp(48px, 5vw, 76px); line-height: .9;
	color: var(--sk-akcent); display: block;
}
html[data-tema^="21"] .ox-b2bn__dlazdica .ox-b2bn__cislo small { font-size: .38em; color: var(--sk-text); margin-left: 6px; }
html[data-tema^="21"] .ox-b2bn__dlazdica .ox-b2bn__pop { color: var(--sk-text-tlmeny); font-size: 14px; max-width: 34ch; display: block; margin-top: 8px; }

/* --- 84) sekcia 02 — návrhy 6–10 z mockupov (Peter 18. 9. 2026) ----------------
   Zdroj: `.playwright-mcp/navrhy-b2b-2.html` (n6 Bold stats, n7 Metric hero,
   n8 Swiss grid, n9 Trust-led, n10 Roadmap rail). Obsah sekcie je rovnaký. */

/* 6 · BOLD STATS */
html[data-tema^="21"] .ox-show__b2b--stats {
	grid-template-columns: minmax(0, 1fr); background: var(--sk-krem, #FFF7E6); color: var(--sk-text);
}
html[data-tema^="21"] .ox-b2bn__top {
	display: flex; justify-content: space-between; align-items: center; gap: clamp(20px, 3vw, 40px);
	border-bottom: 1px solid var(--sk-linka); padding-bottom: 26px; flex-wrap: wrap;
}
html[data-tema^="21"] .ox-b2bn__metrika { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 26px); flex: 1 1 420px; }
html[data-tema^="21"] .ox-b2bn__velke {
	font-family: var(--sk-font-nadpis); font-size: clamp(64px, 9vw, 150px); line-height: .9;
	color: var(--sk-akcent); white-space: nowrap;
}
html[data-tema^="21"] .ox-b2bn__velke small { font-size: .45em; color: var(--sk-text); }
html[data-tema^="21"] .ox-b2bn__desc { max-width: 34ch; }
html[data-tema^="21"] .ox-b2bn__desc h4 { margin: 0 0 8px; font: 700 20px/1.2 var(--sk-font-text); }
html[data-tema^="21"] .ox-b2bn__desc p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-b2bn__foto { width: clamp(220px, 28vw, 420px); height: 220px; border-radius: 14px; background: center/cover no-repeat; flex: none; }
html[data-tema^="21"] .ox-b2bn__riadok { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 36px; flex-wrap: wrap; }
html[data-tema^="21"] .ox-b2bn__stat b { display: block; font-family: var(--sk-font-nadpis); font-size: clamp(30px, 3.4vw, 52px); line-height: 1; margin-bottom: 8px; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-b2bn__stat span { font: 700 12px/1.3 var(--sk-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-tlmeny); }

/* 7 · METRIC HERO + prekrývajúce karty */
html[data-tema^="21"] .ox-show__b2b--metriky { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(40px, 5vw, 70px); }
html[data-tema^="21"] .ox-b2bn__hero { text-align: center; padding: clamp(16px, 2vw, 30px) 0 clamp(70px, 8vw, 110px); }
html[data-tema^="21"] .ox-b2bn__hero .ox-show__akcie { justify-content: center; }
html[data-tema^="21"] .ox-b2bn__pilulka {
	display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); font-size: 13px;
}
html[data-tema^="21"] .ox-b2bn__pilulka b { background: #fff; color: var(--sk-akcent); border-radius: 999px; padding: 4px 9px; font: 800 11px var(--sk-font-text); letter-spacing: .1em; text-transform: uppercase; }
html[data-tema^="21"] .ox-b2bn__sub { font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .88); max-width: 56ch; margin: 18px auto 26px; }
html[data-tema^="21"] .ox-b2bn__micro { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
html[data-tema^="21"] .ox-b2bn__karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(-90px, -7vw, -60px); position: relative; }
html[data-tema^="21"] .ox-b2bn__karta {
	background: #fff; color: var(--sk-text); border-radius: 18px; padding: 26px;
	box-shadow: 0 30px 60px -30px rgba(120, 0, 14, .45); border-top: 3px solid var(--sk-akcent);
}
html[data-tema^="21"] .ox-b2bn__karta b { display: block; font-family: var(--sk-font-nadpis); font-size: clamp(30px, 3.2vw, 48px); line-height: 1; margin-bottom: 8px; }
html[data-tema^="21"] .ox-b2bn__karta span { font: 500 14px/1.45 var(--sk-font-text); color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-show__b2b--metriky .ox-show__cesta { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }

/* 8 · SWISS GRID */
html[data-tema^="21"] .ox-show__b2b--swiss { grid-template-columns: minmax(0, 1fr); background: #fff; color: #0a0a0a; }
html[data-tema^="21"] .ox-b2bn__swiss { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid rgba(10, 10, 10, .12); }
html[data-tema^="21"] .ox-b2bn__bunka {
	grid-column: span 2; border-right: 1px solid rgba(10, 10, 10, .12); border-bottom: 1px solid rgba(10, 10, 10, .12);
	padding: 24px 20px;
}
html[data-tema^="21"] .ox-b2bn__bunka:nth-child(3n) { border-right: 0; }
html[data-tema^="21"] .ox-b2bn__bunka--siroka { grid-column: span 4; }
html[data-tema^="21"] .ox-b2bn__bunka--cisla b { display: block; font-family: var(--sk-font-nadpis); font-size: clamp(34px, 3.6vw, 52px); margin: 12px 0 8px; color: var(--sk-akcent); }
html[data-tema^="21"] .ox-b2bn__bunka b { display: block; font-family: var(--sk-font-nadpis); font-size: 20px; margin: 10px 0 6px; }
html[data-tema^="21"] .ox-b2bn__bunka span { font-size: 14px; color: rgba(10, 10, 10, .65); line-height: 1.45; display: block; }
html[data-tema^="21"] .ox-b2bn__micro { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
html[data-tema^="21"] .ox-show__b2b--swiss .ox-h3 { font-size: clamp(30px, 4.6vw, 72px); line-height: .98; margin: 14px 0 18px; }
html[data-tema^="21"] .ox-b2bn__lead { font-size: 17px; line-height: 1.55; max-width: 44ch; color: rgba(10, 10, 10, .75); margin: 0; }
html[data-tema^="21"] .ox-b2bn__pas { background: var(--sk-akcent); color: #fff; padding: 26px 30px; display: flex; justify-content: flex-end; }

/* 9 · TRUST-LED (tmavá) */
html[data-tema^="21"] .ox-show__b2b--dovera {
	grid-template-columns: minmax(0, 1fr); color: #F6F1E7;
	background: radial-gradient(120% 140% at 50% -6%, rgba(255, 0, 29, .3), rgba(255, 0, 29, .06) 30%, transparent 60%), linear-gradient(180deg, #2A0603, #1C0403);
}
html[data-tema^="21"] .ox-b2bn__dovera { text-align: center; }
html[data-tema^="21"] .ox-b2bn__dovera .ox-show__akcie { justify-content: center; }
html[data-tema^="21"] .ox-b2bn__oko { font: 700 12px/1 var(--sk-font-text); letter-spacing: .24em; text-transform: uppercase; color: var(--sk-akcent); }
html[data-tema^="21"] .ox-b2bn__dovera .ox-h3 { color: #F6F1E7; margin: 14px auto 16px; max-width: 18ch; }
html[data-tema^="21"] .ox-b2bn__dovera .ox-b2bn__sub { color: rgba(246, 241, 231, .72); }
html[data-tema^="21"] .ox-b2bn__dovera-body { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 22px 0 18px; font-size: 14px; color: rgba(246, 241, 231, .78); }
html[data-tema^="21"] .ox-b2bn__dovera-body span::before { content: '✓'; color: var(--sk-akcent); font-weight: 800; margin-right: 8px; }
html[data-tema^="21"] .ox-b2bn__dovera .ox-show__marza { background: rgba(255, 255, 255, .08); color: rgba(246, 241, 231, .9); max-width: 60ch; margin-inline: auto; }

/* 10 · ROADMAP RAIL */
html[data-tema^="21"] .ox-show__b2b--roadmap { grid-template-columns: minmax(0, 1fr); background: #fff; color: var(--sk-text); }
html[data-tema^="21"] .ox-b2bn__rm-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 60px); align-items: end; margin-bottom: clamp(30px, 4vw, 56px); }
html[data-tema^="21"] .ox-show__b2b--roadmap .ox-h3,
html[data-tema^="21"] .ox-show__b2b--roadmap p { color: var(--sk-text); }
html[data-tema^="21"] .ox-show__b2b--roadmap .ox-oko { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-b2bn__rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html[data-tema^="21"] .ox-b2bn__rail::before { content: ''; position: absolute; left: 18px; right: 18px; top: 17px; height: 2px; background: var(--sk-linka); }
html[data-tema^="21"] .ox-b2bn__rail::after { content: ''; position: absolute; left: 18px; width: 50%; top: 17px; height: 2px; background: var(--sk-akcent); }
html[data-tema^="21"] .ox-b2bn__k { position: relative; }
html[data-tema^="21"] .ox-b2bn__bod {
	width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--sk-linka); background: #fff;
	display: grid; place-items: center; font: 700 12px 'JetBrains Mono', ui-monospace, monospace; font-style: normal; position: relative; z-index: 1;
}
html[data-tema^="21"] .ox-b2bn__k--hotovo .ox-b2bn__bod { background: var(--sk-akcent); border-color: var(--sk-akcent); color: #fff; }
html[data-tema^="21"] .ox-b2bn__pilulka-m {
	display: inline-block; margin: 16px 0 8px; padding: 6px 10px; border-radius: 999px;
	font: 700 11px/1 var(--sk-font-text); letter-spacing: .1em; text-transform: uppercase;
	border: 1px solid var(--sk-linka); color: var(--sk-text-tlmeny);
}
html[data-tema^="21"] .ox-b2bn__k--hotovo .ox-b2bn__pilulka-m { background: rgba(255, 0, 29, .08); border-color: rgba(255, 0, 29, .35); color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-b2bn__k b { display: block; font-family: var(--sk-font-nadpis); font-size: 20px; margin-bottom: 4px; }
html[data-tema^="21"] .ox-b2bn__k small { color: var(--sk-text-tlmeny); font-size: 14px; line-height: 1.45; }

@media (max-width: 900px) {
	html[data-tema^="21"] .ox-b2bn__swiss { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bn__bunka, html[data-tema^="21"] .ox-b2bn__bunka--siroka { grid-column: auto; border-right: 0; }
	html[data-tema^="21"] .ox-b2bn__karty,
	html[data-tema^="21"] .ox-b2bn__rail,
	html[data-tema^="21"] .ox-b2bn__rm-top { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bn__karty { margin-top: 20px; }
	html[data-tema^="21"] .ox-b2bn__rail::before, html[data-tema^="21"] .ox-b2bn__rail::after { display: none; }
	html[data-tema^="21"] .ox-b2bn__foto { width: 100%; }
}

/* --- 85) varianta D späť na plný formát 16:9 (Peter 18. 9. 2026) ---------------
   Zvislý záber vypĺňa 16:9 rám (bez rozmazaných bokov); ťažisko mierne hore, aby
   ostali v obraze ruky a pohár. */
html[data-tema^="21"] .ox-priprava--d .ox-priprava__video { object-fit: cover; object-position: 50% 42%; }
html[data-tema^="21"] .ox-priprava--d .ox-priprava__film--video::before { display: none; }

/* --- 86) responzivita návrhov sekcie 02 (Peter 18. 9. 2026) --------------------
   „veď toto je úplne rozbité" — na úzkych oknách sa štvorstĺpcové mriežky krokov
   scvrkli na ~80 px a text sa lámal po slovách. Do 1100 px idú dva stĺpce, do
   760 px jeden; vnútorné mriežky návrhov sa zlomia spolu so sekciou. */
@media (max-width: 1100px) {
	html[data-tema^="21"] .ox-show__b2b .ox-show__cesta,
	html[data-tema^="21"] .ox-show__b2b--metriky .ox-show__cesta,
	html[data-tema^="21"] .ox-show__b2b--ucet .ox-show__cesta,
	html[data-tema^="21"] .ox-show__b2b--rovnica .ox-show__cesta,
	html[data-tema^="21"] .ox-b2bn__karty,
	html[data-tema^="21"] .ox-b2bn__rail,
	html[data-tema^="21"] .ox-b2bn__osa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-b2bn__swiss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-b2bn__bunka, html[data-tema^="21"] .ox-b2bn__bunka--siroka { grid-column: span 2; }
	html[data-tema^="21"] .ox-b2bn__rail::before, html[data-tema^="21"] .ox-b2bn__rail::after,
	html[data-tema^="21"] .ox-b2bn__osa::before { display: none; }
	html[data-tema^="21"] .ox-b2bn__karty { margin-top: 24px; }
	html[data-tema^="21"] .ox-show__b2b--split,
	html[data-tema^="21"] .ox-show__b2b--bento,
	html[data-tema^="21"] .ox-show__b2b--ucet { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-show__b2b,
	html[data-tema^="21"] .ox-show__b2b .ox-show__cesta,
	html[data-tema^="21"] .ox-show__b2b--metriky .ox-show__cesta,
	html[data-tema^="21"] .ox-show__b2b--ucet .ox-show__cesta,
	html[data-tema^="21"] .ox-show__b2b--rovnica .ox-show__cesta,
	html[data-tema^="21"] .ox-b2bn__karty,
	html[data-tema^="21"] .ox-b2bn__rail,
	html[data-tema^="21"] .ox-b2bn__osa,
	html[data-tema^="21"] .ox-b2bn__bento,
	html[data-tema^="21"] .ox-b2bn__swiss,
	html[data-tema^="21"] .ox-b2bn__rm-top { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bn__dlazdica--velka { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bn__top { flex-direction: column; align-items: flex-start; }
	html[data-tema^="21"] .ox-b2bn__metrika { flex-direction: column; gap: 10px; }
	html[data-tema^="21"] .ox-b2bn__foto { width: 100%; height: 180px; }
	html[data-tema^="21"] .ox-b2bn__riadok { align-items: flex-start; }
	html[data-tema^="21"] .ox-b2bn__pas { justify-content: flex-start; }
	html[data-tema^="21"] .ox-b2bn__check .ox-show__nalepka { position: static; width: 120px; margin: 14px auto 0; }
	html[data-tema^="21"] .ox-b2bn__vzorec span { font-size: clamp(20px, 6vw, 30px); }
}

/* --- 87) varianta A: video vypĺňa 16:9 rám (Peter 18. 9. 2026) ----------------- */
html[data-tema^="21"] .ox-priprava--a .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: 16 / 9; max-height: min(58vh, 560px); width: 100%; margin-inline: 0;
}
html[data-tema^="21"] .ox-priprava--a .ox-priprava__video { object-fit: cover; object-position: 50% 42%; }

/* --- 88) Trust-led v značkových farbách (Peter 18. 9. 2026) --------------------
   „daj sem viac naše farby, nech je to jednotné — ako má top bar s miernym
   gradientom“: červená ako lišta, jemný svetelný prechod, žiadna hnedá tma. */
html[data-tema^="21"] .ox-show__b2b--dovera {
	color: #fff;
	background:
		radial-gradient(120% 120% at 50% -10%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
		linear-gradient(150deg, #D60019 0%, #D60019 52%, #B70015 100%);
}
html[data-tema^="21"] .ox-b2bn__dovera .ox-h3 { color: #fff; }
html[data-tema^="21"] .ox-b2bn__oko { color: rgba(255, 255, 255, .92); }
html[data-tema^="21"] .ox-b2bn__dovera .ox-b2bn__sub { color: rgba(255, 255, 255, .9); }
html[data-tema^="21"] .ox-b2bn__dovera-body { color: rgba(255, 255, 255, .92); }
html[data-tema^="21"] .ox-b2bn__dovera-body span::before { color: #fff; }
html[data-tema^="21"] .ox-b2bn__dovera .ox-show__marza { background: rgba(255, 255, 255, .14); color: #fff; }

/* --- 89) OPRAVA: mriežka variantov musí prebiť tému (Peter 18. 9. 2026) --------
   Téma definuje `.ox-show__b2b { grid-template-columns: .9fr 1.1fr }` s rovnakou
   špecifickosťou, takže jednostĺpcové návrhy sa lámali do 0 px stĺpca a text sa
   sypal po slovách. Preto `!important` — je to cielené na jednotlivé návrhy. */
html[data-tema^="21"] .ox-show__b2b--metriky,
html[data-tema^="21"] .ox-show__b2b--osa,
html[data-tema^="21"] .ox-show__b2b--rovnica,
html[data-tema^="21"] .ox-show__b2b--stats,
html[data-tema^="21"] .ox-show__b2b--swiss,
html[data-tema^="21"] .ox-show__b2b--dovera,
html[data-tema^="21"] .ox-show__b2b--roadmap { grid-template-columns: minmax(0, 1fr) !important; }
html[data-tema^="21"] .ox-show__b2b--bento { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; }
html[data-tema^="21"] .ox-show__b2b--ucet { grid-template-columns: minmax(0, 1fr) minmax(0, 460px) !important; }
html[data-tema^="21"] .ox-show__b2b--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

/* split: text kroku patrí do druhého stĺpca vedľa fajky, nie pod ňu */
html[data-tema^="21"] .ox-b2bn__check li { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
html[data-tema^="21"] .ox-b2bn__check li b { grid-column: 2; }
html[data-tema^="21"] .ox-b2bn__check li span { grid-column: 2; }
/* bento: pravý stĺpec veľkej dlaždice potrebuje viac miesta */
html[data-tema^="21"] .ox-b2bn__dlazdica--velka { grid-template-columns: minmax(0, 1fr) minmax(120px, auto); }

@media (max-width: 1100px) {
	html[data-tema^="21"] .ox-show__b2b--split,
	html[data-tema^="21"] .ox-show__b2b--bento,
	html[data-tema^="21"] .ox-show__b2b--ucet { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- 90) OPRAVA 2: deti jednostĺpcových návrhov patria do 1. stĺpca ------------
   Téma dáva `.ox-show__b2b > .ox-show__cesta { grid-column: 2 }`, čo v jednostĺpcovom
   návrhu vyrobilo implicitný druhý stĺpec a prvý sa zmrštil na 0 px (text sa lámal
   po slovách). Preto deti týchto návrhov zarovnávame do prvého stĺpca. */
html[data-tema^="21"] .ox-show__b2b--metriky > *,
html[data-tema^="21"] .ox-show__b2b--osa > *,
html[data-tema^="21"] .ox-show__b2b--rovnica > *,
html[data-tema^="21"] .ox-show__b2b--stats > *,
html[data-tema^="21"] .ox-show__b2b--swiss > *,
html[data-tema^="21"] .ox-show__b2b--dovera > *,
html[data-tema^="21"] .ox-show__b2b--roadmap > *,
html[data-tema^="21"] .ox-show__b2b--pas > * { grid-column: 1 !important; grid-row: auto !important; }
html[data-tema^="21"] .ox-show__b2b--ucet > .ox-show__cesta { grid-column: 1 / -1 !important; grid-row: auto !important; }

/* --- 91) Trust-led: sýta značková červená bez svetlého závoja (Peter 18. 9. 2026)
   Biely radiálny prechod robil hornú časť bledou; ostáva len firemný gradient
   rovnakého odtieňa ako horná lišta (#D60019 → tmavšia). */
html[data-tema^="21"] .ox-show__b2b--dovera {
	background: linear-gradient(160deg, #D60019 0%, #D60019 46%, #B70015 100%);
}

/* --- 92) varianta A: o kúsok vyšší rám videa (Peter 18. 9. 2026) ---------------
   16:9 orezávalo zvislý záber priveľmi; 16:10 pridá ~11 % výšky, viac netreba. */
html[data-tema^="21"] .ox-priprava--a .ox-priprava__film.ox-priprava__film--video {
	/* strop musí byť vyšší než výsledok pomeru, inak ho preváži a rám ostane plochý */
	aspect-ratio: 16 / 10; max-height: min(78vh, 780px);
}

/* --- 93) OPRAVY z vizuálnej kontroly (Peter 18. 9. 2026) -----------------------
   • „časová os": téma číslovala kroky cez `::before`, môj `<i>` pridal druhé číslo
     a dosky kariet prekrývali os → počítadlo témy v tomto návrhu vypíname a karty
     zbavíme pozadia, aby bolo vidieť os.
   • „split + checklist": text marže bol biely na krémovom podklade (nečitateľný). */
html[data-tema^="21"] .ox-b2bn__osa li::before { display: none !important; }
html[data-tema^="21"] .ox-b2bn__osa li {
	background: none !important; border: 0 !important; box-shadow: none !important;
	padding: 0 18px 0 0 !important; counter-increment: none;
}
html[data-tema^="21"] .ox-b2bn__osa li small { color: rgba(255, 255, 255, .85); }
html[data-tema^="21"] .ox-b2bn__check .ox-show__marza,
html[data-tema^="21"] .ox-b2bn__check .ox-show__marza b { color: var(--sk-text); }
html[data-tema^="21"] .ox-b2bn__check .ox-show__marza b { color: var(--sk-akcent-tmavy); }

/* --- 95) opravy po vizuálnej kontrole návrhov sekcie 02 (Peter 18. 9. 2026) ---
   Nálezy zo screenshotov (rola grafika): 1) na SVETLÝCH návrhoch (Bold stats,
   Swiss grid, Roadmap rail) ostal biely text a biele obrysové tlačidlo z tmavej
   dosky - nadpis, lead, marža aj „Vypočítať môj zisk“ boli neviditeľné;
   2) nálepka partnera vytŕčala zo spodnej hrany panela a orezávala sa;
   3) v základnom rozložení boli 4 kroky stlačené do ~100 px stĺpcov;
   4) mikrotext v Metric hero bol zarovnaný vľavo pod vycentrovaným blokom. */

/* 1 · svetlé dosky: text a tlačidlá v atramente, nie v bielej */
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) :is(.ox-h3, .ox-b2bn__lead, .ox-b2bn__sub) { color: var(--sk-text); }
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) > p,
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) > div > p { color: rgba(27, 27, 27, .78); }
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-oko { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-show__cesta b { color: var(--sk-text); }
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-show__cesta small { color: rgba(27, 27, 27, .7); }
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-show__cesta li { border-left-color: rgba(27, 27, 27, .14); }
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-show__cesta { border-top-color: rgba(27, 27, 27, .14); }
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-show__marza {
	background: rgba(27, 27, 27, .05); color: rgba(27, 27, 27, .82);
}
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-show__marza b { color: var(--sk-akcent-tmavy); }
/* „Vypočítať môj zisk“ na svetlom: biely obrys bol neviditeľný */
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-btn--obrys {
	color: var(--sk-text); border-color: rgba(27, 27, 27, .3); background: transparent;
}
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-btn--obrys:hover {
	color: #fff; background: var(--sk-text); border-color: var(--sk-text);
}
html[data-tema^="21"] :is(.ox-show__b2b--stats, .ox-show__b2b--swiss, .ox-show__b2b--roadmap) .ox-btn--hlavne {
	background: var(--sk-akcent); border-color: var(--sk-akcent); color: #fff;
}
/* Swiss má červený pás vpravo dole - tam tlačidlá ostávajú biele */
html[data-tema^="21"] .ox-b2bn__pas .ox-btn--obrys { color: #fff; border-color: rgba(255, 255, 255, .55); }
html[data-tema^="21"] .ox-b2bn__pas .ox-btn--obrys:hover { color: var(--sk-akcent); background: #fff; border-color: #fff; }
html[data-tema^="21"] .ox-b2bn__pas .ox-btn--hlavne { background: #fff; color: var(--sk-akcent); border-color: #fff; }

/* 2 · nálepka: v nových rozloženiach normálny prvok v toku, nie previs cez hranu */
html[data-tema^="21"] .ox-show__b2b:not(.ox-show__b2b--zaklad) .ox-show__nalepka {
	grid-column: auto; grid-row: auto; justify-self: end; align-self: start;
	width: clamp(104px, 10vw, 152px); margin: 20px 0 0; transform: rotate(-6deg);
}
html[data-tema^="21"] .ox-b2bn__check .ox-show__nalepka { right: 10px; bottom: 10px; margin: 0; width: clamp(84px, 8.5vw, 116px); }

/* 3 · základné rozloženie: kroky 2 × 2, nie štyri ~100 px stĺpce */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-show__b2b--zaklad > .ox-show__cesta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-show__b2b--zaklad > .ox-show__cesta li { min-height: 0; }
}

/* 4 · Metric hero: mikrotext pod vycentrovaným blokom patrí na stred */
html[data-tema^="21"] .ox-show__b2b--metriky .ox-b2bn__micro { text-align: center; margin: 18px auto 0; letter-spacing: .14em; }

/* --- 96) SEKCIA 01 „Čo je OXO Bubble Tea“ - päť návrhov (Peter 18. 9. 2026) ---
   Mockupy z relácie „OXO Web Fable“ (navrhy-sekcia01-tvrdenia.html). Obsah je
   vždy ten istý, mení sa iba rozloženie; prepína `widgety.js` (kľúč `s01`).
   Spoločné: sekcia beží na krémovej ploche webu, plagát je kampan-plagat-2026. */
html[data-tema^="21"] .ox-s01 { display: block; }
html[data-tema^="21"] .ox-s01 .ox-oko { display: inline-flex; }
html[data-tema^="21"] .ox-s01__plagat { margin: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(175deg, var(--sk-akcent), var(--sk-akcent-tmavy)); }
html[data-tema^="21"] .ox-s01__plagat img { display: block; width: 100%; height: 100%; object-fit: contain; }
html[data-tema^="21"] .ox-s01__plagat--kryt img,
html[data-tema^="21"] .ox-s01__plagat--siroky img { object-fit: cover; object-position: center 28%; }

/* A1 · EDITORIAL HERO */
html[data-tema^="21"] .ox-s01--a1 .ox-s01__hlava { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
html[data-tema^="21"] .ox-s01--a1 .ox-s01__hlava .ox-h2 { text-align: right; margin: 0; }
html[data-tema^="21"] .ox-s01--a1 .ox-s01__hlava .ox-lead { text-align: right; margin: 20px 0 0 auto; }
html[data-tema^="21"] .ox-s01--a1 .ox-s01__pas { position: relative; margin-top: clamp(26px, 3.4vw, 44px); border-radius: 26px; overflow: hidden; }
html[data-tema^="21"] .ox-s01--a1 .ox-s01__plagat--siroky { border-radius: 0; height: clamp(300px, 34vw, 460px); }
html[data-tema^="21"] .ox-s01__staty { position: absolute; left: 0; right: 0; bottom: 0; display: flex; background: rgba(20, 3, 2, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
html[data-tema^="21"] .ox-s01__staty div { flex: 1; padding: 16px clamp(14px, 1.6vw, 24px); border-right: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: rgba(255, 255, 255, .78); }
html[data-tema^="21"] .ox-s01__staty div:last-child { border-right: 0; }
html[data-tema^="21"] .ox-s01__staty b { display: block; font: 400 clamp(20px, 2.1vw, 28px)/1 var(--sk-font-nadpis); color: #fff; margin-bottom: 4px; }
html[data-tema^="21"] .ox-s01__spod { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(26px, 3.4vw, 44px); align-items: start; }
html[data-tema^="21"] .ox-s01__spod .ox-show__fakty { margin-top: 0; }

/* A2 · PRÍBEH V KROKOCH */
html[data-tema^="21"] .ox-s01--a2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4.6vw, 72px); align-items: start; }
@media (min-width: 1001px) { html[data-tema^="21"] .ox-s01--a2 .ox-s01__plagat--pin { position: sticky; top: calc(var(--ox-lista, 0px) + 96px); } }
html[data-tema^="21"] .ox-s01--a2 .ox-s01__plagat--pin { aspect-ratio: 1240 / 1754; }
html[data-tema^="21"] .ox-s01__kroky { margin-top: clamp(18px, 2.4vw, 30px); }
html[data-tema^="21"] .ox-s01__krok { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: clamp(14px, 1.8vw, 24px); padding: clamp(18px, 2.2vw, 28px) 0; border-top: 1px solid var(--sk-linka); opacity: .55; transition: opacity .3s var(--sk-prechod); }
html[data-tema^="21"] .ox-s01__krok:first-child { border-top: 0; padding-top: 0; }
html[data-tema^="21"] .ox-s01__krok--akt, html[data-tema^="21"] .ox-s01__krok:hover { opacity: 1; }
html[data-tema^="21"] .ox-s01__n { font: 400 clamp(48px, 5vw, 72px)/1 var(--sk-font-nadpis); color: var(--sk-akcent); }
html[data-tema^="21"] .ox-s01__n small { display: block; font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-tlmeny); margin-top: 6px; }
html[data-tema^="21"] .ox-s01__krok h3 { margin: 0 0 8px; font: 400 clamp(22px, 2.3vw, 30px)/1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-s01__krok p { margin: 0; color: var(--sk-text-tlmeny); font-size: 15.5px; line-height: 1.5; }
html[data-tema^="21"] .ox-s01__chipy { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(18px, 2.4vw, 28px) 0; }
html[data-tema^="21"] .ox-s01__chipy span { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 999px; background: var(--sk-povrch); box-shadow: var(--sk-obrys); font-size: 13.5px; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-s01__chipy span b { color: var(--sk-text); font-family: var(--sk-font-nadpis); font-weight: 400; letter-spacing: .02em; }
html[data-tema^="21"] .ox-s01__chipy img { width: 20px; height: 20px; }

/* A3 · BENTO */
html[data-tema^="21"] .ox-s01--a3 .ox-s01__hlava--stred { max-width: 68ch; }
html[data-tema^="21"] .ox-s01__bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 14px; margin-top: clamp(24px, 3vw, 38px); }
html[data-tema^="21"] .ox-s01__dl { border-radius: 22px; padding: 22px; background: var(--sk-povrch); box-shadow: var(--sk-tien-karta), var(--sk-obrys); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
html[data-tema^="21"] .ox-s01__dl--obraz { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; }
html[data-tema^="21"] .ox-s01__dl--obraz .ox-s01__plagat { height: 100%; border-radius: 22px; }
html[data-tema^="21"] .ox-s01__dl--cislo { background: linear-gradient(160deg, var(--sk-akcent), var(--sk-akcent-tmavy)); color: #fff; box-shadow: var(--sk-tien-karta); }
html[data-tema^="21"] .ox-s01__velke { font: 400 clamp(48px, 5.4vw, 84px)/1 var(--sk-font-nadpis); }
html[data-tema^="21"] .ox-s01__dl--cislo p { color: rgba(255, 255, 255, .88); }
html[data-tema^="21"] .ox-s01__dl h4 { margin: 0; font: 400 clamp(19px, 1.8vw, 26px)/1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-s01__dl p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-s01__ikona { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; margin-bottom: auto; box-shadow: var(--sk-obrys); }
html[data-tema^="21"] .ox-s01__ikona img { width: 26px; height: 26px; }
html[data-tema^="21"] .ox-s01__dl--citat { grid-column: span 2; background: #141414; color: #fff; justify-content: center; gap: 12px; }
html[data-tema^="21"] .ox-s01__dl--citat p { color: rgba(255, 255, 255, .86); font-size: 15px; }
html[data-tema^="21"] .ox-s01__dl--citat b { color: #FF8A7E; }
html[data-tema^="21"] .ox-s01__dl--citat .ox-show__bez { margin: 0; }
html[data-tema^="21"] .ox-s01__dl--citat .ox-show__bez li { color: rgba(255, 255, 255, .86); }

/* A4 · MANIFEST */
html[data-tema^="21"] .ox-s01--a4 { background: linear-gradient(160deg, var(--sk-akcent) 0%, var(--sk-akcent-tmavy) 52%, var(--sk-pata-bg, #920011) 100%); color: #fff; border-radius: 30px; padding: clamp(28px, 4vw, 60px); }
html[data-tema^="21"] .ox-s01__manifest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
html[data-tema^="21"] .ox-s01--a4 .ox-oko, html[data-tema^="21"] .ox-s01--a4 .ox-h2 { color: #fff; }
html[data-tema^="21"] .ox-s01--a4 .ox-h2 i { display: block; font-style: normal; color: #FFD9D6; }
html[data-tema^="21"] .ox-s01--a4 .ox-lead { color: rgba(255, 255, 255, .88); margin-top: 18px; }
html[data-tema^="21"] .ox-s01__chipy--biele span { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); color: #fff; font-weight: 600; }
html[data-tema^="21"] .ox-s01__chip--w { background: #fff !important; box-shadow: none !important; color: var(--sk-akcent) !important; font-weight: 800 !important; }
html[data-tema^="21"] .ox-s01__plagat--karta { transform: rotate(-4deg); box-shadow: 0 60px 100px -46px rgba(0, 0, 0, .7), 0 0 0 8px #fff; aspect-ratio: 1240 / 1754; background: #fff; }
html[data-tema^="21"] .ox-s01__redkarta { margin-top: clamp(26px, 3.4vw, 44px); background: #fff; color: var(--sk-text); border-radius: 22px; padding: clamp(20px, 2.6vw, 32px); }
html[data-tema^="21"] .ox-s01__redkarta .ox-lead--red { background: none; color: var(--sk-text); padding: 0; }

/* A5 · POROVNANIE */
html[data-tema^="21"] .ox-s01__porovnanie { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 26px; overflow: hidden; margin-top: clamp(24px, 3vw, 38px); }
html[data-tema^="21"] .ox-s01__pol { padding: clamp(26px, 3vw, 44px); color: #fff; }
html[data-tema^="21"] .ox-s01__pol--cierna { background: #1b1b1b; }
html[data-tema^="21"] .ox-s01__pol--cervena { background: linear-gradient(170deg, var(--sk-akcent), var(--sk-akcent-tmavy)); }
html[data-tema^="21"] .ox-s01__pod { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
html[data-tema^="21"] .ox-s01__pol h3 { margin: 10px 0 22px; font: 400 clamp(28px, 3.2vw, 44px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: #fff; }
html[data-tema^="21"] .ox-s01__riadok { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 15px; }
html[data-tema^="21"] .ox-s01__riadok b { font-weight: 800; text-align: right; }
html[data-tema^="21"] .ox-s01__pol--cierna .ox-s01__riadok b { color: #FF8A7E; }
html[data-tema^="21"] .ox-s01__sumar { margin: 22px 0 0; font: 400 clamp(20px, 2.1vw, 28px)/1.1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-s01__pol--cierna .ox-s01__sumar { opacity: .62; }
html[data-tema^="21"] .ox-s01__rucka { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #fff; transform: translateX(-50%); }
html[data-tema^="21"] .ox-s01__rucka i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--sk-text); display: grid; place-items: center; font: 800 18px/1 var(--sk-font-text); font-style: normal; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .55); }

/* responzívne */
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-s01--a1 .ox-s01__hlava,
	html[data-tema^="21"] .ox-s01--a2,
	html[data-tema^="21"] .ox-s01__manifest,
	html[data-tema^="21"] .ox-s01__spod { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-s01--a1 .ox-s01__hlava .ox-h2,
	html[data-tema^="21"] .ox-s01--a1 .ox-s01__hlava .ox-lead { text-align: left; margin-left: 0; }
	html[data-tema^="21"] .ox-s01__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-s01__dl--obraz, html[data-tema^="21"] .ox-s01__dl--citat { grid-column: span 2; }
	html[data-tema^="21"] .ox-s01__dl--obraz { grid-row: auto; aspect-ratio: 4 / 5; }
	html[data-tema^="21"] .ox-s01__porovnanie { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-s01__rucka { display: none; }
	html[data-tema^="21"] .ox-s01__staty { position: static; flex-wrap: wrap; background: rgba(20, 3, 2, .9); }
	html[data-tema^="21"] .ox-s01__staty div { flex: 1 1 46%; }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-s01__bento { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-s01__dl--obraz, html[data-tema^="21"] .ox-s01__dl--citat { grid-column: auto; }
	html[data-tema^="21"] .ox-s01__krok { grid-template-columns: 72px minmax(0, 1fr); }
}

/* --- 96b) opravy po kontrole návrhov sekcie 01 (18. 9. 2026) ------------------
   1) popis v červenej dlaždici „30 s“ dedil tlmenú sivú z .ox-s01__dl p (rovnaká
      špecifickosť, neskoršie pravidlo) - na červenej bol nečitateľný;
   2) v manifeste naklonený plagát presahoval hornú hranu červenej dosky. */
html[data-tema^="21"] .ox-s01__dl.ox-s01__dl--cislo p { color: rgba(255, 255, 255, .9); }
html[data-tema^="21"] .ox-s01__dl.ox-s01__dl--citat p { color: rgba(255, 255, 255, .86); }
html[data-tema^="21"] .ox-s01__manifest > div:last-child { display: flex; justify-content: center; }
html[data-tema^="21"] .ox-s01__plagat--karta {
	max-height: min(58vh, 540px); width: auto; max-width: 100%; aspect-ratio: 1240 / 1754; margin: 10px auto;
}
html[data-tema^="21"] .ox-s01__plagat--karta img { object-fit: cover; }

/* --- 97) TVRDENIA - päť návrhov karuselu (Peter 18. 9. 2026) ------------------
   Mockupy z relácie „OXO Web Fable“ (B1 Coverflow, B2 Rad kariet, B3 Príbehy,
   B4 Brutalist, B5 Všetkých sedem). Pôvodné 3D koleso ostáva v DOM, len ho
   schováme - engine hrdinu sa tak nemusí prestavovať. Obsah je totožný. */
html[data-tema^="21"] .ox-msr--tvr .ox-msr__javisko,
html[data-tema^="21"] .ox-msr--tvr .ox-msr__vitrina,
html[data-tema^="21"] .ox-msr--tvr .ox-msr__panel,
html[data-tema^="21"] .ox-msr--tvr .ox-msr__lista { display: none !important; }
html[data-tema^="21"] .ox-msr--tvr .ox-msr__mriezka { display: block; }
html[data-tema^="21"] .ox-tvr { position: relative; z-index: 2; color: #fff; padding: clamp(8px, 1.6vw, 20px) 0 clamp(16px, 2vw, 28px); }
html[data-tema^="21"] .ox-tvr__hlava { margin-bottom: clamp(16px, 2.2vw, 28px); }
html[data-tema^="21"] .ox-tvr__nadpis { margin: 10px 0 0; font: 400 clamp(30px, 4.4vw, 64px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: #fff; }
html[data-tema^="21"] .ox-tvr .ox-oko { color: rgba(255, 255, 255, .9); }
html[data-tema^="21"] .ox-tvr__symbol { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; }
html[data-tema^="21"] .ox-tvr__symbol img { width: 70px; height: 70px; object-fit: contain; }
html[data-tema^="21"] .ox-tvr__sip, html[data-tema^="21"] .ox-tvr__tap, html[data-tema^="21"] .ox-tvr__stvorec {
	cursor: pointer; font: 400 22px/1 var(--sk-font-text); color: #fff; background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .6); width: 50px; height: 50px; border-radius: 50%;
	display: inline-grid; place-items: center; transition: background .2s, color .2s, border-color .2s;
}
html[data-tema^="21"] .ox-tvr__sip:hover, html[data-tema^="21"] .ox-tvr__tap:hover { background: #fff; color: var(--sk-akcent); border-color: #fff; }
html[data-tema^="21"] .ox-tvr__bodky { display: flex; gap: 8px; align-items: center; }
html[data-tema^="21"] .ox-tvr__bod { width: 40px; height: 3px; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .35); }
html[data-tema^="21"] .ox-tvr__bod--akt { background: #fff; }
html[data-tema^="21"] .ox-tvr__ovladanie { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: clamp(14px, 2vw, 24px); }

/* B1 · COVERFLOW */
html[data-tema^="21"] .ox-tvr__javisko { position: relative; height: clamp(360px, 44vw, 470px); perspective: 1400px; }
html[data-tema^="21"] .ox-tvr--b1 .ox-tvr__k {
	position: absolute; top: 50%; left: 50%; width: 290px; height: clamp(320px, 38vw, 400px);
	background: #fff; color: var(--sk-text); border-radius: 22px; padding: 24px 20px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); transition: transform .45s var(--sk-prechod), opacity .45s var(--sk-prechod);
	transform-style: preserve-3d;
}
html[data-tema^="21"] .ox-tvr--b1 .ox-tvr__k small { font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(27, 27, 27, .5); }
html[data-tema^="21"] .ox-tvr--b1 .ox-tvr__k h3 { margin: 0; font: 400 22px/1.05 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-tvr--b1 .ox-tvr__k p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(27, 27, 27, .7); display: none; }
html[data-tema^="21"] .ox-tvr--b1 .ox-tvr__k--akt h3 { font-size: 28px; }
html[data-tema^="21"] .ox-tvr--b1 .ox-tvr__k--akt p { display: block; }
html[data-tema^="21"] .ox-tvr__zara { position: absolute; inset: auto 0 -40px 0; height: 300px; background: radial-gradient(60% 80% at 50% 100%, rgba(255, 217, 214, .35), transparent 70%); pointer-events: none; }

/* B2 · RAD KARIET */
html[data-tema^="21"] .ox-tvr__panel { background: #fff; color: var(--sk-text); border-radius: 30px; padding: clamp(20px, 2.6vw, 32px); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .7); }
html[data-tema^="21"] .ox-tvr__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
html[data-tema^="21"] .ox-tvr__meta h3 { margin: 0; font: 400 clamp(22px, 2.4vw, 30px)/1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-tvr__chip { background: var(--sk-krem, #FFF7E6); color: var(--sk-text); border-radius: 999px; padding: 7px 12px; font: 800 11px/1 var(--sk-font-text); letter-spacing: .06em; text-transform: uppercase; }
html[data-tema^="21"] .ox-tvr__pas { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
html[data-tema^="21"] .ox-tvr__pas::-webkit-scrollbar { display: none; }
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__k {
	flex: 0 0 248px; scroll-snap-align: start; background: var(--sk-krem, #FFF7E6); border-radius: 20px;
	padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
	box-shadow: var(--sk-obrys); color: var(--sk-text); transition: background .25s, color .25s;
}
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__k h3 { margin: 0; font: 400 19px/1.1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__k p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(27, 27, 27, .68); }
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__k small { font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(27, 27, 27, .5); }
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__k--akt { background: var(--sk-akcent); color: #fff; }
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__k--akt p, html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__k--akt small { color: rgba(255, 255, 255, .82); }
html[data-tema^="21"] .ox-tvr__noha { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
html[data-tema^="21"] .ox-tvr__noha .ox-tvr__bod { background: #E7DACB; }
html[data-tema^="21"] .ox-tvr__noha .ox-tvr__bod--akt { background: var(--sk-akcent); }
html[data-tema^="21"] .ox-tvr__sipky { display: flex; gap: 8px; }
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__sip { width: 44px; height: 44px; background: var(--sk-text); border-color: var(--sk-text); color: #fff; }
html[data-tema^="21"] .ox-tvr--b2 .ox-tvr__sip:hover { background: var(--sk-akcent); border-color: var(--sk-akcent); color: #fff; }

/* B3 · PRÍBEHY */
html[data-tema^="21"] .ox-tvr__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .58fr); gap: clamp(28px, 4.6vw, 72px); align-items: center; }
html[data-tema^="21"] .ox-tvr__lead { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .88); margin: 18px 0 0; max-width: 46ch; }
html[data-tema^="21"] .ox-tvr__zoznam { list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; display: grid; gap: 9px; }
html[data-tema^="21"] .ox-tvr__zoznam li { display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: 15.5px; color: rgba(255, 255, 255, .8); cursor: pointer; }
html[data-tema^="21"] .ox-tvr__zoznam li i { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; width: 30px; opacity: .6; font-style: normal; }
html[data-tema^="21"] .ox-tvr__zoznam li.ox-tvr__zoznam--akt { color: #fff; }
html[data-tema^="21"] .ox-tvr__zoznam li.ox-tvr__zoznam--akt i { opacity: 1; }
html[data-tema^="21"] .ox-tvr__telefon { position: relative; aspect-ratio: 9 / 16; max-height: 70vh; border-radius: 34px; overflow: hidden; background: #2A0603; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8), 0 0 0 9px rgba(255, 255, 255, .16); }
html[data-tema^="21"] .ox-tvr__foto { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s var(--sk-prechod); }
html[data-tema^="21"] .ox-tvr__foto--akt { opacity: 1; }
html[data-tema^="21"] .ox-tvr__pruhy { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; gap: 5px; z-index: 3; }
html[data-tema^="21"] .ox-tvr__pruhy i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .4); }
html[data-tema^="21"] .ox-tvr__pruhy i.ox-tvr__pruh--akt { background: #fff; }
html[data-tema^="21"] .ox-tvr__tap { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; background: rgba(255, 255, 255, .2); border: 0; z-index: 3; }
html[data-tema^="21"] .ox-tvr__tap--l { left: 12px; }
html[data-tema^="21"] .ox-tvr__tap--p { right: 12px; }
html[data-tema^="21"] .ox-tvr__popis { position: absolute; left: 0; right: 0; bottom: 0; padding: 110px 24px 26px; background: linear-gradient(180deg, transparent, rgba(120, 0, 14, .92)); z-index: 2; }
html[data-tema^="21"] .ox-tvr__popis small { font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
html[data-tema^="21"] .ox-tvr__popis h3 { margin: 8px 0 10px; font: 400 clamp(26px, 2.6vw, 38px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: #fff; }
html[data-tema^="21"] .ox-tvr__popis p { margin: 0; font-size: 14px; line-height: 1.5; opacity: .9; }

/* B4 · BRUTALIST */
html[data-tema^="21"] .ox-tvr--b4 { background: var(--sk-krem, #FFF7E6); color: var(--sk-text); border-radius: 24px; padding: clamp(22px, 3vw, 40px); }
html[data-tema^="21"] .ox-tvr--b4 .ox-tvr__nadpis, html[data-tema^="21"] .ox-tvr--b4 .ox-oko { color: var(--sk-text); }
html[data-tema^="21"] .ox-tvr--b4 .ox-oko { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-tvr__rig { display: grid; grid-template-columns: 66px minmax(0, 1fr) 66px; gap: 22px; align-items: stretch; }
html[data-tema^="21"] .ox-tvr__stvorec { border-radius: 0; border: 3px solid var(--sk-text); background: #fff; color: var(--sk-text); box-shadow: 6px 6px 0 var(--sk-text); width: 100%; height: 100%; font-size: 26px; }
html[data-tema^="21"] .ox-tvr__stvorec:hover { background: var(--sk-akcent); color: #fff; }
html[data-tema^="21"] .ox-tvr__snimka { border: 3px solid var(--sk-text); background: #fff; box-shadow: 10px 10px 0 var(--sk-akcent), 10px 10px 0 3px var(--sk-text); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: 380px; }
html[data-tema^="21"] .ox-tvr__cislo { border-right: 3px solid var(--sk-text); background: var(--sk-akcent); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
html[data-tema^="21"] .ox-tvr__cislo b { font: 400 clamp(90px, 12vw, 170px)/.9 var(--sk-font-nadpis); }
html[data-tema^="21"] .ox-tvr__cislo span { font: 700 12px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
html[data-tema^="21"] .ox-tvr__telo { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
html[data-tema^="21"] .ox-tvr__symbol--velky { width: 108px; height: 108px; background: var(--sk-krem, #FFF7E6); }
html[data-tema^="21"] .ox-tvr__telo h3 { margin: 0; font: 400 clamp(28px, 3.4vw, 50px)/.98 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-tvr__telo p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(27, 27, 27, .8); }
html[data-tema^="21"] .ox-tvr__index { display: flex; gap: 10px; margin-top: 22px; justify-content: center; flex-wrap: wrap; }
html[data-tema^="21"] .ox-tvr__ix { width: 44px; height: 44px; border: 3px solid var(--sk-text); background: #fff; color: var(--sk-text); font: 700 13px/1 'JetBrains Mono', ui-monospace, monospace; cursor: pointer; }
html[data-tema^="21"] .ox-tvr__ix--akt { background: var(--sk-text); color: #fff; }

/* B5 · VŠETKÝCH SEDEM */
html[data-tema^="21"] .ox-tvr__bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 14px; }
html[data-tema^="21"] .ox-tvr__dl { position: relative; overflow: hidden; border-radius: 22px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: #fff; text-decoration: none; }
html[data-tema^="21"] .ox-tvr__ikona { position: absolute; right: 14px; top: 14px; width: 62px; height: 62px; border-radius: 18px; background: #fff; display: grid; place-items: center; }
html[data-tema^="21"] .ox-tvr__ikona img { width: 44px; height: 44px; object-fit: contain; }
html[data-tema^="21"] .ox-tvr__dl h3 { margin: 0; font: 400 clamp(18px, 1.8vw, 24px)/1.05 var(--sk-font-nadpis); text-transform: uppercase; color: inherit; }
html[data-tema^="21"] .ox-tvr__dl small { font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
html[data-tema^="21"] .ox-tvr__dl--velka { grid-column: span 2; grid-row: span 2; background: #fff; color: var(--sk-text); box-shadow: none; }
html[data-tema^="21"] .ox-tvr__dl--velka .ox-tvr__ikona { width: 190px; height: 190px; right: 24px; top: 24px; background: none; }
html[data-tema^="21"] .ox-tvr__dl--velka .ox-tvr__ikona img { width: 170px; height: 170px; }
html[data-tema^="21"] .ox-tvr__dl--velka h3 { font-size: clamp(30px, 3.4vw, 48px); }
html[data-tema^="21"] .ox-tvr__dl--velka p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(27, 27, 27, .75); max-width: 42ch; }
html[data-tema^="21"] .ox-tvr__dl--velka small { color: var(--sk-akcent); opacity: 1; }
html[data-tema^="21"] .ox-tvr__dl--odkaz { background: #fff; color: var(--sk-akcent); align-items: center; justify-content: center; text-align: center; box-shadow: none; }
html[data-tema^="21"] .ox-tvr__dl--odkaz h3 { font-size: 20px; }
html[data-tema^="21"] .ox-tvr__dl--odkaz:hover { background: var(--sk-krem, #FFF7E6); }

@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-tvr__story { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-tvr__telefon { max-width: 360px; margin-inline: auto; }
	html[data-tema^="21"] .ox-tvr__snimka { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-tvr__cislo { border-right: 0; border-bottom: 3px solid var(--sk-text); flex-direction: row; align-items: center; gap: 14px; }
	html[data-tema^="21"] .ox-tvr__cislo b { font-size: 64px; }
	html[data-tema^="21"] .ox-tvr__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-tvr__dl--velka { grid-column: span 2; grid-row: span 1; min-height: 300px; }
	html[data-tema^="21"] .ox-tvr__dl--velka .ox-tvr__ikona { width: 120px; height: 120px; }
	html[data-tema^="21"] .ox-tvr__dl--velka .ox-tvr__ikona img { width: 100px; height: 100px; }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-tvr__rig { grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 12px; }
	html[data-tema^="21"] .ox-tvr__bento { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-tvr__dl--velka { grid-column: auto; }
	html[data-tema^="21"] .ox-tvr--b1 .ox-tvr__k { width: 230px; }
	html[data-tema^="21"] .ox-s01__chipy span b { display: block; width: 100%; }
}

/* --- 97b) oprava šírky návrhov tvrdení (18. 9. 2026) --------------------------
   `#ox-msr` je grid s obsahovo dimenzovaným stĺpcom: rad kariet v návrhu B2
   (flex s overflow-x) mal min-content 1736 px a roztiahol celý hrdinu na
   2011 px - blok potom presahoval okno vpravo. */
html[data-tema^="21"] .ox-msr--tvr { grid-template-columns: minmax(0, 1fr) !important; }
html[data-tema^="21"] .ox-msr--tvr .ox-msr__mriezka { display: block; width: 100%; min-width: 0; max-width: var(--sk-maxw); margin-inline: auto; }
html[data-tema^="21"] .ox-tvr,
html[data-tema^="21"] .ox-tvr__panel,
html[data-tema^="21"] .ox-tvr__pas,
html[data-tema^="21"] .ox-tvr__bento,
html[data-tema^="21"] .ox-tvr__rig { min-width: 0; max-width: 100%; }
html[data-tema^="21"] .ox-tvr__pas { scroll-padding-left: 4px; }

/* --- 97c) mobil: opravy návrhov tvrdení po kontrole na 390 px (18. 9. 2026) ---
   1) „Príbehy“: v telefóne sú všetky deti absolútne, takže grid položke s
      aspect-ratio nevyšla šírka a karta mala 0 × 0 - dávame explicitnú šírku;
   2) „Brutalist“: šípky po stranách nechali snímke 226 px - na mobile idú pod ňu;
   3) „Coverflow“: karty a šípky prečnievali okno. */
html[data-tema^="21"] .ox-tvr__telefon { width: min(360px, 100%); }
html[data-tema^="21"] .ox-tvr__javisko { overflow: hidden; }
html[data-tema^="21"] .ox-tvr__pas { width: 100%; }
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-tvr__rig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	html[data-tema^="21"] .ox-tvr__snimka { grid-column: 1 / -1; order: -1; }
	html[data-tema^="21"] .ox-tvr__stvorec { height: 56px; box-shadow: 4px 4px 0 var(--sk-text); }
	html[data-tema^="21"] .ox-tvr__telo { padding: 20px; }
	html[data-tema^="21"] .ox-tvr__telo p { font-size: 15px; }
	html[data-tema^="21"] .ox-tvr__symbol--velky { width: 84px; height: 84px; }
	html[data-tema^="21"] .ox-tvr__ovladanie { gap: 10px; }
	html[data-tema^="21"] .ox-tvr__bod { width: 26px; }
	html[data-tema^="21"] .ox-tvr__sip { width: 44px; height: 44px; }
	html[data-tema^="21"] .ox-tvr__zoznam li { font-size: 14.5px; }
}

/* --- 98) DÔVODY - päť nových návrhov (Peter 18. 9. 2026) ----------------------
   Mockupy z relácie „OXO Web Fable“ (navrhy-dovody.html): D1 Swiss riadky,
   D2 Akordeón, D3 Cesta, D4 Koľajnica, D5 Dôkazy. Obsah je tých istých šesť
   dôvodov, mení sa rozloženie. Markup vykresľuje `pohlady.js`. */
html[data-tema^="21"] :is(.ox-dovody--d1, .ox-dovody--d2, .ox-dovody--d3, .ox-dovody--d4, .ox-dovody--d5) { display: block; }

/* D1 · SWISS RIADKY */
html[data-tema^="21"] .ox-dov1 { border-top: 2px solid var(--sk-text); }
html[data-tema^="21"] .ox-dov1__r {
	display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.1fr) 52px; gap: clamp(16px, 2.2vw, 32px);
	align-items: start; padding: 22px 0; border-bottom: 1px solid rgba(27, 27, 27, .15); cursor: pointer;
	transition: background .25s var(--sk-prechod), color .25s var(--sk-prechod), margin .25s var(--sk-prechod), padding .25s var(--sk-prechod);
}
html[data-tema^="21"] .ox-dov1__c { font: 700 13px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; color: var(--sk-akcent); padding-top: 8px; }
html[data-tema^="21"] .ox-dov1__r .ox-h3 { margin: 0; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.02; }
html[data-tema^="21"] .ox-dov1__r p { margin: 0; color: var(--sk-text-tlmeny); font-size: 15px; line-height: 1.5; }
html[data-tema^="21"] .ox-dov1__sip { font: 400 30px/1 var(--sk-font-nadpis); text-align: right; opacity: .3; }
html[data-tema^="21"] .ox-dov1__r--akt {
	background: var(--sk-akcent); color: #fff; border-radius: 14px; border-bottom-color: transparent;
	margin-inline: clamp(-28px, -2vw, -10px); padding-inline: clamp(10px, 2vw, 28px);
}
html[data-tema^="21"] .ox-dov1__r--akt .ox-h3 { color: #fff; }
html[data-tema^="21"] .ox-dov1__r--akt p { color: rgba(255, 255, 255, .9); }
html[data-tema^="21"] .ox-dov1__r--akt .ox-dov1__c { color: rgba(255, 255, 255, .9); }
html[data-tema^="21"] .ox-dov1__r--akt .ox-dov1__sip { opacity: 1; }
html[data-tema^="21"] .ox-dov1__pas {
	margin-top: 28px; background: var(--sk-text); color: #fff; border-radius: 10px; padding: 14px clamp(14px, 2vw, 24px);
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	font: 700 11px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
}
html[data-tema^="21"] .ox-dov1__pas b { color: var(--sk-ruz, #FFD9D6); }

/* D2 · AKORDEÓN */
html[data-tema^="21"] .ox-dov2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.6vw, 72px); align-items: start; }
@media (min-width: 1001px) { html[data-tema^="21"] .ox-dov2__l { position: sticky; top: calc(var(--ox-lista, 0px) + 96px); } }
html[data-tema^="21"] .ox-dov2__lead { font-size: 17px; line-height: 1.55; color: var(--sk-text-tlmeny); margin: 0 0 22px; }
html[data-tema^="21"] .ox-dov2__it {
	border-top: 1px solid rgba(27, 27, 27, .15); padding: 20px 0; cursor: pointer;
	display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center;
	transition: background .25s var(--sk-prechod), box-shadow .25s var(--sk-prechod), padding .25s var(--sk-prechod);
}
html[data-tema^="21"] .ox-dov2__it:last-child { border-bottom: 1px solid rgba(27, 27, 27, .15); }
html[data-tema^="21"] .ox-dov2__pl { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(27, 27, 27, .25); display: grid; place-items: center; position: relative; }
html[data-tema^="21"] .ox-dov2__pl::before, html[data-tema^="21"] .ox-dov2__pl::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; }
html[data-tema^="21"] .ox-dov2__pl::before { width: 15px; height: 2px; }
html[data-tema^="21"] .ox-dov2__pl::after { width: 2px; height: 15px; transition: transform .25s var(--sk-prechod); }
html[data-tema^="21"] .ox-dov2__it .ox-h3 { margin: 0; font-size: clamp(19px, 2vw, 26px); }
html[data-tema^="21"] .ox-dov2__telo { display: none; grid-column: 2; }
html[data-tema^="21"] .ox-dov2__it--akt {
	background: var(--sk-povrch, #fff); border-radius: 18px; border-top-color: transparent;
	padding: 22px; margin-inline: -22px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .35);
}
html[data-tema^="21"] .ox-dov2__it--akt .ox-dov2__pl { background: var(--sk-akcent); border-color: var(--sk-akcent); color: #fff; }
html[data-tema^="21"] .ox-dov2__it--akt .ox-dov2__pl::after { transform: scaleY(0); }
html[data-tema^="21"] .ox-dov2__it--akt .ox-dov2__telo { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; align-items: center; margin-top: 12px; }
html[data-tema^="21"] .ox-dov2__telo p { margin: 0; color: var(--sk-text-tlmeny); font-size: 15px; line-height: 1.55; }
html[data-tema^="21"] .ox-dov2__foto { width: 200px; height: 120px; object-fit: cover; border-radius: 12px; }

/* D3 · CESTA */
html[data-tema^="21"] .ox-dov3 { position: relative; padding-left: 58px; }
html[data-tema^="21"] .ox-dov3__chrbtica { position: absolute; left: 18px; top: 0; bottom: 0; width: 3px; background: rgba(27, 27, 27, .12); border-radius: 3px; }
html[data-tema^="21"] .ox-dov3__chrbtica i { display: block; width: 100%; height: 0; background: var(--sk-akcent); border-radius: 3px; transition: height .5s var(--sk-prechod); }
html[data-tema^="21"] .ox-dov3__e { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 22px; align-items: center; padding: 16px 0; opacity: .45; transition: opacity .4s var(--sk-prechod); }
html[data-tema^="21"] .ox-dov3__e--hotovo { opacity: 1; }
html[data-tema^="21"] .ox-dov3__e::before {
	content: ''; position: absolute; left: -47px; top: 50%; width: 15px; height: 15px; border-radius: 50%;
	background: var(--sk-bg, #fff); border: 3px solid rgba(27, 27, 27, .2); transform: translateY(-50%); transition: background .3s, border-color .3s, box-shadow .3s;
}
html[data-tema^="21"] .ox-dov3__e--hotovo::before { background: var(--sk-akcent); border-color: var(--sk-akcent); box-shadow: 0 0 0 6px rgba(225, 0, 26, .15); }
html[data-tema^="21"] .ox-dov3__karta { background: var(--sk-krem, #FFF7E6); border-radius: 18px; padding: 20px 24px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: start; }
html[data-tema^="21"] .ox-dov3__c { font: 400 26px/1 var(--sk-font-nadpis); color: var(--sk-akcent); }
html[data-tema^="21"] .ox-dov3__karta .ox-h3 { margin: 0 0 6px; font-size: clamp(19px, 2vw, 26px); }
html[data-tema^="21"] .ox-dov3__karta p { margin: 0; color: var(--sk-text-tlmeny); font-size: 14.5px; line-height: 1.5; }
html[data-tema^="21"] .ox-dov3__foto { width: 240px; height: 116px; object-fit: cover; border-radius: 14px; }

/* D4 · KOĽAJNICA */
html[data-tema^="21"] .ox-dovody--d4 { background: linear-gradient(160deg, var(--sk-akcent) 0%, var(--sk-akcent-tmavy) 58%, var(--sk-pata-bg, #920011) 100%); border-radius: 28px; padding: clamp(24px, 3.4vw, 46px); color: #fff; }
html[data-tema^="21"] .ox-dov4 { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: stretch; }
html[data-tema^="21"] .ox-dov4__rail { display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 10px 0; }
html[data-tema^="21"] .ox-dov4__tick {
	display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
	color: rgba(255, 255, 255, .55); font: 600 14px/1.2 var(--sk-font-text);
	transition: color .2s var(--sk-prechod), font-size .2s var(--sk-prechod);
}
html[data-tema^="21"] .ox-dov4__tick i { display: block; height: 2px; width: 24px; background: rgba(255, 255, 255, .4); flex: none; transition: width .2s var(--sk-prechod), height .2s, background .2s; }
html[data-tema^="21"] .ox-dov4__tick--s1 { color: rgba(255, 255, 255, .8); font-size: 16px; }
html[data-tema^="21"] .ox-dov4__tick--s1 i { width: 40px; }
html[data-tema^="21"] .ox-dov4__tick--blizko { color: #fff; font-size: 19px; }
html[data-tema^="21"] .ox-dov4__tick--blizko i { width: 56px; }
html[data-tema^="21"] .ox-dov4__tick--akt { color: #fff; font: 400 clamp(22px, 2.2vw, 32px)/1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-dov4__tick--akt i { width: 66px; height: 4px; background: #fff; }
html[data-tema^="21"] .ox-dov4__prev { position: relative; background: #fff; color: var(--sk-text); border-radius: 26px; overflow: hidden; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .7); display: grid; grid-template-rows: clamp(180px, 22vw, 280px) minmax(0, 1fr); }
html[data-tema^="21"] .ox-dov4__foto { grid-row: 1; grid-column: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--sk-prechod); }
html[data-tema^="21"] .ox-dov4__foto--akt { opacity: 1; }
html[data-tema^="21"] .ox-dov4__telo { grid-row: 2; padding: clamp(20px, 2.4vw, 32px); }
html[data-tema^="21"] .ox-dov4__num { font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; color: var(--sk-akcent); }
html[data-tema^="21"] .ox-dov4__telo .ox-h3 { margin: 8px 0 12px; font-size: clamp(24px, 2.8vw, 42px); }
html[data-tema^="21"] .ox-dov4__telo p { margin: 0; color: var(--sk-text-tlmeny); font-size: 16px; line-height: 1.55; }
html[data-tema^="21"] .ox-dov4__bar { margin-top: 20px; height: 6px; background: #EFE7DC; border-radius: 6px; overflow: hidden; }
html[data-tema^="21"] .ox-dov4__bar i { display: block; height: 100%; width: 0; background: var(--sk-akcent); }
html[data-tema^="21"] .ox-dov4__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(27, 27, 27, .55); }

/* D5 · DÔKAZY */
html[data-tema^="21"] .ox-dov5__metriky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(27, 27, 27, .12); border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
html[data-tema^="21"] .ox-dov5__metriky div { padding: 20px 24px; border-right: 1px solid rgba(27, 27, 27, .12); }
html[data-tema^="21"] .ox-dov5__metriky div:last-child { border-right: 0; }
html[data-tema^="21"] .ox-dov5__metriky b { display: block; font: 400 clamp(30px, 3.2vw, 44px)/1 var(--sk-font-nadpis); color: var(--sk-akcent); }
html[data-tema^="21"] .ox-dov5__metriky span { font-size: 13px; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-dov5__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html[data-tema^="21"] .ox-dov5__k { position: relative; background: var(--sk-krem, #FFF7E6); border-radius: 20px; overflow: hidden; }
html[data-tema^="21"] .ox-dov5__foto { width: 100%; height: 150px; object-fit: cover; display: block; }
html[data-tema^="21"] .ox-dov5__c { position: absolute; top: 12px; left: 12px; background: #fff; border-radius: 999px; padding: 6px 10px; font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; }
html[data-tema^="21"] .ox-dov5__telo { padding: 18px 20px 22px; }
html[data-tema^="21"] .ox-dov5__telo .ox-h3 { margin: 0 0 8px; font-size: clamp(19px, 2vw, 26px); }
html[data-tema^="21"] .ox-dov5__telo p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-dov5__k--hl { background: var(--sk-akcent); color: #fff; }
html[data-tema^="21"] .ox-dov5__k--hl .ox-h3 { color: #fff; }
html[data-tema^="21"] .ox-dov5__k--hl p { color: rgba(255, 255, 255, .85); }
html[data-tema^="21"] .ox-dov5__k--hl .ox-dov5__c { background: var(--sk-text); color: #fff; }

@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-dov1__r { grid-template-columns: 56px minmax(0, 1fr) 36px; }
	html[data-tema^="21"] .ox-dov1__r p { grid-column: 2 / -1; margin-top: 6px; }
	html[data-tema^="21"] .ox-dov2 { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-dov2__it--akt .ox-dov2__telo { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-dov2__foto { width: 100%; height: 160px; }
	html[data-tema^="21"] .ox-dov3__e { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-dov3__foto { width: 100%; height: 150px; }
	html[data-tema^="21"] .ox-dov4 { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-dov4__rail { flex-direction: row; flex-wrap: wrap; gap: 10px; }
	html[data-tema^="21"] .ox-dov4__tick--akt { font-size: 20px; }
	html[data-tema^="21"] .ox-dov5__metriky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-dov5__metriky div:nth-child(2n) { border-right: 0; }
	html[data-tema^="21"] .ox-dov5__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-dov3 { padding-left: 42px; }
	html[data-tema^="21"] .ox-dov3__e::before { left: -34px; }
	html[data-tema^="21"] .ox-dov3__karta { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-dov5__grid { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-dov1__pas { flex-direction: column; gap: 8px; }
}

/* --- 96c) Manifest + porovnanie (Peter 18. 9. 2026) ---------------------------
   „tento widget vlož pod manifest návrh“ — porovnanie klasického baru s OXO
   ide aj do červeného manifestu, preto potrebuje odstup a biely rám okolo. */
html[data-tema^="21"] .ox-s01--a4b .ox-s01__porovnanie { margin-top: clamp(20px, 2.6vw, 34px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

/* --- 99) ÚVODNÁ SCÉNA - päť návrhov (Peter 18. 9. 2026) -----------------------
   Mockupy z relácie „OXO Web Fable“ (navrhy-hero.html). Video, poster aj bežiaci
   pás ostávajú; písací stroj a „Posuň“ sa skryjú tam, kde ich návrh nahrádza. */
html[data-tema^="21"] .ox-heroN { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
html[data-tema^="21"] .ox-heroN a, html[data-tema^="21"] .ox-heroN button { pointer-events: auto; }
html[data-tema^="21"] .ox-heroN__oko { font: 700 11.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
html[data-tema^="21"] .ox-heroN__oko::before { content: ''; width: 34px; height: 2px; background: currentColor; }
html[data-tema^="21"] .ox-heroN__nadpis { font: 400 clamp(34px, 5.4vw, 76px)/.94 var(--sk-font-nadpis); text-transform: uppercase; margin: 16px 0 14px; }
html[data-tema^="21"] .ox-heroN__nadpis i { font-style: normal; color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN__lead { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; max-width: 34em; margin: 0 0 24px; }
html[data-tema^="21"] .ox-heroN__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
/* v návrhoch úvodu píše obsah blok, nie písací stroj */
html[data-tema^="21"] :is(.ox-uvod--h1, .ox-uvod--h2, .ox-uvod--h4, .ox-uvod--h5) .ox-uvod__nadpis { display: none; }
html[data-tema^="21"] :is(.ox-uvod--h1, .ox-uvod--h4, .ox-uvod--h5) .ox-uvod__hint { display: none; }

/* H1 · EDITORIAL SPLIT */
html[data-tema^="21"] #ox-uvod.ox-uvod--h1,
html[data-tema^="21"] .ox-uvod--h1 .ox-uvod__scena { background: var(--sk-krem, #FFF7E6); }
html[data-tema^="21"] .ox-uvod--h1 .ox-uvod__pozadie, html[data-tema^="21"] .ox-uvod--h1 .ox-uvod__zrno { display: none; }
/* ⚠️ `<video>` je nahradzovaný prvok: pri `width:auto` si berie VLASTNÚ veľkosť a
   `right`/`bottom` ignoruje (CSS 2.1 §10.3.8) - preto rozmery počítame explicitne. */
html[data-tema^="21"] .ox-uvod--h1 .ox-uvod__video {
	position: absolute; left: 52%; top: clamp(18px, 4vh, 46px); right: auto; bottom: auto;
	width: calc(48% - clamp(16px, 5vw, 76px)); height: calc(100% - clamp(36px, 9vh, 102px));
	border-radius: 30px; object-fit: cover; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .6); transform: none;
}
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__text { position: absolute; left: clamp(16px, 5vw, 76px); top: 50%; transform: translateY(-50%); width: min(46%, 560px); color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__oko { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__lead { color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-heroN__trust { display: flex; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; font-size: 13px; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-heroN__trust b { display: block; font: 400 clamp(22px, 2.2vw, 30px)/1 var(--sk-font-nadpis); color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN__chip { position: absolute; background: #fff; border-radius: 16px; padding: 11px 15px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); font-size: 12.5px; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-heroN__chip b { display: block; font: 400 24px/1 var(--sk-font-nadpis); color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN__chip--1 { left: 48%; top: 16%; }
html[data-tema^="21"] .ox-heroN__chip--2 { right: clamp(4px, 2vw, 34px); top: 42%; }
html[data-tema^="21"] .ox-heroN__chip--3 { left: 56%; bottom: 14%; }

/* H2 · KINETIC TYPE */
html[data-tema^="21"] .ox-uvod--h2 .ox-uvod__video { filter: brightness(.55) saturate(1.15); }
html[data-tema^="21"] .ox-heroN--h2 { color: #fff; }
html[data-tema^="21"] .ox-heroN__slova { position: absolute; left: clamp(16px, 5vw, 76px); top: clamp(40px, 10vh, 96px); display: grid; gap: 0; min-width: 0; max-width: 60%; }
html[data-tema^="21"] .ox-heroN__s { font: 400 clamp(42px, 9vw, 130px)/.96 var(--sk-font-nadpis); text-transform: uppercase; color: rgba(255, 255, 255, .16); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55); transition: color .35s var(--sk-prechod); }
html[data-tema^="21"] .ox-heroN__s em { font-style: normal; }
html[data-tema^="21"] .ox-heroN__s--akt { color: #fff; -webkit-text-stroke: 0; }
html[data-tema^="21"] .ox-heroN__s--akt em { background: var(--sk-akcent); padding: 0 .12em; border-radius: 10px; }
html[data-tema^="21"] .ox-heroN__pocitadlo { position: absolute; right: clamp(16px, 5vw, 76px); top: clamp(40px, 10vh, 96px); text-align: right; }
html[data-tema^="21"] .ox-heroN__pocitadlo b { display: block; font: 400 clamp(52px, 8vw, 118px)/1 var(--sk-font-nadpis); }
html[data-tema^="21"] .ox-heroN__pocitadlo b span { font-size: .5em; }
html[data-tema^="21"] .ox-heroN__pocitadlo small { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; opacity: .75; text-transform: uppercase; }
html[data-tema^="21"] .ox-heroN__vedla { position: absolute; right: clamp(16px, 5vw, 76px); bottom: clamp(70px, 14vh, 130px); width: min(380px, 42vw); }
html[data-tema^="21"] .ox-heroN__vedla p { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88); margin: 0 0 18px; }
html[data-tema^="21"] .ox-heroN--h2 .ox-btn--hlavne { background: #fff; color: var(--sk-akcent); border-color: #fff; }

/* H4 · KARUSEL PRÍCHUTÍ */
html[data-tema^="21"] .ox-uvod--h4 { background: #1a0503; }
html[data-tema^="21"] .ox-uvod--h4 .ox-uvod__video, html[data-tema^="21"] .ox-uvod--h4 .ox-uvod__pozadie { display: none; }
html[data-tema^="21"] .ox-heroN--h4 { display: flex; flex-direction: column; padding: clamp(18px, 4vh, 44px) clamp(16px, 5vw, 76px) clamp(16px, 4vh, 40px); gap: clamp(14px, 2.4vh, 26px); pointer-events: auto; }
html[data-tema^="21"] .ox-heroN__hore { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: #fff; }
html[data-tema^="21"] .ox-heroN--h4 .ox-heroN__nadpis { margin: 0; color: #fff; font-size: clamp(28px, 4.4vw, 68px); }
html[data-tema^="21"] .ox-heroN--h4 .ox-heroN__nadpis i { color: #FF8A7E; }
html[data-tema^="21"] .ox-heroN__prep { display: flex; gap: 6px; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 5px; }
html[data-tema^="21"] .ox-heroN__pbtn { padding: 9px 16px; border-radius: 999px; border: 0; background: none; color: rgba(255, 255, 255, .75); font: 600 14px/1 var(--sk-font-text); cursor: pointer; }
html[data-tema^="21"] .ox-heroN__pbtn--akt { background: #fff; color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN__panely { display: flex; gap: 12px; flex: 1; min-height: 0; }
html[data-tema^="21"] .ox-heroN__p { flex: 1; min-width: 0; border-radius: 24px; position: relative; overflow: hidden; background-size: cover; transition: flex .4s var(--sk-prechod); cursor: pointer; }
html[data-tema^="21"] .ox-heroN__p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .75)); }
html[data-tema^="21"] .ox-heroN__p--akt { flex: 2.4; }
html[data-tema^="21"] .ox-heroN__pn { position: absolute; right: 18px; top: 18px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); display: grid; place-items: center; color: #fff; font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; z-index: 2; }
html[data-tema^="21"] .ox-heroN__plbl { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #fff; z-index: 2; }
html[data-tema^="21"] .ox-heroN__plbl small { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .82; }
html[data-tema^="21"] .ox-heroN__plbl h3 { margin: 6px 0 0; font: 400 clamp(20px, 2.4vw, 38px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: #fff; }
html[data-tema^="21"] .ox-heroN__plbl p, html[data-tema^="21"] .ox-heroN__plbl .ox-btn { display: none; }
html[data-tema^="21"] .ox-heroN__p--akt .ox-heroN__plbl h3 { font-size: clamp(26px, 3.4vw, 58px); }
html[data-tema^="21"] .ox-heroN__p--akt .ox-heroN__plbl p { display: block; margin: 10px 0 14px; max-width: 46em; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
html[data-tema^="21"] .ox-heroN__p--akt .ox-heroN__plbl .ox-btn { display: inline-flex; background: #fff; color: var(--sk-akcent); border-color: #fff; }
html[data-tema^="21"][data-ox-uvod="h4"] .ox-msr-pas--poduvodom { background: var(--sk-akcent); color: #fff; }
html[data-tema^="21"][data-ox-uvod="h4"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span { color: #fff; }
html[data-tema^="21"][data-ox-uvod="h4"] .ox-msr-pas--poduvodom .ox-msr-pas__stopa span::after { background: #fff; }

/* H5 · PRÍBEH V KROKOCH */
html[data-tema^="21"] .ox-uvod--h5 .ox-uvod__video { filter: brightness(.7); }
html[data-tema^="21"] .ox-heroN--h5 { color: #fff; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__nadpis { position: absolute; left: clamp(16px, 5vw, 76px); top: clamp(40px, 12vh, 130px); font-size: clamp(38px, 7.6vw, 112px); color: #fff; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__nadpis i { display: block; color: #FFD9D6; }
html[data-tema^="21"] .ox-heroN__pin { position: absolute; right: clamp(16px, 5vw, 76px); top: clamp(40px, 12vh, 130px); text-align: right; }
html[data-tema^="21"] .ox-heroN__pin b { display: block; font: 400 clamp(17px, 1.8vw, 22px)/1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-heroN__pin small { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; opacity: .75; text-transform: uppercase; }
html[data-tema^="21"] .ox-heroN__kroky { position: absolute; left: clamp(16px, 5vw, 76px); right: clamp(16px, 5vw, 76px); bottom: clamp(56px, 11vh, 96px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k { background: rgba(20, 3, 2, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); border-radius: 18px; padding: 14px 16px; position: relative; overflow: hidden; transition: background .3s var(--sk-prechod), color .3s var(--sk-prechod); }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k small { font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; opacity: .78; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k h4 { margin: 8px 0 4px; font: 400 clamp(17px, 1.8vw, 26px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: inherit; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k p { margin: 0; font-size: 12.5px; line-height: 1.4; opacity: .85; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fff; transition: width .4s var(--sk-prechod); }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k--hotovo::after { width: 100%; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k--akt { background: #fff; color: var(--sk-text); box-shadow: none; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k--akt small { color: var(--sk-akcent); opacity: 1; }
html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k--akt::after { width: 55%; background: var(--sk-akcent); }

@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-uvod--h1 .ox-uvod__video {
		left: clamp(12px, 4vw, 40px); right: auto; top: auto; bottom: clamp(12px, 4vh, 30px);
		width: calc(100% - 2 * clamp(12px, 4vw, 40px)); height: 38%;
	}
	html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__text { position: absolute; left: clamp(12px, 4vw, 40px); right: clamp(12px, 4vw, 40px); top: clamp(16px, 4vh, 40px); transform: none; width: auto; }
	html[data-tema^="21"] .ox-heroN__chipy { display: none; }
	html[data-tema^="21"] .ox-heroN__slova { max-width: 90%; }
	html[data-tema^="21"] .ox-heroN__pocitadlo { display: none; }
	html[data-tema^="21"] .ox-heroN__vedla { left: clamp(12px, 4vw, 40px); right: clamp(12px, 4vw, 40px); width: auto; bottom: clamp(60px, 12vh, 110px); }
	html[data-tema^="21"] .ox-heroN__panely { flex-direction: column; }
	html[data-tema^="21"] .ox-heroN__p--akt { flex: 3; }
	html[data-tema^="21"] .ox-heroN__kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k p { display: none; }
	html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__nadpis { font-size: clamp(30px, 8vw, 54px); }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__trust { gap: 10px; font-size: 12px; }
	html[data-tema^="21"] .ox-heroN__kroky { grid-template-columns: minmax(0, 1fr); max-height: 42%; overflow: hidden; }
}

/* --- 99b) Editorial split: doladenie po screenshote (Peter 18. 9. 2026) -------
   Nadpis sa lámal ako „…ZA 30 / SEKÚND. BEZ / STROJOV.“ - druhá veta ide na
   vlastný riadok; chipy sa presunuli tak, aby držali na karte videa. */
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__nadpis { font-size: clamp(30px, 4.4vw, 62px); letter-spacing: .004em; }
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__nadpis i { display: block; }
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__lead { margin-bottom: 26px; max-width: 30em; }
html[data-tema^="21"] .ox-heroN__chip--1 { left: 49%; top: 12%; }
html[data-tema^="21"] .ox-heroN__chip--2 { right: clamp(6px, 2.4vw, 30px); top: 44%; }
html[data-tema^="21"] .ox-heroN__chip--3 { left: 54%; bottom: 12%; }
html[data-tema^="21"] .ox-heroN--h1 .ox-btn--obrys { border-color: rgba(27, 27, 27, .3); color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN--h1 .ox-btn--obrys:hover { background: var(--sk-text); border-color: var(--sk-text); color: #fff; }
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__nadpis { text-wrap: balance; max-width: 13ch; }
html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__nadpis i { max-width: none; }
html[data-tema^="21"] .ox-uvod--h1 .ox-uvod__video { object-position: 50% 45%; }

/* --- 99c) mobil: doladenie návrhov úvodu (Peter 18. 9. 2026) ------------------
   Na 390 px sa prekrývali: v Editorial split riadok dôvery s kartou videa,
   v Karuseli sa tretí panel orezal a v Príbehu piaty krok nevošiel. */
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-heroN__trust { display: none; }
	html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__lead { font-size: 14.5px; margin-bottom: 18px; }
	html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__cta { margin-bottom: 0; }
	html[data-tema^="21"] .ox-heroN--h1 .ox-heroN__nadpis { font-size: clamp(26px, 7.4vw, 38px); margin: 12px 0 10px; }
	html[data-tema^="21"] .ox-heroN__p:not(.ox-heroN__p--akt) { flex: 0 0 20%; }
	html[data-tema^="21"] .ox-heroN__p--akt { flex: 1 1 auto; }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__kroky { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; }
	html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k:not(.ox-heroN__k--akt) { display: none; }
	html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__k p { display: block; }
	html[data-tema^="21"] .ox-heroN--h5 .ox-heroN__nadpis { top: clamp(30px, 9vh, 80px); }
}

/* --- 100) ÚVOD H6–H10 (Peter 18. 9. 2026) ------------------------------------
   Druhá päťka mockupov z relácie „OXO Web Fable“ (navrhy-hero-2.html):
   H6 Memphis, H7 Chróm Y2K, H8 Spec sheet, H9 Hodváb, H10 Sieť prevádzok.
   ⚠️ Rozmery pohára (Ø 95 / 180 mm) ani mestá v sieti sa nepoužili - neoverené. */
html[data-tema^="21"] :is(.ox-uvod--h6, .ox-uvod--h7, .ox-uvod--h8, .ox-uvod--h10) .ox-uvod__nadpis,
html[data-tema^="21"] :is(.ox-uvod--h6, .ox-uvod--h7, .ox-uvod--h8, .ox-uvod--h9, .ox-uvod--h10) .ox-uvod__hint { display: none; }

/* H6 · MEMPHIS */
html[data-tema^="21"] #ox-uvod.ox-uvod--h6, html[data-tema^="21"] .ox-uvod--h6 .ox-uvod__scena { background: #F5EFE2; }
html[data-tema^="21"] .ox-uvod--h6 .ox-uvod__pozadie, html[data-tema^="21"] .ox-uvod--h6 .ox-uvod__zrno { display: none; }
html[data-tema^="21"] .ox-uvod--h6 .ox-uvod__video {
	position: absolute; left: 54%; top: clamp(24px, 6vh, 64px); right: auto; bottom: auto;
	width: calc(46% - clamp(26px, 6vw, 96px)); height: calc(100% - clamp(48px, 13vh, 150px));
	object-fit: cover; border: 4px solid var(--sk-text); border-radius: 26px;
	box-shadow: 16px 16px 0 #FFC531, 16px 16px 0 4px var(--sk-text); transform: rotate(3deg);
}
html[data-tema^="21"] .ox-heroN--h6 .ox-heroN__text { position: absolute; left: clamp(16px, 5vw, 76px); top: 50%; transform: translateY(-50%); width: min(46%, 560px); color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN--h6 .ox-heroN__oko { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN--h6 .ox-heroN__nadpis { color: var(--sk-text); font-size: clamp(32px, 5.4vw, 82px); }
html[data-tema^="21"] .ox-heroN--h6 .ox-heroN__nadpis i { display: inline-block; color: #fff; background: var(--sk-akcent); padding: 0 .14em; box-shadow: 8px 8px 0 var(--sk-text); transform: rotate(-2deg); line-height: 1; }
html[data-tema^="21"] .ox-heroN--h6 .ox-heroN__lead { color: var(--sk-text); font-weight: 500; }
html[data-tema^="21"] .ox-heroN--h6 .ox-btn--hlavne { border: 3px solid var(--sk-text); box-shadow: 6px 6px 0 var(--sk-text); border-radius: 999px; }
html[data-tema^="21"] .ox-heroN__tvar { position: absolute; z-index: 1; animation: ox-heroN-drift 9s ease-in-out infinite; }
html[data-tema^="21"] .ox-heroN__tvar--1 { animation-duration: 11s; animation-delay: -3s; }
html[data-tema^="21"] .ox-heroN__tvar--2 { animation-duration: 13s; animation-delay: -6s; }
@keyframes ox-heroN-drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { html[data-tema^="21"] .ox-heroN__tvar { animation: none; } }
html[data-tema^="21"] .ox-heroN__nalep { position: absolute; z-index: 5; background: #fff; border: 3px solid var(--sk-text); box-shadow: 5px 5px 0 var(--sk-text); padding: 9px 13px; font: 400 clamp(14px, 1.5vw, 19px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN__nalep--1 { left: 48%; top: 18%; transform: rotate(-8deg); }
html[data-tema^="21"] .ox-heroN__nalep--2 { right: 4%; bottom: 20%; transform: rotate(5deg); background: #FFC531; }

/* H7 · CHRÓM Y2K */
html[data-tema^="21"] #ox-uvod.ox-uvod--h7, html[data-tema^="21"] .ox-uvod--h7 .ox-uvod__scena { background: #0A0507; }
html[data-tema^="21"] .ox-uvod--h7 .ox-uvod__pozadie { display: none; }
html[data-tema^="21"] .ox-uvod--h7 .ox-uvod__video {
	position: absolute; left: 53%; top: clamp(24px, 6vh, 64px); right: auto; bottom: auto;
	width: calc(47% - clamp(26px, 6vw, 96px)); height: calc(100% - clamp(48px, 13vh, 150px));
	object-fit: cover; border-radius: 26px;
	box-shadow: 0 0 0 10px #B9B9C2, 0 0 0 12px #6F6F7A, 0 60px 120px -40px rgba(0, 0, 0, .9); filter: none;
}
html[data-tema^="21"] .ox-heroN--h7 { color: #fff; }
html[data-tema^="21"] .ox-heroN__zara { position: absolute; inset: 0; z-index: 0; filter: blur(30px); background:
	radial-gradient(40% 50% at 20% 60%, rgba(225, 0, 26, .55), transparent 70%),
	radial-gradient(35% 45% at 75% 30%, rgba(255, 64, 160, .35), transparent 70%),
	radial-gradient(30% 40% at 60% 90%, rgba(255, 140, 0, .3), transparent 70%); }
html[data-tema^="21"] .ox-heroN__zrno { position: absolute; inset: 0; z-index: 1; opacity: .45; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>"); }
html[data-tema^="21"] .ox-heroN--h7 .ox-heroN__text { position: absolute; z-index: 2; left: clamp(16px, 5vw, 76px); top: 50%; transform: translateY(-50%); width: min(45%, 540px); }
html[data-tema^="21"] .ox-heroN--h7 .ox-heroN__oko { color: rgba(255, 255, 255, .62); }
html[data-tema^="21"] .ox-heroN--h7 .ox-heroN__nadpis {
	background: linear-gradient(180deg, #fff 0%, #D9D9DE 30%, #7A7A86 50%, #F3F3F6 62%, #8F8F9C 80%, #fff 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 6px 24px rgba(255, 255, 255, .15)); font-size: clamp(32px, 5.2vw, 78px);
}
html[data-tema^="21"] .ox-heroN--h7 .ox-heroN__nadpis i { background: linear-gradient(180deg, #FF5C6E, #D60019 50%, #FF8A96); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema^="21"] .ox-heroN--h7 .ox-heroN__lead { color: rgba(255, 255, 255, .75); }
html[data-tema^="21"] .ox-heroN--h7 .ox-btn--hlavne { background: linear-gradient(180deg, #FF3B4F, var(--sk-akcent)); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 20px 40px -14px rgba(225, 0, 26, .9); }
html[data-tema^="21"] .ox-heroN--h7 .ox-btn--obrys { border-color: rgba(255, 255, 255, .28); color: #fff; background: rgba(255, 255, 255, .06); }
html[data-tema^="21"] .ox-heroN__pilulka { position: absolute; z-index: 3; left: 55%; bottom: clamp(70px, 14vh, 120px); background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); border-radius: 999px; padding: 9px 15px; color: #fff; font: 700 11.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; }

/* H8 · SPEC SHEET */
html[data-tema^="21"] #ox-uvod.ox-uvod--h8, html[data-tema^="21"] .ox-uvod--h8 .ox-uvod__scena {
	background-color: #EEF1F5;
	background-image: repeating-linear-gradient(0deg, rgba(16, 27, 40, .09) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(90deg, rgba(16, 27, 40, .09) 0 1px, transparent 1px 24px);
}
html[data-tema^="21"] .ox-uvod--h8 .ox-uvod__pozadie, html[data-tema^="21"] .ox-uvod--h8 .ox-uvod__zrno { display: none; }
html[data-tema^="21"] .ox-heroN--h8 { color: #101B28; }
html[data-tema^="21"] .ox-heroN--h8 .ox-heroN__text { position: absolute; left: clamp(16px, 5vw, 76px); top: clamp(28px, 6vh, 56px); width: min(44%, 520px); }
html[data-tema^="21"] .ox-heroN__doc { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #5A6675; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #D3DAE2; padding-bottom: 10px; margin-bottom: 18px; }
html[data-tema^="21"] .ox-heroN--h8 .ox-heroN__nadpis { color: #101B28; font-size: clamp(28px, 4.4vw, 62px); margin: 0 0 16px; }
html[data-tema^="21"] .ox-heroN--h8 .ox-heroN__nadpis i { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN__tab { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 13px; background: #fff; }
html[data-tema^="21"] .ox-heroN__tab td { border: 1px solid #D3DAE2; padding: 8px 10px; }
html[data-tema^="21"] .ox-heroN__tab td:first-child { font: 700 10.5px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #5A6675; width: 38%; }
html[data-tema^="21"] .ox-heroN__tab b { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN--h8 .ox-btn--hlavne { border-radius: 6px; }
html[data-tema^="21"] .ox-heroN--h8 .ox-btn--obrys { border-radius: 6px; border-color: #101B28; color: #101B28; }
html[data-tema^="21"] .ox-heroN__ram { position: absolute; left: calc(52% - 26px); right: clamp(16px, 5vw, 76px); top: clamp(14px, 3vh, 48px); bottom: clamp(56px, 11vh, 96px); border: 1px solid #D3DAE2; background: #fff; z-index: -1; }
html[data-tema^="21"] .ox-heroN__roh { position: absolute; width: 14px; height: 14px; border: 2px solid var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN__roh--lh { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
html[data-tema^="21"] .ox-heroN__roh--ph { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
html[data-tema^="21"] .ox-heroN__roh--ld { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
html[data-tema^="21"] .ox-heroN__roh--pd { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
html[data-tema^="21"] .ox-heroN__kota { position: absolute; left: 50%; transform: translateX(-50%); top: 6px; background: #fff; border: 1px solid #101B28; padding: 3px 6px; font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; color: #101B28; }
html[data-tema^="21"] .ox-heroN__pop { position: absolute; z-index: 4; background: #fff; border: 1px solid #101B28; padding: 7px 9px; font-size: 12px; line-height: 1.35; max-width: 190px; color: #101B28; }
html[data-tema^="21"] .ox-heroN__pop b { display: block; font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; color: var(--sk-akcent); text-transform: uppercase; margin-bottom: 3px; }
html[data-tema^="21"] .ox-heroN__pop--1 { left: 55%; top: 16%; }
html[data-tema^="21"] .ox-heroN__pop--2 { right: clamp(20px, 6vw, 96px); top: 34%; }
html[data-tema^="21"] .ox-heroN__pop--3 { left: 55%; bottom: 26%; }
html[data-tema^="21"] .ox-heroN__pop--4 { right: clamp(20px, 6vw, 96px); bottom: 14%; }

/* H9 · HODVÁB */
html[data-tema^="21"] #ox-uvod.ox-uvod--h9, html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__scena { background: #2A0006; }
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__pozadie { display: none; }
html[data-tema^="21"] .ox-heroN__silk { position: absolute; inset: 0; filter: saturate(1.1); background:
	radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .55), transparent 60%),
	radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .5), transparent 60%),
	linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 45%, #3A0008 70%, var(--sk-akcent) 100%); }
html[data-tema^="21"] .ox-heroN__stuha { position: absolute; left: -10%; right: -10%; height: clamp(110px, 22vh, 220px); border-radius: 50%; filter: blur(14px); opacity: .55; background: linear-gradient(90deg, transparent, rgba(255, 200, 205, .6), transparent); }
html[data-tema^="21"] .ox-heroN__stuha--1 { top: 22%; transform: rotate(-8deg); }
html[data-tema^="21"] .ox-heroN__stuha--2 { top: 58%; transform: rotate(6deg); }
html[data-tema^="21"] .ox-heroN__stred { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 clamp(16px, 5vw, 76px); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
html[data-tema^="21"] .ox-heroN__stred .ox-heroN__oko { color: rgba(255, 255, 255, .78); }
html[data-tema^="21"] .ox-heroN__stred .ox-heroN__oko::before { display: none; }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__nadpis { font-size: clamp(40px, 9vw, 140px); line-height: .9; color: #fff; text-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__nadpis i { display: block; color: #FFD9D6; }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__lead { color: rgba(255, 255, 255, .88); max-width: 40em; margin-inline: auto; }
html[data-tema^="21"] .ox-heroN--h9 .ox-btn--hlavne { background: #fff; color: var(--sk-akcent); border-color: #fff; }
html[data-tema^="21"] .ox-heroN__karta { position: absolute; z-index: 4; right: clamp(16px, 5vw, 76px); bottom: clamp(70px, 13vh, 110px); width: clamp(200px, 22vw, 300px); height: clamp(130px, 14vw, 190px); display: block; }

/* H10 · SIEŤ PREVÁDZOK */
html[data-tema^="21"] #ox-uvod.ox-uvod--h10, html[data-tema^="21"] .ox-uvod--h10 .ox-uvod__scena { background: #F7F5F2; }
html[data-tema^="21"] .ox-uvod--h10 .ox-uvod__pozadie, html[data-tema^="21"] .ox-uvod--h10 .ox-uvod__zrno { display: none; }
html[data-tema^="21"] .ox-heroN--h10 { color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN__siet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
html[data-tema^="21"] .ox-heroN__puls { animation: ox-heroN-puls 2.6s ease-out infinite; transform-origin: 1060px 340px; }
@keyframes ox-heroN-puls { 0% { r: 8; stroke-opacity: .5; } 100% { r: 28; stroke-opacity: 0; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { html[data-tema^="21"] .ox-heroN__puls { animation: none; } }
html[data-tema^="21"] .ox-heroN--h10 .ox-heroN__text { position: absolute; z-index: 2; left: clamp(16px, 5vw, 76px); top: 50%; transform: translateY(-50%); width: min(46%, 560px); }
html[data-tema^="21"] .ox-heroN--h10 .ox-heroN__oko { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN__oko--bod::before { width: 10px; height: 10px; border-radius: 50%; background: var(--sk-akcent); box-shadow: 0 0 0 6px rgba(225, 0, 26, .15); }
html[data-tema^="21"] .ox-heroN--h10 .ox-heroN__nadpis { color: var(--sk-text); font-size: clamp(30px, 4.8vw, 70px); }
html[data-tema^="21"] .ox-heroN--h10 .ox-heroN__lead { color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-heroN--h10 .ox-btn--obrys { border-color: rgba(27, 27, 27, .25); color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN__uzol { position: absolute; z-index: 3; background: #fff; box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .12), 0 14px 30px -18px rgba(0, 0, 0, .4); border-radius: 999px; padding: 8px 13px 8px 9px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--sk-text); white-space: nowrap; }
html[data-tema^="21"] .ox-heroN__uzol i { width: 9px; height: 9px; border-radius: 50%; background: var(--sk-text); }
html[data-tema^="21"] .ox-heroN__uzol--hl { box-shadow: inset 0 0 0 1px var(--sk-akcent), 0 14px 30px -18px rgba(0, 0, 0, .4); }
html[data-tema^="21"] .ox-heroN__uzol--hl i { background: var(--sk-akcent); box-shadow: 0 0 0 5px rgba(225, 0, 26, .18); }

@media (max-width: 1000px) {
	html[data-tema^="21"] :is(.ox-uvod--h6, .ox-uvod--h7) .ox-uvod__video {
		left: clamp(12px, 4vw, 40px); right: auto; top: auto; bottom: clamp(12px, 4vh, 30px);
		width: calc(100% - 2 * clamp(12px, 4vw, 40px)); height: 36%; transform: none;
	}
	html[data-tema^="21"] :is(.ox-heroN--h6, .ox-heroN--h7, .ox-heroN--h8, .ox-heroN--h10) .ox-heroN__text {
		position: absolute; left: clamp(12px, 4vw, 40px); right: clamp(12px, 4vw, 40px); top: clamp(14px, 4vh, 40px); transform: none; width: auto;
	}
	html[data-tema^="21"] .ox-heroN__nalep, html[data-tema^="21"] .ox-heroN__pop,
	html[data-tema^="21"] .ox-heroN__kota, html[data-tema^="21"] .ox-heroN__pilulka,
	html[data-tema^="21"] .ox-heroN__uzol { display: none; }
	html[data-tema^="21"] .ox-heroN__ram { display: none; }
	html[data-tema^="21"] .ox-heroN__tab { font-size: 12px; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__nadpis { font-size: clamp(34px, 11vw, 64px); }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__tvar { display: none; }
	/* na mobile necháme riadky, ktoré najviac predávajú: objem, sirup, príprava, marža */
	html[data-tema^="21"] .ox-heroN__tab tr:nth-child(3), html[data-tema^="21"] .ox-heroN__tab tr:nth-child(4) { display: none; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__lead { display: none; }
	html[data-tema^="21"] .ox-heroN__karta { width: 160px; height: 104px; }
}

/* držiak videa: návrhy H8/H9/H10 si video presunú dovnútra (JS), aby ho
   neprekryla vrstva návrhu — rozmer potom drží držiak, nie video */
html[data-tema^="21"] .ox-heroN__vid { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; }
html[data-tema^="21"] .ox-heroN__vid .ox-uvod__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	border-radius: inherit; transform: none; filter: none; box-shadow: none; border: 0;
}
html[data-tema^="21"] .ox-heroN__ram { overflow: hidden; }
html[data-tema^="21"] .ox-heroN__ram .ox-heroN__vid { inset: 26px; border: 1px solid #101B28; }
html[data-tema^="21"] .ox-heroN__karta { border-radius: 20px; transform: rotate(-4deg); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .3); overflow: hidden; }
html[data-tema^="21"] .ox-heroN__uzolvid { position: absolute; z-index: 3; left: 74%; top: 64%; width: clamp(150px, 16vw, 220px); height: clamp(96px, 10vw, 140px); border-radius: 16px; border: 3px solid #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); overflow: hidden; }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN__uzolvid { left: auto; right: clamp(12px, 4vw, 40px); top: auto; bottom: clamp(60px, 12vh, 100px); }
	html[data-tema^="21"] .ox-heroN__ram { display: block; left: clamp(12px, 4vw, 40px); right: clamp(12px, 4vw, 40px); top: auto; bottom: clamp(50px, 10vh, 90px); height: 34%; }
	html[data-tema^="21"] .ox-heroN__ram .ox-heroN__vid { inset: 10px; }
}
/* H6: konfety nesmú ležať na nadnadpise */
html[data-tema^="21"] .ox-heroN--h6 .ox-heroN__text { z-index: 3; }

/* --- 101) ÚVOD H11–H15: rodina „video + kroky prípravy“ (Peter 18. 9. 2026) ---
   Mockupy z relácie „OXO Web Fable“ (navrhy-hero-3.html). Video ostáva
   full-bleed, aktívny krok riadi čas videa; klik na krok video previnie. */
html[data-tema^="21"] :is(.ox-uvod--h11, .ox-uvod--h12, .ox-uvod--h13, .ox-uvod--h14, .ox-uvod--h15) .ox-uvod__nadpis,
html[data-tema^="21"] :is(.ox-uvod--h11, .ox-uvod--h12, .ox-uvod--h13, .ox-uvod--h14, .ox-uvod--h15) .ox-uvod__hint { display: none; }
html[data-tema^="21"] :is(.ox-uvod--h11, .ox-uvod--h12, .ox-uvod--h15) .ox-uvod__video { filter: brightness(.7); }
html[data-tema^="21"] .ox-uvod--h14 .ox-uvod__video { filter: brightness(.5); }
html[data-tema^="21"] :is(.ox-heroN--h11, .ox-heroN--h12, .ox-heroN--h14, .ox-heroN--h15) { color: #fff; }

/* H11 · ZVISLÁ KOĽAJNICA */
html[data-tema^="21"] .ox-heroN--h11 .ox-heroN__nadpis { position: absolute; left: clamp(16px, 5vw, 76px); top: 50%; transform: translateY(-50%); font-size: clamp(38px, 7vw, 104px); color: #fff; margin: 0; }
html[data-tema^="21"] .ox-heroN--h11 .ox-heroN__nadpis i { display: block; color: #FFD9D6; }
html[data-tema^="21"] .ox-heroN__rail { position: absolute; right: clamp(16px, 5vw, 76px); top: 50%; transform: translateY(-50%); width: min(420px, 42vw); display: flex; flex-direction: column; }
html[data-tema^="21"] .ox-heroN__st { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 14px 0 14px 20px; border-left: 2px solid rgba(255, 255, 255, .25); position: relative; opacity: .55; cursor: pointer; transition: opacity .3s var(--sk-prechod); }
html[data-tema^="21"] .ox-heroN__st::before { content: ''; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: .5; transition: box-shadow .3s, opacity .3s; }
html[data-tema^="21"] .ox-heroN__st--akt { opacity: 1; border-left-color: #fff; }
html[data-tema^="21"] .ox-heroN__st--akt::before { opacity: 1; box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); }
html[data-tema^="21"] .ox-heroN__st b { font: 400 clamp(26px, 2.8vw, 38px)/1 var(--sk-font-nadpis); }
html[data-tema^="21"] .ox-heroN__st h4 { margin: 0; font: 400 clamp(18px, 1.9vw, 26px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: #fff; }
html[data-tema^="21"] .ox-heroN__st--akt h4 { font-size: clamp(21px, 2.3vw, 32px); }
html[data-tema^="21"] .ox-heroN__st p { margin: 6px 0 0; font-size: 13px; opacity: .85; }

/* H12 · ČASOVÁ OS */
html[data-tema^="21"] .ox-heroN--h12 .ox-heroN__nadpis { position: absolute; left: clamp(16px, 5vw, 76px); top: clamp(36px, 10vh, 120px); font-size: clamp(32px, 6.4vw, 92px); color: #fff; margin: 0; }
html[data-tema^="21"] .ox-heroN--h12 .ox-heroN__nadpis i { color: #FFD9D6; }
html[data-tema^="21"] .ox-heroN__teraz { position: absolute; left: clamp(16px, 5vw, 76px); bottom: clamp(120px, 24vh, 210px); max-width: min(540px, 52vw); }
html[data-tema^="21"] .ox-heroN__teraz small { display: block; margin-bottom: 8px; font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
html[data-tema^="21"] .ox-heroN__teraz h4 { margin: 0; font: 400 clamp(26px, 3.8vw, 54px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: #fff; }
html[data-tema^="21"] .ox-heroN__teraz p { margin: 8px 0 0; font-size: 15.5px; opacity: .9; }
html[data-tema^="21"] .ox-heroN__tc { position: absolute; right: clamp(16px, 5vw, 76px); bottom: clamp(120px, 24vh, 210px); text-align: right; }
html[data-tema^="21"] .ox-heroN__tc b { display: block; font: 400 clamp(38px, 5vw, 70px)/1 var(--sk-font-nadpis); }
html[data-tema^="21"] .ox-heroN__tc small { opacity: .75; font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; }
html[data-tema^="21"] .ox-heroN__scrub { position: absolute; left: clamp(16px, 5vw, 76px); right: clamp(16px, 5vw, 76px); bottom: clamp(64px, 12vh, 100px); height: 56px; border-bottom: 2px solid rgba(255, 255, 255, .35); }
html[data-tema^="21"] .ox-heroN__fill { position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--sk-akcent); transition: width .2s linear; }
html[data-tema^="21"] .ox-heroN__tik { position: absolute; bottom: 0; width: 3px; height: 40px; background: rgba(255, 255, 255, .5); cursor: pointer; }
html[data-tema^="21"] .ox-heroN__tik em { position: absolute; left: 8px; bottom: 2px; font: 400 clamp(13px, 1.4vw, 19px)/1 var(--sk-font-nadpis); text-transform: uppercase; white-space: nowrap; font-style: normal; opacity: .7; }
html[data-tema^="21"] .ox-heroN__tik--akt { background: #fff; height: 56px; }
html[data-tema^="21"] .ox-heroN__tik--akt em { opacity: 1; }

/* H13 · SPLIT STICKY */
html[data-tema^="21"] .ox-uvod--h13 .ox-uvod__video { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 50%; height: 100%; object-fit: cover; filter: none; }
html[data-tema^="21"] .ox-heroN__vlavo { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
html[data-tema^="21"] .ox-heroN__ovl { position: absolute; left: clamp(16px, 4vw, 60px); bottom: clamp(70px, 14vh, 120px); color: #fff; }
html[data-tema^="21"] .ox-heroN__ovl b { display: block; font: 400 clamp(52px, 8vw, 100px)/1 var(--sk-font-nadpis); }
html[data-tema^="21"] .ox-heroN__ovl span { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
html[data-tema^="21"] .ox-heroN__vpravo { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; background: var(--sk-krem, #FFF7E6); color: var(--sk-text); padding: clamp(20px, 4vh, 54px) clamp(20px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; overflow: auto; }
html[data-tema^="21"] .ox-heroN__vpravo .ox-heroN__oko { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN--h13 .ox-heroN__nadpis { color: var(--sk-text); font-size: clamp(24px, 3.4vw, 54px); margin: 10px 0 18px; }
html[data-tema^="21"] .ox-heroN__karty { display: grid; gap: 9px; margin-bottom: 18px; }
html[data-tema^="21"] .ox-heroN__karta2 { border-radius: 16px; padding: 13px 18px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; background: #fff; opacity: .5; transform: scale(.97); transition: opacity .3s var(--sk-prechod), transform .3s var(--sk-prechod), box-shadow .3s; cursor: pointer; }
html[data-tema^="21"] .ox-heroN__karta2--akt { opacity: 1; transform: none; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); border-left: 5px solid var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN__karta2 b { font: 400 clamp(22px, 2.4vw, 32px)/1 var(--sk-font-nadpis); color: var(--sk-akcent); }
html[data-tema^="21"] .ox-heroN__karta2 h4 { margin: 0; font: 400 clamp(16px, 1.7vw, 22px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: var(--sk-text); }
html[data-tema^="21"] .ox-heroN__karta2 p { margin: 4px 0 0; font-size: 12.5px; color: var(--sk-text-tlmeny); }

/* H14 · POČÍTADLO */
html[data-tema^="21"] .ox-heroN--h14 .ox-heroN__nadpis { position: absolute; left: clamp(16px, 5vw, 76px); top: clamp(30px, 8vh, 100px); font-size: clamp(22px, 3.2vw, 48px); opacity: .9; color: #fff; margin: 0; }
html[data-tema^="21"] .ox-heroN--h14 .ox-heroN__stred { position: absolute; inset: 0; transform: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 clamp(16px, 5vw, 76px); }
html[data-tema^="21"] .ox-heroN__prstenec { --podiel: 0%; width: clamp(150px, 20vw, 250px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; background: conic-gradient(#fff 0 var(--podiel), rgba(255, 255, 255, .2) var(--podiel) 100%); }
html[data-tema^="21"] .ox-heroN__prstenec i { width: 86%; height: 86%; border-radius: 50%; background: rgba(20, 3, 2, .75); display: grid; place-items: center; font: 400 clamp(56px, 8vw, 112px)/1 var(--sk-font-nadpis); font-style: normal; color: #fff; }
html[data-tema^="21"] .ox-heroN--h14 .ox-heroN__stred h4 { margin: 0; font: 400 clamp(28px, 5vw, 70px)/1 var(--sk-font-nadpis); text-transform: uppercase; color: #fff; }
html[data-tema^="21"] .ox-heroN--h14 .ox-heroN__stred p { margin: 12px 0 0; font-size: clamp(14px, 1.5vw, 18px); opacity: .9; max-width: 44em; }
html[data-tema^="21"] .ox-heroN__ciarky { display: flex; gap: 9px; margin-top: 22px; }
html[data-tema^="21"] .ox-heroN__ciarka { width: clamp(30px, 4vw, 54px); height: 4px; background: rgba(255, 255, 255, .3); cursor: pointer; }
html[data-tema^="21"] .ox-heroN__ciarka--akt { background: #fff; }

/* H15 · FILMOVÝ PÁS */
html[data-tema^="21"] .ox-heroN--h15 .ox-heroN__nadpis { position: absolute; left: clamp(16px, 5vw, 76px); top: clamp(30px, 9vh, 116px); font-size: clamp(34px, 6.8vw, 96px); color: #fff; margin: 0; }
html[data-tema^="21"] .ox-heroN--h15 .ox-heroN__nadpis i { display: block; color: #FFD9D6; }
html[data-tema^="21"] .ox-heroN__sub { position: absolute; left: clamp(16px, 5vw, 76px); bottom: clamp(230px, 40vh, 330px); max-width: min(560px, 60vw); font-size: 16px; opacity: .9; margin: 0; }
html[data-tema^="21"] .ox-heroN__pas2 { position: absolute; left: clamp(16px, 5vw, 76px); right: clamp(16px, 5vw, 76px); bottom: clamp(60px, 11vh, 90px); display: flex; gap: 10px; align-items: flex-end; }
html[data-tema^="21"] .ox-heroN__fr { flex: 1; min-width: 0; height: clamp(90px, 16vh, 150px); border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; opacity: .7; border: 2px solid rgba(255, 255, 255, .3); cursor: pointer; padding: 0; transition: flex .35s var(--sk-prechod), height .35s var(--sk-prechod), opacity .3s; }
html[data-tema^="21"] .ox-heroN__fr--akt { flex: 1.8; height: clamp(120px, 22vh, 210px); opacity: 1; border-color: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
html[data-tema^="21"] .ox-heroN__frn { position: absolute; left: 12px; bottom: 10px; font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; background: rgba(0, 0, 0, .55); padding: 5px 7px; border-radius: 5px; color: #fff; }
html[data-tema^="21"] .ox-heroN__fr--akt .ox-heroN__frn { font: 400 clamp(15px, 1.7vw, 23px)/1 var(--sk-font-nadpis); text-transform: uppercase; background: none; padding: 0; left: 14px; bottom: 12px; }
html[data-tema^="21"] .ox-heroN__frt { position: absolute; right: 10px; bottom: 10px; font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; background: rgba(0, 0, 0, .55); padding: 4px 6px; border-radius: 5px; color: #fff; }

@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN--h11 .ox-heroN__nadpis { top: clamp(20px, 5vh, 60px); transform: none; font-size: clamp(30px, 9vw, 52px); }
	html[data-tema^="21"] .ox-heroN__rail { left: clamp(12px, 4vw, 40px); right: clamp(12px, 4vw, 40px); width: auto; top: auto; bottom: clamp(56px, 10vh, 90px); transform: none; }
	html[data-tema^="21"] .ox-heroN__st:not(.ox-heroN__st--akt) { display: none; }
	html[data-tema^="21"] .ox-heroN__teraz { bottom: clamp(110px, 22vh, 190px); max-width: none; right: clamp(12px, 4vw, 40px); }
	html[data-tema^="21"] .ox-heroN__tc { display: none; }
	html[data-tema^="21"] .ox-heroN__tik em { display: none; }
	html[data-tema^="21"] .ox-uvod--h13 .ox-uvod__video { width: 100%; height: 42%; }
	html[data-tema^="21"] .ox-heroN__vlavo { width: 100%; height: 42%; bottom: auto; }
	html[data-tema^="21"] .ox-heroN__vpravo { left: 0; top: 42%; }
	html[data-tema^="21"] .ox-heroN__karta2 p { display: none; }
	html[data-tema^="21"] .ox-heroN__sub { display: none; }
	html[data-tema^="21"] .ox-heroN__fr:not(.ox-heroN__fr--akt) .ox-heroN__frn { display: none; }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__karty { max-height: 40vh; overflow: auto; }
	html[data-tema^="21"] .ox-heroN__prstenec { width: 130px; }
	html[data-tema^="21"] .ox-heroN__frt { display: none; }
}

/* --- 101b) mobil: doladenie H13 a H15 po screenshotoch (18. 9. 2026) ----------
   V Split sticky sa CTA orezávalo pod hranou, vo Filmovom páse boli políčka
   také úzke, že názov kroku padal na dva riadky. */
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN__vpravo { padding: 14px clamp(14px, 4vw, 28px); }
	html[data-tema^="21"] .ox-heroN--h13 .ox-heroN__nadpis { margin: 6px 0 10px; }
	html[data-tema^="21"] .ox-heroN__karty { gap: 6px; margin-bottom: 12px; }
	html[data-tema^="21"] .ox-heroN__karta2 { padding: 9px 14px; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
	html[data-tema^="21"] .ox-heroN__fr { height: clamp(72px, 12vh, 110px); }
	html[data-tema^="21"] .ox-heroN__fr--akt { flex: 2.6; height: clamp(96px, 17vh, 150px); }
	html[data-tema^="21"] .ox-heroN__fr--akt .ox-heroN__frn { font-size: 14px; left: 10px; bottom: 8px; }
}

/* --- 102) Hodváb: písací stroj a väčšie video (Peter 18. 9. 2026) -------------
   „text my sme bubble tea nech sa vypisuje ako v origináli“ + „zväčši to video
   a okraje zjednoť“ — nadpis je presunutý pôvodný <h2> (píše ho písací stroj),
   karta videa má rovnaký odstup od pravého aj spodného okraja. */
html[data-tema^="21"] .ox-heroN__pisar { display: block; width: 100%; }
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis {
	position: static; transform: none; inset: auto; margin: 22px auto 16px; padding: 0;
	/* vety písacieho stroja sú dlhšie než „My sme bubble tea“ — menšie písmo a
	   pevná šírka, inak prvý riadok naliezal na nadnadpis (Peter 18. 9. 2026) */
	max-width: 15ch; text-align: center; color: #fff; text-shadow: 0 30px 80px rgba(0, 0, 0, .4);
	/* Anton s mäkčeňmi potrebuje vzduch, inak prvý riadok naliezal na nadnadpis */
	font-size: clamp(30px, 5.2vw, 78px); line-height: 1.04;
}
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__riadok { justify-content: center; }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__lead { margin-bottom: 22px; }
html[data-tema^="21"] .ox-heroN__karta,
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid {
	width: clamp(240px, 30vw, 420px); height: clamp(150px, 19vw, 262px);
}
html[data-tema^="21"] .ox-heroN__karta { right: clamp(16px, 5vw, 76px); bottom: clamp(16px, 5vw, 76px); }
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__karta { width: min(62vw, 240px); height: min(40vw, 150px); bottom: clamp(12px, 4vw, 30px); right: clamp(12px, 4vw, 30px); }
}
/* text nesmie liezť pod kartu videa: blok sa centruje v mieste, ktoré ostalo vedľa nej */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { top: 46%; padding-right: clamp(200px, 32vw, 470px); }
}
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__lead { max-width: 34em; }

/* --- 103) FAQ kompaktne + hľadanie (Peter 18. 9. 2026: „sprav menšie a funkčnejšie“)
   Nadpis bol 72 px a otázky zaberali celú obrazovku. Teraz: menší nadpis,
   dva stĺpce, tesnejšie riadky, filter v otázkach a odkaz na kontakt.
   Sekcia „Zavoláme Vám“ je od 18. 9. 2026 zrušená (Peter: „tento widget odstráň“). */
html[data-tema^="21"] .ox-faq--kompakt .ox-h2 { font-size: clamp(24px, 3vw, 42px); }
html[data-tema^="21"] .ox-faq__hlava { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(14px, 2vw, 22px); }
html[data-tema^="21"] .ox-faq__hladanie { display: inline-flex; align-items: center; gap: 8px; background: var(--sk-povrch, #fff); box-shadow: var(--sk-obrys); border-radius: 999px; padding: 8px 14px; min-width: min(260px, 100%); }
html[data-tema^="21"] .ox-faq__hladanie input { border: 0; background: none; outline: 0; font: 500 14.5px/1.2 var(--sk-font-text); color: var(--sk-text); width: 100%; }
html[data-tema^="21"] .ox-faq__hladanie input::-webkit-search-cancel-button { cursor: pointer; }
html[data-tema^="21"] .ox-faq__lupa { flex: none; width: 15px; height: 15px; border: 2px solid var(--sk-akcent); border-radius: 50%; position: relative; }
html[data-tema^="21"] .ox-faq__lupa::after { content: ''; position: absolute; right: -5px; bottom: -3px; width: 7px; height: 2px; background: var(--sk-akcent); transform: rotate(45deg); border-radius: 2px; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__zoznam { max-width: none; columns: 2; column-gap: clamp(26px, 4vw, 56px); border-top: 0 !important; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__polozka { break-inside: avoid; -webkit-column-break-inside: avoid; border-top: 1px solid var(--sk-linka); border-bottom: 0; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__otazka { padding: 12px 0 !important; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 12px; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__q { font-size: 16px; line-height: 1.32; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__c { font-size: 12px; padding-top: 2px; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__sip { width: 18px !important; height: 18px !important; margin-top: 2px; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__odpoved { padding: 0 34px 14px 46px; max-width: none; }
html[data-tema^="21"] .ox-faq--kompakt .ox-faq__odpoved p { font-size: 14.5px; line-height: 1.5; }
html[data-tema^="21"] .ox-faq__nic { margin: 16px 0 0; font-size: 14.5px; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-faq__kontakt { margin: clamp(14px, 2vw, 22px) 0 0; font-size: 14.5px; color: var(--sk-text-tlmeny); }
html[data-tema^="21"] .ox-faq__kontakt a { color: var(--sk-akcent-tmavy); font-weight: 600; }
@media (max-width: 860px) {
	html[data-tema^="21"] .ox-faq--kompakt .ox-faq__zoznam { columns: 1; }
	html[data-tema^="21"] .ox-faq__hladanie { min-width: 100%; }
}

/* --- 104) Lišta pri skrolovaní netmavne (Peter 18. 9. 2026) -------------------
   „táto lišta keď scrollujem nech sa nezmení na tmavšiu“ — Frosted glass (5) aj
   Sklenená pilulka (2g) po odskrolovaní prepínali na tmavší závoj, resp. na
   priesvitnú červenú, ktorá cez tmavý obsah pôsobila tmavšie ako firemná.
   Teraz ostáva plná firemná červená, rovnaká ako inde na webe. */
html[data-tema^="21"] html[data-ox-hlavicka="5"] #ox-hlavicka.ox-hlavicka--odscrollovana,
html[data-ox-hlavicka="5"] #ox-hlavicka.ox-hlavicka--odscrollovana { background: var(--sk-akcent); }
html[data-ox-hlavicka="5"]:not(.ox-hv-uvod) #ox-hlavicka,
html[data-ox-hlavicka="5"].ox-hv-uvod #ox-hlavicka.ox-hlavicka--odscrollovana { background: var(--sk-akcent); border-bottom-color: rgba(255, 255, 255, .22); }

/* --- 105) Sklenená pilulka na celú šírku (Peter 18. 9. 2026) ------------------
   „túto lištu roztiahni na celú šírku tak ako je 4ka“ — návrh 3 (Sklenená
   pilulka) už nie je zaoblená pilulka s okrajmi, ale pás cez celé okno ako
   Frosted glass; obsah vnútri drží šírku webu. */
html[data-ox-hlavicka="2g"] #ox-hlavicka { padding: 0 !important; }
@media (max-width: 1080px) { html[data-ox-hlavicka="2g"] #ox-hlavicka { padding: 0 !important; } }
html[data-ox-hlavicka="2g"] .ox-hlavicka__vnutro {
	border-radius: 0; max-width: none; width: 100%; min-height: 74px;
	padding-inline: max(clamp(14px, 4vw, 60px), calc((100% - var(--sk-maxw, 1320px)) / 2));
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22);
}
html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) #ox-obsah { padding-top: 78px; }

/* --- 106) Hodváb: písací stroj nesmie preskakovať (Peter 18. 9. 2026) --------
   „texty moc preskakujú keď sa to píše“ — nadpis mal 15ch, takže veta sa lámala
   po pár znakoch a riadky poskakovali. Teraz je riadok široký na celý voľný
   priestor, menšie písmo a pevná výška dvoch riadkov. */
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis {
	max-width: none; font-size: clamp(26px, 4.4vw, 64px); line-height: 1.06;
	min-height: 2.12em; display: flex; align-items: center; justify-content: center;
	text-wrap: normal;
}
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__riadok { display: block; text-align: center; }

/* --- 107) Tvrdenia: nábeh pri scrollovaní z videa (Peter 18. 9. 2026) ---------
   „keď scrollujem z videa dole, nech tam je tranzícia“ — blok tvrdení sa vysunie
   a rozjasní, keď príde do okna. Karty v Coverflow majú transform z JS, preto
   animujeme LEN obal a nadpis, nie jednotlivé karty. */
html[data-tema^="21"] .ox-tvr {
	opacity: 0; transform: translateY(34px) scale(.985);
	transition: opacity .75s var(--sk-prechod), transform .75s var(--sk-prechod);
	will-change: opacity, transform;
}
html[data-tema^="21"] .ox-tvr--in { opacity: 1; transform: none; }
html[data-tema^="21"] .ox-tvr__hlava { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sk-prechod) .12s, transform .6s var(--sk-prechod) .12s; }
html[data-tema^="21"] .ox-tvr--in .ox-tvr__hlava { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-tvr, html[data-tema^="21"] .ox-tvr__hlava { opacity: 1; transform: none; transition: none; }
}

/* --- 108) Sklenená lišta ostáva priesvitná + čitateľná na svetlom (18. 9. 2026)
   Peter: „tento bar nech je priesvitný aj keď scrollujem dole; keď som na bielom
   podklade, nech sa logo v top bare prepne na červené.“ Jas podkladu meria
   `osvetlenie()` v app.js a pridáva triedu `ox-hlavicka--svetla`. */
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--odscrollovana .ox-hlavicka__vnutro,
html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) .ox-hlavicka__vnutro {
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .1));
	-webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
/* ⚠️ 18. 9. 2026 Peter: „ale iba logo, tlačidlá sú ok“ — na svetlom podklade sa
   prefarbí LEN značka, sklo, navigácia aj ikony ostávajú ako sú. */
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-logo__znak { background: var(--sk-akcent); }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-hlavicka__vnutro,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-logo__znak,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav__odkaz,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-ikonbtn { transition: background .35s var(--sk-prechod), color .35s var(--sk-prechod), box-shadow .35s var(--sk-prechod), border-color .35s var(--sk-prechod); }

/* --- 109) Sekcia 01: nábeh pri scrollovaní (Peter 18. 9. 2026) ----------------
   Návrhy A1–A5 nemali vlastný nábeh (základ ho má cez `nabehSekcie`), takže
   sa objavili naraz. Teraz sa vysunú a rozjasnia, keď prídu do okna. */
html[data-tema^="21"] .ox-s01 {
	opacity: 0; transform: translateY(36px);
	transition: opacity .8s var(--sk-prechod), transform .8s var(--sk-prechod);
}
html[data-tema^="21"] .ox-s01--in { opacity: 1; transform: none; }
html[data-tema^="21"] .ox-s01 > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--sk-prechod), transform .7s var(--sk-prechod); }
html[data-tema^="21"] .ox-s01--in > * { opacity: 1; transform: none; }
html[data-tema^="21"] .ox-s01--in > *:nth-child(2) { transition-delay: .1s; }
html[data-tema^="21"] .ox-s01--in > *:nth-child(3) { transition-delay: .2s; }
html[data-tema^="21"] .ox-s01--in > *:nth-child(4) { transition-delay: .3s; }
/* ⚠️ 19. 9. 2026 (Peter: „na Macu to ide, mne nie"): Váš PC má na úrovni systému
   zapnuté obmedzenie animácií, takže sa celý nábeh vypínal. Úplne ho nevypíname -
   zostáva JEMNÉ prelínanie bez posunu. Posun je to, čo pri obmedzení animácií
   ľuďom prekáža; samotné rozjasnenie je pokojné a sekcia sa neobjaví „z ničoho". */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-s01 { transform: none; transition: opacity .55s ease; }
	html[data-tema^="21"] .ox-s01 > * { transform: none; transition: opacity .5s ease; }
	html[data-tema^="21"] .ox-s01--in, html[data-tema^="21"] .ox-s01--in > * { opacity: 1; }
}

/* --- 111) Hodváb: karta videa s rozmazanými okrajmi (Peter 18. 9. 2026) -------
   „nech to splýva čo najviac s pozadím, ale nech obsah je vidieť“ — okraje karty
   mäkko vyblednú maskou (stred ostáva plný), tvrdý biely lem a ostrý tieň idú preč. */
html[data-tema^="21"] .ox-heroN__karta {
	border-radius: 26px;
	box-shadow: 0 50px 90px -46px rgba(0, 0, 0, .75);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
/* jemné dýchanie okraja, aby prechod nebol „vystrihnutý“ */
html[data-tema^="21"] .ox-heroN__karta .ox-heroN__vid { filter: saturate(1.04); }

/* --- 111b) Hodváb: karta videa vyššie, o kúsok doľava a väčšia (18. 9. 2026) */
html[data-tema^="21"] .ox-heroN__karta,
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid {
	width: clamp(258px, 32vw, 452px); height: clamp(162px, 20vw, 282px);
}
html[data-tema^="21"] .ox-heroN__karta { right: clamp(26px, 7vw, 108px); bottom: clamp(30px, 7vw, 106px); }
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__karta { width: min(64vw, 250px); height: min(42vw, 158px); right: clamp(12px, 5vw, 34px); bottom: clamp(16px, 6vw, 40px); }
}

/* --- 111c) Hodváb: karta videa ešte o kúsok väčšia a jemne zaoblenejšia ------- */
html[data-tema^="21"] .ox-heroN__karta,
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid {
	width: clamp(276px, 34.5vw, 486px); height: clamp(174px, 21.5vw, 304px);
}
html[data-tema^="21"] .ox-heroN__karta { border-radius: 32px; }
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__karta { width: min(68vw, 268px); height: min(45vw, 170px); border-radius: 24px; }
}

/* --- 112) B2B pilulka v sklenenej lište (Peter 18. 9. 2026) -------------------
   „daj inú farbu, aby nebola biela ako Domov“ — B2B je hlavná akcia, takže
   dostáva firemnú červenú s bielym textom (rovnako ako CTA v obsahu), „Domov“
   ostáva biela. Čierna sa nepoužíva, tú Peter 18. 9. zamietol. */
/* Peter 18. 9.: „daj tiež trochu priesvitné a nie až tak červené“ */
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"] {
	background: linear-gradient(180deg, rgba(225, 0, 26, .58), rgba(176, 0, 21, .52)) !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -12px rgba(120, 0, 14, .6);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"]:hover {
	background: linear-gradient(180deg, rgba(225, 0, 26, .78), rgba(176, 0, 21, .72)) !important;
	color: #fff !important;
}

/* --- 112b) jednotná sadzba tlačidiel v sklenenej lište (Peter 18. 9. 2026) ----
   „tlačidlá nech majú rovnaký font a dizajn“ — všetky tri položky majú rovnaké
   písmo, veľkosť, padding aj rádius; líši sa len farba pilulky. */
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"],
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz--aktivny {
	/* 19. 9. 2026 Peter: „všetky elementy v top bare zväčši o 2 pixely“ — mení sa
	   tu, lebo toto pravidlo drží jednotnú sadzbu cez !important a inde sa prebiť nedá. */
	font: 600 16.5px/1 var(--sk-font-text) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: 11px 19px !important;
	border-radius: 999px !important;
}
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz .ox-nav__znacka { font-size: .72em; }

/* --- 113) Sklenená lišta: celá sa prispôsobuje podkladu (Peter 18. 9. 2026) ---
   „farba nech sa mení ako predtým podľa podkladu, teraz mení farbu iba logo“ —
   na svetlom podklade sa zosvetlí sklo a do atramentu idú aj navigácia a ikony,
   nie len značka. Meranie robí `osvetlenie()` v app.js (trieda `--svetla`). */
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-hlavicka__vnutro {
	background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .66)) !important;
	box-shadow: inset 0 -1px 0 rgba(27, 27, 27, .12), 0 18px 40px -26px rgba(0, 0, 0, .45) !important;
}
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav { background: rgba(27, 27, 27, .06); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .1); }
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav__odkaz { color: rgba(27, 27, 27, .78); }
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav__odkaz:hover { background: rgba(27, 27, 27, .08); color: var(--sk-text); }
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav__odkaz--aktivny,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav__odkaz.ox-rail__odkaz--aktivny { background: #fff; color: var(--sk-akcent); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .25); }
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav__znacka { color: var(--sk-akcent); }
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav .ox-nav__odkaz[href$="/b2b"] {
	background: linear-gradient(180deg, rgba(225, 0, 26, .82), rgba(176, 0, 21, .76)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -14px rgba(120, 0, 14, .7);
}
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-ikonbtn { border-color: rgba(27, 27, 27, .2); color: var(--sk-text); background: rgba(255, 255, 255, .62); }
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-ikonbtn:hover { background: #fff; border-color: rgba(27, 27, 27, .4); }
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-kosik-pocet { background: var(--sk-akcent); color: #fff; box-shadow: 0 0 0 2px #fff; }

/* --- 114) dlhší nadnadpis v úvodných návrhoch (Peter 18. 9. 2026) -------------
   „Pre existujúce prevádzky ako sú bistro, fast-food, kebab, pizza, pekárne ...“
   je veta, nie štítok — verzálky so širokým prestrkom by ju roztiahli cez pol
   obrazovky, preto normálne písmo a menší prestrk. */
html[data-tema^="21"] .ox-heroN__oko {
	text-transform: none; letter-spacing: .06em; font-size: clamp(11.5px, 1.05vw, 13.5px);
	font-weight: 600; line-height: 1.35; max-width: 46ch;
}
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko { max-width: none; justify-content: center; text-align: center; }
@media (min-width: 1001px) { html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko { white-space: nowrap; } }
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__oko::before { display: none; }
	html[data-tema^="21"] .ox-heroN__oko { font-size: 12px; }
}

/* --- 114b) nadnadpis na dva riadky, elegantnejšie a väčšie (Peter 18. 9. 2026)
   „Pre existujúce prevádzky ako sú gastro“ / „bistro · fast-food · kebab ...“ —
   mono štítok vystriedalo ľahké Inter, druhý riadok nesie typy oddelené bodkami. */
html[data-tema^="21"] .ox-heroN__oko--dva {
	display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
	font-family: var(--sk-font-text); text-transform: none; letter-spacing: 0; max-width: none;
}
html[data-tema^="21"] .ox-heroN__oko--dva::before { display: none; }
html[data-tema^="21"] .ox-heroN__oko-r1 {
	font: 300 clamp(15px, 1.45vw, 20px)/1.25 var(--sk-font-text);
	letter-spacing: .012em; color: inherit; opacity: .95;
}
html[data-tema^="21"] .ox-heroN__oko-r2 {
	font: 600 clamp(12.5px, 1.1vw, 15.5px)/1.3 var(--sk-font-text);
	letter-spacing: .07em; opacity: .74;
}
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva { align-items: center; text-align: center; }
html[data-tema^="21"] .ox-s01 .ox-heroN__oko--dva { color: inherit; }
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva { white-space: nowrap; }
}

/* --- 114c) Hodváb: text viac doľava, karta videa vyššie a väčšia (18. 9. 2026) */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred {
		top: 44%; padding-left: clamp(16px, 5vw, 76px); padding-right: clamp(300px, 43vw, 680px);
	}
}
html[data-tema^="21"] .ox-heroN__karta,
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid {
	width: clamp(300px, 42vw, 620px); height: clamp(188px, 26vw, 388px);
}
html[data-tema^="21"] .ox-heroN__karta { bottom: clamp(48px, 11vw, 168px); right: clamp(20px, 5vw, 84px); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: min(72vw, 420px); height: min(46vw, 264px); }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__karta { width: min(66vw, 260px); height: min(43vw, 164px); bottom: clamp(14px, 5vw, 36px); right: clamp(12px, 4vw, 30px); }
}

/* --- 114d) Hodváb: karta videa rovno a ešte väčšia (Peter 18. 9. 2026) -------- */
html[data-tema^="21"] .ox-heroN__karta { transform: none !important; }
html[data-tema^="21"] .ox-heroN__karta,
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid {
	width: clamp(320px, 46vw, 684px); height: clamp(200px, 28.5vw, 428px);
}
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: min(76vw, 440px); height: min(48vw, 276px); }
}
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: min(70vw, 276px); height: min(45vw, 174px); }
}

/* --- 114e) Hodváb: väčšia sadzba a blok ešte viac doľava (Peter 18. 9. 2026) */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { padding-right: clamp(340px, 48vw, 780px); }
}
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(30px, 5vw, 74px); }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__lead { font-size: clamp(15.5px, 1.35vw, 19.5px); max-width: 38em; }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(16px, 1.6vw, 22px); }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: clamp(13px, 1.2vw, 16.5px); }
html[data-tema^="21"] .ox-heroN--h9 .ox-btn--hlavne { font-size: 15px; padding: 15px 26px; }

/* --- 114f) Hodváb: nadnadpis verzálkami, video výrazne väčšie (18. 9. 2026) --- */
html[data-tema^="21"] .ox-heroN__oko--dva { text-transform: uppercase; }
html[data-tema^="21"] .ox-heroN__oko-r1 { letter-spacing: .05em; font-weight: 400; }
html[data-tema^="21"] .ox-heroN__oko-r2 { letter-spacing: .09em; }
/* karta videa: „2× väčšie ako je teraz“ — na 1440 px ide na 900 × 560, väčšie by
   už nevošlo do hrdinu; text preto dostáva užší stĺpec a menší nadpis. */
html[data-tema^="21"] .ox-heroN__karta,
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid {
	width: clamp(380px, 62vw, 900px); height: clamp(230px, 38.5vw, 560px);
}
html[data-tema^="21"] .ox-heroN__karta { right: clamp(14px, 3vw, 44px); bottom: clamp(36px, 7vw, 104px); }
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { padding-right: clamp(380px, 64vw, 964px); top: 42%; }
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(28px, 4.2vw, 60px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__lead { font-size: clamp(14.5px, 1.15vw, 17px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(14px, 1.3vw, 18px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: clamp(11.5px, 1vw, 14px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva { white-space: normal; }
}
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: min(84vw, 520px); height: min(52vw, 320px); }
}

/* --- 114g) Hodváb: nadpis o tretinu väčší (Peter 18. 9. 2026) -----------------
   Stĺpec textu musel o kúsok narásť, aby sa „BUBBLE TEA“ v Antone zmestilo na
   jeden riadok, takže karta videa ide z 900 na 840 px. */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(34px, 5.4vw, 78px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { padding-right: clamp(360px, 60vw, 904px); }
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: clamp(380px, 58vw, 840px); }
}

/* --- 114h) Hodváb: text a video zarovnané na stred (Peter 18. 9. 2026) --------
   „video trochu menšie, aby to bolo zarovno v strede, text aj s videom“ —
   karta už nevisí na spodku, ale je vycentrovaná rovnako ako textový blok. */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { top: 50%; }
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: clamp(360px, 52vw, 764px); height: clamp(210px, 33vw, 486px); }
	html[data-tema^="21"] .ox-heroN__karta { top: 50%; bottom: auto; translate: 0 -50%; }
}
@media (min-width: 1001px) {
	/* 114i) ešte o kúsok menšie video (Peter 18. 9. 2026) */
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: clamp(340px, 47vw, 688px); height: clamp(196px, 30vw, 438px); }
}
@media (min-width: 1001px) {
	/* 114j) text bloku trochu doprava, nech sa dlhá veta zmestí na dva riadky */
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { padding-right: clamp(300px, 52vw, 800px); }
}

/* --- 115) Hrdina má rovnaké pozadie ako návrh Hodváb (Peter 18. 9. 2026) ------
   „pozadie tohto widgetu nech je rovnaké ako zo screenu 2“ — hodvábny prechod
   namiesto plochej červenej; guličky (Three.js) sú redšie a priehľadnejšie. */
html[data-tema^="21"] #ox-msr {
	background:
		radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .55), transparent 60%),
		radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .5), transparent 60%),
		linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 45%, #3A0008 70%, var(--sk-akcent) 100%) !important;
}
html[data-tema^="21"] #ox-msr .ox-msr__zavoj { opacity: .1; }
@media (min-width: 1001px) {
	/* 114k) karta videa ešte o kúsok menšia (Peter 18. 9. 2026) */
	html[data-tema^="21"] .ox-heroN__karta,
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid { width: clamp(320px, 42vw, 620px); height: clamp(184px, 27vw, 394px); }
}

/* --- 116) jednotná tmavá červená doska (Peter 18. 9. 2026) --------------------
   „tento widget má moc žiarivú farbu, asi starú - zjednoť to všade na tú tmavšiu
   (novú)“ — všetky veľké červené plochy (Manifest, Koľajnica, polovica
   porovnania, dlaždica 30 s) berú ten istý hodvábny prechod ako hrdina. */
html[data-tema^="21"] {
	--ox-doska-cervena:
		radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .34), transparent 62%),
		radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .28), transparent 62%),
		linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%);
}
html[data-tema^="21"] .ox-s01--a4,
html[data-tema^="21"] .ox-dovody--d4,
html[data-tema^="21"] .ox-s01__pol--cervena,
html[data-tema^="21"] .ox-s01__dl--cislo { background: var(--ox-doska-cervena) !important; }

/* --- 116b) tmavá červená aj pre Trust-led a pätu (Peter 18. 9. 2026) ---------- */
html[data-tema^="21"] .ox-show__b2b--dovera,
html[data-tema] #ox-pata,
html[data-tema^="21"] #ox-pata { background: var(--ox-doska-cervena) !important; color: #fff; }
html[data-tema^="21"] .ox-b2bn__metrika,
html[data-tema^="21"] .ox-show__b2b--metriky { background: var(--ox-doska-cervena); }

/* --- 117) Safari na Macu nezobrazoval plagát v Manifeste (Peter 18. 9. 2026) --
   Figúra mala `aspect-ratio` + `width:auto` + `max-height` a obrázok `height:100%`.
   Staršie Safari v takej kombinácii vo flexe vypočíta nulovú výšku a obrázok
   zmizne. Rozmer preto drží šírka, výšku dopočíta samotný obrázok. */
html[data-tema^="21"] .ox-s01__plagat--karta {
	aspect-ratio: auto !important; max-height: none !important;
	width: min(100%, 440px); height: auto;
}
html[data-tema^="21"] .ox-s01__plagat--karta img { width: 100%; height: auto; object-fit: contain; display: block; }
html[data-tema^="21"] .ox-s01--a2 .ox-s01__plagat--pin { aspect-ratio: auto; height: auto; }
html[data-tema^="21"] .ox-s01--a2 .ox-s01__plagat--pin img { width: 100%; height: auto; object-fit: contain; display: block; }

/* --- 118) porovnanie v Manifeste stojí na bielej ploche (Peter 18. 9. 2026) ---
   „odstráň pozadie okolo porovnania, nech je biele“ — tabuľka už neleží priamo
   na tmavočervenej doske, ale v bielej karte s vlastným rámom. */
html[data-tema^="21"] .ox-s01--a4b .ox-s01__porovnanie {
	background: #fff; padding: clamp(12px, 1.6vw, 24px); border-radius: 30px;
	box-shadow: 0 40px 80px -52px rgba(0, 0, 0, .6);
}
html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cierna { border-radius: 20px 0 0 20px; }
html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cervena { border-radius: 0 20px 20px 0; }
html[data-tema^="21"] .ox-s01--a4b .ox-s01__rucka { top: clamp(12px, 1.6vw, 24px); bottom: clamp(12px, 1.6vw, 24px); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cierna { border-radius: 20px 20px 0 0; }
	html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cervena { border-radius: 0 0 20px 20px; }
}

/* --- 119) PRIESVITNÉ VIDEO POHÁROV (relácia „OXO Web Fable“, 18. 9. 2026) -----
   Peter: „to video nahraď týmto novým priesvitným“. VP9 s alfou beží všade okrem
   Safari (to dostáva pôvodné H.264 so zapečeným pozadím). Keď je video priesvitné,
   pozadie hrdinu musí kresliť sekcia - inak by presvitala tmavá plocha. */
html[data-tema^="21"] .ox-uvod:has(.ox-uvod__video--alfa) {
	background:
		radial-gradient(120% 90% at 50% 18%, #FF3B27 0%, var(--sk-akcent) 42%, #8E0010 100%);
}
html[data-tema^="21"] .ox-uvod:has(.ox-uvod__video--alfa) .ox-uvod__pozadie { display: none; }
html[data-tema^="21"] .ox-uvod__video--alfa {
	background: transparent !important; object-fit: contain !important; filter: none;
}
@media (max-width: 700px) { html[data-tema^="21"] .ox-uvod__video--alfa { transform: scale(1.85); } }
@media (min-width: 701px) and (max-width: 1100px) { html[data-tema^="21"] .ox-uvod__video--alfa { transform: scale(1.12); } }
/* karta videa v návrhu Hodváb už nie je odkaz, ale span — nech drží rozmer */
html[data-tema^="21"] .ox-heroN__karta { display: block; }

/* --- 118b) porovnanie má biele okolie po celej šírke dosky (Peter 18. 9. 2026) */
html[data-tema^="21"] .ox-s01--a4b { overflow: hidden; }
html[data-tema^="21"] .ox-s01--a4b .ox-s01__porovnanie {
	margin: clamp(26px, 3.4vw, 46px) calc(-1 * clamp(28px, 4vw, 60px)) calc(-1 * clamp(28px, 4vw, 60px));
	padding: clamp(18px, 2.4vw, 34px);
	border-radius: 0; box-shadow: none;
}

/* --- 118c) spodok Manifestu nesmie mať ostré rohy (Peter 18. 9. 2026) --------- */
html[data-tema^="21"] .ox-s01--a4b .ox-s01__porovnanie { border-radius: 0 0 30px 30px; }
html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cierna { border-radius: 20px 0 0 18px; }
html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cervena { border-radius: 0 20px 18px 0; }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cierna { border-radius: 18px 18px 0 0; }
	html[data-tema^="21"] .ox-s01--a4b .ox-s01__pol--cervena { border-radius: 0 0 18px 18px; }
}

/* --- 119b) priesvitné video na SVETLÝCH návrhoch (18. 9. 2026) ----------------
   Orez videa má miestami tenké prúžky pozadia medzi pohármi (relácia „OXO Web
   Fable“). Na červenom hrdinovi ich nevidno, na krémových návrhoch (Editorial
   split, Memphis, Spec sheet, Sieť) by svietili - tam preto videu vrátime
   firemné červené pozadie priamo do jeho rámu, presne ako pri pôvodnom zábere. */
html[data-tema^="21"] :is(.ox-uvod--h1, .ox-uvod--h6, .ox-uvod--h8, .ox-uvod--h10) .ox-uvod__video--alfa {
	background:
		radial-gradient(120% 90% at 50% 18%, #FF3B27 0%, var(--sk-akcent) 42%, #8E0010 100%) !important;
	/* contain, nie cover: orezaný záber ukazoval len prostredný pohár */
	object-fit: contain !important;
}

/* --- 120) päta: zalomenie názvu a čitateľnosť stavu skladu (Peter 18. 9. 2026)
   „OXO BUBBLE / TEA“ sa lámalo po druhom slove a pilulka so stavom skladu bola
   na tmavej pate slabo čitateľná. */
html[data-tema^="21"] #ox-pata .ox-pata__stlpec--firma h4 {
	text-wrap: balance; hyphens: none;
	font-size: clamp(20px, 2vw, 30px); line-height: 1.04;
}
html[data-tema^="21"] #ox-pata .ox-pata__status {
	background: rgba(0, 0, 0, .46); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 8px 14px;
}
html[data-tema^="21"] #ox-pata .ox-pata__status i { box-shadow: 0 0 0 3px rgba(124, 255, 142, .35); }

/* --- 120b) prestrk v päte (Peter 18. 9. 2026: „letter spacing trochu“) -------- */
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-pata__stlpec:first-child h4 { letter-spacing: .022em; }
html[data-tema^="21"] #ox-pata .ox-pata__stlpec--firma h4 { letter-spacing: .015em; }
html[data-tema^="21"] #ox-pata .ox-pata__status { letter-spacing: .045em; font-size: 12.8px; }

/* --- 121) PRÍPRAVA KROK ZA KROKOM — päť nových návrhov (Peter 18. 9. 2026) ----
   „tento widget blbne, daj 5 návrhov award winning, ako by mohli vyzerať.“
   Obsah ostáva (video, päť krokov s časmi, čipy, počítadlo), mení sa rozloženie.
   Inšpirácia: kinematografický hero (Awwwards „cinematic product story“),
   editorial index s pripnutým obrazom, galéria kariet, diptych a filmový pás. */

/* spoločné: nech žiadny návrh nedrží prázdne miesto po skrytých častiach */
html[data-tema^="21"] :is(.ox-priprava--e, .ox-priprava--f, .ox-priprava--g, .ox-priprava--h, .ox-priprava--i) .ox-priprava__javisko { display: block; }

/* ---- E · KINO: video cez celú šírku, číslo hore, popis dole, časová os ------- */
html[data-tema^="21"] .ox-priprava--e .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: 21 / 9; max-height: min(66vh, 620px); width: 100%; height: auto;
	border-radius: 26px; overflow: hidden; position: relative;
}
html[data-tema^="21"] .ox-priprava--e .ox-priprava__video { object-fit: cover; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__film::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(20, 3, 2, .55) 0%, transparent 34%, transparent 46%, rgba(20, 3, 2, .82) 100%);
}
html[data-tema^="21"] .ox-priprava--e .ox-priprava__kroky { position: absolute; left: clamp(18px, 3vw, 46px); right: clamp(18px, 3vw, 46px); bottom: clamp(56px, 8vh, 92px); z-index: 3; display: block; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok { display: none; border: 0; background: none; padding: 0; box-shadow: none; max-width: 48ch; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok--akt { display: block; color: #fff; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok .ox-priprava__cislo {
	display: block; font: 400 clamp(46px, 7vw, 104px)/1 var(--sk-font-nadpis); color: rgba(255, 255, 255, .92); margin-bottom: 6px;
}
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok b { font-size: clamp(24px, 3vw, 44px); color: #fff; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok small { font-size: 16px; color: rgba(255, 255, 255, .88); max-width: 46ch; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__cipy {
	position: absolute; left: clamp(18px, 3vw, 46px); right: clamp(18px, 3vw, 46px); bottom: clamp(18px, 3vh, 30px); z-index: 3;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
html[data-tema^="21"] .ox-priprava--e .ox-priprava__cip {
	background: none; border: 0; border-top: 3px solid rgba(255, 255, 255, .35); border-radius: 0;
	color: rgba(255, 255, 255, .7); padding: 10px 0 0; text-align: left; align-items: flex-start;
}
html[data-tema^="21"] .ox-priprava--e .ox-priprava__cip--akt { border-top-color: #fff; color: #fff; background: none; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__cip b { font-size: 11px; opacity: .8; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__cip span { font-size: 12.5px; }

/* ---- F · INDEX: pripnutý obraz vľavo, rozbaľovací zoznam vpravo -------------- */
html[data-tema^="21"] .ox-priprava--f .ox-priprava__javisko { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(22px, 3.4vw, 54px); align-items: start; }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__film.ox-priprava__film--video { aspect-ratio: 4 / 5; width: 100%; height: auto; border-radius: 22px; }
@media (min-width: 1001px) { html[data-tema^="21"] .ox-priprava--f .ox-priprava__film { position: sticky; top: calc(var(--ox-lista, 0px) + 96px); } }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__kroky { display: block; border-top: 1px solid var(--sk-linka); }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__krok {
	display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: baseline;
	padding: clamp(14px, 1.8vw, 22px) 0 clamp(14px, 1.8vw, 22px) 14px;
	border: 0; border-bottom: 1px solid var(--sk-linka); border-left: 3px solid transparent; background: none; box-shadow: none; opacity: .55;
	transition: opacity .3s var(--sk-prechod), border-color .3s var(--sk-prechod), padding-left .3s var(--sk-prechod);
}
html[data-tema^="21"] .ox-priprava--f .ox-priprava__krok--akt { opacity: 1; border-left-color: var(--sk-akcent); padding-left: 20px; }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__krok small { display: none; grid-column: 2; }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__krok--akt small { display: block; margin-top: 8px; }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__cislo { font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-akcent); }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__krok b { font-size: clamp(20px, 2.2vw, 30px); }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__cipy { display: none; }

/* ---- G · GALÉRIA: široké video, pod ním päť rovnocenných kariet -------------- */
html[data-tema^="21"] .ox-priprava--g .ox-priprava__film.ox-priprava__film--video { aspect-ratio: 16 / 9; width: 100%; height: auto; border-radius: 24px; }
html[data-tema^="21"] .ox-priprava--g .ox-priprava__kroky {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(16px, 2.2vw, 26px);
}
html[data-tema^="21"] .ox-priprava--g .ox-priprava__krok {
	display: block; background: var(--sk-povrch); border-radius: 18px; padding: 16px 18px;
	border: 0; border-top: 3px solid transparent; box-shadow: var(--sk-obrys); opacity: .82;
	transition: transform .3s var(--sk-prechod), box-shadow .3s var(--sk-prechod), opacity .3s;
}
html[data-tema^="21"] .ox-priprava--g .ox-priprava__krok--akt { opacity: 1; border-top-color: var(--sk-akcent); transform: translateY(-6px); box-shadow: var(--sk-tien-karta), var(--sk-obrys); }
html[data-tema^="21"] .ox-priprava--g .ox-priprava__cislo { font: 400 26px/1 var(--sk-font-nadpis); color: var(--sk-akcent); }
html[data-tema^="21"] .ox-priprava--g .ox-priprava__krok b { display: block; margin: 6px 0 4px; font-size: 17px; }
html[data-tema^="21"] .ox-priprava--g .ox-priprava__krok small { font-size: 13px; line-height: 1.45; }
html[data-tema^="21"] .ox-priprava--g .ox-priprava__cipy { display: none; }

/* ---- H · DIPTYCH: tmavá polovica s videom, krémová s obrím číslom ------------ */
html[data-tema^="21"] .ox-priprava--h .ox-priprava__javisko {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 26px; overflow: hidden; background: var(--sk-krem, #FFF7E6);
}
html[data-tema^="21"] .ox-priprava--h .ox-priprava__film.ox-priprava__film--video { aspect-ratio: auto; height: 100%; min-height: clamp(320px, 42vw, 520px); width: 100%; border-radius: 0; }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__video { object-fit: cover; }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__kroky { display: block; padding: clamp(22px, 3vw, 44px); align-self: center; }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__krok { display: none; border: 0; background: none; box-shadow: none; padding: 0; }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__krok--akt { display: block; }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__cislo { display: block; font: 400 clamp(64px, 9vw, 132px)/.9 var(--sk-font-nadpis); color: var(--sk-akcent); }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__krok b { display: block; margin: 10px 0 8px; font-size: clamp(24px, 3vw, 40px); }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__krok small { font-size: 16px; max-width: 34ch; }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__cipy { grid-column: 1 / -1; display: flex; gap: 8px; padding: 0 clamp(22px, 3vw, 44px) clamp(20px, 2.6vw, 32px); }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__cip { flex: 1; justify-content: center; }

/* ---- I · FILMOVÝ PÁS: zvislé video a pás políčok pod ním --------------------- */
html[data-tema^="21"] .ox-priprava--i .ox-priprava__javisko { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(22px, 3.4vw, 54px); align-items: center; }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__film.ox-priprava__film--video {
	aspect-ratio: 9 / 16; max-height: min(72vh, 660px); width: auto; margin-inline: auto; border-radius: 28px;
}
html[data-tema^="21"] .ox-priprava--i .ox-priprava__video { object-fit: cover; }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__kroky { display: block; }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__krok { display: none; border: 0; background: none; box-shadow: none; padding: 0; }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__krok--akt { display: block; }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__cislo { font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-akcent); letter-spacing: .16em; }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__krok b { display: block; margin: 12px 0 10px; font-size: clamp(28px, 3.6vw, 52px); }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__krok small { font-size: 17px; line-height: 1.55; max-width: 40ch; }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__cipy { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: clamp(18px, 2.4vw, 30px); }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__cip {
	flex-direction: column; align-items: flex-start; gap: 4px; background: var(--sk-povrch); border: 0;
	box-shadow: var(--sk-obrys); border-radius: 14px; padding: 12px 14px;
}
html[data-tema^="21"] .ox-priprava--i .ox-priprava__cip--akt { background: var(--sk-akcent); color: #fff; }

@media (max-width: 1000px) {
	html[data-tema^="21"] :is(.ox-priprava--f, .ox-priprava--h, .ox-priprava--i) .ox-priprava__javisko { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-priprava--g .ox-priprava__kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-priprava--e .ox-priprava__cipy { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
	html[data-tema^="21"] .ox-priprava--e .ox-priprava__cip span { display: none; }
	html[data-tema^="21"] .ox-priprava--e .ox-priprava__film.ox-priprava__film--video { aspect-ratio: 4 / 3; }
	html[data-tema^="21"] .ox-priprava--i .ox-priprava__cipy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 121b) doladenie piatich nových návrhov prípravy (Peter 18. 9. 2026) ------
   Základ kreslí číslo kroku ako červené koliesko 44 × 44 px v mriežke karty —
   v nových rozloženiach ho potrebujeme ako obyčajný text, inak sa číslica
   stráca v koliesku a v diptychu lezie na titulok. */
html[data-tema^="21"] :is(.ox-priprava--e, .ox-priprava--f, .ox-priprava--g, .ox-priprava--h, .ox-priprava--i) .ox-priprava__cislo {
	grid-row: auto; width: auto; height: auto; border-radius: 0; background: none;
	display: block; place-items: initial; position: static;
}
html[data-tema^="21"] .ox-priprava--g .ox-priprava__cislo { color: var(--sk-akcent); font-size: 26px; }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__cislo { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__cislo { color: var(--sk-akcent); }
html[data-tema^="21"] .ox-priprava--i .ox-priprava__cislo { color: var(--sk-akcent); }
/* E: popis mal málo miesta nad časovou osou */
html[data-tema^="21"] .ox-priprava--e .ox-priprava__kroky { bottom: clamp(70px, 11vh, 118px); }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok { display: none; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok--akt { display: block; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok b { display: block; margin-bottom: 6px; }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok small { margin-top: 0; }
/* H: číslo a titulok pod sebou, nie cez seba */
html[data-tema^="21"] .ox-priprava--h .ox-priprava__krok { display: none; }
html[data-tema^="21"] .ox-priprava--h .ox-priprava__krok--akt { display: block; }

/* --- 121c) Kino: viac vzduchu pre popis a časovú os (Peter 18. 9. 2026) ------- */
html[data-tema^="21"] .ox-priprava--e .ox-priprava__film.ox-priprava__film--video { aspect-ratio: 16 / 9; max-height: min(74vh, 700px); }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__kroky { bottom: clamp(92px, 14vh, 140px); left: clamp(24px, 4vw, 60px); right: clamp(24px, 4vw, 60px); }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__cipy { bottom: clamp(22px, 3.6vh, 38px); left: clamp(24px, 4vw, 60px); right: clamp(24px, 4vw, 60px); }
html[data-tema^="21"] .ox-priprava--e .ox-priprava__krok small { max-width: 52ch; }

/* --- 122) FAQ „Čo sa nás prevádzky pýtajú“ — päť nových návrhov (18. 9. 2026) --
   Peter: „tento widget blbne, daj 5 návrhov award winning.“ Dnešné dva stĺpce
   robia CSS columns, takže otvorená odpoveď preskladá celý zoznam a vznikajú
   diery. Nové návrhy preto stavajú na gride alebo jednom stĺpci.
   Obsah je vždy rovnaký: nadpis, hľadanie, päť otázok, riadok s kontaktom. */

/* ---- B · SPLIT: vľavo pripnutá hlavička s hľadaním, vpravo jeden stĺpec ------ */
html[data-tema^="21"] .ox-faq--split .ox-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 4vw, 64px); align-items: start; }
html[data-tema^="21"] .ox-faq--split .ox-faq__hlava { display: block; margin: 0; }
@media (min-width: 1001px) { html[data-tema^="21"] .ox-faq--split .ox-faq__hlava { position: sticky; top: calc(var(--ox-lista, 0px) + 96px); } }
html[data-tema^="21"] .ox-faq--split .ox-faq__hladanie { margin-top: 18px; min-width: 0; width: 100%; }
html[data-tema^="21"] .ox-faq--split .ox-faq__zoznam { columns: 1; border-top: 1px solid var(--sk-linka) !important; }
html[data-tema^="21"] .ox-faq--split .ox-faq__kontakt { grid-column: 1; margin-top: 18px; }
html[data-tema^="21"] .ox-faq--split .ox-faq__nic { grid-column: 2; }

/* ---- C · KARTY: bento mriežka, otvorená karta rastie vo svojej bunke --------- */
html[data-tema^="21"] .ox-faq--karty .ox-faq__zoznam { columns: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-top: 0 !important; align-items: start; }
html[data-tema^="21"] .ox-faq--karty .ox-faq__polozka {
	border: 0; border-radius: 20px; background: var(--sk-povrch); box-shadow: var(--sk-obrys);
	padding: 16px 18px; transition: box-shadow .3s var(--sk-prechod), transform .3s var(--sk-prechod);
}
html[data-tema^="21"] .ox-faq--karty .ox-faq__polozka[open] { box-shadow: var(--sk-tien-karta), var(--sk-obrys); transform: translateY(-3px); }
html[data-tema^="21"] .ox-faq--karty .ox-faq__otazka { padding: 0 !important; grid-template-columns: 30px minmax(0, 1fr) 22px; align-items: start; }
html[data-tema^="21"] .ox-faq--karty .ox-faq__odpoved { padding: 12px 0 0 !important; }
html[data-tema^="21"] .ox-faq--karty .ox-faq__q { font-size: 15.5px; }

/* ---- D · SWISS: celoplošné riadky s obrím číslom a vlasovou linkou ----------- */
html[data-tema^="21"] .ox-faq--swiss .ox-faq__zoznam { columns: 1; border-top: 2px solid var(--sk-text) !important; }
html[data-tema^="21"] .ox-faq--swiss .ox-faq__polozka { border-bottom: 1px solid var(--sk-linka); border-top: 0; }
html[data-tema^="21"] .ox-faq--swiss .ox-faq__otazka { grid-template-columns: clamp(58px, 7vw, 104px) minmax(0, 1fr) 34px; padding: clamp(18px, 2.2vw, 28px) 0 !important; align-items: baseline; }
html[data-tema^="21"] .ox-faq--swiss .ox-faq__c { font: 400 clamp(26px, 3.4vw, 48px)/1 var(--sk-font-nadpis); color: var(--sk-akcent); letter-spacing: 0; }
html[data-tema^="21"] .ox-faq--swiss .ox-faq__q { font: 400 clamp(19px, 2.2vw, 30px)/1.1 var(--sk-font-nadpis); text-transform: uppercase; letter-spacing: .01em; }
html[data-tema^="21"] .ox-faq--swiss .ox-faq__odpoved { padding: 0 34px clamp(18px, 2vw, 26px) clamp(58px, 7vw, 104px) !important; }
html[data-tema^="21"] .ox-faq--swiss .ox-faq__odpoved p { font-size: 16px; max-width: 72ch; }

/* ---- E · VEĽKÉ OTÁZKY: jeden stĺpec, odpoveď v dvoch ------------------------- */
html[data-tema^="21"] .ox-faq--velke .ox-faq__zoznam { columns: 1; border-top: 1px solid var(--sk-linka) !important; }
html[data-tema^="21"] .ox-faq--velke .ox-faq__otazka { grid-template-columns: minmax(0, 1fr) 40px; padding: clamp(20px, 2.4vw, 30px) 0 !important; }
html[data-tema^="21"] .ox-faq--velke .ox-faq__c { display: none; }
html[data-tema^="21"] .ox-faq--velke .ox-faq__q { font-size: clamp(20px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.015em; }
html[data-tema^="21"] .ox-faq--velke .ox-faq__odpoved { padding: 0 0 clamp(18px, 2vw, 26px) !important; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
html[data-tema^="21"] .ox-faq--velke .ox-faq__odpoved p { font-size: 15.5px; }
html[data-tema^="21"] .ox-faq--velke .ox-faq__polozka[open] .ox-faq__q { color: var(--sk-akcent); }

/* ---- F · KONVERZÁCIA: otázka ako bublina prevádzky, odpoveď od OXO ----------- */
html[data-tema^="21"] .ox-faq--chat .ox-faq__zoznam { columns: 1; border-top: 0 !important; display: grid; gap: 12px; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__polozka { border: 0; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__otazka {
	display: inline-grid !important; grid-template-columns: minmax(0, 1fr) 22px; gap: 12px;
	background: var(--sk-povrch); box-shadow: var(--sk-obrys); border-radius: 18px 18px 18px 4px;
	padding: 12px 16px !important; max-width: min(72%, 680px);
}
html[data-tema^="21"] .ox-faq--chat .ox-faq__c { display: none; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__q { font-size: 15.5px; font-weight: 600; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__odpoved {
	margin: 10px 0 0 auto; max-width: min(76%, 720px); padding: 14px 18px !important;
	background: linear-gradient(160deg, var(--sk-akcent), #A3000F); color: #fff;
	border-radius: 18px 18px 4px 18px;
}
html[data-tema^="21"] .ox-faq--chat .ox-faq__odpoved p { color: rgba(255, 255, 255, .95); font-size: 15px; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__sip { display: none; }

@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-faq--split .ox-wrap { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-faq--karty .ox-faq__zoznam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-faq--velke .ox-faq__odpoved { columns: 1; }
	html[data-tema^="21"] .ox-faq--chat .ox-faq__otazka, html[data-tema^="21"] .ox-faq--chat .ox-faq__odpoved { max-width: 100%; }
}
@media (max-width: 640px) {
	html[data-tema^="21"] .ox-faq--karty .ox-faq__zoznam { grid-template-columns: minmax(0, 1fr); }
}

/* --- 120c) výraznejší prestrk v päte (Peter 18. 9. 2026: „stále slabý“) -------
   Oba texty sú v Antone, ktorý je úzky — pri malých veľkostiach potrebuje
   podstatne väčší prestrk, aby sa dal čítať. */
html[data-tema^="21"] #ox-pata .ox-pata__stlpec--firma h4 { letter-spacing: .055em; }
html[data-tema^="21"] #ox-pata.ox-pata--wordmark .ox-pata__stlpec:first-child h4 { letter-spacing: .04em; }
html[data-tema^="21"] #ox-pata .ox-pata__status { letter-spacing: .1em; font-size: 13px; padding: 8px 16px; }

/* =============================================================================
   123) NÁVRHY SEKCIÍ OBCHODU (Peter 18. 9. 2026: „skúšaj aspoň 15 návrhov na
   sekcie b2b, e-shop, checkout, registrácia“). Návrhy pripravil workflow
   `oxo-navrhy-sekcii`: rešerš markupu a vzorov → CSS → adversariálna kontrola.
   Varianta sa zapína atribútom na <html>, obsah sa nemení.
   ========================================================================== */

/* ---- kalk / bento: Bento pult ---- */
/* --- BENTO PULT (kalk/bento) -------------------------------------------------
   .ox-kalk__set, .ox-kalk__zisk aj .ox-kalk__karty idú na display: contents, tak
   sa ich deti stanú dlaždicami priamo v 12-stĺpcovom .ox-kalk__telo. Veľkosť
   dlaždice nesie váhu údaja: karta zisku je hrdina 6 stĺpcov x 2 riadky, cena
   setu je plná červená dlaždica, tri sirupové selecty sedia vedľa seba po 4
   stĺpcoch, poznámky sú tenké pásiky. Dieru po hrdinovi dopĺňa row dense.
   Pozor na špecifickosť: základ témy má html[data-tema^="21"] .ox-kalk__X, čo je
   (0,2,1). Každý selektor tu preto nesie aj .ox-kalk a vyhráva (0,3,x) bez
   ohľadu na poradie v súbore, takže netreba prebíjaciu značku important. */
html[data-ox-kalk="bento"] #ox-kalk.ox-kalk { display: block; background: var(--sk-krem); }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__hlava { text-align: left; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__telo {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: row dense; gap: 12px; align-items: stretch;
	padding: clamp(14px, 2vw, 22px); background: var(--sk-krem);
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__set,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zisk,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karty { display: contents; }

/* dlaždica = spoločný podklad (tlačidlá si nechávajú vlastný vzhľad .ox-btn) */
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__nadpis,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zoznam,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pole,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__vyber,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__cena,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pod,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__slider,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta {
	min-width: 0; margin: 0; padding: 14px 16px; background: var(--sk-povrch, #fff);
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-stredny);
	box-shadow: var(--sk-tien-karta);
}

/* rozloženie mozaiky, poradie kopíruje DOM.
   nth-of-type ráta podľa značky: v .ox-kalk__set sú tri h4 a päť label. */
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__set .ox-kalk__nadpis:nth-of-type(1),
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zisk .ox-kalk__nadpis { grid-column: span 4; display: flex; align-items: center; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zoznam {
	grid-column: span 8; display: grid; list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zoznam li { background: var(--sk-krem); }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__set .ox-kalk__nadpis:nth-of-type(n+2) {
	grid-column: 1 / -1; background: transparent; border: 0; border-left: 3px solid var(--sk-akcent);
	border-radius: 0; box-shadow: none; padding: 2px 0 2px 10px;
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pole { grid-column: span 4; padding: 8px; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pole:nth-of-type(n+4) { grid-column: span 6; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__select { border-color: transparent; background: var(--sk-krem); }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__vyber { grid-column: span 6; background: var(--sk-povrch, #fff); }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pod { grid-column: span 8; display: flex; align-items: center; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__slider { grid-column: span 6; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--trzby {
	grid-column: span 6; background: rgba(255, 217, 214, .38); border-color: var(--sk-ruz);
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk { grid-column: span 6; grid-row: span 2; }
html[data-ox-kalk="bento"] .ox-kalk #ox-kalk-kosik { grid-column: 1 / -1; }
html[data-ox-kalk="bento"] .ox-kalk #ox-kalk-start { grid-column: span 6; align-self: stretch; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pozn,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__prihlas:not([hidden]) {
	grid-column: 1 / -1; margin: 0; padding: 8px 2px 0; background: transparent;
	border-top: 1px solid var(--sk-linka); border-radius: 0;
	font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; font-size: 12px;
}
/* poistka proti pretoku: bunka slidera má zo základu input so šírkou 5ch */
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__bunka input { max-width: 100%; }

/* cena setu = jediná plná červená dlaždica, kontrast bieleho textu 5,4:1 */
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__cena {
	grid-column: span 6; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
	justify-content: space-between; text-align: left; gap: 8px 14px;
	background: var(--sk-akcent-tmavy); border-color: var(--sk-akcent-tmavy);
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__cena span { color: #fff; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__cena b { color: #fff; font-size: clamp(26px, 3vw, 38px); }

/* karta = účtovný riadok: popis vľavo, číslo vpravo (b/small sú ploché súrodenci).
   Stĺpcová medzera je 0, odsadenie nesie small, aby deliaca čiara nebola prerušená. */
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center;
	justify-items: stretch; text-align: left; gap: 4px 0;
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta-nazov { grid-column: 1 / -1; grid-row: 1; margin-bottom: 10px; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta small {
	grid-column: 1; align-self: center; justify-self: start; margin: 0; padding-right: 12px;
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta b { grid-column: 2; justify-self: end; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta b:nth-of-type(1),
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta small:nth-of-type(1) { grid-row: 2; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta b:nth-of-type(2),
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta small:nth-of-type(2) { grid-row: 3; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta b:nth-of-type(3),
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta small:nth-of-type(3) { grid-row: 4; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta b:nth-of-type(n+2),
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta small:nth-of-type(n+2) { border-top: 1px solid var(--sk-linka); padding-top: 8px; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk {
	background: var(--sk-akcent-tmavy); border-color: var(--sk-akcent-tmavy); box-shadow: var(--sk-tien-karta);
}
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk b { color: #fff; }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov em,
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk small { color: rgba(255, 255, 255, .88); }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk b:nth-of-type(1) { font-size: clamp(30px, 3.6vw, 46px); }
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk b:nth-of-type(n+2),
html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk small:nth-of-type(n+2) { border-top-color: rgba(255, 255, 255, .3); }
/* strata: hrdina stmavne, biely text drží kontrast */
html[data-ox-kalk="bento"] .ox-kalk.ox-kalk--strata .ox-kalk__karta--zisk { background: var(--sk-text); border-color: var(--sk-text); }
html[data-ox-kalk="bento"] .ox-kalk.ox-kalk--strata .ox-kalk__karta--zisk b { color: #fff; }

@media (max-width: 1000px) {
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__telo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__set .ox-kalk__nadpis:nth-of-type(1),
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zisk .ox-kalk__nadpis,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zoznam,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__vyber,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__cena,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pod,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__slider,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--trzby,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk,
	html[data-ox-kalk="bento"] .ox-kalk #ox-kalk-start { grid-column: 1 / -1; }
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__karta--zisk { grid-row: auto; }
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pole { grid-column: span 2; }
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pole:nth-of-type(n+4) { grid-column: span 3; }
}
@media (max-width: 620px) {
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__telo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pole,
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__pole:nth-of-type(n+4) { grid-column: 1 / -1; }
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__zoznam { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-kalk="bento"] .ox-kalk .ox-kalk__cena { flex-direction: column; align-items: flex-start; }
}

/* ---- kalk / doska: Nočná doska ---- */
/* --- NOČNÁ DOSKA (kalk/doska) ------------------------------------------------
   Kalkulačka prestáva byť biela karta: celá si sadá na tmavočervenú dosku
   (--ox-doska-cervena, blok 116), rovnakú ako Manifest a päta, a pláva na nej
   jediná biela karta, výber setu. Hierarchia sa otáča, stĺpec zisku ide cez
   grid-column vľavo a je širší (1.25fr / .85fr), takže oko najprv vidí výsledok.
   Karta zisku nesie jedno hrdinské číslo cez celú šírku a pod ním drobný rozpad
   za deň / za 360 dní, tržby si držia vodorovný rytmus v troch stĺpcoch.
   Inšpirácia: ROI kalkulačky (Dispel, Awwwards), tmavý panel s jediným dôrazom
   v duchu Linear.app.

   Prebíjanie základu (blok 25, html[data-tema^="21"] .ox-kalk ...): základ má
   rovnakú špecifickosť ako holý prefix varianty, takže by rozhodovalo poradie
   v súbore. Preto ide celé vnútro cez #ox-kalk (to id v markupe existuje) a
   nepotrebujeme ani jeden !important.
   Na dosku je navrstvený tmavý závoj: prechod začína sýtou --sk-akcent a biely
   text by na nej mal len asi 3,7:1. So závojom je najsvetlejšie miesto dosky
   pod bielym textom nad 5:1.
   Čísla idú do Antonu (--sk-font-nadpis), lebo predvolený --sk-font-display
   (Luckiest Guy) je široký a suma „1 080 000 €“ (150 porcií × 20 € × 360 dní)
   by pretiekla stĺpec. */
html[data-ox-kalk="doska"] #ox-kalk {
	--ox-kalk-doska: var(--ox-doska-cervena, linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%));
	background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .3)), var(--ox-kalk-doska);
	color: #fff;
	box-shadow: 0 40px 80px -48px rgba(58, 0, 8, .8);
}
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__hlava { background: transparent; text-align: left; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 40px) clamp(14px, 1.6vw, 20px); border-bottom: 1px solid rgba(255, 255, 255, .16); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__hlava .ox-h3 { font-size: clamp(28px, 3.4vw, 46px); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__hlava p { color: rgba(255, 255, 255, .9); }

/* doska: zisk vľavo a širší, biela karta so setom vpravo */
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__telo { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: start; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__zisk { grid-column: 1; grid-row: 1; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__set { grid-column: 2; grid-row: 1; background: #fff; color: var(--sk-text); border-radius: var(--sk-r-velky); padding: clamp(18px, 2.2vw, 28px); box-shadow: var(--sk-tien-karta), 0 0 0 1px rgba(255, 255, 255, .5); }

/* ľavý stĺpec žije na tmavej doske, preto všetko svetlé */
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__zisk .ox-kalk__nadpis { color: #fff; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__pod { color: rgba(255, 255, 255, .9); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__zisk .ox-label { color: rgba(255, 255, 255, .92); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__zisk input[type="range"] { accent-color: var(--sk-krem); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__bunka { background: rgba(0, 0, 0, .24); border-color: rgba(255, 255, 255, .34); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__bunka input { color: #fff; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__bunka small { color: rgba(255, 255, 255, .92); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__pozn { background: rgba(0, 0, 0, .24); color: rgba(255, 255, 255, .92); }

/* vodorovný rytmus deň / 30 dní / 360 dní */
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty { grid-template-columns: minmax(0, 1fr); gap: 12px; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; column-gap: 10px; row-gap: 2px; padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 22px); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta-nazov { grid-column: 1 / -1; grid-row: 1; justify-self: start; text-align: left; color: var(--sk-krem); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta-nazov em { color: rgba(255, 255, 255, .92); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta b:nth-of-type(1) { grid-row: 2; grid-column: 1; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta b:nth-of-type(2) { grid-row: 2; grid-column: 2; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta b:nth-of-type(3) { grid-row: 2; grid-column: 3; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta small:nth-of-type(1) { grid-row: 3; grid-column: 1; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta small:nth-of-type(2) { grid-row: 3; grid-column: 2; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta small:nth-of-type(3) { grid-row: 3; grid-column: 3; }
/* Anton je úzky, čísla sa tak zmestia aj pri maxime sliderov; overflow-wrap je
   poistka, aby dlhá suma radšej zalomila, než pretiekla cez okraj karty */
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta b { font-family: var(--sk-font-nadpis); color: #fff; overflow-wrap: anywhere; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta small { margin-bottom: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .92); overflow-wrap: anywhere; }

/* karta zisku ide hore a nesie jediný hrdinský údaj cez celú šírku */
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta--zisk { order: -1; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(2) { grid-row: 2; grid-column: 1 / -1; font-size: clamp(40px, 5.6vw, 78px); letter-spacing: -.01em; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk small:nth-of-type(2) { grid-row: 3; grid-column: 1 / -1; color: var(--sk-krem); font-weight: 700; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(1) { grid-row: 4; grid-column: 1; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(3) { grid-row: 4; grid-column: 2; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk small:nth-of-type(1) { grid-row: 5; grid-column: 1; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk small:nth-of-type(3) { grid-row: 5; grid-column: 2; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(1),
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(3) { margin-top: clamp(8px, 1.2vw, 14px); font-size: clamp(20px, 2vw, 28px); color: rgba(255, 255, 255, .92); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta--trzby { background: rgba(0, 0, 0, .26); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta--trzby b { color: var(--sk-ruz); font-size: clamp(20px, 2vw, 28px); }
/* strata: základ dáva tmavosivú, tá by na doske zanikla */
html[data-ox-kalk="doska"] #ox-kalk.ox-kalk--strata .ox-kalk__karty .ox-kalk__karta--zisk b { color: var(--sk-ruz); }

/* biela karta setu: cenový pás v doskovej červenej, aby sa reťaz uzavrela */
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__cena { background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .36)), var(--ox-kalk-doska); }
html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__cena span { color: rgba(255, 255, 255, .92); }
html[data-ox-kalk="doska"] #ox-kalk #ox-kalk-set-cena { color: #fff; }
/* tlačidlo na doske nesmie byť červené na červenom */
html[data-ox-kalk="doska"] #ox-kalk #ox-kalk-start { background: var(--sk-krem); color: var(--sk-akcent-tmavy); border-color: var(--sk-krem); box-shadow: none; }
html[data-ox-kalk="doska"] #ox-kalk #ox-kalk-start:hover { background: #fff; color: var(--sk-akcent-tmavy); }
html[data-ox-kalk="doska"] #ox-kalk #ox-kalk-start:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* poznámka pre hosťa stojí nad kalkulačkou, na svetlom pozadí sekcie */
html[data-ox-kalk="doska"] .ox-kalk-pozn-host { border-left: 3px solid var(--sk-akcent); padding-left: 14px; }

@media (max-width: 1000px) {
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__telo { grid-template-columns: minmax(0, 1fr); }
	/* zisk ostáva prvý aj v jednom stĺpci */
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__zisk { grid-column: 1; grid-row: 1; }
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__set { grid-column: 1; grid-row: 2; }
}
@media (max-width: 620px) {
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__hlava { padding: 22px 18px 14px; }
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta { column-gap: 6px; padding: 16px 12px; }
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta small { font-size: 10px; letter-spacing: .03em; }
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(2) { font-size: clamp(34px, 11vw, 60px); }
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(1),
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karty .ox-kalk__karta--zisk b:nth-of-type(3),
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__karta--trzby b { font-size: clamp(13px, 3.6vw, 18px); }
	html[data-ox-kalk="doska"] #ox-kalk .ox-kalk__rad { grid-template-columns: minmax(0, 1fr); }
}

/* ---- kalk / uctenka: Účtenka ---- */
/* --- ÚČTENKA (kalk/uctenka) -------------------------------------------------
   Pokojná papierová verzia kalkulačky: úzka biela plocha s vláskovou linkou
   namiesto tieňa, tichá hlavička, nulové ružové plochy. Čísla sa čítajú ako
   účtenka - popis vľavo, bodkovaná vodiaca linka, mono tabuľková suma vpravo.
   Stĺpec zisku je na širokej obrazovke lepivý, takže výsledok stojí pred očami
   aj počas prekliknutia príchutí. Jediné farebné plochy sú zisk za 30 dní
   a dve akčné tlačidlá, ktoré si držia firemnú červenú zo základu.
   Inšpirácia: Baymard o sliderových rozhraniach (hodnota vždy pri slideri),
   rampstack.co „show your work“ ako dôverový signál kalkulačky, editoriálna
   sadzba s tabuľkovými číslicami (toastdesign.co.uk) a vlastný lepivý vzor
   webu .ox-suhrn / .ox-detail__galeria z temy/_zaklad.css. */
html[data-ox-kalk="uctenka"] #ox-kalk {
	--uct-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
	--uct-vodic: rgba(27, 27, 27, .3);
	max-width: 980px; margin-inline: auto; overflow: visible;   /* overflow visible = bez neho nefunguje sticky */
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-stredny); box-shadow: none;
}
/* poznámka pre hosťa je mimo karty; centrujeme ju, ale meriame na čítanie */
html[data-ox-kalk="uctenka"] .ox-kalk-pozn-host { max-width: min(980px, 72ch); margin-inline: auto; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__hlava {
	background: none; color: var(--sk-text); text-align: left;
	border-bottom: 1px solid var(--sk-linka);
	padding: clamp(20px, 2.4vw, 30px) clamp(18px, 3vw, 36px) clamp(16px, 2vw, 22px);
}
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__hlava .ox-h3 { color: var(--sk-text); font-size: clamp(22px, 2.4vw, 32px); }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__hlava p { color: var(--sk-text-tlmeny); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__telo { gap: clamp(22px, 3vw, 46px); align-items: start; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__zisk { position: sticky; top: calc(var(--ox-lista, 0px) + 96px); align-self: start; }
/* tiché editoriálne medzinadpisy namiesto červených Anton titulkov */
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__nadpis {
	font-family: var(--sk-font-text); font-size: 12px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--sk-text-tlmeny);
	border-bottom: 1px solid var(--sk-linka); padding-bottom: 6px; margin: 26px 0 12px;
}
/* základ dáva prvému nadpisu margin-top 0 rovnakou váhou, preto to tu zopakujeme presnejšie */
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__nadpis:first-child { margin-top: 0; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__zoznam { gap: 0; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__zoznam li { background: none; border-radius: 0; padding: 9px 0; border-bottom: 1px dotted var(--sk-linka); font-weight: 500; }
/* posledná položka nesmie zdvojiť linku s nasledujúcim medzinadpisom */
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__zoznam li:last-child { border-bottom: 0; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__select { border: 0; border-bottom: 1px solid var(--sk-linka); border-radius: 0; padding: 10px 28px 10px 0; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__vyber { background: none; border-left: 0; border-top: 1px solid var(--sk-linka); padding: 12px 0 0; color: var(--sk-text-tlmeny); }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__vyber b { color: var(--sk-text); }
/* cena setu ako riadok účtenky: popis vľavo, bodky, suma vpravo */
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__cena {
	flex-direction: row; align-items: baseline; gap: 10px; background: none;
	border-top: 1px solid var(--sk-linka); border-radius: 0; padding: 16px 0 0; text-align: left;
}
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__cena span { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; letter-spacing: .1em; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__cena span::after { content: ""; flex: 1 1 auto; border-bottom: 1px dotted var(--uct-vodic); transform: translateY(-.25em); }
html[data-ox-kalk="uctenka"] .ox-kalk #ox-kalk-set-cena { font-family: var(--uct-mono); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; color: var(--sk-text); font-variant-numeric: tabular-nums; }
html[data-ox-kalk="uctenka"] .ox-kalk #ox-kalk-kosik, html[data-ox-kalk="uctenka"] .ox-kalk #ox-kalk-start { border-radius: var(--sk-r-maly); margin-top: 16px; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__prihlas { border-top: 1px dotted var(--sk-linka); padding-top: 10px; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__pod { color: var(--sk-text-tlmeny); }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__slider .ox-label { color: var(--sk-text-tlmeny); letter-spacing: .12em; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__bunka { background: none; border: 0; border-bottom: 1px solid var(--sk-text); border-radius: 0; padding: 4px 6px; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__bunka input { font-family: var(--uct-mono); font-weight: 700; font-size: 22px; color: var(--sk-text); font-variant-numeric: tabular-nums; }
/* karta = trojriadková účtenka, popis do stĺpca 1, suma do stĺpca 2 */
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta {
	grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; align-items: baseline;
	gap: 4px 12px; padding: 14px 16px; text-align: left; background: none; border-radius: var(--sk-r-maly);
	box-shadow: none; border: 1px solid var(--sk-linka);
}
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta-nazov {
	grid-column: 1 / -1; grid-row: 1; font-family: var(--sk-font-text); font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--sk-text-tlmeny);
	border-bottom: 1px solid var(--sk-linka); padding-bottom: 8px; margin-bottom: 4px;
}
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta small {
	grid-column: 1; display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0;
	font-size: 13px; color: var(--sk-text-tlmeny);
}
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta small::after { content: ""; flex: 1 1 auto; border-bottom: 1px dotted var(--uct-vodic); transform: translateY(-.25em); }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta b {
	grid-column: 2; justify-self: end; font-family: var(--uct-mono); font-weight: 700;
	font-size: clamp(16px, 1.6vw, 20px); line-height: 1.15; color: var(--sk-text); font-variant-numeric: tabular-nums;
}
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta small:nth-of-type(1), html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta b:nth-of-type(1) { grid-row: 2; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta small:nth-of-type(2), html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta b:nth-of-type(2) { grid-row: 3; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta small:nth-of-type(3), html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta b:nth-of-type(3) { grid-row: 4; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta--trzby { background: none; }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karta--zisk { background: none; box-shadow: none; border-color: var(--sk-text); }
/* jediná farebná hodnota v tabuľke čísel */
html[data-ox-kalk="uctenka"] .ox-kalk #ox-kalk-zisk-30 { color: var(--sk-akcent-tmavy); font-size: clamp(24px, 2.6vw, 32px); }
/* strata: základ stlmí len cez rovnako silný selektor, preto tu pridávame triedu navyše */
html[data-ox-kalk="uctenka"] .ox-kalk.ox-kalk--strata .ox-kalk__karta--zisk b { color: var(--sk-text-tlmeny); }
html[data-ox-kalk="uctenka"] .ox-kalk.ox-kalk--strata .ox-kalk__karta--zisk { border-color: var(--sk-linka); }
html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__pozn { background: none; border-radius: 0; border-top: 1px solid var(--sk-linka); padding: 12px 0 0; }
@media (max-width: 1000px) {
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__telo { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__zisk { position: static; top: auto; border-top: 1px solid var(--sk-linka); padding-top: 22px; }
}
@media (max-width: 620px) {
	html[data-ox-kalk="uctenka"] #ox-kalk { border-left: 0; border-right: 0; border-radius: 0; }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__karty { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__rad { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__bunka { justify-items: start; }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__bunka input { text-align: left; }
	/* na úzkom displeji sa popis a suma nezmestia do jedného riadku, tak ich zlomíme */
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__cena { flex-wrap: wrap; }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__cena span { flex: 1 1 100%; }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__cena span::after { display: none; }
	html[data-ox-kalk="uctenka"] .ox-kalk .ox-kalk__hlava .ox-h3 { font-size: 22px; }
}

/* ---- katalog / cennik: Cenník ---- */
/* --- CENNÍK (katalog/cennik) -------------------------------------------------
   Mriežka sa preklopí do objednávkového hárku: jeden riadok = jeden produkt
   (náhľad 104 px, názov so stavovým štítkom, balenie a cena za porciu v mono,
   cena vpravo, stepper a košík na konci riadka). Zebra a vlasové linky namiesto
   tieňov, hlavička stĺpcov je poskladaná z ::before a ::after mriežky, takže
   24 položiek sa prečíta na jeden pohľad ako cenník, nie ako výklad.
   Inšpirácia: Baymard "Display Price Per Unit For Multiquantity Items",
   WooCommerce B2B Quick Order Grid, Barn2 grid/list view, SparkLayer B2B. */

/* Lišta s počtom a zoradením. Div nemá triedu a má inline štýl
   "gap:14px;margin-top:14px", preto sa tie dve vlastnosti musia prebiť
   cez !important. Zvyšok (rám, pozadie, padding) inline nie je, takže
   obyčajná špecifickosť stačí. */
html[data-ox-katalog="cennik"] .ox-wrap > div[style*="justify-content:space-between"][style*="margin-top:14px"] {
	margin-top: 20px !important; gap: 12px !important; padding: 9px 14px;
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-maly); background: var(--sk-krem);
}
html[data-ox-katalog="cennik"] .ox-wrap > div[style*="justify-content:space-between"][style*="margin-top:14px"] .ox-label {
	font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sk-text-tlmeny);
}
html[data-ox-katalog="cennik"] #ox-pocet { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--sk-text); }
/* select má inline "min-height:40px;padding:7px 12px", preto !important */
html[data-ox-katalog="cennik"] #ox-radenie.ox-select { min-height: 34px !important; padding: 5px 10px !important; font-size: 12.5px; border-radius: var(--sk-r-maly); }
html[data-ox-katalog="cennik"] #ox-znacky.ox-chipy, html[data-ox-katalog="cennik"] #ox-filtre.ox-chipy { border-radius: var(--sk-r-maly); }
html[data-ox-katalog="cennik"] #ox-znacky .ox-chip, html[data-ox-katalog="cennik"] #ox-filtre .ox-chip { border-radius: var(--sk-r-maly); }
html[data-ox-katalog="cennik"] #ox-znacky [data-pocet], html[data-ox-katalog="cennik"] #ox-filtre [data-pocet] { font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace; }
/* Poistka na kontrast: aktívny chip má v základe tmavé pozadie (--sk-text) a
   počet dedí bielu. Keby niektorá téma dedenie prebila tlmenou farbou, tu
   ostane biela na tmavej ploche. */
html[data-ox-katalog="cennik"] #ox-znacky .ox-chip[aria-pressed="true"] [data-pocet],
html[data-ox-katalog="cennik"] #ox-filtre .ox-chip[aria-pressed="true"] [data-pocet] { color: #fff; }

/* Hárok: jeden stĺpec, rám okolo celku, vnútri len vlasové linky. */
html[data-ox-katalog="cennik"] #ox-vysledky { margin-top: calc(var(--sk-rytmus) * -.4); }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
	grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--sk-povrch);
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-velky); overflow: hidden;
}
html[data-ox-katalog="cennik"] #ox-vysledky .ox-mriezka--4::before,
html[data-ox-katalog="cennik"] #ox-vysledky .ox-mriezka--4::after {
	grid-area: 1 / 1; padding: 9px 18px; color: var(--sk-text-tlmeny);
	font: 700 10px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
}
/* Vlasová linka pod hlavičkou ju odlíši od riadka pod kurzorom, ktorý má
   rovnaké krémové pozadie. */
html[data-ox-katalog="cennik"] #ox-vysledky .ox-mriezka--4::before {
	content: "Produkt / balenie"; justify-self: stretch;
	background: var(--sk-krem); box-shadow: inset 0 -1px 0 var(--sk-linka);
}
html[data-ox-katalog="cennik"] #ox-vysledky .ox-mriezka--4::after { content: "Cena bez DPH / do košíka"; justify-self: end; }

/* Riadok produktu. Stĺpce spolu 700 px (18 + 104 + 16 + 168 + 16 + 132 + 16
   + 196 + 18 vrátane medzier a vnútorného okraja), nad 1000 px sa vždy zmestia. */
html[data-ox-katalog="cennik"] #ox-vysledky .ox-karta.ox-produkt {
	display: grid; height: auto; align-items: center;
	grid-template-columns: 104px minmax(0, 1fr) 168px 132px 196px; gap: 0 16px;
	padding: 12px 18px; border-top: 1px solid var(--sk-linka); border-radius: 0; box-shadow: none;
}
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt:nth-child(even) { background: #FBF8F4; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt:hover { transform: none; background: var(--sk-krem); box-shadow: inset 3px 0 0 var(--sk-akcent); }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__nazov { color: var(--sk-text-tlmeny); }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__telo { display: contents; }

/* Náhľad: odkaz prestane byť kotvou pre štítky, preto ide obrázok do toku.
   Bez display:block by ostal riadkový a spodok fotky by odrezal overflow. */
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__foto {
	grid-column: 1; position: static; width: 104px; aspect-ratio: 4 / 3;
	border: 1px solid var(--sk-linka); border-radius: var(--sk-r-maly); overflow: hidden;
}
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__foto img { position: static; display: block; width: 100%; height: 100%; padding: 6%; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: none; }

/* Štítky sú v DOM vnútri odkazu s fotkou, ale kotvia sa na .ox-karta
   (tá je position:relative), takže ich overflow fotky neoreže. Pás držíme
   presne nad druhým stĺpcom: zľava 18 + 104 + 16 = 138 px, sprava
   18 + 196 + 16 + 132 + 16 + 168 + 16 = 562 px. */
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__stitky {
	top: auto; bottom: 12px; left: 138px; right: 562px; max-width: none;
	flex-direction: row; flex-wrap: wrap; gap: 5px;
}
/* .ox-odznak--tmavy aj --akcia majú v základe !important, preto ho tu
   musíme prebiť rovnakou zbraňou pri vyššej špecifickosti. */
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__stitky .ox-odznak {
	background: transparent !important; color: var(--sk-text-tlmeny) !important;
	box-shadow: inset 0 0 0 1px var(--sk-linka); padding: 2px 7px; border-radius: 3px;
	font-size: 10px; letter-spacing: .05em;
}
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tichy { color: var(--sk-akcent-tmavy) !important; box-shadow: inset 0 0 0 1px currentColor; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__stitky .ox-odznak--akcia { color: #7A5A06 !important; box-shadow: inset 0 0 0 1px currentColor; }

/* Bunky riadka. */
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__nazov {
	grid-column: 2; align-self: start; margin: 0; font-size: 15.5px; line-height: 1.3;
	overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__meta { grid-column: 3; margin: 0; color: var(--sk-text-tlmeny); font: 500 11.5px/1.45 'JetBrains Mono', ui-monospace, monospace; overflow-wrap: anywhere; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-cena {
	grid-column: 4; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px;
	align-self: stretch; border-left: 1px solid var(--sk-linka); padding-left: 16px; min-width: 0;
	font-size: 19px; line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; color: var(--sk-akcent-tmavy);
}
html[data-ox-katalog="cennik"] #ox-vysledky .ox-cena__dph { margin-left: 0; letter-spacing: .1em; text-transform: uppercase; font: 600 9.5px/1.3 'JetBrains Mono', ui-monospace, monospace; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-cena__stara { font-size: 11.5px; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-cena__zamok { flex-wrap: wrap; justify-content: flex-end; gap: 5px; padding: 0; background: transparent; font-size: 10.5px; line-height: 1.3; text-align: right; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-cena__zamok svg { flex: none; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__akcie { grid-column: 5; margin-top: 0; padding-top: 0; justify-content: flex-end; gap: 7px; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__akcie .ox-btn--maly { min-height: 34px; padding: 6px 12px; font-size: 11.5px; white-space: nowrap; }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__quick { border-radius: var(--sk-r-maly); }
html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__quick button { width: 28px; height: 32px; }
/* stránkovanie má inline "gap:7px;justify-content:center;margin-top:38px" */
html[data-ox-katalog="cennik"] #ox-vysledky > div[style*="margin-top:38px"] { justify-content: flex-end !important; gap: 5px !important; margin-top: 16px !important; }

@media (max-width: 1000px) {
	/* Tri stĺpce: náhľad, text, cena a košík pod sebou; štítky do pásu na päte riadka. */
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-karta.ox-produkt {
		grid-template-columns: 84px minmax(0, 1fr) auto; row-gap: 6px; padding: 12px 14px 38px;
	}
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__foto { grid-row: 1 / span 2; width: 84px; align-self: start; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__nazov { grid-column: 2; grid-row: 1; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__meta { grid-column: 2; grid-row: 2; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-cena { grid-column: 3; grid-row: 1; align-self: center; border-left: 0; padding-left: 0; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__akcie { grid-column: 3; grid-row: 2; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__stitky { left: 14px; right: 14px; bottom: 11px; max-width: none; }
}

@media (max-width: 620px) {
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-mriezka--4::after { display: none; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-karta.ox-produkt {
		grid-template-columns: 62px minmax(0, 1fr); gap: 0 12px; padding: 12px 14px 40px;
	}
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__foto { grid-row: 1 / span 3; width: 62px; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__nazov { grid-column: 2; grid-row: 1; font-size: 14.5px; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__meta { grid-column: 2; grid-row: 2; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-cena { grid-column: 2; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 8px; text-align: left; align-self: center; border-left: 0; padding-left: 0; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__akcie { grid-column: 1 / -1; grid-row: 4; justify-content: space-between; padding-top: 8px; }
	/* na dotyk vraciame väčšie terče, na úzkom riadku je na ne miesto */
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__akcie .ox-btn--maly { flex: 1 1 auto; min-height: 40px; }
	html[data-ox-katalog="cennik"] #ox-vysledky .ox-produkt__quick button { width: 34px; height: 38px; }
}

/* ---- katalog / doska: Doska ---- */
/* --- DOSKA (katalog/doska) ---------------------------------------------------
   Katalóg si sadá na tmavú červenú dosku webu (--ox-doska-cervena + tmavý závoj,
   aby biely text držal kontrast). Karty strácajú rám: žiadne biele plochy, len
   fotka vo svetelnom kuželi, biely Anton a mono cena. Mriežka ide na 6 stĺpcov
   s bento rytmom, ktorý sa opakuje po 12 kartách (1. plagát 3x2, 2. a 3. na
   šírku, ostatné po 2 bunky), poradové číslo dopisuje CSS counter.
   Inšpirácia: Awwwards E-Commerce a Editorial Layout (asymetrické bento, produkt
   ako javisko) + vlastná doska webu, varianty.css blok 116.

   POZOR na bránu #ox-obsah:has(#ox-vysledky): atribút data-ox-katalog visí na
   <html> a pri prepnutí trasy tam ostáva (rovnako ako data-ox-hlavicka,
   doplnky.js:1018). Bez brány by doska a biely text pretiekli na titulku, do
   košíka, pokladne aj registrácie, a .ox-label (33 výskytov, samé formuláre) by
   na bielom papieri zbelel. #ox-vysledky žije iba na /produkty, takže je to
   presná a lacná brána; :has() je v tomto projekte bežný (145 výskytov
   vo varianty.css, napr. #ox-obsah:has(&gt; .ox-show)). */

/* doska sa maľuje na #ox-obsah, nie na každú sekciu zvlášť: linear-gradient by sa
   v druhej sekcii spustil odznova a na rozhraní by vznikol viditeľný pás.
   Závoj je vrstva v background-image, nie inset box-shadow (ten sa kreslí per box
   a mal by ten istý problém so švom). */
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) {
	background-color: #3A0008;
	background-image:
		linear-gradient(rgba(8, 0, 2, .46), rgba(8, 0, 2, .46)),
		var(--ox-doska-cervena, linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%));
	color: #fff;
}
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) > .ox-sek:first-child { padding-block: var(--sk-rytmus) 0; }
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) > .ox-sek:last-child { padding-block: 24px var(--sk-rytmus); }
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) .ox-oko { color: rgba(255, 255, 255, .84); }
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) .ox-oko::before { background: #fff; }
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) .ox-h2 { color: #fff; }

/* čipy: svetlé obrysové pilulky, aktívna je plná biela s červeným textom.
   Prebíja sa .ox-chipy .ox-chip zo základu (varianty.css 5601 a ďalej). */
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) .ox-chipy { background: transparent; padding-inline: 0; }
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) a.ox-chip {
	background: transparent; color: rgba(255, 255, 255, .88);
	border: 1px solid rgba(255, 255, 255, .34);
}
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) a.ox-chip:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) a.ox-chip[aria-pressed="true"] { background: #fff; color: var(--sk-akcent-tmavy, #D60019); border-color: #fff; }
/* počet v čipe: bez opacity. Základ dáva pilulke na aktívnom čipe biele pozadie
   (varianty.css 5605) a to by na novom bielom čipe zmizlo; zosvetlená červená
   cez opacity padala na 3,2:1. Preto plné farby a priehľadné pozadie. */
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) a.ox-chip [data-pocet] {
	background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .92);
}
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) a.ox-chip[aria-pressed="true"] [data-pocet] {
	background: rgba(225, 0, 26, .12); color: var(--sk-akcent-tmavy, #D60019);
}

/* lišta s počtom a radením. Ten div nemá triedu a nesie inline style s
   margin-top, takže ho neprebije žiadny selektor, iba !important. Nie je to
   skratka okolo špecifickosti, iná cesta bez zásahu do markupu neexistuje. */
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) > .ox-sek:first-child .ox-wrap > div[style] {
	margin-top: 26px !important; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22);
}
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) #ox-pocet,
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) .ox-label {
	color: rgba(255, 255, 255, .84); font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}
html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) #ox-radenie {
	background: rgba(255, 255, 255, .1); color: #fff;
	border-color: rgba(255, 255, 255, .34); color-scheme: dark;
}

/* mriežka: 6 stĺpcov, bento rytmus po 12 kartách. Základ prepína .ox-mriezka--4
   na 2 stĺpce už od 1100 px (_zaklad.css 741), tento blok je špecifickejší,
   takže medzi 1001 a 1100 px platí bento. Karta cez 2 bunky zo 6 je tretina
   šírky, čiže aj pri 1000 px má okolo 330 px a akcie sa nepretečú. */
html[data-ox-katalog="doska"] #ox-vysledky .ox-mriezka--4 { counter-reset: oxk; gap: clamp(18px, 2.2vw, 30px); }
@media (min-width: 1001px) {
	html[data-ox-katalog="doska"] #ox-vysledky .ox-mriezka--4 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt { grid-column: span 2; }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 1) { grid-column: span 3; grid-row: span 2; }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 2),
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 3) { grid-column: span 3; }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 1) .ox-produkt__foto { aspect-ratio: auto; flex: 1 1 auto; min-height: 280px; }
	/* telo má zo základu flex: 1 1 auto (_zaklad.css 486); keby rástlo aj ono,
	   plagát by si voľnú výšku rozdelil s textom a prestal by byť plagátom */
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 1) .ox-produkt__telo { flex: 0 0 auto; }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 1) .ox-produkt__nazov { font-size: 27px; }
}

/* karta bez rámu, fotka vo svetelnom kuželi. Kužeľ ostáva neutrálny a takmer
   biely: katalógové fotky sú nafotené na bielej (_zaklad.css 473 to píše
   výslovne), krém či pastel by okolo každej fotky nakreslil biely obdĺžnik. */
html[data-ox-katalog="doska"] #ox-vysledky .ox-karta.ox-produkt {
	background: none; box-shadow: none; border-radius: 0; overflow: visible; counter-increment: oxk;
}
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:hover { box-shadow: none; }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__foto {
	background: radial-gradient(72% 62% at 50% 38%, #fff 0%, #FBF9F6 64%, #F1ECE6 100%);
	border-radius: var(--sk-r-velky);
	transition: box-shadow .25s var(--sk-prechod);
}
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__foto::after {
	content: counter(oxk, decimal-leading-zero); position: absolute; right: 12px; bottom: 10px;
	font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; color: rgba(27, 27, 27, .72);
}
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__stitky .ox-odznak {
	border-radius: 2px; padding: 5px 9px; letter-spacing: .14em;
	font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
}
html[data-ox-katalog="doska"] #ox-vysledky .ox-odznak--tichy { background: rgba(20, 4, 6, .88); color: #fff; }
/* vypredané: kartu NEstlmujeme cez opacity. Fotku už stlmuje základ
   (varianty.css 5580) a stlmená karta by sa násobila s .ox-btn:disabled
   (opacity .5, _zaklad.css 179): biely nápis Vypredané by skončil na 2,4:1. */
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__nazov a { color: rgba(255, 255, 255, .82); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__akcie .ox-btn:disabled {
	opacity: 1; background: transparent; color: rgba(255, 255, 255, .74); border-color: rgba(255, 255, 255, .28);
}

/* telo karty na tmavom: biely názov, mono cena */
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__telo { padding: 14px 4px 2px; gap: 6px; }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__nazov a { color: #fff; text-decoration: none; overflow-wrap: anywhere; }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__meta { color: rgba(255, 255, 255, .8); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-cena {
	color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 600; font-size: 19px;
}
/* 11 px text potrebuje viac ako 4,5:1 aj na najsvetlejšom mieste dosky */
html[data-ox-katalog="doska"] #ox-vysledky .ox-cena__dph { color: rgba(255, 255, 255, .84); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-cena__stara { color: rgba(255, 255, 255, .78); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-cena__zamok {
	background: transparent; border: 1px solid rgba(255, 255, 255, .34); color: rgba(255, 255, 255, .88);
}
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__akcie { padding-top: 12px; }
html[data-ox-katalog="doska"] #ox-vysledky .ox-btn--hlavne { background: #fff; color: var(--sk-akcent-tmavy, #D60019); border-color: #fff; }
html[data-ox-katalog="doska"] #ox-vysledky .ox-btn--obrys { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-btn--obrys:hover:not(:disabled) { background: #fff; color: #3A0008; }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__quick { background: transparent; border-color: rgba(255, 255, 255, .42); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__quick button,
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__quick output { color: #fff; }
html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__quick button:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* prázdny stav a stránkovanie (opäť div bez triedy s inline štýlom) */
html[data-ox-katalog="doska"] #ox-vysledky .ox-prazdne { color: rgba(255, 255, 255, .84); }
html[data-ox-katalog="doska"] #ox-vysledky .ox-prazdne .ox-h3 { color: #fff; }
html[data-ox-katalog="doska"] #ox-vysledky > div[style] { margin-top: 46px !important; }

@media (max-width: 1000px) {
	html[data-ox-katalog="doska"] #ox-vysledky .ox-mriezka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt { grid-column: auto; grid-row: auto; }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 1) { grid-column: 1 / -1; }
	html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) > .ox-sek:first-child .ox-wrap > div[style] { margin-top: 18px !important; }
}
@media (max-width: 620px) {
	html[data-ox-katalog="doska"] #ox-vysledky .ox-mriezka--4 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt:nth-child(12n + 1) { grid-column: auto; }
	html[data-ox-katalog="doska"] #ox-vysledky .ox-produkt__telo { padding: 12px 2px 0; }
	html[data-ox-katalog="doska"] #ox-obsah:has(#ox-vysledky) > .ox-sek:last-child { padding-block: 16px var(--sk-rytmus); }
}

/* ---- katalog / vitrina: Vitrína ---- */
/* --- VITRÍNA (katalog/vitrina) ------------------------------------------------
   Editoriálny opak tmavej dosky: biela strana, žiadne karty, iba fotky a sadzba.
   Tri stĺpce so zvislým posunom, fotky striedajú 4:5, 1:1 a 5:6, karta stráca
   tieň aj rádius a ostáva jej vlasová linka pod fotkou. Cena ide vpravo v mono
   na tú istú linku ako poradové číslo z counteru, filtre prestanú byť pilulky
   v podnose a stanú sa typografickým registrom s červenou podčiarknutou aktivitou.
   Inšpirácia: Awwwards editorial layout / trend „Archival Index“, Aesop a Grainne
   Morton z prehľadu wavespace 2026, hover-to-reveal z 21st.dev Product Reveal Card
   (dvíha sa len fotka a tenká linka, nie celá karta).
   Pozor pri úpravách: základ (assets/temy/_zaklad.css) dáva karte tieň a zdvih,
   fotke pomer 4:3, štítkom absolútnu pozíciu a tlačidlám plnú plochu, spinner
   a zakázaný stav. Všetko nižšie tieto pravidlá vedome prebíja presnejším
   selektorom, nie značkou !important. */

/* hlavička sekcie: mono očko, obrovský Anton */
html[data-ox-katalog="vitrina"] #ox-obsah > .ox-sek:first-child .ox-oko { font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; color: var(--sk-text-tlmeny); margin-bottom: 10px; }
html[data-ox-katalog="vitrina"] #ox-obsah > .ox-sek:first-child .ox-oko::before { width: 18px; height: 1px; }
html[data-ox-katalog="vitrina"] #ox-obsah > .ox-sek:first-child .ox-h2 { font-size: clamp(38px, 6.6vw, 88px); line-height: .98; margin: 12px 0 24px; overflow-wrap: anywhere; }

/* register namiesto piluliek: podnos preč, riadok verzálok, počty do horného indexu */
html[data-ox-katalog="vitrina"] #ox-znacky.ox-chipy,
html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy { display: flex; flex-wrap: wrap; background: none; border-radius: 0; padding: 0; gap: 2px 26px; margin: 0 0 4px; }
html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy { border-top: 1px solid var(--sk-linka); padding-top: 10px; margin-top: 10px; }
html[data-ox-katalog="vitrina"] #ox-znacky.ox-chipy .ox-chip,
html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy .ox-chip { align-items: flex-start; gap: 3px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 0; font: 700 12px/1.25 var(--sk-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
html[data-ox-katalog="vitrina"] #ox-znacky.ox-chipy .ox-chip:hover,
html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy .ox-chip:hover { background: none; color: var(--sk-text); border-bottom-color: var(--sk-linka); }
html[data-ox-katalog="vitrina"] #ox-znacky.ox-chipy .ox-chip[aria-pressed="true"],
html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy .ox-chip[aria-pressed="true"] { background: none; color: var(--sk-text); border-bottom-color: var(--sk-akcent); }
html[data-ox-katalog="vitrina"] #ox-znacky.ox-chipy .ox-chip .ox-text-tlmeny[data-pocet],
html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy .ox-chip .ox-text-tlmeny[data-pocet] { background: none; padding: 0; font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-text-tlmeny); }

/* lišta počtu a radenia: div bez triedy s inline štýlom margin-top:14px,
   preto sa margin musí prebiť značkou !important. Padding a linka ho v inline
   štýle nemajú, tam !important netreba. */
html[data-ox-katalog="vitrina"] #ox-obsah > .ox-sek:first-child .ox-wrap > div[style] { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--sk-linka); }
html[data-ox-katalog="vitrina"] #ox-pocet,
html[data-ox-katalog="vitrina"] #ox-obsah > .ox-sek:first-child .ox-pole .ox-label { font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
/* select má inline min-height:40px a padding:7px 12px, tie sa inak prebiť nedajú */
html[data-ox-katalog="vitrina"] #ox-radenie.ox-select { min-height: 34px !important; padding: 4px 4px 4px 0 !important; border: 0; border-bottom: 1px solid var(--sk-text); border-radius: 0; background: none; font: 700 12px/1 var(--sk-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-text); }

/* mriežka: tri stĺpce, kurátorský posun druhého a tretieho, counter pre číslovanie */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; column-gap: clamp(20px, 3.2vw, 52px); row-gap: clamp(40px, 5vw, 80px); counter-reset: ox-vitrina; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(3n+2) { margin-top: clamp(24px, 4vw, 62px); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(3n+3) { margin-top: clamp(46px, 8vw, 118px); }

/* karta stráca plochu: bez tieňa, bez rádiusu, bez zdvihu celku */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-karta.ox-produkt { height: auto; background: none; border-radius: 0; box-shadow: none; overflow: visible; counter-increment: ox-vitrina; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-karta.ox-produkt:hover { transform: none; box-shadow: none; }

/* fotky striedajú pomery, pri prejdení sa dvíha iba fotka */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__foto { transition: transform .5s var(--sk-prechod); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(3n+1) .ox-produkt__foto { aspect-ratio: 4 / 5; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(3n+2) .ox-produkt__foto { aspect-ratio: 1 / 1; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(3n+3) .ox-produkt__foto { aspect-ratio: 5 / 6; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__foto img { padding: 5% 7%; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto { transform: translateY(-8px); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: none; }

/* odznaky ako tiché mono popisky, nie farebné pilulky. Štítky ostávajú podľa
   základu absolútne v ráme fotky, preto ich kotvíme k spodnej hrane, kde fotka
   vďaka vnútornému okraju drží bielu plochu, a text poistíme bielym žiarením
   pre prípad tmavšieho záberu. */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__stitky { top: auto; bottom: 6px; left: 0; right: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding-right: 6px; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-odznak,
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-odznak--tichy,
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-odznak--tmavy { background: none !important; color: var(--sk-text-tlmeny) !important; padding: 0; border-radius: 0; font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-shadow: 0 0 5px #fff, 0 0 2px #fff; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-odznak--akcia { background: none !important; color: var(--sk-akcent-tmavy); padding: 0; border-radius: 0; font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-shadow: 0 0 5px #fff, 0 0 2px #fff; }

/* vlasová linka pod fotkou, pri prejdení sčervenie */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__telo { padding: 12px 0 0; gap: 5px; border-top: 1px solid var(--sk-linka); transition: border-color .3s var(--sk-prechod); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:hover .ox-produkt__telo { border-top-color: var(--sk-akcent); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__nazov { font-size: clamp(20px, 1.7vw, 27px); line-height: 1.06; overflow-wrap: anywhere; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__nazov a { color: var(--sk-text); text-decoration: none; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__nazov a { color: var(--sk-text-tlmeny); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__meta { margin: 2px 0 0; font: 500 12px/1.45 var(--sk-font-text); color: var(--sk-text-tlmeny); }

/* linka ceny: vľavo poradové číslo z counteru, vpravo cena v mono.
   Číslo je poradie na zobrazenej strane, nie v celom katalógu: CSS counter
   o stránkovaní nevie a bez zásahu do JS to inak spraviť nejde. */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-cena { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--sk-linka); font: 600 15px/1.2 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-akcent-tmavy); gap: 8px; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-cena::before { content: counter(ox-vitrina, decimal-leading-zero); margin-right: auto; font-size: 11px; letter-spacing: .12em; color: var(--sk-text-tlmeny); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-cena__dph { margin-left: 0; font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-cena__stara { font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-cena__zamok { background: none; border-radius: 0; padding: 0; font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }

/* akcie: textové tlačidlá s podčiarknutím, Do košíka je vidno stále aj na dotyku */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie { padding-top: 12px; gap: 14px; align-items: center; flex-wrap: wrap; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--plne { width: auto; flex: 0 0 auto; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--maly { min-height: 30px; padding: 4px 0; font-size: 11.5px; letter-spacing: .14em; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne,
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--obrys { background: none; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; box-shadow: none; color: var(--sk-akcent-tmavy); }
/* základ dvíha každé tlačidlo o 2 px, tu sa dvíha len fotka, preto skok rušíme
   a spätnú väzbu dáva farba */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn:hover:not(:disabled),
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn:active:not(:disabled) { transform: none; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne:hover:not(:disabled),
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--obrys:hover:not(:disabled) { background: none; color: var(--sk-akcent); border-bottom-color: var(--sk-akcent); }
/* zakázané Vypredané: základ mu dáva opacity .5, čo z tlmenej šedej spraví
   2,1:1 na bielej. Plnú krytosť vraciame, tlmenosť nesie farba textu (5,9:1). */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--obrys[disabled] { opacity: 1; color: var(--sk-text-tlmeny); border-bottom-color: var(--sk-linka); }
/* spinner základu je biely (border rgba(255,255,255,.45) a #fff) a text sa
   skryje cez color:transparent !important, takže na priehľadnom tlačidle na
   bielej ploche by pridávanie do košíka nebolo vidno vôbec */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--nacitava::after { width: 14px; height: 14px; border-color: rgba(214, 0, 25, .3); border-top-color: var(--sk-akcent-tmavy); }
/* zelené potvrdenie po pridaní má z .ox-btn--maly nulový bočný padding, plocha
   by sa lepila na text */
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__akcie .ox-btn--hotovo { padding: 4px 10px; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__quick { background: none; border: 1px solid var(--sk-linka); border-radius: 0; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__quick button { width: 26px; height: 28px; }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__quick output { width: 24px; font-size: 12.5px; }

/* stránkovanie: div bez triedy s inline justify-content, gap a margin-top,
   preto tu !important naozaj treba. Prázdny stav ide do ľava ako register. */
html[data-ox-katalog="vitrina"] #ox-vysledky > div[style] { justify-content: flex-start !important; gap: 0 22px !important; margin-top: clamp(44px, 6vw, 76px) !important; }
html[data-ox-katalog="vitrina"] #ox-vysledky > div[style] .ox-chip { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 4px 0; font: 600 12.5px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-text-tlmeny); }
html[data-ox-katalog="vitrina"] #ox-vysledky > div[style] .ox-chip:hover { background: none; color: var(--sk-text); border-bottom-color: var(--sk-linka); }
html[data-ox-katalog="vitrina"] #ox-vysledky > div[style] .ox-chip[aria-pressed="true"] { background: none; color: var(--sk-text); border-bottom-color: var(--sk-akcent); }
html[data-ox-katalog="vitrina"] #ox-vysledky .ox-prazdne { padding: clamp(30px, 5vw, 58px) 0; border-top: 1px solid var(--sk-linka); text-align: left; }

/* zarážka sedí na základe (_zaklad.css prepína .ox-mriezka--4 na dva stĺpce pod
   1100 px), aby vitrína na 13" notebooku nedržala tri úzke stĺpce sama proti webu */
@media (max-width: 1100px) {
	/* dva stĺpce: rytmus drží párny stĺpec, pomery sa striedajú po dvoch */
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(32px, 5vw, 56px); }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(2n+1) { margin-top: 0; }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(2n) { margin-top: clamp(22px, 5vw, 46px); }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(2n+1) .ox-produkt__foto { aspect-ratio: 4 / 5; }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(2n) .ox-produkt__foto { aspect-ratio: 1 / 1; }
	html[data-ox-katalog="vitrina"] #ox-znacky.ox-chipy,
	html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy { gap: 2px 18px; }
}

@media (max-width: 620px) {
	/* jeden stĺpec, žiadny posun, štvorcová fotka a menší nadpis */
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(n) { margin-top: 0; }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:nth-child(n) .ox-produkt__foto { aspect-ratio: 1 / 1; }
	html[data-ox-katalog="vitrina"] #ox-obsah > .ox-sek:first-child .ox-h2 { font-size: clamp(30px, 9.5vw, 46px); }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__nazov { font-size: 22px; }
	html[data-ox-katalog="vitrina"] #ox-znacky.ox-chipy,
	html[data-ox-katalog="vitrina"] #ox-filtre.ox-chipy { gap: 2px 14px; }
}

/* vypnutý pohyb: nič sa nedvíha ani neprechádza (rovnaká poistka ako inde na webe) */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__foto,
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt__telo { transition: none; }
	html[data-ox-katalog="vitrina"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto { transform: none; }
}

/* ---- kosik / doklad: Doklad ---- */
/* --- DOKLAD (kosik/doklad) ---------------------------------------------------
   Košík ako veľkoobchodný dodací list na krémovom papieri: hárok s tieňom,
   položky s vlasovými linkami a monospace kódmi, súhrn ako odtrhnutý účtenkový
   chvost s perforáciou a vodiacimi bodkami. Červená ostáva len na sumách a na
   tlačidle. Inšpirácia: Awwwards e-commerce brutalist carts, účtenková editorial
   typografia (Oatly), Baymard (všetky náklady vidno už v košíku).
   Overené proti markupu v pohlady.js (kosik + suhrnHtml + dopravaZadarmoLista),
   proti základu v temy/_zaklad.css a proti bloku 23 v varianty.css (téma 21). */
html[data-ox-kosik="doklad"] #ox-kosik-obsah {
	--dok-list: var(--sk-krem); --dok-papier: var(--sk-biela); --dok-linka: rgba(27, 27, 27, .28);
	--dok-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--dok-list); border-top: 3px solid var(--sk-text); margin-top: 16px;
	border-radius: 0 0 var(--sk-r-maly) var(--sk-r-maly); padding: clamp(16px, 2.6vw, 38px);
	box-shadow: var(--sk-tien), var(--sk-obrys);
}
/* hlavička dokladu; nadpis H1 je súrodenec pred hárkom, takže sa nedá zasiahnuť */
html[data-ox-kosik="doklad"] #ox-kosik-obsah::before {
	content: 'Predbežný doklad · OXO B2B'; display: block;
	font: 600 11.5px/1.4 var(--dok-mono); letter-spacing: .18em; text-transform: uppercase;
	color: var(--sk-text-tlmeny); padding-bottom: 12px; border-bottom: 1px solid var(--dok-linka);
}
/* !important je tu jediná možnosť: rozloženie má v markupe inline style="margin-top:22px",
   inline zápis neprebije žiadny, ani najpresnejší selektor */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-kosik-rozlozenie {
	margin-top: 0 !important; gap: clamp(18px, 2.6vw, 40px);
	grid-template-columns: minmax(0, 1.9fr) minmax(270px, .85fr);
}
/* položky = riadky dokladu s miniatúrou, kódom a jednotkovou cenou */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok {
	grid-template-columns: clamp(46px, 5vw, 62px) minmax(0, 1fr) auto; gap: clamp(12px, 1.6vw, 20px);
	padding-block: 14px; align-items: start; border-bottom: 1px dashed var(--dok-linka);
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok:first-child { border-top: 1px solid var(--sk-text); }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok__foto {
	width: clamp(46px, 5vw, 62px); height: clamp(46px, 5vw, 62px); border-radius: 3px;
	background: var(--dok-papier); box-shadow: 0 0 0 1px var(--dok-linka);
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok__nazov {
	font: 400 clamp(15px, 1.4vw, 19px)/1.25 var(--sk-font-nadpis);
	text-transform: uppercase; letter-spacing: .015em; color: var(--sk-text);
}
/* meta je <p>, základ mu necháva p { margin: 0 0 1em } a vzniká diera pod kódom */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok__meta {
	font: 400 12px/1.5 var(--dok-mono); letter-spacing: .04em;
	text-transform: uppercase; color: var(--sk-text-tlmeny); margin: 3px 0 0;
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok__cena {
	font: 600 clamp(16px, 1.6vw, 20px)/1.2 var(--dok-mono);
	font-variant-numeric: tabular-nums; color: var(--sk-akcent-tmavy); padding-top: 2px;
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-mnozstvo { border-radius: 3px; border-color: var(--dok-linka); background: var(--dok-papier); }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-mnozstvo button { width: 32px; height: 32px; font-size: 15px; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-mnozstvo input { width: 44px; height: 32px; font-family: var(--dok-mono); font-variant-numeric: tabular-nums; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok .ox-btn--tiche {
	border: 0; box-shadow: none; background: none; padding: 0 2px; min-height: 32px;
	font: 400 11.5px/1 var(--dok-mono); letter-spacing: .1em; text-transform: uppercase;
	color: var(--sk-text-tlmeny); text-decoration: underline;
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok .ox-btn--tiche:hover { color: var(--sk-akcent-tmavy); }

/* kupón ako políčko na doklade */
html[data-ox-kosik="doklad"] #ox-kosik-obsah #ox-kupon {
	border-radius: 3px; border-color: var(--dok-linka); background: var(--dok-papier);
	font-family: var(--dok-mono); text-transform: uppercase; letter-spacing: .08em;
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah #ox-kupon-btn { border-radius: 3px; font: 600 12px/1 var(--dok-mono); letter-spacing: .12em; text-transform: uppercase; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-text-tlmeny { font: 400 12px/1.5 var(--dok-mono); letter-spacing: .04em; }

/* súhrn = odtrhnutý účtenkový chvost, perforácia hore aj dole je v pozadí */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn {
	border-radius: 0; padding: clamp(22px, 2.2vw, 30px) clamp(16px, 1.8vw, 24px);
	background-color: var(--dok-papier);
	background-image: radial-gradient(circle, var(--dok-list) 5px, transparent 5.5px),
		radial-gradient(circle, var(--dok-list) 5px, transparent 5.5px);
	background-size: 16px 16px, 16px 16px; background-repeat: repeat-x, repeat-x;
	background-position: 0 -8px, 0 calc(100% + 8px);
	box-shadow: var(--sk-tien-karta);
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn .ox-h3 {
	font: 600 11.5px/1 var(--dok-mono); letter-spacing: .2em; text-transform: uppercase;
	text-align: center; color: var(--sk-text-tlmeny); margin: 0 0 12px; padding-bottom: 12px;
	border-bottom: 1px solid var(--sk-text);
}
/* vodiace bodky: linka je na pozadí riadku, oba spany ju zamaskujú papierom */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__riadok {
	align-items: baseline; font-family: var(--dok-mono); font-size: 12.5px;
	font-variant-numeric: tabular-nums; padding: 7px 0;
	background-image: radial-gradient(circle, rgba(27, 27, 27, .42) 1px, transparent 1.2px);
	background-size: 7px 2px; background-repeat: repeat-x; background-position: 0 calc(50% + 3px);
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__riadok > span { background: var(--dok-papier); }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__riadok--tlmeny { padding-right: 7px; text-transform: uppercase; letter-spacing: .05em; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__riadok > span:last-child { padding-left: 7px; font-weight: 600; color: var(--sk-text); }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__rozpis { border-top-color: var(--dok-linka); }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__spolu { border-top: 2px solid var(--sk-text); margin-top: 14px; padding-top: 14px; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__spolu span { font: 600 11.5px/1 var(--dok-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sk-text); }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn__spolu b { font: 600 clamp(24px, 2.2vw, 32px)/1 var(--dok-mono); font-variant-numeric: tabular-nums; color: var(--sk-akcent-tmavy); }
/* pás dopravy zadarmo: základ mu dáva display: grid, čím prebije atribút hidden,
   takže bez tejto poistky by na doklade svietil prázdny čiarkovaný rámček */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-dz { border-radius: 0; background: none; border: 1px dashed var(--dok-linka); font: 400 12px/1.45 var(--dok-mono); margin-top: 16px; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-dz[hidden] { display: none; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-dz__pas { border-radius: 0; height: 5px; background: rgba(27, 27, 27, .1); }
/* zelená zo základu má na papieri len 4.2:1, tmavší odtieň dáva 6.2:1 */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-dz__ok { color: #157026; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-btn--velke.ox-btn--plne {
	border-radius: 3px; font: 600 14px/1 var(--dok-mono); letter-spacing: .1em;
	text-transform: uppercase; min-height: 54px; box-shadow: var(--sk-btn-tien);
}
/* prázdny stav aj načítavanie hovoria rovnakým jazykom dokladu */
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-prazdne {
	border: 1px dashed var(--dok-linka); background: var(--dok-papier); font-family: var(--dok-mono); margin-top: 16px;
}
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-prazdne__ikona { opacity: .55; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-prazdne .ox-h3 { font-family: var(--sk-font-nadpis); text-transform: uppercase; letter-spacing: .02em; color: var(--sk-text); }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-prazdne .ox-btn--hlavne { border-radius: 3px; font-family: var(--dok-mono); letter-spacing: .08em; text-transform: uppercase; }
html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-nacitanie__bod { border-radius: 2px; }

/* 1100 px, nie 1000: základ zlamuje rozloženie košíka práve tu a naše pravidlo
   má vyššiu špecifickosť, takže pri 1000 px by dvojstĺpec držal aj tam, kde ho
   základ už dávno zložil */
@media (max-width: 1100px) {
	html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-kosik-rozlozenie { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-suhrn { position: static; }
}
@media (max-width: 620px) {
	html[data-ox-kosik="doklad"] #ox-kosik-obsah { padding: 14px; }
	html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok {
		grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: 'foto telo' 'cena cena'; gap: 12px;
	}
	html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok__foto { grid-area: foto; width: 46px; height: 46px; }
	html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok__telo { grid-area: telo; }
	html[data-ox-kosik="doklad"] #ox-kosik-obsah .ox-riadok__cena { grid-area: cena; text-align: right; padding-top: 8px; border-top: 1px dotted var(--dok-linka); }
	html[data-ox-kosik="doklad"] #ox-kosik-obsah #ox-kupon { flex: 1 1 160px; min-width: 0; }
}

/* ---- kosik / doska: Tmavá doska ---- */
/* --- 123) KOŠÍK „Tmavá doska“ (kosik/doska) -----------------------------------
   Obsah košíka sadne na veľkú zaoblenú tmavočervenú dosku (--ox-doska-cervena)
   a položky sa z dlhého zoznamu menia na bento dlaždice v dvoch stĺpcoch.
   Kupón aj poznámka o kódoch idú cez celú šírku ľavej mriežky ako samostatný
   tmavý panel, súhrn je sklenená karta s veľkým Anton súčtom a fotka dostane
   biely tanierik, aby tmavá plocha nezožrala tvar pohára.
   KONTRAST: holý biely text priamo na doske vychádza len 4,43:1 (najsvetlejší
   bod prechodu je #EB1B33), preto KAŽDÝ text leží na vlastnom tmavom závoji
   rgba(0,0,0,.38) alebo rgba(0,0,0,.46), kde biela drží 9:1 a biela na 78 %
   okolo 6:1. Nič nespolieha na to, že doska je práve v tmavej časti.
   ŠPECIFICKOSŤ: `!important` je tu tri razy a vždy len proti INLINE atribútu
   style= z pohlady.js (margin-top:22px na .ox-kosik-rozlozenie a dva razy
   max-width:240px na #ox-kupon), ktorý sa presnejším selektorom prebiť nedá.
   Proti bežným pravidlám základu sa nikde nepoužíva, tam stačí špecifickosť.
   Inšpirácia: bento téma 21c-bento a tiché luxusné tmavé plochy. */
html[data-ox-kosik="doska"] #ox-kosik-obsah {
	background: var(--ox-doska-cervena, linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%));
	border-radius: clamp(20px, 2.6vw, 34px);
	padding: clamp(16px, 2.6vw, 38px);
	margin-top: 18px;
	box-shadow: 0 30px 70px rgba(58, 0, 8, .3);
}
/* inline style="margin-top:22px" sa dá prebiť iba cez !important */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-kosik-rozlozenie {
	margin-top: 0 !important;
	grid-template-columns: minmax(0, 1.6fr) minmax(290px, .95fr);
}
/* ľavý stĺpec je holý <div> bez triedy, preto ide cez :first-child */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-kosik-rozlozenie > div:first-child {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 18px); align-content: start;
}
/* kupónový riadok a poznámka o uplatnených kódoch sú súrodenci dlaždíc;
   dostávajú rovnaký závoj ako dlaždice, inak by ich text ležal holý na doske */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-kosik-rozlozenie > div:first-child > :not(.ox-riadok) {
	grid-column: 1 / -1;
	background: rgba(0, 0, 0, .38);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: clamp(16px, 1.8vw, 24px);
	padding: clamp(12px, 1.4vw, 18px);
}

/* dlaždica položky */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok {
	grid-template-columns: minmax(0, 1fr); grid-template-areas: 'foto' 'telo' 'cena';
	gap: 14px; padding: clamp(12px, 1.4vw, 18px); border-bottom: 0;
	background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .14);
	border-radius: clamp(16px, 1.8vw, 24px); align-items: start;
	transition: background .28s var(--sk-prechod), transform .28s var(--sk-prechod);
}
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok:hover { background: rgba(0, 0, 0, .48); transform: translateY(-3px); }
/* biely tanierik pod pohárom */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__foto {
	grid-area: foto; width: 100%; height: clamp(116px, 13vw, 168px);
	display: grid; place-items: center; background: var(--sk-biela);
	border-radius: clamp(12px, 1.4vw, 18px); box-shadow: none;
}
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__foto img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__telo { grid-area: telo; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__nazov { color: #fff; font-size: clamp(16px, 1.3vw, 20px); }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__meta { color: rgba(255, 255, 255, .78); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__cena {
	grid-area: cena; justify-self: end; text-align: right; color: #fff;
	font-size: clamp(19px, 1.7vw, 26px);
}
/* pozadie má základ (--sk-biela), tu ide len o zmiznutý obrys na tmavom */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-mnozstvo { border-color: transparent; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok .ox-btn--tiche { color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .34); }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok .ox-btn--tiche:hover { color: #fff; border-color: #fff; }

/* kupón: vstup rastie s panelom, strop drží riadok čitateľný na širokom monitore */
html[data-ox-kosik="doska"] #ox-kosik-obsah #ox-kupon {
	flex: 1 1 220px; max-width: 420px !important;
	background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .30); color: #fff;
}
html[data-ox-kosik="doska"] #ox-kosik-obsah #ox-kupon::placeholder { color: rgba(255, 255, 255, .78); }
/* základ dáva fokusu červený obrys a takmer neviditeľný červený prstenec,
   na tmavej doske by sa stratil, preto biely */
html[data-ox-kosik="doska"] #ox-kosik-obsah #ox-kupon:focus {
	outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .38);
}
html[data-ox-kosik="doska"] #ox-kosik-obsah #ox-kupon-btn { border-color: #fff; color: #fff; background: transparent; }
html[data-ox-kosik="doska"] #ox-kosik-obsah #ox-kupon-btn:hover { background: #fff; color: var(--sk-akcent-tmavy); }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-text-tlmeny { color: rgba(255, 255, 255, .86); }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-text-tlmeny b { color: #fff; }

/* sklenená karta súhrnu */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-suhrn {
	background: rgba(0, 0, 0, .46); border: 1px solid rgba(255, 255, 255, .18);
	border-radius: clamp(16px, 1.8vw, 24px); box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
	backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: #fff;
}
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-suhrn .ox-h3 { color: #fff; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-suhrn__riadok { color: #fff; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-suhrn__riadok--tlmeny { color: rgba(255, 255, 255, .78); }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-suhrn__spolu { border-top-color: rgba(255, 255, 255, .34); flex-wrap: wrap; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-suhrn__spolu b {
	color: #fff; font-family: var(--sk-font-nadpis);
	font-size: clamp(30px, 3vw, 42px); line-height: 1; overflow-wrap: anywhere;
}
/* biele tlačidlo s červeným textom, nie červené na červenom */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-btn--hlavne { background: #fff; color: var(--sk-akcent-tmavy); box-shadow: 0 10px 24px rgba(0, 0, 0, .26); }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-btn--hlavne:hover { background: var(--sk-krem); color: var(--sk-akcent-tmavy); }

/* doprava zadarmo v tmavej karte */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-dz { background: rgba(255, 255, 255, .13); color: #fff; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-dz b { color: #fff; }
/* zelené hlásenie je tiež <b>, potrebuje presnejší selektor než .ox-dz b */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-dz b.ox-dz__ok { color: #8FE9A3; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-dz__pas { background: rgba(255, 255, 255, .24); }
/* základ má červenú výplň, tá je na tmavom tmavšia než vlastná dráha */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-dz__pas i { background: linear-gradient(90deg, var(--sk-ruz), #fff); }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-dz small { color: rgba(255, 255, 255, .78); }

/* prázdny košík a načítavanie na doske */
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-prazdne {
	background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .14);
	border-radius: clamp(16px, 1.8vw, 24px); color: rgba(255, 255, 255, .86);
}
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-prazdne .ox-h3 { color: #fff; }
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-prazdne__ikona {
	width: 104px; height: 104px; margin: 0 auto 18px; display: grid; place-items: center;
	background-color: var(--sk-biela); border-radius: var(--sk-r-pilulka);
}
html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-nacitanie__bod { background: #fff; }

/* základ zlamuje .ox-kosik-rozlozenie do jedného stĺpca už pri 1100 px,
   tento blok má vyššiu špecifickosť, takže sa musí zlomiť na tom istom bode */
@media (max-width: 1100px) {
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-kosik-rozlozenie { grid-template-columns: 1fr; }
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-suhrn { position: static; }
}
@media (max-width: 620px) {
	html[data-ox-kosik="doska"] #ox-kosik-obsah { padding: 14px; border-radius: 18px; }
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-kosik-rozlozenie > div:first-child { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: 'foto telo' 'cena cena'; align-items: center; }
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__foto { width: 96px; height: 96px; }
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok__cena { justify-self: start; text-align: left; }
	html[data-ox-kosik="doska"] #ox-kosik-obsah #ox-kupon { max-width: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok { transition: none; }
	html[data-ox-kosik="doska"] #ox-kosik-obsah .ox-riadok:hover { transform: none; }
}

/* ---- kosik / pult: Pult ---- */
/* --- 121) PULT (kosik/pult) -------------------------------------------------
   Hustá pracovná verzia košíka: riadok je takmer tabuľka (foto 56 px, názov,
   jednotková cena v meta, stepper vpravo, suma v poslednom stĺpci na
   tabuľkových čísliciach), aby sa na jednu obrazovku zmestilo desať a viac
   položiek, ako to veľkoobchodný nákup naozaj potrebuje. Telo riadku sa
   rozpúšťa cez display:contents, takže stepper aj suma sú vlastné stĺpce.
   Súhrn je pokojná lišta vpravo: navrchu pás dopravy zadarmo (v markupe je až
   za súčtom, preto poradie cez flex order), pod ním rozpis, dole tlačidlo.
   Pod 1000 px sa tlačidlo odlepí do palcovej zóny ako fixná spodná lišta.
   Farba ostáva len na celkovej sume a na tlačidle, zvyšok sú vlasové linky.

   Pozn. k farbám: povrch súhrnu je var(--sk-povrch), ktorý je #ffffff vo
   všetkých témach, preto je na ňom text pribitý na var(--sk-atrament). Bez
   toho by téma 07-fluid (--sk-text: #ffffff) dala biely text na bielu kartu.
   Prejazd myšou po riadku používa var(--sk-linka), lebo --sk-bg-2 je v živej
   téme 21g3-noirg3 zhodné s --sk-bg a prejazd by nebolo vidno.

   Inšpirácia: shadcn.io "Checkout with persistent summary" a ReUI
   shopping-cart (lepkavý sumárny rail), 21st.dev "Product Cards and Checkout"
   (úprava množstva priamo v riadku), SparkLayer B2B UX guide (hustota
   riadkov), sticky CTA z prehľadov checkout UX 2026. */

html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok {
	grid-template-columns: 56px minmax(0, 1fr) auto auto;
	grid-template-rows: auto auto;
	grid-template-areas: none;
	column-gap: 14px; row-gap: 0;
	padding: 10px 12px; margin-inline: -12px;
	border-bottom: 1px solid var(--sk-linka);
	transition: background var(--sk-prechod);
}
/* --sk-linka je poloprehľadná, takže tón sadne na svetlú aj tmavú zem */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok:hover { background: var(--sk-linka); }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__foto {
	width: 56px; height: 56px; grid-column: 1; grid-row: 1 / 3;
	border-radius: var(--sk-r-maly);
}
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__telo { display: contents; }
/* foto spanuje obe riadky, preto by zdedené align-items:center roztiahlo
   názov a meta od seba; prilepíme ich k spoločnej deliacej čiare */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__nazov {
	grid-column: 2; grid-row: 1; align-self: end; margin: 0;
	font-family: var(--sk-font-text); font-weight: 700; font-size: 14.5px;
	line-height: 1.3; letter-spacing: 0; text-transform: none;
}
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__meta {
	grid-column: 2; grid-row: 2; align-self: start;
	font-size: 11.5px; letter-spacing: .04em;
}
/* holý div so stepperom a "Odstrániť" - inline štýly sa dajú prebiť len !important */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__telo > div {
	grid-column: 3; grid-row: 1 / 3; justify-self: end;
	margin: 0 !important; gap: 8px !important;
}
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-mnozstvo { border-radius: var(--sk-r-maly); }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-mnozstvo button { width: 30px; height: 30px; font-size: 15px; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-mnozstvo input { width: 42px; height: 30px; font-size: 13.5px; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok .ox-btn--tiche.ox-btn--maly { font-size: 11.5px; letter-spacing: .08em; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__cena {
	grid-column: 4; grid-row: 1 / 3; align-self: center; min-width: 92px;
	font-family: var(--sk-font-text); font-weight: 700; font-size: 15px;
	font-variant-numeric: tabular-nums; color: var(--sk-text); text-align: right;
}

/* riadok kupónu (holý div za položkami) */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-kosik-rozlozenie > div:first-child > div:not(.ox-riadok) {
	margin-top: 18px !important; gap: 8px !important;
}
html[data-ox-kosik="pult"] #ox-kosik-obsah #ox-kupon { max-width: 190px !important; min-height: 42px; }
html[data-ox-kosik="pult"] #ox-kosik-obsah #ox-kupon-btn { min-height: 42px; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-text-tlmeny { font-size: 12.5px; }

/* súhrn ako pokojný pult: poradie detí cez order, pás dopravy hore.
   --sk-povrch je biely v každej téme, preto je text pribitý na atrament. */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn {
	display: flex; flex-direction: column;
	background: var(--sk-povrch); color: var(--sk-atrament);
	border: 1px solid rgba(27, 27, 27, .14);
	box-shadow: none; border-radius: var(--sk-r-stredny);
	padding: 18px 20px; top: calc(var(--ox-lista) + 84px);
}
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn .ox-dz {
	order: 1; margin: 0 0 12px; padding: 10px 12px;
	background: var(--sk-krem); color: var(--sk-atrament);
	border: 1px solid rgba(27, 27, 27, .14);
	border-radius: var(--sk-r-maly); font-size: 12.5px;
}
/* základ dáva .ox-dz display:grid, čím prebije UA pravidlo pre [hidden] */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-dz[hidden] { display: none; }
/* 5,8:1 na kréme; základné #1F8F30 má na bielej len 4,2:1 */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-dz__ok { color: #15702A; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-dz small { color: rgba(27, 27, 27, .62); }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn .ox-h3 { order: 2; font-size: 15px; margin: 2px 0 6px; color: var(--sk-atrament); }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn .ox-suhrn__riadok { order: 3; padding: 5px 0; font-size: 13.5px; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn__riadok > span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
/* --sk-text-tlmeny je v tmavých témach takmer biely, na bielom súhrne by zmizol */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn .ox-suhrn__riadok--tlmeny {
	color: rgba(27, 27, 27, .62);
	font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400;
}
/* rozpis podľa prevádzok vykresľuje len pokladňa, v košíku je pravidlo nečinné */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn__rozpis { order: 4; margin: 6px 0 0; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn__spolu {
	order: 5; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(27, 27, 27, .14);
}
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn__spolu b {
	font-family: var(--sk-font-text); font-weight: 800;
	font-size: clamp(26px, 2.2vw, 32px); font-variant-numeric: tabular-nums;
	color: var(--sk-akcent-tmavy);
}
/* akčný div má inline margin-top:18px, preto !important */
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn > div:last-child { order: 6; margin-top: 14px !important; }
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn .ox-btn--velke { min-height: 54px; font-size: 16px; }

html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-prazdne {
	margin-top: 22px; padding: clamp(30px, 5vw, 56px) 20px;
	border: 1px dashed var(--sk-linka); border-radius: var(--sk-r-stredny);
}
html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-prazdne .ox-btn--hlavne { margin-top: 14px !important; }

/* pod 1000 px: súhrn ostáva čitateľný v toku, tlačidlo ide do palcovej zóny */
@media (max-width: 1000px) {
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-kosik-rozlozenie {
		padding-bottom: calc(86px + env(safe-area-inset-bottom));
	}
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn { padding: 16px; }
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn > div:last-child {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		margin: 0 !important; text-align: center;
		padding: 10px var(--sk-pad) calc(10px + env(safe-area-inset-bottom));
		background: var(--sk-povrch); border-top: 1px solid rgba(27, 27, 27, .14);
		box-shadow: 0 -12px 30px rgba(0, 0, 0, .14);
	}
	/* bez stropu by sa tlačidlo pri 999 px roztiahlo cez celú šírku okna */
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-suhrn > div:last-child .ox-btn--plne {
		max-width: 560px; margin-inline: auto;
	}
	/* cookie lišta je fixná na bottom:0 a prekryla by tlačidlo */
	html[data-ox-kosik="pult"].ox-cookies-otvorene #ox-kosik-obsah .ox-suhrn > div:last-child {
		bottom: var(--ox-cookies-h, 0px);
	}
	/* pohár "späť hore" (position:fixed, right:20px, bottom:18px) sedí presne na
	   tlačidle; dvíhame ho len na košíku, ktorý JS vykresľuje ako #ox-kosik-obsah */
	html[data-ox-kosik="pult"]:has(#ox-kosik-obsah) .ox-pohar {
		bottom: calc(96px + env(safe-area-inset-bottom) + var(--ox-cookies-h, 0px));
	}
}

@media (max-width: 620px) {
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		column-gap: 10px; padding: 10px 0; margin-inline: 0;
	}
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__foto { width: 44px; height: 44px; grid-column: 1; grid-row: 1 / 4; align-self: start; }
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__nazov { grid-column: 2; grid-row: 1; align-self: start; }
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__cena { grid-column: 3; grid-row: 1; min-width: 0; align-self: start; text-align: right; }
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__meta { grid-column: 2 / 4; grid-row: 2; }
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-riadok__telo > div { grid-column: 2 / 4; grid-row: 3; justify-self: start; margin-top: 6px !important; }
	/* na dotyk sa stepper vracia na plnú veľkosť zo základu */
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-mnozstvo button { width: 38px; height: 38px; font-size: 17px; }
	html[data-ox-kosik="pult"] #ox-kosik-obsah .ox-mnozstvo input { width: 46px; height: 38px; font-size: 14px; }
	html[data-ox-kosik="pult"] #ox-kosik-obsah #ox-kupon { max-width: none !important; flex: 1 1 160px; }
}

/* ---- pokladna / doklad: Doklad ---- */
/* --- DOKLAD (pokladna/doklad) ---
   Pokladňa prestáva byť sadou kariet a číta sa ako tlačený veľkoobchodný doklad:
   krémový papier, žiadne tiene ani rádiusy, len vlasové linky, perforácia medzi
   prevádzkami, čísla v mono stĺpci pod sebou a suma ako červená pečiatka v Antone.
   Inšpirácia: Baymard Checkout UX 2025, editorial faktúrová typografia (99designs),
   mono receptová škola (HipFonts Receipt fonts), rytmus liniek podľa Awwwards Checkout.
   Poznámka k rozsahu: všetko, čo žije vnútri .ox-pokladna, je aj tak zaškatuľkované,
   aby sa štýl nevylial do košíka, registrácie ani do detailu objednávky. */
html[data-ox-pokladna="doklad"] {
	--ox-dok-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	--ox-dok-linka: rgba(27, 27, 27, .26);
	--ox-dok-papier: #FFFDF7;
	--ox-dok-ok: #15702A;
}

/* hlavička dokladu: kroky ako 01 / 02 / 03, aktívny červený.
   .ox-kroky je súrodenec .ox-pokladna, nie jej potomok, preto sa užšie zaškatuľkovať nedá. */
html[data-ox-pokladna="doklad"] .ox-kroky { gap: 0; margin-bottom: 0; align-items: stretch; flex-wrap: wrap; padding: 2px clamp(14px, 2.4vw, 26px) 0; background: var(--sk-krem); border: 1px solid var(--ox-dok-linka); border-bottom: 0; }
html[data-ox-pokladna="doklad"] .ox-kroky__ciara { display: none; }
/* padding-right je 0 a odstup drží margin, aby podčiarknutie presne sadlo na šírku popisku */
html[data-ox-pokladna="doklad"] .ox-kroky > .ox-krok { position: relative; background: none; border-radius: 0; box-shadow: none; gap: 8px; margin-right: 22px; padding: 12px 0 14px; color: var(--sk-text-tlmeny); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html[data-ox-pokladna="doklad"] .ox-kroky > .ox-krok::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
html[data-ox-pokladna="doklad"] .ox-kroky > .ox-krok--hotovy { color: var(--sk-text); }
html[data-ox-pokladna="doklad"] .ox-kroky > .ox-krok--aktivny { color: var(--sk-akcent-tmavy); }
html[data-ox-pokladna="doklad"] .ox-kroky > .ox-krok--aktivny::after { background: var(--sk-akcent); }
/* dve triedy v selektore, aby sa spoľahlivo prebili základné .ox-krok--aktivny .ox-krok__cislo
   a .ox-krok--hotovy .ox-krok__cislo (biely text na bielom krúžku) */
html[data-ox-pokladna="doklad"] .ox-kroky .ox-krok__cislo,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-krok__cislo { display: inline; width: auto; height: auto; margin-right: 2px; border-radius: 0; background: none; color: inherit; font-family: var(--ox-dok-mono); font-size: 12.5px; font-weight: 700; }
/* nula pred číslom dáva 01 / 02 / 03, hotový krok si necháva fajku */
html[data-ox-pokladna="doklad"] .ox-kroky .ox-krok:not(.ox-krok--hotovy) .ox-krok__cislo::before,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-krok-nadpis .ox-krok__cislo::before { content: '0'; }
html[data-ox-pokladna="doklad"] .ox-kroky .ox-krok__text small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: none; }

/* hárok papiera: obsah aj koľajnica súhrnu sú jeden doklad */
html[data-ox-pokladna="doklad"] .ox-pokladna { background: var(--ox-dok-papier); border: 1px solid var(--ox-dok-linka); color: var(--sk-text); padding: clamp(18px, 2.6vw, 32px) clamp(14px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-krok-nadpis { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--sk-text); font-family: var(--sk-font-nadpis); font-size: clamp(19px, 2vw, 25px); line-height: var(--sk-nadpis-lh); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-krok-nadpis .ox-krok__cislo { color: var(--sk-akcent-tmavy); font-size: 15px; }

/* popisky sekcií ako v dodacom liste (Obsah košíka, Doprava, Kupón, Spôsob platby...) */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-blok > h3 { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ox-dok-linka); font-family: var(--sk-font-text); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-prev-kosik--aktivna > .ox-prev-kosik__hlava { color: var(--sk-akcent-tmavy); }
/* perforácia medzi prevádzkami */
html[data-ox-pokladna="doklad"] .ox-pokladna #ox-k1-kosiky > .ox-blok + .ox-blok { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--ox-dok-linka); }
/* odznak len v hlavičke prevádzky: v prepínači prevádzok sedí na sýtej červenej ploche
   a plošné prefarbenie na červenú by tam dalo kontrast 1,42:1 */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-prev-kosik__hlava .ox-odznak { padding: 2px 7px; border-radius: 0; border: 1px solid var(--sk-akcent); background: none; color: var(--sk-akcent-tmavy); font-family: var(--ox-dok-mono); letter-spacing: .1em; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-prev-kosik .ox-riadok { padding: 10px 0; border-bottom: 1px dotted var(--ox-dok-linka); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-riadok__foto { border-radius: 0; box-shadow: none; border: 1px solid var(--sk-linka); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-riadok__nazov { font-weight: 600; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-riadok__meta { font-family: var(--ox-dok-mono); font-size: 11.5px; }

/* mono stĺpec čísel: množstvá a sumy sa čítajú pod sebou.
   .ox-doprava-volba > b je zámerne priamy potomok: v 3. kroku je <b> názov platobnej brány
   zabalený v <span>, a ten do mono číselného stĺpca nepatrí */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-riadok__cena,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-prev-kosik__spolu b,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-sum-row b,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-doprava-volba > b,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn__riadok > span + span { font-family: var(--ox-dok-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sk-text); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mnozstvo { border-radius: 0; border-color: var(--ox-dok-linka); background: var(--sk-biela); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mnozstvo button { width: 34px; height: 34px; font-size: 15px; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mnozstvo output { display: inline-block; min-width: 30px; text-align: center; font-family: var(--ox-dok-mono); font-weight: 700; }
/* ploché tlačidlo koša si musí nechať hover, inak zmizne akákoľvek odozva */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-ikonbtn { border: 0; border-radius: 0; background: none; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-ikonbtn:hover { background: var(--sk-ruz); color: var(--sk-akcent-tmavy); }

/* voľby dopravy a platby splynú do jednej tabuľky s vlasovými linkami */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-doprava-volba { margin-bottom: -1px; padding: 12px 14px; border-radius: 0; border-color: var(--ox-dok-linka); background: none; }
/* z-index drží červenú linku zvolenej voľby nad hornou linkou nasledujúcej (prekryv -1px),
   krém odlíši zvolenú voľbu od papiera lepšie než biela */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-doprava-volba:has(input:checked) { position: relative; z-index: 1; border-color: var(--sk-akcent); background: var(--sk-krem); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-bt-box,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-bt { border-radius: 0; box-shadow: none; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-bt-box__hlava { letter-spacing: .12em; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-panel { border-radius: 0; box-shadow: none; border: 1px solid var(--ox-dok-linka); background: var(--sk-biela); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mkt { padding: 16px; border: 1px dashed var(--ox-dok-linka); background: none; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mkt__radok { border-top-style: dotted; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mkt__obr { border-radius: 0; border: 1px solid var(--sk-linka); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mkt__popis,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mkt__telo small { font-family: var(--ox-dok-mono); font-size: 12.5px; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-input { border-radius: 0; border-color: var(--ox-dok-linka); font-family: var(--ox-dok-mono); letter-spacing: .06em; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-kupon__aktivne { font-family: var(--ox-dok-mono); font-size: 13px; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhlas { padding: 14px 16px; border: 1px dashed var(--sk-akcent); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-povinne { font-family: var(--ox-dok-mono); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-sum-row,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-sum-prev { border-bottom: 1px dotted var(--ox-dok-linka); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-sum-bloky { align-items: start; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-hlaska { border-radius: 0; border-left-width: 3px; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-hlaska--chyba { background: var(--sk-ruz); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-reg-akcie { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ox-dok-linka); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-reg-akcie .ox-btn,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn .ox-btn { border-radius: 0; box-shadow: none; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

/* spodok hárku: súhrn bez karty, ukončený červenou pečiatkou sumy */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn { padding: 16px 0 0; border-top: 2px dashed var(--ox-dok-linka); border-radius: 0; background: none; box-shadow: none; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn .ox-h3 { margin: 0 0 8px; font-family: var(--sk-font-text); font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn__riadok { padding: 6px 0; border-bottom: 1px dotted var(--sk-linka); font-size: 13.5px; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn__rozpis { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ox-dok-linka); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn__spolu { align-items: center; padding-top: 14px; border-top: 2px solid var(--sk-text); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn__spolu > span { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
/* biely text sedí len na sýtej červenej: 4,98:1 a navyše veľké písmo */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn__spolu b { display: inline-block; max-width: 100%; padding: 8px 14px 10px; background: var(--sk-akcent); color: #fff; font-family: var(--sk-font-nadpis); font-size: clamp(24px, 2.3vw, 34px); line-height: 1; transform: rotate(-1.4deg); transform-origin: 100% 50%; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-dz { padding: 10px 12px; border-radius: 0; border: 1px dashed var(--sk-akcent); background: var(--sk-krem); }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-dz__pas,
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-dz__pas i { height: 5px; border-radius: 0; }
/* základná zelená má na kréme len 3,92:1, tmavšia dá 5,82:1 */
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-dz__ok { color: var(--ox-dok-ok); font-family: var(--ox-dok-mono); }

/* nad 1100 px drží základ dva stĺpce: súhrn je pravý okraj hárku, nie jeho spodok.
   Základ prepína .ox-pokladna na jeden stĺpec pri max-width: 1100px, preto 1101 px. */
@media (min-width: 1101px) {
	html[data-ox-pokladna="doklad"] .ox-pokladna > #ox-pokladna-suhrn { padding-left: clamp(16px, 2vw, 26px); border-left: 1px solid var(--ox-dok-linka); }
	html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn { padding-top: 0; border-top: 0; }
}
@media (max-width: 1000px) {
	html[data-ox-pokladna="doklad"] .ox-pokladna { padding: 18px 14px 22px; }
	html[data-ox-pokladna="doklad"] .ox-kroky { padding-inline: 14px; }
}
@media (max-width: 620px) {
	html[data-ox-pokladna="doklad"] .ox-kroky > .ox-krok { margin-right: 12px; padding: 10px 0 12px; font-size: 11px; }
	html[data-ox-pokladna="doklad"] .ox-kroky .ox-krok__text small { display: none; }
	html[data-ox-pokladna="doklad"] .ox-pokladna .ox-reg-akcie .ox-btn,
	html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn .ox-btn { width: 100%; }
	html[data-ox-pokladna="doklad"] .ox-pokladna .ox-suhrn__spolu b { padding: 6px 10px 8px; font-size: 26px; }
}


/* OPRAVA 19. 9. 2026 (screenshot 1440 px): téma 21 nafukuje .ox-riadok__foto na
   clamp(84px, 8vw, 112px), no stĺpec riadku v košíku prevádzky je zamknutý na
   64 px cez !important, takže obrázok pretekal pod názov produktu. */
html[data-ox-pokladna="doklad"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { width: 64px; height: 64px; }
/* ---- pokladna / linka: Linka ---- */
/* --- LINKA (pokladna/linka) -------------------------------------------------
   Pokojná, úplne odkartičkovaná pokladňa pre zákazníka, čo objednáva každý
   týždeň: jeden stĺpec, nula tieňov, sekcie delí vzduch a jedna vlasová linka.
   Kroky sú tenká progresová linka, klikacie prvky majú 48 px a focus ring,
   červená ostáva len na validátore zostavy a chybovej hláške.
   Inšpirácia: Baymard, Checkout UX Best Practices 2025; Order summary patterns
   (ecommerceguide.com); eCommerce Checkout Optimization UX Guide 2026 (indikátor
   vždy ukáže, ktorý krok z koľkých beží, preto pri aktívnom čísle pribudne "/ 3").
   Selektory sú zámerne o triedu (alebo o id) špecifickejšie ako pravidlá témy 21
   vo varianty.css (r. 4133 až 4155 a 4723), takže blok nezávisí od poradia
   v súbore a možno ho vložiť kamkoľvek. */

/* 1) kroky = tenká progresová linka namiesto piluliek
   pozor: téma 21 rieši .ox-kroky selektorom html[data-tema^="21"] .ox-kroky
   s rovnakou váhou, preto pridávame .ox-wrap a sme o triedu vyššie */
html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky { gap: 0; flex-wrap: wrap; padding-bottom: 0; border-bottom: 1px solid var(--sk-linka); margin-bottom: clamp(22px, 3vw, 36px); }
html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky__ciara { display: none; }
html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky > .ox-krok {
	position: relative; background: none; box-shadow: none; border-radius: 0;
	padding: 10px 0 14px; margin: 0 28px 0 0; min-height: 48px; align-items: center;
	color: var(--sk-text-tlmeny); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky > .ox-krok::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky > .ox-krok--hotovy, html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky > .ox-krok--aktivny { color: var(--sk-text); }
html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky > .ox-krok.ox-krok--hotovy::after { background: var(--sk-linka); }
html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky > .ox-krok.ox-krok--aktivny::after { background: var(--sk-text); }
html[data-ox-pokladna="linka"] .ox-kroky .ox-krok__cislo {
	width: auto; height: auto; margin-right: 8px; background: none; border-radius: 0; color: var(--sk-text-tlmeny);
	font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace; font-size: 13px;
}
html[data-ox-pokladna="linka"] .ox-kroky .ox-krok--aktivny .ox-krok__cislo { color: var(--sk-text); }
html[data-ox-pokladna="linka"] .ox-kroky .ox-krok--aktivny .ox-krok__cislo::after { content: ' / 3'; color: var(--sk-text-tlmeny); }
html[data-ox-pokladna="linka"] .ox-kroky .ox-krok__text small { color: var(--sk-text-tlmeny); font-size: 11.5px; }

/* 2) sekcie: len vzduch a vlasová linka, žiadne karty ani tiene
   deliaca čiara je hore, nie dole: posledný .ox-blok nie je posledný div
   v #ox-krok-obsah (za ním ešte ide chybový box a .ox-reg-akcie),
   takže :last-of-type by nesadol na nič a spodná linka by ostala visieť */
html[data-ox-pokladna="linka"] .ox-pokladna { gap: clamp(24px, 3.4vw, 52px); }
html[data-ox-pokladna="linka"] .ox-krok-nadpis { margin: 0 0 22px; }
html[data-ox-pokladna="linka"] .ox-krok-nadpis .ox-krok__cislo { display: none; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-blok {
	margin: 0; padding: 26px 0 0; border: 0; border-top: 1px solid var(--sk-linka);
	background: none; box-shadow: none;
}
html[data-ox-pokladna="linka"] #ox-krok-obsah > .ox-blok:first-of-type,
html[data-ox-pokladna="linka"] #ox-k1-kosiky > .ox-blok:first-child { border-top: 0; padding-top: 0; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-blok > h3 {
	font-family: var(--sk-font-text); font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--sk-text-tlmeny); margin: 0 0 14px;
}
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-suhrn > .ox-h3 {
	font-family: var(--sk-font-text); font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--sk-text-tlmeny); margin: 0 0 14px;
}
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik__hlava span:first-of-type { color: var(--sk-text); }
/* odznak "aktívna": na plche --sk-linka má tlmený text len 4,48:1, preto plný atrament */
html[data-ox-pokladna="linka"] .ox-prev-kosik--aktivna .ox-odznak { background: var(--sk-linka); color: var(--sk-text); }

/* 3) riadky košíka: tichá linka, cena atramentom
   téma 21 nafukuje .ox-riadok__foto na clamp(84px, 8vw, 112px), hoci stĺpec
   je zamknutý na 64px cez !important vo varianty.css r. 4836, preto tu
   veľkosť fotky vraciame na 64px, inak prečnieva do názvu */
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok { gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid var(--sk-linka); }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { width: 64px; height: 64px; box-shadow: none; border: 1px solid var(--sk-linka); border-radius: var(--sk-r-maly); }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { color: var(--sk-text); font-family: var(--sk-font-text); font-size: 16px; font-weight: 700; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena small { display: block; font-size: 11px; font-weight: 600; color: var(--sk-text-tlmeny); }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-riadok__meta { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik__spolu b { color: var(--sk-text); font-size: 17px; }

/* 4) všetko klikacie 48 px, množstvo s jasným ohraničením a focus ringom
   .ox-pokladna navyše preto, aby sme prebili html[data-tema^="21"] .ox-mnozstvo */
html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo { border: 1px solid var(--sk-text); border-radius: var(--sk-r-maly); overflow: hidden; background: var(--sk-biela); }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo button { width: 48px; height: 48px; font-size: 20px; color: var(--sk-text); }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo button:hover:not(:disabled) { background: var(--sk-krem); color: var(--sk-text); }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo output { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-width: 46px; padding: 0 6px; font-weight: 700; text-align: center; border-inline: 1px solid var(--sk-text); }
html[data-ox-pokladna="linka"] .ox-ikonbtn.ox-riadok__zmaz { width: 48px; height: 48px; border-color: transparent; border-radius: var(--sk-r-maly); opacity: .65; }
html[data-ox-pokladna="linka"] .ox-ikonbtn.ox-riadok__zmaz:hover { opacity: 1; background: var(--sk-krem); border-color: var(--sk-linka); color: var(--sk-text); }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo button:focus-visible, html[data-ox-pokladna="linka"] .ox-pokladna .ox-ikonbtn:focus-visible,
html[data-ox-pokladna="linka"] .ox-pokladna .ox-btn:focus-visible, html[data-ox-pokladna="linka"] .ox-pokladna .ox-doprava-volba:focus-within,
html[data-ox-pokladna="linka"] .ox-pokladna .ox-check input:focus-visible { outline: 2px solid var(--sk-text); outline-offset: 2px; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-input:focus, html[data-ox-pokladna="linka"] .ox-pokladna .ox-select:focus { border-color: var(--sk-text); box-shadow: 0 0 0 3px rgba(27, 27, 27, .14); }

/* 5) doprava, platba, upsell a kupón bez ružových plôch */
html[data-ox-pokladna="linka"] .ox-pokladna .ox-doprava-volba { min-height: 48px; border-radius: var(--sk-r-maly); border-color: var(--sk-linka); margin-bottom: 10px; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-doprava-volba:has(input:checked) { border-color: var(--sk-text); background: var(--sk-krem); }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-doprava-volba b { color: var(--sk-text); font-family: var(--sk-font-text); font-weight: 700; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-blok.ox-mkt { background: none; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-mkt__radok { border-top-color: var(--sk-linka); padding: 12px 0; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-mkt__telo small, html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-platba-volba small { font-size: 12.5px; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-input, html[data-ox-pokladna="linka"] .ox-pokladna .ox-select { min-height: 48px; border-radius: var(--sk-r-maly); }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-blok.ox-suhlas { border: 0; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-check { align-items: center; min-height: 48px; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-check input { width: 24px; height: 24px; margin: 0; }

/* 6) jediné dve červené miesta: validátor zostavy a chybová hláška */
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-bt-box { border: 1px solid var(--sk-akcent); border-radius: var(--sk-r-maly); }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-bt-box__hlava { background: var(--sk-akcent); color: #fff; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-hlaska--chyba { border-left: 4px solid var(--sk-akcent); border-radius: var(--sk-r-maly); background: #FFF2F0; color: #8A0010; }

/* 7) rekapitulácia v kroku 2 a 3 tiež bez kariet */
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-panel { background: none; box-shadow: none; border-radius: 0; padding: 18px 0 0; border-top: 1px solid var(--sk-linka); }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-sum-block .ox-h3 { font-size: 15px; margin-bottom: 10px; }
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-sum-row, html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-sum-prev { border-bottom-color: var(--sk-linka); }

/* 8) súhrn: tichý krémový blok bez rámu, zvýraznená je len celková suma
   id #ox-pokladna-suhrn potrebujeme, lebo téma 21 drží .ox-suhrn__spolu b
   a .ox-suhrn .ox-h3 na rovnakej alebo vyššej váhe */
html[data-ox-pokladna="linka"] .ox-pokladna .ox-suhrn { background: var(--sk-krem); box-shadow: none; border-radius: var(--sk-r-stredny); padding: clamp(20px, 2.2vw, 28px); }
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-suhrn__riadok { padding: 8px 0; font-size: 14px; }
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-suhrn__rozpis { border-top: 1px solid var(--sk-linka); }
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-suhrn__spolu { border-top: 1px solid var(--sk-text); margin-top: 12px; padding-top: 16px; }
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-suhrn__spolu b { color: var(--sk-text); font-family: var(--sk-font-nadpis); font-size: clamp(30px, 3vw, 40px); }
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-dz { background: none; border-radius: 0; padding: 12px 0 0; border-top: 1px solid var(--sk-linka); }
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-dz__pas { background: rgba(27, 27, 27, .12); }
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-dz__pas i { background: var(--sk-text); }
/* pôvodná zelená #1F8F30 má na kréme len 3,92:1, tmavšia dáva 5,7:1 */
html[data-ox-pokladna="linka"] #ox-pokladna-suhrn .ox-dz__ok { color: #14722A; }

/* 9) akcie na konci kroku: jedno jasné CTA, návrat len ako tichý odkaz
   min-height dávame len tlačidlu v .ox-reg-akcie, inak by narástlo aj malé
   "Pridať do prevádzky" v upselli, ktoré je tiež .ox-btn--hlavne */
html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-reg-akcie { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sk-linka); }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-btn { box-shadow: none; }
html[data-ox-pokladna="linka"] .ox-reg-akcie .ox-btn--hlavne { border-radius: var(--sk-r-maly); min-height: 56px; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-btn--tiche { min-height: 48px; color: var(--sk-text-tlmeny); text-decoration: underline; text-underline-offset: 4px; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-btn--tiche:hover:not(:disabled) { color: var(--sk-text); }

/* základ prepína .ox-pokladna na jeden stĺpec až pri 1100px, toto je len poistka */
@media (max-width: 1000px) {
	html[data-ox-pokladna="linka"] .ox-pokladna { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-pokladna="linka"] .ox-pokladna .ox-suhrn { position: static; }
}
@media (max-width: 620px) {
	/* varianty.css r. 4836 drží riadok košíka na 5 stĺpcoch cez !important
	   (aj s grid-template-areas: none a grid-area: auto na deťoch), takže
	   mobilné pravidlo zo _zaklad.css sa nikdy neuplatní. Tu ho prepisujeme
	   na dva riadky, rovnako cez !important a o triedu vyššou váhou. */
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok { grid-template-columns: 44px minmax(0, 1fr) auto !important; grid-template-areas: none !important; gap: 8px 10px; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { grid-area: 1 / 1 / 3 / 2 !important; width: 44px; height: 44px; align-self: start; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__telo { grid-area: 1 / 2 / 2 / 3 !important; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__mn { grid-area: 2 / 2 / 3 / 3 !important; justify-self: start; margin-inline: 0; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__zmaz { grid-area: 1 / 3 / 2 / 4 !important; justify-self: end; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { grid-area: 2 / 3 / 3 / 4 !important; text-align: right; white-space: normal; font-size: 15px; }
	/* 3 x 40 px tlačidlo plus 34 px počítadlo sa zmestí aj do 320px displeja */
	html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo button { width: 40px; height: 40px; }
	html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo output { min-width: 34px; padding: 0 4px; }
	html[data-ox-pokladna="linka"] .ox-ikonbtn.ox-riadok__zmaz { width: 40px; height: 40px; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-mkt__radok { grid-template-columns: 48px minmax(0, 1fr); }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-mkt__obr { width: 48px; height: 48px; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-mkt__dd, html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-mkt__mn { grid-column: 2; justify-self: start; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-mkt__menu { right: auto; left: 0; min-width: 0; width: 100%; }
	html[data-ox-pokladna="linka"] .ox-wrap .ox-kroky > .ox-krok { margin-right: 14px; padding: 8px 0 12px; font-size: 12.5px; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-reg-akcie { flex-direction: column-reverse; align-items: stretch; }
	html[data-ox-pokladna="linka"] #ox-krok-obsah .ox-reg-akcie .ox-btn { width: 100%; }
}

/* ---- pokladna / pult: Bento pult ---- */
/* --- BENTO PULT (pokladna/pult) -----------------------------------------------
   Ľavá strana sa rozpadá na bento dosku: každá prevádzka je samostatná biela
   dlaždica s vlastným tieňom a farebným pásikom aktívnej prevádzky, marketing je
   nízka široká dlaždica a Doprava s Kupónom sedia vedľa seba ako dve polovičné.
   Pravá koľajnica je tmavá červená doska, kde suma v Antone svieti ako displej
   pokladničného pultu; kroky sú tmavé číslované pilulky nad doskou.
   Inšpirácia: bento layout grid (Awwwards, UI Goodies Bento Grids) a rozbor
   Ecom Design Pro o viacadresnom B2B checkoute, kde jeden košík treba ukázať ako
   viac zásielkových skupín ešte pred platbou.

   Rozsah pôsobnosti: atribút data-ox-pokladna sedí na <html> a ostáva zapnutý aj
   po prechode na inú stránku (rovnako ako data-ox-hlavicka), preto je KAŽDÉ
   pravidlo ešte raz zúžené na kontajner pokladne (#ox-krok-obsah, #ox-marketing,
   #ox-pokladna-suhrn) alebo na kroky mimo registrácie (.ox-kroky:not(#ox-reg-kroky)).
   Bez toho by sa tmavá koľajnica preliala do súhrnu v košíku aj v detaile
   objednávky a pilulky krokov do sprievodcu registráciou. */

/* kroky: číslované pilulky nad doskou.
   !important je nutné len pri pozadí: varianty.css (blok 21, riadok 4148) má
   html[data-tema^="21"] .ox-kroky > * { background: none !important } a proti
   !important sa vyššou špecifickosťou vyhrať nedá. Všetko ostatné prebíjame
   špecifickosťou (1,3,1) proti témovým (0,2,1) a (0,3,1). */
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) { gap: 8px; border-bottom: 0; padding-bottom: 0; }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { background: rgba(27, 27, 27, .07) !important; border-radius: var(--sk-r-pilulka); padding: 10px 18px; margin-right: 0; text-transform: none; letter-spacing: .01em; font-size: 13.5px; color: var(--sk-text-tlmeny); }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok.ox-krok--aktivny { background: var(--sk-akcent) !important; color: #fff; }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok.ox-krok--hotovy { background: var(--sk-atrament) !important; color: #fff; }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok::after,
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok.ox-krok--aktivny::after { display: none; }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara { display: none; }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__cislo { width: 24px; height: 24px; margin-right: 0; border-radius: 50%; font-family: var(--sk-font-text); font-size: 13px; background: rgba(27, 27, 27, .12); color: var(--sk-text); display: inline-flex; align-items: center; justify-content: center; }
/* v červenej pilulke musí byť koliesko TMAVŠIE ako podklad: biele 26 % dá na
   akcente len 3,9:1, tmavé 30 % dá 8,2:1 */
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) .ox-krok--aktivny .ox-krok__cislo { background: rgba(0, 0, 0, .3); color: #fff; }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) .ox-krok--hotovy .ox-krok__cislo { background: rgba(255, 255, 255, .22); color: #fff; }
/* na akcente má popiska pod nadpisom len 3,6:1 pri 82 % bielej, preto plná biela */
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) .ox-krok--aktivny .ox-krok__text small { color: #fff; }
html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) .ox-krok--hotovy .ox-krok__text small { color: rgba(255, 255, 255, .85); }

/* bento doska: obsah kroku je mriežka, široké prvky idú cez obe polia */
html[data-ox-pokladna="pult"] #ox-krok-obsah { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; }
html[data-ox-pokladna="pult"] #ox-krok-obsah > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
/* prázdne schránky na chyby (#ox-k1-chyba, #ox-udaje-chyba, #ox-obj-chyba) a
   nenaplnený #ox-marketing by v mriežke robili prázdny riadok aj s medzerou */
html[data-ox-pokladna="pult"] #ox-krok-obsah > div:empty { display: none; }
html[data-ox-pokladna="pult"] #ox-k1-kosiky { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* dlaždica prevádzky: samostatný objekt, nie ďalší odsek.
   Zápis .ox-blok.ox-prev-kosik dvíha špecifickosť nad dlaždicu blokov nižšie,
   aby na poradí pravidiel nezáležalo (staršie vykreslenie bez #ox-k1-kosiky
   vloží .ox-prev-kosik priamo do #ox-krok-obsah). */
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-blok.ox-prev-kosik { position: relative; overflow: hidden; margin: 0; padding: 22px clamp(16px, 2vw, 24px) 18px; background: var(--sk-povrch); border-radius: var(--sk-r-velky); box-shadow: var(--sk-tien-karta), var(--sk-obrys); }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sk-linka); }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik--aktivna::before { background: var(--sk-akcent); }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik__hlava { font-family: var(--sk-font-nadpis); font-size: 19px; margin: 0 0 8px; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik__hlava .ox-odznak { margin-left: auto; font-family: var(--sk-font-text); font-size: 10px; padding: 4px 9px; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik__spolu { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--sk-linka); font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace; font-size: 12.5px; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik__spolu b { font-family: var(--sk-font-nadpis); font-size: 22px; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { font-family: var(--sk-font-nadpis); }
/* dopisok „s DPH“ v Antone verzálkami pri 10 px nie je čitateľný */
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena small { font-family: var(--sk-font-text); }
/* téma 21 dáva .ox-riadok__foto clamp(84px, 8vw, 112px), no stĺpec riadku v
   košíku prevádzky má 64 px, takže obrázok pretekal do susedného stĺpca */
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { width: 64px; height: 64px; background: var(--sk-krem); }

/* marketing: nízka široká dlaždica, položky v dvoch stĺpcoch */
html[data-ox-pokladna="pult"] #ox-marketing { display: grid; gap: 18px; }
html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt { display: grid; gap: 6px 16px; margin: 0; padding: 20px clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); background: var(--sk-krem); border-radius: var(--sk-r-velky); box-shadow: var(--sk-obrys); }
html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt > h3,
html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt__popis { grid-column: 1 / -1; }
html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt__radok { border-top: 0; min-width: 0; padding: 10px 12px; background: var(--sk-povrch); border-radius: var(--sk-r-stredny); }
html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt__telo { min-width: 0; }
/* výber veľkosti má v základe max-width 260 px, čo je v polovičnom stĺpci viac
   ako zvyšné miesto vedľa obrázka */
html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt__vyber { max-width: 100%; }
html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt__menu { border-radius: var(--sk-r-stredny); }

/* dlaždice blokov; Doprava a Kupón sedia vedľa seba ako dve polovičné */
html[data-ox-pokladna="pult"] #ox-krok-obsah > .ox-blok { margin: 0; padding: 20px clamp(16px, 2vw, 24px); background: var(--sk-povrch); border-radius: var(--sk-r-velky); box-shadow: var(--sk-tien-karta), var(--sk-obrys); }
html[data-ox-pokladna="pult"] #ox-k1-kosiky ~ .ox-blok:not(.ox-kupon):not(.ox-suhlas),
html[data-ox-pokladna="pult"] #ox-k1-kosiky ~ .ox-blok:not(.ox-kupon):not(.ox-suhlas) + .ox-kupon { grid-column: span 1; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-doprava-volba { border-radius: var(--sk-r-stredny); }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-kupon__riadok { margin-top: 4px; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-bt-box { border-radius: var(--sk-r-stredny); }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-bt-box__hlava { letter-spacing: .08em; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-hlaska { border-radius: var(--sk-r-stredny); }

/* kroky 2 a 3: panely sú rovnaké bento dlaždice, vnorené panely v rekapitulácii
   sú len plochá krémová výplň, aby nevznikla biela karta v bielej karte */
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-mriezka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
html[data-ox-pokladna="pult"] #ox-krok-obsah > .ox-mriezka > .ox-panel { background: var(--sk-povrch); border-radius: var(--sk-r-velky); box-shadow: var(--sk-tien-karta), var(--sk-obrys); }
html[data-ox-pokladna="pult"] #ox-krok-obsah > .ox-blok .ox-panel { background: var(--sk-krem); box-shadow: none; }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-sum-prev { border-bottom-color: var(--sk-linka); }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-sum-row b { font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace; font-size: 13px; }

/* akčný pás s hlavným tlačidlom.
   Pozn.: position sticky tu NEMÁ zmysel, .ox-reg-akcie je posledná bunka mriežky
   #ox-krok-obsah a lepkavý prvok sa smie hýbať len v rámci svojej bunky, takže
   dráha je nulová. Skutočný lepkavý pás by potreboval prvok mimo mriežky
   (zmena markupu), preto je to tu obyčajná vyvýšená lišta. */
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-reg-akcie { padding: 14px 16px; border-radius: var(--sk-r-velky); background: var(--sk-povrch); box-shadow: var(--sk-tien-karta), var(--sk-obrys); }
/* žiara pod hlavným tlačidlom: pre firemnú červenú neexistuje kanálový token */
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne { margin-left: auto; box-shadow: 0 14px 30px -16px rgba(225, 0, 26, .8); }
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-reg-akcie .ox-btn--velke { min-height: 56px; }

/* koľajnica: tmavá červená doska s displejom sumy (mimo témy 21 záložný prechod) */
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn { background-color: #3A0008; color: #fff; border-radius: var(--sk-r-velky); background-image: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .12)), var(--ox-doska-cervena, linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%)); box-shadow: 0 26px 60px -30px rgba(58, 0, 8, .85), 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn .ox-h3 { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn__riadok { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .14); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn__riadok--tlmeny { color: rgba(255, 255, 255, .8); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn__rozpis { margin-top: 12px; padding: 4px 12px; border-top-color: rgba(255, 255, 255, .2); border-radius: var(--sk-r-stredny); background: rgba(0, 0, 0, .26); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn__rozpis > b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn__spolu { border-top-color: rgba(255, 255, 255, .34); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn__spolu b { color: #fff; font-family: var(--sk-font-nadpis); font-size: clamp(30px, 3vw, 44px); line-height: 1; text-shadow: 0 2px 20px rgba(255, 150, 160, .5); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-dz { background: rgba(255, 255, 255, .15); color: #fff; }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-dz small { color: rgba(255, 255, 255, .82); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-dz__ok { color: #8FE9A8; }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-dz__pas { background: rgba(255, 255, 255, .24); }
html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-dz__pas i { background: linear-gradient(90deg, var(--sk-ruz), #fff); }

@media (max-width: 1000px) {
	html[data-ox-pokladna="pult"] #ox-krok-obsah { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	html[data-ox-pokladna="pult"] #ox-k1-kosiky ~ .ox-blok:not(.ox-kupon):not(.ox-suhlas),
	html[data-ox-pokladna="pult"] #ox-k1-kosiky ~ .ox-blok:not(.ox-kupon):not(.ox-suhlas) + .ox-kupon { grid-column: 1 / -1; }
	html[data-ox-pokladna="pult"] #ox-k1-kosiky { gap: 14px; }
	html[data-ox-pokladna="pult"] #ox-marketing { gap: 14px; }
	html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { padding: 8px 14px; font-size: 12.5px; }
	html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn { border-radius: var(--sk-r-stredny); }
}
@media (max-width: 620px) {
	html[data-ox-pokladna="pult"] #ox-krok-obsah > .ox-blok,
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-blok.ox-prev-kosik,
	html[data-ox-pokladna="pult"] #ox-marketing .ox-mkt { padding: 16px 14px; border-radius: var(--sk-r-stredny); }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-mriezka--2 { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { padding: 7px 12px; gap: 7px; }
	html[data-ox-pokladna="pult"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__text small { display: none; }
	html[data-ox-pokladna="pult"] #ox-pokladna-suhrn .ox-suhrn__spolu b { font-size: 30px; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-reg-akcie { padding: 12px; gap: 8px; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-reg-akcie .ox-btn { flex: 1 1 100%; }
	/* riadok košíka prevádzky drží v základe 5 stĺpcov cez !important
	   (varianty.css 4836) a mobilný zápis na 4842 ho neprebije, takže pod 620 px
	   pretekal. Prebíjame ho preto rovnakou zbraňou, inak sa to CSS-om nedá. */
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok { grid-template-columns: 52px minmax(0, 1fr) auto !important; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { width: 52px; height: 52px; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { grid-column: 2 / -1 !important; text-align: left; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena small { text-align: left; }
}


/* OPRAVA 19. 9. 2026 (screenshot 1440 px): dlaždica prevádzky je v bento mriežke
   široká len ~300 px, kým základný .ox-riadok drží 5 stĺpcov cez !important
   (varianty.css blok 45) a meno produktu spadne do nulového stĺpca. Riadok preto
   meriame kontajnerovým dopytom SAMOTNEJ DLAŽDICE, nie šírkou okna - dlaždica je
   úzka aj na veľkom monitore, takže @media by to nikdy nechytilo. */
html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik { container-type: inline-size; container-name: oxdlazdica; }
@container oxdlazdica (max-width: 460px) {
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok { grid-template-columns: 52px minmax(0, 1fr) auto !important; row-gap: 6px; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { width: 52px; height: 52px; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__nazov { font-size: 14px; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { grid-column: 2 / -1 !important; text-align: left; }
	html[data-ox-pokladna="pult"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena small { text-align: left; }
}
/* ---- registracia / doklad: Úradný doklad ---- */
/* --- ÚRADNÝ DOKLAD (registracia/doklad) ---
   Registrácia vyzerá ako úzky krémový pás dokladu s vyštipkanými okrajmi: jeden stĺpec,
   mono sadzba (JetBrains Mono načítava téma 21g3-noirg3, inak sa použije systémové mono),
   popis vľavo s bodkovanou vodiacou linkou, hodnota vpravo. Overenia z RPO, VIES a od
   zástupcu sú natočené gumové pečiatky, potvrdená prevádzka dostane pečiatku so zeleným rámom.
   Doklad je zarovnaný doľava, aby lícoval s nadpisom sekcie: nadpis sa prebiť nedá, lebo
   data-ox-reg sedí na <html> a pretrval by aj na iných stránkach.
   Inšpirácia: strojopisná dokumentová estetika Suisse Int'l Mono (swisstypefaces.com),
   švajčiarska editoriálna mriežka s veľkým vzduchom (elements.envato.com/learn/swiss-style-graphic-design),
   trust-badge prax pri VIES/RPO (trustedsite.com/resources/trust-badges) a odlíšenie
   automaticky doplnených hodnôt od ručne písaných (shapeof.ai/patterns/auto-fill). */

html[data-ox-reg="doklad"] #ox-reg-kroky { max-width: 620px; margin-inline: 0; gap: 0; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--sk-text); padding-bottom: 9px; }
html[data-ox-reg="doklad"] #ox-reg-kroky .ox-krok { background: none; border-radius: 0; padding: 2px 0; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
html[data-ox-reg="doklad"] #ox-reg-kroky .ox-krok__cislo { width: 22px; height: 22px; border-radius: 0; border: 1px solid currentColor; background: none; color: inherit; font-size: 11px; }
html[data-ox-reg="doklad"] #ox-reg-kroky .ox-krok--aktivny { color: var(--sk-akcent-tmavy, #D60019); }
html[data-ox-reg="doklad"] #ox-reg-kroky .ox-krok--aktivny .ox-krok__cislo { background: var(--sk-akcent-tmavy, #D60019); border-color: var(--sk-akcent-tmavy, #D60019); color: #fff; }
html[data-ox-reg="doklad"] #ox-reg-kroky .ox-krok--hotovy { color: var(--sk-text); }
html[data-ox-reg="doklad"] #ox-reg-kroky .ox-krok--hotovy .ox-krok__cislo { background: none; color: inherit; }
html[data-ox-reg="doklad"] #ox-reg-kroky .ox-kroky__ciara { flex: 1 1 16px; height: 0; background: none; border-top: 1px dotted var(--sk-linka); margin: 0 10px 10px; }

/* telo dokladu: tieň je zámerne mäkký, lebo sa kreslí po pravouhlom ráme a pod
   vyštipkanými okrajmi by tvrdý tieň prezradil rovnú hranu */
html[data-ox-reg="doklad"] #ox-reg-telo { position: relative; max-width: 620px; margin-inline: 0; padding: clamp(26px, 4vw, 42px) clamp(18px, 3.4vw, 36px); background: var(--sk-krem, #FFF7E6); box-shadow: 0 10px 30px rgba(0, 0, 0, .10); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--sk-text); }
html[data-ox-reg="doklad"] #ox-reg-telo::before,
html[data-ox-reg="doklad"] #ox-reg-telo::after { content: ''; position: absolute; left: 0; right: 0; height: 7px; pointer-events: none; }
html[data-ox-reg="doklad"] #ox-reg-telo::before { top: 0; background: radial-gradient(circle at 6px 0, var(--sk-bg, #fff) 5.5px, transparent 6px) 0 0/12px 7px repeat-x; }
html[data-ox-reg="doklad"] #ox-reg-telo::after { bottom: 0; background: radial-gradient(circle at 6px 7px, var(--sk-bg, #fff) 5.5px, transparent 6px) 0 0/12px 7px repeat-x; }

/* jeden stĺpec: dvojstĺpcová mriežka sa zruší aj vnútri odhalenej firmy a kariet prevádzok.
   Medzeru riadkov drží mriežka, nie margin nadpisu: každý h3.ox-h3 má v markupe inline
   style="margin:0", ktorý sa bez !important prebiť nedá. */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-form { gap: 6px 0; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-form--2 { grid-template-columns: minmax(0, 1fr); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-h3 { font-family: var(--sk-font-nadpis, Anton), sans-serif; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid var(--sk-text); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-text-tlmeny { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-text-tlmeny); }

/* riadok dokladu: popis vľavo s vodiacou bodkovanou linkou, hodnota vpravo */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; padding: 7px 0; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole .ox-label { flex: 1 1 140px; padding-bottom: 8px; border-bottom: 1px dotted rgba(0, 0, 0, .3); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sk-text-tlmeny); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-label__pozn { display: block; font-size: 10px; letter-spacing: .03em; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole > .ox-input,
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole > .ox-telefon { flex: 0 1 58%; max-width: 58%; }
/* 16 px je dolná hranica, pod ňou Safari na iOS pri fokuse stránku priblíži */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-input,
html[data-ox-reg="doklad"] #ox-reg-telo .ox-select { min-height: 38px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--sk-text); border-radius: 0; background: transparent; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; text-align: right; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-input:focus,
html[data-ox-reg="doklad"] #ox-reg-telo .ox-select:focus { border-bottom-color: var(--sk-akcent-tmavy, #D60019); box-shadow: 0 1px 0 var(--sk-akcent-tmavy, #D60019); }
/* hodnota doplnená registrom sa odlíši prerušovanou linkou, nie sivou plochou.
   !important je tu nutné: základ má .ox-input--zamknute { background: ... !important } */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-input--zamknute { background: transparent !important; border-bottom: 1px dashed var(--sk-akcent-tmavy, #D60019); color: var(--sk-text); font-weight: 600; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-input[aria-invalid="true"] { background: transparent; border-bottom-width: 2px; border-bottom-color: var(--sk-akcent, #D60019); }
/* predvoľba krajiny má mono sadzbu, takže potrebuje viac miesta ako v základe;
   flex-wrap dovolí číslu spadnúť pod ňu, keď je riadok úzky */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-telefon { gap: 10px; flex-wrap: wrap; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-telefon .ox-input { flex: 1 1 130px; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-telefon__cc { flex: 0 1 136px; font-size: 13px; text-align: left; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-hint,
html[data-ox-reg="doklad"] #ox-reg-telo .ox-chyba { flex: 0 0 100%; margin-top: 5px; font-size: 11px; line-height: 1.45; text-align: right; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-chyba { color: var(--sk-akcent-tmavy, #D60019); }

/* pečiatky namiesto piluliek */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pill { margin-top: 12px; padding: 7px 14px; border: 2px solid currentColor; border-radius: 3px; background: transparent; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-3.5deg); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pill--ok { color: #146B24; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pill--chyba { color: var(--sk-akcent-tmavy, #D60019); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pill--nacitava,
html[data-ox-reg="doklad"] #ox-reg-telo .ox-pill--nedostupne { color: #6B4E00; transform: none; border-style: dashed; }

/* poznámky a hlášky ako pripísané riadky, nie farebné boxy */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-nezhoda,
html[data-ox-reg="doklad"] #ox-reg-telo .ox-manual { margin-top: 10px; padding: 10px 0 10px 14px; border-radius: 0; border-left: 3px solid #6B4E00; background: transparent; font-size: 12px; color: var(--sk-text); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-hlaska--chyba { padding: 10px 0 10px 14px; border-radius: 0; border-left: 3px solid var(--sk-akcent, #D60019); background: transparent; font-size: 12px; color: #8A0010; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-potvrdenie { margin-top: 14px; padding: 16px 0 0; border: 0; border-top: 2px dashed rgba(0, 0, 0, .28); border-radius: 0; background: transparent; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-potvrdenie__q { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-potvrdenie__btns { gap: 12px; }

/* karta prevádzky = prilepený útržok, potvrdená dostane zelenú pečiatku.
   Rám potvrdenej karty musí mať aspoň takú špecifickosť ako .ox-panel.ox-prev-karta,
   inak by ho prebila prerušovaná linka spoločného pravidla. */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-blok { margin-bottom: 22px; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-panel.ox-prev-karta { padding: 16px 16px 12px; border: 1px dashed rgba(0, 0, 0, .35); border-radius: 0; background: transparent; box-shadow: none; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-prev-karta__hlava b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-panel.ox-prev-karta.ox-prev-karta--potvrdena { border-style: solid; border-color: #146B24; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-prev-karta__zamok { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border: 2px solid #146B24; border-radius: 3px; background: transparent; color: #146B24; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-prev-karta__akcie { margin-top: 6px; padding-top: 10px; border-top: 1px dotted rgba(0, 0, 0, .25); }

/* pätka dokladu */
html[data-ox-reg="doklad"] #ox-reg-telo .ox-reg-akcie { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--sk-text); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-btn { border-radius: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-btn--hlavne { background: var(--sk-akcent, #D60019); color: #fff; box-shadow: 3px 3px 0 var(--sk-text); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-btn--velke { min-height: 52px; padding: 15px 28px; font-size: 13px; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-btn--obrys { border-color: var(--sk-text); }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-btn--tiche { text-decoration: underline; text-underline-offset: 4px; }
html[data-ox-reg="doklad"] #ox-reg-telo .ox-btn--maly { font-size: 11px; }
html[data-ox-reg="doklad"] #ox-reg-telo #ox-pridaj-prevadzku { width: 100%; border-style: dashed; }

@media (max-width: 1000px) {
	html[data-ox-reg="doklad"] #ox-reg-kroky { max-width: 100%; }
	html[data-ox-reg="doklad"] #ox-reg-telo { max-width: 100%; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole .ox-label { flex-basis: 120px; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole > .ox-input,
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole > .ox-telefon { flex-basis: 54%; max-width: 54%; }
}
@media (max-width: 620px) {
	/* pod 620 px sa riadok dokladu vracia do stĺpca, hodnota je zľava a pečiatky sa nenakláňajú */
	html[data-ox-reg="doklad"] #ox-reg-kroky .ox-krok { font-size: 10px; letter-spacing: .05em; }
	html[data-ox-reg="doklad"] #ox-reg-kroky .ox-kroky__ciara { flex-basis: 8px; margin-inline: 4px; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole { flex-direction: column; align-items: stretch; gap: 4px; padding: 9px 0; border-bottom: 1px dotted rgba(0, 0, 0, .22); }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole .ox-label { flex: 0 0 auto; padding-bottom: 0; border-bottom: 0; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole > .ox-input,
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pole > .ox-telefon { flex: 0 0 auto; max-width: 100%; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-input,
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-select { text-align: left; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-hint,
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-chyba { text-align: left; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-pill,
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-prev-karta__zamok { transform: none; }
	html[data-ox-reg="doklad"] #ox-reg-telo .ox-reg-akcie .ox-btn { width: 100%; }
}

/* ---- registracia / doska: Červená doska ---- */
/* --- ČERVENÁ DOSKA (registracia/doska) ---------------------------------------
   Telo registrácie je tmavá hodvábna červená doska, rovnaká plocha ako päta a
   Manifest (varianty.css blok 116, premenná --ox-doska-cervena). Polia ostávajú
   biele, takže na doske svietia ako papier na pulte a kontrast rieši biele pole
   na sýtej červenej, nie svetlý text na svetlom. Stepper nad doskou je naopak
   svetlá celoširoká segmentová lišta s podčiarknutím, aby sa postup čítal ako pás.
   Doska je vysunutá len o min(--sk-pad, 40px). Keďže --sk-pad je
   clamp(18px, 4.4vw, 76px), je min(--sk-pad, 40px) vždy menší alebo rovný
   paddingu .ox-wrap, takže vysunutie nikdy nepresiahne okraj a nevzniká
   vodorovný pretok.
   Kontrast: najsvetlejší bod dosky (pod závojom) je asi rgb(163, 18, 36),
   biely text na ňom má 7,8:1. Farebné akcenty sú prepočítané práve na tento
   najsvetlejší bod, nie na tmavý roh.
   Pozn. k prefixu: každé pravidlo je viazané na html[data-ox-reg="doska"],
   takže ostatné varianty registrácie zostávajú nedotknuté. */

/* 1) Stepper ako segmentová lišta
   .ox-krok je v registrácii <button> a v základe nie je globálny reset
   rámu tlačidiel (_zaklad.css rieši len font a color), preto border: 0. */
html[data-ox-reg="doska"] #ox-reg-kroky { display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch; margin-inline: calc(-1 * min(var(--sk-pad, 24px), 40px)); border-block: 1px solid var(--sk-linka); }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok { flex: 1 1 0; min-width: 0; justify-content: center; gap: 10px; padding: 16px 10px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--sk-text-tlmeny); text-align: center; transition: background .2s var(--sk-prechod), color .2s var(--sk-prechod), border-color .2s var(--sk-prechod); }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok:not(.ox-krok--aktivny):not(.ox-krok--hotovy) { cursor: default; }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok--hotovy { cursor: pointer; background: transparent; color: var(--sk-text); border-bottom-color: var(--sk-atrament); }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok--hotovy:hover { background: var(--sk-linka); }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok--aktivny { background: transparent; color: var(--sk-text); border-bottom-color: var(--sk-akcent); }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok__cislo { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 2px; background: var(--sk-linka); color: var(--sk-text); font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok--aktivny .ox-krok__cislo { background: var(--sk-akcent); color: #fff; }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok--hotovy .ox-krok__cislo { background: var(--sk-atrament); color: #fff; }
html[data-ox-reg="doska"] #ox-reg-kroky .ox-kroky__ciara { flex: 0 0 1px; height: auto; align-self: stretch; background: var(--sk-linka); }

/* 2) Samotná doska */
html[data-ox-reg="doska"] #ox-reg-telo {
	--ox-reg-zavoj: linear-gradient(180deg, rgba(24, 0, 5, .34), rgba(24, 0, 5, .52));
	--ox-reg-doska: radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .34), transparent 62%), linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%);
	background: var(--ox-reg-zavoj), var(--ox-reg-doska);
	margin-inline: calc(-1 * min(var(--sk-pad, 24px), 40px));
	padding: clamp(22px, 4vw, 46px);
	border-radius: var(--sk-r-velky);
	box-shadow: var(--sk-tien);
	color: #fff;
}
html[data-ox-reg="doska"][data-tema^="21"] #ox-reg-telo { background: var(--ox-reg-zavoj), var(--ox-doska-cervena); }
/* na tmavej doske je červený systémový focus ring takmer neviditeľný */
html[data-ox-reg="doska"] #ox-reg-telo :focus-visible { outline-color: #fff; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-h3 { color: #fff; letter-spacing: .04em; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-form { gap: 18px; }

/* 3) Polia: biely papier na doske */
html[data-ox-reg="doska"] #ox-reg-telo .ox-label { color: #fff; letter-spacing: .05em; text-transform: uppercase; }
/* hviezdička povinného poľa: #FFC2C6 má na najsvetlejšom bode dosky 5,2:1 */
html[data-ox-reg="doska"] #ox-reg-telo .ox-label span { color: #FFC2C6; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-label__pozn { color: rgba(255, 255, 255, .82); text-transform: none; letter-spacing: 0; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-input,
html[data-ox-reg="doska"] #ox-reg-telo .ox-select { background: #fff; color: var(--sk-text); border-color: transparent; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .8); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-input:focus,
html[data-ox-reg="doska"] #ox-reg-telo .ox-select:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .34); }
/* !important je tu nutný: základ (varianty.css) má na .ox-input--zamknute
   background s !important, inak sa prebiť nedá ani presnejším selektorom.
   Zamknutý select nemá triedu, len atribút disabled, preto ten istý vzhľad. */
html[data-ox-reg="doska"] #ox-reg-telo .ox-input--zamknute { background: rgba(255, 255, 255, .82) !important; color: #4A4340; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-select:disabled { background: rgba(255, 255, 255, .82); color: #4A4340; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-input[aria-invalid="true"] { background: #FFF1F0; border-color: var(--sk-akcent); box-shadow: 0 0 0 3px rgba(255, 138, 147, .55); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-hint,
html[data-ox-reg="doska"] #ox-reg-telo .ox-text-tlmeny { color: rgba(255, 255, 255, .78); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-chyba { color: #FFC2C6; }
/* #ox-icdph-obal a #ox-firma-odhalene sa skrývajú atribútom hidden; ten drží
   pravidlo [hidden] { display: none !important } vo varianty.css, takže
   display: flex nižšie skrytý blok neodhalí. */
html[data-ox-reg="doska"] #ox-reg-telo #ox-icdph-obal { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html[data-ox-reg="doska"] #ox-reg-telo #ox-firma-odhalene { padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .26); }

/* 4) Pilulky overenia (RPO, VIES, zástupca) */
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill { align-self: flex-start; background: rgba(255, 255, 255, .14); color: #fff; border-radius: var(--sk-r-maly); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .03em; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--ok { background: rgba(120, 235, 155, .16); color: #9DEFB2; }
/* pôvodné #FFC2C6 na podklade s alfou .18 dávalo len 4,2:1, preto svetlejšie */
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--chyba { background: rgba(255, 138, 147, .14); color: #FFD6D9; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--nacitava,
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--nedostupne { background: rgba(255, 217, 138, .16); color: #FFD98A; }

/* 5) Potvrdenie, nezhoda, manuál a súhrn chýb */
html[data-ox-reg="doska"] #ox-reg-telo .ox-potvrdenie { background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .45); border-radius: var(--sk-r-velky); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-potvrdenie__q { color: #fff; }
/* svetlé plochy si musia vypnúť dedené color: #fff z dosky, inak by bol
   biely text na kréme */
html[data-ox-reg="doska"] #ox-reg-telo .ox-nezhoda,
html[data-ox-reg="doska"] #ox-reg-telo .ox-manual { background: var(--sk-krem); color: var(--sk-text); border-radius: var(--sk-r-maly); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-hlaska--chyba { background: #FFF1F0; color: #8A0010; border-left-color: var(--sk-akcent-tmavy); border-radius: var(--sk-r-maly); }

/* 6) Karty prevádzok ako svetlejšie dosky na doske */
html[data-ox-reg="doska"] #ox-reg-telo .ox-panel { background: rgba(255, 255, 255, .07); border-radius: var(--sk-r-velky); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-prev-karta__hlava { padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-prev-karta--potvrdena { box-shadow: inset 0 0 0 1px rgba(157, 239, 178, .45); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-prev-karta__zamok { background: rgba(120, 235, 155, .14); color: #9DEFB2; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-ikonbtn,
html[data-ox-reg="doska"] #ox-reg-telo .ox-prev-karta__zmaz { color: #fff; border-color: rgba(255, 255, 255, .4); background: transparent; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-ikonbtn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-blok { margin-bottom: 0; }

/* 7) Tlačidlá: biele na doske sú tu to najsilnejšie */
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--hlavne { background: #fff; color: var(--sk-akcent-tmavy); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--hlavne:hover:not(:disabled) { background: var(--sk-krem); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--hlavne.ox-btn--nacitava::after { border-color: rgba(214, 0, 25, .3); border-top-color: var(--sk-akcent-tmavy); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--obrys { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--obrys:hover:not(:disabled) { background: #fff; color: var(--sk-akcent-tmavy); border-color: #fff; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--tiche { color: rgba(255, 255, 255, .78); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--tiche:hover:not(:disabled) { color: #fff; text-decoration: underline; }
html[data-ox-reg="doska"] #ox-reg-telo #ox-pridaj-prevadzku { width: 100%; justify-content: center; border-style: dashed; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-reg-akcie { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); }

@media (max-width: 1000px) {
	html[data-ox-reg="doska"] #ox-reg-kroky { margin-inline: calc(-1 * min(var(--sk-pad, 18px), 20px)); }
	html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok { padding: 14px 8px; font-size: 13px; gap: 8px; }
	html[data-ox-reg="doska"] #ox-reg-telo { margin-inline: calc(-1 * min(var(--sk-pad, 18px), 20px)); padding: clamp(20px, 3.4vw, 32px); }
	html[data-ox-reg="doska"] #ox-reg-telo .ox-potvrdenie__btns .ox-btn { flex: 1 1 200px; }
}
@media (max-width: 620px) {
	html[data-ox-reg="doska"] #ox-reg-kroky { margin-inline: 0; }
	html[data-ox-reg="doska"] #ox-reg-kroky .ox-krok { flex-direction: column; gap: 6px; padding: 12px 4px; font-size: 11.5px; letter-spacing: .02em; border-bottom-width: 2px; }
	html[data-ox-reg="doska"] #ox-reg-telo { margin-inline: 0; padding: 20px 16px; border-radius: var(--sk-r-stredny); }
	html[data-ox-reg="doska"] #ox-reg-telo #ox-firma-odhalene { padding-left: 10px; }
	html[data-ox-reg="doska"] #ox-reg-telo .ox-potvrdenie__btns .ox-btn { flex: 1 1 100%; }
	html[data-ox-reg="doska"] #ox-reg-telo .ox-reg-akcie { flex-direction: column-reverse; align-items: stretch; }
	html[data-ox-reg="doska"] #ox-reg-telo .ox-reg-akcie .ox-btn { width: 100%; justify-content: center; }
}

/* ---- registracia / kolajnica: Koľajnica ---- */
/* --- KOĽAJNICA (registracia/kolajnica) ---
   Vodorovný stepper sa preklopí na zvislú koľajnicu vľavo (float + sticky), takže
   „kde som a čo ma čaká“ je vidieť po celý čas. Formulár vpravo stráca rámčeky:
   polia sú účtovné linky s mono popiskami, akcie Späť/Ďalej sedia v odsadenej pätke.
   Inšpirácia: rail stepper, SaaS onboarding wizard s vertikálnym railom, read-only
   stavy podľa Carbon Design System, kde zamknuté pole NESMIE byť horšie čitateľné.

   Čo v základe prebíjame (overené v assets, preto tie „zbytočné“ resety):
   varianty.css:4148  .ox-kroky > *      margin-right:22px, position:relative, uppercase
   varianty.css:4149  .ox-kroky > *::after  absolútne podčiarknutie 2px
   varianty.css:4151  aktívny ::after    background: var(--sk-akcent)
   varianty.css:4152  .ox-kroky__ciara   display:none
   varianty.css:4153  .ox-krok__cislo    margin-right:8px
   varianty.css:4811  .ox-input--zamknute  background ... !important
   _zaklad.css:506    .ox-form           display:grid (prebíja atribút hidden) */

/* koľajnica vľavo; theme 21 kreslí .ox-kroky spodnú linku, v zvislom režime ju rušíme */
html[data-ox-reg="kolajnica"] #ox-reg-kroky { float: left; width: 212px; position: sticky; top: calc(var(--ox-lista, 0px) + 96px); display: flex; flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; margin: 4px 0 0; padding: 0; border-bottom: 0; }
/* clear na ::after telo vytiahne, takže plávajúca koľajnica nikdy neujde zo sekcie */
html[data-ox-reg="kolajnica"] #ox-reg-telo { margin-left: 256px; min-height: 300px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo::after { content: ''; display: block; clear: both; }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; margin: 0; padding: 11px 10px 11px 14px; border-left: 2px solid var(--sk-linka); border-radius: 0; background: none; color: var(--sk-text-tlmeny); font-size: 14.5px; text-align: left; }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok__cislo { width: 26px; height: 26px; flex: 0 0 26px; margin-right: 0; border-radius: 50%; background: var(--sk-linka); color: var(--sk-text); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; line-height: 1; }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok--aktivny { color: var(--sk-text); background: none; border-left-color: var(--sk-akcent); }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok--aktivny .ox-krok__cislo { background: var(--sk-akcent); color: #fff; }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok--hotovy { color: var(--sk-text); background: none; border-left-color: var(--sk-text); }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok--hotovy .ox-krok__cislo { background: var(--sk-text); color: #fff; }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok:hover:not(.ox-krok--aktivny) { color: var(--sk-akcent); }
/* podnadpisy: názov kroku je holý textový uzol, preto ich sadzáme cez ::after.
   Theme 21 ten istý ::after používa ako absolútne podčiarknutie, tak ho vraciame do toku
   a rušíme mu pozadie, inak by podnadpis aktívneho kroku sedel na červenej ploche. */
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok::after { position: static; left: auto; right: auto; bottom: auto; flex: 1 0 calc(100% - 36px); height: auto; margin: 0 0 0 36px; background: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: .04em; text-transform: none; color: var(--sk-text-tlmeny); }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok[data-krok="1"]::after { content: 'meno, e-mail, heslo'; }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok[data-krok="2"]::after { content: 'ičo, adresa, dph'; }
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok[data-krok="3"]::after { content: 'adresy predajní'; }
/* spojku theme 21 skrýva; súvislú linku robí border-left krokov, tak ju necháme skrytú */
html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-kroky__ciara { display: none; }

/* formulár: pokojný dvojstĺpec */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-form { gap: 22px 28px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-h3 { font-size: 15px; letter-spacing: .06em; padding-bottom: 10px; border-bottom: 2px solid var(--sk-text); }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-pole { gap: 3px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--sk-text-tlmeny); }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-label__pozn { letter-spacing: 0; }
/* polia ako účtovné linky, nie rámčeky */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-input,
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-select { padding: 10px 2px; min-height: 46px; border: 0; border-bottom: 1px solid var(--sk-linka); border-radius: 0; background: transparent; font-size: 15.5px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-input:focus,
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-select:focus { border-bottom-color: var(--sk-akcent); box-shadow: 0 1px 0 0 var(--sk-akcent); background: rgba(225, 0, 26, .03); }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-input[aria-invalid="true"],
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-select[aria-invalid="true"] { border-bottom: 2px solid var(--sk-akcent); background: transparent; }
/* Carbon: zamknuté pole ostáva plne čitateľné, mení sa len linka.
   !important je tu nutné: varianty.css:4811 má background tiež s !important,
   špecifickosťou sa to prebiť nedá. Farbu textu prebíjame normálne. */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-input--zamknute { background: transparent !important; color: var(--sk-text); border-bottom-style: dashed; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-telefon { gap: 12px; }
/* mono je širšie ako Inter; pod 150px sa oreže aj predvolené „+421 Slovensko“ */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-telefon__cc { flex: 0 0 150px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-hint { margin-top: 4px; font-size: 12px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-chyba { font-size: 12px; }

/* stavové pilulky a bloky overenia */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-pill { border-radius: var(--sk-r-pilulka); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
/* zelená #1F8F30 dáva na svojom svetlom podklade len 3,6:1; pri 11,5px to nestačí */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-pill--ok { color: #146B24; }
html[data-ox-reg="kolajnica"] #ox-icdph-obal { min-width: 0; }
html[data-ox-reg="kolajnica"] #ox-firma-odhalene { padding: 20px 0 0 18px; border-left: 2px solid var(--sk-linka); gap: 20px 28px; }
/* .ox-form dáva display:grid, čo prebíja atribút hidden; oba bloky ho musia rešpektovať */
html[data-ox-reg="kolajnica"] #ox-firma-odhalene[hidden] { display: none; }
html[data-ox-reg="kolajnica"] #ox-icdph-obal[hidden] { display: none; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-nezhoda,
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-manual { border-radius: 0; border-left-width: 3px; background: var(--sk-krem); }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-potvrdenie { padding: 18px 0 0; border: 0; border-top: 2px solid var(--sk-text); border-radius: 0; background: transparent; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-potvrdenie__q { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-hlaska--chyba { border-radius: 0; border-left-width: 3px; }

/* pätka s akciami: sticky tu nefunguje, .ox-reg-akcie je položka gridu .ox-form--2
   a jej obsahový blok je vlastná bunka, takže by nemala kam odskočiť. Preto len
   zreteľne oddelený pás s linkou navrchu. */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-reg-akcie { margin-top: 4px; padding: 14px 0 0; border-top: 1px solid var(--sk-linka); }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-reg-akcie .ox-btn--velke { min-height: 52px; padding: 15px 34px; font-size: 15.5px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-reg-akcie .ox-btn--tiche { padding-left: 0; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-btn--hlavne:hover:not(:disabled) { background: var(--sk-akcent-tmavy); }

/* karty prevádzok: ploché, s bočnou stopkou stavu */
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-blok { margin-bottom: 22px; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-prev-karta { padding: 20px 22px; border-radius: 0; border-left: 3px solid var(--sk-linka); box-shadow: none; background: transparent; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-prev-karta--potvrdena { border-left-color: #1F8F30; background: rgba(31, 143, 48, .04); }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-prev-karta__hlava b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-prev-karta__zamok { border-radius: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: #146B24; }
html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-prev-karta__akcie { padding-top: 6px; border-top: 1px dashed var(--sk-linka); }

/* pod 1000 px: koľajnica sa vracia do riadka nad formulár, podčiarknutie robí border-bottom */
@media (max-width: 1000px) {
	html[data-ox-reg="kolajnica"] #ox-reg-kroky { float: none; width: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-bottom: 26px; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo { margin-left: 0; min-height: 0; }
	html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok { width: auto; padding: 8px 6px; border-left: 0; border-bottom: 2px solid var(--sk-linka); }
	html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok--aktivny { border-bottom-color: var(--sk-akcent); }
	html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok--hotovy { border-bottom-color: var(--sk-text); }
	html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok::after { display: none; }
}

/* pod 620 px: jeden stĺpec rieši základ (.ox-form--2 od 860 px), tu len kompaktnosť */
@media (max-width: 620px) {
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-form { gap: 18px; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-input,
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-select { font-size: 16px; min-height: 46px; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-telefon { gap: 8px; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-telefon__cc { flex: 0 0 140px; }
	html[data-ox-reg="kolajnica"] #ox-firma-odhalene { padding-left: 12px; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-prev-karta { padding: 16px 0 16px 14px; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-reg-akcie { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-reg-akcie .ox-btn { width: 100%; }
	html[data-ox-reg="kolajnica"] #ox-reg-telo .ox-reg-akcie .ox-btn--tiche { padding-left: 0; padding-right: 0; }
	html[data-ox-reg="kolajnica"] #ox-reg-kroky .ox-krok { font-size: 13px; }
}

/* =============================================================================
   124) 18 NÁVRHOV Z KNIŽNIČNÝCH PROMPTOV (Peter 19. 9. 2026: „v najlepšej kvalite
   cez prompty a award winning dizajny"). Po 6 pre katalóg, pokladňu a B2B
   kalkulačku. Každý vychádza z konkrétneho promptu knižnice superdesign.dev,
   preloženého do OXO palety a do nášho nemenného markupu; podklady dopĺňal
   katalóg 21st.dev a registry shadcn. Workflow `oxo-18-navrhov-z-kniznice`:
   návrh → adversariálna kontrola → oprava podľa screenshotu.
   ========================================================================== */

/* ---- b2bstr / swiss: Plagát  (podľa ) ---- */
/* ---- b2bstr / swiss: Plagát ---- */
/* PLAGÁT (celá stránka /b2b).
   Predloha: knižničný prompt superdesign.dev "Animated Swiss poster landing page,
   warm paper and red, with a scroll-driven live timeline".

   Čo z predlohy PREBERÁM doslova:
   - teplý papier ako jediná zem (u nás krém #FFF7E6) + JEDNA odlišná "pripnutá
     scéna" (u predlohy #F1EBE1, u nás #FBF0DD pod kalkulačkou) + JEDNA atramentová
     scéna (záverečné CTA),
   - jedna horúca červená, prísne prídelová: polovica loga, meradlá, čísla krokov,
     vodorovné linky a JEDINÉ tlačidlo (hrdinské "Chcem byť partner"),
   - Anton na KAŽDOM nadpise, verzálky, letter-spacing -.012em; mono 11,5 px
     s +.26em verzálkami na každom popisku, kickeri a číslovaní,
   - rádiusy 0 VŠADE, žiadne tiene, žiadne prechody ako dekorácia,
   - hranice sekcií 2 px atramentom, riadky 1 px vlasovou linkou,
   - 44 px modulárny raster z dvoch skrížených linear-gradientov na 8 % atramentu,
     ktorý je VIDNO a ktorý sa POD SADZBOU HRDINU POSÚVA (predloha: "translating
     upward 60px across the stage"); druhý raz je vidno pod kalkulačkou,
   - jediná 3 px červená linka bežiaca 38 s po päte hrdinu (predloha ju má
     VÝSLOVNE namiesto marquee pásu, tak ju máme aj my a marquee tu nie je),
   - "wipe zľava doprava" na atramentovej scéne: veta stojí na tlmenom papieri
     a plná farba do nej vteká zľava podľa toho, kam si doskroloval,
   - "živá časová os": kroky 1-4 nie sú karty vedľa seba, ale riadky tabuľky
     s mono číslom, Anton titulkom a mono poznámkou, a pod každým rastie
     červené meradlo.
   Čo VYNECHÁVAM (nemá u nás náprotivok): pripnuté 260-400svh scény, canvasová
   mriežka uzlov s trasovanou cestou, FAQ, cenník, navigácia a päta. Meradlá
   nechávam 3 px (predloha 6 px), aby mali rovnakú hrúbku ako hrdinská linka.

   Preklad palety: papier #F8F3EC -> --sk-krem #FFF7E6; atrament #111010 ->
   #1B1B1B; červená #DC201E -> --sk-akcent #D60019; sivá #8C8880 -> #67605A.

   MONO: predloha chce JetBrains Mono. `index.php` (riadok 218) načítava iba
   Anton, Luckiest Guy a Inter, takže JetBrains Mono na stránke NIE JE. Dávam ho
   do zoznamu ako prvý (rovnako ako varianty.css 8907), aby sa chytil sám, keby
   ho niekto do odkazu na Google Fonts pridal; dovtedy sadže systémové mono.

   Kontrasty (rátané cez relatívnu svietivosť, nie odhadnuté):
   #1B1B1B na kréme 16,16:1; #3A352F na kréme 11,39:1; #67605A na kréme 5,80:1
   a na #FBF0DD 5,48:1; #D60019 na kréme 4,67:1 (stačí aj na bežný text, tu je
   napriek tomu len na linkách a na sadzbe od 30 px); biela na #B00015 7,35:1
   (na #D60019 by to bolo 4,98:1, čo je pri 12,5 px mono tenká rezerva, preto
   tmavší odtieň); biela na #1B1B1B 17,22:1; krém na #1B1B1B 16,16:1;
   #8E000D na #FBF0DD 8,63:1; nevyplnená veta rgba(255,247,230,.5) na atramente
   4,94:1 - predloha má 18 %, to by dalo 1,99:1, takže dvíham na 50 %, aby veta
   ostala čitateľná aj keby sa scroll-timeline nikdy nespustil; fokusové prstence
   atrament/papier 16,16:1 (norma pre indikátor je 3:1).

   Čo PREBÍJAM v základe a prečo:
   - .ox-btn (temy/_zaklad.css 165): --sk-btn-r 999px a --sk-btn-tien robia
     pilulku; plagát chce hranatý blok, takže rádius 0, tieň preč, zdvih na
     :hover preč. `:active` scale(.96) !important (varianty.css 5562) NERUŠÍM,
     je to jazyk tlačidiel celého webu a hranatý blok sa pod ním len scvrkne.
   - .ox-btn:focus-visible (varianty.css 5563) má `box-shadow ... !important`,
     čiže môj `box-shadow: none` sa pri fokuse aj tak neuplatní. Nebojujem s tým,
     len prstencu prefarbujem halo na papier/atrament - tiež cez !important,
     inak sa to nedá.
   - :focus-visible (temy/_zaklad.css 100) dáva `border-radius: 4px` KAŽDÉMU
     zaostrenému prvku. Na plagáte s rádiusom 0 to zaoblí dlaždicu aj tlačidlo,
     preto všade vraciam 0.
   - .ox-hero__text::before (temy/_zaklad.css 458): biely radiálny závoj pod
     sadzbou. Tu je zemou nepriehľadný papier, závoj by len rozmazal raster.
   - .ox-hero__text dostáva display:contents, aby sa kicker, nadpis, odsek
     a tlačidlá stali priamymi bunkami mriežky hrdinu. Bez toho sa nedá dať
     nápis cez CELÚ šírku, a práve to predloha žiada ("size the wordmark from
     its character count, white-space:nowrap").
   - .ox-hero__vizual img filter: drop-shadow (temy/_zaklad.css 464) - predloha
     tiene zakazuje, fotka ide do bielej dosky s 1 px atramentovým rámom.
   - html[data-tema^="21"] .ox-hero__vizual:hover img scale(1.03) (varianty.css
     4120): základ NEDÁVA .ox-hero__vizual overflow:hidden, takže by fotka na
     hover vyliezla z dosky aj cez jej rám. Zväčšenie ruším a doske pridávam
     overflow:hidden ako poistku.
   - .ox-produkt:hover .ox-produkt__foto img scale(1.045) (temy/_zaklad.css 484):
     tá istá dekorácia, ktorú plagát zakazuje; ruším.
   - html[data-tema^="21"] .ox-sek--tmava background #8C0010 (varianty.css 4116):
     predloha má tú scénu na ATRAMENTE, nie na červenej, inak by červená prestala
     byť prídelová. Rovnako sa prebíja jej .ox-btn--hlavne (4117).
   - .ox-odznak (temy/_zaklad.css 226): červená pilulka 11,5 px; tu je to poradové
     číslo riadku časovej osi, teda veľká červená Anton číslica bez pozadia.
   - .ox-oko::before background currentColor (varianty.css 3177) - linka kickera
     musí ostať červená aj keď text kickera je atramentový.
   INLINE STYLE (prebíjam !important, inak sa nedá):
   - .ox-mriezka--2[style="align-items:center"] v 4. sekcii -> align-items:start,
     lebo zoznam a fotka sa majú zarovnať na jednu hornú os.
   - ul[style="...gap:12px;margin:20px 0"] -> gap 0 a vlastné marginy, aby
     položky boli riadky tabuľky oddelené vlasovou linkou, nie plávajúce karty.
   - li.ox-panel[style="padding:14px 18px"] -> vlastný padding s miestom vľavo
     na mono číslovanie.
   - h3[style="margin-top:12px"] v 5. sekcii -> 0, inak titulok nesedí na osi.
   - img[style="border-radius:var(--sk-r-velky)"] v 4. sekcii -> 0.
   - .ox-wrap[style="text-align:center"] a .ox-lead[style="margin-inline:auto"]
     v 6. sekcii -> doľava, švajčiarsky plagát má jednu ľavú os.
   Do .ox-kalk nesiaha ani jeden selektor - kalkulačka má vlastný prepínač
   (`data-ox-kalk`, widgety.js 545). Overené v `doplnky.js` 565-618: jediná
   zdieľaná trieda vnútri #ox-kalk je `.ox-h3` (riadok 581), preto tu NIE JE
   žiadne holé pravidlo na `.ox-h3`, `.ox-oko`, `.ox-panel` ani `.ox-btn` -
   nadpis kroku a tlačidlá sú adresované cez rodičov, ktorí ležia mimo #ox-kalk.
   Slová v nadpisoch obaľuje JS (`nabehRozdelSlova`, varianty.js 1711) do
   .ox-rv__slovo a tie obaly po nábehu OSTÁVAJÚ, preto sa o ne smiem oprieť.
   Nadpis hrdinu je v zozname (`TRASA_SKUPINY`, varianty/21-showroom.js 1945).
   Keď obaly nevzniknú (OXO_POHYB=false), nadpis je len jednofarebný - to je
   vedomý ústup, nie chyba. */

/* ---------- 0) zem, tokeny, spoločná sadzba ---------- */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] {
	--ox-plg-papier: var(--sk-krem, #FFF7E6);
	--ox-plg-papier2: #FBF0DD;
	--ox-plg-atrament: #1B1B1B;
	--ox-plg-cervena: var(--sk-akcent, #D60019);
	--ox-plg-cervena-plna: #B00015;
	--ox-plg-cervena-link: #8E000D;
	--ox-plg-siva: #67605A;
	--ox-plg-cit: #3A352F;
	--ox-plg-vlas: rgba(27, 27, 27, .16);
	--ox-plg-vlas-slaby: rgba(27, 27, 27, .08);
	--ox-plg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	/* šírka obsahu .ox-wrap; z nej sa ráta veľkosť nápisu podľa počtu znakov.
	   ⚠️ --sk-maxw NIE je 1320 px: základ (temy/_zaklad.css 59) má 1560 px
	   a témy 04/12/13/14 majú 1280 px, 05 má 1320 px, 07 má 1440 px. Preto sa
	   tu token ČÍTA a záložná hodnota je len poistka pre chýbajúcu tému. */
	--ox-plg-sirka: calc(min(var(--sk-maxw, 1560px), 100vw) - 2 * var(--sk-pad));
	/* 44 px raster z dvoch skrížených linear-gradientov na 8 % atramentu */
	--ox-plg-raster:
		repeating-linear-gradient(to right, var(--ox-plg-vlas-slaby) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(to bottom, var(--ox-plg-vlas-slaby) 0 1px, transparent 1px 44px);
	background: var(--ox-plg-papier);
	counter-reset: ox-plg-sek;
}
/* ⛔ `.ox-sek--krem` tu ZÁMERNE NIE JE. Pravidlo by bolo mŕtve: toto pravidlo
   (1,3,1) už dáva transparent a jediné tematické `.ox-sek--krem` v projekte
   (varianty.css 3105, 3106, 3153, 3160, 3468+) je zúžené na [data-ox21="…"]
   alebo `#ox-obsah:has(> .ox-show)`, čo je DOMOV - na /b2b sa nikdy nechytí. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek { background: transparent; border-top: 2px solid var(--ox-plg-atrament); padding-block: clamp(52px, 6vw, 104px); }
/* ⛔ .ox-h3 tu ZÁMERNE NIE JE: rovnakú triedu nosí aj hlavička kalkulačky
   (doplnky.js 581), a do .ox-kalk nesmie siahnuť ani jeden selektor. Nadpis
   kroku sa sádže nižšie, adresne cez .ox-mriezka--4 .ox-h3. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-h1,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-h2 {
	font-family: var(--sk-font-nadpis); text-transform: uppercase;
	letter-spacing: -.012em; color: var(--ox-plg-atrament); margin: 0;
}
/* predloha sádže Anton na line-height .86-.94; slovenské mäkčene a dĺžne to
   nedovolia, lebo akcent nasledujúceho riadka by sedel na účiare predošlého.
   1,04 pre jednoriadkový nápis (v "OXO RED STARTER SET" nie je ani akcent ani
   dolná dĺžka) a 1,12 pre viacriadkové verzálkové nadpisy je najtesnejšie, čo
   diakritika znesie. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-h2 { font-size: clamp(30px, 4.6vw, 68px); line-height: 1.12; max-width: 18ch; }
/* kicker: mono verzálky, červená 2 px linka a poradové číslo sekcie - presne
   ten "mono kicker s číslom sekcie a vodorovnou linkou" z referenčnej kapitoly 01 */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-oko {
	font-family: var(--ox-plg-mono); font-size: 11.5px; font-weight: 500;
	letter-spacing: .26em; text-transform: uppercase; color: var(--ox-plg-atrament);
	gap: 14px; margin-bottom: clamp(14px, 1.6vw, 22px);
	counter-increment: ox-plg-sek;
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-oko::before { width: clamp(34px, 4vw, 64px); height: 2px; background: var(--ox-plg-cervena); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-oko::after { content: "/ " counter(ox-plg-sek, decimal-leading-zero); color: var(--ox-plg-siva); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie { align-items: flex-start; margin-bottom: clamp(30px, 3.6vw, 56px); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-lead { font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.62; color: var(--ox-plg-cit); max-width: 46ch; }

/* Tlačidlá: hranatý blok, mono verzálky. Červené je LEN hrdinské CTA.
   ⛔ Nesmie to ísť cez holé `.ox-btn`: kalkulačka má vlastné .ox-btn (Pridať do
   košíka #ox-kalk-kosik, Spustiť predaj #ox-kalk-start - doplnky.js 598 a 614)
   a tie patria jej prepínaču. Preto sú vymenované tri miesta, o ktorých viem,
   že ležia MIMO .ox-kalk. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn {
	border-radius: 0; border: 2px solid var(--ox-plg-atrament); box-shadow: none;
	font-family: var(--ox-plg-mono); font-size: 12.5px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	padding: 16px 30px; min-height: 54px; gap: 12px;
	transition: background .2s var(--sk-prechod), color .2s var(--sk-prechod), border-color .2s var(--sk-prechod);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--velke,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--velke { padding: 19px 38px; min-height: 60px; font-size: 13px; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn:hover:not(:disabled),
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn:hover:not(:disabled),
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn:hover:not(:disabled) { transform: none; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn--hlavne { background: var(--ox-plg-atrament); color: #fff; border-color: var(--ox-plg-atrament); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn--hlavne:hover:not(:disabled) { background: var(--ox-plg-cervena-plna); border-color: var(--ox-plg-cervena-plna); color: #fff; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys { background: transparent; color: var(--ox-plg-atrament); border-color: var(--ox-plg-atrament); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys:hover:not(:disabled) { background: var(--ox-plg-atrament); color: var(--ox-plg-papier); }
/* FOKUS. Základ (varianty.css 5563) dáva .ox-btn:focus-visible box-shadow
   s !important, takže sa s ním nedá vyhrať bez !important - len mu vymieňam
   halo za papier a prstenec za atrament (16,16:1, norma pre indikátor je 3:1).
   `border-radius: 0` je proti temy/_zaklad.css 100, ktorý fokusu zaobľuje rohy. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn:focus-visible,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn:focus-visible {
	outline: none; border-radius: 0;
	box-shadow: 0 0 0 3px var(--ox-plg-papier), 0 0 0 6px var(--ox-plg-atrament) !important;
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn:focus-visible {
	outline: none; border-radius: 0;
	box-shadow: 0 0 0 3px var(--ox-plg-atrament), 0 0 0 6px var(--ox-plg-papier) !important;
}

/* ---------- 1) hrdina: plagátová mriežka ---------- */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero {
	background: var(--ox-plg-papier); isolation: isolate;
	padding-block: clamp(34px, 4.4vw, 76px) clamp(48px, 5.6vw, 96px);
}
/* Raster je vidno A POSÚVA SA - predloha: "a 44px modular grid ... translating
   upward 60px across the stage". Presah 88 px (2 × 44) hore aj dole drží fázu
   mriežky na hornej hrane hrdinu a zároveň kryje posun; .ox-hero má
   overflow:hidden (temy/_zaklad.css 451), takže presah nikde nevytŕča.
   Bez podpory scroll-timeline je trvanie 0 s a `both`, čiže raster len stojí
   o 60 px vyššie - v rámci presahu, teda bez akejkoľvek diery. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero::before {
	content: ''; position: absolute; left: 0; right: 0; top: -88px; bottom: -88px;
	z-index: 0; pointer-events: none;
	background-image: var(--ox-plg-raster);
	animation: ox-plg-raster-posun linear both;
	animation-timeline: view(); animation-range: cover;
}
/* JEDINÁ ambientná animácia: 3 px červená linka prechádza pätu hrdinu za 38 s.
   Predloha ju má výslovne NAMIESTO marquee pásu. 26 % × (1 + 2,85) = 100,1 %,
   takže linka dobehne presne na pravý okraj a nie za neho. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero::after {
	content: ''; position: absolute; left: 0; bottom: 0; z-index: 1;
	width: 26%; height: 3px; background: var(--ox-plg-cervena); pointer-events: none;
	animation: ox-plg-linka 38s linear infinite alternate;
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka {
	position: relative; z-index: 1;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	/* ⚠️ Riadok 4 MUSÍ byť pružný. Fotka siaha cez riadky 3 a 4; keby boli oba
	   `auto`, prebytočná výška fotky by sa rozdelila medzi ne a tlačidlá by
	   odplávali pod odsek (namerané v Chromiu: 470 px diera pri 1440 px,
	   408 px pri 1280 px, 384 px pri 1024 px, hrdinské CTA na hrane ohybu).
	   S `1fr` na 4. riadku vezme prebytok riadok a tlačidlá ostanú hneď pod
	   odsekom, zarovnané na hornú hranu riadka. */
	grid-template-rows: auto auto auto 1fr;
	gap: clamp(18px, 2.4vw, 34px) clamp(24px, 4vw, 64px);
	align-items: start;
}
/* ⚠️ `display: contents` pseudoprvok NEZRUŠÍ - podľa CSS Display 3 sa ::before
   vykreslí, akoby bol dieťaťom rodiča, čiže by sedel v mriežke ako piata bunka
   a navyše by cez raster prehodil biely radiálny závoj. Musí ísť adresne preč.
   Zároveň `display:contents` zhodí aj `position:relative; z-index:2` zo základu
   (temy/_zaklad.css 456) - vrstvenie nad raster preto drží z-index mriežky. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__text { display: contents; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__text::before { display: none; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-oko { grid-column: 1 / -1; grid-row: 1; }
/* Anton má priemerný postup ~.44em na znak, takže 19 znakov "OXO RED STARTER SET"
   vyjde aj s letter-spacingom -.012em na ~8,1em. Delím 8,9, čo je o ~10 %
   prísnejšie, než odporúča predloha (chars × .44 = 8,36), a drží riadok pod
   šírkou obsahu na 320 / 390 / 768 / 1024 / 1280 / 1440 px pri KAŽDEJ téme
   (--sk-maxw 1280-1560 px, --sk-pad clamp(18px, 4-4,4vw, 44-76px)) - preto smie
   byť nowrap a preto sa nič neoreže o overflow:hidden hrdinu. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 {
	grid-column: 1 / -1; grid-row: 2;
	font-size: min(clamp(38px, 9.8vw, 128px), calc(var(--ox-plg-sirka) / 8.9));
	line-height: 1.04; white-space: nowrap;
	padding-bottom: clamp(14px, 1.6vw, 26px); border-bottom: 2px solid var(--ox-plg-atrament);
}
/* druhá polovica loga v červenej - obaly slov robí JS a po nábehu ostávajú */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 .ox-rv__slovo:nth-of-type(n+3) { color: var(--ox-plg-cervena); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-lead { grid-column: 1; grid-row: 3; margin: 0; max-width: 42ch; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie { grid-column: 1; grid-row: 4; align-self: start; margin-top: clamp(16px, 2vw, 28px); gap: 14px; }
/* JEDINÉ červené tlačidlo na stránke */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne { background: var(--ox-plg-cervena-plna); border-color: var(--ox-plg-cervena-plna); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne:hover:not(:disabled) { background: var(--ox-plg-atrament); border-color: var(--ox-plg-atrament); }
/* Biela doska s 1 px atramentovým rámom. `overflow:hidden` je poistka - základ
   ju nemá a téma 21 fotke na hover pridáva scale(1.03) (varianty.css 4120). */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual {
	grid-column: 2; grid-row: 3 / span 2; min-height: 0; place-items: stretch;
	background: #fff; border: 1px solid var(--ox-plg-atrament);
	padding: clamp(10px, 1.2vw, 18px); overflow: hidden;
}
/* max-height je nutná: na jednostĺpcovom hrdinovi (≤860 px) ide fotka do plnej
   šírky obsahu a bez stropu by odtlačila odsek aj tlačidlá pod ohyb.
   `object-fit: contain` zo základu (temy/_zaklad.css 464) ostáva, takže strop
   fotku nedeformuje, len ju vloží do dosky. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img { filter: none; width: 100%; max-height: min(58vh, 560px); transform: none; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual:hover img { transform: none; }

/* ---------- 2) sortiment: dve dlaždice, dva stĺpce ---------- */
/* ⚠️ V markupe (pohlady.js 2021-2025) sú PRESNE DVE dlaždice, ale `.ox-mriezka--3`
   je natvrdo trojstĺpcová, takže tretia bunka ostáva prázdna. Prázdna bunka
   v mriežke s vlasovými linkami sa číta ako NENAČÍTANÁ TRETIA DLAŽDICA, nie ako
   zámer - preto na /b2b robím z mriežky dvojstĺpcovú a prázdnu bunku ruším.
   Raster predlohy tým neprichádza: je vidno v hrdinovi (kde sa aj posúva)
   a pod kalkulačkou. Fotky dostávajú plochší pomer 3/2, aby z dlaždíc pri
   dvoch stĺpcoch a šírke obsahu do 1419 px nevznikli veže. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 {
	grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
	background: var(--ox-plg-vlas); box-shadow: 0 0 0 1px var(--ox-plg-vlas);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 .ox-produkt {
	background: var(--ox-plg-papier); border-radius: 0; box-shadow: none;
	transition: background .2s var(--sk-prechod);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 .ox-produkt:hover,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 .ox-produkt:focus-visible { transform: none; box-shadow: none; background: #fff; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 .ox-produkt:focus-visible {
	outline: 3px solid var(--ox-plg-atrament); outline-offset: -3px; border-radius: 0;
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto { aspect-ratio: 3 / 2; border-bottom: 1px solid var(--ox-plg-vlas); }
/* predloha zakazuje dekoratívny pohyb na fotkách; základ (temy/_zaklad.css 484)
   fotku na hover zväčšuje, tu nie */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto img,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt:hover .ox-produkt__foto img { transform: none; transition: none; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt__telo { padding: clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 30px); gap: 10px; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov {
	font-size: clamp(19px, 1.5vw, 25px); text-transform: uppercase;
	letter-spacing: -.012em; line-height: 1.14; color: var(--ox-plg-atrament);
	transition: color .2s var(--sk-prechod);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt:hover .ox-produkt__nazov,
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt:focus-visible .ox-produkt__nazov { color: var(--ox-plg-cervena-plna); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt__popis { font-size: 13px; line-height: 1.55; color: var(--ox-plg-siva); }

/* ---------- 3) kalkulačka: LEN priestor okolo nej ---------- */
/* Toto je "alternatívna pripnutá scéna" predlohy: jediná sekcia na inom papieri.
   Raster je na POZADÍ SEKCIE (nie pseudoprvok), aby sa nedostal do cesty
   kalkulačke ani jej vlastnému prepínaču - jej karty majú vlastné nepriehľadné
   pozadie, takže raster je vidieť len v okrajoch scény. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek#ox-zisk {
	background-color: var(--ox-plg-papier2);
	background-image: var(--ox-plg-raster);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek#ox-zisk .ox-hlava-sekcie { margin-bottom: clamp(22px, 2.6vw, 38px); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host {
	margin: 0 0 clamp(24px, 2.8vw, 40px); padding: 2px 0 2px 18px;
	border-left: 3px solid var(--ox-plg-cervena);
	font-size: 14px; line-height: 1.6; color: var(--ox-plg-cit); max-width: 62ch;
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a { color: var(--ox-plg-cervena-link); text-decoration: underline; text-underline-offset: 3px; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a:hover { color: var(--ox-plg-atrament); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a:focus-visible { outline: 2px solid var(--ox-plg-atrament); outline-offset: 2px; border-radius: 0; }

/* ---------- 4) čo je v sete: tabuľka riadkov ---------- */
/* align-items:center je INLINE na .ox-mriezka--2, prebíjam !important */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 {
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(26px, 4vw, 64px); align-items: start !important;
}
/* gap:12px a margin:20px 0 sú INLINE na <ul>, preto !important */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 ul {
	gap: 0 !important; margin: clamp(22px, 2.4vw, 32px) 0 clamp(26px, 3vw, 38px) !important;
	border-top: 2px solid var(--ox-plg-atrament); counter-reset: ox-plg-set;
}
/* padding:14px 18px je INLINE na <li class="ox-panel">, preto !important */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 ul li.ox-panel {
	position: relative; background: transparent; box-shadow: none; border-radius: 0;
	border-bottom: 1px solid var(--ox-plg-vlas);
	padding: clamp(14px, 1.5vw, 19px) 0 clamp(14px, 1.5vw, 19px) 58px !important;
	counter-increment: ox-plg-set;
	font-size: 14.5px; line-height: 1.5; color: var(--ox-plg-atrament);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 ul li.ox-panel::before {
	content: counter(ox-plg-set, decimal-leading-zero);
	position: absolute; left: 0; top: clamp(15px, 1.6vw, 21px);
	font-family: var(--ox-plg-mono); font-size: 11.5px; letter-spacing: .26em;
	color: var(--ox-plg-siva);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child {
	background: #fff; border: 1px solid var(--ox-plg-atrament); padding: clamp(12px, 1.4vw, 20px);
}
/* border-radius je INLINE na <img>, preto !important */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child img { border-radius: 0 !important; width: 100%; height: auto; }

/* ---------- 5) ako to prebieha: živá časová os ---------- */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--ox-plg-atrament); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel {
	position: relative; display: grid; align-items: baseline;
	grid-template-columns: clamp(64px, 7vw, 112px) minmax(0, .9fr) minmax(0, 1.25fr);
	column-gap: clamp(16px, 2.4vw, 44px);
	background: transparent; box-shadow: none; border-radius: 0;
	padding: clamp(18px, 2.2vw, 32px) 0; border-bottom: 1px solid var(--ox-plg-vlas);
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak {
	grid-column: 1; align-self: start; padding: 0; border-radius: 0; background: none;
	font-family: var(--sk-font-nadpis); font-weight: 400; font-size: clamp(30px, 3.6vw, 58px);
	line-height: 1; letter-spacing: -.012em; text-transform: none; color: var(--ox-plg-cervena);
}
/* Nadpis kroku. Sadzba sa nedá vziať zo spoločnej skupiny nadpisov (tá kvôli
   kalkulačke .ox-h3 neobsahuje), preto je tu celá a nespolieham sa na
   --sk-nadpis-transform témy. margin-top:12px je INLINE na <h3>, musí ísť preč,
   inak titulok nesedí na osi s číslom a poznámkou, preto !important. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-h3 {
	grid-column: 2; margin: 0 !important;
	font-family: var(--sk-font-nadpis); text-transform: uppercase;
	letter-spacing: -.012em; color: var(--ox-plg-atrament);
	font-size: clamp(19px, 1.7vw, 26px); line-height: 1.16;
}
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-text-tlmeny {
	grid-column: 3; margin: 0; font-family: var(--ox-plg-mono);
	font-size: 12.5px; line-height: 1.66; color: var(--ox-plg-siva);
}
/* meradlo riadku: rastie s posunom stránky, presne ako meradlo predlohy.
   Bez podpory scroll-timeline je trvanie 0 s a `both`, takže riadok skončí
   s plnou červenou linkou - žiadny zaseknutý polostav.
   ⚠️ `animation-timeline` MUSÍ stáť AŽ ZA skratkou `animation`, lebo tá ho
   resetuje na `auto`. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel::after {
	content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px;
	background: var(--ox-plg-cervena); transform-origin: left center; transform: scaleX(0);
	animation: ox-plg-meradlo linear both;
	animation-timeline: view(); animation-range: entry 28% cover 44%;
}

/* ---------- 6) záver: atramentová scéna s výplňou zľava doprava ---------- */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava {
	background: var(--ox-plg-atrament);
	/* stopa meradla: bledá červená, po ktorej sa ťahá plná (pozri ::after) */
	border-top: 3px solid rgba(225, 0, 26, .3);
}
/* text-align:center je INLINE na .ox-wrap, plagát má jednu ľavú os */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap { text-align: left !important; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2 {
	color: var(--ox-plg-papier); font-size: clamp(34px, 6.4vw, 92px);
	line-height: 1.1; width: fit-content; max-width: 100%;
	margin-bottom: clamp(18px, 2vw, 30px);
}
/* WIPE ZĽAVA DOPRAVA. Predloha kladie na vetu presný klon a plní ho
   clip-path: inset(0 calc(100% - p*100%) 0 0). Klon sa tu urobiť nedá (markup
   sa nemení a `content:` by zdvojil vetu čítačkám), tak to robí jedna vrstva:
   dvojnásobne široký prechod (ľavá polovica papier, pravá duch) oreze na text
   a posúva sa sprava doľava. Výsledok je ten istý - papier rastie zľava.
   ⚠️ Vedome NEBERIEM animovanú custom property: bez @property by percento
   skákalo v polovici. background-position sa interpoluje plynule všade.
   Duch je na 50 % papiera = 4,94:1 na atramente, čiže veta je čitateľná aj
   keby sa scroll-timeline nikdy nespustil (predloha má 18 %, to by dalo
   1,99:1). Rozdiel voči plnému krému 16,16:1 ostáva zreteľný.
   ⚠️ Táto veta NIE JE delená na slová: skupina `slova` (varianty/21-showroom.js
   1945) berie `.ox-hlava-sekcie .ox-h2`, `h1.ox-h2`, `.ox-hero .ox-h1`
   a `.ox-detail__info .ox-h2` - h2 v 6. sekcii nie je ani v jednom. Keby bola,
   `clip-path` a `transform` na obaloch slov by z background-clip:text spravili
   neviditeľný text. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2 {
		background-image: linear-gradient(90deg, var(--ox-plg-papier) 0 50%, rgba(255, 247, 230, .5) 50% 100%);
		background-size: 200% 100%; background-repeat: no-repeat;
		-webkit-background-clip: text; background-clip: text; color: transparent;
		animation: ox-plg-vypln linear both;
		animation-timeline: view(); animation-range: entry 10% cover 46%;
	}
}
/* vo forced-colors režime je priehľadný text riziko: prechod ide preč A ORezanie
   pozadia na text sa musí vrátiť na border-box, inak by systémová farba pozadia
   ostala orezaná na glyfy */
@media (forced-colors: active) {
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2 {
		background-image: none; color: var(--ox-plg-papier);
		-webkit-background-clip: border-box; background-clip: border-box;
		animation: none;
	}
}
/* margin-inline:auto je INLINE na .ox-lead */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-lead { margin-inline: 0 !important; color: rgba(255, 247, 230, .78); max-width: 48ch; }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne { background: var(--ox-plg-papier); color: var(--ox-plg-atrament); border-color: var(--ox-plg-papier); }
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--ox-plg-atrament); }
/* Meradlo predlohy: plná červená sa ťahá po hornej hrane scény, presne cez
   svoju bledú stopu (top: -3px = hrúbka border-top; odsadenie sa počíta od
   padding-boxu, takže -3px sadne presne na rám). Na päte scény by zaniklo,
   hneď pod ňou začína červená päta webu. */
html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava::after {
	content: ''; position: absolute; left: 0; top: -3px; width: 100%; height: 3px;
	background: var(--ox-plg-cervena); transform-origin: left center; transform: scaleX(0);
	animation: ox-plg-meradlo linear both;
	animation-timeline: view(); animation-range: entry 20% cover 70%;
}

/* ---------- animácie ---------- */
@keyframes ox-plg-linka { from { transform: translateX(0); } to { transform: translateX(285%); } }
@keyframes ox-plg-meradlo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ox-plg-vypln { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes ox-plg-raster-posun { from { transform: translateY(0); } to { transform: translateY(-60px); } }

/* ---------- 1280 px a menej ---------- */
@media (max-width: 1100px) {
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka { grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel { grid-template-columns: clamp(58px, 8vw, 90px) minmax(0, 1fr) minmax(0, 1.05fr); }
}
@media (max-width: 980px) {
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	/* hrdina do jedného stĺpca: kicker, nápis, fotka, odsek, tlačidlá */
	/* jeden stĺpec = päť riadkov nad sebou; pružný 4. riadok by tu len naťahoval odsek */
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 { grid-column: 1; grid-row: 2; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual { grid-column: 1; grid-row: 3; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-lead { grid-row: 4; max-width: 52ch; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie { grid-row: 5; }
	/* riadky časovej osi: číslo vľavo cez OBA riadky, titulok a poznámka pod
	   sebou vpravo. Bez `grid-row: 1 / span 2` by automatické umiestnenie dalo
	   číslo len do prvého riadka a poznámka by ostala bez ničoho vedľa seba. */
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel { grid-template-columns: clamp(52px, 13vw, 78px) minmax(0, 1fr); row-gap: 6px; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak { grid-row: 1 / span 2; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-h3 { grid-column: 2; grid-row: 1; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-text-tlmeny { grid-column: 2; grid-row: 2; }
}
@media (max-width: 700px) {
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek { padding-block: clamp(44px, 9vw, 64px); }
}
@media (max-width: 480px) {
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-oko { font-size: 11px; letter-spacing: .2em; gap: 10px; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-oko::before { width: 26px; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn { padding: 15px 22px; font-size: 11.5px; letter-spacing: .14em; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--velke,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--velke { padding: 17px 24px; font-size: 12px; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn { width: 100%; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 ul li.ox-panel { padding-left: 46px !important; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-text-tlmeny { font-size: 12px; }
}

/* ---------- obmedzený pohyb ---------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero::before { animation: none; transform: none; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero::after { animation: none; width: 100%; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel::after,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava::after { animation: none; transform: scaleX(1); }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2 { animation: none; background-position: 0% 0; }
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn,
	html[data-ox-b2bstr="swiss"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn { transition: none; }
}

/* ---- b2bstr / kontrast: Kontrast  (podľa ) ---- */
/* =============================================================================
   125) /b2b - CELÁ STRÁNKA, návrh „Kontrast“ (html[data-ox-b2bstr="kontrast"])
   -----------------------------------------------------------------------------
   Predloha: knižničný prompt superdesign.dev „high-contrast-landing-page“
   (Swiss / luxury-brutalist, typography-first). Z promptu preberám VERBATIM:
     - Echo Stack: štyri vrstvy toho istého textu pod hlavným, posun -0,04em /
       -0,08em / -0,12em / -0,16em vľavo hore, farba bledne smerom von. Markup
       na päť <span>-ov nemáme, tak vrstvy kreslím cez text-shadow - je to tá
       istá vec, len jedným uzlom, a pozadové vrstvy tak samy nechytajú myš.
     - Zvislý vlasový oddeľovač, ktorý zhora „vteká“ do sekcie (1px).
     - Asymetrický 12-stĺpcový showcase: 8 stĺpcov široký obdĺžnik s rounded-sm
       rohmi + 4 stĺpce zvislá PILULKA (border-radius 9999px). Oba tvary sú
       v promptu menované a zacelia dieru po chýbajúcej tretej dlaždici.
     - Kruhový prekryv na pilulke s tenkým obrysom, viditeľný až na hover.
     - Service cards: priehľadné pozadie -> biele na hover, 1px rám ink/10,
       geometrický 64x64 kontajner, ktorý sa na hover otočí o 12 stupňov,
       a šípka vpravo („arrow-right icons“) - u nás ako spojka medzi krokmi.
     - Číslovanie sekcií aj položiek (mono, decimal-leading-zero).
     - Obrázky: štart grayscale 20 % -> plná farba + scale 1,05 na hover;
       odhalenie cez clip-path: inset, 700 ms, cubic-bezier(.77,0,.175,1).
     - Ostré 1px hairline rámy, rounded-sm (2px) rohy, nulové mäkké tiene.
     - Pilulkové tlačidlá s 1px rámom, ktoré sa na hover invertujú.
   Preložené na OXO (a nič viac):
     - #f2f2f2 -> krém #FFF7E6; karty a plochy -> biela; #111111 -> atrament
       #1B1B1B; sivé echo vrstvy -> naša červená, ktorá bledne (#D60019 ->
       --sk-ruz).
     - Clash Display -> Anton verzálky; Satoshi -> --sk-font-text; technické
       popisky, čísla a odznaky -> mono.
     - Prompt chce leading 0.9 a tracking -0.05em. Anton je oveľa hustejší než
       Clash Display a naše verzálky nosia mäkčene, takže h1 (v texte
       „OXO RED STARTER SET“ nie je ani jeden diakritický znak) dostáva 1,02,
       ale h2 a h3 nechávam na 1,22 ako živá téma 21g3 - inak sa Č a Ď zrazia.
       Tracking uťahujem na -0,02em (h1 -0,03em); -0,05em Anton neunesie,
       verzálky by sa zliepali.
   Vynechané (nemajú u nás náprotivok): sticky navigácia, 4-stĺpcová päta,
   kruhová a 7-stĺpcová dlaždica showcase (máme len dve), kurzíva v jednom
   slove citátu (bez markupu sa jedno slovo nedá izolovať).

   ------ ČO SA OPRAVILO OPROTI PRVEJ VERZII NÁVRHU ---------------------------
   A) Sekcie NEPREHADZUJEM na bielu. `.ox-sek--krem` -> biela znamenala bielu
      kartu na bielej ploche a silueta PILULKY (nosný prvok promptu) zmizla.
      Celá stránka teraz stojí na jednej krémovej ploche presne tak, ako prompt
      chce („sekcie delí ostrá linka, nie výplň“), a biele sú len dosky:
      karty, pás hrdinu, poznámka pri kalkulačke, obrázok setu a hover panelov.
   B) Nábeh 21-showroom (varianty.js TRASA_SKUPINY) tento návrh rozbíjal na
      troch miestach a všetky tri sú tu zalepené:
        - `.ox-hero .ox-h1` dostáva `typ:'slova'` a každé slovo má
          `clip-path: inset(-.35em 0 -.3em 0)`. Bočný orez je 0, takže ECHO
          STACK (-0,16em doľava) sa po slovách ORÍZOL. Vraciam bočný presah.
        - `.ox-hero__vizual` dostáva `typ:'clip'`, čo je DRUHÉ odhalenie cez
          to isté miesto, plus `.ox-rv--clip img{transform:scale(1.08)}`, ktoré
          sa bez prechodu cuklo. Rodičovi beriem clip-path, obrázku transform.
        - `.ox-produkt` a `.ox-panel` dostávajú `typ:'posun'` (opacity+transform).
          Skratka `transition:` v tomto bloku im prepísala `transition-property`
          na samé farby, takže nábeh preskočil. Doplnené opacity a transform.
   C) Hover primárneho tlačidla mal cez blok 5561
      (`.ox-btn--hlavne:hover{box-shadow:0 12px 26px -12px rgba(255,0,29,.75)}`)
      červenú žiaru - proti „nulové mäkké tiene“. Dopĺňam `box-shadow: none`.
   D) Hrdina: pri 11vw sa „OXO RED STARTER SET“ v pásme 1360-1545 px zalomil
      na dva riadky (Anton má na ten reťazec ~7,3em, .ox-wrap dáva 1204 px pri
      1440). Strop 144 px + tracking -0,03em drží jeden riadok. Nízky výrez
      sa navyše chytal až od 840 px výšky, takže bežný notebook 1440x900 dostal
      hrdinu cez 140 vh; brána ide na 1000 px a hrdina sedí v pásme 70-100 vh
      z promptu.
   E) Pilulka pod 900 px: `grid-column: span 12` z nej urobilo presne tú „širokú
      lodičku“, pred ktorou komentár varoval, a text v dolnej časti prebiehal
      cez oblúk (pri 390 px mal blok 262 px, tvar v tej výške len 224 px).
      Pilulka ostáva ZVISLÁ: `max-width: min(420px, 100%)` + `margin-inline:auto`,
      vyššie `min-height` a širšie dolné odsadenie (prepočítané na 390 / 620 /
      900 / 1024 / 1440).
   F) Číslovanie sekcií bolo deravé: `counter-increment` sedel na
      `.ox-hlava-sekcie`, ktorú 4. a 6. sekcia nemá, takže z piatich sekcií boli
      očíslované tri. Počítadlo ide na `.ox-sek`, 4. a 6. sekcia majú vlastný
      mono marker.
   G) Prístupnosť: kruhový prekryv pilulky, farebné odhalenie fotiek a zvýraznený
      rám dlaždice boli LEN na hover, hoci celá dlaždica je odkaz. Klávesnica
      z nich nevidela nič - pridaný `:focus-visible`. (Samotný obrys fokusu
      preberať netreba: blok 3243 a globálny `:focus-visible` v _zaklad.css sú
      čitateľné na kréme aj na bielej, 5,09:1 resp. 4,67:1, a na červenej doske
      to rieši biely prstenec z bloku 5563.)
   H) Mŕtve zmazané: `@media (max-width:620px){.ox-hlava-sekcie{align-items:
      center;text-align:center}}` (to isté je nastavené bez brány a s vyššou
      špecificitou), `min-height:0` pre `.ox-hero__vizual` v bráne 1100 (tiež
      už bez brány) a `.ox-sek--krem{background:...}` (pravidlo `.ox-sek` vyššie
      má rovnakú špecificitu a je vyššie v poradí, takže `--krem` už nič nerobí).

   PREBÍJAM !important, lebo markup v pohlady.js b2b() má inline style:
     - ul v 4. sekcii má inline gap:12px a margin:20px 0 -> gap:0 (zlepený
       hairline zoznam) a vlastný rytmus.
     - li.ox-panel má inline padding:14px 18px -> potrebujem stĺpec na číslo.
     - img party-set má inline border-radius:var(--sk-r-velky) -> rounded-sm.
     - h3 v 5. sekcii má inline margin-top:12px -> rytmus pod odznakom.
   Inline `align-items:center` na .ox-mriezka--2, `text-align:center` na
   .ox-wrap v 6. sekcii a `margin-inline:auto` na jej .ox-lead nechávam - ani
   jedno pravidlo tu s nimi nesúperí (margin-bottom je iná vlastnosť).
   `.ox-btn:active scale(.96) !important` (blok 5562) nechávam tak, ako je.
   `.ox-btn:focus-visible{box-shadow:... !important}` (blok 5563) tiež - je to
   jediný obrys fokusu, ktorý je čitateľný aj na červenej doske (biely prstenec
   9,89:1; samotný akcent #D60019 by tam mal 1,99:1).

   DO .ox-kalk nesiaha ani jeden selektor: tlačidlá, .ox-h3, .ox-oko a
   .ox-text-tlmeny adresujem vždy cez konkrétny obal sekcie, nikdy holou
   triedou, lebo kalkulačka má vlastné .ox-btn a .ox-h3 a vlastný prepínač.
   Overené proti doplnky.js kalkulackaHtml(): kalkulačka nepoužíva .ox-mriezka,
   .ox-panel, .ox-odznak, .ox-produkt ani .ox-hlava-sekcie.

   Kontrasty (dopočítané): ink #1B1B1B na kréme 16,16:1, na bielej 17,22:1;
   tlmená #67605A na kréme 5,80:1, na bielej 6,18:1; lead #4A443F na kréme
   9,00:1; mono číslo #D60019 na kréme 5,09:1, na bielej 5,42:1; biela na
   #D60019 5,42:1 (čistá #D60019 dáva 4,98:1, tmavším odtieňom mám rezervu);
   6. sekcia #8C0010: biela 9,89:1, lead 86 % biela 7,47:1, marker 92 % biela
   8,6:1, biele tlačidlo s textom #8C0010 9,89:1. Echo vrstvy sú dekorácia POD
   textom; v najhoršom bode má atramentový ťah na najbližšom červenom echu
   3,46:1, čo pre veľký text (38-144 px) stačí. Žiadny text na stránke nejde
   pod AA.
   ========================================================================== */

/* --- 0) spoločný raster stránky ------------------------------------------- */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] {
	--kt-papier: var(--sk-krem, #FFF7E6);
	--kt-list: #ffffff;
	--kt-ink: #1B1B1B;
	--kt-tlm: #67605A;
	--kt-lead: #4A443F;
	--kt-cerv: var(--sk-akcent-tmavy, #D60019);
	--kt-ram: rgba(27, 27, 27, .14);
	--kt-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	--kt-ease: cubic-bezier(.77, 0, .175, 1);
	--kt-r: 2px;
	counter-reset: ktsek;
	background: var(--kt-papier);
}

/* Prompt drží celú stránku na jednej off-white ploche a sekcie delí ostrou
   linkou, nie výplňou. Krém je teda zem VŠETKÝCH svetlých sekcií (vrátane
   .ox-sek--krem, ktorej základ dáva --sk-bg-2) a biela ostáva doskám. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek {
	background: var(--kt-papier);
	border-top: 1px solid var(--kt-ram);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero { border-top: 0; }
/* počítadlo sekcií na SEKCII, nie na hlavičke - 4. a 6. sekcia hlavičku nemá */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek { counter-increment: ktsek; }

/* zvislý vlas, ktorý vteká do sekcie zhora */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek::before {
	content: ''; position: absolute; top: 0; left: 50%;
	width: 1px; height: clamp(38px, 4.6vw, 72px);
	background: rgba(27, 27, 27, .22); pointer-events: none;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava::before { background: rgba(255, 255, 255, .34); }

/* Typografia. Každý nadpis adresujem cez obal sekcie, nie holou triedou -
   .ox-h3 má aj hlavička kalkulačky a tej sa nesmiem dotknúť. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie .ox-h2,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-h2,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-h3 {
	font-family: var(--sk-font-nadpis, 'Anton', Impact, sans-serif);
	text-transform: uppercase; letter-spacing: -.02em; color: var(--kt-ink);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie .ox-h2,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-h2 { font-size: clamp(30px, 5.2vw, 70px); line-height: 1.22; margin: 0 0 .3em; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.22; margin: 20px 0 .5em !important; }

/* mono kicker s vodorovnou linkou - technický popisok ako na titulke */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-oko,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie .ox-oko,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-oko {
	font-family: var(--kt-mono); font-size: 12px; font-weight: 700;
	letter-spacing: .2em; color: var(--kt-ink); gap: 12px; margin-bottom: 18px;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-oko::before,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie .ox-oko::before,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-oko::before { width: 40px; height: 1px; background: var(--kt-cerv); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-lead,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-lead { font-size: 17.5px; line-height: 1.62; color: var(--kt-lead); max-width: 58ch; }

/* hlava sekcie: číslo, kicker, nadpis - všetko na os, pod zvislým vlasom */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie {
	flex-direction: column; align-items: center; justify-content: flex-start;
	gap: 0; text-align: center; margin-bottom: clamp(38px, 4vw, 64px);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie::before,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:first-child::before,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap::before {
	content: counter(ktsek, decimal-leading-zero);
	display: block; margin-bottom: 18px;
	font: 700 12px/1 var(--kt-mono); letter-spacing: .22em;
	color: var(--kt-cerv);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap::before { color: rgba(255, 255, 255, .92); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie > div { text-align: center; max-width: 26ch; }

/* Pilulkové tlačidlá s 1px rámom, ktoré sa na hover invertujú. Adresujem len
   tri miesta, kde tlačidlá na stránke naozaj sú - holé .ox-btn by siahlo aj
   na „Pridať do košíka“ a „Spustiť predaj“ vnútri kalkulačky. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn {
	border-radius: 999px; border-width: 1px; box-shadow: none;
	font-family: var(--sk-font-text, Inter, system-ui, sans-serif);
	font-weight: 700; font-size: 14px; letter-spacing: .09em; text-transform: uppercase;
	transition: background .3s var(--kt-ease), color .3s var(--kt-ease),
	            border-color .3s var(--kt-ease), box-shadow .3s var(--kt-ease);
}
/* box-shadow:none aj v hoveri - blok 5561 tam inak vráti červenú žiaru */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn:hover:not(:disabled),
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn:hover:not(:disabled),
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn:hover:not(:disabled) { transform: none; box-shadow: none; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--velke,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--velke { padding: 20px 46px; min-height: 62px; font-size: 15px; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn--hlavne {
	background: var(--kt-cerv); color: #fff; border-color: var(--kt-cerv);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne:hover:not(:disabled),
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn--hlavne:hover:not(:disabled) { background: var(--kt-ink); border-color: var(--kt-ink); color: #fff; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys { color: var(--kt-ink); border-color: var(--kt-ink); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys:hover:not(:disabled) { background: var(--kt-ink); color: var(--kt-papier); }

@keyframes ox-kt-odhal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* --- 1) HRDINA: Echo Stack -------------------------------------------------
   Prompt: hrdina je čistá typografia na os, 70-100 vh, päť vrstiev. Fotku sady
   nemôžeme zmazať, tak z nej robím široký rámovaný pás POD textom - v promptu
   obrazový materiál začína až v showcase, nie v hrdinovi. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero {
	min-height: 78vh; display: grid; align-content: center; overflow: hidden;
	padding-block: clamp(44px, 5.4vw, 88px) clamp(36px, 4vw, 68px);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka {
	grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.6vw, 56px);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__text { text-align: center; }
/* základ maľuje pod nadpis biely radiálny závoj kvôli časticovým témam;
   na krémovom papieri by z toho bola biela mláka */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__text::before { content: none; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-oko { margin-bottom: 26px; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 {
	font-size: clamp(38px, 9.2vw, 144px); line-height: 1.02; letter-spacing: -.03em;
	margin: 0 0 .3em; text-wrap: balance;
	/* ECHO STACK - štyri vrstvy, krok -0,04em vľavo hore, farba bledne von */
	text-shadow:
		-.04em -.04em 0 var(--sk-akcent, #D60019),
		-.08em -.08em 0 #FF6274,
		-.12em -.12em 0 #FF9FA9,
		-.16em -.16em 0 var(--sk-ruz, #FFD9D6);
}
/* Nábeh 21-showroom delí h1 na slová a každé slovo dostane
   clip-path: inset(-.35em 0 -.3em 0). Bočný orez 0 by echo (-0,16em doľava)
   odrezal presne na hrane slova - dávam mu 0,24em presah. Zvislý orez, ktorý
   drží samotný nábeh, ostáva. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 .ox-rv__slovo { clip-path: inset(-.35em -.24em -.3em -.24em); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-lead { margin-inline: auto; margin-bottom: 34px; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie { justify-content: center; gap: 14px; margin-top: 0; }
/* fotka sady ako pás s clip-path odhalením (700 ms) a grayscale 20 %.
   clip-path: none na obale je nutné - nábeh mu dáva `.ox-rv--clip`, čo je
   druhé odhalenie cez to isté miesto. transform:none zasa ruší
   `.ox-rv--clip img { transform: scale(1.08) }`, ktoré sa tu cuklo bez prechodu. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual {
	min-height: 0; background: var(--kt-list); border: 1px solid var(--kt-ram);
	border-radius: var(--kt-r); padding: clamp(12px, 1.6vw, 24px); overflow: hidden;
	clip-path: none;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img {
	width: 100%; max-height: min(38vh, 360px); filter: grayscale(.2); transform: none;
	animation: ox-kt-odhal .7s var(--kt-ease) both;
	transition: filter .7s var(--kt-ease), transform .7s var(--kt-ease);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual:hover img { filter: grayscale(0); transform: scale(1.05); }

/* --- 2) SORTIMENT: asymetrický 12-stĺpcový showcase ------------------------
   Prompt: 8 stĺpcov široký obdĺžnik s rounded-sm rohmi + 4 stĺpce zvislá
   pilulka. Zaceľuje to aj dieru po tretej dlaždici, ktorú markup nemá. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 32px); align-items: stretch;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(1) { grid-column: span 8; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) { grid-column: span 4; }
/* opacity a transform MUSIA ostať v prechode - nábeh `.ox-rv--posun` ich
   animuje a skratka `transition:` by mu prepísala transition-property */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt {
	background: var(--kt-list); border: 1px solid var(--kt-ram); border-radius: var(--kt-r);
	box-shadow: none;
	transition: border-color .4s var(--kt-ease), background .4s var(--kt-ease),
	            opacity .7s var(--sk-prechod), transform .85s var(--sk-prechod);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt:hover,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt:focus-visible {
	box-shadow: none; border-color: var(--kt-ink);
}
/* transform ruším len vtedy, keď dlaždica už nie je v nábehu */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt:hover:not(.ox-rv) { transform: none; }
/* Blok 3243 (`html[data-tema^="21"] .ox-sek a:focus-visible`) kladie na každý
   odkaz v sekcii `border-radius: 2px`, čo by z pilulky urobilo hranatý rámik
   fokusu - ALE má špecificitu (0,3,2), kým tunajšie pravidlá majú ID, takže
   rádius z tohto bloku ostáva. Preberať ho v :focus-visible je mŕtvy kód,
   preto tu žiadny nie je. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto { background: var(--kt-list); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto img {
	filter: grayscale(.2);
	transition: transform .7s var(--kt-ease), filter .7s var(--kt-ease);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt:hover .ox-produkt__foto img,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt:focus-visible .ox-produkt__foto img { transform: scale(1.05); filter: grayscale(0); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt__telo { padding: 24px 26px 28px; gap: 10px; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov {
	font-family: var(--sk-font-nadpis, 'Anton', Impact, sans-serif);
	font-size: clamp(20px, 1.7vw, 26px); line-height: 1.22; text-transform: uppercase;
	letter-spacing: -.02em; color: var(--kt-ink);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt__popis {
	font-size: 14.5px; line-height: 1.55; color: var(--kt-tlm); -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* 8-stĺpcový obdĺžnik */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(1) .ox-produkt__foto { aspect-ratio: 16 / 9; }
/* 4-stĺpcová PILULKA (prompt: „Pill-Shaped Vertical Showcase“).
   Dolné odsadenie je prepočítané tak, aby posledný riadok textu nikde
   neprebehol cez oblúk: pri 1440 je tvar vo výške odsadenia široký 285 px
   a text 236 px, pri 1024 je 236 / 185 px. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) {
	border-radius: 999px; min-height: 560px; text-align: center;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__foto {
	aspect-ratio: auto; flex: 1 1 auto; min-height: 0;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__foto img { padding: 15% 17% 6%; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__telo {
	flex: 0 0 auto; align-items: center;
	padding: 6px clamp(44px, 19%, 86px) clamp(58px, 17%, 96px);
}
/* kruhový prekryv s tenkým obrysom, viditeľný na hover aj pri fokuse
   (celá dlaždica je odkaz, klávesnica nesmie prísť o odhalenie) */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__foto::after {
	content: '\2192'; position: absolute; left: 50%; top: 50%; z-index: 3;
	width: 92px; height: 92px; margin: -46px 0 0 -46px;
	display: grid; place-items: center; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .85); background: var(--kt-cerv);
	color: #fff; font: 400 28px/1 var(--sk-font-text, Inter, system-ui, sans-serif);
	opacity: 0; transform: scale(.88);
	transition: opacity .4s var(--kt-ease), transform .4s var(--kt-ease);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2):hover .ox-produkt__foto::after,
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2):focus-visible .ox-produkt__foto::after { opacity: 1; transform: scale(1); }

/* --- 3) VÝPOČET ZISKU: iba priestor okolo kalkulačky -----------------------
   .ox-kalk-pozn-host je súrodenec kalkulačky, nie jej vnútro. V markupe je len
   pre neprihláseného (pohlady.js b2b), pre partnera pravidlo nič nerobí. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] #ox-zisk .ox-hlava-sekcie { margin-bottom: clamp(30px, 3.2vw, 46px); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host {
	max-width: 74ch; margin: 0 auto clamp(28px, 3vw, 44px); text-align: center;
	background: var(--kt-list); border: 1px solid var(--kt-ram); border-radius: var(--kt-r);
	padding: 18px clamp(20px, 3vw, 34px); color: var(--kt-tlm);
	font-size: 14.5px; line-height: 1.6;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host b { color: var(--kt-ink); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a {
	color: var(--kt-cerv); text-decoration: underline; text-underline-offset: 3px;
}

/* --- 4) ČO JE V SETE: hairline zoznam s číslovaním ------------------------- */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 { gap: clamp(28px, 4vw, 68px); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-h2 { max-width: 14ch; }
/* !important: ul má inline gap:12px a margin:20px 0, chcem zlepené hairliny */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 ul {
	counter-reset: ktpol; gap: 0 !important; margin: 28px 0 34px !important;
}
/* !important: li.ox-panel má inline padding:14px 18px, treba stĺpec na číslo */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel {
	position: relative; counter-increment: ktpol;
	padding: 18px 16px 18px 62px !important;
	background: transparent; border-radius: 0; box-shadow: none;
	border-top: 1px solid var(--kt-ram);
	font-size: 16px; line-height: 1.5; color: var(--kt-ink);
	transition: background .3s var(--kt-ease),
	            opacity .7s var(--sk-prechod), transform .85s var(--sk-prechod);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel:last-child { border-bottom: 1px solid var(--kt-ram); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel::before {
	content: counter(ktpol, decimal-leading-zero);
	position: absolute; left: 0; top: 21px;
	font: 700 12px/1 var(--kt-mono); letter-spacing: .18em; color: var(--kt-cerv);
}
/* zem sekcie je krém, takže hover ide na bielu - inak by sa nič nestalo */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel:hover { background: var(--kt-list); }
/* !important: img má inline border-radius:var(--sk-r-velky), Swiss chce rounded-sm */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child img {
	border-radius: var(--kt-r) !important;
	width: 100%; background: var(--kt-list);
	border: 1px solid var(--kt-ram); padding: clamp(14px, 2vw, 30px);
	animation: ox-kt-odhal .7s var(--kt-ease) both;
}

/* --- 5) AKO TO PREBIEHA: bespoke service cards -----------------------------
   Prompt: rošt s 32px medzerami, rám ink/10, pozadie priehľadné -> biele na
   hover, 64x64 geometrický kontajner, ktorý sa otočí o 12 stupňov, a šípka
   vpravo. Kroky sú postupnosť, takže šípku kreslím do medzery MEDZI kartami -
   nie je to falošné CTA, je to spojka „ďalší krok“. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 { gap: 32px; }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel {
	position: relative;
	background: transparent; border: 1px solid var(--kt-ram); border-radius: var(--kt-r);
	box-shadow: none; padding: clamp(22px, 2.4vw, 34px);
	transition: background .4s var(--kt-ease), border-color .4s var(--kt-ease),
	            opacity .7s var(--sk-prechod), transform .85s var(--sk-prechod);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:hover { background: var(--kt-list); border-color: var(--kt-ink); }
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:not(:last-child)::after {
	content: '\2192'; position: absolute; top: 50%; right: -32px;
	width: 32px; height: 1em; margin-top: -.5em;
	display: grid; place-items: center; pointer-events: none;
	font: 400 18px/1 var(--sk-font-text, Inter, system-ui, sans-serif);
	color: var(--kt-cerv);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak {
	width: 64px; height: 64px; padding: 0; border-radius: 0;
	display: grid; place-items: center;
	background: transparent; border: 1px solid var(--kt-ink); color: var(--kt-ink);
	font: 700 22px/1 var(--kt-mono); letter-spacing: 0; text-transform: none;
	transition: transform .4s var(--kt-ease), background .4s var(--kt-ease),
	            color .4s var(--kt-ease), border-color .4s var(--kt-ease);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:hover .ox-odznak {
	transform: rotate(12deg); background: var(--kt-cerv); border-color: var(--kt-cerv); color: #fff;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-text-tlmeny { color: var(--kt-tlm); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* --- 6) POĎME DO TOHO: tmavá doska ako uzáver ------------------------------
   Prompt zatvára stránku tmavou plochou #1e1e1e s tenkým bielym horným rámom.
   Preložené na OXO je to tá istá deep-red doska #8C0010, ktorú už má web
   (blok 4116) - inak by medzi sekciou a pätou vznikli dva rôzne červené pásy.
   Nadpis dostáva zmenšený Echo Stack ako zátvorku k hrdinovi. */
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava {
	background: #8C0010; border-top: 1px solid rgba(255, 255, 255, .14);
	padding-block: clamp(64px, 8vw, 128px);
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2 {
	color: #fff; font-size: clamp(34px, 6vw, 88px); line-height: 1.22; margin: 0 0 .26em;
	text-shadow: -.03em -.03em 0 #5C000B, -.06em -.06em 0 #2E0006;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-lead {
	color: rgba(255, 255, 255, .86); max-width: 52ch; margin-bottom: 36px;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne {
	background: #fff; color: #8C0010; border-color: #fff;
}
html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne:hover:not(:disabled) {
	background: transparent; color: #fff; border-color: #fff;
}

/* --- 7) šírky 1440 / 1280 / 1024 / 768 / 390 -------------------------------
   Nad ~1448 px sa .ox-wrap (max-width 1320 v témach 21*, 1560 v základe) už
   neroztiahne tak, aby h1 nevošlo - strop 144 px drží jeden riadok v oboch
   prípadoch, takže vetva „širšie než 1440“ by bola mŕtvy kód. */

/* Nízke výrezy: základ tu zmenšuje .ox-h1 a ja musím tiež, inak 9,2vw echo
   vytlačí tlačidlá pod ohyb. Hranica ide na 1000 px výšky (nie 840), aby sa
   chytil aj bežný notebook 1440x900 a 1280x960. min-width 1100 presne kopíruje
   hranicu základu, nech medzi nimi nie je diera na 1100 px. */
@media (max-height: 1000px) and (min-width: 1100px) {
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero { min-height: 0; padding-block: 40px 52px; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 { font-size: clamp(38px, 6.6vw, 92px); }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img { max-height: min(30vh, 280px); }
}

@media (max-width: 1100px) {
	/* základ dáva vizuálu order:-1 (fotka nad textom), tu ju chcem pod textom */
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual { order: 0; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero { min-height: 0; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:not(:last-child)::after { right: -24px; width: 24px; }
	/* v dvojstĺpci by šípka z druhej karty ukazovala mimo riadok */
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:nth-child(2n)::after { content: none; }
}

/* 8+4 split drží až po 900 px. Pod 900 px pilulku NESTOHUJEM do celej šírky -
   z 999px rádiusu by bola široká lodička a text v spodku by prebehol cez oblúk.
   Ostáva zvislá, len na os a s vlastným stropom šírky. */
@media (max-width: 900px) {
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(1) { grid-column: span 12; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) {
		grid-column: span 12; min-height: 560px;
		max-width: min(420px, 100%); margin-inline: auto;
	}
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__foto img { padding: 12% 14% 5%; }
}

@media (max-width: 860px) {
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 {
		font-size: clamp(36px, 12.5vw, 82px);
		text-shadow:
			-.035em -.035em 0 var(--sk-akcent, #D60019),
			-.07em -.07em 0 #FF6274,
			-.105em -.105em 0 #FF9FA9,
			-.14em -.14em 0 var(--sk-ruz, #FFD9D6);
	}
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie > div,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-h2 { max-width: none; }
}

@media (max-width: 620px) {
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie { flex-direction: column; align-items: stretch; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn { width: 100%; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__telo { padding: 6px clamp(40px, 18%, 80px) clamp(52px, 16%, 88px); }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__foto::after { width: 74px; height: 74px; margin: -37px 0 0 -37px; font-size: 24px; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 { grid-template-columns: 1fr; gap: 18px; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel::after { content: none; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt__telo { padding: 20px 20px 24px; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel { padding: 16px 12px 16px 54px !important; font-size: 15.5px; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-lead,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-lead { font-size: 16.5px; }
}

/* --- 8) pohyb ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child img {
		animation: none; clip-path: none;
	}
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto img,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2) .ox-produkt__foto::after,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-btn,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn {
		transition: none;
	}
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual:hover img,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt:hover .ox-produkt__foto img,
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-produkt:focus-visible .ox-produkt__foto img { transform: none; }
	html[data-ox-b2bstr="kontrast"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:hover .ox-odznak { transform: none; }
}

/* ---- b2bstr / noir: Noir  (podľa ) ---- */
/* =============================================================================
   B2B / návrh „Noir" (id: noir) - celá stránka /b2b
   -----------------------------------------------------------------------------
   Východisko: knižničný prompt superdesign.dev „red noir style" (sd/red-noir-style.md).
   Z neho preberáme VERBATIM: čiernu scénu s červeným nádychom navrchu (#1a0505 ->
   #000), rozmazanú červenú guľu (u promptu 800 px, blur 120 px) NIELEN v hrdinovi,
   ale ako priebežnú scénu; rastr 40x40 px z 3 % bielej maskovaný radiálne do
   stratena; stúpajúce hviezdy; nábeh obsahu „fade-in-up" 0,8 s s odstupňovaným
   oneskorením; pilulkový odznak (rounded-full, bg biela/5, rám biela/10,
   backdrop-blur) s pulzujúcou bodkou; nadpisy s prechodom biela -> biela/40 cez
   background-clip: text; ručne kreslené červené podčiarknutie pod nadpisom;
   CTA „shiny-cta" s rotujúcim kónickým rámom a bodkovanou textúrou na 10 %; bento
   mriežku (širšia hlavná dlaždica S VÄČŠOU SADZBOU, rounded-xl 12px, rám 1px
   biela/10, hover zosvetlí rám na biela/20 a rozsvieti červenú radiálnu žiaru
   vpravo hore na ~10 %); riadok odhalený až pri hoveri (mono popiska + šípka);
   kartu „Recommended" s červeným rámom, červenou žiarou, plávajúcou pilulkou
   a zoznamom s červenými fajkami; obrovské obrysové písmo z päty
   (-webkit-text-stroke); plný farebný pás cez celú šírku, ktorý preruší čiernu;
   rytmus py-32, mb-20 pod hlavičkou sekcie, gap-4 v bente, vlasové oddeľovače
   border-white/5 a červený ::selection.
   Preložené len dve veci: (a) paleta a písma - #ef233c -> naša #D60019, Manrope ->
   Anton verzálky, Inter ostáva Inter, mono ostáva mono; (b) nosič - z Tailwindu do
   čistého CSS nad našim nemenným markupom. Vynechané (nemajú u nás náprotivok):
   navigačná pilulka, horný gradient-blur pás, logo pás, cenník, waitlist, päta.
   -----------------------------------------------------------------------------
   Čo prebíjame v základe (a prečo):
     - .ox-sek--krem / .ox-sek--tmava pozadia, .ox-hero__text::before biely závoj,
       .ox-produkt:hover translateY, .ox-btn--obrys:hover (atramentové pozadie by
       bolo na čiernej neviditeľné), .ox-odznak (z červenej pilulky robíme obrysové
       číslo), .ox-produkt__foto padding/contain.
     - !important presne 3x proti INLINE style v markupe + 2x proti !important
       z varianty.css (blok W5 tlačidiel):
         1) li.ox-panel  padding      (inline `padding:14px 18px`)
         2) img v 4. sekcii border-radius (inline `border-radius:var(--sk-r-velky)`)
         3) .ox-panel > .ox-h3 margin-top (inline `margin-top:12px`)
         4+5) .ox-btn:focus-visible box-shadow - varianty.css:5563 ho má
              s !important a jeho prstenec `var(--sk-bg)` je biely; na čiernej
              je to v poriadku, na BIELOM tlačidle červeného pásu nie.
     - .ox-btn:active scale(.96) !important (varianty.css:5562) NEDIERAME, ostáva.
     - Základ má vetvu pre nízke notebooky (max-height:840px a min-width:1100px).
       Naše pravidlá hrdinu majú vyššiu špecifickosť, takže by ju umlčali -
       preto ju v bloku 7b) doslova opakujeme.
   ⛔ Do vnútra .ox-kalk nesiaha ani jeden selektor ANI JEDNA DEDENÁ PREMENNÁ.
   Preto je 3. sekcia riešená selektorom `> #ox-zisk > .ox-wrap > ...` a všetky
   spoločné pravidlá majú `section:not([id="ox-zisk"])`. Kalkulačka má vlastný
   prepínač (data-ox-kalk: zaklad / bento / doska / uctenka).
   Pozor: zámerne NIE `:not(#ox-zisk)` - špecifickosť `:not()` sa počíta podľa jeho
   argumentu, takže ID vnútri by spoločné pravidlá vyhnalo nad pravidlá sekcií
   a tie by prestali platiť. `[id="ox-zisk"]` je len atribút, a tým je poradie správne.
   Poznámka k `nth-of-type`: sekcie číslujeme podľa typu, nie podľa poradia medzi
   VŠETKÝMI deťmi. Keby do #ox-obsah niekedy pribudol nesekčný uzol (widget, oznam),
   `nth-child` by celé číslovanie posunulo o jedna a návrh by sa rozsypal.
   ========================================================================== */

/* --- 0) tokeny trasy ------------------------------------------------------ */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] {
	--n-cierna:     #08070A;                       /* prompt: bg-black */
	--n-cierna-2:   #190506;                       /* prompt: from-[#1a0505], u nás z našej červenej */
	--n-linka:      rgba(255, 255, 255, .10);      /* prompt: border-white/10 */
	--n-linka-akt:  rgba(255, 255, 255, .22);      /* prompt: hover:border-white/20 */
	--n-vrstva:     rgba(255, 255, 255, .045);     /* prompt: bg-white/5 */
	--n-tlmeny:     #A9A5A3;                       /* 8,2:1 na #08070A (prompt: text-zinc-400) */
	--n-cerv:       var(--sk-akcent, #D60019);
	--n-cerv-tmava: var(--sk-akcent-tmavy, #D60019);/* biely text 5,4:1 - čistá #D60019 je tesná */
	--n-cerv-jas:   #FF4436;                       /* #D60019 zosvetlená: 5,9:1 na čiernej, drobný text */
	--n-mono:       ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;
	--n-r:          12px;                          /* prompt: rounded-xl */
	--n-r-maly:     8px;                           /* prompt: rounded-lg */
	--sk-rytmus:    clamp(72px, 9vw, 128px);       /* prompt: py-32 */
	--sk-mriezka:   16px;                          /* prompt: gap-4 */
	--sk-maxw:      1320px;
	--sk-pad:       clamp(18px, 4.4vw, 64px);
	background: var(--n-cierna);
	color: #fff;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] ::selection { background: var(--n-cerv); color: #fff; }

/* prompt: fade-in-up 0.8s ease-out s oneskorením 0,1 - 0,4 s.
   `both` je povinné: bez neho by prvok pred štartom blikol na mieste. */
@keyframes ox-noirb2b-vstup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* spoločná typografia mimo kalkulačky (prompt: Manrope semibold tracking-tight) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:not([id="ox-zisk"]) .ox-h2 {
	/* Anton verzálky s mäkčeňmi potrebujú viac vedenia ako prompt (leading-[1.1]) */
	font-size: clamp(30px, 4.4vw, 52px); line-height: 1.16; letter-spacing: -.005em;
	text-transform: uppercase; color: #fff; margin: 0;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:not([id="ox-zisk"]) .ox-hlava-sekcie { display: block; margin-bottom: clamp(42px, 5vw, 80px); } /* prompt: mb-20 */
/* prompt: ručne kreslený červený „swoosh" pod nadpisom - tu ako oblúk z border-bottom */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:not([id="ox-zisk"]) .ox-hlava-sekcie .ox-h2::after {
	content: ''; display: block; width: clamp(120px, 16vw, 190px); height: 11px;
	margin-top: 12px;
	border-bottom: 2px solid var(--n-cerv-jas);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	opacity: .75;
}
/* mono „kicker" s vodorovnou linkou (prompt: text-xs font-mono uppercase tracking-widest) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:not([id="ox-zisk"]) .ox-hlava-sekcie .ox-oko {
	font-family: var(--n-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .22em; color: var(--n-cerv-jas); margin-bottom: 18px;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:not([id="ox-zisk"]) .ox-hlava-sekcie .ox-oko::before {
	width: 44px; height: 1px; background: var(--n-cerv-jas); opacity: .8;
}

/* --- 1) HERO - čierna scéna, rastr, hviezdy, červená guľa ------------------ */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero {
	padding-block: clamp(52px, 7.4vw, 120px) clamp(60px, 8vw, 128px);
	background-color: var(--n-cierna);
	background-image: radial-gradient(760px 620px at 62% 8%, rgba(225, 0, 26, .20), transparent 70%),
		linear-gradient(180deg, var(--n-cierna-2) 0%, var(--n-cierna) 64%);
}
/* prompt: rastr 40x40 z bielej/3 % maskovaný radiálne (black 40% -> transparent 80%) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero::before {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(circle at 50% 42%, #000 38%, transparent 80%);
	        mask-image: radial-gradient(circle at 50% 42%, #000 38%, transparent 80%);
}
/* prompt: dve vrstvy hviezd stúpajúcich nahor (animStar 50s / 80s) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero::after {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		radial-gradient(1px 1px at 26px 38px, rgba(255, 255, 255, .55), transparent 55%),
		radial-gradient(1.6px 1.6px at 118px 172px, rgba(255, 255, 255, .34), transparent 55%);
	background-size: 210px 260px, 340px 420px;
	animation: ox-noirb2b-hviezdy 62s linear infinite;
	opacity: .8;
}
@keyframes ox-noirb2b-hviezdy { to { background-position: 0 -520px, 0 -840px; } }

html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__mriezka {
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(28px, 4.4vw, 68px);
}
/* základ tu maľuje BIELY radiálny závoj (var(--sk-bg)); na čiernej ho meníme na červenú žiaru */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__text::before {
	inset: -14% -18%;
	background: radial-gradient(ellipse at 24% 42%, rgba(225, 0, 26, .22), transparent 68%);
}
/* prompt: pilulkový odznak s pulzujúcou bodkou */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__text > .ox-oko {
	gap: 10px; padding: 7px 17px 7px 13px; margin-bottom: 28px;
	border: 1px solid var(--n-linka); border-radius: 999px;
	background: var(--n-vrstva);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font-family: var(--n-mono); font-size: 11px; font-weight: 700; letter-spacing: .2em;
	white-space: nowrap;                           /* pilulka sa nesmie zalomiť na 2 riadky */
	color: var(--sk-ruz, #FFD9D6);                 /* 11,6:1 na pilulke */
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__text > .ox-oko::before {
	width: 8px; height: 8px; border-radius: 50%; background: var(--n-cerv-jas);
	animation: ox-noirb2b-tep 1.9s ease-out infinite;
}
@keyframes ox-noirb2b-tep {
	0%   { box-shadow: 0 0 0 0 rgba(255, 68, 54, .55); }
	70%  { box-shadow: 0 0 0 9px rgba(255, 68, 54, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 68, 54, 0); }
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-h1 {
	/* „OXO RED STARTER SET" je bez diakritiky, znesie tesné vedenie z promptu */
	font-size: clamp(44px, 7.4vw, 96px); line-height: 1.08; letter-spacing: -.012em;
	text-transform: uppercase; margin: 0 0 22px; color: #fff;
}
/* prompt: nadpis ako prechod biela -> biela/40; bez podpory ostáva plná biela */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-h1 {
		/* prompt má from-white via-white to-white/40 na DVOCH riadkoch; náš nadpis
		   ide na troch a pri .40 by tretí riadok spadol na 4,1:1. Zlom posúvame
		   na 62 % a dno dvíhame na .52 - vzhľad ostáva, spodný riadok má 5,7:1. */
		background-image: linear-gradient(180deg, #fff 0%, #fff 62%, rgba(255, 255, 255, .52) 100%);
		-webkit-background-clip: text; background-clip: text;
		-webkit-text-fill-color: transparent; color: transparent;
	}
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.66; color: var(--n-tlmeny); max-width: 54ch; margin: 0 0 34px; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__akcie { gap: 16px; margin-top: 0; }

/* prompt: animate-fade-up so stagger oneskorením (0.1s / 0.2s / 0.3s / 0.4s) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__text > .ox-oko,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-h1,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-lead,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__akcie,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual {
	animation: ox-noirb2b-vstup .8s cubic-bezier(.16, 1, .3, 1) both;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__text > .ox-oko { animation-delay: .10s; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-h1              { animation-delay: .20s; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-lead            { animation-delay: .30s; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__akcie     { animation-delay: .40s; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual    { animation-delay: .30s; }

/* prompt: „shiny-cta" - rotujúci kónický rám okolo čierneho tela + bodkovaná textúra */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--hlavne {
	position: relative; isolation: isolate; overflow: hidden;
	border: 0; border-radius: 999px; background: #0C0A0B; color: #fff;
	box-shadow: 0 0 40px -14px rgba(225, 0, 26, .95);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--hlavne::before {
	content: ''; position: absolute; inset: -160%; z-index: -2;
	background: conic-gradient(from 0deg, transparent 0 58%, var(--n-cerv) 72%, #FF6A5C 82%, transparent 92%);
	animation: ox-noirb2b-obeh 2.6s linear infinite;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--hlavne::after {
	content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
	background-color: #0C0A0B;
	background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) .5px, transparent .5px);
	background-size: 4px 4px;
}
@keyframes ox-noirb2b-obeh { to { transform: rotate(360deg); } }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--hlavne:hover:not(:disabled) {
	box-shadow: 0 0 56px -10px rgba(225, 0, 26, 1);
}
/* prompt: druhé tlačidlo bg-zinc-900 + border-zinc-800; základ tu dáva atramentové pozadie.
   `border-color` doplňujeme do prechodu - globálny .ox-btn prechod (varianty.css)
   ho nemá, takže by rám pri hoveri skočil. */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--obrys {
	border: 1px solid var(--n-linka); border-radius: 999px;
	background: var(--n-vrstva); color: #fff; box-shadow: none;
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .2s var(--sk-prechod),
	            color .2s var(--sk-prechod), border-color .2s var(--sk-prechod);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--obrys:hover:not(:disabled) {
	background: rgba(255, 255, 255, .10); border-color: var(--n-linka-akt); color: #fff;
}
/* fotka je nepriehľadná JPG na bielom bokehu -> rámujeme ju ako bielu fotokartu */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual {
	z-index: 1; min-height: 0; align-self: center;
	border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--n-r);
	background: #fff; overflow: hidden;
	box-shadow: 0 48px 96px -54px rgba(0, 0, 0, .95), 0 0 72px -34px rgba(225, 0, 26, .7);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual img {
	width: 100%; max-height: none; object-fit: cover; filter: none; border-radius: 0;
}

/* --- 2) SORTIMENT - bento (hlavná dlaždica + vedľajšia) -------------------- */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) {
	position: relative; overflow: hidden;
	background: var(--n-cierna);
	border-top: 1px solid rgba(255, 255, 255, .05);/* prompt: border-t border-white/5 */
}
/* prompt: 800x800 rozmazaná červená guľa v scéne. Namiesto filter: blur(120px)
   (ďalšia kompozitná vrstva na každý scroll) ju kreslíme priamo mäkkým radiálom -
   opticky to isté, bez rastrovania a bez pretekania mimo sekcie. */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2)::before {
	content: ''; position: absolute; z-index: 0; pointer-events: none;
	left: 50%; top: 46%; width: min(800px, 130vw); aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle closest-side, rgba(225, 0, 26, .22), rgba(225, 0, 26, .07) 46%, transparent 72%);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) > .ox-wrap { position: relative; z-index: 1; }
/* v mriežke pre 3 stĺpce sú len 2 dlaždice; prompt to rieši bentom, kde hlavná
   dlaždica zaberá viac stĺpcov - tu 1,62 : 1, takže riadok je celý vyplnený */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-mriezka--3 {
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt {
	min-width: 0;
	border: 1px solid var(--n-linka); border-radius: var(--n-r);
	background: linear-gradient(180deg, rgba(30, 27, 32, .85) 0%, var(--n-cierna) 100%);
	box-shadow: none;
	transition: border-color .25s var(--sk-prechod), box-shadow .25s var(--sk-prechod);
}
/* prompt karty sa NEDVÍHAJÚ, len im zosvetlie rám a rozsvieti sa červená žiara */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:hover {
	transform: none; border-color: var(--n-linka-akt);
	box-shadow: 0 36px 80px -56px rgba(225, 0, 26, .9);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
	background: radial-gradient(circle at 100% 0%, var(--n-cerv), transparent 62%);
	transition: opacity .3s var(--sk-prechod);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:hover::after,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:focus-visible::after { opacity: .10; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__foto { aspect-ratio: auto; height: clamp(190px, 21vw, 300px); z-index: 0; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__foto img { padding: 0; object-fit: cover; }
/* clona, aby biely bokeh fotky prešiel do čiernej karty bez tvrdého rezu */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__foto::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 52%, rgba(8, 7, 10, .96) 100%);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__telo { position: relative; z-index: 2; padding: 24px 26px 26px; gap: 10px; }
/* téma 21 robí z nadpisu flex kontajner (kvôli svojej šípke); šípku vypíname,
   tak nech je nadpis zase normálny blok - inak nefunguje text-wrap: balance */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__nazov { display: block; font-size: clamp(20px, 2vw, 28px); line-height: 1.18; text-transform: uppercase; color: #fff; }
/* živá téma 21 pridáva na .ox-produkt__nazov::after šípku; prompt má odhaľovací
   riadok až pri hoveri, takže stálu šípku vypíname, nech si neprekážajú */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__nazov::after { display: none; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__popis { font-size: 14.5px; line-height: 1.6; color: var(--n-tlmeny); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* prompt: hlavná bento dlaždica má aj väčšiu sadzbu (text-3xl / text-lg),
   vedľajšie menšiu (text-xl / text-sm) - bez toho je bento len širší obdĺžnik */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__foto { height: clamp(210px, 25vw, 360px); }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__telo { padding: 30px 32px 30px; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__nazov { font-size: clamp(24px, 2.7vw, 34px); }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__popis { font-size: 16.5px; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
/* prompt: mono riadok „EXPLORE FEATURE ->", odhalí sa až pri hoveri */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__telo::after {
	content: 'ZOBRAZIŤ \2192';
	margin-top: auto; padding-top: 16px;
	font-family: var(--n-mono); font-size: 11px; letter-spacing: .2em; color: var(--n-cerv-jas);
	opacity: 0; transform: translateY(8px);
	transition: opacity .25s var(--sk-prechod), transform .25s var(--sk-prechod);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:hover .ox-produkt__telo::after,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:focus-visible .ox-produkt__telo::after,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:focus-within .ox-produkt__telo::after {
	opacity: 1; transform: none;
}
@media (hover: none) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__telo::after { opacity: 1; transform: none; }
}

/* --- 3) VÝPOČET ZISKU - svetlý pás, ktorý preruší čiernu ------------------- */
/* Prompt prerušuje čiernu plným farebným pásom cez celú šírku. U nás je v tejto
   sekcii kalkulačka s vlastným prepínačom návrhov, do ktorej nesmieme siahnuť,
   preto je pás krémový a nie červený: všetky štyri návrhy kalkulačky (zaklad,
   bento, doska, uctenka) sú stavané na svetlý podklad sekcie - doska si dokonca
   sama píše „poznámka pre hosťa stojí na svetlom pozadí sekcie".
   ⚠️ Zámerne tu NEPREPISUJEME --sk-text-tlmeny ani žiadnu inú --sk-* premennú:
   premenné sa dedia, takže by nám pretiekli do .ox-kalk. Témová hodnota
   (#6B625C) má na kréme 5,6:1, takže ju netreba opravovať. */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk {
	/* NIE var(--sk-krem): návrh kalkulačky „bento" si sám maľuje telo na
	   var(--sk-krem) a na rovnakom páse by celkom zmizol (overené v prehliadači).
	   #F6ECD8 je ten istý krém o ~4 % hlbší - biela karta návrhov „zaklad"
	   a „uctenka" na ňom drží hranu a bento je zase viditeľná dlaždica. */
	background: #F6ECD8;
	color: var(--sk-text, #1B1B1B);
	border-block: 1px solid rgba(27, 27, 27, .14);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-hlava-sekcie { display: block; margin-bottom: clamp(30px, 3.6vw, 52px); }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-hlava-sekcie .ox-oko {
	font-family: var(--n-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .22em; color: var(--sk-akcent-tmavy, #D60019); margin-bottom: 18px;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-hlava-sekcie .ox-oko::before { width: 44px; height: 1px; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-hlava-sekcie .ox-h2 {
	font-size: clamp(30px, 4.4vw, 52px); line-height: 1.16; text-transform: uppercase;
	color: var(--sk-text, #1B1B1B); margin: 0;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-hlava-sekcie .ox-h2::after {
	content: ''; display: block; width: clamp(120px, 16vw, 190px); height: 11px; margin-top: 12px;
	border-bottom: 2px solid var(--sk-akcent, #D60019);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
/* poznámka pre neprihláseného ako technická vsuvka (prompt: bordered note) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-kalk-pozn-host {
	max-width: 74ch; margin: 0 0 30px; padding: 14px 18px;
	border: 1px solid rgba(27, 27, 27, .16); border-left: 3px solid var(--sk-akcent, #D60019);
	background: rgba(255, 255, 255, .7);
	font-size: 15px; line-height: 1.6; color: #4A443F;
}
/* odkazy vo vsuvke sú v základe odlíšené LEN farbou (a { text-decoration: none }),
   čo je porušenie WCAG 1.4.1; na tomto páse ich preto aj podčiarkujeme */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-kalk-pozn-host a {
	text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* --- 4) ŠTARTOVACÍ SET - karta „Recommended" + fotka s červenou žiarou ----- */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) {
	overflow: hidden;                              /* poistka proti pretečeniu žiary spod fotky */
	background: var(--n-cierna);                   /* základ tu dáva .ox-sek--krem */
	border-top: 1px solid rgba(255, 255, 255, .05);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 { gap: clamp(30px, 4vw, 60px); }
/* bez min-width:0 roztiahne min-content najdlhšieho riadku zoznamu celý stĺpec
   a na 390 px potom sekcia pretečie z obrazovky */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div { min-width: 0; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:first-child {
	position: relative;
	padding: clamp(30px, 3.4vw, 46px);
	border: 1px solid rgba(225, 0, 26, .55); border-radius: var(--n-r);
	background: linear-gradient(180deg, rgba(34, 22, 25, .8) 0%, rgba(8, 7, 10, .92) 100%);
	box-shadow: 0 0 34px rgba(225, 0, 26, .14);    /* prompt: shadow-[0_0_30px_rgba(239,35,60,0.1)] */
}
/* prompt: pilulka „Recommended" plávajúca na hornej hrane karty */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:first-child > .ox-oko {
	position: absolute; top: -13px; left: clamp(30px, 3.4vw, 46px);
	margin: 0; padding: 5px 14px; border-radius: 999px;
	background: var(--n-cerv-tmava); color: #fff;  /* biela na tmavšej červenej 5,4:1 */
	font-family: var(--n-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:first-child > .ox-oko::before { display: none; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:first-child > .ox-h2 { font-size: clamp(27px, 3.4vw, 42px); margin: 6px 0 4px; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:first-child > .ox-h2::after {
	content: ''; display: block; width: 120px; height: 11px; margin-top: 12px;
	border-bottom: 2px solid var(--n-cerv-jas); border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
/* prompt: zoznam funkcií s červenými fajkami; !important prebíja INLINE style="padding:14px 18px" */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) li.ox-panel {
	/* zámerne NIE display:flex - jednoriadkový flex kontajner nepustí text pod svoju
	   min-content šírku a na úzkych displejoch by zoznam vytlačil celú sekciu von */
	position: relative; min-height: 26px;
	padding: 2px 0 2px 38px !important;
	border-radius: 0; background: transparent; box-shadow: none;
	font-size: 15.5px; line-height: 1.5; color: #DAD6D4;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) li.ox-panel::before {
	content: '\2713'; position: absolute; left: 0; top: 0;
	display: grid; place-items: center; width: 24px; height: 24px;
	border-radius: var(--n-r-maly); background: rgba(225, 0, 26, .18);
	box-shadow: inset 0 0 0 1px rgba(225, 0, 26, .55);
	color: var(--n-cerv-jas); font-size: 12px; font-weight: 700;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-btn--hlavne {
	margin-top: 26px; border: 0; border-radius: 999px;
	background: var(--n-cerv-tmava); color: #fff;
	box-shadow: 0 18px 40px -20px rgba(225, 0, 26, .95);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-btn--hlavne:hover:not(:disabled) {
	background: var(--n-cerv); box-shadow: 0 22px 50px -18px rgba(225, 0, 26, 1);
}
/* PNG setu má okolo produktov svetlý závoj, z ktorého na čiernej vznikne bledý
   obdĺžnik; preto ho rámujeme ako bento dlaždicu z promptu (1px biela/10, rounded-xl)
   a pod ňu dáme červenú žiaru z promptu (rozmazaná guľa - opäť mäkkým radiálom,
   nie filter: blur, ktorý presahuje box prvku a vie vytlačiť stránku do šírky) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:last-child {
	position: relative; isolation: isolate;
	padding: clamp(14px, 1.8vw, 26px);
	border: 1px solid var(--n-linka); border-radius: var(--n-r);
	background: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .012) 100%);
	box-shadow: 0 44px 90px -56px rgba(0, 0, 0, .95), 0 0 70px -36px rgba(225, 0, 26, .6);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:last-child::before {
	content: ''; position: absolute; inset: 2% 0%; z-index: -1; border-radius: 50%;
	background: radial-gradient(circle closest-side, rgba(225, 0, 26, .40), rgba(225, 0, 26, .12) 44%, transparent 72%);
}
/* !important prebíja INLINE style="border-radius:var(--sk-r-velky)" priamo v markupe */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:last-child img {
	border-radius: var(--n-r-maly) !important;
	filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .75));
}

/* --- 5) AKO TO PREBIEHA - dlaždice s obrysovým číslom ---------------------- */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) {
	overflow: hidden;
	background: linear-gradient(180deg, var(--n-cierna) 0%, #10060A 100%);
	border-top: 1px solid rgba(255, 255, 255, .05);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5)::before {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 78%);
	        mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 78%);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) > .ox-wrap { position: relative; z-index: 1; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel {
	position: relative; overflow: hidden; display: flex; flex-direction: column;
	min-height: 236px; padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--n-linka); border-radius: var(--n-r); box-shadow: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .012) 100%);
	transition: border-color .25s var(--sk-prechod);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel:hover { border-color: var(--n-linka-akt); }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel::after {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
	background: radial-gradient(circle at 100% 0%, var(--n-cerv), transparent 62%);
	transition: opacity .3s var(--sk-prechod);
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel:hover::after { opacity: .10; }
/* prompt: obrovské obrysové písmo z päty, tu ako poradové číslo kroku */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-odznak {
	display: block; position: relative; z-index: 1;
	padding: 0; border-radius: 0; background: transparent;
	font-family: var(--sk-font-nadpis, 'Anton', Impact, sans-serif);
	font-size: clamp(54px, 5.2vw, 76px); font-weight: 400; line-height: 1;
	letter-spacing: -.02em; text-transform: none; color: rgba(255, 255, 255, .24);
}
@supports (-webkit-text-stroke: 1px #fff) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-odznak {
		color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .34);
		transition: -webkit-text-stroke-color .25s var(--sk-prechod);
	}
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel:hover .ox-odznak {
		-webkit-text-stroke-color: var(--n-cerv-jas);
	}
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-h3 {
	position: relative; z-index: 1;
	margin-top: 16px !important;                   /* prebíja INLINE style="margin-top:12px" */
	margin-bottom: 10px;
	font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2;
	text-transform: uppercase; color: #fff;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-text-tlmeny { position: relative; z-index: 1; margin: 0; font-size: 15px; line-height: 1.6; color: var(--n-tlmeny); }

/* --- 6) ZÁVEREČNÁ VÝZVA - plný červený pás s obrysovým slovom -------------- */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) {
	overflow: hidden; color: #fff; background-color: #5C000B;
	/* horná tmavá clona je povinná: biely text na čistej #D60019 je tesný,
	   s clonou má najsvetlejšie miesto pásu 6,6:1 */
	background-image:
		linear-gradient(180deg, rgba(20, 0, 4, .24), rgba(20, 0, 4, .32)),
		var(--ox-doska-cervena,
			radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .34), transparent 62%),
			radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .28), transparent 62%),
			linear-gradient(160deg, var(--sk-akcent, #D60019) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%));
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6)::before {
	content: 'OXO'; position: absolute; left: 50%; top: 50%; z-index: 0;
	transform: translate(-50%, -50%);
	font-family: var(--sk-font-nadpis, 'Anton', Impact, sans-serif);
	font-size: clamp(190px, 32vw, 430px); font-weight: 400; line-height: 1; letter-spacing: .02em;
	white-space: nowrap; pointer-events: none; -webkit-user-select: none; user-select: none;
	color: rgba(255, 255, 255, .07);
}
@supports (-webkit-text-stroke: 1px #fff) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6)::before {
		color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .17);
	}
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) > .ox-wrap { position: relative; z-index: 1; }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-h2 { font-size: clamp(36px, 5.6vw, 72px); margin: 0 0 18px; }
/* h2 tejto sekcie nie je v .ox-hlava-sekcie, takže swoosh sem treba dopísať celý.
   .ox-wrap má INLINE style="text-align:center", ale blokový ::after sa tým
   nevycentruje - preto margin-inline: auto */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-h2::after {
	content: ''; display: block; width: clamp(110px, 14vw, 170px); height: 11px;
	margin: 14px auto 0;
	border-bottom: 2px solid rgba(255, 255, 255, .85);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-lead {
	max-width: 58ch; margin-bottom: 34px; font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.6; color: rgba(255, 255, 255, .92);
}
/* prompt: na farebnom páse je tlačidlo v protifarbe - biela pilulka s červeným textom (7,9:1) */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-btn--hlavne { border: 0; border-radius: 999px; background: #fff; color: #A8000F; box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .8); }
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-btn--hlavne:hover:not(:disabled) {
	background: var(--sk-ruz, #FFD9D6); color: #8E000D;
	box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .9);
}

/* --- 6b) viditeľné zameranie klávesnicou ----------------------------------- */
/* varianty.css:5563 má `.ox-btn:focus-visible { outline: none; box-shadow:
   0 0 0 3px var(--sk-bg), 0 0 0 6px var(--sk-akcent) !important }`.
   Na čiernej je ten biely prstenec výborný, ale na červenom páse je vnútorný
   prstenec biely NA BIELOM tlačidle a von ostane len červená na červenej (1,4:1).
   Preto oba pásy prepisujeme vlastným prstencom - a keďže základ tlačí
   !important, musíme ho použiť tiež (naša špecifickosť (1,5,2) rozhodne). */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn:focus-visible,
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--n-cierna), 0 0 0 6px #fff !important;  /* biela na čiernej 18:1 */
}
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #3A0008, 0 0 0 6px #fff !important;          /* biela na páse 6,6:1 */
}
/* dlaždice sortimentu sú odkazy; téma im dáva tmavočervený obrys (3,7:1 na
   čiernej - tesne nad normou), na tejto scéne ho dvíhame na bielu */
html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:focus-visible {
	outline: 2px solid #fff; outline-offset: 3px;
}
/* Vo vysokom kontraste systému sa box-shadow zahadzuje - vrátime obrys.
   Aj tu menujeme sekcie: holé `.ox-btn:focus-visible` by siahlo na tlačidlá
   vnútri .ox-kalk. */
@media (forced-colors: active) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn:focus-visible,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-btn:focus-visible,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-btn:focus-visible,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:focus-visible {
		outline: 3px solid CanvasText; outline-offset: 3px;
	}
}

/* --- 7) responzívne (1440 / 1280 / 1024 / 768 / 390) ----------------------- */
/* .ox-wrap má max-width 1320 px, takže nad ~1448 px sa obsah už nerozširuje
   a vetva „širšie nad 1440" by bola mŕtvy kód. */
@media (max-width: 1100px) {
	/* náš 2-stĺpcový hrdina má vyššiu špecifickosť ako jednostĺpcové pravidlo
	   základu, takže zlom musíme zopakovať tu, inak sa hrdina na mobile nezloží */
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__mriezka { grid-template-columns: minmax(0, 1fr); }
	/* základ tu dáva vizuálu order:-1; na predajnej stránke chceme najprv text
	   (a zároveň tým zladíme zrakové poradie s poradím tabulátora) */
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual { order: 0; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-mriezka--3 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	/* v dvoch rovnakých stĺpcoch už hlavná dlaždica nie je hlavná - zrovnáme sadzbu */
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__foto { height: clamp(190px, 21vw, 300px); }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__telo { padding: 24px 26px 26px; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__nazov { font-size: clamp(20px, 2vw, 28px); }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:first-child .ox-produkt__popis { font-size: 14.5px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
}
@media (max-width: 900px) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-mriezka--3 { grid-template-columns: 1fr; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 { grid-template-columns: 1fr; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:last-child img {
		max-width: min(540px, 100%); margin-inline: auto;   /* holé 540px prebije max-width:100% zo základu a pretečie */
	}
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel { min-height: 0; }
}
@media (max-width: 620px) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__akcie { flex-direction: column; align-items: stretch; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__akcie .ox-btn { width: 100%; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-h1 { line-height: 1.12; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__telo { padding: 20px 20px 22px; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-odznak { font-size: 58px; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6)::before { font-size: 46vw; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(6) .ox-btn--velke { width: 100%; }
}
@media (max-width: 400px) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div:first-child { padding: 26px 20px; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) li.ox-panel { font-size: 14.5px; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > #ox-zisk > .ox-wrap > .ox-kalk-pozn-host { padding: 12px 14px; font-size: 14px; }
}
/* --- 7b) nízke notebooky (1280x720) --------------------------------------- */
/* Základ (temy/_zaklad.css) má na to vetvu, aby sa hrdina zmestil nad ohyb.
   Naše pravidlá hrdinu majú vyššiu špecifickosť, takže tú vetvu ticho umlčia.
   Preto ju tu doslova opakujeme v našej špecifickosti. */
@media (max-height: 840px) and (min-width: 1100px) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero { padding-block: 34px 46px; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-h1 { font-size: clamp(34px, 5vw, 68px); }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual img { max-height: 46vh; }
}

/* --- 8) obmedzený pohyb --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero::after,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__text > .ox-oko::before,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--hlavne::before { animation: none; }
	/* bez animácie by kónický rám ostal len ako statický oblúk - radšej plná červená */
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-btn--hlavne::before { background: var(--n-cerv); }
	/* nábeh hrdinu: žiadny posun, prvky musia byť hneď na mieste a viditeľné */
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__text > .ox-oko,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-h1,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-lead,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__akcie,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual { animation: none; opacity: 1; transform: none; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt::after,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__telo::after,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel::after { transition: none; }
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt__telo::after { opacity: 1; transform: none; }
	/* téma 21 zväčšuje fotku na hover (scale 1.06) a hrdinovu fotku na 1.03 -
	   to je pohyb, ktorý si používateľ so „reduce" nevyžiadal */
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-produkt:hover .ox-produkt__foto img,
	html[data-ox-b2bstr="noir"] #ox-obsah[data-trasa="b2b"] > .ox-hero .ox-hero__vizual:hover img { transform: none; }
}

/* ---- b2bstr / premium: Premium  (podľa ) ---- */
/* ============================================================================
   /b2b - NÁVRH „Premium" (html[data-ox-b2bstr="premium"])
   ----------------------------------------------------------------------------
   PREDLOHA: knižničný prompt superdesign.dev „Premium Dark B2B Service Landing"
   (sd/premium-dark-b2b-service-landing.md). Zachované dizajnové prvky predlohy:
     - „Dark Luxury": celá stránka na tmavom podklade (#121212 predlohy -> u nás
       #141414) a druhotné plochy #1a1a1a -> náš #1B1B1B (atrament). Predloha má
       JEDNU plochu stránky a všetko ostatné sú KARTY o stupeň svetlejšie. Presne
       tak to robíme: každá sekcia = --pb-noc, každá karta/panel = --pb-panel.
     - jediný akcent = karmín. Predlohový #e11d48 -> naša #D60019; prechod
       „crimson to dark red" -> linear-gradient(135deg,#D60019,#B10014,#8C0010).
     - 1px obrysy rgba(255,255,255,.08) na všetkom, hlboké glassmorphism
       (backdrop-filter: blur(16px)) na odznaku hrdinu a na poznámke pre hosťa.
     - veľké rádiusy predlohy (2.5rem az 3rem): karty 40px (= 2.5rem, predloha to
       žiada doslova), panely 28px, záverečná doska 48px, tlačidlá pilulka.
     - krivka cubic-bezier(.4,0,.2,1) na VŠETKÝCH prechodoch a nábeh prvkov
       s posunom 30px po osi Y.
     - hierarchia sekcií predlohy: Hero s odznakom naliehavosti -> asymetrická
       mriežka služieb (vľavo lepkavý nadpis, vpravo veľké karty, prvá „featured"
       karmínová) -> Trust bar (4 stĺpce, značka zošedne a na hover sčervenie)
       -> Final CTA (zaoblená karmínová doska, obrie písmo, biele tlačidlo).
     - „Floating Status Indicator" (8px kruh, pulz) v odznaku hrdinu; u nás je
       karmínový, lebo zelená nie je v palete OXO.
     - šípka, ktorá sa na hover posunie: na tlačidlách „arrow-up-right", na
       kartách sortimentu „arrow-right". Kreslíme si ju SAMI (pozri bod 9 nižšie).
   Preložené na OXO: písmo Cal Sans -> Anton verzálky (--sk-font-nadpis),
   Poppins -> --sk-font-text, mono popisky ostávajú mono.
   VYNECHANÉ (nemajú u nás náprotivok): sticky glass hlavička, portfólio
   s vodorovným scrollom, „Transformation Compare Card", referencie, tooltipy
   trust baru, certifikačné odznaky v päte CTA. Nevymýšľam k nim obsah.

   ČO PREBÍJAM V ZÁKLADE / TÉME:
     - .ox-sek--krem (krém) a html[data-tema^="21"] .ox-sek--tmava (#8C0010)
       -> tmavé plochy návrhu;
     - .ox-hero__text::before (biely závoj pre svetlú stránku) -> karmínový nádych;
     - .ox-oko::before (26x2 px linka) -> mono číslo sekcie + linka (CSS counter),
       v hrdinovi pulzujúci bod;
     - .ox-produkt__nazov::after: v základe NEEXISTUJE, šípku kreslí až téma 21.
       Návrh si ju preto kreslí sám, nech nezávisí od zapnutej témy.
     - .ox-produkt:hover { transform: translateY(-4px) } zo základu -> karta STOJÍ
       a hýbe sa svetlo (pozri bod 4).

   INLINE STYLE V MARKUPE (poráža všetko okrem !important):
     - ul v 4. sekcii (display:grid;gap:12px) - REŠPEKTUJEM, presne to chcem;
     - li.ox-panel (padding:14px 18px) - REŠPEKTUJEM, počítam s ním vo flexe;
     - div.ox-mriezka--2 (align-items:center) - REŠPEKTUJEM;
     - img party-set.png (border-radius:var(--sk-r-velky)) - NEPREBÍJAM: obrázok
       nie je v repozitári (nasadzuje ho _deploy.py zo servera), takže či má alfu,
       sa lokálne overiť NEDÁ. Preto volím treatment, ktorý je správny v OBOCH
       prípadoch: žiadny rám ani plocha, len drop-shadow (ten kopíruje alfu a na
       nepriehľadnom obrázku vyzerá ako bežný tieň). Rádius z inline štýlu tak
       nikomu neprekáža.
     - .ox-h3 (margin-top:12px) v 5. sekcii - nechávam, píšem len spodný okraj;
     - .ox-wrap (text-align:center) a .ox-lead (margin-inline:auto) v 6. sekcii
       - presne to, čo návrh chce, žiadny konflikt.
   Výsledok: v celom bloku NIE JE ani jeden !important.

   ⛔ Do .ox-kalk nesiaham. Overené proti markupu (doplnky.js kalkulackaHtml):
   kalkulačka obsahuje .ox-h3, .ox-btn, ul/li, p a .ox-label - preto sú VŠETKY
   moje pravidlá pre tieto selektory kvalifikované kontajnerom, ktorý kalkulačku
   obchádza (.ox-hero__akcie, .ox-mriezka--2, .ox-mriezka--4, .ox-sek--tmava).
   Kalkulačka NEOBSAHUJE .ox-oko, .ox-h2, .ox-lead, .ox-panel, .ox-karta ani
   .ox-odznak, takže tie smiem brať v rámci stránky. .ox-kalk-pozn-host je
   SÚRODENEC .ox-kalk, nie jej potomok - tá je moja. Tokeny --sk-* nepredefinovávam
   ani jeden (dedili by sa dovnútra kalkulačky), všetko ide cez vlastné --pb-*.

   KONTRAST (počítané, sRGB): #fff/#141414 18,4:1; #fff/#1B1B1B 17,2:1;
   rgba(255,255,255,.74)/#141414 10,3:1, /#1B1B1B 9,8:1, /#232323 9,2:1;
   #fff na karmíne #D60019 4,98:1 (najsvetlejší bod prechodu; ďalej rastie na
   9,9:1); #FFD9D6/#141414 14,2:1, /#1B1B1B 13,2:1; rgba(255,255,255,.62)/#1B1B1B
   7,3:1. Karmín ako text na tmavom má len 3,5:1, preto je červená LEN na linkách,
   plochách a veľkých prvkoch, NIKDY ako drobný text - vrátane čísla sekcie
   v nadnadpise, ktoré preto ide do #FFD9D6 (pôvodný návrh ho mal karmínové,
   čo bolo 3,5:1 a rozpor s vlastným pravidlom).
   ========================================================================== */

/* --- 0) plátno a tokeny návrhu ------------------------------------------- */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] {
	--pb-noc: #141414;                  /* „off-black" predlohy (#121212) */
	--pb-panel: #1B1B1B;                /* „secondary container" (#1a1a1a) = atrament */
	--pb-panel-nad: #232323;            /* to isté o stupeň vyššie, pre hover */
	--pb-linka: rgba(255, 255, 255, .08);
	--pb-linka-silna: rgba(255, 255, 255, .16);
	--pb-text: rgba(255, 255, 255, .74);
	--pb-cerv: #D60019;
	--pb-ruz: #FFD9D6;
	--pb-doska: linear-gradient(135deg, #D60019 0%, #B10014 46%, #8C0010 100%);
	--pb-krivka: cubic-bezier(.4, 0, .2, 1);
	--pb-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	--pb-sipka: var(--sk-font-text), 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
	background: var(--pb-noc);
	counter-reset: pb-sek;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] > section {
	background: var(--pb-noc);
	padding-block: clamp(72px, 9vw, 152px);
}
/* Číslujeme LEN .ox-sek. Hrdina je <section class="ox-hero"> a jeho nadnadpis je
   odznak s pulzujúcim bodom, nie číslo - keby sa počítal aj on, prvé VIDITEĽNÉ
   číslo na stránke by bolo „02" a čítalo by sa to ako chyba. Takto ide sortiment
   01, výpočet zisku 02, set 03, priebeh 04. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] > section.ox-sek { counter-increment: pb-sek; }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] > section + section { border-top: 1px solid var(--pb-linka); }
/* Predloha nemá striedanie krém/biela - má JEDNU plochu a karty nad ňou. Krémové
   aj tmavočervené pásy preto idú na rovnaký off-black; rytmus robia 1px linky,
   svetlá a karmínová doska na konci. (Pôvodný návrh dal .ox-sek--krem #1B1B1B,
   lenže telo kariet má tiež #1B1B1B - karta sa v 2. sekcii vizuálne rozplynula
   do podkladu a ostala z nej len biela fotka.) */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--krem { background: var(--pb-noc); }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava { background: var(--pb-noc); }

/* typografia: Anton verzálky miesto Cal Sans, tesnejší proklad. 1,14 je
   kompromis - predloha chce tesné riadkovanie, slovenská diakritika (Č, á, ô)
   potrebuje vzduch; hrdina má reťazec bez diakritiky, tam smie ísť na 1,06. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-h2 {
	color: #fff; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.14;
	letter-spacing: -.005em; margin: 0;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-lead {
	color: var(--pb-text); font-size: 19px; line-height: 1.62; max-width: 600px;
}

/* mono kicker s číslom sekcie a vodorovnou linkou („uppercase 12px
   tracking-widest" z predlohy). Číslo je ružové (14,2:1), linka karmínová -
   linka je dekorácia, číslo je text. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-oko {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--pb-mono); font-size: 11.5px; font-weight: 700;
	letter-spacing: .22em; text-transform: uppercase;
	color: #fff; margin: 0 0 20px;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-oko::before {
	content: counter(pb-sek, decimal-leading-zero);
	width: auto; height: auto; padding-right: 54px;
	color: var(--pb-ruz); background: none;
	background-image: linear-gradient(var(--pb-cerv), var(--pb-cerv));
	background-repeat: no-repeat; background-size: 40px 1px; background-position: right center;
	font-variant-numeric: tabular-nums;
}

/* --- 1) HRDINA - „Hero Section" predlohy --------------------------------- */
/* pozadie robím výhradne cez background-image sekcie, nie cez ::before:
   absolútny pseudoprvok by sa vykresľoval NAD obsahom .ox-wrap a v 3. sekcii
   by prekryl kalkulačku. Takto je svetlo vždy pod sadzbou. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero {
	overflow: hidden;
	background-color: var(--pb-noc);
	background-image:
		radial-gradient(58% 72% at 78% 10%, rgba(225, 0, 26, .30) 0%, transparent 62%),
		radial-gradient(42% 52% at 6% 90%, rgba(225, 0, 26, .12) 0%, transparent 70%),
		linear-gradient(to top, rgba(0, 0, 0, .62) 0%, transparent 46%),
		linear-gradient(to right, rgba(0, 0, 0, .55) 0%, transparent 54%);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka {
	gap: clamp(28px, 4.4vw, 72px); align-items: center;
}
/* základ tu maľuje biely radiálny závoj (--sk-bg) pre svetlú stránku - na tmavej
   by to bola biela machuľa; meníme ho na karmínový nádych */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__text::before {
	background: radial-gradient(ellipse at 28% 42%, rgba(225, 0, 26, .18) 0%, transparent 72%);
}
/* odznak naliehavosti predlohy: sklenená pilulka + pulzujúci bod */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-oko {
	padding: 9px 20px 9px 15px; gap: 11px; margin-bottom: 28px;
	border-radius: 999px; letter-spacing: .18em;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-oko::before {
	content: ''; width: 8px; height: 8px; padding: 0;
	border-radius: 50%; background: var(--pb-cerv); background-image: none;
	animation: pb-tep 2.2s var(--pb-krivka) infinite;
}
@keyframes pb-tep {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 0, 26, .55); }
	50%      { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(225, 0, 26, 0); }
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 {
	color: #fff; font-size: clamp(42px, 6.4vw, 92px); line-height: 1.06;
	letter-spacing: -.01em; margin: 0;
}
/* karmínový akcent v nadpise: predloha farbí zvýraznené slová, my nemôžeme
   siahnuť do markupu, tak dávame karmínový podčiarkovník pod celý nadpis */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1::after {
	content: ''; display: block; width: 136px; height: 6px;
	margin: 26px 0 0; border-radius: 999px; background: var(--pb-doska);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-lead { margin: 26px 0 0; }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie { gap: 14px; margin-top: 34px; }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual { min-height: 0; }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img {
	width: 100%; height: auto; max-height: none; border-radius: 28px;
	filter: none;                        /* základ dáva drop-shadow, tu ho nahrádza box-shadow */
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .14),
		0 60px 110px -50px rgba(0, 0, 0, .9),
		0 0 140px -30px rgba(225, 0, 26, .45);
}

/* --- tlačidlá (len mimo kalkulačky: hrdina, 4. sekcia, záverečná doska) --- */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn {
	border-radius: 999px; letter-spacing: .06em; font-size: 15.5px;
	transition: background .3s var(--pb-krivka), color .3s var(--pb-krivka),
	            border-color .3s var(--pb-krivka), box-shadow .3s var(--pb-krivka),
	            transform .3s var(--pb-krivka);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn--hlavne {
	background: var(--pb-doska); color: #fff; border-color: transparent;
	box-shadow: 0 18px 44px -18px rgba(225, 0, 26, .85);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne:hover:not(:disabled),
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn--hlavne:hover:not(:disabled) {
	box-shadow: 0 26px 58px -18px rgba(225, 0, 26, 1);
}
/* obrys: lem zo .28 mal proti #141414 len 2,5:1 - zdvíham na .38 (3,6:1), aby
   bola hranica tlačidla čitateľná aj bez hoveru */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys {
	color: #fff; border-color: rgba(255, 255, 255, .38);
	background: rgba(255, 255, 255, .04); box-shadow: none;
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys:hover:not(:disabled) {
	background: #fff; color: var(--pb-noc); border-color: #fff;
	box-shadow: 0 0 48px rgba(255, 255, 255, .26);
}
/* šípka „arrow-up-right", ktorá sa na hover posunie (doslova z predlohy).
   Vlastný font-stack: znak U+2197 nie je v latinskom subsete Inter, ktorý web
   načítava z Google Fonts, takže bez fallbacku by ho kreslil náhodný font. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne::after,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn--hlavne::after,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne::after {
	content: '\2197'; font-family: var(--pb-sipka); font-size: 1.05em; line-height: 1;
	transition: transform .3s var(--pb-krivka);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne:hover:not(:disabled)::after,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn--hlavne:hover:not(:disabled)::after,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne:hover:not(:disabled)::after {
	transform: translate(3px, -3px);
}
/* FOKUS. Základ dáva :focus-visible { outline: 3px solid var(--sk-akcent) } -
   karmín na karmínovej doske je 1:1, čiže neviditeľný, a téma 21 si to opravuje
   len pre seba (html[data-tema^="21"]). Návrh nesmie visieť na zapnutej téme,
   preto si prsteň píše sám. Selektory sú menované, aby sa nedostali do .ox-kalk. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn:focus-visible,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn:focus-visible,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a:focus-visible {
	outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible { border-radius: 40px; }
/* na bielom tlačidle karmínovej dosky musí byť prsteň naopak TMAVÝ
   (#141414 = 18,4:1 proti tlačidlu a 3,7:1 proti doske) */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn:focus-visible {
	outline: 3px solid var(--pb-noc); outline-offset: 3px; border-radius: 999px;
}

/* --- 2) SORTIMENT - „Services Grid" predlohy ----------------------------- */
/* Predloha: vľavo lepkavý stĺpec s nadpisom, vpravo veľké karty; prvá karta je
   „featured" na karmíne. Zároveň to rieši dieru po tretej dlaždici - v markupe
   sú len dve karty v trojstĺpcovej mriežke. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie {
	display: block; margin: 0 0 36px;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt {
	background: var(--pb-panel); border-radius: 40px;
	box-shadow: 0 0 0 1px var(--pb-linka), 0 30px 70px -40px rgba(0, 0, 0, .9);
	transition: box-shadow .4s var(--pb-krivka);
}
/* Karta STOJÍ, hýbe sa svetlo. Základ jej dáva hover translateY(-4px), ale
   transform nie je v mojom zozname prechodov - skok by bol okamžitý, kým by tieň
   dobiehal 400 ms. Radšej ho vypínam (rovnako to robí aj téma 21), než aby som
   pridával ďalšiu animovanú vlastnosť. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:hover,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible {
	transform: none;
	box-shadow: 0 0 0 1px rgba(225, 0, 26, .55), 0 40px 80px -40px rgba(0, 0, 0, 1),
	            0 0 90px -34px rgba(225, 0, 26, .55);
}
/* fotku držím na pomere, nie na pevnej výške: pevná výška sa v stĺpcovom flexe
   dá stlačiť a pri širokej karte robí z fotky úzky pás */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto {
	aspect-ratio: 16 / 10; flex: 0 0 auto;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-produkt__telo {
	background: var(--pb-panel); padding: 24px 26px 28px; gap: 10px;
}
/* šípka na karte: v základe NEEXISTUJE (kreslí ju až téma 21), takže si ju návrh
   musí nakresliť sám aj s rozložením nadpisu, inak pod inou témou zmizne */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	color: #fff; font-size: 21px; letter-spacing: -.005em;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov::after {
	content: '\2192'; flex: 0 0 auto;
	font-family: var(--pb-sipka); font-size: 16px; font-weight: 700;
	color: rgba(255, 255, 255, .72); opacity: 1;
	transform: translateX(-2px);
	transition: transform .3s var(--pb-krivka), color .3s var(--pb-krivka);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:hover .ox-produkt__nazov::after,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible .ox-produkt__nazov::after {
	transform: translateX(6px); color: #fff;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-produkt__popis {
	color: var(--pb-text); font-size: 14px; line-height: 1.5;
}
/* featured karta: karmínová doska predlohy, biely text (4,98:1 a viac) */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:first-child .ox-produkt__telo {
	background: var(--pb-doska);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:first-child .ox-produkt__nazov,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:first-child .ox-produkt__popis,
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:first-child .ox-produkt__nazov::after {
	color: #fff;
}

/* --- 3) VÝPOČET ZISKU - priestor OKOLO kalkulačky ------------------------ */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] #ox-zisk {
	background-color: var(--pb-noc);
	background-image: radial-gradient(72% 46% at 50% 0%, rgba(225, 0, 26, .22) 0%, transparent 68%);
	/* tlačidlo „Vypočítať zisk" v hrdinovi volá scrollIntoView({block:'start'}),
	   takže nadpis sekcie skončil pod lepkavou hlavičkou (min-height 74px) */
	scroll-margin-top: calc(var(--ox-lista, 0px) + 92px);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] #ox-zisk .ox-hlava-sekcie { max-width: 760px; margin-bottom: 26px; }
/* poznámka pre hosťa = „glass-dark" panel predlohy */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host {
	max-width: 780px; margin: 0 0 32px; padding: 17px 22px;
	border-radius: 20px; border: 1px solid var(--pb-linka);
	background: rgba(255, 255, 255, .045);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.6;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host b { color: #fff; }
/* základ dáva odkazom --sk-akcent-tmavy (#D60019) - na #141414 len 3,4:1 */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a {
	color: var(--pb-ruz); text-underline-offset: 3px; text-decoration-thickness: 1px;
	text-decoration-color: rgba(225, 0, 26, .9);
}

/* --- 4) ČO JE V SETE - „Included in Price" predlohy ---------------------- */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 .ox-h2 { margin-bottom: 12px; }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 ul { counter-reset: pb-pol; }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel {
	counter-increment: pb-pol;
	display: flex; align-items: center; gap: 15px;
	background: var(--pb-panel); border-radius: 18px;
	box-shadow: 0 0 0 1px var(--pb-linka);
	color: #fff; font-size: 15.5px; line-height: 1.4;
	transition: background .3s var(--pb-krivka), box-shadow .3s var(--pb-krivka);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel::before {
	content: counter(pb-pol, decimal-leading-zero);
	flex: 0 0 auto; min-width: 36px; height: 24px;
	display: inline-grid; place-items: center;
	border-radius: 999px; background: var(--pb-doska); color: #fff;
	font: 700 11px/1 var(--pb-mono); letter-spacing: .1em;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel:hover {
	background: var(--pb-panel-nad); box-shadow: 0 0 0 1px rgba(225, 0, 26, .55);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn { margin-top: 8px; }
/* obrázok: žiadny rám ani plocha, len tieň (funguje na alfe aj na plnej ploche) */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 img {
	width: 100%; height: auto; display: block;
	filter: drop-shadow(0 44px 60px rgba(0, 0, 0, .85)) drop-shadow(0 0 48px rgba(225, 0, 26, .35));
}

/* --- 5) AKO TO PREBIEHA - „Trust Bar" predlohy --------------------------- */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 { gap: clamp(16px, 1.8vw, 24px); }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel {
	background: var(--pb-panel); border-radius: 28px;
	padding: clamp(24px, 2.4vw, 34px);
	box-shadow: 0 0 0 1px var(--pb-linka);
	transition: background .4s var(--pb-krivka), box-shadow .4s var(--pb-krivka);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel:hover {
	background: var(--pb-panel-nad);
	box-shadow: 0 0 0 1px rgba(225, 0, 26, .5), 0 40px 70px -40px rgba(0, 0, 0, 1);
}
/* číslo kroku = „40px ikona v šedej, ktorá na hover sčervenie" */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak {
	width: 52px; height: 52px; padding: 0; border-radius: 18px;
	display: grid; place-items: center;
	background: transparent; box-shadow: inset 0 0 0 1px var(--pb-linka-silna);
	color: rgba(255, 255, 255, .62);
	font: 700 15px/1 var(--pb-mono); letter-spacing: 0;
	transition: background .35s var(--pb-krivka), color .35s var(--pb-krivka),
	            box-shadow .35s var(--pb-krivka);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel:hover .ox-odznak {
	background: var(--pb-doska); color: #fff;
	box-shadow: 0 12px 30px -12px rgba(225, 0, 26, .9);
}
/* margin-top drží inline style (12px), my píšeme len spodný okraj */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel .ox-h3 {
	color: #fff; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.18; margin-bottom: 10px;
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel .ox-text-tlmeny {
	color: var(--pb-text); font-size: 14.5px; line-height: 1.55; margin: 0;
}

/* --- 6) ZÁVEREČNÁ VÝZVA - „Final CTA" predlohy --------------------------- */
/* doska nesmie na úzkych displejoch doraziť na hranu okna - .ox-wrap si tu
   vlastné padding-inline prepisuje, tak ho dostane sekcia. Šírku dosky
   zastropujem SÁM: .ox-wrap berie --sk-maxw, čo je 1320 px vo vetve 21, ale
   1560 px v základe a 1240 px v téme 16 - doska by inak menila šírku podľa
   toho, ktorá téma je práve zapnutá. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava { padding-inline: 16px; }
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap {
	max-width: 1320px;
	background-color: #8C0010;
	background-image:
		radial-gradient(56% 74% at 10% 4%, rgba(255, 255, 255, .10) 0%, transparent 58%),
		var(--pb-doska);
	border-radius: 48px; overflow: hidden;
	padding: clamp(44px, 6vw, 96px) clamp(24px, 5vw, 80px);
	box-shadow: 0 60px 120px -60px rgba(225, 0, 26, .85);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2 {
	font-size: clamp(38px, 6vw, 82px); line-height: 1.1; margin-bottom: 18px;
}
/* biela naplno: na najsvetlejšom bode dosky (#D60019) má 4,98:1; akákoľvek
   alfa pod 1 by spadla pod 4,5:1, takže „stlmenie" robí veľkosť, nie priesvit.
   Biely lesk v ľavom hornom rohu je preto len .10 - pri .14 dvíhal podklad tak,
   že biely text mal 4,52:1, čiže presne na hrane normy. */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-lead {
	color: #fff; font-size: 19px; max-width: 54ch; margin-bottom: 36px;
}
/* predloha žiada v Final CTA tlačidlá 20px - spoločné pravidlo vyššie ich
   zrážalo na 15,5px a zabíjalo aj .ox-btn--velke z markupu */
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn {
	font-size: clamp(16px, 1.3vw, 19px); padding-inline: clamp(28px, 3vw, 46px);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne {
	background: #fff; color: var(--pb-noc); border-color: #fff;
	box-shadow: 0 0 70px rgba(255, 255, 255, .34), 0 26px 50px -24px rgba(0, 0, 0, .6);
}
html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne:hover:not(:disabled) {
	background: #fff; color: #8C0010;
	box-shadow: 0 0 92px rgba(255, 255, 255, .5), 0 30px 60px -24px rgba(0, 0, 0, .7);
}

/* --- nábeh: 30px po osi Y a krivka predlohy ------------------------------ */
/* Predloha to má ako reveal-on-scroll (v origináli to robí JavaScript). Čisto
   v CSS by to bolo animation-timeline: view() - vyskúšané a ZAHODENÉ: pri
   fill-mode both ostali celé sekcie na opacity 0 (pri tlači a v prehliadači bez
   aktívneho scrolleru sa časovač nerozbehne a obsah zmizne). Tu preto beží
   nábeh cez @starting-style: východiskový stav prvku je VIDITEĽNÝ, posun 30px
   a krivka ostávajú, a v prehliadači bez @starting-style sa proste nič nedeje.
   Posúvame `translate`, nie `transform`, aby to nekolidovalo s hover stavmi. */
@media (prefers-reduced-motion: no-preference) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__text,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap {
		transition: opacity .7s var(--pb-krivka), translate .7s var(--pb-krivka),
		            background .3s var(--pb-krivka), box-shadow .4s var(--pb-krivka);
	}
	@starting-style {
		html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__text,
		html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual,
		html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt,
		html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel,
		html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel,
		html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap {
			opacity: 0; translate: 0 30px;
		}
	}
	/* oneskorenie dávam LEN hrdinovmu vizuálu - na kartách a paneloch by ten istý
	   transition-delay spomalil aj odozvu na hover, a to je horšie ako stupňovanie */
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual { transition-delay: .12s; }
}

/* --- šírky: 1440 / 1280 / 1024 / 768 / 390 ------------------------------- */
/* ⚠️ Zlom hrdinu je 1100/1101 px, NIE 1024 px. Základ zráža .ox-hero__mriezka na
   jeden stĺpec a dáva .ox-hero__vizual order:-1 už pri max-width:1100px. Môj
   selektor pre .ox-hero__mriezka má oveľa vyššiu špecificitu, takže by dva
   stĺpce prežili, ale order:-1 nie - medzi 1025 a 1100 px by sa hrdina PREVRÁTIL
   (fotka vľavo, text vpravo) a zrakové poradie by prestalo sedieť s tabulátorom. */
@media (min-width: 1101px) {
	/* predloha: hrdina min. 95vh */
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero {
		min-height: min(92vh, 940px); display: grid; align-items: center;
	}
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	}
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual { order: 0; }
	/* asymetrická mriežka služieb: lepkavý nadpis vľavo, karty vpravo */
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--krem:has(.ox-mriezka--3) .ox-wrap {
		display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
		gap: clamp(28px, 4.4vw, 76px); align-items: start;
	}
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--krem:has(.ox-mriezka--3) .ox-hlava-sekcie {
		position: sticky; top: calc(var(--ox-lista, 0px) + 104px); margin: 0;
	}
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 {
		grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
	}
}
@media (min-width: 861px) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
		gap: clamp(28px, 4.4vw, 76px);
	}
}
/* ⚠️ Základ zráža .ox-mriezka--2 na jeden stĺpec až pri 620 px, nie pri 860 px.
   Bez tohto pravidla by 4. sekcia ostala pri 768 px dvojstĺpcová: očíslovaný
   zoznam v ~330px stĺpci vedľa stlačenej fotky. */
@media (max-width: 860px) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 621px) and (max-width: 1100px) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka { grid-template-columns: minmax(0, 1fr); }
	/* fotka je tu NAD textom (základ jej dáva order:-1), takže ju nesmie
	   prevalcovať: výšku neorezávam (max-height + object-fit:cover odrezali
	   hlavičku „STARTER SET"), len jej zmenším šírku a nechám ju v strede */
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img { max-width: 560px; }
}
@media (max-width: 620px) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] > section { padding-block: clamp(52px, 12vw, 76px); }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 { line-height: 1.1; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1::after { width: 96px; height: 5px; margin-top: 20px; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn { width: 100%; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-lead { font-size: 17px; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-oko::before { padding-right: 34px; background-size: 22px 1px; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible { border-radius: 28px; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel { border-radius: 22px; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap { border-radius: 28px; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn { width: 100%; }
}
/* Nízke notebooky (1280x720). Základ na to má vlastnú poistku
   (@media (max-height:840px) and (min-width:1100px)), lenže tá mieri na holé
   .ox-hero / .ox-h1 / .ox-hero__vizual img - moje selektory ju prebijú
   špecificitou a hrdina by na 720px displeji prerástol ohyb. Obnovujem ju
   vo vlastnej réžii; `width:auto` pri `max-height` je povinné, inak by
   obrázok so `width:100%` pri stlačenej výške deformoval pomer strán. */
@media (max-height: 840px) and (min-width: 1101px) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] > section { padding-block: clamp(48px, 5vw, 84px); }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero { min-height: 0; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 { font-size: clamp(34px, 5vw, 68px); }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1::after { margin-top: 18px; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img {
		width: auto; max-width: 100%; height: auto; max-height: 46vh;
	}
}

/* --- obmedzený pohyb ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-oko::before { animation: none; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto img,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov::after,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-panel,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn { transition: none; }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:hover .ox-produkt__nazov::after,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible .ox-produkt__nazov::after { transform: translateX(-2px); }
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne::after,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn--hlavne::after,
	html[data-ox-b2bstr="premium"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne::after { transition: none; }
}

/* ---- b2bstr / cesta: Cesta setu  (podľa ) ---- */
/* =============================================================================
   NÁVRH CELEJ STRÁNKY /b2b - "CESTA SETU"  (id: cesta)
   -----------------------------------------------------------------------------
   PREDLOHA (knižnica superdesign.dev, prevzatá verbatim ako zadanie):
   "Animated landing page - one product that travels the whole page".

   ČO Z PREDLOHY ZOSTALO 1:1
   - Teplá papierová zem + hlboký atrament, JEDEN akcent, ktorý je VŽDY len
     typografia, linka alebo kreslená čiara, NIKDY vyplnená plocha.
   - Border-radius 0 úplne všade, vrátane tlačidiel a fotiek.
   - Žiadny prechod, žiadna žiara, žiadne bento, žiadne zaoblené karty a žiadny
     tieň na ničom okrem výrezu produktu (hrdinská fotka a party-set).
   - Vlásočnicové linky rgba(27,27,27,.16) nesú celú štruktúru namiesto pozadí.
   - Displejové písmo na všetky nadpisy, mono na VŠETKY popisky aj beh textu,
     popisky 11-12 px s prestrkom .07-.1em.
   - Šesť sekcií presne v poradí predlohy: hrdina / argument / demonštrácia /
     materiál / rozmery / záver.
   - Podpisové komponenty: PUTUJÚCI PRODUKT (position:fixed, kľúčované x, y,
     rotácia, mierka a krytie v % výrezu okna), kreslená linka pod nadpismi,
     roztiahnutá značka orezaná hranou rámu (DVAKRÁT, presne ako predloha:
     na dne hrdinu a na dne záveru), a "hairline-ruled rows" s malým
     verzálkovým akcentovým štítkom.
   - Model pohybu predlohy: putujúci produkt a obe značky sú viazané na POLOHU
     scrollu (idú aj späť), odhalenie v hrdinovi sa spúšťa pri načítaní.

   ČO SME PRELOŽILI (jediné dve povolené veci)
   (a) Paleta a písma: papier = krém #FFF7E6, druhá zem = biela, atrament
       #1B1B1B, cudzí modrý akcent = naša červená (#D60019 na typ kvôli
       kontrastu 5,09:1 na kréme, #D60019 na linky), na atramente svetloružová
       #FFD9D6 (13,24:1). Displej = Anton verzálky, line-height 1.25 kvôli
       diakritike. Serifová kurzíva predlohy nemá v Antone náprotivok, preto
       zvýraznenú frázu nesie kreslená akcentová linka pod nadpisom.
   (b) Nosič: predloha je HTML/Tailwind, tu je čisté CSS nad nemenným markupom.

   ČO SME VEDOME VYNECHALI
   - Navigáciu a pätičku (zdieľané, mimo trasy).
   - Kreslené SVG demonštrácie: u nás je demonštráciou kalkulačka, do ktorej
     sa nesmie siahať; ostala jej len rámovaná doska okolo.
   - Pravostranné číselné hodnoty v riadkoch 4. sekcie: markup ich nemá a
     vymýšľať čísla predloha výslovne zakazuje. V 5. sekcii náprotivok je
     (poradové číslo kroku), takže tam pravý stĺpec zostal.
   - Rozsadzovanie značky po písmenách (justify-content:space-between): markup
     sa nemení, preto ju roztláča prestrk. Je to dekorácia, meno značky,
     nie nový obsah.

   ČO PREBÍJAME V ZÁKLADE / INLINE
   - !important na `ul` v 4. sekcii (inline gap:12px -> 0, aby riadky sadli na
     spoločný vlások) a na `li.ox-panel` (inline padding:14px 18px).
   - !important na `img` v 4. sekcii (inline border-radius:var(--sk-r-velky),
     v základe 24 px).
   - !important na `.ox-wrap` v 6. sekcii (inline text-align:center) a na
     `.ox-lead` tamtiež (inline margin-inline:auto); záver predlohy je
     zarovnaný na hranu, nie na stred.
   - !important na `.ox-h3` v 5. sekcii (inline margin-top:12px).
   - !important na `.ox-mriezka--2` v 4. sekcii (inline align-items:center).
   - !important na focus-ring tlačidiel, lebo základ (varianty.css r. 5563) ho
     má tiež s !important a jeho vnútorný krúžok berie --sk-bg, ktorý je v
     tmavých témach tmavý a na našej papierovej zemi by zmizol.
   - `.ox-btn:active` NEMENÍME: základ má scale(.96) !important, reset bez
     !important by bol mŕtvy kód.
   - Obrysové tlačidlo dostalo vlastný token --c-obrys (.62 namiesto .38):
     vlások na ovládacom prvku nesplnil WCAG 1.4.11 (2,38:1 < 3:1).
   - Odkazy, ktoré nie sú .ox-btn (dlaždice sortimentu, odkazy v poznámke),
     majú vlastný :focus-visible; inak by brali obrys zo základu aj s
     border-radius 4px, čiže presne ten roh, ktorý trasa všade ruší.
   - Pozadia sekcií sú zapísané literálmi, nie tokenmi tém: trasa musí vyzerať
     rovnako aj pod tmavou témou (NoirG), kde --sk-bg a --sk-text sú opačné.
   - Do .ox-kalk nesiaha ani jeden selektor. Pozor, samo "scope na trasu"
     nestačí: kalkulačka má vnútri `.ox-h3` aj `.ox-btn.ox-btn--hlavne`
     (doplnky.js r. 581 a 640). Preto `.ox-h3` NIE JE v spoločnej skupine
     nadpisov (typografiu mu dáva až pravidlo 5. sekcie) a všetky pravidlá
     tlačidiel idú cez `> section:not([id])`, lebo 3. sekcia je jediná s id
     a jediná s kalkulačkou. `.ox-kalk-pozn-host` je jej SÚRODENEC, nie
     potomok (pohlady.js r. 2066), na ten siahať smieme.
   ========================================================================== */

/* --- 0) tokeny návrhu + papierová zem celej trasy -------------------------- */
/* #ox-obsah dostáva BIELU, nie krém: varianty hlavičky 2 / 2g / 5 dávajú
   #ox-obsah padding-top 78-98 px (varianty.css r. 5839, 5929, 7548) a ten pás
   susedí s hrdinom, ktorý je biely. S krémom by nad hrdinom svietil cudzí
   pruh. Krémovú zem nesú samotné sekcie. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] {
	--c-papier:      #FFF7E6;
	--c-papier2:     #FFFFFF;
	--c-atrament:    #1B1B1B;
	--c-atrament2:   #3D3833;
	--c-tlmeny:      #67605A;
	--c-akcent:      #D60019;
	--c-akcent-linka:#D60019;
	--c-ruz:         #FFD9D6;
	--c-vlas:        rgba(27, 27, 27, .16);
	--c-vlas2:       rgba(27, 27, 27, .38);
	/* obrys OVLÁDACIEHO prvku nesmie byť vlások: rgba(27,27,27,.38) je na bielej
	   #A8A8A8 = 2,38:1 a WCAG 1.4.11 žiada 3:1. .62 dáva #727272 = 4,81:1
	   na bielej a 4,70:1 na kréme a stále vyzerá ako tlačená linka. */
	--c-obrys:       rgba(27, 27, 27, .62);
	--c-mono:        ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	--c-displej:     'Anton', Impact, sans-serif;
	--c-rytmus:      clamp(58px, 7vw, 116px);
	--c-pad:         var(--sk-pad);
	/* Jedna miera pre OBE roztiahnuté značky. 12,6vw je strop, pri ktorom
	   "OXO BUBBLE TEA" v Antone s koncovým prestrkom .128em vyjde na 97 vw
	   (merané v Chromiu na 360, 390, 620, 768, 860, 1024, 1280, 1440 a 1600 px).
	   Pri pôvodných 13,6vw a .05em to bolo ~100 vw a hrana odrezala O aj A.
	   Z tejto miery sa počíta aj spodný padding oboch sekcií a poloha vlásku,
	   takže sa už nikde neprekrývajú. */
	--c-znacka:      clamp(42px, 12.6vw, 196px);
	background: var(--c-papier2);
	color: var(--c-atrament);
}

/* --- 0a) typografická škála predlohy --------------------------------------- */
/* .ox-h3 tu ZÁMERNE NIE JE: kalkulačka má vlastný <h3 class="ox-h3"> (doplnky.js
   r. 581) a tento selektor by jej ho prepísal, hoci má vlastný prepínač
   html[data-ox-kalk]. Jediný .ox-h3 mimo kalkulačky je v 5. sekcii a tam si
   typografiu berie vlastné pravidlo. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-h1,
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-h2,
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov {
	font-family: var(--c-displej);
	font-weight: 400;
	text-transform: uppercase;
	/* predloha má -.02em; Anton je už kondenzovaný a slovenská diakritika sa
	   pri -.02em dotýka susedného písmena, preto polovica */
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--c-atrament);
	text-wrap: balance;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-h1 { font-size: clamp(33px, 4.7vw, 70px); margin: 0; }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-h2 { font-size: clamp(27px, 3.3vw, 46px); margin: 0; }

/* nadnadpis = mono štítok predlohy (11,5 px, .09em) + vodorovná akcentová linka */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-oko {
	font-family: var(--c-mono); font-size: 11.5px; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--c-akcent); margin: 0 0 clamp(14px, 1.6vw, 20px); gap: 12px;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-oko::before {
	width: 44px; height: 1px; background: currentColor;
}

/* beh textu je v predlohe tiež mono; 11-12 px by bolo na slovenské vety
   nečitateľné, preto 13,5-15 px / 1.85 - jediná odchýlka od jej škály */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-lead {
	font-family: var(--c-mono); font-size: clamp(13.5px, 1vw, 15px);
	line-height: 1.85; letter-spacing: .012em;
	color: var(--c-atrament2); max-width: 56ch; margin: 0;
}
/* generické `.ox-text-tlmeny { color }` je preč: jediný taký prvok na /b2b je
   v 5. sekcii a tomu farbu nastavuje vlastné pravidlo, takže by bolo mŕtve. */

/* --- 0b) tlačidlá: 0 rohov, bez tieňa, akcent len ako typ ------------------ */
/* `> section:not([id])`: 3. sekcia je JEDINÁ s id (#ox-zisk) a JEDINÁ, ktorá
   drží kalkulačku, a tá má vnútri vlastné .ox-btn.ox-btn--hlavne.ox-btn--plne
   (doplnky.js r. 640). Bez tejto zábrany by sme jej CTA prefarbili a bili by
   sme sa s jej vlastným prepínačom html[data-ox-kalk]. Špecificita ostáva pod
   pravidlom pre tlačidlo v 6. sekcii, takže biele tlačidlo v závere drží. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:not([id]) .ox-btn {
	border-radius: 0; box-shadow: none; border-width: 1px;
	font-family: var(--c-mono); font-size: 11.5px; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase;
	padding: 15px 26px; min-height: 48px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:not([id]) .ox-btn--velke { padding: 19px 34px; min-height: 58px; font-size: 12.5px; }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:not([id]) .ox-btn--hlavne {
	background: var(--c-atrament); color: var(--c-papier); border-color: var(--c-atrament);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:not([id]) .ox-btn--obrys {
	background: transparent; color: var(--c-atrament); border-color: var(--c-obrys);
}
/* hover predlohy: mono odkaz sa preklápa do akcentu - akcent zostáva typ */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:not([id]) .ox-btn--hlavne:hover:not(:disabled) {
	background: transparent; color: var(--c-akcent); border-color: var(--c-akcent); transform: none;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:not([id]) .ox-btn--obrys:hover:not(:disabled) {
	background: var(--c-atrament); color: var(--c-papier); border-color: var(--c-atrament); transform: none;
}
/* !important, lebo základ má focus-ring tiež s !important a berie --sk-bg */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:not([id]) .ox-btn:focus-visible {
	outline: none; box-shadow: 0 0 0 2px var(--c-papier2), 0 0 0 4px var(--c-akcent-linka) !important;
}
/* ODKAZY, ktoré nie sú .ox-btn (dlaždice sortimentu, odkazy v poznámke), by
   inak spadli na :focus-visible zo základu (_zaklad.css r. 100): 3px obrys v
   --sk-akcent TÉMY plus border-radius 4px, čo by práve zaoblilo roh, ktorý
   celý návrh vyrovnáva. #D60019 má na bielej 4,98:1, na atramente 3,46:1. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a:focus-visible {
	outline: 2px solid var(--c-akcent-linka); outline-offset: 3px; border-radius: 0;
}

/* --- 0c) sekcie: jedna zem, štruktúru nesú vlásky -------------------------- */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek {
	background: var(--c-papier); border-top: 1px solid var(--c-vlas);
	padding-block: var(--c-rytmus);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie {
	display: block; position: relative;
	margin-bottom: clamp(30px, 3.6vw, 52px);
	padding-bottom: clamp(16px, 1.8vw, 24px);
	border-bottom: 1px solid var(--c-vlas);
}
/* kreslená linka predlohy: akcent ako ČIARA, viazaná na polohu scrollu
   (predloha to dovoľuje - reverzibilné je to, čo je viazané na polohu) */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
	background: var(--c-akcent-linka); transform: scaleX(1); transform-origin: left center;
}

/* =====================================================================
   1) HRDINA - kópia hrdinu predlohy: mono nadnadpis, veľký nadpis,
      mono lede, dve tlačidlá, vlásočnicou oddelený pás na dne stĺpca
      a roztiahnutá značka cez celé dno, ktorú rám oreže
   ================================================================== */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero {
	position: relative;
	background: var(--c-papier2);
	border-bottom: 1px solid var(--c-vlas);
	/* spodný padding rezervuje NAJVYŠŠÍ stav značky (.9em z prvého kľúčového
	   snímku), nie koncový .78em, inak by na začiatku rolovania zaliezla
	   pod vlások nad tlačidlami */
	padding-block: clamp(46px, 6vw, 104px) calc(var(--c-znacka) * .9 + clamp(30px, 3.2vw, 52px));
	overflow: clip;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka {
	gap: clamp(28px, 4vw, 72px); align-items: center;
}
/* biely závoj základu (_zaklad.css r. 458) je pod tmavou témou tmavý a zem
   je aj tak biela */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__text::before { display: none; }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1 {
	position: relative; margin-bottom: clamp(20px, 2.4vw, 32px);
}
/* zvýraznená fráza predlohy (serifová kurzíva v akcente) nemá v Antone
   náprotivok, jej rolu preberá kreslená akcentová linka pod nadpisom */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1::after {
	content: ''; display: block; height: 2px; width: clamp(88px, 12vw, 190px);
	margin-top: clamp(18px, 2vw, 28px);
	background: var(--c-akcent-linka); transform-origin: left center;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-lead { max-width: 46ch; }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie {
	margin-top: clamp(26px, 3vw, 44px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid var(--c-vlas);
	gap: 14px; align-items: center;
}
/* výrez produktu je JEDINÉ miesto, kde predloha tieň povoľuje */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img {
	border-radius: 0; max-height: min(58vh, 520px);
	filter: drop-shadow(0 28px 44px rgba(27, 27, 27, .3));
}
/* ROZTIAHNUTÁ ZNAČKA NA DNE HRDINU - podpisový komponent predlohy, ktorý
   v pôvodnom návrhu chýbal (predloha ju má aj v hrdinovi, aj v závere).
   Reže sa SAMA: vlastné overflow:clip a výška menšia než riadok, takže dolná
   časť písmen ostane pod hranou. Nie cez overflow hrdinu - ten blok
   s putujúcim produktom prepína na visible, aby žiadny prehliadač neorezal
   fixovaný výrez. Klesanie predlohy robí zmenšovanie tejto výšky. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero::after {
	content: 'OXO BUBBLE TEA';
	position: absolute; left: 0; right: 0; bottom: 0;
	height: .78em; overflow: clip;
	font: 400 var(--c-znacka)/1 var(--c-displej);
	/* predloha sadzí značku po písmenách cez justify-content:space-between na
	   viac než plnú šírku. Markup sa nemení, náhradou je prestrk: .128em dá
	   pri 12,6vw presne ~97 vw (merané v Chromiu na 390-1600 px), .05em dávalo
	   len 84 vw a značka pôsobila ako zabudnutý nápis v strede.
	   text-indent dorovná medzeru, ktorú prestrk pridá aj ZA posledné písmeno. */
	letter-spacing: .128em; text-indent: .128em; text-align: center; white-space: nowrap;
	color: rgba(27, 27, 27, .12);
	pointer-events: none;
}

/* =====================================================================
   2) SORTIMENT - "argument" predlohy: dlaždice bez tieňa a bez rohov,
      zdieľaný vlások medzi nimi. Mriežka je DVOJSTĹPCOVÁ a zámerne
      neťahá sa cez celú šírku: vpravo ostáva voľná dráha, cez ktorú
      prechádza putujúci produkt.
      (Pôvodný návrh tu mal trojstĺpcovú mriežku s prázdnou orámovanou
      treťou bunkou. To sa nedalo obhájiť: dráha produktu existuje len v
      Chromiu/Firefoxe nad 1100 px a pri prefers-reduced-motion vôbec,
      takže v Safari a pri obmedzenom pohybe by tam svietila prázdna
      orámovaná škatuľa. Rám je preč, stĺpce sú dva.)
   ================================================================== */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-mriezka--3 {
	grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
	max-width: min(100%, 940px);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt {
	background: var(--c-papier2); border: 1px solid var(--c-vlas);
	border-radius: 0; box-shadow: none;
	transition: border-color .2s ease;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt + .ox-karta.ox-produkt { border-left: 0; }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:hover {
	transform: none; box-shadow: none; border-color: var(--c-vlas2);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible {
	outline: none; border-radius: 0; border-color: var(--c-vlas2);
	box-shadow: 0 0 0 2px var(--c-papier2), 0 0 0 4px var(--c-akcent-linka);
}
/* hover-only stav musí mať dvojča pre klávesnicu, inak tabulátor nevidí nič */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:hover .ox-produkt__nazov,
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:focus-visible .ox-produkt__nazov { color: var(--c-akcent); }
/* Téma 21x kartu síce zastaví (varianty.css r. 3524), ale fotke necháva
   scale(1.06) (r. 3526). Na tlačenej strane, kde sa nehýbe nič okrem
   putujúceho výrezu, je taký zoom cudzí prvok. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt:hover .ox-produkt__foto img { transform: none; }
/* Tá istá téma vkladá za názov šípku '→' v Inter a v akcente témy
   (varianty.css r. 3515). Obsah jej nerušíme, je to užitočný náznak odkazu,
   ale písmo aj farbu zosúladíme: na tejto trase je každý popisok mono.
   Pod inou témou sa ::after nevykreslí, pravidlo je vtedy bez účinku. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt .ox-produkt__nazov::after {
	font-family: var(--c-mono); font-size: 12px; font-weight: 700;
	color: var(--c-akcent);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto { border-radius: 0; aspect-ratio: 4 / 3; }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-produkt__telo {
	padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
	gap: 10px; border-top: 1px solid var(--c-vlas);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov {
	font-size: clamp(17px, 1.5vw, 21px); transition: color .2s ease;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-produkt__popis {
	font-family: var(--c-mono); font-size: 12.5px; line-height: 1.75;
	letter-spacing: .02em; color: var(--c-tlmeny); -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* =====================================================================
   3) VÝPOČET ZISKU - "demonštrácia" predlohy v rámovanej doske.
      Do .ox-kalk nesiahame, rám kreslíme na .ox-wrap okolo nej a hlavu
      oddeľuje vlások, takže doska drží vnútro ako panel predlohy.
      --sk-maxw je v _zaklad.css r. 60 vždy definované (1560px), preto
      žiadna záloha: rám tak sedí presne na textovú hranu ostatných sekcií.
   ================================================================== */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section#ox-zisk { background: var(--c-papier2); }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section#ox-zisk > .ox-wrap {
	max-width: min(calc(100% - 2 * var(--c-pad)), calc(var(--sk-maxw) - 2 * var(--c-pad)));
	margin-inline: auto;
	padding-inline: clamp(16px, 2.4vw, 38px);
	padding-block: clamp(24px, 2.8vw, 40px);
	border: 1px solid var(--c-atrament);
	background: var(--c-papier2);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section#ox-zisk .ox-hlava-sekcie {
	margin-bottom: clamp(20px, 2.4vw, 30px);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host {
	font-family: var(--c-mono); font-size: 12.5px; line-height: 1.8; letter-spacing: .02em;
	color: var(--c-tlmeny); max-width: 70ch;
	margin: 0 0 clamp(20px, 2.4vw, 30px);
	padding-left: 16px; border-left: 2px solid var(--c-akcent-linka);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host b { color: var(--c-atrament); }
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a {
	color: var(--c-akcent); text-decoration: underline; text-underline-offset: 3px;
}

/* =====================================================================
   4) ČO JE V SETE - "argument and material": dvojstĺpec, vľavo nadpis
      a vlásočnicové riadky s malým verzálkovým akcentovým štítkom,
      vpravo druhý výrez toho istého putujúceho objektu
   ================================================================== */
/* !important: inline style na .ox-mriezka--2 dáva align-items:center */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(30px, 4.4vw, 76px);
	align-items: start !important;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-h2 {
	padding-bottom: clamp(14px, 1.6vw, 20px);
	border-bottom: 1px solid var(--c-vlas);
}
/* !important: inline style na ul dáva gap:12px a margin:20px 0 */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) ul {
	gap: 0 !important;
	margin: clamp(20px, 2.4vw, 30px) 0 clamp(26px, 3vw, 38px) !important;
	counter-reset: c-polozka;
}
/* !important: inline style na li dáva padding:14px 18px */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) ul > li.ox-panel {
	padding: clamp(14px, 1.5vw, 19px) 0 !important;
	background: transparent; border: 0; border-bottom: 1px solid var(--c-vlas);
	border-radius: 0; box-shadow: none;
	display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px;
	align-items: baseline;
	font-family: var(--c-mono); font-size: 13.5px; line-height: 1.75;
	letter-spacing: .015em; color: var(--c-atrament2);
	counter-increment: c-polozka;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) ul > li.ox-panel::before {
	content: counter(c-polozka, decimal-leading-zero);
	font-family: var(--c-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .1em; color: var(--c-akcent);
}
/* !important: inline style na img dáva border-radius:var(--sk-r-velky) */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) img {
	border-radius: 0 !important;
	width: 100%;
	filter: drop-shadow(0 26px 42px rgba(27, 27, 27, .26));
}

/* =====================================================================
   5) AKO TO PREBIEHA - "measurements" predlohy: jeden stĺpec
      vlásočnicových riadkov, štítok, popis a vpravo zarovnané číslo
   ================================================================== */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-mriezka--4 {
	grid-template-columns: minmax(0, 1fr); gap: 0;
	border-top: 1px solid var(--c-vlas);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel {
	background: transparent; border: 0; border-bottom: 1px solid var(--c-vlas);
	border-radius: 0; box-shadow: none;
	padding: clamp(20px, 2.4vw, 32px) 0;
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr) auto;
	gap: 6px clamp(18px, 2.4vw, 38px);
	align-items: baseline;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-h3 {
	grid-column: 1; grid-row: 1;
	font-family: var(--c-displej); font-weight: 400; text-transform: uppercase;
	letter-spacing: -.01em; line-height: 1.25; color: var(--c-atrament);
	text-wrap: balance; font-size: clamp(18px, 1.6vw, 23px);
	margin: 0 !important;   /* inline style dáva margin-top:12px */
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-text-tlmeny {
	grid-column: 2; grid-row: 1; margin: 0;
	font-family: var(--c-mono); font-size: 13px; line-height: 1.75;
	letter-spacing: .015em; color: var(--c-tlmeny);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-odznak {
	grid-column: 3; grid-row: 1; justify-self: end; text-align: right;
	background: none; border-radius: 0; padding: 0;
	font: 400 clamp(30px, 3.2vw, 50px)/1 var(--c-displej);
	letter-spacing: -.01em; text-transform: none;
	font-variant-numeric: tabular-nums; color: var(--c-akcent);
}

/* =====================================================================
   6) ZÁVER - "close" predlohy: hrana namiesto stredu, mono drobné písmo,
      tlačidlo na opačnej hrane, vlásočnicový pás a roztiahnutá značka,
      ktorú hrana rámu oreže
   ================================================================== */
/* .ox-sek.ox-sek--tmava (nie len .ox-sek--tmava): so samotnou modifikačnou
   triedou má selektor rovnakú špecificitu ako pravidlo pre .ox-sek v 0c a
   vyhrával by len poradím v súbore.
   overflow je clip, NIE hidden: hidden robí zo sekcie scroll kontajner a
   animation-timeline: view() na jej ::after by sa potom viazal na tento
   nerolujúci kontajner, takže by roztiahnutie značky zamrzlo. */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava {
	position: relative; overflow: clip;
	/* pomenovaná os pre značku v ::after. Jej vlastný view() by sa NIKDY
	   nedotiahol do konca: pseudoprvok leží na samom dne dokumentu, takže
	   „cover 62%" je za posledným pixelom rolovania (merané: zastal na 38 %).
	   Os berieme zo SEKCIE a dokončíme ju na entry 55 %, teda ešte pred dnom. */
	view-timeline-name: --ox-cesta-zaver; view-timeline-axis: block;
	background: var(--c-atrament);   /* plochý atrament - predloha zakazuje prechod */
	color: var(--c-papier2); border-top: 0;
	padding-block: clamp(62px, 7vw, 116px) calc(var(--c-znacka) * .81 + clamp(46px, 5vw, 78px));
}
/* !important: inline style na .ox-wrap dáva text-align:center */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava > .ox-wrap {
	text-align: left !important;
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px clamp(24px, 3.4vw, 60px); align-items: end;
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava .ox-h2 {
	grid-column: 1; grid-row: 1; color: var(--c-papier2);
}
/* !important: inline style na .ox-lead dáva margin-inline:auto */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava .ox-lead {
	grid-column: 1; grid-row: 2; margin: 14px 0 0 !important;
	max-width: 54ch; color: #E8E3DA;   /* 13,48:1 na atramente */
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava .ox-btn--hlavne {
	grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: end;
	background: var(--c-papier2); color: var(--c-atrament); border-color: var(--c-papier2);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava .ox-btn--hlavne:hover:not(:disabled) {
	background: transparent; color: var(--c-ruz); border-color: var(--c-ruz);
}
/* vlások leží nad značkou, nie v nej: odstup sa počíta z tej istej miery */
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava::before {
	content: ''; position: absolute; left: 0; right: 0;
	bottom: calc(var(--c-znacka) * .81 + clamp(20px, 2.2vw, 34px));
	height: 1px; background: rgba(255, 255, 255, .22);
}
html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava::after {
	content: 'OXO BUBBLE TEA';
	position: absolute; left: 0; right: 0; bottom: 0;
	font: 400 var(--c-znacka)/1 var(--c-displej);
	letter-spacing: .128em; text-indent: .128em; text-align: center; white-space: nowrap;
	color: rgba(255, 255, 255, .1);
	transform: translateY(.19em); pointer-events: none;
}

/* =====================================================================
   7) PUTUJÚCI PRODUKT + OBE ZNAČKY - podpisové komponenty predlohy
      Jeden výrez produktu je position:fixed a jeho dráha je kľúčovaná
      v % výrezu okna, takže drží pri každej veľkosti. Viazaná je na
      POLOHU scrollu, takže pri rolovaní hore ide dráha naspäť.
      Fallback (bez podpory alebo pri obmedzenom pohybe): fotka zostáva
      v hrdinovi a stránka sa číta ako úplný dokument.
   ================================================================== */
@keyframes ox-cesta-put {
	0%   { transform: translate3d(58vw, 13vh, 0) rotate(-5deg)  scale(1);   opacity: 1; visibility: visible; }
	30%  { transform: translate3d(68vw, 24vh, 0) rotate(3deg)   scale(.82); opacity: 1; visibility: visible; }
	58%  { transform: translate3d(71vw, 31vh, 0) rotate(8deg)   scale(.64); opacity: 1; visibility: visible; }
	80%  { transform: translate3d(22vw, 40vh, 0) rotate(-10deg) scale(.5);  opacity: .55; visibility: visible; }
	100% { transform: translate3d(-6vw, 52vh, 0) rotate(-18deg) scale(.42); opacity: 0; visibility: hidden; }
}
@keyframes ox-cesta-linka { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ox-cesta-pristatie {
	from { transform: translate3d(12%, 8%, 0) rotate(7deg) scale(.86); opacity: .25; }
	to   { transform: none; opacity: 1; }
}
/* značka v ZÁVERE: prilieta zdola a roztvára sa */
@keyframes ox-cesta-znacka {
	from { letter-spacing: .06em; text-indent: .06em; opacity: 0; transform: translateY(.34em); }
	to   { letter-spacing: .128em; text-indent: .128em; opacity: 1; transform: translateY(.19em); }
}
/* značka v HRDINOVI: odhalenie na načítanie (krytie) je oddelené od
   roztvárania (prestrk + výška výrezu), aby si dve animácie na tom istom
   prvku nesiahali na tú istú vlastnosť. Klesanie robí zmenšovanie výšky
   vlastného výrezu: text sa nehýbe, ale hrana ho reže hlbšie. */
@keyframes ox-cesta-znacka-vstup { from { opacity: 0; } to { opacity: 1; } }
@keyframes ox-cesta-znacka-rozpat {
	from { letter-spacing: .06em; text-indent: .06em; height: .9em; }
	to   { letter-spacing: .128em; text-indent: .128em; height: .78em; }
}

@media (prefers-reduced-motion: no-preference) {
	/* odhalenie v hrdinovi sa spúšťa pri načítaní, nie pri pretnutí -
	   hrdina je na obrazovke od začiatku (model pohybu predlohy) */
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero .ox-h1::after {
		animation: ox-cesta-linka .9s cubic-bezier(.22, 1, .36, 1) .15s both;
	}
	/* značka hrdinu: krytie na načítanie, roztvorenie na POLOHU scrollu.
	   Bez podpory scroll časovej osi spadne celá deklarácia animation-timeline
	   a roztvorenie prebehne raz na načítanie, čo je stále správny koncový stav. */
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero::after {
		animation: ox-cesta-znacka-vstup .9s cubic-bezier(.22, 1, .36, 1) .2s both,
		           ox-cesta-znacka-rozpat 1s linear both;
		animation-timeline: auto, scroll(root block);
		animation-range: normal, 0px 90vh;
	}

	@supports (animation-timeline: view()) {
		html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie::after {
			animation: ox-cesta-linka 1s linear both;
			animation-timeline: view();
			animation-range: entry 12% cover 34%;
		}
		html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) img {
			animation: ox-cesta-pristatie 1s ease-in-out both;
			animation-timeline: view();
			animation-range: entry 6% cover 48%;
		}
		html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava::after {
			animation: ox-cesta-znacka 1s linear both;
			animation-timeline: --ox-cesta-zaver;
			animation-range: entry 0% entry 55%;
		}
	}

	/* dráha sa zapína až od 1100 px: pod ňou je hrdina jednostĺpcový a
	   plávajúci výrez by liezol do textu */
	@media (min-width: 1100px) {
		@supports (animation-timeline: scroll(root block)) {
			html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero {
				min-height: min(86vh, 900px); display: flex; align-items: center; overflow: visible;
			}
			html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka {
				grid-template-columns: minmax(0, 1fr);
			}
			html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__text {
				max-width: 46vw; display: flex; flex-direction: column;
				min-height: min(53vh, 560px);
			}
			html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie { margin-top: auto; }
			html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual {
				position: fixed; inset: 0 auto auto 0; z-index: 3;
				width: clamp(260px, 30vw, 460px); min-height: 0;
				pointer-events: none; will-change: transform, opacity;
				animation: ox-cesta-put 1s ease-in-out both;
				/* skratka `animation` resetuje timeline aj range, preto až za ňou */
				animation-timeline: scroll(root block);
				animation-range: 0px 165vh;
			}
			html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img {
				max-height: none; width: 100%;
			}
		}
	}
}

/* =====================================================================
   8) Šírky 1440 / 1280 / 1024 / 768 / 390
      .ox-wrap sa rozširuje až po --sk-maxw = 1560 px (obsah 1408 px),
      nad tým už len pribúda okraj, preto žiadna vetva "širšie".
   ================================================================== */
@media (max-width: 1100px) {
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 {
		grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 40px);
	}
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) img { max-width: 560px; }
}
@media (max-width: 860px) {
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-text-tlmeny {
		grid-column: 1 / -1; grid-row: 2; margin-top: 6px;
	}
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-odznak { grid-column: 2; }
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava > .ox-wrap {
		grid-template-columns: minmax(0, 1fr);
	}
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section.ox-sek.ox-sek--tmava .ox-btn--hlavne {
		grid-column: 1; grid-row: 3; justify-self: start; margin-top: clamp(22px, 3vw, 32px);
	}
}
@media (max-width: 620px) {
	/* naša mriežka drží dva stĺpce až sem, preto tu musí byť jeden výslovne */
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-mriezka--3 { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-karta.ox-produkt + .ox-karta.ox-produkt {
		border-left: 1px solid var(--c-vlas); border-top: 0;
	}
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) ul > li.ox-panel {
		grid-template-columns: 44px minmax(0, 1fr);
	}
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-panel > .ox-odznak {
		font-size: clamp(26px, 8vw, 34px);
	}
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn { width: 100%; }
	html[data-ox-b2bstr="cesta"] #ox-obsah[data-trasa="b2b"] > section#ox-zisk > .ox-wrap {
		padding-inline: 14px; padding-block: 20px;
	}
}

/* ---- b2bstr / typo: Typo  (podľa ) ---- */
/* =============================================================================
   NÁVRH /b2b: „Typo“ (id: typo) - Architectural Type System
   -----------------------------------------------------------------------------
   Zdroj: knižničný prompt superdesign.dev „architectural-type-system-style“
   (Swiss-brutalist, IDE + editorial). Prebraté verbatim, preložená len paleta
   a nosič (čisté CSS na nemenný markup pohľadu `b2b` v assets/pohlady.js).

   ZACHOVANÉ PRVKY PROMPTU
   · 0px rohy na VŠETKÝCH kontajneroch; pilulky ostávajú len tlačidlám.
   · Vlásočnica 0,5px po stranách (hairline-b / hairline-r), aby sa linky
     v rastri nezdvojovali - technika z „The Hairline Border“.
   · „Grid Matrix“: hrdina aj mriežky sú bunky oddelené vlásočnicou, gap 0.
     Hrdina má na širokej obrazovke výšku ohybu (prompt: „sections are often
     100vh on desktop to create a focused fold“).
   · „Command Bar“: pás akcií pod hrdinom je 300ms pruh s vlásočnicou navrchu
     a s posledným stĺpcom = zvislý stĺpec TROCH systémových mono štítkov
     (prompt, part „Command Bar“, cell 4). Toto v prvej verzii chýbalo.
   · Extrémna typografická hierarchia: displejové nadpisy verzálkami so záporným
     prestrkom, mono metadáta 9-11px s prestrkom .18em-.34em.
   · Mono štítky s PODTRŽNÍKMI namiesto medzier (MUST zo „special_notes“).
   · Text zarovnaný na samú hranu bunky (MUST): nadpis kroku sadá na spodnú
     hranu, súpis aj technický výpis idú po ľavú/spodnú hranu stĺpca.
   · Bento: mono štítok vľavo hore, tlmený vizuál v pokoji -> plný pri hoveri
     (a pri fokuse), jemný posun pozadia.
   · Signature „Interactive Geometric Card“: štvorec z vlásočnice 45° -> 90°
     pri hoveri, 700ms cubic-bezier(.4,0,.2,1).
   · Zrnitosť: fractal-noise SVG (inline data URI) pri opacite 0,05.
   · Hover 300ms, výmena čierna/biela alebo posun na akcent.
   · ŽIADNE tiene a ŽIADNE prechody (DO NOT) - hĺbku robí len linka a kontrast.
   · MONOCHRÓMNA ROVNOVÁHA (MUST): akcent NESMIE byť všade. Drží sa len na
     číslach kapitol (.ox-oko), na hlavnej akcii a na hoveri; opakované mono
     štítky (KAT_, POL_, KROK_) sú neutrálne. Prvá verzia mala akcent na
     všetkých štítkoch naraz, čo je priamo v rozpore s „special_notes“.

   PREKLAD PALETY
   · Indigo #6366f1 -> firemná červená. #000000 -> biela / krém #FFF7E6,
     #FFFFFF text -> atrament #1B1B1B. 'Inter Tight' 900 -> Anton verzálky;
     'JetBrains Mono' -> mono ostáva mono (téma ho už načítava).

   VEDOME VYNECHANÉ
   · Navigácia a pätička (sú mimo #ox-obsah, globálne pre celý web).
   · „Status Countdown“ - na stránke nie je žiadny časovač.
   · Delenie jedného slova do 2x2 buniek - H1 je jeden textový uzol.

   ČO PREBÍJAM V ZÁKLADE (overené v assets/temy/_zaklad.css a assets/varianty.css)
   · --sk-r-*, --sk-tien*, --sk-obrys, --sk-btn-tien sú pretokenizované na 0 /
     priehľadné. Tým sa zadarmo neutralizuje aj inline `border-radius:
     var(--sk-r-velky)` na obrázku v 4. sekcii a `filter: drop-shadow(
     var(--sk-tien))` na obrázku hrdinu (_zaklad.css r. 464).
   · varianty.css r. 4118-4120: `html[data-tema^="21"] .ox-hero__vizual:hover img
     { transform: scale(1.03) }` - pohyb, ktorý prompt zakazuje. Vypnutý.
   · varianty.css r. 3172: `.ox-sek .ox-oko { color: var(--sk-akcent-tmavy) }`.
     Domáci zvyk je pre drobnú sadzbu tmavší stupeň; preberám ho (nie --sk-akcent).
   · !important používam iba na štyri inline štýly v markupe a nikde inde.
   · .ox-btn:active scale(.96) !important (varianty.css r. 5562) NEPREBÍJAM.
   · .ox-btn:focus-visible box-shadow !important (varianty.css r. 5563)
     NEPREBÍJAM - je to funkčný prstenec fokusu, preto tlačidlá vynímam
     z vlastného obrysu fokusu (inak by boli prstence dva).

   KONTRAKT S KALKULAČKOU
   · Ani jeden selektor nevstupuje do .ox-kalk. Preto sa nikde nepoužíva holé
     .ox-btn, .ox-h3, ul, li, p ani a - vždy len cez kontajner, ktorý
     v kalkulačke neexistuje.
   · .ox-kalk-pozn-host je SESTRA kalkulačky, ale vlastný prepínač kalkulačky
     ju už štýluje (varianty.css r. 8414 pre data-ox-kalk="doska", r. 8452 pre
     "uctenka"). widgety.js r. 533 nastavuje data-ox-kalk na <html> VŽDY, takže
     by sme ticho prebili cudzí návrh. Preto sú moje pravidlá pre tento prvok
     vypnuté práve v tých dvoch variantoch.
   · #ox-zisk je vyňatý z pretokenizovania aj zo zrnitosti.

   KONTRAST (počítané)
   · #D60019: 5,42:1 na bielej, 5,09:1 na kréme, 4,82:1 na hoverovanej bunke.
     (#D60019 dáva 4,98 / 4,67 / 4,43 - posledné je POD AA, preto tmavší stupeň.)
   · biela na #D60019 = 5,42:1; biela na #7A000E = 11,45:1; biela .86 = 8,58:1;
     biela .82 = 7,89:1.
   · tlmená #67605A: 6,18:1 na bielej, 5,80:1 na kréme, 5,50:1 na hoveri.
   · obrys tlačidla rgba(27,27,27,.55) = 3,84:1 (WCAG 1.4.11 žiada 3:1;
     pôvodných .42 dávalo 2,65:1 a normu nespĺňalo).
   ========================================================================== */

html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] {
	--ty-vlas: rgba(27, 27, 27, .2);              /* prompt: hairline .5px */
	--ty-vlas-silna: rgba(27, 27, 27, .46);       /* nosná linka rastra */
	--ty-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	--ty-tlm: #67605A;                            /* --sk-text-tlmeny nie je konštanta */
	--ty-doska: #7A000E;                          /* plná tmavá červená, bez prechodu */
	--ty-cta: var(--sk-akcent-tmavy, #D60019);
	--ty-ease: cubic-bezier(.4, 0, .2, 1);        /* prompt */
	--ty-sum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* 0px rohy a nula tieňov na celej stránke okrem sekcie s kalkulačkou.
   Hodnoty sú platné shadow aj drop-shadow (3 dĺžky), takže sa nikde nezneplatní
   celá deklarácia a inline border-radius/drop-shadow v markupe vyjde na nulu.
   `isolation` drží miešanie zrna v sekcii - bez neho sa mix-blend-mode mieša
   až so stohovacím kontextom #ox-appka. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section:not(#ox-zisk) {
	--sk-r-velky: 0px; --sk-r-stredny: 0px; --sk-r-maly: 0px; --sk-r-obrazok: 0px;
	--sk-tien: 0 0 0 transparent; --sk-tien-karta: 0 0 0 transparent;
	--sk-obrys: 0 0 0 transparent; --sk-btn-tien: 0 0 0 transparent;
	isolation: isolate;
}

/* pásy stránky: pevne biela / krém, nech raster drží v každej téme
   (téma 21g3 má --sk-bg-2 biele, inak by krémové pásy zmizli) */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > .ox-hero,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > .ox-sek { background: #fff; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > .ox-sek--krem { background: var(--sk-krem, #FFF7E6); }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > .ox-sek { padding-block: clamp(62px, 7.6vw, 126px); }
/* `:not(.ox-sek--tmava)` je nutné: `+` verzia má o triedu viac než pravidlo
   pre tmavú dosku, takže by `border-top: 0` na doske bolo mŕtve. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > .ox-sek + .ox-sek:not(.ox-sek--tmava) { border-top: 1px solid var(--ty-vlas-silna); }

/* skok z hrdinu na #ox-zisk nesmie zaliezť pod lepkavú hlavičku (_zaklad.css r. 238) */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > #ox-zisk { scroll-margin-top: clamp(76px, 9vw, 104px); }

/* zrnitosť 0,05 cez celú plochu (prompt); obsah musí ostať nad ňou */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section:not(#ox-zisk)::after {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: var(--ty-sum); background-size: 180px 180px;
	opacity: .05; mix-blend-mode: multiply;
}
/* multiply na tmavej červenej nie je vidieť; tvar selektora musí byť ROVNAKÝ
   (aj s `section:not(#ox-zisk)`), inak má pravidlo vyššie o jedno ID smolu. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section.ox-sek--tmava:not(#ox-zisk)::after { mix-blend-mode: soft-light; opacity: .16; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section > .ox-wrap { position: relative; z-index: 1; }

/* --- spoločná typografia ------------------------------------------------- */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-h2 {
	font-size: clamp(30px, 4.9vw, 68px); line-height: 1.16;
	letter-spacing: -.015em; text-transform: uppercase; margin: 0;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-lead {
	font-size: clamp(16px, 1.3vw, 18px); line-height: 1.66;
	color: var(--ty-tlm); max-width: 56ch; margin: 0;
}

/* mono „kicker“: číslo sekcie, vlásočnica, popis.
   Poradie robí flex order (::after = -2, ::before = -1, samotný text = 0).
   Akcent tu ostáva - je to jediné miesto v texte, kde ho prompt pripúšťa. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__text > .ox-oko,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie .ox-oko,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-oko {
	font-family: var(--ty-mono); font-size: 11px; font-weight: 600;
	letter-spacing: .28em; text-transform: uppercase;
	color: var(--ty-cta); gap: 12px; margin-bottom: 18px;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__text > .ox-oko::before,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie .ox-oko::before,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-oko::before {
	order: -1; width: clamp(26px, 4vw, 62px); height: 1px; background: currentColor;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__text > .ox-oko::after,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie .ox-oko::after,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-oko::after {
	order: -2; letter-spacing: .1em; font-size: 12px;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(1) .ox-oko::after { content: '00'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(2) .ox-hlava-sekcie .ox-oko::after { content: '01'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > #ox-zisk .ox-hlava-sekcie .ox-oko::after { content: '02'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(4) .ox-mriezka--2 > div > .ox-oko::after { content: '03'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > section:nth-of-type(5) .ox-hlava-sekcie .ox-oko::after { content: '04'; }

/* hlava sekcie = nosná vodorovná linka rastra */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-h2 {
	padding-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--ty-vlas-silna);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie { margin-bottom: clamp(26px, 3.2vw, 48px); }
/* Keď za hlavou nasleduje vlásočnicová mriežka, jej vlastná horná linka JE
   linkou sekcie. Dve linky 26-48 px od seba = zdvojená čiara, presne to, čo
   prompt zakazuje (a čo som si nižšie odoprel pri <ul> v 4. sekcii).
   Bez podpory :has() pravidlo vypadne a ostane pôvodný, len kozmetický stav. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hlava-sekcie:has(+ .ox-mriezka) {
	padding-bottom: 0; border-bottom: 0; margin-bottom: clamp(22px, 2.6vw, 34px);
}

/* ===== 1) HRDINA - „Grid Matrix“ ========================================== */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > .ox-hero {
	padding-block: 0; border-bottom: 1px solid var(--ty-vlas-silna);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka {
	gap: 0; align-items: stretch;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__text {
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(46px, 6vw, 104px) clamp(26px, 3.4vw, 60px) clamp(40px, 5vw, 88px) 0;
	border-right: .5px solid var(--ty-vlas);
}
/* plochá stránka má vlastný nepriehľadný podklad, biely radiálny závoj netreba */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__text::before { display: none; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-h1 {
	font-size: clamp(46px, 10.2vw, 130px); line-height: 1.1;
	letter-spacing: -.02em; text-transform: uppercase;
	margin: 0 0 clamp(18px, 2vw, 28px) -.035em;   /* optické zarovnanie na hranu bunky */
}
/* vizuál ako architektonická doska s registračným rámom a mono popiskom */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual {
	min-height: 0; padding: clamp(34px, 4vw, 72px) clamp(24px, 3vw, 56px) clamp(52px, 5vw, 86px);
}
/* `transform/transition: none` vypína hover scale(1.03) z varianty.css r. 4120 */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual img {
	filter: none; max-height: min(48vh, 440px); transform: none; transition: none;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual::before {
	content: ''; position: absolute; inset: clamp(18px, 2vw, 30px);
	border: .5px solid var(--ty-vlas); pointer-events: none;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual::after {
	content: 'STARTER_SET_150'; position: absolute;
	left: clamp(18px, 2vw, 30px); bottom: clamp(20px, 2.2vw, 32px);
	font: 600 10px/1 var(--ty-mono); letter-spacing: .3em; color: var(--ty-tlm);
}

/* „Command Bar“: pás akcií + zvislý stĺpec troch systémových mono štítkov.
   POZOR na `\A`: bez koncovej medzery ho CSS zožerie ako hexa escape
   (`\ABE` = U+0ABE, `\AD` = U+00AD), text sa potom zlepí do jedného riadka. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie {
	margin-top: clamp(26px, 3vw, 42px); padding-top: clamp(20px, 2.2vw, 28px);
	border-top: .5px solid var(--ty-vlas); gap: 14px; align-items: center;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie::after {
	content: 'BEZ_PAUŠÁLOV\A BEZ_MIN_SUMY\A DOPRAVA_9,80_€';
	white-space: pre-line; margin-left: auto; text-align: right;
	font: 600 9px/1.95 var(--ty-mono); letter-spacing: .3em;
	text-transform: uppercase; color: var(--ty-tlm);
}

/* tlačidlá: pilulka (prompt ju výslovne pripúšťa), inak mono technický štítok.
   Rozmer nastavujem naplno - .ox-btn--velke by inak nechalo 60px pilulku
   okolo 12,5px sadzby (_zaklad.css r. 193). `border-radius: 999px` musí byť
   explicitne: téma 21g3 má --sk-btn-r: 2px, pilulka by inak nevznikla. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn {
	font-family: var(--ty-mono); font-size: 12.5px; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; border-radius: 999px;
	border-width: 1px; box-shadow: none;
	padding: 16px 32px; min-height: 54px;
	transition: background .3s var(--ty-ease), color .3s var(--ty-ease), border-color .3s var(--ty-ease);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn:hover:not(:disabled),
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn:hover:not(:disabled),
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn:hover:not(:disabled) { transform: none; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn--hlavne {
	background: var(--ty-cta); border-color: var(--ty-cta); color: #fff;   /* 5,42:1 */
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--hlavne:hover:not(:disabled),
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn--hlavne:hover:not(:disabled) {
	background: var(--sk-text, #1B1B1B); border-color: var(--sk-text, #1B1B1B);
}
/* .42 dávalo 2,65:1 a padalo na WCAG 1.4.11 (obrys ovládacieho prvku, 3:1) */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys {
	color: var(--sk-text, #1B1B1B); border-color: rgba(27, 27, 27, .55); background: transparent;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn--obrys:hover:not(:disabled) {
	background: var(--sk-text, #1B1B1B); border-color: var(--sk-text, #1B1B1B); color: #fff;
}

/* ===== 2) SORTIMENT - „Bento Feature Grid“ ================================ */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 {
	gap: 0; border-top: .5px solid var(--ty-vlas); border-left: .5px solid var(--ty-vlas);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3::after {
	border-right: .5px solid var(--ty-vlas); border-bottom: .5px solid var(--ty-vlas);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt {
	background: transparent; box-shadow: none;
	transition: background .3s var(--ty-ease);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:hover,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:focus-visible {
	transform: none; box-shadow: none; background: rgba(27, 27, 27, .028);   /* prompt: #FFFFFF05 */
}
/* mono štítok vľavo hore každej bunky (prompt: SYSTEM_01). Neutrálny v pokoji,
   akcent až pri hoveri/fokuse - „shifting to accent“ z časti Interactions. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt::before {
	content: 'KAT_01'; position: absolute; top: 0; left: 0; z-index: 2;
	padding: 9px 12px; background: #fff;
	font: 600 10px/1 var(--ty-mono); letter-spacing: .26em; color: var(--ty-tlm);
	border-right: .5px solid var(--ty-vlas); border-bottom: .5px solid var(--ty-vlas);
	transition: color .3s var(--ty-ease);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:nth-child(2)::before { content: 'KAT_02'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:hover::before,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:focus-visible::before { color: var(--ty-cta); }
/* fotky ostávajú na bielej doske (jpg majú biele pozadie), doska je však na plnú
   šírku bunky, takže nevzniká „škatuľa v škatuli“ */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto { border-bottom: .5px solid var(--ty-vlas); }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt__telo { padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 22px) clamp(24px, 2.4vw, 32px); gap: 10px; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt__nazov {
	font-size: clamp(19px, 1.6vw, 25px); line-height: 1.2;
	letter-spacing: -.01em; text-transform: uppercase;
}
/* Šípka v názve je domáci afford (varianty.css r. 3515), no jej 6px posun pri
   hoveri je jediný zvyšný pohyb na stránke. Prompt ho nepripúšťa, takže
   ostáva len výmena krytia a posun na akcent (Interactions). */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt .ox-produkt__nazov::after {
	color: var(--ty-tlm); opacity: .55; transform: none;
	transition: color .3s var(--ty-ease), opacity .3s var(--ty-ease);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:hover .ox-produkt__nazov::after,
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:focus-visible .ox-produkt__nazov::after {
	color: var(--ty-cta); opacity: 1; transform: none;
}
/* prompt chce podtext na 40 % opacity; 40 % atramentu na kréme dáva ~1,9:1,
   preto pevná tlmená #67605A (5,80:1, na hoverovanej bunke 5,50:1) */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt__popis {
	color: var(--ty-tlm); font-size: 13.5px; line-height: 1.6; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* Tretia bunka nie je diera, ale technický výpis rastra. Sadá na ĽAVÚ A SPODNÚ
   hranu bunky (MUST „align text to the very edges“); vycentrovaný riadok
   uprostred prázdnej bunky sa čítal ako chyba sadzby. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3::after {
	content: 'KAT_00\A 02 / 02\A VEĽKOOBCHOD'; white-space: pre-line;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 22px) clamp(24px, 2.4vw, 32px);
	font: 600 10px/2.3 var(--ty-mono); letter-spacing: .26em;
	text-transform: uppercase; color: var(--ty-tlm);
}
/* v pokoji tlmený vizuál, pri hoveri plná farba (prompt: 20 % -> 100 %).
   Len tam, kde hover naozaj je - na dotyku by fotky ostali natrvalo šedé.
   :focus-visible je POVINNÝ dvojník, inak klávesnica odhalenie nedostane. */
@media (hover: hover) and (pointer: fine) {
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto img {
		filter: grayscale(1) contrast(1.04); opacity: .74;
		transition: filter .3s var(--ty-ease), opacity .3s var(--ty-ease);
	}
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt:hover .ox-produkt__foto img,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt:focus-visible .ox-produkt__foto img {
		filter: none; opacity: 1; transform: none;   /* bez zväčšenia: hĺbku robí linka, nie pohyb */
	}
}

/* ===== 3) VÝPOČET ZISKU - iba priestor OKOLO kalkulačky =================== */
/* Vypnuté v tých variantoch kalkulačky, ktoré si .ox-kalk-pozn-host štýlujú
   samy (varianty.css r. 8414 a 8452) - inak by sme cudzí prepínač prebili. */
html[data-ox-b2bstr="typo"]:not([data-ox-kalk="doska"]):not([data-ox-kalk="uctenka"]) #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host {
	font-family: var(--ty-mono); font-size: 12.5px; line-height: 1.75;
	color: var(--ty-tlm); max-width: 80ch;
	margin: 0 0 clamp(24px, 2.8vw, 38px); padding: 2px 0 2px 18px;
	border-left: 1px solid var(--ty-cta);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host b { color: var(--sk-text, #1B1B1B); }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-kalk-pozn-host a {
	color: var(--ty-cta); text-decoration: underline; text-underline-offset: 3px;
}

/* ===== 4) OBSAH SETU - technický súpis ==================================== */
/* prebíja inline align-items:center, nech zvislá vlásočnica beží po celej výške */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 {
	gap: 0; align-items: stretch !important;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:first-child {
	padding: 0 clamp(26px, 3.4vw, 62px) 0 0; border-right: .5px solid var(--ty-vlas);
}
/* obrázok dostáva ten istý registračný rám a mono popisok ako vizuál hrdinu -
   opakovaná značka je to, čo drží „systém“ pokope */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child {
	position: relative; display: grid; place-items: center;
	padding: clamp(30px, 3.4vw, 58px) 0 clamp(52px, 5vw, 80px) clamp(26px, 3.4vw, 62px);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child img { width: 100%; height: auto; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child::before {
	content: ''; position: absolute; pointer-events: none;
	inset: clamp(14px, 1.6vw, 24px) 0 clamp(14px, 1.6vw, 24px) clamp(26px, 3.4vw, 62px);
	border: .5px solid var(--ty-vlas);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child::after {
	content: 'PARTY_SET_150'; position: absolute;
	left: calc(clamp(26px, 3.4vw, 62px) + 16px); bottom: clamp(24px, 2.4vw, 36px);
	font: 600 10px/1 var(--ty-mono); letter-spacing: .3em; color: var(--ty-tlm);
}
/* prebíja inline gap:12px a margin:20px 0 na <ul> - riadky lepí vlásočnica.
   Hornú linku zoznamu nedávam: hlavovú linku už spravil border-bottom na H2
   a dve linky 34 px od seba by boli zdvojená čiara, presne to, čo prompt zakazuje. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 ul {
	gap: 0 !important; margin: clamp(24px, 2.8vw, 34px) 0 clamp(28px, 3vw, 40px) !important;
}
/* prebíja inline padding:14px 18px - text musí sadnúť na ľavú hranu stĺpca */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel {
	padding: 15px 0 !important;
	background: transparent; box-shadow: none;
	border-bottom: .5px solid var(--ty-vlas);
	display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 16px;
	align-items: baseline; font-size: 15px; line-height: 1.55;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel::before {
	content: 'POL_01'; font: 600 10px/1.7 var(--ty-mono);
	letter-spacing: .18em; color: var(--ty-tlm);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel:nth-child(2)::before { content: 'POL_02'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel:nth-child(3)::before { content: 'POL_03'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel:nth-child(4)::before { content: 'POL_04'; }

/* ===== 5) AKO TO PREBIEHA - „Interactive Geometric Card“ ================== */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 {
	gap: 0; border-top: .5px solid var(--ty-vlas); border-left: .5px solid var(--ty-vlas);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column;
	min-height: clamp(250px, 25vw, 330px);
	padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 28px) clamp(26px, 2.8vw, 36px);
	background: transparent; box-shadow: none;
	border-right: .5px solid var(--ty-vlas); border-bottom: .5px solid var(--ty-vlas);
	transition: background .3s var(--ty-ease);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:hover { background: rgba(27, 27, 27, .028); }
/* odznak s číslom sa mení na mono štítok s podtržníkom: „1“ -> „KROK_01“ */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak {
	align-self: flex-start; padding: 0; border-radius: 0; background: transparent;
	color: var(--ty-tlm); font: 600 10.5px/1 var(--ty-mono);
	letter-spacing: .3em; text-transform: uppercase;
	transition: color .3s var(--ty-ease);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak::before { content: 'KROK_0'; }
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:hover .ox-odznak { color: var(--ty-cta); }
/* signature komponent z promptu: vlásočnicový štvorec 45° -> 90°, 700 ms */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel::after {
	content: ''; position: absolute; pointer-events: none;
	right: clamp(14px, 1.8vw, 24px); top: clamp(50px, 6vw, 76px);
	width: clamp(52px, 5.6vw, 84px); aspect-ratio: 1;
	border: .5px solid var(--ty-vlas-silna); opacity: .45; transform: rotate(45deg);
	transition: transform .7s var(--ty-ease), opacity .7s var(--ty-ease), border-color .7s var(--ty-ease);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:hover::after {
	transform: rotate(90deg); opacity: 1; border-color: var(--ty-cta);
}
/* prebíja inline margin-top:12px - nadpis kroku sadá na spodnú hranu bunky */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-h3 {
	margin: auto 0 10px !important; position: relative; z-index: 1;
	font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2;
	letter-spacing: -.01em; text-transform: uppercase;
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-text-tlmeny {
	margin: 0; position: relative; z-index: 1;
	color: var(--ty-tlm); font-size: 13.5px; line-height: 1.6;
}

/* ===== 6) VÝZVA - plná tmavá červená doska =============================== */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] > .ox-sek--tmava {
	background: var(--ty-doska);                     /* bez prechodu: DO NOT z promptu */
	padding-block: clamp(76px, 9vw, 144px);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-wrap::before {
	content: 'PARTNERSKY_PROGRAM'; display: block; width: fit-content;
	margin: 0 auto clamp(24px, 2.6vw, 34px); padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .42);
	font: 600 11px/1 var(--ty-mono); letter-spacing: .34em; color: rgba(255, 255, 255, .82);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-h2 {
	font-size: clamp(38px, 6.6vw, 96px); line-height: 1.1;
	letter-spacing: -.02em; margin-bottom: clamp(16px, 1.8vw, 24px);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-lead {
	color: rgba(255, 255, 255, .86); max-width: 48ch; margin-bottom: clamp(30px, 3.4vw, 44px);
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne {
	background: #fff; color: var(--ty-doska); border-color: #fff;   /* 11,45:1 */
}
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn--hlavne:hover:not(:disabled) {
	background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8);
}

/* ===== FOKUS ============================================================== */
/* Tlačidlá majú prstenec z varianty.css r. 5563 (box-shadow !important) -
   tie z vlastného obrysu vynímam, inak by boli prstence dva. Ostatným odkazom
   dávam 0px rohy: základ (r. 200) aj téma 21 dávajú 4px/2px, čo je v rozpore
   s „DO NOT: Use rounded corners“. */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] a:not(.ox-btn):focus-visible {
	outline: 2px solid var(--ty-cta); outline-offset: 3px; border-radius: 0;
}
/* bunky mriežky sú na zraz - prstenec musí ísť DOVNÚTRA bunky */
html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt:focus-visible { outline-offset: -5px; }

/* ===== ŠÍRKY ============================================================== */
/* nad 1100px a dosť vysoké okno: hrdina drží výšku ohybu (prompt: „focused
   fold“), takže zvislá vlásočnica medzi textom a vizuálom beží celý ohyb.
   Poistka na výšku, aby sa na 1280x720 nezopakoval problém z _zaklad.css r. 757. */
@media (min-width: 1101px) and (min-height: 760px) {
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka { min-height: min(84vh, 880px); }
}
/* 1024 a menej: mriežka 3 sa láme na 2 stĺpce, technická bunka by ostala sama */
@media (max-width: 1100px) {
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3::after { display: none; }
	/* jeden stĺpec musím zopakovať: môj selektor je špecifickejší než zlom v základe */
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__mriezka { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__text {
		border-right: 0; border-top: .5px solid var(--ty-vlas);
		padding: clamp(30px, 4vw, 44px) 0 clamp(10px, 1.6vw, 18px);
	}
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual { padding: clamp(26px, 4vw, 44px) 0 clamp(44px, 6vw, 60px); }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual::before,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual::after { left: 0; right: 0; }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__vizual::before { inset: clamp(14px, 2vw, 22px) 0; }
	/* systémové štítky sa už nezmestia vedľa tlačidiel - idú na vlastný riadok */
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie::after {
		width: 100%; margin: 6px 0 0; text-align: left;
	}
}
/* 768: dva stĺpce v 4. sekcii sú už pritesné na súpis aj obrázok */
@media (max-width: 900px) {
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:first-child {
		padding: 0 0 clamp(26px, 4vw, 40px); border-right: 0; border-bottom: .5px solid var(--ty-vlas);
	}
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child { padding: clamp(30px, 4vw, 44px) 0 clamp(46px, 6vw, 62px); }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child::before { inset: clamp(14px, 2vw, 22px) 0; }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div:last-child::after { left: 16px; }
}
/* 390: jeden stĺpec, tlačidlá na plnú šírku, užší mono stĺpec súpisu */
@media (max-width: 620px) {
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-h1 { font-size: clamp(38px, 11.4vw, 56px); }
	/* mono s prestrkom .2em je široké; na úzkom displeji by sa popis tlačidla lámal */
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn { font-size: 11.5px; letter-spacing: .13em; padding: 15px 22px; min-height: 50px; }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn { width: 100%; }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 li.ox-panel { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; font-size: 14.5px; }
	/* Panely kroku idú na plnú šírku (len vodorovné linky); kartám sortimentu
	   rám zámerne ostáva - fotka bez rámu by sa na kréme rozliala. */
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 { border-left: 0; }
	/* Priestor vpravo pre štvorec: pri 45° mu bbox prerastie o ~28 % šírky,
	   takže pri `right: 0` ho `overflow: hidden` orezal a cez text si sadol. */
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel {
		min-height: 0; padding: 26px 56px 30px 0; border-right: 0;
	}
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel::after { right: 10px; top: 22px; width: 38px; }
}

/* ===== POHYB ============================================================== */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel::after,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 .ox-odznak,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt::before,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--3 > .ox-produkt .ox-produkt__nazov::after,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-produkt__foto img,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-hero__akcie .ox-btn,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--2 > div > .ox-btn,
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-sek--tmava .ox-btn { transition: none; }
	html[data-ox-b2bstr="typo"] #ox-obsah[data-trasa="b2b"] .ox-mriezka--4 > .ox-panel:hover::after { transform: rotate(45deg); }
}

/* ---- katalog / tlac: Tlač ---- */
/* --- TLAČ (katalog/tlac) -----------------------------------------------------
   PREDLOHA: knižničný prompt superdesign.dev
   sd/animated-scroll-printed-product-page-warm-cream-and-red-editorial-with-a-
   horizontal-card-rail.md - "warm print register": krémový podklad, atrament,
   JEDNA horúca červená prísne šetrená len na značky (cena, meradlo, aktívny
   obrys), Anton na každý displejový riadok verzálkami, mono 10,5 px s tracking
   .18em na KAŽDÝ popisok, rádiusy 0 všade, rámy 1,5 px na papieri a vlásky
   inde, žiadne tiene, žiadne dekoračné prechody, ease cubic-bezier(.22,1,.36,1).

   ČO SOM Z PROMPTU PRENIESOL (a na čo som to preložil):
   - paleta: krém #e7e2d8 -> --sk-krem #FFF7E6; atrament #171717 -> --sk-text
     #1B1B1B; horúca červená #ef493c -> --sk-akcent #D60019 (len vlásky, rámy
     a meradlo, nikdy text); hlboká červená #b92725 -> --sk-akcent-tmavy #D60019
     (cena, Akcia, plná plocha tlačidla pri prejdení); papier #fffdf8 -> #fff,
     lebo produktové fotky majú bielu (_zaklad.css 473, "nikdy krém pod fotkou");
     tlmený rgba(23,23,23,.56) -> PEVNÝCH #67605A (zmerané: 5,80:1 na kréme
     #FFF7E6 a 6,18:1 na bielej). NIE --sk-text-tlmeny: ten je premenná témy
     (na živom 21g3-noirg3 je #6B625C, ale v témach 08-particles a 11-minimal je
     to rgba(27,27,27,.56) = 4,02:1 na kréme, teda pod AA);
   - písma: Anton Extrabold -> --sk-font-nadpis (Anton) verzálky; Martian Mono
     10,5/.18em -> ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
   - "stage 4 - the printed artifact": karta JE tlačený sáčok. Hore mono hlavička
     s odznakom a vlasovou linkou, v strede doska (fotka) v pomere 3:4 uzavretá
     plnou 1,5 px linkou, pod ňou Anton názov, potom mono riadky na päte
     (položka/porcie a cenový riadok s poradovým číslom) oddelené vláskami
     a napokon 2 px čiarkovaná PERFORÁCIA cez celú šírku, pod ktorou sedí akcia;
   - "horizontal card rail": pod 620 px sa mriežka mení na vodorovnú koľajnicu
     so scroll-snapom a vlasovým meradlom s červenou výplňou, presne ten
     "hairline progress meter with a red fill beneath" (pozri bod 16);
   - "clip-wipe manifesto": červená linka, ktorá pri prejdení zotrie názov
     zľava doprava (background-size, nie clip-path - jeden prekresľovaný pruh).

   ČO SOM Z PROMPTU VEDOME NEPOUŽIL:
   - päť pripnutých scén, plátna, parallax a per-slovné spany: to je JS + vlastný
     markup, my meníme LEN CSS a značka sa nesmie dotknúť. (Per-slovný nábeh
     nadpisu aj tak beží: téma ho rieši sama, `ox-rv--slova`.);
   - tmavý "loam" podklad dvoch scén: prompt zároveň prikazuje "never a red
     ground" a tmavá doska by si v katalógu vyžiadala biely text na červenej.
     Katalóg ostáva na kréme;
   - line-height .86 pri Antone: slovenské mäkčene a dĺžne (Čučoriedka, príchuť)
     by sa pri viacriadkových názvoch prekrývali. Zmerané: pri 1,14 sa Č a Ľ
     v názve dotýkali riadka nad sebou, preto nadpis 1,12 a názov 1,28;
     z rovnakého dôvodu je názov na -.01em a nie na promptových -.02em;
   - mono tracking .18em drží kicker, chipy, počet, odznaky, poradové číslo aj
     tlačidlá. Tri popisky sú nižšie zámerne, lebo pri .18em pretečú na dva
     riadky: `.ox-produkt__meta` .1em ("2,5 KG · AŽ 75 POHÁROV Z BALENIA" je
     32 znakov), zámok .14em a "bez DPH" .16em.

   ČO PREBÍJAM V ZÁKLADE (overené grepom aj meraním v prehliadači):
   - _zaklad.css 207-212 .ox-karta: rádius --sk-r-velky, tieň a obrys -> 0 a rám;
     21g3-noirg3.css 156 pridáva .ox-karta tieň znova - preto box-shadow: none;
   - _zaklad.css 471-492 .ox-produkt: zdvih -4 px, fotka 4:3, telo 18/20 px,
     .ox-cena v --sk-font-display -> stojaca karta, 3:4, mono riadky;
   - varianty.css 5569-5582 (blok W6): odznaky ako pilulky 999 px, .ox-cena__dph
     s margin-left:auto PRED .ox-cena__stara, zámok v ružovom podnose,
     stepper 999 px, .ox-produkt--vypredane img s filtrom AJ krytím;
   - varianty.css 3509-3543 (rodina 21): fotka scale(1.06), padding 7%/9%;
   - varianty.css 5599-5606 .ox-chipy: podnos #f5efe9 a čierna aktívna pilulka;
   - _zaklad.css 513-516 .ox-select:focus: základ signalizuje fokus ČERVENÝM
     RÁMOM a outline si vypína. Náš spodný atramentový rám by ten signál zhltol,
     preto má #ox-radenie vlastný :focus-visible (bod 4).
   !important je len tam, kde ho má aj základ: .ox-odznak--tmavy a --akcia
   (varianty.css 5570-5571) a inline štýly generované v pohlady.js.
   .ox-btn:active scale(.96) !important (varianty.css 5562) NErušíme - reset bez
   !important by bol mŕtvy kód.
   Brána: data-ox-katalog ostáva na <html> aj po prepnutí trasy, preto je každý
   selektor mimo #ox-vysledky zakotvený cez #ox-obsah:has(#ox-vysledky). */

/* --- 1) papier strany a rytmus 80-120 px medzi pásmami ---------------------- */
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) {
	background: var(--sk-krem, #FFF7E6);
	--ox-tlac-ram: 1.5px solid var(--sk-text, #1B1B1B);
	--ox-tlac-vlas: 1px solid rgba(27, 27, 27, .16);
	--ox-tlac-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	--ox-tlac-tlmeny: #67605A;   /* 5,80:1 na kréme, 6,18:1 na bielej - token témy to nezaručí */
	--ox-tlac-ease: cubic-bezier(.22, 1, .36, 1);
}
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) > .ox-sek:first-child { padding-block: clamp(40px, 6vw, 88px) 0; }
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) > .ox-sek:last-child { padding-block: clamp(24px, 3vw, 38px) clamp(80px, 9vw, 120px); }
/* rádius 0 platí aj pre prstence fokusu: základ dáva :focus-visible 4 px
   (_zaklad.css 100) a rodina 21 ďalšie 2 px (varianty.css 3238) */
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) :focus-visible { border-radius: 0; }

/* --- 2) hlavička: mono kicker s linkou + plagátový Anton -------------------- */
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-oko {
	gap: 12px; margin-bottom: 22px; color: var(--ox-tlac-tlmeny);
	font: 400 10.5px/1 var(--ox-tlac-mono); letter-spacing: .18em; text-transform: uppercase;
}
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-oko::before { width: 44px; height: 1px; background: var(--sk-text); }
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-h2 {
	margin: 0 0 clamp(20px, 2.6vw, 34px); overflow-wrap: anywhere;
	font-size: clamp(38px, 6.8vw, 96px); line-height: 1.12; letter-spacing: -.02em;
}

/* --- 3) filtre: z piluliek v podnose sa stáva tlačený register -------------- */
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy {
	display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 1.9vw, 28px);
	background: none; padding: 0; border-radius: 0; margin: 0;
}
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) #ox-filtre.ox-chipy { margin-top: 8px; padding-top: 9px; border-top: var(--ox-tlac-vlas); }
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy .ox-chip {
	align-items: baseline; gap: 6px; background: none; border: 0; border-radius: 0; padding: 8px 0;
	font: 400 10.5px/1.4 var(--ox-tlac-mono); letter-spacing: .18em; text-transform: uppercase;
	color: var(--ox-tlac-tlmeny); box-shadow: inset 0 -1px 0 transparent;
	/* podčiarknutie kreslíme tieňom dovnútra, aby sa pri prepnutí nehýbala sadzba */
	transition: color .25s var(--ox-tlac-ease), box-shadow .25s var(--ox-tlac-ease);
}
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy .ox-chip:hover { background: none; color: var(--sk-text); box-shadow: inset 0 -1px 0 rgba(27, 27, 27, .3); }
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy .ox-chip[aria-pressed="true"] { background: none; color: var(--sk-text); box-shadow: inset 0 -2px 0 var(--sk-akcent); }
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy .ox-chip [data-pocet] { background: none; padding: 0; font-size: 9px; color: var(--ox-tlac-tlmeny); }

/* --- 4) lišta počtu a radenia: prvá plná linka strany -----------------------
   Ten <div> nemá triedu, len inline štýl z pohlady.js (r. 617), preto margin
   a min-height/padding selectu potrebujú !important - inline štýl sa inak
   prebiť nedá. Zvyšok deklarácií v inline štýle nie je, tam !important netreba. */
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) > .ox-sek:first-child .ox-wrap > div[style] {
	margin-top: clamp(16px, 2vw, 26px) !important; padding-top: 11px; border-top: var(--ox-tlac-ram);
}
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) #ox-pocet,
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-pole .ox-label {
	font: 400 10.5px/1 var(--ox-tlac-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ox-tlac-tlmeny);
}
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) #ox-radenie.ox-select {
	min-height: 32px !important; padding: 4px 4px 4px 0 !important;
	border: 0; border-bottom: var(--ox-tlac-ram); border-radius: 0; background: none;
	font: 400 10.5px/1 var(--ox-tlac-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sk-text);
}
/* bez tohto by select po tabulátore nemal ŽIADNY viditeľný fokus: základ mu
   outline vypína a namiesto neho farbí rám, ktorý sme práve prepísali */
html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) #ox-radenie.ox-select:focus-visible {
	outline: 2px solid var(--sk-akcent-tmavy); outline-offset: 3px; box-shadow: none;
}

/* --- 5) mriežka sáčkov ------------------------------------------------------
   Prompt dáva koľajnici karty flex: 0 0 clamp(230px,26vw,330px). Pri .ox-wrap
   so stropom 1320 px vyjdú štyri stĺpce na 283 px a tri na 302 px, čo je presne
   v tom rozsahu - preto štyri hore, tri od 1200 px, dva od 900 px.
   Vetva "širší nad 1440 px" tu nie je: nad ~1448 px sa .ox-wrap už nerozťahuje. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(14px, 1.7vw, 24px); row-gap: clamp(24px, 2.8vw, 42px);
	counter-reset: ox-tlac;
}

/* --- 6) karta = tlačený sáčok: 1,5 px atramentový rám, rádius 0, bez tieňa -- */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-karta.ox-produkt {
	height: auto; background: #fff; border: var(--ox-tlac-ram); border-radius: 0;
	box-shadow: none; overflow: hidden; counter-increment: ox-tlac;
	transition: border-color .3s var(--ox-tlac-ease);
}
/* prompt: červená je výhradne značka - tu je to obrys aktívnej karty */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-karta.ox-produkt:hover,
html[data-ox-katalog="tlac"] #ox-vysledky .ox-karta.ox-produkt:focus-within { border-color: var(--sk-akcent); box-shadow: none; transform: none; }

/* --- 7) doska (fotka) 3:4 + mono hlavička s odznakmi ------------------------
   Štítky ostávajú podľa základu absolútne v ráme fotky, preto z nich robíme
   hlavičku sáčka: pás cez celú šírku s bielym podkladom a vlasovou linkou.
   min-height drží rovnaký pás aj pri produkte bez odznaku a horný padding
   obrázka je o tento pás väčší, aby doňho fotka nezasahovala. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__foto { aspect-ratio: 3 / 4; background: #fff; border-bottom: var(--ox-tlac-ram); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__foto img { padding: 52px 13% 13%; transition: transform .7s var(--ox-tlac-ease); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__stitky {
	top: 0; left: 0; right: 0; flex-direction: row; flex-wrap: wrap; align-items: center;
	gap: 3px 14px; min-height: 30px; padding: 8px 12px; background: #fff; border-bottom: var(--ox-tlac-vlas);
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__stitky .ox-odznak {
	display: inline-block; background: none; color: var(--sk-text); padding: 0; border-radius: 0;
	font: 400 10.5px/1.3 var(--ox-tlac-mono); letter-spacing: .18em; text-transform: uppercase;
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tichy { background: none; color: var(--ox-tlac-tlmeny); }
/* --tmavy a --akcia majú v základe (varianty.css 5570-5571) !important, tak ho má aj toto */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tmavy { background: none !important; color: var(--ox-tlac-tlmeny) !important; }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__stitky .ox-odznak--akcia { background: none !important; color: var(--sk-akcent-tmavy); }

/* --- 8) názov v Antone + červený zotierací pruh ----------------------------
   Náhrada promptovej clip-path vlny: linka rastie zľava doprava cez
   background-size, čo prehliadač rieši jedným prekreslením pruhu.
   Pruh musí reagovať aj na tabulátor, nielen na myš - inak je to obsah,
   ktorý klávesnica nikdy neuvidí. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__telo { padding: 13px 13px 0; gap: 0; background: #fff; }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__nazov {
	margin: 0; padding: 0 0 12px; overflow-wrap: anywhere;
	font-family: var(--sk-font-nadpis); font-size: clamp(17px, 1.42vw, 23px);
	line-height: 1.28; letter-spacing: -.01em; text-transform: uppercase;
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__nazov a {
	color: var(--sk-text); text-decoration: none;
	background-image: linear-gradient(var(--sk-akcent), var(--sk-akcent));
	background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
	transition: background-size .45s var(--ox-tlac-ease);
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:hover .ox-produkt__nazov a,
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:focus-within .ox-produkt__nazov a { background-size: 100% 2px; }

/* --- 9) mono riadky na päte sáčka: porcie/položka a cenový riadok -----------
   Voľná výška sa zbiera NAD cenový riadok (margin: auto 0 0), nie pod neho ako
   v základe (.ox-produkt__akcie margin-top:auto). Vďaka tomu sedí perforácia
   v celom riadku mriežky na jednej linke, aj keď sú názvy rôzne dlhé - presne
   ten "ruled price table" z promptu. (Samotné ceny sedia na spoločnej ÚČIARE
   len vtedy, keď má riadok rovnako vysoké cenové bloky: zámok hosťa je o 4,5 px
   nižší než cena partnera a zarovnáva sa spodkom, nie vrchom.)
   `.ox-produkt__meta` sa nevykreslí vôbec, keď produkt nemá porcie ani text
   príslušenstva - vtedy nesie vlásku nad cenou priamo cenový riadok. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__meta {
	margin: 0; padding: 9px 0; border-top: var(--ox-tlac-vlas); overflow-wrap: anywhere;
	font: 400 10.5px/1.45 var(--ox-tlac-mono); letter-spacing: .1em; text-transform: uppercase;
	color: var(--ox-tlac-tlmeny);   /* .1em, nie .18em: "2,5 KG · AŽ 75 POHÁROV Z BALENIA" je dlhý riadok */
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-cena {
	margin: auto 0 0; padding: 10px 0; border-top: var(--ox-tlac-vlas);
	flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 9px;
	font: 600 15px/1.25 var(--ox-tlac-mono); letter-spacing: .01em; color: var(--sk-akcent-tmavy);
}
/* poradové číslo sáčka - jediná náhrada promptového "lot number", ktorú vieme
   spraviť bez JS. Je to poradie na zobrazenej strane, nie v celom katalógu. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-cena::before {
	content: counter(ox-tlac, decimal-leading-zero); order: -1; margin-right: auto;
	font: 400 10.5px/1 var(--ox-tlac-mono); letter-spacing: .18em; color: var(--ox-tlac-tlmeny);
}
/* .ox-cena__dph má v základe margin-left:auto a je v DOM PRED .ox-cena__stara,
   preto bez order skončí prečiarknutá cena až za textom "bez DPH".
   Samotná cena je holý textový uzol = anonymná flex položka s order 0. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-cena__stara { order: 1; font: 400 11px/1 var(--ox-tlac-mono); color: var(--ox-tlac-tlmeny); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-cena__dph {
	order: 2; margin-left: 0; font: 400 9.5px/1 var(--ox-tlac-mono);
	letter-spacing: .16em; text-transform: uppercase; color: var(--ox-tlac-tlmeny);
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-cena__zamok {
	background: none; border-radius: 0; padding: 0; gap: 7px; flex-wrap: wrap; justify-content: flex-end;
	font: 400 10.5px/1.35 var(--ox-tlac-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sk-text);
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-cena__zamok svg { flex: none; }

/* --- 10) perforácia a akcia -------------------------------------------------
   Prompt otvára sáčok čiarkovanou perforáciou cez celý artefakt. Záporný bočný
   okraj ju vytiahne od rámu k rámu, padding ho obsahu vráti.
   Tlačidlový register je spoločný pre kartu aj pre chybový panel (bod 12). */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-btn {
	border-width: 1.5px; border-radius: 0; box-shadow: none;
	font: 400 10.5px/1 var(--ox-tlac-mono); letter-spacing: .18em; text-transform: uppercase;
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__akcie {
	margin-top: 0; margin-inline: -13px; padding: 11px 13px 13px; gap: 9px;
	align-items: center; border-top: 2px dashed var(--sk-text);
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__akcie .ox-btn { min-height: 38px; padding: 8px 14px; }
/* v tlači sa nič nedvíha; spätnú väzbu nesie plocha, nie skok */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-btn:hover:not(:disabled) { transform: none; box-shadow: none; }
/* hlavné tlačidlo je atramentová pečiatka, nie červená plocha: prompt zakazuje
   červený podklad. Pri prejdení ide na --sk-akcent-tmavy #D60019, kde biely
   10,5 px text drží 5,42:1 (na čistom #D60019 by mal 4,98:1). */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-btn--hlavne { background: var(--sk-text); color: #fff; border-color: var(--sk-text); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-btn--hlavne:hover:not(:disabled) { background: var(--sk-akcent-tmavy); border-color: var(--sk-akcent-tmavy); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-btn--obrys { background: none; color: var(--sk-text); border-color: var(--sk-text); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-btn--obrys:hover:not(:disabled) { background: var(--sk-text); color: #fff; }
/* zakázané "Vypredané": základ mu dáva opacity .5, z čoho je na bielej 2,1:1.
   Krytie vraciame a tlmenosť nesie farba textu (#67605A = 6,18:1 na bielej). */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-btn--obrys[disabled] { opacity: 1; background: none; color: var(--ox-tlac-tlmeny); border-color: rgba(27, 27, 27, .3); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__quick { background: none; border: 1.5px solid var(--sk-text); border-radius: 0; }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__quick button { width: 30px; height: 34px; color: var(--sk-text); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__quick button:hover { background: var(--sk-krem, #FFF7E6); color: var(--sk-akcent-tmavy); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__quick output { width: 26px; font: 600 12px/1 var(--ox-tlac-mono); }

/* --- 11) vypredané: šedá doska, sáčok zbledne -------------------------------
   Základ (varianty.css 5580) dáva obrázku filter AJ opacity; keby sme prepísali
   len filter, krytie by sa znásobilo a fotka by ostala mdlá. Píšeme obe.
   Tlmíme krytím, nie contrastom: contrast() zdvihne bielu v produktovej fotke na
   šedú a v bielej doske sa objaví šedý obdĺžnik. Krytie bielu nechá bielou. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt--vypredane { border-color: rgba(27, 27, 27, .3); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__foto img { filter: grayscale(1); opacity: .5; }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__nazov a,
html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt--vypredane .ox-cena { color: var(--ox-tlac-tlmeny); }

/* --- 12) stránkovanie, prázdny výsledok a chybový panel ---------------------
   Stránkovací <div> nemá triedu, len inline flex/gap/margin z pohlady.js
   (r. 724) - preto tie tri !important. Pri 21 produktoch a strope 24 na stranu
   sa dnes nevykreslí, zapne sa až pri 25. produkte.
   Chybový panel (app.js 122) vkladá do #ox-vysledky ĎALŠÍ .ox-wrap.ox-sek -
   bez korekcie má stránka dvojitý bočný padding; .ox-hlaska má navyše rádius
   6 px a ružový podklad, čo je presne ten "red ground", ktorý prompt zakazuje. */
html[data-ox-katalog="tlac"] #ox-vysledky > div[style] {
	justify-content: flex-start !important; gap: 0 20px !important; margin-top: clamp(38px, 4.6vw, 66px) !important;
	padding-top: 11px; border-top: var(--ox-tlac-ram);
}
html[data-ox-katalog="tlac"] #ox-vysledky > div[style] .ox-chip {
	background: none; border: 0; border-radius: 0; padding: 4px 0;
	font: 400 10.5px/1 var(--ox-tlac-mono); letter-spacing: .18em; color: var(--ox-tlac-tlmeny); box-shadow: inset 0 -2px 0 transparent;
}
html[data-ox-katalog="tlac"] #ox-vysledky > div[style] .ox-chip[aria-pressed="true"] { background: none; color: var(--sk-text); box-shadow: inset 0 -2px 0 var(--sk-akcent); }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-prazdne { text-align: left; padding: clamp(30px, 4.6vw, 56px) 0; border-top: var(--ox-tlac-ram); color: var(--ox-tlac-tlmeny); }
/* font-size tu NEPREPISUJEME: rodina 21 emoji zámerne vypína (font-size: 0,
   varianty.css 4128) a kreslí vlastnú SVG ikonu, lebo z emoji je na časti
   systémov prázdny štvorec. Ikonu len zarovnáme doľava ako zvyšok bloku. */
html[data-ox-katalog="tlac"] #ox-vysledky .ox-prazdne__ikona { margin-inline: 0; }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-prazdne .ox-h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.16; letter-spacing: -.02em; }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-prazdne p { margin: 0; font: 400 10.5px/1.6 var(--ox-tlac-mono); letter-spacing: .1em; text-transform: uppercase; }
html[data-ox-katalog="tlac"] #ox-vysledky > .ox-wrap.ox-sek { max-width: none; padding: 0; }
html[data-ox-katalog="tlac"] #ox-vysledky .ox-hlaska {
	border-radius: 0; background: #fff; border-left: 3px solid var(--sk-akcent);
	border-top: var(--ox-tlac-ram); color: var(--sk-text); padding: 13px 16px;
	font: 400 11px/1.6 var(--ox-tlac-mono); letter-spacing: .06em;
}
html[data-ox-katalog="tlac"] #ox-vysledky .ox-hlaska b { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* --- 13) prejdenie: hýbe sa obsah, sáčok stojí ------------------------------ */
@media (hover: hover) and (pointer: fine) {
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img,
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:focus-within .ox-produkt__foto img { transform: scale(1.035); }
}

/* --- 14) 1200 px: tri stĺpce ------------------------------------------------ */
@media (max-width: 1200px) {
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__nazov { font-size: clamp(18px, 2vw, 22px); }
}

/* --- 15) 900 px: dva stĺpce (rovnaká zarážka ako _zaklad.css 741) ----------- */
@media (max-width: 900px) {
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__foto { aspect-ratio: 4 / 5; }
	html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy { gap: 0 16px; }
}

/* --- 16) 620 px: VODOROVNÁ KOĽAJNICA + MERADLO ------------------------------
   Prompt posúva rad kariet presne o vlastnú šírku pretečenia a pod ním vedie
   vlasové meradlo s červenou výplňou. To je scroll-jacking cez JS; my dávame
   natívnu koľajnicu so scroll-snapom, ktorú riadi prst. Prvá karta drží 78 %
   šírky, takže z ďalšej vždy kúsok vykúka a rad je čitateľný ako rad.
   ⚠️ Meradlom NEMÔŽE byť len obarvený posuvník: na telefónoch (a v prekryvnom
   režime aj na ploche) prehliadač posuvník vôbec nevykreslí - zmerané
   offsetHeight - clientHeight = 0 px, teda posuvník nezaberá ani pixel a nič
   sa neukáže. Meradlo preto kreslíme sami cez scroll-driven animáciu:
   #ox-vysledky::after je červená výplň na vlasovej stope koľajnice a jej
   scaleX riadi priamo poloha koľajnice. Celé to žije v @supports, takže kde
   scroll-driven animácie nie sú, ostane presne dnešný stav (vláska + natívny
   posuvník) a nič sa nerozbije. */
@media (max-width: 620px) {
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
		display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; min-width: 0;
		scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
		gap: 12px; padding-bottom: 14px; border-bottom: var(--ox-tlac-vlas);
		/* stopa meradla je vláska pod koľajnicou; kde prehliadač posuvník naozaj
		   vykreslí, obarvíme aj ten */
		scrollbar-width: thin; scrollbar-color: var(--sk-akcent) rgba(27, 27, 27, .16);
	}
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4::-webkit-scrollbar { height: 3px; }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4::-webkit-scrollbar-track { background: rgba(27, 27, 27, .16); }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4::-webkit-scrollbar-thumb { background: var(--sk-akcent); }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-karta.ox-produkt { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__foto { aspect-ratio: 3 / 4; }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__nazov { font-size: 20px; }
	html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-h2 { font-size: clamp(32px, 9vw, 44px); }
	html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy { gap: 0 14px; }

	@supports (animation-timeline: scroll(self inline)) and (timeline-scope: --ox-tlac-rail) {
		/* flex + order drží meradlo TESNE pod koľajnicou aj vtedy, keď je pod ňou
		   ešte stránkovanie (od 25. produktu) */
		html[data-ox-katalog="tlac"] #ox-vysledky { display: flex; flex-direction: column; timeline-scope: --ox-tlac-rail; }
		html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { order: 0; scroll-timeline: --ox-tlac-rail inline; }
		html[data-ox-katalog="tlac"] #ox-vysledky > div[style] { order: 2; }
		html[data-ox-katalog="tlac"] #ox-vysledky:has(.ox-mriezka.ox-mriezka--4)::after {
			content: ''; order: 1; display: block; height: 2px; margin-top: -1px;
			background: var(--sk-akcent); transform-origin: left center;
			transform: scaleX(.08);   /* aj keď časová os nenabehne, ostane značka, nie plná linka */
			animation-name: ox-tlac-meradlo; animation-duration: auto;
			animation-timing-function: linear; animation-fill-mode: both;
			animation-timeline: --ox-tlac-rail;
		}
	}
}

/* --- 17) vypnutý pohyb ------------------------------------------------------
   Nábeh kariet tu zámerne NIE JE. Rodina 21 ho už robí sama (varianty.css
   2975-2977 `.ox-rv--posun` + varianty/21-showroom.js 1947: `.ox-produkt`,
   posun 22 px, stagger 60 ms) - presne ten "per-atom motion budget" z promptu.
   Druhý nábeh cez @keyframes sa s ním bil: zmerané, karta vyšla na krytie 0,37
   a v okamihu, keď JS pridal `.ox-rv--posun`, spadla animation-fill-mode: both
   naspäť na krytie 0 a nábeh začal odznova. Preto ho nepridávame. */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-karta.ox-produkt,
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__foto img,
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt__nazov a,
	html[data-ox-katalog="tlac"] #ox-obsah:has(#ox-vysledky) .ox-chipy .ox-chip { transition: none; }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img,
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:focus-within .ox-produkt__foto img { transform: none; }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:hover .ox-produkt__nazov a,
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-produkt:focus-within .ox-produkt__nazov a { background-size: 100% 2px; }
	html[data-ox-katalog="tlac"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { scroll-snap-type: none; }
}
@keyframes ox-tlac-meradlo { from { transform: scaleX(.08); } to { transform: scaleX(1); } }

/* ---- pokladna / dvojstlpec: Dvojstĺpec  (podľa ) ---- */
/* ===========================================================================
   POKLADŇA / varianta "dvojstlpec" - Dvojstĺpec
   Zdroj: knižničný prompt superdesign.dev "checkout-page-standard-two-column"
   (58/42 split, čisto sivá wireframová paleta, Public Sans, 8px mriežka).

   PRENESENÉ Z PROMPTU: pomer stĺpcov 58/42 s NAOZAJ lepivým súhrnom vpravo, 8px
   rytmus a 32-40px medzery medzi sekciami, 18px nadpisy sekcií / 14px text /
   12px popisky, 48px vstupy a vedľajšie tlačidlá, 56px hlavné CTA s min. šírkou
   200px zarovnané doprava, 4px rohy, náhľad produktu 64x64 s 8px rohmi, 1px
   rámom, 4px vnútrom a svetlým vnútorným obdĺžnikom, kolieskový odznak počtu,
   "progressive disclosure" prepínač (zlepené 1px rámy, vlastné 16px koliesko
   s 8px jadrom, aktívny riadok na svetlom podklade), pole kupónu vstup +
   tlačidlo, odlíšený súhrnný stĺpec so zvýrazneným Spolu, 150 ms čisto farebné
   prechody a súhrn hore na úzkom displeji.

   PREKLAD PALETY A PÍSEM (prompt je sivý, my sme OXO):
     #FFFFFF -> biela (bez zmeny)        #F9FAFB druhý povrch -> --sk-krem
     #E5E7EB deliace linky -> #DCD5CB    #D1D5DB rámy prvkov  -> #948A82
       (3,44:1 na bielej a 3,22:1 na kréme, čiže WCAG 1.4.11 pre ovládacie prvky)
     #111827 text -> atrament --sk-text #1B1B1B (16,1:1 na bielej)
     #111827 hlavná akcia -> to je akcentová rola, čiže OXO červená, stmavená na
       #C60017 (biela na nej 6,15:1; na surovej --sk-akcent #D60019 4,98:1, čo
       je síce nad 4,5, ale bez rezervy a téma smie akcent zmeniť)
     #6B7280 -> #67605A napevno (--sk-text-tlmeny nie je konštanta), 6,18:1
     #9CA3AF placeholder a ikony -> #7A726B (4,69:1)
     Public Sans 600 -> Anton verzálky, line-height 1.25 kvôli diakritike
     čísla, štítky a technické popisky -> mono (ui-monospace / JetBrains Mono)

   ČO PREBÍJAM V ZÁKLADE A PREČO:
     - .ox-pokladna 1,55fr/0,95fr -> 58fr/42fr (pomer z promptu). Pozor: tým sa
       prebije aj zbaľovanie základu pod 1100px, tak si ho robím sám (viď dole).
     - #ox-pokladna-suhrn dostáva align-self: stretch. Bez toho má bunka mriežky
       presne výšku karty (.ox-pokladna má align-items: start), lepivá dráha je
       NULA a position: sticky nerobí vôbec nič - odmerané, karta odchádzala
       s bunkou (suhrnTop == bunkaTop == -606,6 px po odrolovaní o 900 px).
     - lepivý odstup je 90px, nie 24px: #ox-hlavicka je position: fixed, vysoká
       74px a má z-index 60, takže by kartu prekryla.
     - téma 21 nafukuje .ox-riadok__foto na clamp(84px,8vw,112px); prompt chce
       presne 64x64, vraciam to (5-stĺpcová mriežka základu už 64px má).
     - téma 21 robí z .ox-kroky pás s červeným podčiarknutím; prompt má textovú
       omrvinkovú navigáciu s "›", tak ruším ::after pruh aj odsadenia.
     - téma 21 dáva cenám --sk-font-display a červenú; červenú si tu drží LEN
       akcia, preto sú ceny v mono atramentom - inak nie je nič dominantné.
       Preto sú na --dvs-cervena prepnuté aj všetky ostatné červené miesta
       v pokladni (tlačidlo validátora, upsell, ľavý pruh chybovej hlášky)
       a pruh dopravy zadarmo je atramentový, nie červený.
     - .ox-suhlas mal červený prerušovaný rám -> obyčajný 1px rám.
     - .ox-dz má vo varianty.css globálne display:grid, čo prebíja atribút
       hidden z markupu; vraciam .ox-dz[hidden] { display:none }.
     - .ox-dz__ok mal #1F8F30 = 4,17:1 na bielej (pod 4,5 pri 12px tučnom),
       preto #157026 = 6,22:1.
     - --sk-text-tlmeny nepúšťam do pokladne nikde, kde sa naň dá siahnuť
       (.ox-text-tlmeny, texty validátora): v témach 08-particles a 11-minimal
       je to rgba(27,27,27,.56) = 4,02:1 na kréme.
     - !important je len tam, kde ho má aj základ (html .ox-prev-kosik .ox-riadok
       a .ox-riadok > * grid-area). .ox-btn:active scale(.96) !important
       nechávam nedotknuté - reset bez !important by bol mŕtvy kód.
     - ⚠️⚠️ ŽIVÁ assets/varianty.css (877 kB) je o 124 kB PRED kópiou v repozitári
       (753 kB) a má navyše bloky „W5 tlačidlá“ a „hláška zostavy“ s !important.
       Audit, ktorý by čítal len repozitár, by ich nevidel.
     - úzky riadok položky NERIEŠI @media, ale @container: dlaždica prevádzky je
       pri 1024px široká len 485,7px, hoci okno má 1024px, a meno produktu
       spadne do 113px stĺpca (odmerané: 9 riadkov textu).
   =========================================================================== */

/* --- lokálne tokeny (dedia sa do celej sekcie) ---------------------------- */
html[data-ox-pokladna="dvojstlpec"] .ox-pokladna,
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) {
	--dvs-linka: #DCD5CB;          /* prompt #E5E7EB - vlasové deliace linky */
	--dvs-ram: #948A82;            /* prompt #D1D5DB - rámy ovládacích prvkov */
	--dvs-tlmeny: #67605A;         /* prompt #6B7280 */
	--dvs-slaby: #7A726B;          /* prompt #9CA3AF - placeholder a ikony */
	--dvs-cervena: #C60017;        /* akcia: stmavená --sk-akcent, biela 6,15:1 */
	--dvs-cervena-tm: #A30013;     /* hover, biela 8,18:1 */
	--dvs-zelena: #157026;         /* doprava zadarmo, na bielej 6,22:1 */
	--dvs-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	--dvs-r: 4px;                  /* prompt: 4px rohy */
	--dvs-pad: clamp(16px, 2vw, 24px);   /* prompt: 8px mriežka */
	--dvs-cas: .15s;               /* prompt: 150ms prechody */
}

/* --- omrvinková navigácia (prompt: "Cart > Information > Shipping") -------- */
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) {
	display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0;
	margin-bottom: clamp(24px, 3vw, 40px); padding-bottom: 0; border-bottom: 0;
}
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok {
	padding: 0; margin: 0; border-radius: 0; box-shadow: none; background: none;
	align-items: baseline; gap: 6px; font: 700 12px/1.4 var(--dvs-mono);
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--dvs-tlmeny);            /* prompt: neaktívne #6B7280, 6,18:1 */
	transition: color var(--dvs-cas) linear;
}
/* pruh pod aktívnym krokom z témy 21 preč - prompt rozlišuje len farbou textu.
   Ruší sa aj ::after nad oddeľovačom (téma ho vyrába pre všetky deti .ox-kroky). */
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) > *::after { display: none; }
/* LEN aktuálny krok je atramentový. Hotový krok musí ostať tlmený, inak sa
   v 2. kroku nedá rozoznať, kde používateľ stojí - hotový už nesie „✓“. */
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny {
	color: var(--sk-text, #1B1B1B);      /* prompt: aktuálny krok #111827 */
}
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--hotovy {
	color: var(--dvs-tlmeny);
}
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__cislo {
	width: auto; height: auto; margin: 0; padding: 0; border-radius: 0;
	background: none; color: inherit; opacity: .8; font: inherit; font-size: 11px;
}
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__text small {
	margin-top: 3px; font: 400 10.5px/1.3 var(--sk-font-text, sans-serif);
	letter-spacing: .01em; text-transform: none; color: var(--dvs-tlmeny); /* 6,18:1 */
}
/* prázdny span medzi krokmi robí "›" z promptu (základ ho v téme 21 skrýva) */
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara {
	display: inline-block; width: auto; height: auto; margin: 0 14px; padding: 0;
	background: none; color: var(--dvs-slaby); font: 400 14px/1.4 var(--dvs-mono);
	letter-spacing: 0;                   /* téma 21 dáva deťom .ox-kroky .08em */
}
html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara::before { content: '\203A'; }

/* --- rozdelenie 58/42 (prompt: ľavý stĺpec 58 %, pravý 42 %) -------------- */
html[data-ox-pokladna="dvojstlpec"] .ox-pokladna {
	grid-template-columns: minmax(0, 58fr) minmax(320px, 42fr);
	gap: clamp(24px, 3vw, 40px); align-items: start;   /* prompt: 32-40px medzery */
}
/* bez stretch má bunka presne výšku karty a lepivá dráha je nula */
html[data-ox-pokladna="dvojstlpec"] .ox-pokladna > #ox-pokladna-suhrn { align-self: stretch; }

/* --- sekcie v ľavom stĺpci ------------------------------------------------ */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-blok { margin-bottom: 40px; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-blok > h3,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-krok-nadpis,
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn > .ox-h3 {
	font-family: var(--sk-font-nadpis, sans-serif);      /* prompt: nadpisy 18px */
	font-size: 18px; font-weight: 400; line-height: 1.25; /* 1.25 kvôli diakritike */
	letter-spacing: .03em; text-transform: uppercase;
	color: var(--sk-text, #1B1B1B); margin: 0 0 16px;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-krok-nadpis {
	gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--dvs-linka);
}
/* číslo kroku ako drobný štítok - to je preložený "notification badge" z promptu */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-krok-nadpis .ox-krok__cislo {
	width: 26px; height: 26px; flex: 0 0 auto; margin: 0; border-radius: var(--dvs-r);
	background: var(--sk-text, #1B1B1B); color: #fff;   /* 17,0:1 */
	font: 700 11px/1 var(--dvs-mono); letter-spacing: 0;
}
/* tlmený text v pokladni sa nesmie opierať o --sk-text-tlmeny (08/11 = 4,02:1) */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-text-tlmeny { color: var(--dvs-tlmeny); }

/* --- košík prevádzky = "contained box" z promptu -------------------------- */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik {
	border: 1px solid var(--dvs-ram); border-radius: var(--dvs-r); background: #fff; padding: var(--dvs-pad);
	container-type: inline-size; container-name: oxdvs;
	transition: border-color var(--dvs-cas) linear, background var(--dvs-cas) linear;
}
/* aktívny "riadok" má v prompte svetlý podklad - u nás krém */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik--aktivna {
	background: var(--sk-krem, #FFF7E6); border-color: var(--sk-text, #1B1B1B);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik__hlava {
	gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--dvs-linka);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik__hlava span:first-of-type {
	color: var(--sk-text, #1B1B1B);      /* červenú si tu drží len akcia */
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik__hlava .ox-odznak {
	padding: 3px 7px; border-radius: var(--dvs-r);
	background: var(--dvs-cervena); color: #fff;        /* 6,15:1 pri 10px */
	font: 700 10px/1.4 var(--dvs-mono); letter-spacing: .12em; text-transform: uppercase;
}
/* prázdna prevádzka: hláška musí ostať v 14px tier-e, nie v 16px tele stránky */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik > .ox-text-tlmeny {
	margin: 16px 0 0; font-size: 14px;
}

/* --- riadok položky ------------------------------------------------------- */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok {
	gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--dvs-linka);
}
/* náhľad 64x64 z promptu: biely podklad, 8px rohy, 1px rám, 4px vnútro
   a svetlý vnútorný obdĺžnik (prompt: #F3F4F6) */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto {
	width: 64px; height: 64px; padding: 4px; background: #fff; box-shadow: none; overflow: hidden;
	border: 1px solid var(--dvs-linka); border-radius: 8px;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto img {
	width: 100%; height: 100%; object-fit: contain; padding: 0;
	background: rgba(27, 27, 27, .045);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__nazov {
	font-family: var(--sk-font-text, sans-serif); font-size: 14.5px;
	font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none;
	color: var(--sk-text, #1B1B1B);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__meta {
	margin-top: 2px;
	font: 400 12px/1.4 var(--dvs-mono); letter-spacing: .04em; text-transform: none;
	color: var(--dvs-tlmeny);            /* 6,18:1 biela / 5,80:1 krém */
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena {
	font: 700 14px var(--dvs-mono); font-variant-numeric: tabular-nums; color: var(--sk-text, #1B1B1B);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena small {
	margin-top: 3px; font: 400 10px/1 var(--dvs-mono);
	letter-spacing: .1em; text-transform: uppercase; color: var(--dvs-tlmeny);
}
/* stĺpec krokovača si v základe berie ešte 8px margin-inline navyše - v najužšom
   mieste mriežky je to 16px, ktoré chýbajú menu produktu */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-riadok__mn { margin-inline: 0; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mnozstvo {
	border: 1px solid var(--dvs-ram); border-radius: var(--dvs-r);
	background: #fff; overflow: hidden;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mnozstvo button {
	width: 32px; height: 32px; font-size: 15px; color: var(--sk-text, #1B1B1B);
	transition: background var(--dvs-cas) linear, color var(--dvs-cas) linear;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mnozstvo button:hover:not(:disabled),
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mnozstvo button:focus-visible:not(:disabled) {
	background: var(--sk-text, #1B1B1B); color: #fff;   /* 17,0:1 */
}
/* SIGNATURE z promptu: "floating notification badge (#6B7280 circle, 20x20px)
   containing the quantity in white text". Počet je u nás v <output> krokovača
   (dá sa meniť), tak odznak žije tam - rovnaká reč, pravdivé miesto. */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mnozstvo output {
	display: inline-grid; place-items: center;
	min-width: 20px; height: 20px; margin: 0 6px; padding: 0 5px;
	border-radius: 999px; background: var(--dvs-tlmeny); color: #fff;   /* 6,18:1 */
	font: 700 11px/1 var(--dvs-mono); font-variant-numeric: tabular-nums;
}
/* prompt: minimalistické linkové ikony 16px vo farbe #9CA3AF */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-riadok__zmaz {
	width: 32px; height: 32px; border: 0; border-radius: var(--dvs-r);
	background: none; opacity: 1; color: var(--dvs-slaby);   /* 4,69:1 */
	transition: color var(--dvs-cas) linear, background var(--dvs-cas) linear;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-riadok__zmaz svg { width: 16px; height: 16px; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-riadok__zmaz:hover,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-riadok__zmaz:focus-visible {
	color: var(--dvs-cervena); background: var(--sk-ruz, #FFD9D6);   /* 4,73:1 */
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik__spolu {
	margin-top: 16px; font: 400 12px/1.4 var(--dvs-mono);
	letter-spacing: .1em; text-transform: uppercase; color: var(--dvs-tlmeny);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik__spolu b {
	margin-left: 8px; font-size: 16px; font-variant-numeric: tabular-nums;
	letter-spacing: 0; color: var(--sk-text, #1B1B1B);
}

/* --- doprava = "Progressive Disclosure Radio" z promptu ------------------- */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba {
	min-height: 56px; margin: 0 0 -1px; padding: 16px; background: #fff;
	border: 1px solid var(--dvs-ram); border-radius: 0;
	transition: background var(--dvs-cas) linear, border-color var(--dvs-cas) linear;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba:first-of-type { border-radius: var(--dvs-r) var(--dvs-r) 0 0; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba:last-of-type { border-radius: 0 0 var(--dvs-r) var(--dvs-r); margin-bottom: 0; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba:first-of-type:last-of-type { border-radius: var(--dvs-r); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba:has(input:checked) {
	position: relative; z-index: 1;
	background: var(--sk-krem, #FFF7E6); border-color: var(--sk-text, #1B1B1B);
}
/* vlastné koliesko: 16px prstenec, 8px jadro (presne ako v prompte) */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba input {
	appearance: none; -webkit-appearance: none; margin: 0;
	width: 16px; height: 16px; flex: 0 0 auto; background: #fff;
	border: 1px solid var(--dvs-ram); border-radius: 50%;   /* 3,44:1 */
	transition: border-color var(--dvs-cas) linear, background var(--dvs-cas) linear;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba input:checked {
	border-color: var(--sk-text, #1B1B1B);
	background: radial-gradient(circle at 50% 50%, var(--sk-text, #1B1B1B) 0 4px, #fff 4.5px);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba > span { font-size: 14px; font-weight: 600; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba > b {
	font: 700 14px var(--dvs-mono); font-variant-numeric: tabular-nums; color: var(--sk-text, #1B1B1B);
}

/* --- kupón = "discount code field" z promptu (48px vstup + 48px tlačidlo) --
   line-height je tu preto, aby min-height 48px naozaj rozhodoval: bez neho má
   vstup 48,4px a tlačidlo sa k nemu v pružnom riadku natiahne. */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-kupon__riadok { gap: 8px; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah #ox-kupon {
	min-height: 48px; padding: 12px 16px; font-size: 14px; line-height: 1.2; background: #fff;
	border: 1px solid var(--dvs-ram); border-radius: var(--dvs-r);
	transition: border-color var(--dvs-cas) linear, box-shadow var(--dvs-cas) linear;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah #ox-kupon::placeholder { color: var(--dvs-slaby); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah #ox-kupon:focus {
	border-color: var(--sk-text, #1B1B1B);
	box-shadow: 0 0 0 3px rgba(27, 27, 27, .12);   /* prompt: mäkký prstenec */
}
/* základ dáva .ox-input:focus { outline: none } a je v súbore NIŽŠIE než
   globálne :focus-visible, takže vstup ostával pri klávesnici bez obrysu */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah #ox-kupon:focus-visible {
	outline: 2px solid var(--sk-text, #1B1B1B); outline-offset: 2px;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah #ox-kupon-btn {
	min-height: 48px; padding: 12px 20px; box-shadow: none;
	border: 1px solid var(--sk-text, #1B1B1B); border-radius: var(--dvs-r);
	font: 700 13px/1 var(--sk-font-text, sans-serif);
	letter-spacing: .06em; text-transform: uppercase;
	transition: background var(--dvs-cas) linear, color var(--dvs-cas) linear;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-kupon__aktivne { font-size: 13px; color: var(--dvs-tlmeny); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-kupon__zrus { color: var(--dvs-cervena); }

/* --- súhlas = "checkbox pre marketing" z promptu, len obsahovo iný --------- */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-suhlas {
	padding: 20px; background: #fff; border: 1px solid var(--dvs-linka); border-radius: var(--dvs-r);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-suhlas p {
	font-size: 12.5px; line-height: 1.6; margin: 0;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-suhlas a { color: var(--dvs-cervena); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-suhlas .ox-check {
	margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--sk-text, #1B1B1B);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-suhlas .ox-check input {
	width: 16px; height: 16px; margin-top: 3px; accent-color: var(--dvs-cervena);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-povinne { color: var(--dvs-cervena); }

/* --- varovanie validátora zostavy + chybová hláška ------------------------
   Prompt pre ne nemá obdobu, tak ich len zrovnávam do tej istej reči: 4px rohy,
   1px rám, červená LEN --dvs-cervena. Vnútro .ox-bt má v základe 16px rohy,
   1,5px ružový rám a tlmené texty z témy - všetko sa zráža s wireframom. */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt-box {
	border: 1px solid var(--dvs-cervena); border-radius: var(--dvs-r);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt-box__hlava {
	background: var(--dvs-cervena);            /* biela na ňom 6,15:1 */
	font: 700 11px/1.5 var(--dvs-mono); letter-spacing: .12em;
}
/* ⚠️ ŽIVÁ varianty.css (riadky 5634-5646, v repozitári ešte nie sú) drží celé
   vnútro .ox-bt cez !important: border, border-radius, background aj tlačidlo
   „Pridať N ks“. Rámy a rohy tam nechávam tak, ako ich chce základ - prepisujem
   len to, čo je chyba: tlmenú farbu (v témach 08/11 = 4,00:1 na bielej) a druhú
   červenú (--sk-akcent 4,98:1 vedľa akčnej --dvs-cervena 6,15:1). */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-intro { color: var(--dvs-tlmeny) !important; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-quick-add,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt button[data-bt-pid] {
	background: var(--dvs-cervena) !important; color: #fff !important;   /* 6,15:1 */
	border-radius: var(--dvs-r) !important;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-quick-add:hover:not(:disabled),
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt button[data-bt-pid]:hover:not(:disabled) {
	background: var(--dvs-cervena-tm) !important;                        /* 8,18:1 */
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-notice-title,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-details summary,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-ico-bad { color: var(--dvs-cervena); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-head,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-unit,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-row-need,
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-details-body { color: var(--dvs-tlmeny); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-hlaska {
	border-radius: var(--dvs-r); border: 1px solid var(--dvs-linka); border-left-width: 4px;
	font-size: 13.5px;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-hlaska--chyba { border-color: var(--dvs-cervena); }

/* --- upsell „Pridať do prevádzky“ (#ox-marketing) ------------------------- */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mkt {
	padding: var(--dvs-pad); background: #fff;
	border: 1px solid var(--dvs-linka); border-radius: var(--dvs-r);
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mkt__popis { color: var(--dvs-tlmeny); font-size: 13px; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mkt__telo small { color: var(--dvs-tlmeny); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mkt__obr { border-radius: var(--dvs-r); border: 1px solid var(--dvs-linka); }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mkt__menu { border-radius: var(--dvs-r); }

/* červená smie byť v pokladni len akčná a len --dvs-cervena (6,15:1);
   --sk-akcent je 4,98:1 a téma ho smie zmeniť */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-btn--hlavne {
	background: var(--dvs-cervena); color: #fff; border-color: transparent;
	border-radius: var(--dvs-r); box-shadow: none;
	transition: background var(--dvs-cas) linear, color var(--dvs-cas) linear;
}
/* prompt pripúšťa len farebný prechod, nie nadskakovanie ani žiaru zo základu
   (živá varianty.css 5561 dáva .ox-btn--hlavne:hover červenú žiaru) */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-btn:hover:not(:disabled) { transform: none; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-btn--hlavne:hover:not(:disabled) {
	background: var(--dvs-cervena-tm); box-shadow: none;   /* biela 8,18:1 */
}
/* Obrys fokusu: globálny je surovo červený, tu je atramentový (16,1:1).
   Tlačidlá sú vynechané zámerne: živá varianty.css 5563 im dáva vlastný
   dvojprstenec (3px biela + 3px akcent) cez !important, ktorý sa zrušiť nedá,
   a téma 21 im k tomu pridáva ešte tmavočervený 2px obrys - odmerané, kreslili
   sa tri prstence cez seba. Obrys im teda beriem a nechávam čistý dvojprstenec
   (#D60019 voči bielej 4,98:1, čiže nad 3:1 pre ukazovateľ fokusu). */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah :focus-visible:not(.ox-btn),
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn :focus-visible:not(.ox-btn) {
	outline: 2px solid var(--sk-text, #1B1B1B); outline-offset: 2px;
}
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-btn:focus-visible,
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-btn:focus-visible { outline: none; }

/* --- päta akcií (prompt: odkaz vľavo, tlačidlo vpravo, min. 200px) --------
   Pozn.: markup má v .ox-reg-akcie jediné tlačidlo, odkaz „Späť do košíka“
   z promptu tu nie je čo naštýlovať (bez zmeny markupu sa doplniť nedá). */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-reg-akcie {
	justify-content: flex-end;
	margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--dvs-linka);
}
/* line-height 1.1: základ dáva .ox-btn--velke min-height 60px a bez neho meria
   tlačidlo 60px, hoci prompt žiada presne 56px */
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne {
	min-width: 200px; min-height: 56px; padding: 16px 32px;   /* prompt: 56px CTA */
	font-size: 15px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
}

/* --- súhrnný stĺpec (prompt: lepivý, na odlíšenom podklade) ----------------
   Odstup 90px: #ox-hlavicka je fixed, 74px vysoká, z-index 60. */
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn {
	padding: var(--dvs-pad);
	border: 1px solid var(--dvs-linka); border-radius: var(--dvs-r);
	background: var(--sk-krem, #FFF7E6);       /* prompt #F9FAFB -> OXO krém */
	box-shadow: none; overflow: hidden;
	position: sticky; top: calc(var(--ox-lista, 0px) + 90px);
}
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn > .ox-h3 {
	padding-bottom: 12px; border-bottom: 1px solid var(--dvs-linka);
}
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__riadok { padding: 8px 0; font-size: 14px; }
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__riadok--tlmeny { color: var(--dvs-tlmeny); } /* 5,80:1 na kréme */
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__riadok > span + span {
	font-family: var(--dvs-mono); font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--sk-text, #1B1B1B);
}
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__rozpis { border-top: 1px solid var(--dvs-linka); }
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__rozpis > b {
	font: 700 10px/1.4 var(--dvs-mono); letter-spacing: .16em; color: var(--dvs-tlmeny);
}
/* Spolu = jediné miesto, kam ide veľká typografia; pás ide na šírku celej karty
   (záporný okraj = presne vnútorné odsadenie karty), červená vlasová linka hore
   je tá "jedna vec, čo pritiahne oko" */
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__spolu {
	align-items: center; margin: 20px calc(var(--dvs-pad) * -1) 0; padding: 18px var(--dvs-pad);
	border-top: 3px solid var(--dvs-cervena);
	background: var(--sk-text, #1B1B1B);
}
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__spolu > span {
	font: 700 11px/1.4 var(--dvs-mono); letter-spacing: .2em; text-transform: uppercase;
	color: rgba(255, 255, 255, .82);           /* 13,2:1 na atramente */
}
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__spolu b {
	font-family: var(--sk-font-nadpis, sans-serif); font-weight: 400; font-size: 30px;
	line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; color: #fff; /* 17,0:1 */
}
/* .ox-dz má vo varianty.css globálne display:grid, čo prebíja atribút hidden */
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-dz[hidden] { display: none; }
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-dz {
	margin-top: 16px; padding: 12px 14px; background: #fff; font: 400 12px/1.5 var(--dvs-mono);
	border: 1px solid var(--dvs-linka); border-radius: var(--dvs-r);
}
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-dz small { color: var(--dvs-tlmeny); font-size: 11px; }
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-dz__ok { color: var(--dvs-zelena); }
/* pruh mal červený prechod - to je v tejto palete rola akcie, tak je atramentový */
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-dz__pas { height: 4px; border-radius: 999px; background: rgba(27, 27, 27, .14); }
html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-dz__pas i { background: var(--sk-text, #1B1B1B); }

/* --- úzka dlaždica prevádzky: riadok do dvoch pásov -----------------------
   Meria sa DLAŽDICA, nie okno: pri okne 1024px je dlaždica široká 485,7px
   a stĺpec mena spadne na 113px (9 riadkov textu). @media by to nechytilo.
   Prah 580px = 64 foto + 200 meno + 100 krokovač + 32 kôš + 96 cena + 4x16 medzier.
   !important je tu preto, lebo základ drží mriežku aj umiestnenie buniek
   cez !important (html .ox-prev-kosik .ox-riadok a .ox-riadok > *). */
@container oxdvs (max-width: 580px) {
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok {
		grid-template-columns: 56px minmax(0, 1fr) auto !important;
		gap: 10px 12px;
	}
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto {
		grid-area: 1 / 1 / 3 / 2 !important; width: 56px; height: 56px; align-self: start;
	}
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__telo { grid-area: 1 / 2 / 2 / 3 !important; }
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena {
		grid-area: 1 / 3 / 2 / 4 !important; text-align: right;
	}
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__mn {
		grid-area: 2 / 2 / 3 / 3 !important; justify-self: start;
	}
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__zmaz {
		grid-area: 2 / 3 / 3 / 4 !important; justify-self: end;
	}
}

/* --- 960 px a menej: jeden stĺpec, súhrn hore -----------------------------
   ⚠️ Základ zbaľuje .ox-pokladna do 1fr pod 1100px selektorom .ox-pokladna
   (0-1-0). Môj dvojstĺpec je špecifickejší, takže by ten zbal PREBIL a stĺpce
   by sa pod 1100px prekrývali. Zbaľujem si ho preto sám - a rovnako aj
   position:static, ktorý má základ tiež len na 0-1-0. Prompt navyše chce mať
   na úzkom displeji súhrn HORE, na to je order: -1. Súhrn v pokladni nemá
   žiadny ovládací prvok (akcia je prázdna), takže poradie tabulátora sa
   nerozchádza so zrakovým. */
@media (max-width: 960px) {
	html[data-ox-pokladna="dvojstlpec"] .ox-pokladna { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-pokladna="dvojstlpec"] .ox-pokladna > #ox-pokladna-suhrn { order: -1; }
	html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn { position: static; }
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-blok { margin-bottom: 32px; }
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik { padding: 16px; }
}

/* --- 768 px a menej: akcia na celú šírku ---------------------------------- */
@media (max-width: 768px) {
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-reg-akcie { justify-content: stretch; }
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne { width: 100%; }
	html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara { margin: 0 8px; }
	html[data-ox-pokladna="dvojstlpec"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__text small { display: none; }
}

/* --- 640 px a menej: menšie Spolu ----------------------------------------- */
@media (max-width: 640px) {
	html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-suhrn__spolu b { font-size: 26px; }
}

/* --- obmedzený pohyb ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-prev-kosik,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-doprava-volba input,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mnozstvo button,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-riadok__zmaz,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah #ox-kupon,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah #ox-kupon-btn,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-btn--hlavne,
	html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-bt .bt-quick-add,
	html[data-ox-pokladna="dvojstlpec"] #ox-pokladna-suhrn .ox-dz__pas i { transition: none; }
}

/* ---- pokladna / piesok: Piesok  (podľa ) ---- */
/* ===========================================================================
   POKLADŇA · varianta „Piesok"  (html[data-ox-pokladna="piesok"])
   ---------------------------------------------------------------------------
   PREDLOHA: knižničný prompt superdesign.dev
   „checkout-atelier-sand-warm-sand-aa-contrast-fixed" - teplý piesok, jedna
   terakota a JEDNA tmavá atramentová karta súhrnu.
   PRENESENÉ 1:1: trojstupňový teplý papier (strana = piesok, karta = krém, pole
   = biele), vlasové TEPLÉ rámy, bodkový zrnitý raster, zrnitý pás hlavičky
   s omrvinkou, 16px karty / 12px polia / 14px tlačidlo, mäkké tiene do teplej,
   číslovaná hlavička s dlaždicou, segmentový prepínač, 4px fokusový prstenec,
   mono „eyebrow" popisky v dvojstupňovej škále a hrdina promptu: lepkavá tmavá
   karta súhrnu s plnošírkovým platobným tlačidlom.
   PRELOŽENÉ DO OXO: terakota → červená #D60019 / #D60019 / #A8000F (ten istý
   kontrastný výstup, aký si prompt robí cez terra → terradk → terraxd), Inter
   Extrabold → Anton verzálky s line-height 1.25 kvôli diakritike, drobné → mono.
   PREBÍJAME V ZÁKLADE:
     · html[data-tema^="21"] .ox-riadok__foto - nafúknutá na 84-112px, hoci
       stĺpec je zamknutý na 64px cez !important (varianty.css r. 4836);
     · .ox-bt má celý blok na !important (varianty.css r. 5634-5642);
     · html[data-tema^="21"] .ox-mnozstvo - pilulka 999px → 12px pole;
     · html[data-tema^="21"] .ox-kroky - uppercase pruhy → mono omrvinka;
     · html[data-tema^="21"] .ox-kroky > * { background: none !important }
       - preto oddeľovač .ox-kroky__ciara potrebuje tiež !important (inak je
       neviditeľný, overené v prehliadači: computed background = transparent);
     · .ox-krok / .ox-krok--aktivny zo _zaklad.css - pilulky s plnou farbou;
       MIMO tém 21 ich nikto nevypína, preto background: none explicitne
       (bez toho: čierny text na červenej pilulke = 3,46:1, číslo 1,58:1);
     · .ox-suhrn zo _zaklad.css - svetlá karta → atramentová doska;
     · .ox-suhlas / .ox-bt-box - červené prerušované rámy → tiché teplé karty;
     · .ox-text-tlmeny / .ox-mkt__popis / .ox-bt .bt-intro - dedia
       --sk-text-tlmeny, ktoré NIE JE konštanta (pozri tokeny nižšie).
   NEPREBÍJAME (overené, že to netreba):
     · .ox-dz[hidden] - varianty.css r. 4803 má [hidden]{display:none!important},
       takže atribút hidden vyhráva sám; pravidlo navyše by bolo mŕtve;
     · .ox-btn:active - varianty.css r. 5562 má scale(.96) !important,
       reset bez !important by bol mŕtvy, a so škálou sme spokojní;
     · jeden stĺpec pod 1100px - _zaklad.css r. 739 to už robí, vlastná vetva
       „max-width: 1024px" by bola mŕtva aj nesúhlasná so základom.
   VEDOME NEPOUŽITÉ: navigácia, hrdina, pätička, logá kariet a dôverové pilulky
   („256-bit SSL", „Free returns") - to sú nové TEXTY, my meníme výhradne CSS.
   ======================================================================== */

/* --- 0) lokálne tokeny -----------------------------------------------------
   .ox-kroky nie je vnútri .ox-pokladna, preto tokeny sú na oboch kotvách.
   :not(#ox-reg-kroky) je povinné - tú triedu má aj sprievodca registráciou. */
html[data-ox-pokladna="piesok"] .ox-pokladna,
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) {
	--pi-piesok:      #F2E9D6;                          /* strana (sand) */
	/* POZOR: karta, atrament aj tmavá červená sú PEVNÉ, nie var(--sk-*).
	   Téma 07-fluid má --sk-text: #ffffff a --sk-text-tlmeny: rgba(255,255,255,.66).
	   Cez var() by z atramentovej dosky bola BIELA doska s bielym textom (1,00:1,
	   odmerané) a nadpisy, názvy aj sumy na kréme by zmizli (1,07:1).
	   Tieto tri farby nesú celý kontrastný rozpočet varianty, preto sú pevné. */
	--pi-karta:       #FFF7E6;                          /* karta (sandlt) */
	--pi-pole:        #ffffff;                          /* pole (white) */
	--pi-linka:       #E4D7BB;  --pi-linka-jemna: #EDE3CF;   /* teplé vlasové rámy */
	--pi-atrament:    #1B1B1B;                          /* text aj jediná tmavá plocha */
	/* --sk-text-tlmeny NIE JE konštanta (v témach 08 a 11 rgba(27,27,27,.56) =
	   na kréme 3,91:1 odmerané); #67605A dá 5,80 na kréme, 5,12 na piesku,
	   6,18 na bielej a 5,12 na doske */
	--pi-tlmeny:      #67605A;
	--pi-cervena-tm:  #D60019;                          /* biely text 5,42:1 */
	--pi-cervena-hl:  #A8000F;                          /* na ružovej dlaždici 6,18:1 */
	--pi-tien-jemny:  0 1px 2px rgba(27, 27, 27, .05), 0 6px 16px -12px rgba(27, 27, 27, .16);
	--pi-tien-karta:  0 1px 2px rgba(27, 27, 27, .05), 0 12px 30px -16px rgba(27, 27, 27, .20);
	/* Polomery si varianta drží sama: 21-showroom má --sk-r-* na 0 a 21g3-noirg3
	   na 8/14px, cez tokeny by z papiera promptu (12/16px) ostali hrany. */
	--pi-r-doska:     22px;
	--pi-r-karta:     16px;
	--pi-r-pole:      12px;
	--pi-mono:        ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	/* Typografická škála promptu: JEDEN „eyebrow" (12px/700/uppercase/.22em)
	   a jeho drobná varianta. Návrh mal šesť náhodných veľkostí a šesť
	   prestrkov; toto je škála, ktorú si zákazník pýtal zachovať. */
	--pi-oko:         700 11px/1.5 var(--pi-mono);
	--pi-oko-prestrk: .22em;
	--pi-oko-s:       600 10px/1.45 var(--pi-mono);
	--pi-oko-s-prestrk: .14em;
	/* prompt: body letter-spacing -0.011em; nadpisy si nižšie prestrk prepisujú */
	letter-spacing: -.011em;
	/* bez tohto dedí text farbu z <body> = var(--sk-text); v téme 07-fluid biela */
	color: var(--pi-atrament);
}

/* --- 1) kroky = zrnitý pás s omrvinkou „Cart › Checkout › Confirmation" ----
   Prompt má hrdinský pás so zrnom, vlasovou linkou a jemným prechodom
   sandlt → sand; jediné miesto, kam sa u nás zmestí, je riadok krokov.
   Téma 21 z krokov robí uppercase pruhy s 2px podčiarknutím; tu je to pokojná
   mono stopa, aktívny krok drží červená linka pod textom. */
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) {
	gap: 0; margin-bottom: clamp(20px, 2.6vw, 34px);
	padding: 2px clamp(14px, 2.4vw, 26px) 0;
	border: 1px solid var(--pi-linka); border-radius: var(--pi-r-karta);
	background-color: var(--pi-piesok);
	background-image: radial-gradient(rgba(27, 27, 27, .05) 1px, transparent 1px),
	                  linear-gradient(180deg, var(--pi-karta), var(--pi-piesok));
	background-size: 4px 4px, auto;
}
/* background: none je proti _zaklad.css .ox-krok (pilulka --sk-linka) a proti
   .ox-krok--aktivny (plná červená) - mimo tém 21 ich nikto nevypína */
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok {
	position: relative; margin: 0 26px 0 0; padding: 10px 0 14px;
	border-radius: 0; box-shadow: none; background: none; color: var(--pi-tlmeny);
	font: var(--pi-oko); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: transparent;
}
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--hotovy::after { background: var(--pi-linka); }
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny { color: var(--pi-atrament); }
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny::after { background: var(--pi-cervena-tm); }
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__cislo {
	width: auto; height: auto; margin-right: 9px; border-radius: 0; background: none;
	font: var(--pi-oko); color: var(--pi-cervena-hl);   /* 7,37:1 na kréme, 5,51:1 na piesku */
}
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__text small {
	margin-top: 4px; font: var(--pi-oko-s); letter-spacing: var(--pi-oko-s-prestrk);
	text-transform: uppercase; color: var(--pi-tlmeny);
}
/* oddeľovač: téma 21 ho skrýva cez display:none a navyše zabíja pozadie
   pravidlom .ox-kroky > * { background: none !important }, preto !important */
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara {
	display: block; flex: 0 0 26px; height: 1px; margin: 0 26px 0 0; padding: 0;
	background: var(--pi-linka) !important;
}

/* --- 2) pieskový podklad = „grain-textured strip" z promptu ----------------
   Bodkový raster je radial-gradient, žiadny obrázok. Nadpis h1 „Pokladňa" je
   mimo kotiev tejto sekcie, preto ostáva ako je. */
html[data-ox-pokladna="piesok"] .ox-pokladna {
	gap: clamp(18px, 2.4vw, 40px);
	padding: clamp(16px, 2.2vw, 34px);
	border-radius: var(--pi-r-doska);
	background-color: var(--pi-piesok);
	background-image: radial-gradient(rgba(27, 27, 27, .05) 1px, transparent 1px);
	background-size: 4px 4px;
	box-shadow: inset 0 0 0 1px var(--pi-linka);
}
/* Pravý stĺpec 372px podľa promptu (ten má 380px). .ox-wrap končí na 1320px,
   takže vetva „širšie nad 1440px" by bola mŕtvy kód a nie je tu.
   1101px, nie 1025px: _zaklad.css r. 739 prepína .ox-pokladna na jeden stĺpec
   a .ox-suhrn na position:static pri max-width:1100px. S hranicou 1025px
   vznikalo okno 1025-1100px s dvoma stĺpcami, ale BEZ lepkavého súhrnu a
   s názvom produktu stlačeným na 48px (odmerané pri 1025px). */
@media (min-width: 1101px) {
	html[data-ox-pokladna="piesok"] .ox-pokladna { grid-template-columns: minmax(0, 1fr) 372px; }
}

/* --- 3) ľavý stĺpec: rytmus a číslovaná hlavička sekcie -------------------- */
html[data-ox-pokladna="piesok"] #ox-krok-obsah { display: grid; gap: clamp(14px, 1.6vw, 20px); align-content: start; }
/* #ox-marketing aj #ox-k1-chyba bývajú prázdne; v mriežke by z nich ostala
   prázdna bunka aj s medzerou (overené: computed display = none) */
html[data-ox-pokladna="piesok"] #ox-krok-obsah > div:empty { display: none; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-krok-nadpis {
	margin: 0 0 2px; gap: 14px; align-items: center;
	font-family: var(--sk-font-nadpis); font-size: clamp(21px, 2.4vw, 32px);
	line-height: 1.25; letter-spacing: .005em; text-transform: uppercase; color: var(--pi-atrament);
}
/* dlaždica s číslom: v základe plná červená s bielym číslom, tu tichšia
   ružová dlaždica (rgba(225,0,26,.10) na piesku = #F0D2C3) s hlbokou
   červenou #A8000F = 5,51:1 (6,18:1 na kréme); plný akcent by tam mal 3,92:1 */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-krok-nadpis .ox-krok__cislo {
	flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
	background: rgba(225, 0, 26, .10); color: var(--pi-cervena-hl);
	font: 700 15px/1 var(--pi-mono); letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(225, 0, 26, .22);
}

/* --- 4) karty: „rounded-2xl sandlt card + hairline border + shadow-soft" --- */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-blok {
	margin: 0; padding: clamp(18px, 2vw, 26px);
	background: var(--pi-karta); border: 1px solid var(--pi-linka);
	border-radius: var(--pi-r-karta); box-shadow: var(--pi-tien-jemny);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah #ox-k1-kosiky { display: grid; gap: clamp(14px, 1.6vw, 20px); }
/* :not(:empty) je povinné - dve ID by inak prebili #ox-krok-obsah > div:empty
   a z prázdneho marketingu by ostala prázdna bunka mriežky aj s medzerou */
html[data-ox-pokladna="piesok"] #ox-krok-obsah #ox-marketing:not(:empty) { display: grid; gap: clamp(14px, 1.6vw, 20px); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-blok > h3 {
	margin: 0 0 14px; font-family: var(--sk-font-nadpis); font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; color: var(--pi-atrament);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik__hlava { gap: 10px; align-items: baseline; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik__hlava span:first-of-type { color: var(--pi-cervena-tm); }
/* aktívna prevádzka: jemne vyzdvihnutá karta (jedna vec, ktorá ťahá oko).
   container-type kvôli tomu, že dlaždica môže byť úzka aj na veľkom monitore
   (napr. pri 1101px má karta obsah 520px, @media by to nechytilo) */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik { container: oxprev / inline-size; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik--aktivna {
	border-color: rgba(225, 0, 26, .30); box-shadow: var(--pi-tien-karta);
}
/* odznak „aktívna" = pilulka dôvery z promptu (biela, vlasový rám, mäkký tieň).
   V základe je to plná červená plocha s bielym textom na hrane kontrastu. */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-odznak {
	padding: 4px 11px; border-radius: 999px; background: var(--pi-pole); color: var(--pi-atrament);
	border: 1px solid var(--pi-linka); box-shadow: var(--pi-tien-jemny);
	font: var(--pi-oko-s); letter-spacing: var(--pi-oko-s-prestrk);
}
/* prázdny košík prevádzky: <p class="ox-text-tlmeny"> dedí --sk-text-tlmeny,
   ktoré je v témach 08 a 11 rgba(27,27,27,.56) = na kréme 3,91:1 (odmerané) */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik > p.ox-text-tlmeny {
	margin: 0; font-size: 14px; color: var(--pi-tlmeny);
}

/* --- 5) riadky košíka: „dark order-summary line item" prenesený na svetlo ---
   Stĺpce drží základ cez !important (varianty.css r. 4836), preto tu meníme
   len vzduch, rámy a typografiu. */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok {
	gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--pi-linka-jemna);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok:last-of-type { border-bottom: 0; padding-bottom: 4px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto {
	width: 64px; height: 64px; border-radius: 14px; background: var(--pi-pole);
	border: 1px solid var(--pi-linka); box-shadow: none;
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-riadok__nazov {
	font-family: var(--sk-font-text); font-size: 15px; font-weight: 600; line-height: 1.35;
	letter-spacing: -.005em; text-transform: none; color: var(--pi-atrament);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-riadok__meta {
	margin-top: 3px; font: var(--pi-oko-s); letter-spacing: var(--pi-oko-s-prestrk);
	text-transform: uppercase; color: var(--pi-tlmeny);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena {
	font-family: var(--sk-font-text); font-size: 16px; font-weight: 700;
	font-variant-numeric: tabular-nums; color: var(--pi-atrament);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-riadok__cena small {
	margin-top: 2px; font: var(--pi-oko-s); letter-spacing: var(--pi-oko-s-prestrk);
	text-transform: uppercase; color: var(--pi-tlmeny);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik__spolu {
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pi-linka);
	font: var(--pi-oko); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pi-tlmeny);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik__spolu b {
	margin-left: 8px; font-family: var(--sk-font-nadpis); font-size: 22px; line-height: 1.25;
	letter-spacing: .01em; color: var(--pi-atrament);
}

/* --- 6) množstvo a kôš: 12px pole namiesto pilulky téma 21 ----------------- */
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-mnozstvo {
	border: 1px solid var(--pi-linka); border-radius: var(--pi-r-pole);
	background: var(--pi-pole); overflow: hidden;
}
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-mnozstvo button { width: 40px; height: 40px; font-size: 17px; color: var(--pi-atrament); }
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-mnozstvo button:hover:not(:disabled),
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-mnozstvo button:focus-visible:not(:disabled) { background: var(--pi-karta); color: var(--pi-cervena-tm); }
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-mnozstvo output {
	display: inline-flex; align-items: center; justify-content: center; align-self: stretch;
	min-width: 40px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pi-atrament);
	border-inline: 1px solid var(--pi-linka-jemna);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-ikonbtn.ox-riadok__zmaz {
	width: 40px; height: 40px; border-radius: 10px; border-color: transparent;
	color: var(--pi-tlmeny); opacity: 1;
}
/* hover-only odozva musí byť aj pri klávesnici (:focus-visible) */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-ikonbtn.ox-riadok__zmaz:hover,
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-ikonbtn.ox-riadok__zmaz:focus-visible {
	background: var(--pi-pole); border-color: var(--pi-linka); color: var(--pi-cervena-tm);
}

/* --- 7) doprava = segmentový prepínač (.seg) z promptu ---------------------
   Voľby sú súrodenci nadpisu, preto rozloženie dostáva celá karta a h3 ide cez
   celý riadok. Flex, nie pevný dvojstĺpec: pri JEDINEJ voľbe dopravy (bežný
   stav) nechal dvojstĺpec polovicu karty prázdnu (odmerané: voľba 390px
   v karte 843px), a repeat(auto-fit, ...) zas pri dvoch voľbách vyrobil na
   1024px tri stĺpce. Zvolený segment: červený rám, teplá výplň
   a vnútorný prstenec. */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-blok:has(.ox-doprava-volba) {
	display: flex; flex-wrap: wrap; gap: 10px;
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-blok:has(.ox-doprava-volba) > h3 { flex: 1 0 100%; margin-bottom: 4px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba {
	flex: 1 1 200px; margin: 0; min-height: 56px; padding: 12px 15px; gap: 11px;
	border: 1px solid var(--pi-linka); border-radius: var(--pi-r-pole);
	background: var(--pi-pole); font-size: 14.5px; color: var(--pi-atrament);
	transition: border-color .18s var(--sk-prechod), background .18s var(--sk-prechod), box-shadow .18s var(--sk-prechod);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba:hover { border-color: rgba(225, 0, 26, .38); }
/* prstenec aj pri tabulátore: rádiový vstup sám má len 2px obrys vo vnútri */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba:focus-within {
	border-color: var(--pi-cervena-tm); box-shadow: 0 0 0 4px rgba(225, 0, 26, .14);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba:has(input:checked) {
	border-color: var(--pi-cervena-tm); background: #FDF0EF; box-shadow: inset 0 0 0 1px rgba(225, 0, 26, .35);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba input { width: 18px; height: 18px; accent-color: var(--pi-cervena-tm); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba b {
	font-family: var(--sk-font-text); font-size: 14px; font-weight: 700;
	font-variant-numeric: tabular-nums; color: var(--pi-cervena-tm);   /* 4,88:1 na #FDF0EF */
}

/* --- 8) polia: „warm soft input" z promptu (biele, 12px, 4px prstenec) -----
   .ox-select je v mriežke: marketingový blok používa <select class="ox-select
   ox-mkt__vyber">, ktorý by inak ostal v základnom 10px/48px poli. */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-kupon__riadok { gap: 10px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-input,
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-select {
	min-height: 50px; padding: 13px 15px; border: 1px solid var(--pi-linka);
	border-radius: var(--pi-r-pole); background: var(--pi-pole); color: var(--pi-atrament); font-size: 15px;
	transition: border-color .18s var(--sk-prechod), box-shadow .18s var(--sk-prechod);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-input::placeholder { color: var(--pi-tlmeny); opacity: 1; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-input:focus,
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-select:focus {
	border-color: var(--pi-cervena-tm); box-shadow: 0 0 0 4px rgba(225, 0, 26, .14);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah #ox-kupon-btn {
	min-height: 50px; padding: 12px 22px; border-width: 1px; border-color: var(--pi-atrament);
	border-radius: var(--pi-r-pole); font-size: 14px; color: var(--pi-atrament);
}
/* základ dáva hoveru background: var(--sk-text) a color: var(--sk-bg) - v téme
   07-fluid by to bola biela na bielej, preto pevné hodnoty (16,2:1) */
html[data-ox-pokladna="piesok"] #ox-krok-obsah #ox-kupon-btn:hover:not(:disabled),
html[data-ox-pokladna="piesok"] #ox-krok-obsah #ox-kupon-btn:focus-visible:not(:disabled) {
	background: var(--pi-atrament); border-color: var(--pi-atrament); color: var(--pi-karta);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-kupon__aktivne { font-size: 13.5px; color: var(--pi-tlmeny); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-kupon__aktivne b { color: var(--pi-atrament); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-kupon__zrus { color: var(--pi-cervena-tm); }

/* --- 9) súhlas: v základe červený prerušovaný rám, tu tichá karta a
   zaškrtávadlo v poli - preklad „same-as-shipping checkbox" z promptu ------- */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-suhlas p { font-size: 13px; line-height: 1.6; color: var(--pi-tlmeny); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-suhlas p a { color: var(--pi-cervena-tm); text-underline-offset: 2px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-suhlas .ox-check {
	margin-top: 14px; padding: 13px 15px; align-items: center; font-size: 14.5px;
	color: var(--pi-atrament);
	background: var(--pi-pole); border: 1px solid var(--pi-linka); border-radius: var(--pi-r-pole);
	transition: border-color .18s var(--sk-prechod), box-shadow .18s var(--sk-prechod);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-suhlas .ox-check:focus-within {
	border-color: var(--pi-cervena-tm); box-shadow: 0 0 0 4px rgba(225, 0, 26, .14);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-suhlas .ox-check input {
	width: 20px; height: 20px; margin: 0; accent-color: var(--pi-cervena-tm);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-povinne { color: var(--pi-cervena-tm); }

/* --- 10) marketingový blok (upsell) ---------------------------------------
   #ox-marketing sa dopĺňa až po načítaní ponuky, takže nesmie ostať v základnom
   vzhľade. .ox-mkt__popis aj .ox-mkt__telo small dedia --sk-text-tlmeny
   (v témach 08 a 11 = 3,91:1 na kréme, odmerané). */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt__popis,
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt__telo small { color: var(--pi-tlmeny); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt__telo b { color: var(--pi-atrament); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt__radok { border-top-color: var(--pi-linka-jemna); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt__obr {
	border-radius: 14px; background: var(--pi-pole); box-shadow: inset 0 0 0 1px var(--pi-linka);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt__vyber { max-width: 260px; font-size: 14px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt .ox-btn--hlavne { background: var(--pi-cervena-tm); color: #fff; border-radius: 999px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt .ox-btn--hlavne:hover:not(:disabled) { background: var(--pi-cervena-hl); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-mkt__menu {
	border-radius: var(--pi-r-pole); border: 1px solid var(--pi-linka); background: var(--pi-pole);
	box-shadow: var(--pi-tien-karta);
}

/* --- 11) varovanie validátora zostavy a chybové hlásenia ------------------
   Biely 11px text v hlave potrebuje 4,5:1; #D60019 dáva 5,42:1, plný akcent
   by bol na 4,98:1 (tesnejšie, než na čom chceme stáť). */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt-box {
	margin-top: 16px; border: 1px solid rgba(225, 0, 26, .35); border-radius: var(--pi-r-karta);
	background: var(--pi-pole); box-shadow: var(--pi-tien-jemny);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt-box__hlava {
	padding: 10px 16px; background: var(--pi-cervena-tm);
	font: var(--pi-oko); letter-spacing: .16em; text-transform: uppercase;
}
/* .ox-bt je v základe celý na !important (varianty.css r. 5634) - inak by
   v karte svietil druhý rám v ráme; .bt-intro má !important na farbe */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt-box .ox-bt {
	padding: 16px !important; border: 0 !important; border-radius: 0 !important; background: none !important;
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt .bt-intro { color: var(--pi-tlmeny) !important; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt .bt-row { border-top-color: var(--pi-linka-jemna); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt .bt-quick-add,
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt button[data-bt-pid] { background: var(--pi-cervena-tm) !important; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt .bt-quick-add:hover { background: var(--pi-cervena-hl) !important; }
/* základná hláška má studenú ružovú #fff2f0; v pieskovom systéme je to teplá
   karta s červenou hranou (#8A0010 na #FDF0EF = 9,04:1) */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-hlaska {
	border-radius: var(--pi-r-pole); font-size: 14px;
	background: var(--pi-pole); border: 1px solid var(--pi-linka);
	border-left: 3px solid var(--pi-linka); box-shadow: var(--pi-tien-jemny);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-hlaska--chyba {
	background: #FDF0EF; border-color: rgba(225, 0, 26, .30); border-left-color: var(--pi-cervena-tm); color: #8A0010;
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-hlaska--ok { border-left-color: #15702A; color: #0a5c2a; }

/* --- 12) platobný pás: „Pay block" z promptu ------------------------------
   Pozn.: position:sticky tu nemá dráhu - .ox-reg-akcie je posledná bunka
   mriežky #ox-krok-obsah, takže je to obyčajná vyvýšená lišta. */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-reg-akcie {
	margin: 4px 0 0; padding: clamp(14px, 1.6vw, 20px);
	background: var(--pi-karta); border: 1px solid var(--pi-linka);
	border-radius: var(--pi-r-karta); box-shadow: var(--pi-tien-karta);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne {
	flex: 1 1 100%; border-radius: 14px; background: var(--pi-cervena-tm); color: #fff;
	font-size: 16px; letter-spacing: .01em; box-shadow: 0 10px 24px -10px rgba(225, 0, 26, .55);
}
/* prompt eskaluje terradk → terraxd na hover; u nás #D60019 → #A8000F (7,90:1) */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne:hover:not(:disabled),
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne:focus-visible:not(:disabled) {
	background: var(--pi-cervena-hl); box-shadow: 0 14px 30px -12px rgba(225, 0, 26, .6);
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-reg-akcie .ox-btn--velke { min-height: 58px; }

/* --- 13) HRDINA PROMPTU: lepkavá atramentová karta súhrnu ------------------
   Jediná tmavá plocha na stránke. Teplo dodáva slabý radiálny nádych, aby
   atrament nebol studený - prompt má ink #2b251d, naša značka #1B1B1B. */
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn {
	padding: clamp(20px, 2.2vw, 28px); border-radius: var(--pi-r-doska); overflow: hidden;
	background-color: var(--pi-atrament);
	background-image: radial-gradient(120% 90% at 18% 0%, rgba(255, 214, 170, .07), transparent 62%);
	color: #fff; box-shadow: 0 1px 2px rgba(27, 27, 27, .3), 0 28px 60px -32px rgba(27, 27, 27, .8);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn > .ox-h3 {
	margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .14);
	font: var(--pi-oko); font-weight: 600; letter-spacing: var(--pi-oko-prestrk);
	text-transform: uppercase; color: rgba(255, 255, 255, .72);        /* 9,4:1 */
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__riadok { padding: 8px 0; font-size: 14px; }
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__riadok > span:last-child {
	font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__riadok--tlmeny {
	font: var(--pi-oko-s); letter-spacing: var(--pi-oko-s-prestrk); line-height: 1.7;
	text-transform: uppercase; color: rgba(255, 255, 255, .66);        /* 8,0:1 */
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__rozpis {
	margin: 12px 0 4px; padding: 10px 14px; border-top: 0; border-radius: var(--pi-r-pole);
	background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__rozpis > b {
	margin-bottom: 6px; font: var(--pi-oko-s); letter-spacing: .18em;
	text-transform: uppercase; color: rgba(255, 255, 255, .66);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__spolu {
	margin-top: 16px; padding-top: 18px; align-items: center; border-top: 1px solid rgba(255, 255, 255, .22);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__spolu > span {
	font: var(--pi-oko); font-weight: 600; letter-spacing: var(--pi-oko-prestrk);
	text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
/* v základe téma 21 dáva sume tmavočervenú - na atramente by mala 2,7:1 */
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__spolu b {
	font-family: var(--sk-font-nadpis); font-size: clamp(30px, 2.8vw, 40px); line-height: 1.25;
	letter-spacing: .01em; color: #fff;
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz {
	margin-top: 18px; padding: 13px 15px; border-radius: var(--pi-r-pole); font-size: 13px;
	background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .92);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz small {
	font: var(--pi-oko-s); letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255, 255, 255, .66);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz__ok { color: #8FE9A8; }   /* 11,8:1 na atramente */
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz__pas { height: 5px; background: rgba(255, 255, 255, .18); }
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz__pas i { background: linear-gradient(90deg, var(--sk-ruz, #FFD9D6), #fff); }
/* pokladňa posiela do suhrnHtml prázdnu akciu, ale jej obal má inline
   margin-top:18px - pod pásom by ostal visieť vzduch */
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn > div[style]:empty { display: none; }

/* --- 14) fokus: piesok je nízkokontrastný papier, prstenec musí byť vidno --
   _zaklad.css r. 100 dáva :focus-visible 3px var(--sk-akcent); tu je to 2px
   tmavšia červená aj na odkazoch a výberoch, nielen na tlačidlách a poliach. */
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-btn:focus-visible,
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-ikonbtn:focus-visible,
html[data-ox-pokladna="piesok"] .ox-pokladna button:focus-visible,
html[data-ox-pokladna="piesok"] .ox-pokladna a:focus-visible,
html[data-ox-pokladna="piesok"] .ox-pokladna select:focus-visible,
html[data-ox-pokladna="piesok"] .ox-pokladna input:focus-visible {
	outline: 2px solid var(--pi-cervena-tm); outline-offset: 2px;
}

/* --- 15) úzka dlaždica prevádzky: riadok do troch pásov --------------------
   Toto NIE JE otázka šírky okna: pri 1101px má karta 566px (obsah 520px),
   pri 1024px 897px (obsah 856px). @media by to nechytilo, preto container
   query nad .ox-prev-kosik.
   Mobilný trojstĺpec základu (varianty.css r. 4842) prehrá s päťstĺpcovým
   !important (r. 4836), takže skladáme riadok rovnakou zbraňou;
   .ox-riadok > * má grid-area: auto !important. */
@container oxprev (max-width: 580px) {
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok {
		grid-template-columns: 52px minmax(0, 1fr) auto !important; gap: 8px 12px;
	}
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { grid-area: 1 / 1 / 3 / 2 !important; align-self: start; width: 52px; height: 52px; border-radius: 12px; }
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__telo { grid-area: 1 / 2 / 2 / 4 !important; }
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__mn { grid-area: 2 / 2 / 3 / 3 !important; margin-inline: 0; justify-self: start; }
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__zmaz { grid-area: 2 / 3 / 3 / 4 !important; }
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { grid-area: 3 / 1 / 4 / 4 !important; text-align: right; }
}

/* --- 16) responzívne: 1440 / 1280 / 1024 / 768 / 390 -----------------------
   Jeden stĺpec pod 1100px rieši _zaklad.css r. 739 (aj position:static pre
   .ox-suhrn), preto tu vlastná vetva nie je - bola by mŕtva. */
@media (max-width: 640px) {
	html[data-ox-pokladna="piesok"] .ox-pokladna { padding: 14px; border-radius: var(--pi-r-karta); }
	html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) { padding-inline: 14px; }
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-blok { padding: 16px 14px; }
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-kupon__riadok .ox-input,
	html[data-ox-pokladna="piesok"] #ox-krok-obsah #ox-kupon-btn { flex: 1 1 100%; }
	html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { margin-right: 18px; }
	html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara { flex-basis: 16px; margin-right: 18px; }
	html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__text small { display: none; }
	html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn { border-radius: var(--pi-r-karta); }
	html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__spolu b { font-size: 30px; }
}

/* --- 17) obmedzený pohyb --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-pokladna="piesok"] .ox-pokladna .ox-btn,
	html[data-ox-pokladna="piesok"] .ox-pokladna .ox-input,
	html[data-ox-pokladna="piesok"] .ox-pokladna .ox-select,
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba,
	html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-suhlas .ox-check,
	html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz__pas i { transition: none; }
}

/* ---- pokladna / brutal: Brutal  (podľa ) ---- */
/* ---- pokladna / brutal: Brutal ---- */
/* --- BRUTAL (pokladna/brutal) -----------------------------------------------
   Návrh vychádza z knižničného promptu superdesign.dev
   „neo-brutalist-food-delivery-checkout" (sd/neo-brutalist-food-delivery-checkout.md).
   Z promptu preberáme jeho jadro doslova: hrubý atramentový rám na KAŽDEJ karte a
   ovládači, tvrdý neroztiahnutý posunutý tieň (3-8 px, plná farba, žiadne rozostrenie),
   TEPLÝ KRÉMOVÝ PODKLAD pod celou pokladňou, jemne tónované bloky, JEDEN akcent,
   dvojtvárne písmo (displejové na nadpisy a sumy, mono verzálky 10-11 px s trackingom
   .14-.2em na technické popisky) a špeciálne komponenty „karta" a „počítadlo množstva".
   Preklad do OXO: purpurová #a091fb -> firemná červená; #1c1714 -> atrament #1B1B1B;
   krémy #fffdfb/#fff6f1 -> --sk-krem #FFF7E6 ako PODKLAD a --sk-biela ako karta;
   broskyňový tón #feebe4 -> --sk-ruz #FFD9D6; modrý tón sme vypustili (OXO je
   jednofarebné). Fraunces -> Anton verzálkami (line-height 1.25 kvôli diakritike),
   Plus Jakarta Sans -> --sk-font-text, mono ostáva mono.
   Zaoblenia z promptu („generous rounded corners") NEPREBERÁME. Pozor, pôvodné
   zdôvodnenie („téma 21 má --sk-r-* = 0") platí IBA pre 21-showroom; živá téma
   21g3-noirg3 má --sk-r-velky:14px / --sk-r-stredny:8px / --sk-r-maly:6px /
   --sk-r-pilulka:2px. Preto tu KAŽDÉ zaoblenie nulujeme výslovne, nie „mlčky".
   PREBÍJAME: zaoblenia a mäkké tiene (.ox-suhrn, .ox-blok, .ox-mnozstvo, .ox-ikonbtn,
   .ox-doprava-volba, .ox-panel, .ox-dz, .ox-mkt__menu, .ox-select, .ox-bt), červenú
   na podkladoch pod bielym textom (všade dávame tmavšiu #9A0012, 8,81:1), nafúknutú
   fotku z témy 21 (clamp(84px,8vw,112px) -> späť 64 px, lebo stĺpec riadku má 64 px)
   a tlmené texty (--sk-text-tlmeny NIE JE konštanta: v 07-fluid je to
   rgba(255,255,255,.66) = 1,00:1 na bielej, v 08/09/11 rgba(27,27,27,.56) = 3,91:1
   na kréme; preto všade pevne #67605A).
   !important je v bloku 18x a LEN tam, kde ho má aj základ (overené grepom v živom CSS):
   4x pozadie v páse krokov, z toho 3x krok a 1x spojnica (téma 21 r. 4148
   `.ox-kroky > * { background: none !important }`),
   2x display riadku položky (raz v @container, raz v záložnom @media; varianty.css
   r. 4836 `display: grid !important`),
   1x transform pri :active (varianty.css r. 5562 `scale(.96) !important`),
   11x hlásenie validátora: 3x .ox-bt (varianty.css r. 5637 dáva rám, zaoblenie aj
   pozadie s !important), 1x .bt-intro (r. 5638) a 7x .bt-quick-add (r. 5639 dáva
   pilulke background/color/border/border-radius/padding/font s !important).
   Nadpis h1.ox-h2 „Pokladňa" NEMENÍME: stojí mimo štyroch povolených kotiev.
   -------------------------------------------------------------------------- */

/* tokeny musia byť viditeľné v oboch podstromoch (kroky sú súrodenec .ox-pokladna) */
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky),
html[data-ox-pokladna="brutal"] .ox-pokladna {
	--ox-br-ink: #1B1B1B;                                   /* atrament = rám aj tieň */
	--ox-br-cerv: var(--sk-akcent, #D60019);                /* jediný akcent, LEN ako plocha bez textu */
	--ox-br-cerv-tm: #9A0012;                               /* biely text na červenej: 8,81:1 */
	--ox-br-zelena: #15702A;                                /* kladný stav: 6,21:1 na bielej */
	--ox-br-tlm: #67605A;                                   /* tlmený text: 6,18:1 na bielej, 5,80:1 na kréme, 4,75:1 na ruži */
	--ox-br-bod: rgba(27, 27, 27, .25);                     /* bodkované deliace linky (dekor, nie text) */
	--ox-br-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
	--ox-br-ram: 2px solid var(--ox-br-ink);
	--ox-br-tien: 5px 5px 0 var(--ox-br-ink);
	--ox-br-tien-maly: 3px 3px 0 var(--ox-br-ink);
	--ox-br-tien-cerv: 6px 6px 0 var(--ox-br-cerv);
	--ox-br-krivka: var(--sk-prechod, cubic-bezier(.16, 1, .3, 1));
}

/* ── kroky: z promptu „outlined pills" s rámom a tvrdým tieňom ─────────────── */
/* kroky a .ox-pokladna spolu tvoria JEDEN krémový hárok (prompt: „warm cream ground"),
   preto má pás krokov spodné odsadenie a mriežka pokladne žiadne horné. */
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) {
	gap: 10px; align-items: stretch; flex-wrap: wrap;
	margin-bottom: 0; border-bottom: 0;
	padding: clamp(14px, 1.8vw, 24px) clamp(14px, 2vw, 28px);
	background: var(--sk-krem, #FFF7E6);
}
/* téma 21 (r. 4152) spojnicu SKRÝVA a r. 4148 jej berie pozadie cez !important;
   bez oboch opráv je toto pravidlo mŕtve. Nuluje sa aj padding/margin z `.ox-kroky > *`. */
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara {
	display: block; flex: 0 0 16px; align-self: center; height: 3px;
	margin: 0; padding: 0; background: var(--ox-br-ink) !important;
}
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok {
	margin-right: 0; padding: 9px 15px; border: var(--ox-br-ram); border-radius: 0;
	background: var(--sk-biela, #fff) !important;                /* téma 21: .ox-kroky > * má background: none !important */
	color: var(--ox-br-ink); box-shadow: var(--ox-br-tien-maly);
	font-family: var(--ox-br-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
/* téma 21 kreslí aktívnemu kroku červené podčiarknutie cez ::after, tu ho nahradil rám */
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok::after,
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara::after { display: none; }
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--hotovy { background: var(--sk-krem, #FFF7E6) !important; color: var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny { background: var(--ox-br-cerv-tm) !important; color: #fff; box-shadow: var(--ox-br-tien-cerv); }
/* čísla ako technický kód 01/02/03; hotový krok má v markupe ✓, ten nenulujeme */
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__cislo {
	width: auto; height: auto; min-width: 0; margin-right: 0; border-radius: 0; background: none; color: inherit;
	font-family: var(--ox-br-mono); font-size: 12px; font-weight: 700;
}
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-krok:not(.ox-krok--hotovy) .ox-krok__cislo::before { content: '0'; }
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__text small { font-family: var(--ox-br-mono); font-size: 10px; letter-spacing: .1em; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-krok--aktivny .ox-krok__text small { color: var(--sk-ruz, #FFD9D6); }   /* 6,78:1 na #9A0012 */

/* ── rozloženie: krémový hárok, jednotný rytmus, prázdne kontajnery nekreslia medzeru ── */
html[data-ox-pokladna="brutal"] .ox-pokladna {
	gap: clamp(20px, 2.6vw, 40px); align-items: start;
	padding: 0 clamp(14px, 2vw, 28px) clamp(18px, 2.2vw, 30px);
	background: var(--sk-krem, #FFF7E6);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah { display: grid; gap: clamp(18px, 2.2vw, 28px); align-content: start; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah > * { min-width: 0; margin-bottom: 0; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-k1-kosiky,
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing { display: grid; gap: clamp(18px, 2.2vw, 28px); }
/* MUSÍ byť až za pravidlom vyššie: `#ox-krok-obsah #ox-marketing` má 2 id-čka a bez
   tohto poradia by prázdny upsell prebil `> div:empty` a nechal v mriežke dieru. */
html[data-ox-pokladna="brutal"] #ox-krok-obsah > div:empty,
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing:empty { display: none; }

/* nadpis kroku: Anton verzálky a hrubá linka namiesto kruhu s číslom */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-krok-nadpis {
	margin: 0; padding-bottom: 12px; border-bottom: 3px solid var(--ox-br-ink); align-items: center; gap: 12px;
	font-family: var(--sk-font-nadpis); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25;
	letter-spacing: .01em; text-transform: uppercase; color: var(--ox-br-ink);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-krok-nadpis .ox-krok__cislo {
	display: inline-flex; align-items: center;                   /* základ má inline-grid, ten by postavil „0" NAD číslo */
	width: auto; height: auto; margin-right: 0; padding: 4px 9px; border: var(--ox-br-ram); border-radius: 0;
	background: var(--ox-br-cerv-tm); color: #fff; box-shadow: var(--ox-br-tien-maly);
	font-family: var(--ox-br-mono); font-size: 13px; font-weight: 700;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-krok-nadpis .ox-krok__cislo::before { content: '0'; }

/* ── z promptu: „Neo-brutalist card" - rám + tvrdý tieň na KAŽDOM bloku ───── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah > .ox-blok,
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-k1-kosiky > .ox-prev-kosik,
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing > .ox-mkt {
	margin: 0; padding: clamp(16px, 2vw, 24px); border: var(--ox-br-ram); border-radius: 0;
	background: var(--sk-biela, #fff); box-shadow: var(--ox-br-tien);
}
/* dlaždice sú vlastné dotazovacie kontajnery: pri dvoch stĺpcoch je dlaždica úzka aj
   na 1100-1200 px, kde žiadne @media nezaberie (šírka okna != šírka dlaždice). */
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-k1-kosiky > .ox-prev-kosik,
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing > .ox-mkt {
	container-type: inline-size; container-name: ox-br-dlazdica;
}
/* tónované bloky z promptu (broskyňa -> ruž); na krémovom podklade je krém neviditeľný,
   preto kupón aj súhlas sedia na bielej a odlišujú sa rámom. */
html[data-ox-pokladna="brutal"] #ox-krok-obsah > .ox-blok:not(.ox-kupon):not(.ox-suhlas) { background: var(--sk-ruz, #FFD9D6); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah > .ox-blok.ox-kupon { background: var(--sk-biela, #fff); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah > .ox-blok.ox-suhlas { background: var(--sk-biela, #fff); border: 2px dashed var(--ox-br-ink); box-shadow: var(--ox-br-tien-maly); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-k1-kosiky > .ox-prev-kosik--aktivna { box-shadow: var(--ox-br-tien-cerv); }

/* nadpisy blokov = mono štítky z promptu („DELIVER TO", „SHIPPING METHOD") */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-blok > h3 {
	margin: 0 0 14px; font-family: var(--ox-br-mono); font-size: 11px; font-weight: 700;
	line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--ox-br-ink);
}
/* hlavička prevádzky: mono štítok „Prevádzka:" + veľký názov v Antone.
   Musí byť špecifickejšia než pravidlo .ox-blok > h3 vyššie, preto h3.trieda. */
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-k1-kosiky .ox-prev-kosik > h3.ox-prev-kosik__hlava {
	margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px dashed var(--ox-br-bod);
	align-items: baseline; font-family: var(--ox-br-mono); font-size: 10.5px; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase; color: var(--ox-br-tlm);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-k1-kosiky .ox-prev-kosik__hlava > span:first-of-type {
	min-width: 0; overflow-wrap: anywhere;                       /* dlhý názov prevádzky nesmie vytiecť z dlaždice */
	font-family: var(--sk-font-nadpis); font-size: clamp(19px, 1.9vw, 26px); line-height: 1.25;
	letter-spacing: .01em; text-transform: uppercase; color: var(--ox-br-ink);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-k1-kosiky .ox-prev-kosik__hlava .ox-odznak {
	padding: 4px 9px; border: var(--ox-br-ram); border-radius: 0;
	background: var(--ox-br-cerv-tm); color: #fff;
	font-family: var(--ox-br-mono); font-size: 10px; letter-spacing: .16em;
}

/* ── riadok položky: mriežku NEMENÍME (základ ju má s !important) ─────────── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok { padding: 14px 0; border-bottom: 2px dotted var(--ox-br-bod); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok:has(+ .ox-prev-kosik__spolu) { border-bottom: 0; }
/* téma 21 nafukuje fotku na clamp(84px, 8vw, 112px), no stĺpec má 64 px */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto {
	width: 64px; height: 64px; border: var(--ox-br-ram); border-radius: 0;
	background: var(--sk-krem, #FFF7E6); box-shadow: var(--ox-br-tien-maly);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-riadok__nazov {
	margin: 0; overflow-wrap: anywhere;
	font-family: var(--sk-font-nadpis); font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; color: var(--ox-br-ink);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-riadok__meta { font-family: var(--ox-br-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena {
	font-family: var(--sk-font-nadpis); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.15;
	font-weight: 400; letter-spacing: .01em; color: var(--ox-br-cerv-tm);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-riadok__cena small { font-family: var(--ox-br-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ox-br-tlm); }

/* z promptu: „Quantity stepper" - obrysová pilulka; u nás pravouhlá, s tvrdým tieňom */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mnozstvo { border: var(--ox-br-ram); border-radius: 0; background: var(--sk-biela, #fff); box-shadow: var(--ox-br-tien-maly); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mnozstvo button { width: 32px; height: 32px; font-size: 16px; font-weight: 800; color: var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mnozstvo button:hover:not(:disabled) { background: var(--ox-br-ink); color: #fff; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mnozstvo output {
	display: inline-grid; place-items: center; min-width: 36px; height: 32px;
	border-inline: 2px solid var(--ox-br-ink); font-family: var(--ox-br-mono);
	font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-riadok__zmaz {
	width: 32px; height: 32px; border: var(--ox-br-ram); border-radius: 0;
	background: var(--sk-biela, #fff); color: var(--ox-br-ink); opacity: 1;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-riadok__zmaz:hover { background: var(--ox-br-cerv-tm); border-color: var(--ox-br-ink); color: #fff; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-riadok__zmaz svg { width: 15px; height: 15px; }

/* medzisúčet prevádzky: mono štítok + veľké číslo v Antone (rytmus značky) */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik__spolu {
	display: flex; justify-content: flex-end; align-items: baseline; gap: 10px;
	margin-top: 14px; padding-top: 12px; border-top: 3px solid var(--ox-br-ink);
	font-family: var(--ox-br-mono); font-size: 10.5px; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase; color: var(--ox-br-tlm);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik__spolu b {
	font-family: var(--sk-font-nadpis); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15;
	font-weight: 400; letter-spacing: .01em; color: var(--ox-br-cerv-tm);
}

/* ── varovanie validátora zostavy ──────────────────────────────────────────
   Základ má na .ox-bt a .bt-quick-add !important (varianty.css r. 5637-5639),
   preto sa rám, zaoblenie a pilulka inak prebiť NEDAJÚ. */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt-box { border: var(--ox-br-ram); border-radius: 0; box-shadow: var(--ox-br-tien-maly); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt-box .ox-bt { border: 0 !important; border-radius: 0 !important; background: var(--sk-biela, #fff) !important; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt-box__hlava { padding: 8px 12px; background: var(--ox-br-cerv-tm); font-family: var(--ox-br-mono); font-size: 11px; letter-spacing: .16em; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-intro { color: var(--ox-br-tlm) !important; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-head,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-unit,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-row-need,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-details-body { color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-row { border-top-color: var(--ox-br-bod); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-notice-icon { border: var(--ox-br-ram); border-radius: 0; background: var(--sk-ruz, #FFD9D6); color: var(--ox-br-cerv-tm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-notice-title { color: var(--ox-br-cerv-tm); }
/* pôvodné odznaky mali 4,36:1 (bad) a 3,61:1 (ok) - pod prahom; biela plocha + rám to dvíha na 8,81 a 6,21 */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-status {
	border: var(--ox-br-ram); border-radius: 0; background: var(--sk-biela, #fff);
	font-family: var(--ox-br-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-status-bad { color: var(--ox-br-cerv-tm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-status-ok { color: var(--ox-br-zelena); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-ico-bad { color: var(--ox-br-cerv-tm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-ico-ok { color: var(--ox-br-zelena); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-quick-add,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt button[data-bt-pid] {
	border: var(--ox-br-ram) !important; border-radius: 0 !important;
	background: var(--ox-br-cerv-tm) !important; color: #fff !important;
	padding: 8px 14px !important; font: 700 11px/1.2 var(--ox-br-mono) !important;
	letter-spacing: .14em; box-shadow: var(--ox-br-tien-maly);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-quick-add:hover:not(:disabled) { background: var(--ox-br-ink) !important; transform: none; }

/* ── doprava a platba: obrysové karty, vybraná dostane červený tieň ───────── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba {
	margin-bottom: 10px; padding: 12px 14px; border: var(--ox-br-ram); border-radius: 0;
	background: var(--sk-biela, #fff); box-shadow: var(--ox-br-tien-maly);
	transition: transform .16s var(--ox-br-krivka), box-shadow .16s var(--ox-br-krivka);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba:last-of-type { margin-bottom: 0; }
/* zdvih nesmie byť len na myš: klávesnica dostane to isté aj s viditeľným prstencom */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba:hover,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba:focus-within { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba:focus-within { outline: 3px solid var(--ox-br-cerv); outline-offset: 3px; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba:has(input:checked) { background: var(--sk-krem, #FFF7E6); border-color: var(--ox-br-ink); box-shadow: var(--ox-br-tien-cerv); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba input { accent-color: var(--ox-br-cerv); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba > span { font-weight: 700; font-size: 14.5px; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba > b {
	font-family: var(--sk-font-nadpis); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.2;
	font-weight: 400; letter-spacing: .01em; color: var(--ox-br-cerv-tm);
}
/* pri platbe je <b> vnorené v <span>, základ mu dáva displejové písmo a akcent */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-platba-volba > span b { font-family: var(--sk-font-text); font-size: 14.5px; color: var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-platba-volba > span small { display: block; margin-top: 3px; font-family: var(--ox-br-mono); font-size: 11px; letter-spacing: .08em; color: var(--ox-br-tlm); }

/* ── z promptu: „Add promo code" ako jeden rám, tlačidlo nalepené sprava ──── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__riadok { gap: 0; flex-wrap: nowrap; border: var(--ox-br-ram); background: var(--sk-biela, #fff); box-shadow: var(--ox-br-tien-maly); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__riadok .ox-input {
	flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: transparent;
	font-family: var(--ox-br-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__riadok .ox-input:focus { box-shadow: none; outline: 2px solid var(--ox-br-cerv); outline-offset: -2px; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__riadok .ox-btn {
	flex: 0 0 auto; border: 0; border-left: 2px solid var(--ox-br-ink); border-radius: 0;
	background: var(--ox-br-ink); color: #fff; box-shadow: none;
	font-family: var(--ox-br-mono); font-size: 11px; letter-spacing: .16em;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__riadok .ox-btn:hover:not(:disabled) { background: var(--ox-br-cerv-tm); color: #fff; transform: none; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__aktivne { font-family: var(--ox-br-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__aktivne b { color: var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__zrus { color: var(--ox-br-cerv-tm); }

/* ── súhlas, hlásenia, tlmené texty ───────────────────────────────────────── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-suhlas p { font-size: 13px; line-height: 1.55; }
/* --sk-text-tlmeny je v 07-fluid rgba(255,255,255,.66) = 1,00:1 na bielej karte,
   v 08/09/11 rgba(27,27,27,.56) = 3,91-4,00:1. Preto pevná hodnota. */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-text-tlmeny,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__popis,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__telo small,
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-text-tlmeny { color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-suhlas .ox-check { margin-top: 12px; font-family: var(--ox-br-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-check input { accent-color: var(--ox-br-cerv); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-check a,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-suhlas a,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-povinne { color: var(--ox-br-cerv-tm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-hlaska { border: var(--ox-br-ram); border-left-width: 8px; border-radius: 0; background: var(--sk-krem, #FFF7E6); font-size: 13.5px; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-hlaska--chyba { border-left-color: var(--ox-br-cerv); background: #FFF1EE; color: #8A0010; }   /* 9,13:1 */

/* ── panely krokov 2 a 3 ──────────────────────────────────────────────────── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mriezka--2 { gap: clamp(14px, 1.6vw, 20px); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-panel { border: var(--ox-br-ram); border-radius: 0; background: var(--sk-biela, #fff); box-shadow: var(--ox-br-tien-maly); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-panel > .ox-h3 { margin: 0 0 12px; font-family: var(--ox-br-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-sum-row,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-sum-prev { border-bottom: 1px dotted var(--ox-br-bod); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-sum-row > span { font-family: var(--ox-br-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-sum-row > b { font-family: var(--ox-br-mono); font-weight: 700; color: var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-sum-prev > b { font-family: var(--sk-font-nadpis); font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: .01em; text-transform: uppercase; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-sum-prev small { font-family: var(--ox-br-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ox-br-tlm); }

/* ── upsell „Dobrá rada / Marketing zadarmo": rám aj na ponuke a rozbaľovačke ── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__obr { border: var(--ox-br-ram); border-radius: 0; background: var(--sk-krem, #FFF7E6); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__radok { border-top: 2px dotted var(--ox-br-bod); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__telo b { font-family: var(--sk-font-nadpis); font-size: 15px; line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-select {
	border: var(--ox-br-ram); border-radius: 0; background: var(--sk-biela, #fff);
	box-shadow: var(--ox-br-tien-maly); font-family: var(--ox-br-mono); font-size: 12.5px;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-select:focus { box-shadow: var(--ox-br-tien-maly); outline: 2px solid var(--ox-br-cerv); outline-offset: -2px; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__dd .ox-btn {
	border: var(--ox-br-ram); border-radius: 0; background: var(--ox-br-cerv-tm); color: #fff;
	box-shadow: var(--ox-br-tien-maly); font-family: var(--ox-br-mono); font-size: 11px; letter-spacing: .12em;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__dd .ox-btn:hover:not(:disabled) { background: var(--ox-br-ink); transform: none; box-shadow: var(--ox-br-tien-maly); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__menu { border: var(--ox-br-ram); border-radius: 0; box-shadow: var(--ox-br-tien); background: var(--sk-biela, #fff); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__menu button { font-family: var(--ox-br-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__menu button + button { border-top: 2px solid var(--ox-br-bod); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__menu button:hover { background: var(--ox-br-ink); color: #fff; }

/* ── z promptu: „Pay CTA" - plné tlačidlo s rámom a tvrdým tieňom ─────────── */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie { margin: 0; gap: 12px; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne {
	flex: 1 1 280px; min-height: 62px; border: var(--ox-br-ram); border-radius: 0;
	background: var(--ox-br-cerv-tm); color: #fff; box-shadow: var(--ox-br-tien-cerv);
	font-family: var(--sk-font-nadpis); font-size: clamp(16px, 1.5vw, 20px); font-weight: 400;
	line-height: 1.25; letter-spacing: .03em; text-transform: uppercase;
	transition: transform .14s var(--ox-br-krivka), box-shadow .14s var(--ox-br-krivka), background .14s var(--ox-br-krivka);
}
/* šípka z promptu („Proceed to pay ->") je nakreslená, nie znak: nepribudne do
   prístupného názvu tlačidla. :not() chráni vreteno .ox-btn--nacitava, ktoré
   kreslí svoj spinner tiež cez ::after. */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne:not(.ox-btn--nacitava)::after {
	content: ''; flex: 0 0 auto; width: .46em; height: .46em; margin-left: 2px;
	border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg);
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne:hover:not(:disabled) { transform: translate(-3px, -3px); background: var(--ox-br-ink); box-shadow: 9px 9px 0 var(--ox-br-cerv); }
/* základ má na :active scale(.96) s !important (varianty.css r. 5562), inak je reset mŕtvy */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn:active:not(:disabled) { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 var(--ox-br-cerv); }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn--tiche {
	border: var(--ox-br-ram); border-radius: 0; background: var(--sk-biela, #fff); color: var(--ox-br-ink);
	box-shadow: var(--ox-br-tien-maly); font-family: var(--ox-br-mono); font-size: 12px; letter-spacing: .14em;
}
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn--tiche:hover:not(:disabled) { transform: translate(-2px, -2px); background: var(--ox-br-ink); color: #fff; box-shadow: 5px 5px 0 var(--ox-br-ink); }
/* viditeľné zameranie klávesnicou na VŠETKÝCH ovládačoch v pokladni */
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-btn:focus-visible,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mnozstvo button:focus-visible,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-ikonbtn:focus-visible,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-check input:focus-visible,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-select:focus-visible,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mkt__menu button:focus-visible,
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-quick-add:focus-visible,
html[data-ox-pokladna="brutal"] #ox-krok-obsah a:focus-visible { outline: 3px solid var(--ox-br-cerv); outline-offset: 3px; }

/* ── z promptu: „Order summary" - rámovaná karta, Spolu je to jediné, čo ťahá oko ── */
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn {
	padding: clamp(18px, 2.2vw, 28px); border: 3px solid var(--ox-br-ink); border-radius: 0;
	background: var(--sk-biela, #fff); box-shadow: 8px 8px 0 var(--ox-br-cerv);
}
/* prázdny obal na akciu (suhrnHtml dostáva akcia = '') by pridal 18 px hluchého miesta */
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn > div:empty { display: none; }
/* jediný výskyt firemnej tmavočervenej dosky; tmavý závoj drží biely text nad 8:1,
   background-color je zároveň záložka, keby --ox-doska-cervena nebola definovaná */
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn > .ox-h3 {
	margin: calc(-1 * clamp(18px, 2.2vw, 28px)) calc(-1 * clamp(18px, 2.2vw, 28px)) 18px;
	padding: 11px clamp(18px, 2.2vw, 28px); color: #fff;
	background-color: #7A000E;
	background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), var(--ox-doska-cervena, none);
	font-family: var(--sk-font-nadpis); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.25;
	letter-spacing: .06em; text-transform: uppercase;
}
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__riadok { padding: 8px 0; border-bottom: 1px dotted var(--ox-br-bod); font-size: 13px; }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__riadok--tlmeny { font-family: var(--ox-br-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__riadok > span + span { font-family: var(--ox-br-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__rozpis { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__rozpis > b { display: block; margin-bottom: 4px; font-family: var(--ox-br-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__spolu {
	margin-top: 16px; padding: 12px 14px; border: var(--ox-br-ram); align-items: baseline;
	background: var(--sk-krem, #FFF7E6); box-shadow: var(--ox-br-tien-maly);
}
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__spolu > span { font-family: var(--ox-br-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ox-br-tlm); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn__spolu > b {
	font-family: var(--sk-font-nadpis); font-size: clamp(28px, 3vw, 42px); line-height: 1.15;
	font-weight: 400; letter-spacing: .01em; color: var(--ox-br-cerv-tm);
}
/* pás dopravy zadarmo: základ mu dáva display:grid, preto poistka na [hidden] */
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-dz { margin-top: 14px; padding: 10px 12px; border: var(--ox-br-ram); border-radius: 0; background: var(--sk-biela, #fff); font-family: var(--ox-br-mono); font-size: 11px; letter-spacing: .04em; }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-dz[hidden] { display: none; }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-dz b { color: var(--ox-br-ink); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-dz b.ox-dz__ok { color: var(--ox-br-zelena); }        /* 6,21:1 na bielej */
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-dz__pas { height: 8px; border: 2px solid var(--ox-br-ink); border-radius: 0; background: var(--sk-krem, #FFF7E6); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-dz__pas i { border-radius: 0; background: var(--ox-br-cerv); }
html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-dz small { font-size: 10.5px; color: var(--ox-br-tlm); }

/* ── úzka dlaždica: rozhoduje šírka KARTY, nie okna ─────────────────────────
   Pri dvoch stĺpcoch má dlaždica ~560 px už na 1101 px okna, kam @media nedosiahne;
   naopak na 640 px okna má ~553 px, takže tento prah pokryje aj mobil. */
@container ox-br-dlazdica (max-width: 560px) {
	/* Základ má `display: grid !important` aj `grid-template-columns: … !important`
	   (varianty.css r. 4836) a `> * { grid-area: auto !important }`, takže mriežku
	   inak prebiť nedá. Prepíname na flex - tam je umiestňovanie voľné a `order` platí. */
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { flex: 0 0 56px; width: 56px; height: 56px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__telo { flex: 1 1 150px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__mn { order: 3; flex: 0 0 auto; margin-inline: 0; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__zmaz { order: 4; flex: 0 0 auto; width: 40px; height: 40px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { order: 5; flex: 1 1 auto; text-align: right; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-mnozstvo button { width: 40px; height: 40px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-mnozstvo output { min-width: 40px; height: 40px; }
}
/* upsell a validátor: pri úzkej karte je viacstĺpcová mriežka nečitateľná (výber sa
   zmrští na ~55 px, text validátora na jedno slovo na riadok). Ovládač ide pod text. */
@container ox-br-dlazdica (max-width: 470px) {
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__radok { grid-template-columns: 48px minmax(0, 1fr); }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__obr { width: 48px; height: 48px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__dd,
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__mn { grid-column: 2; justify-self: start; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__vyber { max-width: 100%; }
	/* varianty.css r. 5638 dáva .bt-row `minmax(0,1fr) auto`; tlačidlo „Pridať N ks"
	   tam zožerie celý druhý stĺpec a na text zostane ~60 px. grid-template-columns
	   tam !important nemá, takže sa prebiť dá. */
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-row { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-row-action { padding-left: 0; }
}

/* ── užšie obrazovky: tenšie tiene, aby nepretiekli cez 18 px okraj .ox-wrap ── */
@media (max-width: 760px) {
	html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky),
	html[data-ox-pokladna="brutal"] .ox-pokladna {
		--ox-br-tien: 4px 4px 0 var(--ox-br-ink);
		--ox-br-tien-cerv: 4px 4px 0 var(--ox-br-cerv);
	}
	html[data-ox-pokladna="brutal"] #ox-pokladna-suhrn .ox-suhrn { box-shadow: 5px 5px 0 var(--ox-br-cerv); }
	html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { padding: 8px 12px; font-size: 10.5px; letter-spacing: .1em; }
	html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara { flex-basis: 8px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-kupon__riadok .ox-btn { padding-inline: 14px; letter-spacing: .08em; }
	/* NIE column-reverse: „Späť" je v DOM prvé, obrátený stĺpec by rozišiel zrakové
	   poradie s poradím tabulátora (na šírke je Späť tiež vľavo, teda prvé). */
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie { flex-direction: column; align-items: stretch; }
	/* v stĺpcovom flexe by flex-basis 280px platil na VÝŠKU a tlačidlo by narástlo na blok */
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn { flex: 0 0 auto; width: 100%; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mriezka--2 { grid-template-columns: 1fr; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne:hover:not(:disabled) { transform: none; box-shadow: var(--ox-br-tien-cerv); }
}

/* ── záchranná sieť pre prehliadače bez @container (Safari < 16) ────────────
   Bez nej by na 640 px zostala 5-stĺpcová mriežka z varianty.css r. 4836 a
   r. 4842 by jej do 3. stĺpca vrazila „zmaž" aj cenu = prekryv a pretok. */
@media (max-width: 640px) {
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__foto { flex: 0 0 56px; width: 56px; height: 56px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__telo { flex: 1 1 150px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__mn { order: 3; flex: 0 0 auto; margin-inline: 0; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__zmaz { order: 4; flex: 0 0 auto; width: 40px; height: 40px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-riadok__cena { order: 5; flex: 1 1 auto; text-align: right; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-mnozstvo button { width: 40px; height: 40px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-mnozstvo output { min-width: 40px; height: 40px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__radok { grid-template-columns: 48px minmax(0, 1fr); }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__obr { width: 48px; height: 48px; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__dd,
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__mn { grid-column: 2; justify-self: start; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah #ox-marketing .ox-mkt__vyber { max-width: 100%; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-row { grid-template-columns: minmax(0, 1fr); }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-bt .bt-row-action { padding-left: 0; }
	/* kroky ako stĺpec plných pásov, spojnice medzi nimi strácajú zmysel */
	html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { flex: 1 1 100%; }
	html[data-ox-pokladna="brutal"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara { display: none; }
}

/* ── pohyb je len na ukážku hĺbky, pri obmedzenom pohybe ho vypíname ──────── */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba,
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn { transition: none; }
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba:hover,
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-doprava-volba:focus-within,
	html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-reg-akcie .ox-btn:hover:not(:disabled) { transform: none; }
}

/* =============================================================================
   125) VALIDÁTOR ZOSTAVY - výber príchute (Peter 19. 9. 2026: „toto je rozbité“).
   Plugin posiela pri sirupoch a bobuliach rozbaľovací výber s tlačidlom, ale svoje
   štýly si so sebou neberie - v SPA ich musíme dodať my. Bez nich sedel select
   v jednom riadku s textom a tlačil ho na šírku jedného znaku.
   ========================================================================== */
.ox-bt .bt-row-main { flex-wrap: wrap; row-gap: 6px; }
.ox-bt .bt-row-text { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ox-bt .bt-row-title, .ox-bt .bt-row-need { overflow-wrap: anywhere; }
.ox-bt .bt-status { flex: 0 0 auto; margin-left: auto; }

.ox-bt .bt-flavour-picker { display: grid; gap: 8px; }
.ox-bt .bt-flavour-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ox-bt .bt-flavour-select {
	flex: 1 1 200px; min-width: 0; max-width: 100%;
	appearance: none;
	padding: 9px 34px 9px 12px;
	border: 1.5px solid rgba(27, 27, 27, .18); border-radius: 10px;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B1B1B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 11px 8px;
	font: 400 13.5px/1.2 var(--sk-font-text); color: var(--sk-text);
	cursor: pointer;
}
.ox-bt .bt-flavour-select:focus-visible { outline: 2px solid var(--sk-akcent); outline-offset: 2px; border-color: var(--sk-akcent); }
.ox-bt .bt-flavour-row .bt-quick-add { flex: 0 0 auto; }
.ox-bt .bt-quick-add:disabled { opacity: .45; }
@media (max-width: 560px) {
	.ox-bt .bt-flavour-select { flex: 1 1 100%; }
	.ox-bt .bt-flavour-row .bt-quick-add { flex: 1 1 100%; justify-content: center; }
}

/* =============================================================================
   126) POKLADŇA „Piesok" -> ČERVENO-BIELA (Peter 19. 9. 2026: „tento celý návrh
   prerob do našich červených farieb, červeno biele, tá nová tmavšia červená").
   Mení sa LEN paleta, rozloženie a rytmus varianty ostávajú. Pieskové plochy idú
   na bielu s jemným červeným nádychom, jediná tmavá doska (súhrn) je tmavá
   červená. Blok musí ostať ZA blokom 124, inak ho pôvodná paleta prebije.
   ⚠️ Biely text na čistej #D60019 má len 3,94:1, preto doska končí až na #7E000F.
   ========================================================================== */
html[data-ox-pokladna="piesok"] .ox-pokladna,
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) {
	--pi-piesok:      #FFF3F4;                 /* strana: biela s červeným nádychom */
	--pi-karta:       #ffffff;
	--pi-pole:        #ffffff;
	--pi-linka:       rgba(176, 0, 21, .20);
	--pi-linka-jemna: rgba(176, 0, 21, .11);
	--pi-tlmeny:      #6B5B5C;                 /* 5,93:1 na #FFF3F4, 6,54:1 na bielej */
	--pi-cervena-tm:  #B00015;                 /* biely text 7,52:1 */
	--pi-cervena-hl:  #96000F;                 /* 8,76:1 na bielej */
	--pi-tien-jemny:  0 1px 2px rgba(176, 0, 21, .06), 0 6px 16px -12px rgba(176, 0, 21, .22);
	--pi-tien-karta:  0 1px 2px rgba(176, 0, 21, .06), 0 18px 40px -28px rgba(176, 0, 21, .34);
}
/* aktívny krok: plná tmavá červená namiesto atramentu */
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny { color: #B00015; }
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny .ox-krok__cislo {
	background: #B00015; color: #fff; border-color: #B00015;
}
/* číslo kroku v nadpise sekcie */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-krok-nadpis .ox-krok__cislo {
	background: #B00015; color: #fff; border-color: #B00015;
}
/* jediná tmavá doska = súhrn. Prechod končí na #7E000F, aby biely text držal normu */
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn {
	background-color: #96000F;
	background-image: linear-gradient(186deg, #B00015 0%, #96000F 62%, #7E000F 100%),
		radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .10), transparent 62%);
	box-shadow: 0 1px 2px rgba(126, 0, 15, .3), 0 28px 60px -32px rgba(126, 0, 15, .8);
}
/* „Máte dopravu zadarmo": zelená by na červenej mala 2,1:1, svetlá mäta má 10,4:1 */
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz__ok { color: #C9F7D2; }
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz__pas i { background: #fff; }
/* hlavné tlačidlo na doske: biele s červeným písmom = najsilnejší kontrast (7,5:1) */
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-btn--hlavne {
	background: #fff; color: #96000F; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55);
}
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-btn--hlavne:hover { background: #FFF3F4; color: #7E000F; }
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-btn--hlavne:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =============================================================================
   127) PRIHLÁSENIE v rovnakom šate ako registrácia (Peter 19. 9. 2026: „na rovnaký
   dizajn prerob aj prihlásenie"). Preberá dosku z návrhu registrácie „Červená
   doska", ktorý je od 19. 9. predvolený. Platí bezpodmienečne na trase
   /prihlasenie - [data-trasa] na #ox-obsah nasadzuje app.js, takže mimo tejto
   trasy sa pravidlá nemajú čoho chytiť.
   ⚠️ Biely text drží kontrast len preto, že doska má navrch tmavý závoj; bez neho
   má biela na čistej #D60019 iba 3,94:1.
   ========================================================================== */
#ox-obsah[data-trasa="prihlasenie"] #ox-login {
	--ox-log-zavoj: linear-gradient(180deg, rgba(24, 0, 5, .34), rgba(24, 0, 5, .52));
	--ox-log-doska: radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .34), transparent 62%),
		linear-gradient(160deg, var(--sk-akcent, #D60019) 0%, #7A000E 46%, #3A0008 76%, #5C000B 100%);
	background: var(--ox-log-zavoj), var(--ox-log-doska);
	padding: clamp(22px, 3.4vw, 34px);
	border-radius: var(--sk-r-velky, 20px);
	box-shadow: 0 1px 2px rgba(58, 0, 8, .3), 0 30px 64px -34px rgba(58, 0, 8, .8);
}
html[data-tema^="21"] #ox-obsah[data-trasa="prihlasenie"] #ox-login {
	background: var(--ox-log-zavoj), var(--ox-doska-cervena);
}
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-label { color: #fff; letter-spacing: .05em; text-transform: uppercase; }
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-label span { color: #FFC2C6; }
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-input {
	background: #fff; color: var(--sk-text, #1B1B1B); border-color: transparent;
	box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .8);
}
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-input:focus {
	border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .34);
}
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-check { color: #fff; }
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-check input { accent-color: #fff; }
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-btn--hlavne {
	background: #fff; color: var(--sk-akcent-tmavy, #B00015);
}
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-btn--hlavne:hover:not(:disabled) { background: var(--sk-krem, #FFF7E6); }
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-btn--hlavne:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-btn--hlavne.ox-btn--nacitava::after {
	border-color: rgba(214, 0, 25, .3); border-top-color: var(--sk-akcent-tmavy, #B00015);
}
/* chybová hláška vnútri dosky: na tmavom podklade potrebuje vlastný papier */
#ox-obsah[data-trasa="prihlasenie"] #ox-login .ox-hlaska--chyba {
	background: #FFF1F0; color: #8A0010; border-left-color: #B00015;
}
/* odkazy pod formulárom: doska končí nad nimi, takže ostávajú na svetlom podklade */
@media (max-width: 560px) {
	#ox-obsah[data-trasa="prihlasenie"] #ox-login { padding: 20px 16px; border-radius: var(--sk-r-stredny, 14px); }
}

/* =============================================================================
   128) KATALÓG: hlavička sortimentu ako na oxobubbletea.eu, len elegantnejšie
   (Peter 19. 9. 2026). Prod má kategórie ako veľké karty na červenom páse; tu je
   z toho tichý rad záložiek v Antone, ktorý drží ten istý rytmus, ale bez ťažkej
   plochy: aktívna záložka je označená 3 px červenou linkou, počty sú drobné mono
   číslice a celý rad ukončuje jedna vlasová linka.
   Platí na celej trase /produkty, teda pre všetky návrhy mriežky - je to chrom
   stránky, nie súčasť varianty. Kotva [data-trasa="produkty"] zabráni presakovaniu.
   ========================================================================== */
#ox-obsah[data-trasa="produkty"] .ox-sek--tesna > .ox-wrap > .ox-oko { color: #96000F; }

/* rad značiek a rad kategórií tvoria spolu jeden pás záložiek */
#ox-obsah[data-trasa="produkty"] #ox-znacky,
#ox-obsah[data-trasa="produkty"] #ox-filtre {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	gap: clamp(18px, 2.4vw, 34px);
	margin: 0; padding: 0; border: 0; background: none;
}
#ox-obsah[data-trasa="produkty"] #ox-znacky { margin-top: 18px; }
#ox-obsah[data-trasa="produkty"] #ox-filtre {
	margin-top: 10px; padding-bottom: 12px;
	border-bottom: 1px solid rgba(27, 27, 27, .14);
}
/* samotná záložka: žiadna pilulka, žiadny rám, len sadzba */
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip,
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip {
	position: relative;
	display: inline-flex; align-items: baseline; gap: 7px;
	margin: 0; padding: 6px 0 10px;
	border: 0; border-radius: 0; background: none; box-shadow: none;
	font-family: var(--sk-font-nadpis, Anton), Impact, sans-serif;
	font-size: clamp(15px, 1.35vw, 19px); line-height: 1.25;
	letter-spacing: .02em; text-transform: uppercase;
	color: #6B605C;                                   /* 5,97:1 na bielej */
	transition: color .18s ease;
}
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip::after,
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
	background: #B00015; border-radius: 2px;
	transform: scaleX(0); transform-origin: left center;
	transition: transform .22s var(--sk-prechod, ease);
}
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip:hover,
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip:hover { color: #1B1B1B; }
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip:hover::after,
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip:hover::after { transform: scaleX(.34); }
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip[aria-pressed="true"],
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip[aria-pressed="true"] { color: #1B1B1B; }
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip[aria-pressed="true"]::after,
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip[aria-pressed="true"]::after { transform: scaleX(1); }
#ox-obsah[data-trasa="produkty"] .ox-chip:focus-visible { outline: 2px solid #B00015; outline-offset: 3px; border-radius: 3px; }
/* počet: drobné mono číslo, nie druhý nadpis */
#ox-obsah[data-trasa="produkty"] .ox-chip [data-pocet] {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	font-size: 11px; font-weight: 600; letter-spacing: .06em;
	color: #6B605C;                                   /* 5,97:1 na bielej */
}
#ox-obsah[data-trasa="produkty"] .ox-chip[aria-pressed="true"] [data-pocet] { color: #96000F; }
/* riadok s počtom a triedením: tichý mono pás tesne pod záložkami */
#ox-obsah[data-trasa="produkty"] .ox-sek--tesna > .ox-wrap > div[style*="justify-content:space-between"] {
	margin-top: 14px !important;
}
#ox-obsah[data-trasa="produkty"] #ox-pocet {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: #6B605C;
}
#ox-obsah[data-trasa="produkty"] #ox-radenie {
	min-height: 40px; border: 1px solid rgba(27, 27, 27, .16); border-radius: 10px;
	font-family: var(--sk-font-text); font-size: 13.5px; color: #1B1B1B; background-color: #fff;
}
#ox-obsah[data-trasa="produkty"] #ox-radenie:focus-visible { outline: 2px solid #B00015; outline-offset: 2px; }
@media (max-width: 700px) {
	#ox-obsah[data-trasa="produkty"] #ox-znacky,
	#ox-obsah[data-trasa="produkty"] #ox-filtre {
		gap: 14px 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
	}
	#ox-obsah[data-trasa="produkty"] #ox-znacky::-webkit-scrollbar,
	#ox-obsah[data-trasa="produkty"] #ox-filtre::-webkit-scrollbar { display: none; }
	#ox-obsah[data-trasa="produkty"] .ox-chip { white-space: nowrap; }
}

/* =============================================================================
   129) ÚVODNÁ SCÉNA „Hodváb" (h9): 60 % text vľavo, 40 % video vpravo
   (Peter 19. 9. 2026: „rozdel to aby textova cast nalavo mala 60% a video napravo
   40%" + „sprav to tak aby to islo na sirku toho celeho").
   Doteraz mal textový blok pevné odsadenie sprava (clamp 380-964 px) a video vlastnú
   šírku (clamp 380-900 px) - tie dve čísla spolu nesúviseli, takže pomer stĺpcov sa
   menil s každou šírkou okna. Teraz vychádzajú z jedného čísla: --h9-video = 40 vw.
   ⚠️ <video> je nahradzovaný prvok, pri width:auto si berie vlastnú veľkosť a right
   aj bottom ignoruje (CSS 2.1 §10.3.8), preto MUSIA byť obe miery vypočítané.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 {
		--h9-medzera: clamp(16px, 2.4vw, 40px);
		--h9-video: calc(40vw - var(--h9-medzera));
	}
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred {
		padding-right: calc(40vw + var(--h9-medzera, 24px));
		top: 42%;
	}
	/* nadnadpis, nadpis aj odsek ťahajú cez celú šírku svojich 60 %, nie cez úzky stĺpec */
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva,
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__lead { max-width: none; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva { white-space: normal; }
	/* druhý riadok je dlhý výpočet typov prevádzok - škáluje sa so stĺpcom a keď sa
	   nezmestí, zalomí sa vyvážene namiesto osamoteného slova na druhom riadku */
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 {
		font-size: clamp(11px, 1.12vw, 16px); letter-spacing: .06em;
		text-wrap: balance; line-height: 1.45;
	}
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(14px, 1.5vw, 21px); }
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid,
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__karta {
		width: var(--h9-video, calc(40vw - 24px));
		height: calc(var(--h9-video, calc(40vw - 24px)) * .6222);   /* pomer 900 : 560 */
		right: var(--h9-medzera, 24px);
	}
}

/* =============================================================================
   130) KONZISTENCIA SAFARI vs. CHROME (Peter 19. 9. 2026: „na Apple Macu v Safari
   to ukazuje trochu inak ako na mojom PC").
   Tri veci, ktoré sa medzi prehliadačmi rozchádzali:
   a) sklo: Safari dodnes potrebuje `-webkit-backdrop-filter`, inak rozostrenie
      jednoducho nenakreslí a lišta aj pilulky vyzerajú plocho (doplnené vyššie
      pri každom výskyte);
   b) orezanie textu na N riadkov: `-webkit-line-clamp` bez `-webkit-box-orient`
      sa nechytí, takže popis produktu bol raz na dva riadky a raz na štyri
      (doplnené vyššie pri každom výskyte);
   c) JetBrains Mono vo váhe 700: téma sťahovala len 400 a 600, takže tučné mono
      si každý prehliadač dopočítal sám - Safari kreslí syntetický tuk širšie než
      Chrome a mono riadky potom mali inú dĺžku. Váha 700 je odteraz v importe.
   Zvyšok je dorovnaný tu.
   ========================================================================== */
/* Safari zaokrúhľuje sub-pixelové šírky inak; bez tohto sa vlasové linky v mriežkach
   raz zobrazia a raz nie. Vlastná vrstva ich prilepí na pixelovú mriežku. */
html[data-tema^="21"] .ox-mriezka { -webkit-transform: translateZ(0); transform: translateZ(0); }
/* Safari nepozná `scrollbar-width`, vodorovné pásy by teda na Macu mali lištu navyše
   a boli o ~15 px nižšie než na PC. */
html[data-tema^="21"] .ox-chipy::-webkit-scrollbar,
#ox-obsah[data-trasa="produkty"] #ox-znacky::-webkit-scrollbar,
#ox-obsah[data-trasa="produkty"] #ox-filtre::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* iOS aj macOS Safari zväčšujú písmo v na výšku otočenom texte a vo formulároch pod
   16 px sami; pri poliach to spôsobí skok rozloženia pri kliknutí do nich. */
html[data-tema^="21"] .ox-input,
html[data-tema^="21"] .ox-select,
html[data-tema^="21"] textarea { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Safari inak vykresľuje natívny `<select>`; zjednotíme výšku a odsadenie. */
html[data-tema^="21"] .ox-select { -webkit-appearance: none; appearance: none; }

/* =============================================================================
   131) Hodváb: presné 60 / 40 a nadpis, ktorý sa nedá orezať (Peter 19. 9. 2026).
   Predtým z medzery ukrajovalo video (541 px = 38 %), teraz ju berie text, takže
   video sedí presne na 40 % okna a textový stĺpec na zvyšných 60 %.
   Veta písacieho stroja sa navyše nesmie orezať - je najdlhšia v strede písania,
   keď ešte nie je kde zalomiť, preto zalomenie povolíme aj vnútri slova.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 { --h9-video: 40vw; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred {
		padding-right: calc(40vw + var(--h9-medzera, 24px));
	}
	html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__vid,
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__karta {
		width: 40vw; height: calc(40vw * .6222); right: 0;
	}
}
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis {
	max-width: 100%; overflow-wrap: anywhere; hyphens: none;
}

/* =============================================================================
   132) Hodváb: väčší nadnadpis a výraznejší oddeľovač (Peter 19. 9. 2026).
   Prvý riadok „Pre gastro prevádzky bez franšízy" narástol o pár pixelov, druhý
   riadok s typmi prevádzok dostal namiesto stredovej bodky (·) guľatú odrážku (•),
   ktorá je na červenej doske pri malom písme oveľa lepšie vidieť; odrážky sú
   navyše o odtieň svetlejšie než text, aby delili a nekričali.
   ========================================================================== */
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(17px, 1.75vw, 24px); }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: clamp(12.5px, 1.25vw, 17.5px); word-spacing: .12em; }
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(17px, 1.7vw, 24px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: clamp(12.5px, 1.25vw, 17.5px); }
}

/* =============================================================================
   133) KATALÓG - TRI NOVÉ NÁVRHY MRIEŽKY (Peter 19. 9. 2026: „prerob tie návrhy,
   keďže nie je ani jeden vhodný" + „sprav to ako na oxobubbletea.eu, ale
   elegantnejšie"). Zamietnuté smery (stena, tlač, mozaika) sú zo súboru preč.
   ========================================================================== */

/* ---- katalog / elegancia: Elegancia ---- */
/* =============================================================================
   129) KATALÓG / „Elegancia“ - pokojná trojica (Peter 19. 9. 2026)
   -----------------------------------------------------------------------------
   Peter chce mriežku ako na oxobubbletea.eu, len elegantnejšiu. Prod má štyri
   karty natlačené vedľa seba na červenej ploche a pod každou plné červené
   tlačidlo. Poradie prvkov ostáva (fotka, názov, balenie, cena, akcia), ale je
   stíšené: tri stĺpce namiesto štyroch, dvojnásobný vzduch medzi riadkami,
   krémová plocha namiesto červenej, červená len ako prídel v cene a v štítku.
   Fotka stojí na krémovej podložke, do ktorej je vsadená biela doska s PEVNÝM
   pomerom 5/4, takže útla slamka aj široké vedierko dostanú rovnaké okno a riadok
   drží líniu. Pod doskou vlasová linka, pod ňou názov v Antone, balenie v mono
   a cena. Hlavičku sortimentu tento blok nerieši, tá je spoločná v bloku 128
   (kotva #ox-obsah[data-trasa="produkty"], overené - nekríži sa s týmto blokom).

   PREČO BIELA DOSKA A KRÉM AŽ OKOLO NEJ: katalógové fotky NIE SÚ priehľadné
   výrezy, každá si nesie vlastný biely obdĺžnik (overené na živých dátach
   89co.eu/produkty). Na kréme by sa okolo fotky vykreslil biely hranol. Na bielej
   doske sa stratí a krém funguje ako pasparta - preto aj temy/_zaklad.css 473
   trvá na bielom pozadí fotky. Aby paspartu bolo VIDNO, má karta 16 px odsadenie,
   nie 12: pri 12 px sa krém čítal ako obrys dosky, nie ako podložka (odmerané).

   ČO PREBÍJAM A PREČO (čísla riadkov overené grepom, sedia):
   - .ox-karta (temy/_zaklad.css 207): v box-shadow má --sk-obrys, čiže 1 px
     prstenec okolo karty. To je ten „rám okolo všetkého“, ktorý tu nemá byť,
     preto celý box-shadow prepisujem na dva tiene. Tieň musí byť cítiť: stránka
     je biela (#fff) a krémová karta má voči nej kontrast 1,07:1, takže kartu
     neohraničuje nič iné než tieň.
   - .ox-produkt:hover (temy/_zaklad.css 472): dvíha kartu o 4 px. Pokojná mriežka
     sa nehýbe, hýbe sa len fotka a hĺbka tieňa.
   - .ox-produkt__akcie { margin-top: auto } (temy/_zaklad.css 492): keď karte
     chýba riadok balenia (.ox-produkt__meta sa v pohlady.js 334 vypisuje len ak
     je čo napísať), voľné miesto by vzniklo medzi cenou a tlačidlom a ceny by
     v rade skákali. Auto preto presúvam na .ox-cena. POZOR na starší komentár
     v tomto bloku: tvrdil, že riadok balenia chýba piatim kusom príslušenstva -
     nechýba. Na živom katalógu (21 kariet) ho má 21 z 21, lebo príslušenstvo
     dostane text „k sirupom, presne na porcie“ (pohlady.js 322). Presun je aj
     tak správny - je to poistka pre karty, ktoré meta nedostanú.
   - .ox-cena__dph (varianty.css 5572) má margin-left:auto a v DOM stojí PRED
     .ox-cena__stara, preto obom nastavujem order (inak by stará cena skončila
     až za textom „bez DPH“). Overené v prehliadači: 18,90 € | 24,50 € | BEZ DPH.
   - .ox-odznak--tmavy a --akcia (varianty.css 5569-5570) majú !important, inak
     ich stíšiť nejde; !important tu len zrkadlím zo základu.
   - .ox-produkt--vypredane .ox-produkt__foto img (varianty.css 5580) má filter aj
     opacity naraz - prepisujem OBE, aby sa krytie nenásobilo.
   - .ox-chip[aria-pressed="true"] (temy/_zaklad.css 224) dáva stránkovaniu biely
     text na --sk-akcent #D60019 = 3,94:1, čo je pod normou. V mriežke ho preto
     prepisujem na #B00015 (7,35:1).
   ========================================================================== */

/* --- mriežka: tri stĺpce a hlavne vzduch -----------------------------------
   Riadkový odstup je väčší ako stĺpcový: karty sa tak čítajú po riadkoch
   a mriežka dýcha aj bez deliacich čiar.
   align-items zámerne NENASTAVUJEM: potrebujem predvolený stretch, aby boli
   karty v rade rovnako vysoké a aby malo margin-top:auto na .ox-cene čo
   rozdeliť. (Pôvodný návrh tu mal align-items:start. Držalo to len vďaka
   .ox-produkt { height: 100% } zo základu 471 - teda náhodou.) */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 2.8vw, 46px);
	row-gap: clamp(36px, 4vw, 64px);
}

/* --- karta: krémová podložka bez rámu, tieň namiesto obrysu ---------------- */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-karta.ox-produkt {
	background: var(--sk-krem, #FFF7E6);
	border-radius: 20px;
	padding: 16px 16px 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(27, 27, 27, .05), 0 14px 30px -18px rgba(27, 27, 27, .40);
	transition: box-shadow .3s var(--sk-prechod);
}
/* prejdenie myšou aj klávesnicou: tieň sa prehĺbi, karta ostane stáť */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt:hover,
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt:focus-within {
	transform: none;
	box-shadow: 0 2px 5px rgba(27, 27, 27, .06), 0 24px 44px -20px rgba(27, 27, 27, .48);
}

/* --- biela doska s fotkou: spoločný rám pre všetky tvary -------------------
   Pomer 5/4 je aj pomer väčšiny katalógových fotiek, takže široké vedierko dosku
   takmer vyplní a útla slamka v nej stojí na stred. Rovnaký je na všetkých
   šírkach, aby mriežka nikde nezmenila rytmus. */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__foto {
	aspect-ratio: 5 / 4;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__foto img {
	padding: 7% 9%;
	transition: transform .55s var(--sk-prechod);
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: scale(1.035); }
/* karta bez fotky: pohlady.js 329 vypíše <a> aj tak, len bez <img>. Čisto biela
   doska potom vyzerá ako nedotiahnuté načítanie, preto ju stíšim do krému
   a orámujem vlasovou linkou - je vidno, že tam obrázok jednoducho nie je. */
@supports selector(:has(img)) {
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__foto:not(:has(img)) {
		background: #FFFCF4;
		box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .10);
	}
}
/* obrys dovnútra: na fotke pôsobí vsadená linka pokojnejšie než prstenec
   odsadený od dosky (orezanie to nie je - doska má okolo seba 16 px krému) */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__foto:focus-visible {
	outline: 2px solid #B00015;
	outline-offset: -3px;
}

/* --- štítky: drobné mono pilulky ------------------------------------------
   Hlavný štítok („Skladom · N porcií“) je popri cene jediné miesto, kde smie
   svietiť červená. #B00015 s bielym textom má 7,35:1, základová #D60019 len
   3,94:1, čo by na 10 px texte neprešlo. Ostatné štítky sú biele s vlasovým
   prstencom, aby fotku neprekričali. 14 px od hrany dosky, nie 22: pri 22 px
   štítok plával v ploche fotky namiesto toho, aby sedel v jej rohu. */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__stitky { top: 14px; left: 14px; gap: 7px; }
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__stitky .ox-odznak {
	padding: 5px 10px;
	border-radius: 999px;
	background: #B00015;
	color: #fff;
	font: 600 10px/1 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tichy {
	background: rgba(255, 255, 255, .96);
	color: #1B1B1B;
	box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .2);
}
/* !important len preto, že ho má aj základ (varianty.css 5569) */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tmavy {
	background: rgba(255, 255, 255, .96) !important;
	color: #67605A !important;                      /* 6,18:1 na bielej doske */
	box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .16);
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__stitky .ox-odznak--akcia {
	background: rgba(255, 255, 255, .96) !important;
	color: #7A5A06;                                 /* 6,38:1 na bielej doske */
	box-shadow: inset 0 0 0 1px rgba(122, 90, 6, .35);
}

/* --- telo karty: vlasová linka pod doskou a presná hierarchia -------------
   Bočné nuly nie sú nedopatrenie: text tak stojí presne na hranách bielej dosky
   a linka pod ňou má rovnakú šírku ako doska. */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__telo {
	padding: 14px 0 0;
	gap: 8px;
	border-top: 1px solid rgba(27, 27, 27, .16);
	margin-top: 14px;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__nazov {
	margin: 0;
	font-family: var(--sk-font-nadpis, 'Anton'), Impact, sans-serif;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.25;                              /* Anton a slovenská diakritika */
	letter-spacing: .015em;
	text-transform: uppercase;
	color: #1B1B1B;
}
/* odkaz v názve ostáva atramentový; červená je vyhradená cene a štítku,
   preto sa pri prejdení objaví len jemné podčiarknutie */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__nazov a { color: inherit; text-decoration: none; }
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__nazov a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(27, 27, 27, .35);
	text-underline-offset: 5px;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__nazov a:focus-visible {
	outline: 2px solid #B00015;
	outline-offset: 3px;
	border-radius: 3px;
}
/* riadok balenia v mono: metadáta, nie druhý nadpis. #67605A natvrdo, lebo
   --sk-text-tlmeny nie je konštanta a v niektorých témach klesá pod 4,5:1.
   Na kréme #FFF7E6 má 5,80:1. */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__meta {
	margin: 0;
	color: #67605A;
	font: 600 11px/1.5 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	letter-spacing: .03em;
}

/* --- cena: jediný veľký červený prvok na karte -----------------------------
   margin-top:auto tlačí cenu aj akcie k spodku karty, takže v riadku sedia na
   jednej linke aj vtedy, keď karte chýba riadok balenia.
   min-height drží riadok rovnako vysoký s cenou aj so zámkom. Bez nej mal
   riadok s cenou 35 px a riadok so zámkom 25 px (odmerané), lebo výšku
   flexového riadka určuje najvyššia položka, nie font-size rodiča - to tvrdil
   pôvodný komentár a nebola to pravda. 1,25em = riadok ceny, 10px = vlastný
   padding-top (box-sizing: border-box, _zaklad.css 70). */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-cena {
	margin-top: auto;
	padding-top: 10px;
	min-height: calc(1.25em + 10px);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-family: var(--sk-font-nadpis, 'Anton'), Impact, sans-serif;
	font-size: clamp(19px, 1.4vw, 22px);
	line-height: 1.25;
	letter-spacing: .01em;
	color: #B00015;                                 /* 6,90:1 na kréme */
}
/* order kvôli poradiu v DOM: „bez DPH“ je v markupe pred starou cenou */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-cena__stara {
	order: 2;
	font-family: var(--sk-font-text);
	font-size: 13px;
	color: #67605A;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-cena__dph {
	order: 3;
	margin-left: auto;
	font: 600 9.5px/1.4 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #67605A;
}
/* hosť ceny nevidí, takže zámok je na väčšine kariet: žiadna pilulka, len tichý
   mono riadok. Je to preňho jediná informácia o cene, preto 11 px, nie menej. */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-cena__zamok {
	padding: 0;
	gap: 7px;
	background: none;
	border-radius: 0;
	color: #67605A;
	font: 600 11px/1.4 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-cena__zamok svg { flex: none; }

/* --- akcie: tiché tlačidlá -------------------------------------------------
   stretch, nie center: stepper má rám 1 px a tlačidlo 2 px, pri centrovaní bol
   o 1 px nižší (42 vs 43 px, odmerané na všetkých šírkach). */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie {
	margin-top: 0;
	padding-top: 12px;
	gap: 10px;
	align-items: stretch;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn {
	min-height: 42px;
	padding: 10px 16px;
	font-family: var(--sk-font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: none;
	transition: background .18s var(--sk-prechod), color .18s var(--sk-prechod),
	            border-color .18s var(--sk-prechod), transform .18s var(--sk-prechod);
}
/* pokoj v mriežke: tlačidlo sa pri prejdení nenadvihuje */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn:hover:not(:disabled) { transform: none; }
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn--obrys {
	background: #fff;
	border-width: 1px;
	border-color: rgba(27, 27, 27, .22);
	color: #1B1B1B;
}
/* základ prepína obrysové tlačidlo na plný atramentový blok, čo je na pokojnej
   karte zbytočne hlasné; stačí tmavšia linka a tlmené podfarbenie */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn--obrys:hover:not(:disabled) {
	background: #FFFDF7;
	color: #1B1B1B;
	border-color: rgba(27, 27, 27, .46);
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne {
	background: #B00015;
	border-color: #B00015;
	color: #fff;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne:hover:not(:disabled) {
	background: #96000F;
	border-color: #96000F;
}
/* vypredané tlačidlo: základ ho stmieva cez opacity:.5, čo z atramentu spraví
   sivú pod 4,5:1. Radšej plné krytie a tlmená, ale čitateľná farba. */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn:disabled {
	opacity: 1;
	background: #fff;
	border-color: rgba(27, 27, 27, .16);
	color: #67605A;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn:focus-visible {
	outline: 2px solid #B00015;
	outline-offset: 3px;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__quick {
	align-self: stretch;
	border: 1px solid rgba(27, 27, 27, .22);
	border-radius: 999px;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__quick button {
	width: 34px;
	min-height: 40px;
	height: 100%;
	color: #1B1B1B;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__quick button:hover {
	background: #FFFDF7;
	color: #1B1B1B;
}

/* --- vypredané: tichšia karta, nie prečiarknutá ---------------------------
   Prepisujem filter AJ opacity naraz, inak by sa krytie znásobilo so základom.
   Zámerne SLABŠIE odfarbenie než základ (grayscale .6 / opacity .8): pôvodný
   návrh mal .5/.58, čo je dohromady bledšie než základ, a vyzeralo to ako
   nenačítaná fotka. Tovar musí ostať poznať, správu nesie štítok a tlačidlo. */
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__foto img {
	filter: grayscale(.35);
	opacity: .78;
}
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt--vypredane:hover .ox-produkt__foto img { transform: none; }
html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__nazov { color: #67605A; }

/* --- stránkovanie: vzduch pod mriežkou -------------------------------------
   Trieda .ox-strankovanie NEEXISTUJE - pohlady.js 728 vypisuje neotriedený
   <div style="...justify-content:center...margin-top:38px">, takže pôvodný
   selektor bol mŕtvy. Idem na ten inline štýl (rovnako ako blok 128 na riadok
   s triedením) a !important je nutný, lebo štýl v atribúte prebíja triedy. */
html[data-ox-katalog="elegancia"] #ox-vysledky > div[style*="justify-content:center"] {
	margin-top: clamp(40px, 5vw, 72px) !important;
	gap: 9px !important;
}
html[data-ox-katalog="elegancia"] #ox-vysledky > div[style*="justify-content:center"] .ox-chip {
	min-width: 40px;
	justify-content: center;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid rgba(27, 27, 27, .18);
	color: #1B1B1B;
	font: 600 12.5px/1 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
html[data-ox-katalog="elegancia"] #ox-vysledky > div[style*="justify-content:center"] .ox-chip:hover {
	border-color: rgba(27, 27, 27, .42);
	background: #FFFDF7;
}
/* základ dáva aktívnemu chipu --sk-akcent #D60019 s bielym textom = 3,94:1 */
html[data-ox-katalog="elegancia"] #ox-vysledky > div[style*="justify-content:center"] .ox-chip[aria-pressed="true"] {
	background: #B00015;                            /* 7,35:1 s bielym textom */
	border-color: #B00015;
	color: #fff;
}

/* --- šírky ----------------------------------------------------------------
   Tri stĺpce držím po 981 px. Nižšie by karta klesla pod 260 px (odmerané pri
   901 px) a stepper s tlačidlom „Do košíka“ by mal v riadku pár pixlov rezervy -
   to už nie je pokojná trojica. Základ prepína .ox-mriezka--4 na dva stĺpce od
   1100 px a na jeden od 620 px (temy/_zaklad.css 734 a 748); tento blok je
   špecifickejší, takže si oba zlomy píšem sám.
   Vetva „širšie“ tu nie je: .ox-wrap berie --sk-maxw, čo je v živej téme
   (21g3-noirg3) 1320 px - overené v prehliadači, pri 1440 aj 1920 px vyjde
   rovnaká karta 367-375 px. POZOR: --sk-maxw NIE je konštanta, základ má
   1560 px a témy 04/07 majú 1280 a 1440 px (pozri aj varovanie na r. 10385). */
@media (max-width: 980px) {
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(16px, 2.4vw, 28px);
		row-gap: clamp(26px, 3.4vw, 40px);
	}
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-karta.ox-produkt { padding: 12px 12px 16px; }
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__stitky { top: 12px; left: 12px; }
}
@media (max-width: 560px) {
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__foto img { padding: 6% 12%; }
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-karta.ox-produkt { border-radius: 16px; }
}

/* --- pohyb ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-karta.ox-produkt,
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__foto img,
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt__akcie .ox-btn { transition: none; }
	html[data-ox-katalog="elegancia"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: none; }
}

/* ---- katalog / galeria: Galéria ---- */
/* =============================================================================
   KATALÓG · varianta „Galéria"   (html[data-ox-katalog="galeria"] #ox-vysledky)
   -----------------------------------------------------------------------------
   ČO TO JE
   Dva stĺpce veľkých fotografických dlaždíc, pravý stĺpec zvislo posunutý o pár
   desiatok pixelov, tak ako visia obrazy v galérii. Fotka zaberá väčšinu dlaždice,
   popis stojí pod ňou v úzkom stĺpci zarovnanom na ľavú hranu fotky: názov,
   balenie, cena pod sebou, medzi nimi veľa vzduchu. Štítok je drobná pilulka
   v písme s pevnou šírkou znaku v rohu fotky. Hlasné tlačidlo „Do košíka" sa
   objaví až pri prejdení, dovtedy je mriežka tichá.

   PREČO TAKTO (Peter 19. 9. 2026: „ako na oxobubbletea.eu, ale elegantnejšie")
   - Prod má mäkké biele karty na hlasnej červenej ploche. Mäkká biela karta tu
     ostáva, ale plocha pod ňou je obyčajná biela stránka a červená sa zmenšila na
     prídel: cena, pilulka „Akcia" a jedno tlačidlo pri prejdení. Nič viac.
   - Rám okolo karty je preč, dlaždicu drží jemný tieň. To je rozdiel medzi
     „elegantne" a zamietnutou „Stenou" s jednopixelovými linkami.
   - Fotky sú výrezy na bielom a sú rôzne vysoké (vedierko široké, slamka útla),
     preto majú pevný pomer 5/4 a spoločnú bielu podložku. Biela je povinná: krém
     by pod bielym pozadím fotky urobil „škatuľu v škatuli" (_zaklad.css 473).
   - Tri presné typografické stupne: Anton vo verzálkach na názov, písmo s pevnou
     šírkou znaku na metadáta, Anton na cenu. Nič navyše.

   ČO PREBÍJAM A PREČO
   - .ox-karta (_zaklad.css 207) povrch, rádius, tieň: tieň patrí fotke, nie celej
     karte, inak by text plával v sivom obdĺžniku. Rovnaký tieň dáva karte aj téma
     (21g3-noirg3.css 156), prebíja ho vyššia špecificita.
   - .ox-produkt:hover translateY(-4px) plus tieň (_zaklad.css 472): mriežka má byť
     pokojná, dlaždica sa pri prejdení nesmie hýbať.
   - .ox-produkt--vypredane .ox-produkt__foto img (varianty.css 5580) má filter
     grayscale(.6) AJ opacity .8 a tie sa znásobujú; prepisujem OBE, odfarbená
     fotka je presne to, čo tento návrh nechce.
   - .ox-cena__dph (varianty.css 5572) má margin-left:auto a v DOM stojí PRED
     .ox-cena__stara; bez `order` a bez vynulovania okraja by stará cena skončila
     za textom „bez DPH". Odmerané v prehliadači: 32,90 € na x=749, 41,50 € na
     x=833, „bez DPH" na x=894.
   - .ox-cena__zamok (varianty.css 5573) je zapísaný skratkou `font: 600 12px/1`,
     ktorá nastaví riadkovanie na 1. Preto tu riadkovanie dopĺňam výslovne, inak
     by sa dva riadky zámku prekryli.
   - .ox-produkt__quick button:hover (varianty.css 5577) maľuje písmo farbou
     --sk-akcent, teda #D60019. To je 4,67:1 na kréme a zároveň to porušuje
     pravidlo, že červená je tu len na cene, na pilulke „Akcia" a na jednom
     tlačidle. Preto ho stmavujem na atrament.
   - .ox-produkt__quick output (varianty.css 5578) má --sk-font-text; číslo
     v počítadle patrí k metadátam, teda do písma s pevnou šírkou znaku.
   - .ox-odznak--tmavy a --akcia (varianty.css 5569-5570) majú !important, preto
     ho tu musím použiť tiež. Inde v bloku !important nie je.
   - .ox-btn:active scale(.96) !important a .ox-btn:focus-visible box-shadow
     !important (varianty.css 5562-5563) nechávam tak, sú v poriadku aj tu.
   - .ox-btn:disabled opacity .5 (_zaklad.css 179) vraciam na 1, inak by tlmený
     text „Vypredané" spadol pod 4,5:1.
   - .ox-wrap má strop 1320 px (odmerané 1205 px na šírke okna 1440), preto vetva
     „nad 1440 px" chýba, bola by mŕtva.

   DVE VECI, KTORÉ SA PRI KONTROLE UKÁZALI AŽ V PREHLIADAČI
   - Riadok akcií sa NESMIE skrývať celý. Pre neprihláseného je v ňom jediný odkaz
     „Prihlásiť a objednať" a pri vypredanom tovare stavová hláška. Keďže cenu vidí
     len prihlásený, hosť je na /produkty väčšina a bez tejto výnimky by videl 21
     dlaždíc bez jedinej výzvy na akciu. Skrývanie preto beží iba na riadku, ktorý
     obsahuje počítadlo, čiže na partnerskom „Do košíka".
   - Mriežka potrebuje strop šírky. Bez neho mala fotka na 1440 šírku 574 px, kým
     popiska je zaviazaná na 34ch = 340 px, takže popiska merala 59 % šírky fotky
     a stránka narástla na 8281 px. So stropom 1040 px má fotka 491 px, popiska
     69 % jej šírky a stránka 7393 px.

   STRÁNKOVANIE JE ZATIAĽ SPIACE. strankovanie() v pohlady.js (r. 728) vypisuje
   obyčajný <div> s vloženým štýlom, preto sa naň chytáme cez [style*=...]. Vykreslí
   sa však až nad 24 produktmi (NA_STRANU, pohlady.js r. 582) a dnes je v katalógu
   21 viditeľných, takže sa blok momentálne neuplatní. Nechávam ho: je to podmienený
   markup tej istej obrazovky a rovnaký blok si drží aj varianta „Cenník". Vložený
   margin-top:38px nechávam tak, prebiť by sa dal len cez !important.

   KONTRAST (WCAG 2.1, prepočítané, nie odhadnuté)
   #B00015 na bielej 7,35:1 · biela na #B00015 7,35:1 · #96000F na bielej 9,12:1
   #67605A na bielej 6,18:1 · #1B1B1B na bielej 17,22:1
   ========================================================================== */

html[data-ox-katalog="galeria"] #ox-vysledky {
	--ox-gl-cervena: #B00015;          /* biely text na nej 7,35:1 */
	--ox-gl-cervena-tma: #96000F;      /* na bielej 9,12:1 */
	--ox-gl-tlmeny: #67605A;           /* pevne: --sk-text-tlmeny nie je konštanta, téma 07-fluid ju prepisuje na rgba(255,255,255,.66) */
	--ox-gl-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	--ox-gl-tien: 0 16px 34px -22px rgba(27, 27, 27, .50), 0 2px 8px -5px rgba(27, 27, 27, .14);
	--ox-gl-tien-nad: 0 26px 50px -24px rgba(27, 27, 27, .55), 0 4px 12px -6px rgba(27, 27, 27, .17);
	padding-top: clamp(14px, 2vw, 34px);
}

/* --- mriežka: dva stĺpce, striedavý posun ---------------------------------
   Posun rieši margin-top na párnych dlaždiciach, nie transform: transform by
   posledný riadok vytiahol mimo toku a pri fokuse klávesnicou by prehliadač
   skroloval na nesprávne miesto. align-items:start drží ľavý stĺpec na hornej
   hrane riadka, takže posun je v každom riadku rovnaký a čitateľný ako rytmus.
   Strop 1040 px je ten galerijný múr: dlaždica sa nesmie roztiahnuť tak, aby
   popiska pod ňou pôsobila odtrhnuto. Pod 1024 px sa strop ruší, tam je už úzko. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	max-width: 1040px;
	margin-inline: auto;
	column-gap: clamp(28px, 4vw, 64px);
	row-gap: clamp(40px, 4.4vw, 76px);
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-mriezka--4 > .ox-produkt:nth-child(even) { margin-top: clamp(24px, 3.4vw, 56px); }

/* --- karta: žiadna plocha, žiadny rám ------------------------------------- */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-karta.ox-produkt {
	height: auto; background: none; border-radius: 0; box-shadow: none; transition: none;
	overflow: visible;                 /* .ox-karta reže overflow; tieň fotky by inak zmizol */
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-karta.ox-produkt:hover { transform: none; box-shadow: none; }

/* --- fotka: dlaždica, ktorá nesie celý návrh ------------------------------
   Pevný pomer 5/4 dáva vedierku, fľaši aj slamke rovnaký výrez. Overené v
   prehliadači: naše fotky sú takmer štvorcové, pri širšom 3/2 by výrez vyplnil
   sotva polovicu dlaždice a dlaždica by vyzerala prázdna. Vnútorný okraj je
   preto tiež menší, fotka má zabrať väčšinu plochy. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto {
	aspect-ratio: 5 / 4;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--ox-gl-tien);
	transition: box-shadow .45s var(--sk-prechod);
}
/* Obrázok je v kartaProduktu() podmienený (foto ? '<img…>' : ''). Bez tejto vetvy
   by karta bez fotografie bola 459 px vysoká prázdna biela plocha s plným tieňom,
   čiže najhlasnejší prvok na stránke. Tichý krémový panel s vlasovou linkou
   povie to isté potichu a skráti kartu zo 612 na 444 px. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto:not(:has(img)) {
	aspect-ratio: 16 / 9;
	background: #FAF7F3;
	box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .10);
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto img { padding: 4% 7%; transition: transform .7s var(--sk-prechod); }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto:focus-visible { outline: 3px solid var(--ox-gl-cervena); outline-offset: 5px; }

/* --- štítok: drobná pilulka v rohu fotky ----------------------------------
   Biely podklad namiesto červenej plochy: biely text na #D60019 dá 4,98:1, čo
   normu spĺňa, ale tmavočervená sadzba na bielej dáva 9,12:1 a je aj tichšia.
   Rozhoduje teda tón, nie prepadnutý kontrast. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__stitky {
	top: 14px; left: 14px; right: 14px;
	flex-direction: row; flex-wrap: wrap; gap: 6px;
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__stitky .ox-odznak {
	padding: 5px 10px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 1px 4px -1px rgba(27, 27, 27, .22);
	color: var(--ox-gl-cervena-tma);
	font-family: var(--ox-gl-mono);
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tichy { color: var(--ox-gl-tlmeny); }
/* --tmavy aj --akcia majú v základe !important, inak sa nedajú prebiť */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tmavy { background: rgba(255, 255, 255, .94) !important; color: #1B1B1B !important; }
/* jediná plná červená v mriežke: pilulka „Akcia" */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__stitky .ox-odznak--akcia { background: var(--ox-gl-cervena) !important; color: #fff !important; }

/* --- popis: úzky stĺpec na jednej osi -------------------------------------
   padding-inline 0 zarovná názov, balenie aj cenu presne na ľavú hranu fotky.
   max-width v ch drží riadok krátky, aby stĺpec pôsobil ako popiska v galérii
   a nie ako odsek. gap:0, rozostupy nesú margin-y, lebo každý stupeň má iný. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__telo { padding: clamp(18px, 1.9vw, 26px) 0 0; gap: 0; max-width: 34ch; }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__nazov {
	font-size: clamp(17px, 1.45vw, 21px); letter-spacing: .012em; text-transform: uppercase; color: #1B1B1B;
	line-height: 1.25;                 /* Anton so slovenskou diakritikou */
	overflow-wrap: break-word;         /* poistka na jedno dlhé nezlomiteľné slovo */
}
/* podčiarknutie kreslí text-decoration, nie pseudoprvok ani pozadie: názvy sa
   často lámu na dva až tri riadky („OXO Ready Tea Sirup Tutti Frutti & Čučoriedka
   2L") a jedine text-decoration podčiarkne všetky riadky správne. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__nazov a {
	color: inherit; text-decoration: underline; text-decoration-color: transparent;
	text-decoration-thickness: 2px; text-underline-offset: 4px;
	transition: text-decoration-color .3s var(--sk-prechod);
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__nazov a:focus-visible { outline: 3px solid var(--ox-gl-cervena); outline-offset: 3px; }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__meta {
	margin: 14px 0 0;
	font-family: var(--ox-gl-mono);
	font-size: 11px; font-weight: 600; letter-spacing: .07em;
	line-height: 1.5;
	color: var(--ox-gl-tlmeny);        /* 6,18:1 na bielej */
	overflow-wrap: anywhere;
}

/* --- cena: druhý a posledný prídel červenej ------------------------------- */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-cena {
	margin-top: 18px;
	font-family: var(--sk-font-nadpis);    /* Anton, nie Luckiest Guy: display je na túto tichú plochu príliš hlasný */
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1.25;
	letter-spacing: .01em;
	color: var(--ox-gl-cervena);
	flex-wrap: wrap;
	gap: 4px 10px;
}
/* .ox-cena__dph je v DOM PRED .ox-cena__stara a má margin-left:auto;
   bez order a bez nuly by stará cena stála až za textom „bez DPH". */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-cena__stara {
	order: 2; font-family: var(--ox-gl-mono); font-size: 11.5px; font-weight: 600; color: var(--ox-gl-tlmeny);
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-cena__dph {
	order: 3; margin-left: 0; font-family: var(--ox-gl-mono); color: var(--ox-gl-tlmeny);
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
/* hosť vidí toto miesto pri väčšine z 21 produktov, preto zo zámku mizne
   pilulka aj podklad a ostáva tichý riadok. Riadkovanie sa dopĺňa výslovne:
   základ ho skratkou `font` zrazil na 1 a dva riadky by sa prekryli. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-cena__zamok {
	padding: 0; background: none; gap: 7px; font-family: var(--ox-gl-mono); color: var(--ox-gl-tlmeny);
	font-size: 10.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase;
	flex-wrap: wrap;
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-cena__zamok svg { flex: none; }

/* --- vypredané: bez odfarbenia -------------------------------------------
   Základ znásobuje filter a opacity, preto tu vypínam obe. Signál nesie tichá
   pilulka a stlmený názov, fotka ostáva verná. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__foto img { filter: none; opacity: 1; }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__foto { box-shadow: 0 10px 26px -24px rgba(27, 27, 27, .40); }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__nazov { color: var(--ox-gl-tlmeny); }

/* --- akcie ----------------------------------------------------------------
   Riadok je vždy v toku, takže sa pri prejdení nič neposunie. Skrýva sa LEN
   partnerský variant s počítadlom (viď @media (hover: hover) nižšie); odkaz
   hosťa „Prihlásiť a objednať" a stavová hláška „Vypredané" stoja natrvalo. */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie { margin-top: 18px; padding-top: 0; gap: 10px; }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie .ox-btn {
	min-height: 34px;
	padding: 0 0 6px;
	width: auto; flex: 0 0 auto;
	border: 0; border-bottom: 2px solid var(--ox-gl-cervena); border-radius: 0;
	background: none; box-shadow: none;
	font-family: var(--ox-gl-mono);
	font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase;
	color: #1B1B1B;                    /* 17,22:1 */
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie .ox-btn:hover:not(:disabled) {
	transform: none;                   /* základ dvíha tlačidlo o 2 px, tu má stáť */
	background: none;                  /* .ox-btn--obrys:hover inak zafarbí plochu na atrament */
	color: var(--ox-gl-cervena-tma);
	border-bottom-color: var(--ox-gl-cervena-tma);
}
/* partnerské „Do košíka" je jediné plné tlačidlo v mriežke */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne {
	padding: 0 18px; border: 0; border-radius: 999px; background: var(--ox-gl-cervena);
	color: #fff;                       /* 7,35:1 */
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne:hover:not(:disabled) { background: var(--ox-gl-cervena-tma); color: #fff; box-shadow: none; }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie .ox-btn:disabled {
	border-bottom-color: rgba(27, 27, 27, .18); color: var(--ox-gl-tlmeny);
	opacity: 1;                        /* .5 by tlmený text zhodilo pod 4,5:1 */
}
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__quick { border: 1px solid rgba(27, 27, 27, .16); border-radius: 9px; background: none; }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__quick button { width: 28px; height: 32px; color: #1B1B1B; }
/* základ dáva sem --sk-akcent (#D60019, 4,67:1 na kréme); červená patrí inam */
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__quick button:hover { background: rgba(27, 27, 27, .05); color: #1B1B1B; }
html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__quick output { font: 600 12px/1 var(--ox-gl-mono); color: #1B1B1B; }

/* --- hlasné tlačidlo sa objaví až pri prejdení ----------------------------
   Miesto je rezervované stále (element ostáva v toku), takže sa pri prejdení nič
   neposunie. Krytie 0 nevyraďuje prvok z poradia tabulátora, preto ho
   :focus-within vráti aj pri ovládaní klávesnicou. Skrývanie beží iba
   v @media (hover: hover): na dotyku hover neexistuje a tlačidlo musí byť vidno
   hneď. A zúžené je na :has(.ox-produkt__quick), teda výhradne na partnerský
   riadok s počítadlom: hosť má v tom istom riadku svoj jediný odkaz do obchodu
   a vypredaný tovar tam má stavovú hlášku, tie sa skrývať nesmú. */
@media (hover: hover) {
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie:has(.ox-produkt__quick) {
		opacity: 0; transform: translateY(6px);
		transition: opacity .3s var(--sk-prechod), transform .3s var(--sk-prechod);
	}
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt:is(:hover, :focus-within) .ox-produkt__akcie:has(.ox-produkt__quick) { opacity: 1; transform: none; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt:is(:hover, :focus-within) .ox-produkt__foto { box-shadow: var(--ox-gl-tien-nad); }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt:is(:hover, :focus-within) .ox-produkt__foto:not(:has(img)) { box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .10); }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: scale(1.03); }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt:is(:hover, :focus-within) .ox-produkt__nazov a { text-decoration-color: var(--ox-gl-cervena); }
}

/* --- stránkovanie: rovnaká reč ako záložky kategórií ----------------------
   Spiace do 25. produktu (NA_STRANU = 24, pohlady.js 582); markup vypisuje
   strankovanie() v pohlady.js (r. 728) ako obyčajný <div> s vloženým štýlom,
   preto sa naň chytáme cez [style*=...]. */
html[data-ox-katalog="galeria"] #ox-vysledky > div[style*="margin-top:38px"] .ox-chip {
	padding: 6px 4px 8px;
	border: 0; border-radius: 0;
	background: none;
	font-family: var(--ox-gl-mono);
	font-size: 12px; font-weight: 600; letter-spacing: .06em;
	color: var(--ox-gl-tlmeny);
	box-shadow: inset 0 -2px 0 transparent;
	transition: color .18s ease, box-shadow .18s ease;
}
html[data-ox-katalog="galeria"] #ox-vysledky > div[style*="margin-top:38px"] .ox-chip:hover { color: #1B1B1B; }
html[data-ox-katalog="galeria"] #ox-vysledky > div[style*="margin-top:38px"] .ox-chip[aria-pressed="true"] { color: var(--ox-gl-cervena-tma); box-shadow: inset 0 -2px 0 var(--ox-gl-cervena); }

/* --- 1024 a nižšie: menej vzduchu, plytší posun, bez stropu --------------- */
@media (max-width: 1024px) {
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { max-width: none; column-gap: clamp(22px, 3vw, 40px); row-gap: clamp(34px, 4.2vw, 56px); }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-mriezka--4 > .ox-produkt:nth-child(even) { margin-top: clamp(16px, 2.4vw, 32px); }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__telo { max-width: none; }
}

/* --- 620 a nižšie: jeden stĺpec, bez posunu -------------------------------
   Pri jednom stĺpci by posun párnych kariet robil len nerovnaké medzery, preto
   ide preč. Fotka sa mení na 4/3, aby dlaždica nezabrala celú výšku obrazovky. */
@media (max-width: 620px) {
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { grid-template-columns: minmax(0, 1fr); row-gap: 38px; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-mriezka--4 > .ox-produkt:nth-child(even) { margin-top: 0; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto { aspect-ratio: 4 / 3; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto:not(:has(img)) { aspect-ratio: 16 / 9; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto img { padding: 5% 9%; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__telo { padding-top: 16px; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-cena { margin-top: 14px; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie { margin-top: 16px; }
}

/* --- obmedzený pohyb ------------------------------------------------------
   Partnerské tlačidlo ostáva viditeľné nastálo: keby sme len vypli prechod, pri
   vypnutom pohybe by sa objavovalo skokom. Toto pravidlo stojí v súbore ZA
   blokom @media (hover: hover) a má rovnakú špecificitu, takže vyhráva poradím. */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto,
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__foto img,
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__nazov a,
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie,
	html[data-ox-katalog="galeria"] #ox-vysledky > div[style*="margin-top:38px"] .ox-chip { transition: none; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: none; }
	html[data-ox-katalog="galeria"] #ox-vysledky .ox-produkt__akcie:has(.ox-produkt__quick) { opacity: 1; transform: none; }
}

/* ---- katalog / karta: Karta ---- */
/* =============================================================================
   130) KATALÓG - varianta „Karta" (id: karta)  ->  html[data-ox-katalog="karta"]
   -----------------------------------------------------------------------------
   ZADANIE (Peter 19. 9. 2026): „sprav tak, ako je na oxobubbletea.eu, ale
   elegantnejšie". Z produ preberám TVAR: biela karta, štyri stĺpce, fotka hore,
   text dole, akcia na spodku. Nič sa neprevracia, návštevník sa tu hneď vyzná.
   Elegantnejšie robí päť zásahov:

   1. TICHÁ PLOCHA. Karta nemá rám, len dvojvrstvový tieň: vlasový 1 px kontakt
      drží tvar, široký rozptyl dáva hĺbku. Základ dáva .ox-karta box-shadow
      s var(--sk-obrys), teda 1 px prstenec okolo všetkého - ten zahadzujem,
      lebo 21 prstencov vedľa seba je presne tá „mriežka rámov", ktorú tu nechcem.
   2. JEDNA PODLAHA PRE VÝREZY. Fotky sú rôzne vysoké (vedierko široké, fľaša
      vysoká, slamka útla). object-position: center bottom ich postaví na jednu
      čiaru, takže spodné hrany produktov sedia v celom riadku rovnako.
      ⚠️⚠️ ŽIADNY farebný podstavec pod fotkou. Pôvodný návrh mal krémovú kupolu
      a opieral sa o tvrdenie, že fotky sú .jpg s BIELYM pozadím. Odmeral som
      rohové pixely všetkých 21 obrázkov na 89co.eu: bielych je iba päť
      (Naberačka, Pumpička, Slamky, Viečko, +/- Pohár), ostatných sedemnásť má
      chladné svetlosivé pozadie #CCCFD6 až #F4F5F7 - vrátane súboru
      Jahoda-2-1000x768.jpg, ktorý bol v pôvodnom odôvodnení uvedený ako dôkaz
      bielej (v skutočnosti #ECECEC / #E1E1E1). Fotka je nepriehľadný obdĺžnik,
      takže kupola pod ňou nemala kam splynúť: vznikol trojtónový sendvič
      sivý obdĺžnik / biely klin / krémový oblúk, čiže presne tá „škatuľa
      v škatuli", pred ktorou varuje komentár v temy/_zaklad.css pri
      .ox-produkt__foto. Overené screenshotom, preto podstavec padá.
   3. PEVNÁ VÝŠKA NÁZVU. min-height 2.5em pri line-height 1.25 = presne dva
      riadky Antonu. Bez toho končia karty v riadku rôzne vysoko, čo je dnes na
      živej stránke najviditeľnejší neporiadok. Odmerané: pri 1440 / 1280 /
      1024 / 768 aj 390 px sa ŽIADNY zo súčasných 21 názvov nezmestí na viac
      ako dva riadky, takže clamp nikdy neoreže skutočný názov.
   4. CENA A TLAČIDLO NA SPODKU (margin-top: auto na .ox-cena). Päť z 21
      produktov je príslušenstvo BEZ riadku s porciami; bez tohto by im cena
      vyskočila o riadok vyššie než susedom.
   5. ČERVENÁ AKO PRÍDEL. V pokoji je červená jediná vec: cena vpravo dole
      (#B00015, 7,35:1 na bielej). „Do košíka" je v pokoji biele s červenou
      linkou a plní sa červenou až pri prejdení (biele na #B00015 = 7,35:1).
      Značkovú --sk-akcent NEPOUŽÍVAM ako podklad bieleho textu: vo VŠETKÝCH
      témach je to #D60019, čo je 4,98:1 - normu AA pre bežný text síce prejde,
      ale bez rezervy a pri 12,5 px tlačidlovom texte to nechcem. #B00015 dáva
      7,35:1, teda aj AAA. (Odôvodnenie v pôvodnom návrhu uvádzalo 3,94:1;
      taká hodnota v tomto projekte nikde nie je, prepočítané a opravené.)
   6. ŠTÍTOK AKO DROBNÝ MONO ODZNAK, nie výkričník. Tlmený text je pevne
      #67605A (5,80:1 na kréme, 6,18:1 na bielej), lebo --sk-text-tlmeny nie je
      konštanta: v témach nadobúda rgba(27,27,27,.56) aj #6e6a66 a klesá pod normu.

   MRIEŽKA je zámerne hustejšia než „Stena" a „Mozaika": stĺpcová medzera
   clamp(14-20 px), riadková clamp(20-30 px). Vyšší riadkový odstup drží karty
   ako samostatné objekty, nižší stĺpcový ich viaže do riadku. Odmerané na
   1440 px: karta 286 px, čo je na dvojriadkový Anton pohodlné.

   ČO PREBÍJAM A PREČO
   - .ox-karta (temy/_zaklad.css 207): rádius 24 -> 20 px, box-shadow bez obrysu.
   - .ox-produkt:hover (_zaklad.css 472): zdvih -4 -> -3 px a vlastný tieň.
     ⚠️ varianty.css 5581 tam pridáva border-color; NErušim ho, lebo .ox-karta
     ani .ox-produkt nemajú v tomto bloku žiadnu šírku rámu (dávam border: 0),
     takže border-color nemá čo vykresliť. Pôvodný návrh mal na hoveri
     „border-color: transparent" - mŕtvy zápis, zmazaný.
   - .ox-produkt__foto (_zaklad.css 473): pomer 4:3 -> 5:4 (pokojnejšia karta,
     výrez má viac vzduchu); img padding 9%/11% -> 7% 12% 10%, zoom 1.045 -> 1.03.
     box-shadow: none ruší vnútorný prstenec, ktorý fotke dávajú témy
     08-particles (69) a 09-showcase (73) - to je ten rám okolo fotky.
   - .ox-produkt__stitky .ox-odznak (varianty.css 5568): z červenej pilulky
     krémový mono odznak. .ox-odznak--tmavy a --akcia (varianty.css 5569-5570)
     majú v základe !important, tam ho musím použiť aj ja; inde v bloku nie je.
   - .ox-cena (_zaklad.css 489): Luckiest Guy 22 px -> JetBrains Mono 600 15 px.
     Cena je číselný údaj; mono ju drží v jednej šírke znaku a vedľa Antonu
     pôsobí presne, nie hlasno.
   - .ox-cena__dph (varianty.css 5571) má margin-left: auto a v DOM stojí PRED
     .ox-cena__stara (pohlady.js 335). Riadok zarovnávam doprava, margin preto
     ruším a poradie narovnávam cez order (stará cena 0, „bez DPH" 1) - inak by
     prečiarknutá cena skončila až za textom „bez DPH". Overené v prehliadači:
     cena 440 px < stará 591 px < „bez DPH" 647 px, a rovnako na 1280/1024/768/390.
   - .ox-produkt--vypredane .ox-produkt__foto img (varianty.css 5580) má filter
     AJ opacity; prepisujem OBE, inak sa krytie znásobí. Odfarbenie ruším
     (filter: none), vypredaný kus stmavuje len krytím - tento návrh nemá
     žiadne odfarbené fotky. Dopĺňam aj reset priblíženia na hoveri: samotné
     .ox-produkt--vypredane:hover { transform: none } zastaví zdvih karty, ale
     .ox-produkt:hover .ox-produkt__foto img by fotku stále zväčšovalo.
   - .ox-produkt__meta (varianty.css 5571) NEorezávam trojbodkou. Pôvodný návrh
     mal white-space: nowrap + text-overflow: ellipsis a na 390 px sa na
     jedenástich kartách zobrazovalo „2,5 kg · až 75 pohárov z bale..."
     (odmerané: scrollWidth 160 px proti clientWidth 150 px). Riadok o balení je
     pre veľkoobchodníka to hlavné číslo, preto sa radšej zalomí do dvoch
     riadkov; cenu ani tlačidlá to neposunie, tie drží margin-top: auto na
     .ox-cene (overené: v celom riadku majú tlačidlá rovnaké Y).

   ČO VEDOME NECHÁVAM ZO ZÁKLADU
   - .ox-btn:active:not(:disabled) { transform: scale(.96) !important } a
     .ox-btn:focus-visible { box-shadow: ... !important } (varianty.css 5562-5563):
     reset bez !important by bol mŕtvy kód, s !important by rozbil jednotné
     správanie tlačidiel na celom webe. Preto ani box-shadow: none na tlačidlách
     karty nezmaže fokusový prstenec.
   - Hlavičku sortimentu (blok 128) - je spoločná pre všetky návrhy mriežky.

   ČO SOM ZMAZAL AKO MŔTVY KÓD
   - Stránkovacie .ox-chip: pohlady.js 582 má NA_STRANU = 24 a strankovanie()
     vracia prázdny reťazec pri jednej strane (719). Katalóg má 21 produktov,
     takže vnútri #ox-vysledky sa NIKDY nevykreslí ani jeden chip (odmerané na
     všetkých piatich šírkach: 0). Filtračné chipy žijú v #ox-znacky a
     #ox-filtre, teda mimo #ox-vysledky.
   - .ox-produkt__foto { border-radius: 0 } - rádius fotke nedáva ani
     _zaklad.css, ani žiadna z tém (preverené grepom).
   - align-items: stretch na mriežke - to je východisková hodnota gridu.
   - .ox-produkt__foto:not(:has(img))::before - existoval len preto, aby skryl
     podstavec na karte bez fotky. Podstavec je preč, takže je zbytočný; stav
     „karta bez <img>" som overil vstreknutím do živej stránky: prázdna biela
     plocha 5:4 drží výšku a karta ostáva zarovnaná so susedmi.

   ŠÍRKY: 4 stĺpce, pod 1100 px tri (teda aj na 768 px), pod 640 px dva. Jeden
   stĺpec nepíšem, na 390 px dá dvojica ešte čitateľné karty (karta 172 px).
   Vetvu „nad 1440" tiež nie: .ox-wrap má strop 1320 px, nad ~1448 px sa obsah
   už nerozširuje.
   ========================================================================== */

html[data-ox-katalog="karta"] #ox-vysledky {
	--kt-tlmeny:    #67605A;                 /* pevne: 5,80:1 na kréme, 6,18:1 na bielej */
	--kt-linka:     rgba(27, 27, 27, .16);
	--kt-cervena:   #B00015;                 /* prídelová červená, 7,35:1 na bielej */
	--kt-cervena-t: #96000F;                 /* tmavšia, 9,12:1 na bielej */
	--kt-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	--kt-r:         20px;
	/* dvojvrstvový tieň: 1 px kontakt drží tvar, široký rozptyl dáva hĺbku */
	--kt-tien:      0 1px 2px rgba(27, 27, 27, .05), 0 16px 34px -22px rgba(27, 27, 27, .30);
	--kt-tien-nad:  0 2px 4px rgba(27, 27, 27, .06), 0 28px 50px -26px rgba(27, 27, 27, .40);
	margin-top: 26px;
}

/* --- mriežka: štyri stĺpce, tesnejšie v riadku než medzi riadkami ---------- */
html[data-ox-katalog="karta"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 30px) clamp(14px, 1.4vw, 20px);
}

/* --- karta: biely povrch, mäkký dvojvrstvový tieň, žiadny rám ------------- */
html[data-ox-katalog="karta"] #ox-vysledky .ox-karta.ox-produkt {
	background: #fff;
	border: 0;                               /* preto je border-color z varianty.css 5581 bezzubý */
	border-radius: var(--kt-r);
	box-shadow: var(--kt-tien);
	overflow: hidden;
	transition: transform .3s var(--sk-prechod, ease), box-shadow .3s var(--sk-prechod, ease);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-karta.ox-produkt:hover {
	transform: translateY(-3px);
	box-shadow: var(--kt-tien-nad);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-karta.ox-produkt:focus-within {
	box-shadow: var(--kt-tien-nad);
}

/* --- fotka: biela plocha, jedna spodná čiara pre všetky výrezy ------------
   Pod fotkou NIE JE žiadny farebný podstavec. Fotky sú nepriehľadné obdĺžniky
   a sedemnásť z 21 má svetlosivé, nie biele pozadie (#CCCFD6 až #F4F5F7), takže
   akákoľvek farebná plocha pod nimi len zvýrazní hranu ich vlastnej „škatule".
   box-shadow: none zmaže vnútorný prstenec z tém 08-particles a 09-showcase. */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__foto {
	aspect-ratio: 5 / 4;                     /* vyššie než základ 4:3 - výrez má viac vzduchu */
	background: #fff;
	box-shadow: none;
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__foto img {
	padding: 7% 12% 10%;
	object-position: center bottom;          /* všetky výrezy stoja na jednej čiare, nie každý inde */
	transition: transform .5s var(--sk-prechod, ease);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: scale(1.03); }

/* --- štítok: malý mono odznak v ľavom hornom rohu fotky ------------------- */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__stitky {
	top: 11px; left: 11px; gap: 5px; align-items: flex-start;
	max-width: calc(100% - 22px);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__stitky .ox-odznak {
	font-family: var(--kt-mono);
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	padding: 5px 8px; border-radius: 7px;
	white-space: nowrap;                     /* zalomený štítok by v úzkej karte prerástol cez pol fotky */
	background: rgba(255, 247, 230, .94);
	color: var(--kt-tlmeny);
	box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .08);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tichy {
	background: rgba(242, 238, 233, .96); color: #5E5750;   /* 6,21:1 */
}
/* --tmavy má v základe !important na pozadí aj farbe, preto ho musím použiť */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__stitky .ox-odznak--tmavy {
	background: rgba(255, 255, 255, .94) !important; color: #1B1B1B !important;
}
/* --akcia je v základe zlatá (!important); nechávam zlatú, ale ako svetlý
   odznak - červená by sa tu bila s cenou, ktorá je jediný červený prvok */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__stitky .ox-odznak--akcia {
	background: #FFF3D6 !important; color: #6B4E05;   /* 7,01:1; !important má v základe len pozadie */
}

/* --- telo karty: názov, metadáta, cena, akcia ----------------------------- */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__telo {
	padding: 15px 16px 16px;
	gap: 4px;
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__nazov {
	font-family: var(--sk-font-nadpis, Anton), Impact, sans-serif;
	font-size: 14.5px; line-height: 1.25;    /* diakritika potrebuje 1.25 */
	letter-spacing: .015em; text-transform: uppercase;
	min-height: 2.5em;                       /* presne dva riadky -> karty končia rovnako */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__nazov a {
	color: #1B1B1B; text-decoration: none;
	transition: color .18s var(--sk-prechod, ease);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__nazov a:hover { color: var(--kt-cervena-t); }
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__nazov a:focus-visible {
	outline: 2px solid var(--kt-cervena); outline-offset: 2px; border-radius: 3px;
}
/* Riadok o balení sa NEoreže trojbodkou - je to hlavný údaj pre veľkoobchod.
   Na 390 px sa zalomí do dvoch riadkov, cenu ani tlačidlá to neposunie. */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__meta {
	margin: 1px 0 0;
	font-family: var(--kt-mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .03em; line-height: 1.4;
	color: var(--kt-tlmeny);
}

/* --- cena: jediný červený prvok, vpravo dole ----------------------------- */
html[data-ox-katalog="karta"] #ox-vysledky .ox-cena {
	margin-top: auto; padding-top: 12px;     /* drží sa spodku, aj keď meta riadok chýba */
	justify-content: flex-end; align-items: baseline; gap: 7px;
	font-family: var(--kt-mono); font-size: 15px; font-weight: 600; letter-spacing: 0;
	color: var(--kt-cervena);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-cena__stara {
	order: 0;                                /* v DOM je až za .ox-cena__dph */
	font-family: var(--kt-mono); font-size: 11px; font-weight: 600;
	color: var(--kt-tlmeny); text-decoration-thickness: 1px;
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-cena__dph {
	order: 1; margin-left: 0;                /* základ mu dáva margin-left: auto */
	font-family: var(--kt-mono); font-size: 9.5px; font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase; color: var(--kt-tlmeny);
}
/* hosť ceny nevidí - zámok je tichý mono riadok, nie ďalšia pilulka */
html[data-ox-katalog="karta"] #ox-vysledky .ox-cena__zamok {
	background: none; padding: 0; gap: 5px;
	font-family: var(--kt-mono); font-size: 10px; font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase; color: var(--kt-tlmeny);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-cena__zamok svg { flex: none; }   /* pri zalomení sa ikona nesmie stlačiť */

/* --- akcie: v pokoji obrys, červená sa objaví až pri prejdení ------------- */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie { margin-top: 12px; padding-top: 0; gap: 7px; }
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn {
	min-height: 40px; padding: 9px 12px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
	border-width: 1.5px; border-radius: 999px; box-shadow: none;
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn:hover:not(:disabled) { transform: none; }
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn--obrys {
	background: #fff; color: #1B1B1B; border-color: var(--kt-linka);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn--obrys:hover:not(:disabled) {
	background: #fff; color: var(--kt-cervena-t); border-color: var(--kt-cervena);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne {
	background: #fff; color: var(--kt-cervena); border-color: var(--kt-cervena);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn--hlavne:hover:not(:disabled) {
	background: var(--kt-cervena); color: #fff;   /* biela na #B00015 = 7,35:1 */
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn:disabled {
	background: #fff; color: var(--kt-tlmeny); border-color: var(--kt-linka); opacity: 1;
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__quick {
	border: 1.5px solid var(--kt-linka); height: 40px;
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__quick button { width: 28px; height: 37px; font-size: 15px; }
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__quick output {
	width: 22px; font-family: var(--kt-mono); font-size: 12px; font-weight: 600;
}

/* --- vypredané: bez odfarbenia, len tichšie a nehybné --------------------- */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt--vypredane {
	box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 12px 24px -20px rgba(27, 27, 27, .22);
}
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt--vypredane:hover {
	transform: none;
	box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 12px 24px -20px rgba(27, 27, 27, .22);
}
/* základ nastavuje filter AJ opacity - prepisujem obe, inak sa krytie znásobí */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__foto img { filter: none; opacity: .5; }
/* zdvih karty už stojí, ale priblíženie výrezu by bežalo ďalej */
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt--vypredane:hover .ox-produkt__foto img { transform: none; }
html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt--vypredane .ox-produkt__nazov a { color: #4A443F; }

/* --- šírky: 1440 / 1280 / 1024 / 768 / 390 -------------------------------- */
@media (max-width: 1100px) {
	html[data-ox-katalog="karta"] #ox-vysledky .ox-mriezka.ox-mriezka--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* „2,5 kg · až 75 pohárov z balenia" sa v 226 px karte ešte zmestí na jeden riadok */
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__meta { font-size: 9.5px; letter-spacing: .01em; }
}
/* Dva stĺpce až od 640 px. Pri troch stĺpcoch má karta na 768 px 226 px, čo je
   pre dvojriadkový názov dosť; dva stĺpce by tam dali 353 px karty a fotka by
   prerástla na pol obrazovky. */
@media (max-width: 640px) {
	html[data-ox-katalog="karta"] #ox-vysledky .ox-mriezka.ox-mriezka--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 10px;
	}
	html[data-ox-katalog="karta"] #ox-vysledky .ox-karta.ox-produkt { border-radius: 16px; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__telo { padding: 12px 11px 13px; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__foto img { padding: 7% 9% 10%; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__stitky { top: 8px; left: 8px; max-width: calc(100% - 16px); }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__stitky .ox-odznak {
		font-size: 8.5px; letter-spacing: .06em; padding: 4px 6px; border-radius: 6px;
	}
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__nazov { font-size: 12.5px; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__meta { font-size: 9px; letter-spacing: 0; }
	/* cenový riadok sa musí vojsť do 148 px: menšie stupne a povolené zalomenie */
	html[data-ox-katalog="karta"] #ox-vysledky .ox-cena { font-size: 13px; padding-top: 10px; gap: 5px; flex-wrap: wrap; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-cena__stara { font-size: 10px; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-cena__dph { font-size: 8.5px; letter-spacing: .04em; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-cena__zamok { font-size: 9px; letter-spacing: .02em; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie { margin-top: 10px; gap: 5px; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__akcie .ox-btn {
		font-size: 10.5px; padding: 8px 6px; min-height: 38px;
		white-space: normal; line-height: 1.2;
	}
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__quick { height: 38px; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__quick button { width: 22px; height: 35px; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__quick output { width: 16px; font-size: 11px; }
}

/* --- pohyb ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-ox-katalog="karta"] #ox-vysledky .ox-karta.ox-produkt,
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__foto img,
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt__nazov a { transition: none; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-karta.ox-produkt:hover { transform: none; }
	html[data-ox-katalog="karta"] #ox-vysledky .ox-produkt:hover .ox-produkt__foto img { transform: none; }
}

/* =============================================================================
   134) Hodváb: textový stĺpec nižšie (Peter 19. 9. 2026: „text naľavo daj nižšie
   tak, ako to je na Macu, keď ho pripojím na TV").
   Blok sedel na `top: 42%`, čo ho na širokých a nízkych obrazovkách (TV, 21:9)
   vytiahlo výrazne nad os videa. Zarovnávame ho na stred scény, takže s videom
   vpravo drží jednu líniu bez ohľadu na pomer strán.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { top: 52%; }
}
@media (min-width: 1601px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { top: 54%; }
}

/* =============================================================================
   135) Hodváb: nadnadpis sýtejšou bielou (Peter 19. 9. 2026: „farba písma nech je
   viac biela, menej transparentná").
   Doteraz mal prvý riadok krytie .95 a druhý .74, a k tomu dedil zo scény
   `color: rgba(255,255,255,.78)` - tie tri hodnoty sa násobili, takže typy
   prevádzok vychádzali fakticky na ~58 % bielej. Teraz je oboje plná biela,
   druhý riadok len o odtieň tlmenejší, a odrážky nesú ten rozdiel samy.
   Kontrast na najsvetlejšom mieste dosky: r1 plná biela, r2 ~92 % = nad normou.
   ========================================================================== */
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred .ox-heroN__oko,
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva { color: #fff; opacity: 1; }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { color: #fff; opacity: 1; }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { color: rgba(255, 255, 255, .92); opacity: 1; }

/* =============================================================================
   136) Hodváb: celý ľavý blok o kúsok menší a typy prevádzok na jeden riadok
   (Peter 19. 9. 2026: „tento text menší nech sa to zmestí do jedného riadku"
   + „toto celé naľavo o trošičku zmenši").
   Druhý riadok má 95 znakov; na stĺpci 757 px (1440 px okno) sa naň zmestí len
   pri menšom písme a užšom prestrku, preto `nowrap` ide ruka v ruke so zmenšením.
   Nadpis písacieho stroja sa zároveň zmenšuje, aby sa „My sme 🙂 bubble tea"
   vošlo na jeden riadok a neorezávalo sa o pravú hranu stĺpca.
   ========================================================================== */
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(15px, 1.5vw, 21px); }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 {
	font-size: clamp(9px, .88vw, 11.5px); letter-spacing: .03em; word-spacing: .06em;
}
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(15px, 1.45vw, 21px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 {
		font-size: clamp(9px, .88vw, 11.5px); white-space: nowrap; text-wrap: nowrap;
	}
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(26px, 3.55vw, 52px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-btn--hlavne { font-size: 14px; padding: 13px 22px; }
}

/* =============================================================================
   137) Hodváb: väčšia sadzba, ale stále na jeden riadok (Peter 19. 9. 2026:
   „nech sa nám zmestia texty do jedného riadku" + „písmo môže ísť trochu väčšie").
   Odmerané na živej stránke: najtesnejšie to je pri 1280 px, kde má stĺpec 673 px
   a riadok typov prevádzok 660 px, teda 98 % - tam sa nedalo pridať nič. Riadok
   typov preto škáluje so šírkou okna (min), nie clampom s vysokým dnom, a tým sa
   mu všade uvoľní asi desatina miesta. Nadnadpis aj nadpis, ktoré rezervu majú,
   idú nahor.
   ⚠️ Zámerne NEZväčšujem písmo len pre Safari, hoci sa tam zmestí viac: presne to
   by vrátilo rozdiel medzi Macom a PC, ktorý sme predtým odstraňovali. Veľkosť
   sedí na najtesnejší prípad, takže je rovnaká všade.
   ========================================================================== */
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(16px, 1.62vw, 24px); }
html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: min(11.5px, .82vw); }
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(16px, 1.6vw, 24px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: min(11.5px, .82vw); white-space: nowrap; }
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(27px, 3.85vw, 58px); }
}
/* aj nadpis písacieho stroja musí ostať na jednom riadku - v strede písania ešte
   nie je kde zalomiť, takže zalomenie by len poskakovalo */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { white-space: nowrap; overflow-wrap: normal; }
}

/* =============================================================================
   138) Hodváb: väčšia sadzba a celý ľavý blok viac doľava (Peter 19. 9. 2026:
   „trochu väčšie, keďže sa zmestí všetko do jedného riadku" + „viac doľava to daj,
   celé").
   Blok je vycentrovaný vo svojom stĺpci, takže „doľava" znamená ubrať mu ľavé
   odsadenie: stred sa posunie doľava a stĺpec sa zároveň rozšíri, čím vznikne
   miesto na väčšie písmo. Najtesnejšie je to pri 1280 px (riadok typov zaberal
   93 % stĺpca), preto riadok typov aj naďalej škáluje so šírkou okna a nie pevným
   clampom - inak by pri 1280 pretiekol.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred {
		padding-left: clamp(10px, 1.6vw, 30px);
		align-items: flex-start; text-align: left;
	}
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva { align-items: flex-start; text-align: left; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko { justify-content: flex-start; text-align: left; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: clamp(17px, 1.78vw, 27px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: min(12.5px, .8vw); }
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(29px, 4.25vw, 64px); }
}

/* =============================================================================
   139) Hodváb: späť na vycentrovaný blok, len posunutý doľava (Peter 19. 9. 2026:
   „nech to nie je zarovnané doľava, ale ako predtým, iba posunuté o trošku doľava").
   Blok 138 ho okrem posunu aj zarovnal vľavo - to sa ruší. Posun doľava ostáva a
   robí ho menšie ľavé odsadenie, takže stred stĺpca sa presunie doľava, ale riadky
   sú voči sebe zase vycentrované.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { align-items: center; text-align: center; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko--dva { align-items: center; text-align: center; }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko { justify-content: center; text-align: center; }
}

/* =============================================================================
   140) Hodváb: písaná veta väčšia, na jednom riadku a vycentrovaná
   (Peter 19. 9. 2026: „ten text SME S VAMI UŽ, čo sa vypisuje, môže byť väčší").
   Odmerané: nadpis je flex kontajner (806 px pri 1440 px okne), ale riadok vnútri
   dostal len 589 px a mal `white-space: normal`, takže sa veta lámala na dva
   riadky - `nowrap` na samotnom nadpise nestačil, musí byť na riadku. Riadok bol
   navyše tlačený doľava, kým nadnadpis aj tlačidlo sú vycentrované.
   Veľkosť: pri 61 px potrebuje najdlhšia veta („Sme s Vami už 9 rokov 🙂“) asi
   620 px, teda ~10,1 px šírky na 1 px písma. Pri 5vw to vychádza na 91 % stĺpca
   na každej šírke od 1100 do 1920 px, takže sa nikde neoreže.
   ========================================================================== */
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { justify-content: center; }
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis .ox-uvod__riadok {
	white-space: nowrap; flex: 0 0 auto;
}
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(32px, 5vw, 76px); }
}
/* Nadpis je flex STĹPEC, takže vodorovné vycentrovanie riadka robí align-items,
   nie justify-content (to ovláda zvislú os). Bez toho ostal riadok pri ľavej hrane,
   hoci nadnadpis aj tlačidlo boli v strede. */
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { align-items: center; }

/* =============================================================================
   140b) Hodváb: nadpis späť na dlhšiu vetu (Peter 19. 9. 2026: „Sme s Vami už viac
   ako 8 rokov → viac ako 9 rokov sa vymaže").
   Najdlhšia veta má teraz 32 znakov aj so smajlíkom. Odmerané: pri 72 px potrebuje
   asi 965 px, kým stĺpec má pri 1440 px okne 806 px - preto ide horná hranica dole
   na 60 px, čo dá asi 93 % stĺpca na každej šírke od 1100 do 1920 px.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(26px, 3.9vw, 60px); }
}
/* 140c) Veta sa opäť skrátila na „Sme s Vami už 9 rokov 🙂" (23 znakov), takže
   nadpis môže ísť späť nahor - pri 5vw zaberá asi 91 % stĺpca na každej šírke
   od 1100 do 1920 px. */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(32px, 5vw, 76px); }
}

/* =============================================================================
   141) VALIDÁTOR ZOSTAVY V ÚZKOM PANELI (Peter 19. 9. 2026: „tu je rozbité toto").
   V mini-košíku má panel 440 px a po odrátaní odsadení ostane riadku asi 330 px.
   Blok 125 počítal so širokou pokladňou: `.bt-row-text` mal základ 220 px a výber
   príchute 200 px, čo sa do 330 px nezmestí - textový stĺpec sa preto stlačil na
   šírku jedného znaku a názov sa lámal po písmenách.
   Riešime to šírkou SAMOTNÉHO boxu, nie šírkou okna: box je kontajner a pod 430 px
   sa všetko poskladá pod seba. Rovnaké pravidlo tak platí aj pre úzku dlaždicu
   prevádzky v pokladni, kde je okno široké, ale box úzky.
   ========================================================================== */
.ox-bt { container-type: inline-size; container-name: oxbt; }
@container oxbt (max-width: 430px) {
	.ox-bt .bt-row-main { flex-wrap: wrap; row-gap: 8px; }
	.ox-bt .bt-row-text { flex: 1 1 100%; min-width: 0; order: 2; }
	.ox-bt .bt-ico { order: 1; }
	.ox-bt .bt-status { order: 1; margin-left: auto; }
	.ox-bt .bt-row-action { padding-left: 0; }
	.ox-bt .bt-flavour-row { flex-wrap: wrap; }
	.ox-bt .bt-flavour-select { flex: 1 1 100%; }
	.ox-bt .bt-flavour-row .bt-quick-add { flex: 1 1 100%; justify-content: center; }
}
/* Poistka pre prehliadač bez kontajnerových dopytov: v mini-košíku je box vždy úzky. */
.ox-bt--mk .bt-row-main { flex-wrap: wrap; row-gap: 8px; }
.ox-bt--mk .bt-row-text { flex: 1 1 100%; min-width: 0; }
.ox-bt--mk .bt-row-action { padding-left: 0; }
.ox-bt--mk .bt-flavour-row { flex-wrap: wrap; }
.ox-bt--mk .bt-flavour-select { flex: 1 1 100%; }
.ox-bt--mk .bt-flavour-row .bt-quick-add { flex: 1 1 100%; justify-content: center; }
/* dlhé názvy sa nesmú lámať po písmenách ani v najužšom prípade */
.ox-bt .bt-row-title, .ox-bt .bt-row-need, .ox-bt .bt-unit { overflow-wrap: break-word; word-break: normal; }
/* 140d) Najdlhšia veta je opäť „Sme s Vami už viac ako 8 rokov" (30 znakov).
   Odmerané: Anton potrebuje asi 0,385 em na znak, teda 11,55 em na celú vetu.
   Pri 4,4vw to vychádza na 91 % stĺpca na každej šírke od 1100 do 1920 px, takže
   sa veta ani v najdlhšom okamihu písania neoreže. */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(27px, 4.4vw, 66px); }
}

/* =============================================================================
   142) Hodváb: písaná veta o 1,5 px väčšia (Peter 19. 9. 2026).
   Pri 1440 px zaberala najdlhšia veta 779 z 806 px stĺpca, teda 97 % - samotné
   zväčšenie by ju dostalo na 99 % a pri zaokrúhľovaní by sa orezala. Preto sa
   zároveň zužuje medzera medzi textom a videom, čím stĺpec získa ~16 px.
   Video si drží svojich 40 %, mení sa len odsadenie textu.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 { --h9-medzera: clamp(10px, 1.4vw, 24px); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred {
		padding-right: calc(40vw + var(--h9-medzera, 18px));
	}
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: clamp(28px, 4.5vw, 67.5px); }
}

/* =============================================================================
   143) 3D koleso: nábeh pri príchode do záberu (Peter 19. 9. 2026: „vždy, keď
   scrollnem zhora na tento widget, nech sa načíta, ako keď prehodím v katalógu
   fotiek šípkou, a nech sa aj ten katalóg nejako tranzíciou zobrazí").
   JS pri každom príchode nasadí .ox-msr--prichod a po sekunde ju zloží, takže sa
   nábeh dá prehrať znova; zároveň spraví jeden krok kolesa, ten istý, čo robí šípka.
   Karty prilietajú s malým oneskorením za sebou, aby to pôsobilo ako rozdanie
   katalógu, nie ako jedno hromadné bliknutie.
   ⚠️ Koleso má vlastný `transform` z JS (rotácia), preto sa animuje LEN obal
   .ox-msr__scena - inak by sme si transformáciu prepísali a koleso by poskočilo.
   ========================================================================== */
@keyframes ox-msr-prichod {
	from { opacity: 0; transform: translateY(34px) scale(.955); }
	to   { opacity: 1; transform: none; }
}
@keyframes ox-msr-karta-prichod {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
/* ⚠️⚠️ 19. 9. 2026 (Peter: „stále preblikáva"): scéna NESMIE dostať `transform`.
   Sú v nej karty v 3D priestore (preserve-3d + rotateY z JS) a akýkoľvek scale či
   posun na ich rodičovi prinúti prehliadač prekresliť celú 3D vrstvu - to je ten
   blik. Scéna preto nabieha IBA krytím, pohyb nesie text vľavo, ktorý je plochý.
   `will-change` a `backface-visibility` držia scénu na vlastnej vrstve. */
html[data-tema^="21"] .ox-msr__scena { backface-visibility: hidden; }
html[data-tema^="21"] .ox-msr--prichod .ox-msr__scena {
	animation: ox-msr-prichod-tichy 1.05s ease .12s both;
	will-change: opacity;
}
html[data-tema^="21"] .ox-msr--prichod .ox-msr__stav--aktivny {
	animation: ox-msr-karta-prichod .8s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-tema^="21"] .ox-msr--prichod .ox-msr__sekcia {
	animation: ox-msr-karta-prichod .8s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-tema^="21"] .ox-msr--prichod .ox-msr__bodky,
html[data-tema^="21"] .ox-msr--prichod .ox-msr__arw {
	animation: ox-msr-prichod-tichy .7s ease .55s both;
}
/* pri obmedzení animácií ostáva len prelínanie, bez posunu a zmenšenia */
@keyframes ox-msr-prichod-tichy { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
	html[data-tema^="21"] .ox-msr--prichod .ox-msr__scena,
	html[data-tema^="21"] .ox-msr--prichod .ox-msr__bodky,
	html[data-tema^="21"] .ox-msr--prichod .ox-msr__arw,
	html[data-tema^="21"] .ox-msr--prichod .ox-msr__stav--aktivny {
		animation: ox-msr-prichod-tichy .5s ease both;
	}
}

/* =============================================================================
   144) Hodváb na veľkých obrazovkách (Peter 19. 9. 2026: „na televízore cez Mac je
   to malé, veľké medzery naľavo napravo; na PC to ide od ľavého kraja až po video").
   Príčina: všetky tri riadky mali hornú hranicu (nadpis 67,5 px, nadnadpis 24 px,
   typy 12,5 px). Do 1500 px sa hranica neprejaví, nad ňou sa sadzba prestane
   zväčšovať, hoci stĺpec rastie ďalej - preto tie prázdne boky.
   Hranice rušíme a veľkosť viažeme čisto na šírku okna, takže text vypĺňa stĺpec
   rovnako na 1440 px aj na 4K televízore. Dolné hranice ostávajú.
   ========================================================================== */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { font-size: max(28px, 4.5vw); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: max(16px, 1.6vw); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 { font-size: max(9px, .8vw); }
	html[data-tema^="21"] .ox-heroN--h9 .ox-btn--hlavne { font-size: max(14px, .98vw); padding: max(13px, .9vw) max(22px, 1.55vw); }
}

/* =============================================================================
   145) Horná lišta o 2 px väčšia (Peter 19. 9. 2026: „všetky elementy v top bare
   zväčši, ale o 2 pixely, čiže o malinko") a nadnadpis hrdinu o 2 px menší.
   Lišta: písmo odkazov 14,5 → 16,5 px, pilulka B2B 12,5 → 14,5 px, kruhové
   ikonové tlačidlá 44 → 46 px, značka 42 → 44 px a vnútro lišty 70 → 72 px,
   aby sa väčšie prvky zmestili a nerozbili zaoblenie.
   ========================================================================== */
html[data-ox-hlavicka="2g"] .ox-hlavicka__vnutro { min-height: 72px; }
html[data-ox-hlavicka="2g"] .ox-logo__znak { height: 44px; }
/* sadzba odkazov sa mení priamo v bloku 112b, ktorý ju drží cez !important */
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-ikonbtn,
html[data-ox-hlavicka="2g"] .ox-hladat-pole {
	width: 46px; height: 46px; min-width: 46px; max-width: 46px;
}
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-ikonbtn svg,
html[data-ox-hlavicka="2g"] .ox-hladat-pole svg { width: 21px; height: 21px; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-kosik-pocet { font-size: 12px; }

/* nadnadpis hrdinu o 2 px menší: 1,6vw dá pri 1440 px 23 px, potrebujeme 21 px,
   čo je 1,46vw; dolná hranica ide z 16 na 14 px, aby sa rozdiel držal aj dole */
@media (min-width: 1001px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r1 { font-size: max(14px, 1.46vw); }
}

/* =============================================================================
   146) 3D koleso: nadpis sekcie nad titulným textom vľavo (Peter 19. 9. 2026:
   „tento text zmenši, bielym, a pridaj ho nad text titulný, naľavo od katalógu
   fotiek"). Predtým to bol veľký tmavý nadpis nad celým blokom; tu je z neho
   drobný biely riadok s linkou, ktorý sedí v rovnakej osi ako kicker pod ním.
   ⚠️ Javisko prekrýva stavy na sebe (position: absolute), preto nadpis NESMIE byť
   jedným z nich - je to samostatný statický riadok nad nimi.
   ========================================================================== */
/* ⚠️ Javisko je mriežka s JEDNOU oblasťou „stav", v ktorej ležia všetky stavy na
   sebe. Statický odsek bez vlastnej oblasti sa preto pridal AŽ POD ne - preto sa
   nadpis prvýkrát objavil pod textom. Dostáva vlastný riadok nad stavmi. */
html[data-tema^="21"] .ox-msr__javisko {
	grid-template-areas: "nadpis" "stav";
	grid-template-rows: auto auto;
	align-content: center;
}
html[data-tema^="21"] .ox-msr__sekcia {
	grid-area: nadpis;
	margin: 0 0 clamp(10px, 1.1vw, 20px);
	font-family: var(--sk-font-nadpis); font-weight: 400;
	font-size: clamp(27px, 3.8vw, 58px);      /* rovnaká veľkosť aj písmo ako titulok */
	line-height: 1.05; letter-spacing: .005em;
	text-transform: uppercase; color: #fff;
	max-width: 100%; overflow-wrap: anywhere;
	position: relative; z-index: 3;
}
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-msr__sekcia { text-align: center; }
}

/* =============================================================================
   147) Sekcia 01: biele porovnanie už nie je hore hranaté (Peter 19. 9. 2026:
   „toto nech nie je také hranaté, nech je to ako vrch toho widgetu zaoblené").
   Doska má zaoblenie 30 px dokola, ale biely pás porovnania v nej mal `0 0 30 30`,
   takže na rozhraní bielej a červenej vznikla ostrá vodorovná hrana cez celú šírku.
   Vrch dostáva to isté zaoblenie ako doska.
   ========================================================================== */
html[data-tema^="21"] .ox-s01 .ox-s01__porovnanie { border-radius: 30px; }
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-s01 .ox-s01__porovnanie { border-radius: 22px; }
}

/* =============================================================================
   148) Sekcia 01: červená doska končí zaoblene (Peter 19. 9. 2026: „zaobli spodok,
   to nad porovnaním, widget čo má...").
   Doska síce má border-radius 30 px, ale biele porovnanie v nej siahalo od hrany
   po hranu a až na samé dno, takže zaoblené rohy dosky boli pod ním schované a
   červená sa opticky končila ostrou vodorovnou hranou. Porovnanie teraz necháva
   po bokoch aj dole pruh dosky, takže je zaoblenie vidieť.
   ========================================================================== */
/* 19. 9. 2026 Peter: „porovnanie nech je pod tým elementom, tak ako to bolo, IBA
   rohy zaoblené" - odsadenie sa ruší, ostáva pôvodná šírka od hrany po hranu. */
html[data-tema^="21"] .ox-s01 .ox-s01__porovnanie {
	margin-inline: 0; margin-bottom: 0; width: auto;
}

/* =============================================================================
   149) 3D koleso: nadpis sekcie na jeden riadok (Peter 19. 9. 2026).
   Odmerané: veta má 31 znakov, Anton potrebuje asi 0,385 em na znak, teda 11,9 em.
   Ľavý stĺpec má 436 px pri 1100 px okne a najviac 628 px (ďalej ho drží mriežka),
   takže veľkosť musí vychádzať z neho: 3,2vw so stropom 50 px vyjde na 87 až 95 %
   stĺpca a veta sa zmestí na jeden riadok na každej šírke.
   ========================================================================== */
/* Odmerané na živej stránke: Anton potrebuje 0,454 em na znak (nie 0,385, ako som
   najprv odhadol), teda 14,06 em na túto vetu. Preto 2,75vw so stropom 44 px. */
html[data-tema^="21"] .ox-msr__sekcia {
	font-size: min(44px, 2.75vw);
	white-space: nowrap;
}
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-msr__sekcia { white-space: normal; font-size: clamp(22px, 5.4vw, 34px); }
}

/* =============================================================================
   150) Sekcia 01: text nabieha po častiach ako pri kolese (Peter 19. 9. 2026:
   „nech aj text má tranzíciu ako keď sa mení text naľavo od katalógu obrázkov").
   Koleso používa `ox-msr-nabeh` (0,75 s, posun 24 px) s oneskorením na každej
   časti. Tu robíme to isté pre kicker, nadpis, odsek a čipy, aby text prichádzal
   zhora nadol a nie celý naraz. Plagát vpravo ide ako posledný.
   ========================================================================== */
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat--karta {
	animation: ox-msr-nabeh .75s var(--sk-prechod) both;
}
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko { animation-delay: .05s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 { animation-delay: .16s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p { animation-delay: .28s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy { animation-delay: .40s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div:last-child > * { animation-delay: .34s; }
/* Časti majú vlastnú animáciu, takže spoločný prechod rodiča by sa s ňou bil:
   rodič už len rozjasní plochu, posun nechávame na jednotlivé časti. */
html[data-tema^="21"] .ox-s01 > .ox-s01__manifest { transform: none; }

/* =============================================================================
   151) Sekcia 01: pomalší a čitateľnejší nábeh textu (Peter 19. 9. 2026: „písmo
   nabehne moc rýchlo"). Časti idú z 0,75 s na 1,15 s a rozostupy medzi nimi sa
   zdvojnásobujú, takže sa dá sledovať poradie kicker → nadpis → odsek → čipy.
   Doska pod nimi sa rozjasňuje dlhšie (1,2 s), aby sa text neobjavil skôr než ona.
   ========================================================================== */
html[data-tema^="21"] .ox-s01 {
	transition: opacity 1.2s var(--sk-prechod), transform 1.2s var(--sk-prechod);
}
html[data-tema^="21"] .ox-s01 > * {
	transition: opacity 1.05s var(--sk-prechod), transform 1.05s var(--sk-prechod);
}
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat--karta {
	animation-duration: 1.15s;
}
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko { animation-delay: .10s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 { animation-delay: .32s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p { animation-delay: .56s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy { animation-delay: .80s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div:last-child > * { animation-delay: .46s; }

/* =============================================================================
   152) 3D koleso: pomalší nábeh textov (Peter 19. 9. 2026: „príliš rýchlo sa
   ukážu"). Jadro má na častiach stavu 0,75 s s oneskorením z premennej --d, ktorú
   nastavuje markup (0,30 s + 0,06 s na odsek). Predlžujeme trvanie na 1,2 s a
   oneskorenia násobíme 1,8-krát, takže poradie kicker → nadpis → odsek → akcie sa
   dá sledovať. Odchod starého stavu necháme rýchly (0,24 s) - keby sa spomalil,
   prekrýval by sa s príchodom nového a text by bol chvíľu dvojitý.
   ========================================================================== */
html[data-tema^="21"] .ox-msr--pohyb .ox-msr__stav--aktivny .ox-msr__cast {
	animation-duration: 1.2s;
	animation-delay: calc(var(--d, 0s) * 1.8);
}
/* nadpis sekcie a text pri PRÍCHODE do záberu idú rovnakým tempom */
html[data-tema^="21"] .ox-msr--prichod .ox-msr__stav--aktivny,
html[data-tema^="21"] .ox-msr--prichod .ox-msr__sekcia {
	animation-duration: 1.15s;
}
html[data-tema^="21"] .ox-msr--prichod .ox-msr__sekcia { animation-delay: .06s; }
html[data-tema^="21"] .ox-msr--prichod .ox-msr__stav--aktivny { animation-delay: .24s; }

/* =============================================================================
   153) Sekcia 01: nadpis vychádza zdola ako v kolese (Peter 19. 9. 2026: „pridaj
   pre texty efekt ako má tento text pri zmene obrázku v katalógu obrázkov").
   Koleso používa `ox-msr-vjazd`: riadok je orezaný a sadzba doň vyjde zospodu.
   Tu to robíme na oboch riadkoch nadpisu (h2 a jeho <i>), takže text nevybledne,
   ale vystúpi. Kicker, odsek a čipy ostávajú na jemnom rozjasnení - keby vyskakovali
   všetky, blok by sa hýbal ako celok a stratil by sa dôraz na nadpis.
   ⚠️ Orezanie potrebuje vlastný riadok pre každú časť, preto `display: block`
   a malý spodný vnútorný okraj, inak by sa orezali dolné dĺžky písmen (ý, Ž).
   ========================================================================== */
html[data-tema^="21"] .ox-s01__manifest > div > .ox-h2 {
	overflow: hidden; padding-bottom: .1em;
}
html[data-tema^="21"] .ox-s01__manifest > div > .ox-h2 > i { display: block; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 {
	animation: none;                      /* pohyb nesie vnútro, nie celý nadpis */
	opacity: 1;
}
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 > i {
	animation: ox-msr-vjazd .95s var(--sk-prechod) .34s both;
}
/* prvý riadok nadpisu nie je v <i>, preto ho posunieme cez vlastný pseudo-obal:
   text pred <i> je priamy textový uzol, ktorý sa animovať nedá - namiesto toho
   vyjde zospodu celý nadpis a <i> ho nasleduje s oneskorením */
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 {
	animation: ox-msr-vjazd .95s var(--sk-prechod) .18s both;
}

/* =============================================================================
   154) Sekcia 01: doska sa meria od OKNA, nie od zastropovaného obalu
   (Peter 19. 9. 2026: „na Macu ukazuje hrubšie biele boky, zúž ich, môžeš aj na PC
   o trošičku nech je širší ten widget").
   Nešlo o rozdiel vo vykresľovaní: `.ox-wrap` má strop 1320 px, takže na širšom
   okne (MacBook 1728 px) ostane po bokoch 204 px, kým na 1440 px len 63 px. Doska
   preto vystupuje z obalu a necháva pevný okraj bez ohľadu na šírku obrazovky.
   ⚠️ `100vw` zahŕňa posuvnú lištu, preto sa jej šírka odpočítava cez `--ox-scroll`,
   ktorú meria app.js - inak by doska na Windowse pretiekla o jej šírku.
   ========================================================================== */
html[data-tema^="21"] .ox-s01 {
	--ox-s01-okraj: clamp(16px, 2.4vw, 44px);
	max-width: none;
	margin-inline: calc(50% - var(--ox-okno, 100vw) / 2 + var(--ox-s01-okraj));
}
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-s01 { --ox-s01-okraj: 10px; }
}

/* =============================================================================
   155) Ešte pomalšie vykresľovanie textov (Peter 19. 9. 2026: „ešte trochu spomal
   to vykresľovanie textu aj v tom druhom widgete aj v tomto").
   Sekcia 01: časti z 1,15 s na 1,5 s, rozostupy o tretinu dlhšie.
   3D koleso: časti stavu z 1,2 s na 1,55 s a oneskorenia z markupu sa násobia
   2,2-krát (predtým 1,8). Odchod starého textu ostáva krátky - keby sa spomalil,
   prekrýval by sa s príchodom nového.
   ========================================================================== */
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat--karta {
	animation-duration: 1.5s;
}
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko { animation-delay: .12s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 { animation-delay: .42s; animation-duration: 1.35s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 > i { animation-duration: 1.35s; animation-delay: .70s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p { animation-delay: .78s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy { animation-delay: 1.08s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div:last-child > * { animation-delay: .60s; }
html[data-tema^="21"] .ox-s01 { transition-duration: 1.5s; }
html[data-tema^="21"] .ox-s01 > * { transition-duration: 1.35s; }

html[data-tema^="21"] .ox-msr--pohyb .ox-msr__stav--aktivny .ox-msr__cast {
	animation-duration: 1.55s;
	animation-delay: calc(var(--d, 0s) * 2.2);
}
html[data-tema^="21"] .ox-msr--prichod .ox-msr__stav--aktivny,
html[data-tema^="21"] .ox-msr--prichod .ox-msr__sekcia { animation-duration: 1.5s; }
html[data-tema^="21"] .ox-msr--prichod .ox-msr__scena { animation-duration: 1.35s; }

/* =============================================================================
   156) Sekcia 01: porovnanie nabieha až vtedy, keď k nemu prídem (Peter 19. 9. 2026).
   Blok 109 animuje `.ox-s01 > *`, a porovnanie je priamy potomok dosky - prehralo
   si teda nábeh v okamihu, keď do záberu prišla HORNÁ hrana dosky, hoci samo leží
   asi 1100 px nižšie. Vyradíme ho zo spoločného nábehu a dáme mu vlastnú triedu,
   ktorú nasadzuje samostatný spúšťač podľa jeho polohy.
   ========================================================================== */
html[data-tema^="21"] .ox-s01 > .ox-s01__porovnanie,
html[data-tema^="21"] .ox-s01--in > .ox-s01__porovnanie {
	opacity: 0; transform: translateY(30px);
	transition: opacity 1.1s var(--sk-prechod), transform 1.1s var(--sk-prechod);
	transition-delay: 0s;
}
html[data-tema^="21"] .ox-s01 > .ox-s01__porovnanie--in,
html[data-tema^="21"] .ox-s01--in > .ox-s01__porovnanie--in {
	opacity: 1; transform: none;
}

/* =============================================================================
   157) Domovská stránka končí jedinou výzvou do obchodu (Peter 19. 9. 2026).
   Sekcia „Prečo my" aj podpisová sekcia návrhu sa presunuli na /produkty?tag=oxo-red,
   tu ostáva len tlačidlo. Aby nepôsobilo stratene, dostáva vzduch a je na stred.
   ========================================================================== */
html[data-tema^="21"] .ox-doobchodu { padding-block: clamp(46px, 6vw, 96px); }
html[data-tema^="21"] .ox-doobchodu > .ox-wrap { display: flex; justify-content: center; }
html[data-tema^="21"] .ox-doobchodu .ox-btn--velke { min-width: min(320px, 82vw); justify-content: center; }

/* =============================================================================
   158) OXO BUBBLE TEA (RED): vlastná prístupová stránka (Peter 19. 9. 2026)
   „keď tuto prehodím OXO Bubble Tea red, tak ma musí hodiť na stránku novú, kde
   daj všetky tie widgety - tam nech je tlačidlo DO OBCHODU a až to presmeruje
   na produkty.“ Trasa /oxo-red nesie to, čo bolo pôvodne pod hrdinom na domovskej
   stránke: „Prečo my“, film prípravy a FAQ. Mriežka produktov na nej nie je,
   ide sa do nej tlačidlom - hore pri nadpise a ešte raz veľkým na konci.
   ========================================================================== */
#ox-obsah[data-trasa="oxo-red"] > .ox-sek:first-child { padding-top: clamp(30px, 4.4vw, 72px); }
#ox-obsah[data-trasa="oxo-red"] .ox-redzona__hlava { align-items: flex-end; row-gap: 18px; }
#ox-obsah[data-trasa="oxo-red"] .ox-redzona__cta { flex: 0 0 auto; align-self: flex-end; }
@media (max-width: 760px) {
	#ox-obsah[data-trasa="oxo-red"] .ox-redzona__cta { width: 100%; justify-content: center; }
}
#ox-obsah[data-trasa="oxo-red"] .ox-doobchodu { padding-top: clamp(20px, 2.6vw, 40px); }

/* =============================================================================
   159) ANTON MÁ JEDINÝ REZ (400): koniec syntetického tučnenia (Peter 19. 9. 2026)
   „všade daj písmo do tejto sekcie také, aké používame inde, tuším Anton, a sprav
   to čitateľnejšie.“ Meranie na 89co.eu ukázalo, že písmo TO Anton je - lenže sa
   pýta v reze 700. Import v index.php je `family=Anton` bez váh, teda jediný rez
   400, takže prehliadač tučný rez dorába sám: ťahy sa rozmažú, medzery medzi
   písmenami sa stratia a text vyzerá inak než nadpisy, ktoré 400 dostali
   (.ox-h1-.ox-h4 v _zaklad.css r. 129). Postihnuté boli záložky sortimentu,
   názvy produktov (h3 = tučné od prehliadača), kroky prípravy a pár <b>.
   Vraciame pravý rez a k nemu väčšiu veľkosť, prestrk a tmavšiu sivú.
   ========================================================================== */
html[data-tema^="21"] .ox-produkt__nazov,
html[data-tema^="21"] .ox-produkt__nazov a,
html[data-tema^="21"] .ox-priprava__krok b,
html[data-tema^="21"] .ox-priprava__cip b,
html[data-tema^="21"] .ox-msr__nacitava b,
html[data-tema^="21"] .ox-show__cesta li b,
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip,
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip { font-weight: 400; }

/* záložky sortimentu: o 2 px väčšie, širší prestrk, tmavšia sivá (8,4:1 na bielej) */
#ox-obsah[data-trasa="produkty"] #ox-znacky .ox-chip,
#ox-obsah[data-trasa="produkty"] #ox-filtre .ox-chip {
	font-size: clamp(16px, 1.5vw, 21px); line-height: 1.3; letter-spacing: .035em; color: #574B47;
}
#ox-obsah[data-trasa="produkty"] .ox-chip [data-pocet] { font-size: 12px; color: #574B47; }
#ox-obsah[data-trasa="produkty"] #ox-pocet { font-size: 12.5px; color: #574B47; }

/* názov produktu: pravý Anton znesie o niečo väčší stupeň a potrebuje viac
   riadku aj prestrku, aby slovenská diakritika (ď, ĺ, Š) nesadala na susedný riadok */
html[data-tema^="21"] .ox-produkt__nazov {
	font-size: clamp(19px, 1.45vw, 21px); line-height: 1.26; letter-spacing: .012em; color: #1B1B1B;
}
html[data-tema^="21"] .ox-produkt__meta { font-size: 13px; }
html[data-tema^="21"] .ox-odznak { font-size: 11px; }

/* =============================================================================
   160) Tlačidlo DO OBCHODU: pilulka vo farbe hornej lišty (Peter 19. 9. 2026)
   „tlačidlo DO OBCHODU sprav nie také hranaté a lepšiu farbu ako má top bar.“
   Téma NoirG 3 má --sk-btn-r: 2px (21g3-noirg3.css r. 31), takže výzva vychádzala
   ako ostrý obdĺžnik v plochej červenej. Preberáme tvar aj gradient pilulky
   „B2B Zákaznícka zóna“ z hlavičky (r. 6011): tmavé víno 8E0010 → 5E000B,
   plný rádius a mäkký tieň v tej istej farbe.
   ========================================================================== */
/* ⚠️⚠️ 19. 9. 2026 Peter: „zmeň v týchto tlačidlách farbu takú, akú máme
   na webe inde, tmavú červenú.“ Tmavšia značková červená je --sk-akcent-tmavy
   (#D60019 v _zaklad.css r. 15), tú používame aj na odkazy. Žiadny gradient,
   žiadne víno - jedna plocha v tejto farbe. */
.ox-doobchodu .ox-btn--hlavne,
.ox-redzona__cta.ox-btn--hlavne {
	border-radius: 999px; border-color: transparent; color: #fff;
	background: var(--sk-akcent-tmavy, #D60019);
	box-shadow: 0 18px 38px -20px rgba(214, 0, 25, .85);
	letter-spacing: .06em;
	transition: background .22s var(--sk-prechod, ease), transform .22s var(--sk-prechod, ease), box-shadow .22s var(--sk-prechod, ease);
}
@media (hover: hover) and (pointer: fine) {
	.ox-doobchodu .ox-btn--hlavne:hover,
	.ox-redzona__cta.ox-btn--hlavne:hover {
		background: #B00015;
		transform: translateY(-2px);
		box-shadow: 0 24px 46px -20px rgba(214, 0, 25, .85);
	}
}

/* =============================================================================
   161) Sekcia 01: tranzícia o kúsok rýchlejšie (Peter 19. 9. 2026:
   „tranzíciu na tento widget daj o trošičku rýchlejšiu.“)
   Blok 155 ju predtým spomalil na 1,5 s, teraz ide o pätinu späť: 1,2 s a
   rozostupy úmerne kratšie. Tvar krivky ani poradie sa nemenia, mení sa len
   tempo - 3D kolesa sa to netýka, tam ostáva 1,55 s.
   ========================================================================== */
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat,
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__plagat--karta {
	animation-duration: 1.2s;
}
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-oko { animation-delay: .1s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 { animation-delay: .34s; animation-duration: 1.08s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-h2 > i { animation-duration: 1.08s; animation-delay: .56s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > p { animation-delay: .62s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy { animation-delay: .86s; }
html[data-tema^="21"] .ox-s01--in .ox-s01__manifest > div:last-child > * { animation-delay: .48s; }
html[data-tema^="21"] .ox-s01 { transition-duration: 1.2s; }
html[data-tema^="21"] .ox-s01 > * { transition-duration: 1.08s; }

/* =============================================================================
   162) Sekcia 01: užší červený lem okolo obsahu (Peter 19. 9. 2026:
   „tento widget o trošičku zmenši, ale tak, že odstráň nie biele okolo neho,
   ale červené okolo obsahu.“)
   Biely okraj po bokoch (--ox-s01-okraj z bloku 154) sa nedotýkame, skracuje sa
   vnútorné odsadenie dosky: 60 px → 42 px na širokom okne, teda doska je o 36 px
   nižšia aj užšia, kým text a plagát ostávajú rovnako veľké.
   ========================================================================== */
html[data-tema^="21"] .ox-s01--a4 { padding: clamp(22px, 2.8vw, 42px); }

/* =============================================================================
   163) Úvodná scéna: veta pri scrollovaní stúpa, ale neuhýba do strán
   (Peter 19. 9. 2026: „keď začnem scrollovať, tak text tento nech sa neposúva
   doľava a sám, ale celý ten element nech scrolluje hore, ale neposúva sa
   do strán.“)
   Blok s riadkami (r. 4015-4016 a mobilná verzia r. 4062-4063) im dával aj
   vodorovný posun ±14 vw a náklon ±4°, takže veta pri prvom pohybe kolieska
   odletela doľava a nakláňala sa. Ostáva len zvislá zložka - element odchádza
   hore spolu so scénou, vodorovne sa nehýbe vôbec.
   ========================================================================== */
html[data-tema^="21"] .ox-uvod__riadok:nth-child(1),
html[data-tema^="21"] .ox-uvod__riadok:nth-child(2) {
	transform: translateY(calc(var(--uvod-p) * -18vh));
}

/* =============================================================================
   164) Sekcia 01: doska o kúsok užšia (Peter 19. 9. 2026:
   „tento widget nech nie je tak široký - o trošku ho zúž.“)
   Mení sa len biely okraj po bokoch z bloku 154: z 44 px na 69 px pri 1920 px.
   Vnútorné odsadenie (blok 162) ostáva, takže obsah dostane rovnaký vzduch,
   len doska nesiaha tak blízko k hranám okna.
   ========================================================================== */
html[data-tema^="21"] .ox-s01 { --ox-s01-okraj: clamp(20px, 3.6vw, 76px); }
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-s01 { --ox-s01-okraj: 12px; }
}

/* =============================================================================
   165) Päta: pás „Novinky pre prevádzky“ na bielom (Peter 19. 9. 2026:
   „túto časť daj s bielym pozadím.“)
   Pás bol biely text na vínovom podklade päty. Teraz je z neho biely panel
   vnútri päty: tmavý text, svetlé pole formulára a tlačidlo v tmavšej
   značkovej červenej (#D60019 - tá istá ako „Do obchodu“, viď blok 160).
   ========================================================================== */
/* ⚠️ Prefix `html[data-tema]` je nutný: základné pravidlo
   `html[data-tema] #ox-pata p { color: #fff }` má vyššiu špecifickosť a text
   pod nadpisom by ostal biely na bielom (namerané 19. 9. 2026). */
html[data-tema] #ox-pata .ox-pata__pas {
	background: #fff; color: var(--sk-atrament, #1B1B1B);
	border-radius: var(--sk-r-velky, 14px); border-bottom: 0;
	padding: clamp(22px, 2.6vw, 38px); margin-bottom: 34px;
	box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .55);
}
html[data-tema] #ox-pata .ox-pata__pas-h { color: var(--sk-atrament, #1B1B1B); }
html[data-tema] #ox-pata .ox-pata__pas p { color: #574B47; }
html[data-tema] #ox-pata .ox-pata__form { background: #F4EFEA; }
html[data-tema] #ox-pata .ox-pata__input { background: #fff; color: var(--sk-atrament, #1B1B1B); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .12); }
html[data-tema] #ox-pata .ox-pata__input::placeholder { color: #857A76; }
html[data-tema] #ox-pata .ox-pata__input:focus { outline: 2px solid var(--sk-akcent-tmavy, #D60019); outline-offset: 1px; }
html[data-tema] #ox-pata .ox-pata__odoberat { background: var(--sk-akcent-tmavy, #D60019); color: #fff; }
html[data-tema] #ox-pata .ox-pata__odoberat:hover { background: #B00015; }
html[data-tema] #ox-pata .ox-pata__stav { color: #574B47; }
html[data-tema] #ox-pata .ox-pata__stav--ok { color: #1D7A2B; }
html[data-tema] #ox-pata .ox-pata__stav--chyba { color: #A3000F; }

/* =============================================================================
   144) 3D koleso: príchod ZHORA (Peter 21. 9. 2026: „nech je to ako pri zmene
   obrázku v katalógu - text vľavo príde postupne zospodu; iba keď idem zhora").
   JS pri vstupe zhora (scroll nadol) znovu nasadí .ox-msr__stav--aktivny, takže
   sa prehrá ten istý nábeh ako pri zmene karty (ox-msr-vjazd na písmenách,
   ox-msr-nabeh na odsekoch) a pridá značku .ox-msr--zhora. Blokový posun textu
   z bloku 143 by sa s písmenami zdvojil, preto ho tu vypíname; scéna si necháva
   svoje prelínanie krytím. Príchod zdola: JS triedu nedá → žiadna tranzícia.
   ========================================================================== */
html[data-tema^="21"] .ox-msr--prichod.ox-msr--zhora .ox-msr__stav--aktivny { animation: none; }

/* =============================================================================
   152) Sekcia 01 (manifest a4/a4b): tranzícia LEN na písmo a plagát (Peter 21. 9.
   2026: „pozadie nech je tam stále, lebo preblikuje; písmo nech sa nevykreslí tak
   rýchlo, ale môže začať o trošilinku skôr"). Červená doska (koreň) aj obal
   manifestu sú vždy viditeľné. Časti idú PRECHODOM, nie keyframe - sú hladké aj
   pri odchode a pri opakovanom vstupe. Plagát animuje jeho obal (div), aby si
   karta nechala vlastné naklonenie (keyframe z bloku 150 ho prepisoval na none).
   Skorší štart rieši prah 0,84 okna v JS (nabehPodlaScrollu).
   ========================================================================== */
html[data-tema^="21"] .ox-s01--a4,
html[data-tema^="21"] .ox-s01--a4 > .ox-s01__manifest { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > .ox-oko,
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > .ox-h2,
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > p,
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > .ox-s01__chipy,
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div:last-child {
	animation: none !important;
	opacity: 0; transform: translateY(26px);
	transition: opacity 1.7s var(--sk-prechod), transform 1.7s var(--sk-prechod);
	will-change: opacity, transform;
}
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > .ox-s01__plagat,
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > .ox-s01__plagat--karta { animation: none !important; }
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > .ox-oko,
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > .ox-h2,
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > p,
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy,
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div:last-child { opacity: 1; transform: none; }
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > .ox-oko { transition-delay: 0s; }
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > .ox-h2 { transition-delay: .2s; }
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > p { transition-delay: .4s; }
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div > .ox-s01__chipy { transition-delay: .6s; }
html[data-tema^="21"] .ox-s01--a4.ox-s01--in .ox-s01__manifest > div:last-child { transition-delay: .3s; }

/* =============================================================================
   153) Päta: pás noviniek na celú šírku a celý biely (Peter 21. 9. 2026: „toto
   vylepši a nech je to celé biele - na celú šírku"). Pás sedí v .ox-wrap, preto
   sa zápornými okrajmi vyťahuje na šírku okna a vnútorným odsadením vracia obsah
   na os stránky; overflow-x: clip na päte zachytí šírku posuvníka. Tlačidlo je
   jedna plocha --sk-akcent-tmavy (Petrovo pravidlo z 21. 9.: žiadne gradienty).
   ========================================================================== */
html[data-tema] #ox-pata { overflow-x: clip; }
html[data-tema] #ox-pata .ox-pata__pas {
	margin-inline: calc(50% - 50vw);
	margin-top: calc(-1 * clamp(48px, 5vw, 76px));
	margin-bottom: clamp(40px, 4.4vw, 60px);
	padding: clamp(44px, 5.4vw, 76px) calc(50vw - 50%);
	border-radius: 0; box-shadow: none;
	gap: clamp(28px, 4vw, 72px);
	background: #fff;
}
html[data-tema] #ox-pata .ox-pata__pas-h { font-size: clamp(34px, 3.6vw, 54px); margin-bottom: 12px; letter-spacing: .005em; }
html[data-tema] #ox-pata .ox-pata__pas p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; max-width: 46ch; }
html[data-tema] #ox-pata .ox-pata__form { background: #F4EFEA; padding: 8px; box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .06); }
html[data-tema] #ox-pata .ox-pata__input { padding: 16px 20px; font-size: 15px; }
html[data-tema] #ox-pata .ox-pata__odoberat { background: var(--sk-akcent-tmavy, #D60019); padding: 16px 24px; font-size: 13.5px; }
html[data-tema] #ox-pata .ox-pata__odoberat:hover { background: #B00015; }
@media (max-width: 900px) {
	html[data-tema] #ox-pata .ox-pata__pas { padding-top: clamp(32px, 6vw, 44px); padding-bottom: clamp(32px, 6vw, 44px); }
	html[data-tema] #ox-pata .ox-pata__pas p { max-width: none; }
}

/* =============================================================================
   154) JEDNA TMAVŠIA ČERVENÁ VŠADE + karty bez závoja + záclona s logom
   (Peter 21. 9. 2026: „v login a register forme uprav farbu z fialovej na takú,
   akú používame všade, a všade zjednoť novú tmavšiu červenú"; „pri preklikávaní
   podstránok nech je v strede logo OXO ako pri loading screene a nech to nejde
   až po vrch, iba po top bar").
   • token --sk-akcent = --sk-akcent-tmavy (#D60019); literály #E1001A v tomto
     súbore prepísané na #D60019; --ox-doska-cervena je jedna plochá farba.
   • prihlásenie a registrácia (doska): žiadny tmavý závoj ani gradient - ten robil
     z červenej bordovú až fialovú. Biela na #D60019 má 5,4:1, labely sú tučné.
   • .ox-21-zaclona: farba témy, logo z preloadera (--ox-preloader-logo nastavuje
     index.php na <html>), horný okraj podľa zmeranej hlavičky (JS, --ox-zaclona-top).
   ========================================================================== */
html[data-tema^="21"]:root { --sk-akcent: var(--sk-akcent-tmavy); }
html[data-tema^="21"] { --ox-doska-cervena: var(--sk-akcent-tmavy); }
html[data-tema^="21"] input[type="checkbox"], html[data-tema^="21"] input[type="radio"],
html[data-tema^="21"] input[type="range"], html[data-tema^="21"] progress { accent-color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] #ox-obsah[data-trasa="prihlasenie"] #ox-login {
	background: var(--sk-akcent-tmavy) !important;
	box-shadow: 0 1px 2px rgba(58, 0, 8, .18), 0 26px 60px -36px rgba(58, 0, 8, .55);
}
html[data-ox-reg="doska"][data-tema^="21"] #ox-reg-telo { background: var(--sk-akcent-tmavy) !important; }
/* záclona medzi podstránkami */
.ox-21-zaclona { background: var(--sk-akcent-tmavy); top: var(--ox-zaclona-top, calc(var(--ox-lista, 0px) + 74px)); }
.ox-21-zaclona::after { content: none; }
.ox-21-zaclona::before {
	content: ''; display: block; width: min(200px, 55vw); aspect-ratio: 720 / 394; background: #fff;
	-webkit-mask: var(--ox-preloader-logo) center / contain no-repeat; mask: var(--ox-preloader-logo) center / contain no-repeat;
	animation: ox-zaclona-dych 1.4s ease-in-out infinite;
}
@keyframes ox-zaclona-dych { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* =============================================================================
   155) VÝBEROVÉ POLIA S HĹADANÍM (Peter 21. 9. 2026: „nech viem vyhľadávať krajiny
   hore… pekný jednoduchý elegantný dizajn - aj do ostatných dropdownov").
   doplnky.js obalí každý select.ox-select do .ox-combo: natívny select ostáva
   skrytý v DOM a drží hodnotu (kód, ktorý číta .value alebo počúva change, ide
   bez zmeny). Podklad: superdesign „Refined Order Form UI" (biely panel, jemný
   rám, šípka, otvorenie translateY+scale), 21st Country Combobox #26105.
   ========================================================================== */
.ox-combo { position: relative; display: block; min-width: 0; }
.ox-combo__native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; }
.ox-combo__btn {
	width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 12px 11px 14px; border-radius: var(--sk-r-stredny, 12px); border: 1px solid var(--sk-linka, rgba(27, 27, 27, .16));
	background: #fff; color: var(--sk-text, #1B1B1B); font: 500 15px/1.25 var(--sk-font-text); text-align: left; cursor: pointer;
	transition: border-color .18s var(--sk-prechod), box-shadow .18s var(--sk-prechod);
}
.ox-combo__btn:hover { border-color: rgba(27, 27, 27, .38); }
.ox-combo--otvoreny .ox-combo__btn, .ox-combo__btn:focus-visible { border-color: var(--sk-akcent-tmavy); box-shadow: 0 0 0 3px rgba(214, 0, 25, .16); outline: none; }
.ox-combo__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-combo__kod { display: inline-block; font: 700 13px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; color: var(--sk-akcent-tmavy); margin-right: 8px; }
.ox-combo__sipka { flex: none; width: 16px; height: 16px; color: rgba(27, 27, 27, .55); transition: transform .2s var(--sk-prechod); }
.ox-combo--otvoreny .ox-combo__sipka { transform: rotate(180deg); }
.ox-combo--zamknuty .ox-combo__btn { background: rgba(255, 255, 255, .82); color: #4A4340; cursor: default; }
.ox-combo--zamknuty .ox-combo__sipka { opacity: .35; }
.ox-combo__panel {
	position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; width: max(100%, 280px); max-width: min(92vw, 420px);
	background: #fff; color: var(--sk-text, #1B1B1B); border-radius: 14px; border: 1px solid rgba(27, 27, 27, .08);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .06); overflow: hidden;
	transform-origin: top; animation: ox-combo-otvor .18s cubic-bezier(.16, 1, .3, 1) both;
}
.ox-combo__panel[hidden] { display: none; }
.ox-combo__panel--hore { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
.ox-combo__panel--vpravo { left: auto; right: 0; }
@keyframes ox-combo-otvor { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.ox-combo__hladat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(27, 27, 27, .08); color: rgba(27, 27, 27, .5); }
.ox-combo__hladat svg { width: 16px; height: 16px; flex: none; }
.ox-combo__hladat input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: 500 14.5px/1.2 var(--sk-font-text); color: var(--sk-text, #1B1B1B); padding: 2px 0; }
.ox-combo__hladat input::placeholder { color: rgba(27, 27, 27, .45); }
.ox-combo__zoznam { list-style: none; margin: 0; padding: 6px; max-height: 296px; overflow: auto; scrollbar-width: thin; }
.ox-combo__pol { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 14.5px; line-height: 1.3; cursor: pointer; color: var(--sk-text, #1B1B1B); }
.ox-combo__pol:hover, .ox-combo__pol--akt { background: rgba(214, 0, 25, .08); }
.ox-combo__pol[aria-selected="true"] { background: var(--sk-akcent-tmavy); color: #fff; }
.ox-combo__pol[aria-selected="true"] .ox-combo__kod { color: #fff; }
.ox-combo__pol[aria-disabled="true"] { opacity: .45; cursor: default; }
.ox-combo__pol--nic { color: rgba(27, 27, 27, .5); cursor: default; font-size: 13.5px; padding: 12px 10px; }
/* na červenej doske registrácie / v prihlásení sedí tlačidlo ako biele pole */
html[data-ox-reg="doska"] #ox-reg-telo .ox-combo__btn { border-color: transparent; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .8); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-combo--otvoreny .ox-combo__btn,
html[data-ox-reg="doska"] #ox-reg-telo .ox-combo__btn:focus-visible { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .34); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-combo--zamknuty .ox-combo__btn { background: rgba(255, 255, 255, .82); }
.ox-telefon .ox-combo { flex: 0 0 150px; }
@media (max-width: 640px) { .ox-telefon .ox-combo { flex-basis: 128px; } }

/* =============================================================================
   156) MÔJ ÚČET: aby sedel s webom (Peter 21. 9. 2026) - menu účtu ako pilulkový
   prepínač, aktívna položka v jednej plochej červenej, panely ako biele karty.
   ========================================================================== */
html[data-tema^="21"] .ox-ucet-menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--sk-krem, #FFF7E6); border-radius: 999px; width: fit-content; max-width: 100%; margin: 18px 0 28px; }
html[data-tema^="21"] .ox-ucet-menu .ox-chip { border: 0; background: transparent; padding: 10px 16px; border-radius: 999px; font: 600 14px/1 var(--sk-font-text); color: rgba(27, 27, 27, .75); cursor: pointer; }
html[data-tema^="21"] .ox-ucet-menu .ox-chip:hover { background: rgba(255, 255, 255, .8); color: var(--sk-text); }
html[data-tema^="21"] .ox-ucet-menu .ox-chip[aria-pressed="true"] { background: var(--sk-akcent-tmavy); color: #fff; }
html[data-tema^="21"] .ox-ucet-menu #ox-odhlasit { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] #ox-ucet-obsah .ox-panel { background: #fff; border-radius: var(--sk-r-velky, 20px); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 56px -40px rgba(0, 0, 0, .25); }
html[data-tema^="21"] #ox-ucet-obsah .ox-h3, html[data-tema^="21"] #ox-ucet-obsah h3 { font-family: var(--sk-font-nadpis); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
@media (max-width: 700px) { html[data-tema^="21"] .ox-ucet-menu { border-radius: 18px; width: 100%; } }

/* =============================================================================
   157) ZÁCLONA NIKDY NAD TOP BAROM (Peter 21. 9. 2026: „animácia stále prechádza
   cez top bar, keď som v inej sekcii než domov"). Doteraz sa posúval samotný
   fixný prvok, takže pri odchode nahor (translateY(-101 %)) prešiel cez zónu
   hlavičky. Teraz je prvok len NEHYBNÝ OREZÁVACÍ RÁM (top = spodok hlavičky
   z --ox-zaclona-top, overflow hidden) a posúva sa jeho ::after ako doska; logo
   (::before) ide s ňou a dýcha len krytím, aby si transform nechalo na posun.
   ========================================================================== */
.ox-21-zaclona { transform: none !important; transition: none !important; background: transparent !important; overflow: hidden; will-change: auto; }
.ox-21-zaclona::after {
	content: ''; position: absolute; inset: 0; z-index: 0; background: var(--sk-akcent-tmavy);
	transform: translateY(101%); will-change: transform; transition: transform .48s cubic-bezier(.76, 0, .24, 1);
}
.ox-21-zaclona::before { position: relative; z-index: 1; transform: translateY(100vh); transition: transform .48s cubic-bezier(.76, 0, .24, 1); }
.ox-21-zaclona--kryje::after, .ox-21-zaclona--kryje::before { transform: none; transition-duration: .26s; }
.ox-21-zaclona--odchadza::after { transform: translateY(-101%); transition-duration: .48s; }
.ox-21-zaclona--odchadza::before { transform: translateY(-100vh); transition-duration: .48s; }
.ox-21-zaclona--skok::after, .ox-21-zaclona--skok::before { transition: none; }
@keyframes ox-zaclona-dych { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
/* 155b) predvoľba: širšie, aby sa „+421 Slovensko" zmestilo celé (Peter 21. 9.) */
.ox-telefon .ox-combo { flex: 0 0 176px; }
.ox-telefon .ox-combo__btn { padding-left: 12px; padding-right: 10px; gap: 6px; }
@media (max-width: 640px) { .ox-telefon .ox-combo { flex-basis: 150px; } }
/* 157b) doska záclony musí byť PLNÁ červená (Peter 21. 9.: „teraz je to moc ružové
   a priehľadné") - pôvodné pravidlo vodoznaku (r. ~3944) dáva ::after opacity .16,
   ktorú doska zdedila. */
.ox-21-zaclona::after { opacity: 1 !important; font-size: 0; letter-spacing: 0; }
.ox-21-zaclona { opacity: 1 !important; }

/* ==========================================================================
   159) Peter 21. 9. 2026, dávka popoludní:
   a) Registrácia, krok Konto: „trošku uprac, aby sa zmestil na obrazovku,
      keďže je tam dosť voľného miesta" - doska širšia (1120 px), polia v mriežke
      4 stĺpcov (meno + e-mail | telefón + meno + priezvisko | heslo + potvrdenie),
      menšie odsadenia. Pod 861 px rieši jeden stĺpec základ (.ox-form--2).
   b) Pohár „späť hore": „sprav trošku užší" - len vodorovné zúženie kresby.
   c) Gréčtina: „(Κόκκινο)" v strednej pilulke bolo príliš vysoko - Google Translate
      balí text do vnorených <font style="vertical-align:inherit">, ktoré v <sup>
      dedia `super` a dvíhajú sa každý zvlášť. Kotvíme ich na baseline.
   d) Gréčtina: Anton nemá grécke znaky - nadpis písacieho stroja ide v gréčtine
      z Fira Sans Extra Condensed 800 (index.php, načíta sa len keď sa použije).
   ========================================================================== */
/* a) registrácia */
html[data-ox-reg="doska"] #ox-obsah[data-trasa="registracia"] .ox-wrap { max-width: 1120px !important; }
html[data-ox-reg="doska"] #ox-obsah[data-trasa="registracia"] .ox-sek { padding-top: clamp(18px, 2.4vw, 30px); padding-bottom: clamp(18px, 2.4vw, 30px); }
html[data-ox-reg="doska"] #ox-obsah[data-trasa="registracia"] .ox-h2 { margin-bottom: 10px; }
html[data-ox-reg="doska"] #ox-reg-kroky { margin-bottom: 22px; }
html[data-ox-reg="doska"] #ox-reg-telo { padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 38px); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-form { gap: 14px; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-pole { gap: 4px; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-h3 { padding-bottom: 8px; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-input,
html[data-ox-reg="doska"] #ox-reg-telo .ox-select { padding-top: 11px; padding-bottom: 11px; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-combo__btn { min-height: 48px; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-hint { font-size: 12.5px; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-reg-akcie { padding-top: 12px; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-reg-akcie .ox-btn--velke { min-height: 52px; padding-top: 13px; padding-bottom: 13px; }
@media (min-width: 861px) {
	html[data-ox-reg="doska"] #ox-k1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	html[data-ox-reg="doska"] #ox-k1 > #k-username-obal,
	html[data-ox-reg="doska"] #ox-k1 > #k-email-obal,
	html[data-ox-reg="doska"] #ox-k1 > #k-tel-obal,
	html[data-ox-reg="doska"] #ox-k1 > #k-heslo-obal,
	html[data-ox-reg="doska"] #ox-k1 > #k-heslo2-obal { grid-column: span 2; }
	html[data-ox-reg="doska"] #ox-k1 > #k-meno-obal,
	html[data-ox-reg="doska"] #ox-k1 > #k-priez-obal { grid-column: span 1; }
	html[data-ox-reg="doska"] #ox-k1 > .ox-h3,
	html[data-ox-reg="doska"] #ox-k1 > #ox-k1-chyba,
	html[data-ox-reg="doska"] #ox-k1 > .ox-reg-akcie { grid-column: 1 / -1; }
}
/* b) pohár */
.ox-dock .ox-pohar svg { transform: scaleX(.86); transform-origin: 50% 100%; }
/* c) gréčtina - horný index v pilulke */
#ox-hlavicka .ox-nav__znacka font { vertical-align: baseline !important; }
/* d) gréčtina - písmo nadpisu písacieho stroja */
html[data-tema^="21"] .ox-uvod--jazyk-el .ox-uvod__nadpis { font-family: 'Fira Sans Extra Condensed', var(--sk-font-nadpis); font-weight: 800; }
/* 159e) v 4-stĺpcovej mriežke sa poznámka „(Povinný údaj pre platbu kartou)" pri
   Priezvisku zalomila a vstup klesol pod Meno - poznámka ide pod popis v oboch
   poliach rovnako, takže riadky sedia. */
@media (min-width: 861px) {
	html[data-ox-reg="doska"] #ox-k1 > #k-meno-obal .ox-label__pozn,
	html[data-ox-reg="doska"] #ox-k1 > #k-priez-obal .ox-label__pozn { display: block; font-size: 11.5px; line-height: 1.25; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   160) Peter 21. 9. 2026, druhá dávka popoludní:
   a) Pokladňa „piesok" (jeho nastavený variant): „farby prispôsob ako na webe,
      čiže tmavšia červená" - celá paleta na --sk-akcent-tmavy (#D60019), súhrn
      plná červená bez prechodu, linky a tiene z tej istej červenej.
   b) Množstvo v pokladni je odteraz <input class="ox-riadok__vstup"> (dá sa
      písať), preto sem zrkadlíme pravidlá, ktoré varianty mali pre <output>.
   c) Zabudnuté heslo v rovnakom šate ako prihlásenie (červená doska).
   d) Môj účet: červená hlava s pilulkami sekcií, obsah na papieri pokladne,
      karty s červenou linkou, mono nadnadpisy, čísla v Antone.
   ========================================================================== */
/* a) pokladňa piesok */
html[data-tema^="21"][data-ox-pokladna="piesok"] .ox-pokladna,
html[data-tema^="21"][data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) {
	--pi-cervena-tm: var(--sk-akcent-tmavy); --pi-cervena-hl: var(--sk-akcent-tmavy);
	--pi-linka: rgba(214, 0, 25, .20); --pi-linka-jemna: rgba(214, 0, 25, .11);
	--pi-tien-jemny: 0 1px 2px rgba(214, 0, 25, .06), 0 6px 16px -12px rgba(214, 0, 25, .22);
	--pi-tien-karta: 0 1px 2px rgba(214, 0, 25, .06), 0 18px 40px -28px rgba(214, 0, 25, .34);
}
html[data-tema^="21"][data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"][data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--aktivny .ox-krok__cislo,
html[data-tema^="21"][data-ox-pokladna="piesok"] #ox-krok-obsah .ox-krok-nadpis .ox-krok__cislo { background: var(--sk-akcent-tmavy); color: #fff; border-color: var(--sk-akcent-tmavy); box-shadow: none; }
html[data-tema^="21"][data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn {
	background-color: var(--sk-akcent-tmavy); background-image: none;
	box-shadow: 0 1px 2px rgba(58, 0, 8, .18), 0 26px 60px -36px rgba(58, 0, 8, .55);
}
html[data-tema^="21"][data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-btn--hlavne,
html[data-tema^="21"][data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-btn--hlavne:hover { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"][data-ox-pokladna="piesok"] #ox-krok-obsah .ox-doprava-volba:hover { border-color: rgba(214, 0, 25, .38); }
html[data-tema^="21"][data-ox-pokladna="piesok"] #ox-krok-obsah .ox-bt-box { border-color: rgba(214, 0, 25, .35); }
html[data-tema^="21"][data-ox-pokladna="piesok"] #ox-krok-obsah .ox-reg-akcie .ox-btn--hlavne { box-shadow: 0 14px 30px -16px rgba(214, 0, 25, .8); }
/* b) vstup množstva v pokladni (základ .ox-mnozstvo input má 48×38) */
#ox-krok-obsah .ox-mnozstvo .ox-riadok__vstup { width: 52px; min-width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }
#ox-krok-obsah .ox-mnozstvo .ox-riadok__vstup:focus { outline: 2px solid var(--sk-akcent-tmavy); outline-offset: -2px; border-radius: 6px; }
html[data-ox-pokladna="doklad"] .ox-pokladna .ox-mnozstvo .ox-riadok__vstup { display: inline-block; min-width: 30px; text-align: center; font-family: var(--ox-dok-mono); font-weight: 700; width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo .ox-riadok__vstup { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-width: 46px; padding: 0 6px; font-weight: 700; text-align: center; border-inline: 1px solid var(--sk-text); width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
html[data-ox-pokladna="linka"] .ox-pokladna .ox-mnozstvo .ox-riadok__vstup { min-width: 34px; padding: 0 4px; width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
html[data-ox-pokladna="dvojstlpec"] #ox-krok-obsah .ox-mnozstvo .ox-riadok__vstup { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin: 0 6px; padding: 0 5px; border-radius: 999px; background: var(--dvs-tlmeny); color: #fff; /* 6,18:1 */ font: 700 11px/1 var(--dvs-mono); font-variant-numeric: tabular-nums; width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
html[data-ox-pokladna="piesok"] .ox-pokladna .ox-mnozstvo .ox-riadok__vstup { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-width: 40px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pi-atrament); border-inline: 1px solid var(--pi-linka-jemna); width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-mnozstvo .ox-riadok__vstup { display: inline-grid; place-items: center; min-width: 36px; height: 32px; border-inline: 2px solid var(--ox-br-ink); font-family: var(--ox-br-mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-mnozstvo .ox-riadok__vstup { min-width: 40px; height: 40px; width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
html[data-ox-pokladna="brutal"] #ox-krok-obsah .ox-prev-kosik .ox-mnozstvo .ox-riadok__vstup { min-width: 40px; height: 40px; width: auto; border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
/* c) zabudnuté heslo = doska prihlásenia */
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh {
	background: var(--sk-akcent-tmavy); color: #fff; padding: clamp(22px, 3.4vw, 34px); border-radius: var(--sk-r-velky, 20px);
	box-shadow: 0 1px 2px rgba(58, 0, 8, .18), 0 26px 60px -36px rgba(58, 0, 8, .55);
}
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-zh__uvod { margin: 0 0 2px; color: #fff; font-size: 15.5px; line-height: 1.5; }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-label { color: #fff; letter-spacing: .05em; text-transform: uppercase; }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-label span { color: #FFC2C6; }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-input { background: #fff; color: var(--sk-text, #1B1B1B); border-color: transparent; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .8); }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .34); }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh :focus-visible { outline-color: #fff; }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-btn--hlavne { background: #fff; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-btn--hlavne:hover:not(:disabled) { background: var(--sk-krem, #FFF7E6); }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-btn--hlavne.ox-btn--nacitava::after { border-color: rgba(214, 0, 25, .3); border-top-color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-hlaska--chyba { background: #FFF1F0; color: #8A0010; border-left-color: #B00015; }
html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh .ox-hlaska--ok { background: #fff; color: #0a5c2a; border-left-color: #15702A; }
@media (max-width: 560px) { html[data-tema^="21"] #ox-obsah[data-trasa="zabudnute-heslo"] #ox-zh { padding: 20px 16px; border-radius: var(--sk-r-stredny, 14px); } }
/* d) Môj účet */
html[data-tema^="21"] .ox-ucet-hlava {
	background: var(--sk-akcent-tmavy); color: #fff; border-radius: 22px;
	padding: clamp(20px, 2.8vw, 30px) clamp(20px, 3vw, 34px) clamp(14px, 2vw, 20px);
	box-shadow: 0 1px 2px rgba(58, 0, 8, .18), 0 26px 60px -36px rgba(58, 0, 8, .55);
}
html[data-tema^="21"] .ox-ucet-hlava .ox-oko { color: #FFD9D6; }
html[data-tema^="21"] .ox-ucet-hlava .ox-oko::before, html[data-tema^="21"] .ox-ucet-hlava .ox-oko::after { background: #FFD9D6; border-color: #FFD9D6; }
html[data-tema^="21"] .ox-ucet-hlava .ox-h2 { color: #fff; margin: 6px 0 16px; }
html[data-tema^="21"] .ox-ucet-hlava .ox-ucet-menu { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; gap: 6px; border-radius: 0; }
html[data-tema^="21"] .ox-ucet-hlava .ox-chip { background: rgba(255, 255, 255, .13); color: #fff; border-color: transparent; }
html[data-tema^="21"] .ox-ucet-hlava .ox-chip:hover { background: rgba(255, 255, 255, .24); color: #fff; }
html[data-tema^="21"] .ox-ucet-hlava .ox-chip[aria-pressed="true"] { background: #fff; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-ucet-hlava .ox-chip small { color: inherit; opacity: .8; }
html[data-tema^="21"] .ox-ucet-hlava .ox-chip--odhlasit { margin-left: auto; background: transparent; color: #FFD9D6; }
html[data-tema^="21"] .ox-ucet-hlava .ox-chip--odhlasit:hover { background: rgba(255, 255, 255, .13); color: #fff; }
html[data-tema^="21"] .ox-ucet-hlava :focus-visible { outline-color: #fff; }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah {
	margin-top: 16px; padding: clamp(14px, 2vw, 24px); border-radius: 22px;
	background-color: #FFF3F4; background-image: radial-gradient(rgba(27, 27, 27, .05) 1px, transparent 1px); background-size: 4px 4px;
	box-shadow: inset 0 0 0 1px rgba(214, 0, 25, .16);
}
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-dlazdica,
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-panel,
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-tabulka--obal {
	background: #fff; border: 1px solid rgba(214, 0, 25, .16); border-radius: 16px;
	box-shadow: 0 1px 2px rgba(214, 0, 25, .05), 0 12px 30px -16px rgba(214, 0, 25, .18);
}
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah a.ox-dlazdica:hover { transform: translateY(-2px); border-color: rgba(214, 0, 25, .45); box-shadow: 0 16px 34px -18px rgba(214, 0, 25, .35); }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-dlazdica__oko { font: 700 11px/1.5 ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-dlazdica__cislo { font: 400 46px/1 var(--sk-font-nadpis); color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-dlazdica > b { font-family: var(--sk-font-nadpis); font-weight: 400; font-size: 22px; letter-spacing: .02em; }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-tabulka--obal { padding: 4px 16px; }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-tabulka th { font: 700 11px/1.5 ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace; letter-spacing: .18em; color: #6B5B5C; border-bottom: 1px solid rgba(214, 0, 25, .24); }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-tabulka td { border-bottom-color: rgba(214, 0, 25, .1); }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-tabulka tr:last-child td { border-bottom: 0; }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-tabulka tr:hover td { background: #FFF3F4; }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-tabulka td a > b { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-odznak { border-radius: 4px; }
html[data-tema^="21"] .ox-ucet #ox-ucet-obsah .ox-h3 { color: var(--sk-text); }
.ox-ucet-obsah--in { animation: ox-ucet-in .32s var(--sk-prechod, ease) both; }
@keyframes ox-ucet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
	html[data-tema^="21"] .ox-ucet-hlava { padding: 18px 16px 14px; border-radius: 16px; }
	html[data-tema^="21"] .ox-ucet-hlava .ox-chip--odhlasit { margin-left: 0; }
	html[data-tema^="21"] .ox-ucet #ox-ucet-obsah { padding: 12px; border-radius: 16px; }
}
/* 160e) „Odhlásiť sa" v červenej hlave: blok 156 mu dáva červenú cez ID selektor
   (#ox-odhlasit), takže bol červený na červenej. */
html[data-tema^="21"] .ox-ucet-hlava .ox-ucet-menu #ox-odhlasit { color: #FFD9D6; }
html[data-tema^="21"] .ox-ucet-hlava .ox-ucet-menu #ox-odhlasit:hover { color: #fff; background: rgba(255, 255, 255, .13); }
/* 161) Porovnanie (sekcia 01): „tranzícia iba zhora, keď scrollujem" (Peter 21. 9. 2026)
   - pri príchode zdola dostane blok triedu --hned a konečný stav bez prechodu. */
html[data-tema^="21"] .ox-s01 > .ox-s01__porovnanie--in.ox-s01__porovnanie--in--hned,
html[data-tema^="21"] .ox-s01--in > .ox-s01__porovnanie--in.ox-s01__porovnanie--in--hned { transition: none; }
/* ==========================================================================
   162) B2B sekcia domova („Máte kaviareň, bistro, bar alebo hotel?"): nábeh podľa
   vlastnej polohy, len pri príchode zhora (Peter 21. 9. 2026). Doska sa zdvihne
   a prelne, jej priame deti prídu zospodu s malým rozostupom. Príchod zdola
   (trieda --in--hned) = konečný stav bez prechodu. Prvok má transform: none
   a position: relative, takže translate nič nerozhodí (::after zdobenie je absolútne).
   ========================================================================== */
html[data-tema^="21"] .ox-show__b2b { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--sk-prechod), transform 1s var(--sk-prechod); }
html[data-tema^="21"] .ox-show__b2b > * { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--sk-prechod), transform .9s var(--sk-prechod); }
html[data-tema^="21"] .ox-show__b2b > :nth-child(2) { transition-delay: .12s; }
html[data-tema^="21"] .ox-show__b2b > :nth-child(3) { transition-delay: .24s; }
html[data-tema^="21"] .ox-show__b2b > :nth-child(n+4) { transition-delay: .32s; }
html[data-tema^="21"] .ox-show__b2b--in, html[data-tema^="21"] .ox-show__b2b--in > * { opacity: 1; transform: none; }
html[data-tema^="21"] .ox-show__b2b--in.ox-show__b2b--in--hned, html[data-tema^="21"] .ox-show__b2b--in.ox-show__b2b--in--hned > * { transition: none; }
/* 163) Hlavička: prihlásený zákazník vidí pri ikone účtu názov svojej firmy
   (Peter 21. 9. 2026: „keď som prihlásený, nech mi to tu ukazuje názov účtu"). */
#ox-hlavicka .ox-ikonbtn--ucet, html[data-ox-hlavicka] #ox-hlavicka .ox-ikonbtn--ucet { width: auto; min-width: 44px; padding: 0 14px 0 10px; gap: 7px; }
#ox-hlavicka .ox-ikonbtn__meno { font: 600 13px/1.1 var(--sk-font-text, inherit); letter-spacing: .01em; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
	#ox-hlavicka .ox-ikonbtn__meno { display: none; }
	#ox-hlavicka .ox-ikonbtn--ucet, html[data-ox-hlavicka] #ox-hlavicka .ox-ikonbtn--ucet { width: 44px; padding: 0; }
}
/* 163b) variant 2g dáva ikonám max-width 46px (r. 17363) - pilulka s názvom firmy ho ruší */
html[data-ox-hlavicka] #ox-hlavicka .ox-ikonbtn--ucet { max-width: none; }
@media (max-width: 760px) { html[data-ox-hlavicka] #ox-hlavicka .ox-ikonbtn--ucet { max-width: 46px; } }
/* 163c) ikony hlavičky majú border-radius 50 % (kruh) - pri pilulke s názvom firmy
   (131 × 46 px) z toho vznikla elipsa („ukazuje to zle"). Pilulka = stadion. */
#ox-hlavicka .ox-ikonbtn--ucet, html[data-ox-hlavicka] #ox-hlavicka .ox-ikonbtn--ucet { border-radius: 999px; }

/* ==========================================================================
   164) Peter 21. 9. 2026, večer:
   a) Sekcia 01 (manifest a4/a4b): pozadie ako koleso #ox-msr, nadpis len
      „Bez nutnosti zariadení a investície." väčší a biely, lead a čipy o niečo
      väčšie.
   b) B2B sekcia (variant Základ, natvrdo): nálepka väčšia a v pozadí za kartami.
   c) Úvodné video pre Safari/iOS: skrytý zdrojový <video> + <canvas> (kompozitor).
   ========================================================================== */
html[data-tema^="21"] .ox-s01--a4 {
	background:
		radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .55), transparent 60%),
		radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .5), transparent 60%),
		linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 45%, #3A0008 70%, var(--sk-akcent) 100%);
}
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > .ox-h2 { color: #fff; font-size: clamp(32px, 3.5vw, 58px); line-height: 1.02; max-width: none; }
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; }
html[data-tema^="21"] .ox-s01--a4 .ox-s01__chipy--biele > span { font-size: 15.5px; padding: 11px 19px; }
.ox-uvod__video-zdroj { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
html[data-tema^="21"] canvas.ox-uvod__video--kresba { display: block; }
/* 164b) blok 116 dáva manifestu plochú dosku s !important - pozadie ako koleso preto tiež s !important */
html[data-tema^="21"] .ox-s01--a4 {
	background:
		radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .55), transparent 60%),
		radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .5), transparent 60%),
		linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 45%, #3A0008 70%, var(--sk-akcent) 100%) !important;
}

/* ==========================================================================
   165) Peter 21. 9. 2026, neskoro večer:
   a) nálepka v B2B sekcii späť v pôvodnej veľkosti a polohe (úprava z bloku 164
      vrátená - prekrývala kartu 04); tenká červená čiara pod B2B dosku (šev ::after) preč
   b) mini-košík: väčšie a čitateľnejšie texty
   c) manifest: nadpis dlhší text na menej riadkov (blok 164 upravený), plagát o kúsok
      doľava, biela karta = červené logo vľavo + text vpravo
   d) koleso (#ox-msr): katalóg obrázkov vľavo, text vpravo
   e) hlavička: bez označovania textu a bez ťahania (drag) odkazov a obrázkov
   ========================================================================== */
html[data-tema^="21"] .ox-show__b2b--zaklad::after { display: none; }
.ox-minikosik .ox-mk__nazov { font-size: 17px !important; line-height: 1.25 !important; }   /* r. 5524 ma !important */
.ox-minikosik .ox-mk__n { font-size: 19px; }
.ox-minikosik .ox-mk__u { font-size: 14.5px; }
.ox-minikosik .ox-mk__cena { font-size: 17px; }
.ox-minikosik .ox-mk__mnozstvo { gap: 8px; padding: 5px 10px; }
.ox-minikosik .ox-mk__q { width: 30px; height: 30px; font-size: 17px; }
.ox-minikosik .ox-mk__prevadzka { font-size: 13.5px; }
.ox-minikosik .ox-mk__pocet { font-size: 15px; }
.ox-minikosik .ox-mk__spolu { font-size: 19px; }
html[data-tema^="21"] .ox-s01--a4 .ox-s01__plagat--karta { position: relative; left: -14px; }
html[data-tema^="21"] .ox-s01__redkarta--logo { display: grid; grid-template-columns: minmax(200px, .7fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
html[data-tema^="21"] .ox-s01__redlogo { display: flex; align-items: center; justify-content: center; }
html[data-tema^="21"] .ox-s01__redlogo-znak { display: block; width: min(100%, 340px); aspect-ratio: 1460 / 789; background: var(--sk-akcent-tmavy); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
@media (max-width: 860px) {
	html[data-tema^="21"] .ox-s01__redkarta--logo { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-s01__redlogo-znak { width: 200px; }
}
@media (min-width: 1001px) {
	html[data-tema^="21"] #ox-msr .ox-msr__mriezka {
		grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
		grid-template-areas: "vitrina javisko" "vitrina panel" "lista lista";
	}
}
#ox-hlavicka { -webkit-user-select: none; user-select: none; }
#ox-hlavicka a, #ox-hlavicka img, #ox-hlavicka svg { -webkit-user-drag: none; user-drag: none; }
#ox-hlavicka input, #ox-hlavicka textarea { -webkit-user-select: text; user-select: text; }
/* 166) Peter 21. 9. 2026: a) koleso - texty zarovnané doprava; b) biela karta 50/50, text
   v pravej polovici; c) nálepka B2B do stredu prázdnej červenej plochy pod kartami. */
@media (min-width: 1001px) {
	html[data-tema^="21"] #ox-msr .ox-msr__javisko { text-align: right; }
	html[data-tema^="21"] #ox-msr .ox-msr__javisko .ox-oko { justify-content: flex-end; flex-direction: row-reverse; }
	html[data-tema^="21"] #ox-msr .ox-msr__javisko [class*="ox-msr__stav"] { align-items: flex-end; text-align: right; }
	html[data-tema^="21"] #ox-msr .ox-msr__javisko .ox-msr__cast { margin-left: auto; }
}
html[data-tema^="21"] .ox-s01__redkarta--logo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html[data-tema^="21"] .ox-show__b2b--zaklad .ox-show__nalepka { justify-self: center; align-self: end; margin: 0; }
/* 167) Peter 21. 9. 2026 (neskoro):
   a) nálepka B2B: vlastný riadok mriežky pod kartami, nič ju neprekrýva
   b) nadpis manifestu rovnako veľký ako nadpis kolesa (.ox-msr__h2)
   c) „silk" pozadie hero (Hodváb) aj na spodných widgetoch: sekcia 01, koleso, B2B */
html[data-tema^="21"] .ox-show__b2b--zaklad { grid-template-rows: auto auto; }
html[data-tema^="21"] .ox-show__b2b--zaklad > div:first-child { grid-column: 1; grid-row: 1 / 3; }
html[data-tema^="21"] .ox-show__b2b--zaklad .ox-show__cesta { grid-column: 2; grid-row: 1; }
html[data-tema^="21"] .ox-show__b2b--zaklad .ox-show__nalepka { grid-column: 2; grid-row: 2; justify-self: center; align-self: start; margin: clamp(18px, 2.4vw, 34px) 0 0; }
@media (max-width: 860px) {
	html[data-tema^="21"] .ox-show__b2b--zaklad { grid-template-rows: auto; }
	html[data-tema^="21"] .ox-show__b2b--zaklad > div:first-child, html[data-tema^="21"] .ox-show__b2b--zaklad .ox-show__cesta, html[data-tema^="21"] .ox-show__b2b--zaklad .ox-show__nalepka { grid-column: auto; grid-row: auto; }
}
html[data-tema^="21"] .ox-s01--a4 .ox-s01__manifest > div > .ox-h2 { font-size: clamp(42px, 4.7vw, 81px); line-height: 1.04; }
html[data-tema^="21"] {
	--ox-silk:
		radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .55), transparent 60%),
		radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .5), transparent 60%),
		linear-gradient(98deg, transparent 30%, rgba(255, 200, 205, .26) 44%, transparent 58%),
		linear-gradient(82deg, transparent 52%, rgba(255, 200, 205, .2) 64%, transparent 78%),
		linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 45%, #3A0008 70%, var(--sk-akcent) 100%);
}
html[data-tema^="21"] .ox-s01--a4 { background: var(--ox-silk) !important; }
html[data-tema^="21"] #ox-msr { background: var(--ox-silk) !important; }
html[data-tema^="21"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b { background: var(--ox-silk); }

/* =============================================================================
   168) DÔVODY, návrh 9 „Počítadlo + Swiss" (Peter 21. 9. 2026: „zober tieto čísla
   a daj to do návrhu 9 - pod to daj dizajn z návrhu 4 - na čísla horné sprav
   animáciu, nech sa začnú od 0 načítavať až po číslo, ktoré tam je.")
   Pás štyroch čísel z návrhu 8 (Dôkazy) hore, pod ním švajčiarske riadky
   z návrhu 4. Čierny pás štatistík zo spodku návrhu 4 sa nekreslí - tie isté
   čísla sú už hore, len väčšie a s nábehom.
   ========================================================================== */
/* ⚠️ Obal `.ox-dovody` je v základe DVOJSTĽPEC (vľavo fotka, vpravo riadky) a
   ostatné vlastné návrhy si ho rušia na r. 6894. Návrh 9 musí byť v tom zozname
   tiež, inak sa pás čísel stlačí do ľavého stĺpca a čísla sa zalomia. */
html[data-tema^="21"] .ox-dovody--d6 { display: block; }
html[data-tema^="21"] .ox-dov6__metriky {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid rgba(27, 27, 27, .12); border-radius: 20px; overflow: hidden;
	margin-bottom: clamp(20px, 2.4vw, 34px);
}
html[data-tema^="21"] .ox-dov6__metriky > div { padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px); border-right: 1px solid rgba(27, 27, 27, .12); }
html[data-tema^="21"] .ox-dov6__metriky > div:last-child { border-right: 0; }
html[data-tema^="21"] .ox-dov6__metriky b {
	display: block; margin-bottom: 6px;
	font: 400 clamp(34px, 3.6vw, 52px)/1 var(--sk-font-nadpis);
	color: var(--sk-akcent-tmavy, #D60019);
	/* číslice pri prepočítavaní menia šírku - tabuľkové číslice držia pás pokojný */
	font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
html[data-tema^="21"] .ox-dov6__metriky span { font-size: 13.5px; line-height: 1.45; color: #574B47; }
/* riadky pod pásom: rovnaké ako návrh 4, len bez čierneho pásu štatistík */
html[data-tema^="21"] .ox-dov1--pod { margin-top: 0; }
@media (max-width: 860px) {
	html[data-tema^="21"] .ox-dov6__metriky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-dov6__metriky > div:nth-child(2n) { border-right: 0; }
	html[data-tema^="21"] .ox-dov6__metriky > div:nth-child(-n+2) { border-bottom: 1px solid rgba(27, 27, 27, .12); }
}

/* =============================================================================
   172) TITULKA SEKCIE 01: päť návrhov (Peter 21. 9. 2026 cez RegulusX:
   „pridaj 5 návrhov na dizajn titulky … nech to viem prepínať cez tú bublinu")
   Prepína sa atribútom `data-ox-titulka01` na <html> (widget `titulka01`).
   Markup je spoločný: každý riadok je `.ox-s01__nr[data-i]`, zvýrazňované slová
   sú `b.ox-s01__zv`, mono štítok riadku `small.ox-s01__nst`, obrie číslo `u.ox-s01__cislo30`.
   ⚠️ Anton + slovenská diakritika: riadkovanie nikdy pod 1.1, inak sa orezáva mäkčeň.
   ========================================================================== */
/* --- spoločný základ: bez návrhu sa markup správa ako predtým -------------- */
html[data-tema^="21"] .ox-s01__nr { display: block; }
html[data-tema^="21"] .ox-s01__zv { font-weight: inherit; color: inherit; }
html[data-tema^="21"] .ox-s01__nst,
html[data-tema^="21"] .ox-s01__cislo30 { display: none; }

/* --- T1 Číselný rebrík ---------------------------------------------------- */
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01__manifest > div > .ox-h2 {
	font-size: clamp(30px, 4.1vw, 62px); line-height: 1.12;
}
/* ⚠️ Žiadny grid ani flex na riadku: zvýraznené slovo je vlastný prvok a stalo by
   sa z neho samostatná položka - veta by sa zlomila. Číslo preto kreslíme
   absolútne do ľavého odsadenia. */
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01__nr {
	position: relative; display: block; padding: 8px 0 10px 58px;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
}
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01__nr::before {
	content: attr(data-i); position: absolute; left: 0; top: .72em;
	font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; color: #FFD9D6;
}
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01__nr[data-i="04"] .ox-s01__zv { color: #FFD9D6; }
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01__nr[data-i="04"] .ox-s01__zv { color: #FFD9D6; }

/* --- T2 Obrie číslo za textom --------------------------------------------- */
html[data-ox-titulka01="t2"][data-tema^="21"] .ox-s01__manifest > div:first-child { position: relative; }
html[data-ox-titulka01="t2"][data-tema^="21"] .ox-s01__cislo30 {
	display: block; position: absolute; right: -2%; top: -8%;
	font: 400 clamp(180px, 26vw, 380px)/1 var(--sk-font-nadpis); font-style: normal;
	color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .35);
	letter-spacing: -.04em; text-decoration: none; z-index: 0; pointer-events: none;
}
html[data-ox-titulka01="t2"][data-tema^="21"] .ox-s01__manifest > div > .ox-h2 {
	position: relative; z-index: 1; font-size: clamp(30px, 4.2vw, 64px); line-height: 1.12;
}
html[data-ox-titulka01="t2"][data-tema^="21"] .ox-s01__nr[data-i="04"] .ox-s01__zv { color: #FFD9D6; }

/* --- T3 Swiss plagát ------------------------------------------------------ */
html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__manifest > div > .ox-h2 {
	font-size: clamp(24px, 3.5vw, 52px); line-height: 1.1; letter-spacing: -.012em;
}
html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__nr {
	display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
	border-top: 2px solid rgba(255, 255, 255, .7); padding: 6px 0 8px;
}
html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__nt { white-space: nowrap; }
html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__nr:last-child { border-bottom: 2px solid rgba(255, 255, 255, .7); }
html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__nr:nth-child(even) { flex-direction: row-reverse; }
html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__nst {
	display: block; font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .24em; text-transform: uppercase; color: #FFD9D6; white-space: nowrap;
}

/* --- T4 Zvýrazňovač ------------------------------------------------------- */
html[data-ox-titulka01="t4"][data-tema^="21"] .ox-s01__manifest > div > .ox-h2 {
	font-size: clamp(30px, 4.4vw, 68px); line-height: 1.16;
}
html[data-ox-titulka01="t4"][data-tema^="21"] .ox-s01__zv {
	background: #fff; color: var(--sk-akcent-tmavy, #D60019);
	padding: 0 .14em; border-radius: 6px; display: inline-block;
	transform: rotate(-1.5deg); line-height: 1.04;
}

/* --- T5 Obrys + výplň, shutter -------------------------------------------- */
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01__manifest > div > .ox-h2 {
	font-size: clamp(28px, 3.9vw, 60px); line-height: 1.12;
}
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01__nr { white-space: nowrap; }
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01__nr:nth-child(odd) { color: transparent; -webkit-text-stroke: 2px #fff; }
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01__nr:nth-child(even) { padding-left: .6em; }
/* nábeh: roleta zľava/sprava so staggerom, viazaná na príchod dosky (.ox-s01--in) */
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01 .ox-s01__nr { clip-path: inset(0 100% 0 0); }
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01 .ox-s01__nr:nth-child(even) { clip-path: inset(0 0 0 100%); }
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01--in .ox-s01__nr {
	animation: ox-s01-roleta .62s var(--sk-prechod, cubic-bezier(.16, 1, .3, 1)) both;
}
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(1) { animation-delay: .34s; }
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(2) { animation-delay: .43s; }
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(3) { animation-delay: .52s; }
html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(4) { animation-delay: .61s; }
@keyframes ox-s01-roleta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* --- T1: riadky nabiehajú postupne zospodu -------------------------------- */
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01--in .ox-s01__nr {
	animation: ox-s01-riadok .66s var(--sk-prechod, cubic-bezier(.16, 1, .3, 1)) both;
}
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(1) { animation-delay: .34s; }
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(2) { animation-delay: .45s; }
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(3) { animation-delay: .56s; }
html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01--in .ox-s01__nr:nth-child(4) { animation-delay: .67s; }
@keyframes ox-s01-riadok { from { opacity: 0; transform: translateY(.34em); } to { opacity: 1; transform: none; } }

/* --- mobil ---------------------------------------------------------------- */
@media (max-width: 860px) {
	html[data-ox-titulka01="t2"][data-tema^="21"] .ox-s01__cislo30 { display: none; }
	html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__nr { flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; }
	html[data-ox-titulka01="t3"][data-tema^="21"] .ox-s01__nr:nth-child(even) { flex-direction: column; align-items: flex-start; }
	html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01__nr { white-space: normal; }
	html[data-ox-titulka01="t5"][data-tema^="21"] .ox-s01__nr:nth-child(odd) { -webkit-text-stroke-width: 1.2px; }
	html[data-ox-titulka01="t1"][data-tema^="21"] .ox-s01__manifest > div > .ox-h2 { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
}

/* =============================================================================
   174) Úvodná scéna h9: pri scrollovaní sa posúva CELÝ stredový blok, nie len
   riadok písacieho stroja (Peter 21. 9. 2026 cez RegulusX: „keď scrollujem, nech
   sa posúva celý text, nie iba SME S VAMI UŽ").
   ⚠️ Prebíja blok 163, ktorý riadkom nechával zvislý posun - v h9 ho preto
   riadkom berieme a dávame ho rodičovi, aby sa nadnadpis, zoznam prevádzok aj
   veta hýbali ako jeden celok.
   ========================================================================== */
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__riadok:nth-child(1),
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__riadok:nth-child(2) { transform: none; }
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__stred { transform: translateY(calc(-50% - var(--uvod-p, 0) * 22vh)); will-change: transform; }
/* 175) Peter 21. 9. 2026 (večer): a) /oxo-red Dôkazy d6 - popisky pod číslami „väčšie a hrubšie";
   b) príprava „Krok za krokom" variant f (Index s obrazom) - popis kroku „väčší a hrubší". */
html[data-tema^="21"] .ox-dov6__metriky span { font-size: 16px; font-weight: 600; line-height: 1.45; color: #3E3431; }
html[data-tema^="21"] .ox-priprava--f .ox-priprava__krok small { font-size: 17px; font-weight: 600; line-height: 1.5; color: #3E3431; margin-top: 6px; }
/* 176) Peter 21. 9. 2026: Dôkazy d6 - bunky s číslami sa vypisujú postupne (JS pridáva
   --postupne na pás a --in na bunku, keď jej počítadlo štartuje). */
html[data-tema^="21"] .ox-dov6__metriky--postupne > * { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--sk-prechod), transform .55s var(--sk-prechod); }
html[data-tema^="21"] .ox-dov6__metriky--postupne > .ox-dov6__metrika--in { opacity: 1; transform: none; }
/* 177) Peter 21. 9. 2026: metriky d6 sú tri (15 mil. · 68 % · +8,8 %) - mriežka na tri stĺpce */
html[data-tema^="21"] .ox-dov6__metriky { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { html[data-tema^="21"] .ox-dov6__metriky { grid-template-columns: minmax(0, 1fr); } }

/* 178) Peter 21. 9. 2026 (noc): a) hlava /oxo-red - 5 dizajnov (widget `hlavared`, atribút
   data-ox-hlavared na .ox-redzona__hlava, markup stavia pohlady.js oxoRedHlavaHtml(); trieda
   .ox-redh--in spúšťa nábeh). Zdroje: superdesign „Prism - Swiss big-type red hero" (index-rule
   eyebrow, jediný červený akcent), „Halfmile - Swiss poster warm paper + red" (Anton, 2px linky,
   výplň clip-path zľava), „Halide - condensed poster" (slová stúpajú so 40 ms odstupom), „Fallow
   Row cream + red" (veta v svetlom inku a výplň); 21st.dev „Vertical Cut Reveal" #18595 a „Text
   Highlight" #27942. Bez tlačidla Do obchodu (Peter). b) pilulka prepínača: `.ox-wprep__dalsi`,
   keď sú na jednej kotve dva widgety (Dizajn / Text). c) nadpis prípravy „Krok za krokom" bez
   podčiarknutia. */
html[data-tema^="21"] .ox-redzona__hlava > div { min-width: 0; max-width: 100%; flex: 1 1 100%; }
html[data-tema^="21"] .ox-redzona__hlava .ox-redh__h1 { margin: 0; }
html[data-tema^="21"] .ox-redzona__hlava .ox-redh__h1 em { font-style: normal; text-decoration: none; color: var(--sk-akcent-tmavy); }
/* slová v maske (r1, r3) */
html[data-tema^="21"] .ox-redh__s { display: inline-block; clip-path: inset(-.4em 0 0 0); vertical-align: top; }
html[data-tema^="21"] .ox-redh__si { display: inline-block; transform: translateY(112%); opacity: 0;
	transition: transform .9s var(--sk-prechod), opacity .45s ease; transition-delay: calc(var(--i, 0) * 45ms + .12s); }
html[data-tema^="21"] .ox-redh--in .ox-redh__si { transform: none; opacity: 1; }

/* r1 Swiss index */
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__oko {
	display: flex; align-items: center; gap: 12px; width: 100%; padding-top: 12px; border-top: 2px solid var(--sk-text);
	color: var(--sk-text); font-size: 11px; letter-spacing: .22em; margin-bottom: clamp(18px, 2vw, 28px);
}
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__oko::before { display: none; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__idx { color: var(--sk-akcent-tmavy); font-variant-numeric: tabular-nums; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__sep { opacity: .35; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__meta { margin-left: auto; color: rgba(27, 27, 27, .5); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__h1 { font-size: clamp(32px, 5vw, 74px); line-height: .96; letter-spacing: -.01em; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__akcent .ox-redh__si { color: var(--sk-akcent-tmavy); }

/* r2 výplň zľava */
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__oko { color: var(--sk-text); font-size: 11px; letter-spacing: .24em; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__oko::before { width: 10px; height: 10px; background: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__h1--wipe { position: relative; font-size: clamp(32px, 5vw, 74px); line-height: .98; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__ghost { color: rgba(27, 27, 27, .16); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__fill {
	position: absolute; inset: 0; color: var(--sk-text); clip-path: inset(0 100% 0 0);
	transition: clip-path 1.25s cubic-bezier(.16, 1, .3, 1) .25s;
}
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"].ox-redh--in .ox-redh__fill { clip-path: inset(0 0 0 0); }

/* r3 zvislý rez */
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__oko { color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__oko::before { width: 0; transition: width .7s var(--sk-prechod) .1s; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"].ox-redh--in .ox-redh__oko::before { width: 44px; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__h1--rez { font-size: clamp(36px, 6vw, 92px); line-height: .9; letter-spacing: -.005em; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__s { clip-path: inset(-.35em 0 -.02em 0); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__si { transform: translateY(105%) skewY(4deg); transition-duration: 1s, .45s; transition-delay: calc(var(--i, 0) * 40ms + .1s); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"].ox-redh--in .ox-redh__si { transform: none; }

/* r4 dve linky */
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__linka {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	border-top: 2px solid var(--sk-text); border-bottom: 1px solid var(--sk-linka); padding: 10px 0; margin-bottom: clamp(16px, 2vw, 26px);
}
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__linka .ox-oko { margin-bottom: 0; color: var(--sk-text); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__tag {
	display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sk-akcent-tmavy);
}
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__tag::before { content: ''; width: 8px; height: 8px; background: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__h1--dve { display: block; font-size: clamp(32px, 5.2vw, 78px); line-height: .94; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__r1,
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__r2 { display: block; opacity: 0; transition: transform 1s var(--sk-prechod), opacity .6s ease; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__r1 { transform: translateX(-28px); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__r2 { text-align: right; color: var(--sk-akcent-tmavy); transform: translateX(28px); transition-delay: .18s; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"].ox-redh--in .ox-redh__r1,
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"].ox-redh--in .ox-redh__r2 { transform: none; opacity: 1; }

/* r5 ťah štetcom */
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r5"] .ox-redh__oko--pil {
	background: var(--sk-akcent-tmavy); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .2em; margin-bottom: 18px;
}
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r5"] .ox-redh__oko--pil::before { display: none; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r5"] .ox-redh__h1 { font-size: clamp(32px, 5vw, 74px); line-height: 1.04; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r5"] .ox-redh__tah {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C40 3 80 13 120 7S180 4 198 8' fill='none' stroke='%23D60019' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: 0 100%; background-size: 0% .26em; padding-bottom: .06em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
	transition: background-size 1s cubic-bezier(.16, 1, .3, 1) .35s;
}
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r5"].ox-redh--in .ox-redh__tah { background-size: 100% .26em; }

@media (max-width: 760px) {
	html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__meta { display: none; }
	html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__h1--rez { font-size: clamp(34px, 11vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
	html[data-tema^="21"] .ox-redh__si, html[data-tema^="21"] .ox-redzona__hlava .ox-redh__fill,
	html[data-tema^="21"] .ox-redzona__hlava .ox-redh__r1, html[data-tema^="21"] .ox-redzona__hlava .ox-redh__r2,
	html[data-tema^="21"] .ox-redzona__hlava .ox-redh__tah, html[data-tema^="21"] .ox-redzona__hlava .ox-redh__oko::before { transition: none !important; }
	html[data-tema^="21"] .ox-redh__si, html[data-tema^="21"] .ox-redzona__hlava .ox-redh__r1, html[data-tema^="21"] .ox-redzona__hlava .ox-redh__r2 { transform: none !important; opacity: 1 !important; }
	html[data-tema^="21"] .ox-redzona__hlava .ox-redh__fill { clip-path: inset(0 0 0 0) !important; }
	html[data-tema^="21"] .ox-redzona__hlava .ox-redh__tah { background-size: 100% .26em !important; }
}

/* b) pilulka: tlačidlo na prepnutie medzi widgetmi na tej istej kotve */
.ox-wprep__dalsi {
	display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; border: 0; cursor: pointer;
	background: rgba(214, 0, 25, .88); color: #fff; font: 700 11px/1 var(--sk-font-text, system-ui), sans-serif; letter-spacing: .06em; text-transform: uppercase;
	transition: background .2s ease;
}
.ox-wprep__dalsi::before { content: '\21C5'; font-size: 12px; }
.ox-wprep__dalsi:hover { background: rgba(214, 0, 25, 1); }
.ox-wprep__dalsi[hidden] { display: none; }

/* c) „Krok za krokom" bez podčiarknutia (Peter 21. 9. 2026) */
html[data-tema^="21"] #ox-priprava .ox-h2 em { text-decoration: none !important; background: none; border-bottom: 0; box-shadow: none; }
/* 179) Peter 21. 9. 2026: „texty, kde je biele pozadie, majú orezané interpunkčné znamienka" -
   t4 Zvýrazňovač: biele boxy mali riadkovanie 1,04, mäkčeň/dĺžeň nad Ž, Á, Ú sa orezával
   (rovnaká príčina ako v bloku 171). Box dostane riadkovanie 1,18 ako celý nadpis. */
html[data-ox-titulka01="t4"][data-tema^="21"] .ox-s01__zv { line-height: 1.18; padding: 0 .14em; }
/* 180) 21. 9. 2026: hlava /oxo-red - pri tesnom riadkovaní (.9–1.04) sa dĺžeň na „SÁM" z druhého
   riadka dotýkal písmena R v „TRH" nad ním (Anton, veľké písmená s diakritikou potrebujú ≥ 1,06).
   Riadkovanie dizajnov r1–r5 zvýšené, poradie vrstiev ostáva. */
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r1"] .ox-redh__h1 { line-height: 1.08; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__h1--wipe { line-height: 1.08; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__h1--rez { line-height: 1.06; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r4"] .ox-redh__h1--dve { line-height: 1.04; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r5"] .ox-redh__h1 { line-height: 1.1; }
/* 181) Peter 21. 9. 2026: „návrh 3 - niektoré interpunkčné znamienka hore sú tu orezané" (3/6 =
   r2 Výplň zľava). Orezy (clip-path) končili presne na okraji riadka, dĺžne nad Á a čiarky pod
   riadkom sa strácali. Orez ide .4em nad a .18em pod riadok; slová štartujú nižšie (130 %),
   aby cez širší orez nič nepresvitalo. */
html[data-tema^="21"] .ox-redh__s { clip-path: inset(-.4em 0 -.18em 0); }
html[data-tema^="21"] .ox-redh__si { transform: translateY(130%); }
html[data-tema^="21"] .ox-redh--in .ox-redh__si { transform: none; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__s { clip-path: inset(-.4em 0 -.18em 0); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"] .ox-redh__si { transform: translateY(130%) skewY(4deg); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r3"].ox-redh--in .ox-redh__si { transform: none; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__fill { clip-path: inset(-.4em 100% -.18em 0); }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"].ox-redh--in .ox-redh__fill { clip-path: inset(-.4em 0 -.18em 0); }
@media (prefers-reduced-motion: reduce) {
	html[data-tema^="21"] .ox-redzona__hlava .ox-redh__fill { clip-path: inset(-.4em 0 -.18em 0) !important; }
}
/* 182) Peter 21. 9. 2026 (neskoro večer): hlava /oxo-red natvrdo = r2 Výplň zľava + text n10;
   „nech je to na dva riadky a daj väčší rozostup medzi riadkami" - veta / veta, každý riadok
   nowrap (veľkosť písma dopasuje pohlady.js redHlavaDopasuj(); pod 30 px zalomenie), riadkovanie 1,22. */
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__h1--wipe { line-height: 1.22; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__l { display: block; white-space: nowrap; }
html[data-tema^="21"] .ox-redzona__hlava[data-ox-hlavared="r2"] .ox-redh__h1--zalom .ox-redh__l { white-space: normal; }

/* 183) Peter 21. 9. 2026: pás metrík d6 - „ako sa to dá vylepšiť, aby bolo jasnejšie, čo sú tie
   čísla - tiež sprav 5 návrhov". Widget `metriky` (widgety.js), atribút data-ox-metriky na
   .ox-dov6__metriky; pomocné prvky .ox-mtk__* stavia pohlady.js (METRIKY_JASNE). m0 = dnešný
   vzhľad (pomocné prvky skryté). Zdroje: superdesign „Halfmile" (ruled rows, mono figures),
   „Prism" (index-rule štítky), 21st.dev stat blocks. */
html[data-tema^="21"] .ox-dov6__metriky :is(.ox-mtk__stitok, .ox-mtk__otazka, .ox-mtk__pred, .ox-mtk__po, .ox-mtk__vyznam, .ox-mtk__ikona) { display: none; }
/* m1 štítok nad číslom */
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m1"] .ox-mtk__stitok { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sk-akcent-tmavy); margin-bottom: 8px; }
/* m2 veta s číslom */
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m2"] > div { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.42; color: #2B2320; font-weight: 500; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m2"] .ox-mtk__pred, html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m2"] .ox-mtk__po { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m2"] b { display: inline; font-size: 2em; line-height: 1; margin: 0 .1em; vertical-align: -.08em; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m2"] > div > span:not([class]) { display: none; }
/* m3 otázka a odpoveď */
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m3"] > div { border-left: 3px solid var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m3"] .ox-mtk__otazka { display: block; font-size: 15px; font-weight: 700; color: #1B1B1B; margin-bottom: 10px; }
/* m4 ikona + význam */
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m4"] .ox-mtk__ikona { display: block; width: 30px; height: 30px; color: var(--sk-akcent-tmavy); margin-bottom: 10px; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m4"] .ox-mtk__stitok { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #6E625E; margin-bottom: 6px; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m4"] .ox-mtk__vyznam { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--sk-akcent-tmavy); }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m4"] .ox-mtk__vyznam::before { content: '\2192  '; }
/* m5 riadky faktov */
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] > div { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 40px); row-gap: 2px; align-items: center; border-right: 0; border-bottom: 1px solid rgba(27, 27, 27, .12); }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] > div:last-child { border-bottom: 0; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] b { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] .ox-mtk__stitok { display: block; grid-column: 2; font-size: 15px; font-weight: 700; color: #1B1B1B; }
html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] > div > span:not([class]) { grid-column: 2; }
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] > div { grid-template-columns: 120px minmax(0, 1fr); }
	html[data-tema^="21"] .ox-dov6__metriky[data-ox-metriky="m5"] > div:nth-child(-n+2) { border-bottom: 1px solid rgba(27, 27, 27, .12); }
}
/* 184) Peter 21. 9. 2026 (noc): a) „pozadie footera nech je tiež ako ostatné widgety hodváb" -
   #ox-pata dostane ten istý hodváb ako sekcia 01 / B2B (hodnota tokenu --ox-silk vpísaná priamo,
   aby nezáležalo na rozsahu premennej; blok 7876 mal !important, preto aj tu). b) „top bar nech
   je viac translucent, keďže teraz je bielo priesvitný" - hlavička 2g na domove mala biely závoj
   rgba(255,255,255,.22→.1) + biele vnútorné linky; závoj stiahnutý na .07→.03, linky jemnejšie,
   rozostrenie ostáva; mimo domova červený závoj .9→.82 zľahčený na .78→.68. */
html[data-tema^="21"] #ox-pata { background: radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 100, .55), transparent 60%), radial-gradient(50% 60% at 80% 70%, rgba(255, 40, 60, .5), transparent 60%), linear-gradient(98deg, transparent 30%, rgba(255, 200, 205, .26) 44%, transparent 58%), linear-gradient(82deg, transparent 52%, rgba(255, 200, 205, .2) 64%, transparent 78%), linear-gradient(160deg, var(--sk-akcent) 0%, #7A000E 45%, #3A0008 70%, var(--sk-akcent) 100%) !important; }
html[data-ox-hlavicka="2g"] .ox-hlavicka__vnutro {
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 1px 0 rgba(255, 255, 255, .28) inset, 0 24px 50px -24px rgba(0, 0, 0, .5);
}
html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) .ox-hlavicka__vnutro { background: linear-gradient(180deg, rgba(224, 0, 26, .78), rgba(224, 0, 26, .68)); }
/* 185) Peter 21. 9. 2026: „túto čiernu čiaru odstráň" - 2px čierna linka nad zoznamom dôvodov
   na /oxo-red (blok 6897 `.ox-dov1 { border-top: 2px solid }`); pod pásom metrík d6 preč. */
html[data-tema^="21"] .ox-dov1--pod { border-top: 0; }
/* 186) Peter 21. 9. 2026: „tieto šípky napravo odstráň" - šípka `.ox-dov1__sip` v riadkoch dôvodov
   pod pásom d6 preč aj so svojím stĺpcom mriežky (desktop 96 | 1fr | 1.1fr, mobil 56 | 1fr). */
html[data-tema^="21"] .ox-dov1--pod .ox-dov1__sip { display: none; }
html[data-tema^="21"] .ox-dov1--pod .ox-dov1__r { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-dov1--pod .ox-dov1__r { grid-template-columns: 56px minmax(0, 1fr); }
}
/* 187) Peter 21. 9. 2026: „všade, kde sú menšie texty - úplne všetky widgety - aby malo písmo typ
   Inter". Odstavce a popisy Inter už majú (--sk-font-text); mimo Interu boli len menšie texty
   v JetBrains Mono (nadnadpisy .ox-oko, indexy 01/02, štítky kategórií, pás pod kolesom, kód
   predvoľby) a malé texty v Antone (päta: nadpisy stĺpcov a spodný riadok, tučné položky
   v zoznamoch, čipy krokov, „Načítavam vitrínu"). Tie idú na Inter; veľké nadpisy, názvy
   produktov, filtre a značka OXO RED ostávajú v Antone. Rozpal písmen ostáva. `.ox-s01__nst` (mono
   štítky návrhu titulky T3) vynechané - mono je tam podstatou návrhu (RegulusX). */
html[data-tema^="21"] :is(.ox-oko, .ox-redh__oko, .ox-pv__kat, .ox-pv__idx, .ox-pv__idx b, .ox-pv__idx span, .ox-s01__pod,
	.ox-dov1__c, .ox-priprava__cislo, .ox-priprava__cip b, .ox-msr-pas__stopa, .ox-msr-pas__stopa span, .ox-combo__kod,
	.ox-text-tlmeny, .ox-mtk__stitok, .ox-faq__c, .ox-msr__nacitava b, .ox-msr__nacitava, li > b,
	#ox-pata h4, #ox-pata .ox-pata__spodok, #ox-pata .ox-pata__spodok a, #ox-pata .ox-pata__stlpec a, #ox-pata .ox-pata__stlpec li) {
	font-family: var(--sk-font-text, 'Inter', system-ui, sans-serif) !important;
}
/* 188) doplnok k 187 (RegulusX): a) /produkty - spolu s „21 produktov" (#ox-pocet) aj počty
   v záložkách `.ox-chip [data-pocet]`, aby jeden komponent nemal dva fonty; b) čísla, ktoré sa
   menia pred očami (počítadlo, počty, sumy), potrebujú v Interi tabuľkové číslice, inak sa text
   pri prekreslení myká do strán - mono to malo zo svojej podstaty. */
html[data-tema^="21"] :is(#ox-pocet, .ox-chip [data-pocet], .ox-chip small) { font-family: var(--sk-font-text, 'Inter', system-ui, sans-serif) !important; }
html[data-tema^="21"] :is(.ox-oko, .ox-redh__oko, .ox-pv__idx, .ox-pv__idx b, .ox-pv__idx span, .ox-dov1__c, .ox-priprava__cislo, .ox-priprava__cip b,
	.ox-msr-pas__stopa span, .ox-combo__kod, .ox-text-tlmeny, .ox-mtk__stitok, .ox-faq__c, #ox-pocet, .ox-chip [data-pocet], .ox-chip small) {
	font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
/* 189) Peter 21. 9. 2026 (noc): „pozadie na widgete 3 (sekcia 01) sprav trošku viac hodvábne -
   také elegantnejšie". Nový token --ox-silk = satén: dva úzke, mäkko doznievajúce odlesky
   (108° a 100°), dva jemné tmavé záhyby, svetlý dych vľavo hore a hlboký tieň vpravo dole,
   základ bez čiernej (#7E000F namiesto #3A0008). Token zdieľa sekcia 01, B2B blok aj päta
   (Peter chcel rovnaký hodváb všade), preto sa mení na jednom mieste. */
html[data-tema^="21"] {
	--ox-silk:
		linear-gradient(108deg, transparent 20%, rgba(255, 205, 210, .06) 30%, rgba(255, 232, 234, .34) 40%, rgba(255, 205, 210, .06) 50%, transparent 60%),
		linear-gradient(100deg, transparent 58%, rgba(255, 215, 219, .05) 66%, rgba(255, 236, 238, .22) 72%, rgba(255, 215, 219, .05) 78%, transparent 86%),
		linear-gradient(126deg, transparent 0%, rgba(60, 0, 8, .40) 9%, transparent 22%),
		linear-gradient(112deg, transparent 44%, rgba(60, 0, 8, .26) 54%, transparent 64%),
		radial-gradient(90% 70% at 6% 4%, rgba(255, 140, 150, .32), transparent 62%),
		radial-gradient(80% 90% at 96% 96%, rgba(110, 0, 14, .6), transparent 64%),
		linear-gradient(158deg, #DE0019 0%, #B10010 42%, #7E000F 72%, #C80016 100%);
}
/* päta má hodnotu tokenu vpísanú natvrdo (blok 184) - prepíšeme rovnakým saténom */
html[data-tema^="21"] #ox-pata { background: var(--ox-silk) !important; }

/* =============================================================================
   190) Pilulka prepínača návrhov: väčšia a bez poskakovania (Peter 22. 9. 2026:
   „toto sprav väčšie a nech to tak neskáče, keď preklikávam.")
   Veľkosť: písmo 12 → 14 px, šípky 26 → 32 px, viac vzduchu.
   Neskákanie rieši `widgety.js` (zámok polohy počas klikania); tu k tomu patrí
   prechod, aby aj oprávnený presun kĺzal a neblikol.
   ⚠️ `transform` je zároveň nositeľ polohy (translate v JS), preto sa prechod
   dáva naň aj na opacity naraz.
   ========================================================================== */
.ox-wprep {
	gap: 6px; padding: 7px 9px; font-size: 14px;
	transition: opacity .2s ease, transform .25s var(--sk-prechod, cubic-bezier(.16, 1, .3, 1));
}
.ox-wprep__sip { width: 32px; height: 32px; }
.ox-wprep__sip svg { width: 15px; height: 15px; }
.ox-wprep__text { gap: 8px; padding: 0 8px; }
.ox-wprep__poradie { font-size: 12.5px; }
.ox-wprep__nazov { font-weight: 700; display: inline-block; }
.ox-wprep__dalsi { font-size: 12.5px; }

/* 191) Peter 22. 9. 2026: porovnanie v sekcii 01 (čierna/červená) - „sprav návrhy a daj na web aj pre
   tento widget, ale 5" → widget `porovnanie01` (widgety.js, atribút data-ox-porovnanie na <html>),
   p1 = dnešný vzhľad, p2–p6 čisto CSS na existujúci markup porovnanie() (bez zmeny 21-showroom.js).
   Zdroje: 21st „Us vs Them Comparison" #21217, „Feature Comparison Table" #21218, „Before/After
   Image Slider" #19250, „Stats Bento" #25311; superdesign graphic-comparison-report (matica),
   Halfmile (2px linky). Riadky v p2/p5/p6 sa skladajú cez display:contents + grid-row podľa
   nth-child (pod=1, h3=2, riadky 3–7, sumar 8), preto musí ostať 5 riadkov porovnania. */
/* --- p2 Jedna tabuľka (graphic-comparison-report feature matrix + 21st comparison table) --- */
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__porovnanie{grid-template-columns:1.2fr 1fr 1fr;background:#fff;border-radius:26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);padding:8px 34px 30px;overflow:visible}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol{display:contents}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pod{grid-row:1;padding:26px 0 0;color:#574B47;opacity:1;font-size:11px}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__pod{grid-column:2}html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__pod{grid-column:3;color:var(--sk-akcent-tmavy)}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol h3{grid-row:2;margin:8px 0 14px;font-size:30px;color:var(--sk-text);padding-bottom:14px;border-bottom:2px solid var(--sk-text)}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna h3{grid-column:2}html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena h3{grid-column:3;color:var(--sk-akcent-tmavy);border-color:var(--sk-akcent-tmavy)}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok{display:contents}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok span,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok b{padding:15px 12px 15px 0;border-top:1px solid rgba(27,27,27,.12);color:var(--sk-text);font-weight:600;font-size:15px;text-align:left}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok span{display:none}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok span{grid-column:1;font-weight:500;color:#574B47}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b{grid-column:2;color:#574B47;font-weight:500}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok b{grid-column:3;color:var(--sk-akcent-tmavy);font-weight:800;background:#FFF1F0;padding-left:12px;border-radius:0}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(3) span,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(3) b,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(3) b{grid-row:3}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(4) span,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(4) b,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(4) b{grid-row:4}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(5) span,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(5) b,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(5) b{grid-row:5}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(6) span,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(6) b,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(6) b{grid-row:6}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(7) span,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(7) b,html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(7) b{grid-row:7}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__sumar{grid-row:8;margin:18px 0 0;font-size:22px;padding-top:16px;border-top:2px solid var(--sk-text)}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__sumar{grid-column:2;color:#574B47;opacity:1}html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__sumar{grid-column:3;color:var(--sk-akcent-tmavy);border-color:var(--sk-akcent-tmavy)}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__rucka{display:none}

/* --- p3 Dve karty s ✓ / ✗ (21st feature comparison with checkmarks) --- */
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__porovnanie{gap:18px;background:transparent;box-shadow:none;overflow:visible;border-radius:0}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol{border-radius:26px;padding:36px 38px}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna{background:#fff;color:var(--sk-text)}html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna h3{color:var(--sk-text)}html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna .ox-s01__pod{color:#574B47;opacity:1}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cervena{background:var(--sk-akcent-tmavy);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok{border-top-color:rgba(27,27,27,.1);align-items:center}html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok{border-top-color:rgba(255,255,255,.2)}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b{display:inline-flex;align-items:center;gap:10px;font-weight:700}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before{content:'✕';width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font:800 11px/1 Inter;background:#F1E9E6;color:#9a8c88;flex:0 0 24px}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b{color:#574B47;font-weight:500}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok b::before{content:'✓';background:#fff;color:var(--sk-akcent-tmavy)}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__sumar{display:inline-block;font:700 12px/1 Inter;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;border-radius:999px;background:#F1E9E6;color:#574B47;opacity:1}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cervena .ox-s01__sumar{background:#fff;color:var(--sk-akcent-tmavy)}
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__rucka{display:none}

/* --- p4 Pred / po posuvník (before-after slider) --- */
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__porovnanie{grid-template-columns:1fr;border-radius:30px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);min-height:420px}
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol{grid-area:1/1;padding:44px 48px}
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna{border-radius:30px;width:100%}
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cervena{border-radius:30px;clip-path:polygon(46% 0,100% 0,100% 100%,40% 100%);padding-left:calc(46% + 40px)}
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok,html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna h3,html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna .ox-s01__pod,html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna .ox-s01__sumar{width:38%}
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__rucka{left:43%;top:0;bottom:0;width:0;background:transparent;transform:none}
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__rucka::before{content:'';position:absolute;left:-2px;top:0;bottom:0;width:4px;background:#fff;transform:skewX(-10deg)}
html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__rucka i{width:64px;height:64px;box-shadow:0 0 0 6px rgba(255,255,255,.25),0 20px 40px -14px rgba(0,0,0,.6)}

/* --- p5 Linky na hodvábe (Halfmile: 2px rules, mono captions, big display values) --- */
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__porovnanie{grid-template-columns:1fr;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol{display:contents}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pod{grid-row:1;padding-top:14px;border-top:2px solid #fff;opacity:.9;font-size:11px;letter-spacing:.24em}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__pod{grid-column:1;justify-self:start}html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__pod{display:none}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol h3{display:none}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__riadok{display:contents}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok span{grid-column:1;display:block;padding:20px 0;border-top:1px solid rgba(255,255,255,.28);font:700 12px/1.4 Inter;letter-spacing:.18em;text-transform:uppercase;color:#FFD9D6}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b{grid-column:2;display:block;padding:20px 0;border-top:1px solid rgba(255,255,255,.28);font:500 15px/1.4 Inter;color:rgba(255,255,255,.6);text-align:left;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok span{display:none}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok b{grid-column:3;display:block;padding:14px 0;border-top:1px solid rgba(255,255,255,.28);font:400 30px/1.1 var(--sk-font-nadpis);text-transform:uppercase;color:#fff;text-align:right}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(3) span,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(3) b,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(3) b{grid-row:2}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(4) span,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(4) b,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(4) b{grid-row:3}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(5) span,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(5) b,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(5) b{grid-row:4}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(6) span,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(6) b,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(6) b{grid-row:5}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(7) span,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(7) b,html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(7) b{grid-row:6}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__porovnanie{grid-template-columns:200px 1fr 1fr;column-gap:40px}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__sumar{grid-row:7;padding-top:18px;border-top:2px solid #fff;margin:0;font-size:22px}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__sumar{grid-column:1/3;opacity:.6}html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__sumar{grid-column:3;text-align:right;opacity:1}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__rucka{display:none}

/* --- p6 Bento dlaždice (bento stats grid) - bez zmeny markupu: ľavý riadok = dlaždica, pravá hodnota sa položí do tej istej bunky --- */
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__porovnanie{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:14px;background:transparent;box-shadow:none;overflow:visible;border-radius:0}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol{display:contents}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pod,html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol h3,html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__sumar,html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__rucka{display:none}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok{display:block;background:#fff;color:var(--sk-text);border-radius:22px;padding:24px 24px 70px;border:0;min-height:190px}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok span{display:block;font:700 11px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--sk-akcent-tmavy);margin-bottom:12px}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b{display:block;text-align:left;color:#9a8c88;font-weight:500;font-size:14px;text-decoration:line-through;text-decoration-color:rgba(27,27,27,.3)}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok{display:contents}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok span{display:none}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok b{display:block;align-self:end;padding:0 24px 22px;font:400 28px/1 var(--sk-font-nadpis);text-transform:uppercase;color:var(--sk-text);text-align:left;z-index:1;pointer-events:none}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(3),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(3) b{grid-area:1/1}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(4),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(4) b{grid-area:1/2}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(5),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(5) b{grid-area:1/3}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(6),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(6) b{grid-area:2/1}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(7),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(7) b{grid-area:2/2}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__sumar{grid-area:2/3;border-radius:22px;padding:24px;margin:0;min-height:190px;display:flex;align-items:flex-end;font-size:26px;background:var(--sk-akcent-tmavy);color:#fff;opacity:1;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* a4b podklad (biely rám, blok 7895/7926) pre priehľadné varianty vypnúť */
html[data-ox-porovnanie="p3"] .ox-s01--a4b .ox-s01__porovnanie,
html[data-ox-porovnanie="p5"] .ox-s01--a4b .ox-s01__porovnanie,
html[data-ox-porovnanie="p6"] .ox-s01--a4b .ox-s01__porovnanie { background: transparent !important; box-shadow: none !important; }
html[data-ox-porovnanie="p2"] .ox-s01--a4b .ox-s01__porovnanie { background: #fff !important; }
html[data-ox-porovnanie="p4"] .ox-s01--a4b .ox-s01__porovnanie { padding: 0 !important; background: transparent !important; box-shadow: none !important; overflow: hidden; }
/* mobil: p2/p4/p5/p6 späť na jednoduché stĺpce základu */
@media (max-width: 760px) {
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__porovnanie, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__porovnanie, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__porovnanie { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; column-gap: 0; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol { display: block; padding: 26px; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna { background: #1b1b1b; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena { background: linear-gradient(170deg, var(--sk-akcent), var(--sk-akcent-tmavy)); }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__riadok, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__riadok { display: flex; background: none; border-radius: 0; padding: 13px 0; min-height: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok span, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__riadok span, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__riadok span,
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok b, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__riadok b, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__riadok b { display: inline; grid-area: auto; padding: 0; border: 0; background: none; font: inherit; color: #fff; text-decoration: none; text-transform: none; letter-spacing: 0; margin: 0; text-align: right; z-index: auto; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok span, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__riadok span, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__riadok span { text-align: left; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__riadok b, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__riadok b, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__riadok b { font-weight: 800; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b { color: #FF8A7E; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pod, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pod, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pod, html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol h3, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol h3, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol h3, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__sumar { display: block; grid-area: auto; padding: 0; border: 0; color: #fff; opacity: .9; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__sumar, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__sumar, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__sumar { grid-area: auto; display: block; min-height: 0; padding: 0; margin: 22px 0 0; border: 0; background: none; color: #fff; text-align: left; box-shadow: none; }
	html[data-ox-porovnanie="p2"] .ox-s01--a4b .ox-s01__porovnanie, html[data-ox-porovnanie="p5"] .ox-s01--a4b .ox-s01__porovnanie, html[data-ox-porovnanie="p6"] .ox-s01--a4b .ox-s01__porovnanie { background: #fff !important; }
	html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol { grid-area: auto; clip-path: none; padding: 26px; }
	html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok, html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna h3, html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna .ox-s01__pod, html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__pol--cierna .ox-s01__sumar { width: auto; }
	html[data-ox-porovnanie="p4"] .ox-s01 .ox-s01__porovnanie { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* 191b) Fable 22. 9. 2026: mobil (≤ 760 px) pre porovnanie01 p5/p6 - pravidlá bloku 191 majú
   vyššiu špecificitu (.ox-s01__pol--cierna .ox-s01__riadok) než mobilný reset, preto tu s !important:
   dlaždice p6 a preškrtnuté hodnoty p5 sa na mobile vracajú k jednoduchým riadkom základu. */
@media (max-width: 760px) {
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol .ox-s01__riadok, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol .ox-s01__riadok { display: flex !important; background: none !important; border-radius: 0 !important; padding: 13px 0 !important; min-height: 0 !important; border-top: 1px solid rgba(255, 255, 255, .16) !important; }
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol .ox-s01__riadok span, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol .ox-s01__riadok span,
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol .ox-s01__riadok b, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol .ox-s01__riadok b { display: inline !important; grid-area: auto !important; padding: 0 !important; border: 0 !important; background: none !important; font: 800 15px/1.4 var(--sk-font-text) !important; color: #fff !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; text-align: right !important; z-index: auto !important; align-self: auto !important; pointer-events: auto !important; }
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol .ox-s01__riadok span, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol .ox-s01__riadok span { font-weight: 400 !important; text-align: left !important; }
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b { color: #FF8A7E !important; }
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok span, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok span { display: inline !important; }
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol .ox-s01__pod, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol .ox-s01__pod, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol h3, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol h3, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__sumar { display: block !important; }
	html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol .ox-s01__sumar, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol .ox-s01__sumar { display: block !important; grid-area: auto !important; min-height: 0 !important; padding: 0 !important; margin: 22px 0 0 !important; border: 0 !important; background: none !important; color: #fff !important; text-align: left !important; box-shadow: none !important; font: 400 clamp(20px, 2.1vw, 28px)/1.1 var(--sk-font-nadpis) !important; text-transform: uppercase !important; }
}

/* =============================================================================
   192) /B2B - NÁVRHY CELEJ STRÁNKY, spoločný základ (Peter 22. 9. 2026)
   Markup skladá `pohlady.js` → `b2bHtml(id)`; tu je vzhľad dvoch prvých návrhov.
   Rytmus, karty aj tlačidlá sú tie isté ako na domove - návrhy sa líšia
   rozložením, nie vlastnou paletou.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv--hodvab { background: var(--ox-silk, linear-gradient(160deg, #E1001A, #7A000E)); color: #fff; }
html[data-tema^="21"] .ox-b2bv--hodvab .ox-oko { color: rgba(255, 255, 255, .86); }
html[data-tema^="21"] .ox-b2bv--hodvab .ox-h1 { color: #fff; }
html[data-tema^="21"] .ox-b2bv--hodvab .ox-h1 em { font-style: normal; display: block; background: #fff; color: var(--sk-akcent-tmavy, #D60019); padding: 0 .14em; border-radius: 8px; width: fit-content; transform: rotate(-1.2deg); }
html[data-tema^="21"] .ox-b2bv--hodvab .ox-lead { color: rgba(255, 255, 255, .92); max-width: 52ch; }
html[data-tema^="21"] .ox-b2bv__hrdina { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
html[data-tema^="21"] .ox-b2bv__akcie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
html[data-tema^="21"] .ox-b2bv--hodvab .ox-btn--hlavne { background: #fff; color: var(--sk-akcent-tmavy, #D60019); border-color: #fff; border-radius: 999px; }
html[data-tema^="21"] .ox-b2bv--hodvab .ox-btn--obrys { color: #fff; border-color: rgba(255, 255, 255, .55); border-radius: 999px; }
html[data-tema^="21"] .ox-b2bv__typy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
html[data-tema^="21"] .ox-b2bv__typy span { border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 7px 14px; font-size: 13px; }
html[data-tema^="21"] .ox-b2bv__plagat { margin: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 22px; padding: 18px; }
html[data-tema^="21"] .ox-b2bv__plagat img { display: block; width: 100%; height: auto; }
html[data-tema^="21"] .ox-b2bv__pas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #fff; color: var(--sk-atrament, #1B1B1B); border-radius: 22px; margin-top: clamp(26px, 3vw, 46px); overflow: hidden; }
html[data-tema^="21"] .ox-b2bv__pas > div { padding: clamp(18px, 2vw, 28px); border-right: 1px solid rgba(27, 27, 27, .12); }
html[data-tema^="21"] .ox-b2bv__pas > div:last-child { border-right: 0; }
html[data-tema^="21"] .ox-b2bv__pas b { display: block; font: 400 clamp(30px, 3.2vw, 46px)/1 var(--sk-font-nadpis); color: var(--sk-akcent-tmavy, #D60019); font-variant-numeric: tabular-nums; }
html[data-tema^="21"] .ox-b2bv__pas span { font-size: 13.5px; color: #574B47; }
html[data-tema^="21"] .ox-b2bv--kalksirka .ox-b2bv__kalk { margin-top: clamp(18px, 2vw, 30px); }
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-b2bv__hrdina { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bv__pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-tema^="21"] .ox-b2bv__pas > div:nth-child(2n) { border-right: 0; }
	html[data-tema^="21"] .ox-b2bv__pas > div:nth-child(-n+2) { border-bottom: 1px solid rgba(27, 27, 27, .12); }
}
/* 193) Fable 22. 9. 2026: a) šesť ďalších návrhov /b2b (pohlady.js b2bHtml: kalkhrdina, os, porovnanie, ico,
   kalkreg, nalepka) na kostre bloku 192 - spoločná trieda .ox-b2bv--hodvabny (hodváb + biely text + biele
   tlačidlá), karty krokov .ox-b2bv__krok, porovnanie .ox-b2bv__por, hárok registrácie .ox-b2bv__harok.
   b) 3D logo OXO Red na /oxo-red: plátno .ox-red3d fixne cez celé okno, z-index 0 pod obsahom, sekcie
   trasy priehľadné a nad plátnom (position relative, z-index 1), päta tiež. */
html[data-tema^="21"] .ox-b2bv--hodvabny { background: var(--ox-silk, linear-gradient(160deg, #E1001A, #7A000E)) !important; color: #fff; }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-oko { color: rgba(255, 255, 255, .86); }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-h1, html[data-tema^="21"] .ox-b2bv--hodvabny .ox-h2 { color: #fff; }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-h1 em { font-style: normal; background: #fff; color: var(--sk-akcent-tmavy, #D60019); padding: 0 .14em; border-radius: 8px; display: inline-block; transform: rotate(-1.5deg); line-height: 1.12; }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-lead { color: rgba(255, 255, 255, .92); max-width: 56ch; }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-hlava-sekcie .ox-lead { margin-bottom: 0; }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-btn--hlavne { background: #fff; color: var(--sk-akcent-tmavy, #D60019); border-color: #fff; border-radius: 999px; }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-btn--obrys { color: #fff; border-color: rgba(255, 255, 255, .55); border-radius: 999px; }
html[data-tema^="21"] .ox-b2bv--hodvabny .ox-b2bv__typy span { border-color: rgba(255, 255, 255, .55); color: #fff; }
html[data-tema^="21"] .ox-b2bv__hlava { max-width: 900px; }
html[data-tema^="21"] .ox-b2bv__kalk { margin-top: clamp(18px, 2.4vw, 32px); }
html[data-tema^="21"] .ox-b2bv__kalk .ox-kalk { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalk { margin-top: 0; }
html[data-tema^="21"] .ox-b2bv__hrdina--ico { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
/* karty krokov ako v B2B sekcii domova */
html[data-tema^="21"] .ox-b2bv__kroky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(18px, 2.4vw, 30px); }
html[data-tema^="21"] .ox-b2bv__kroky--stlpec { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 460px; }
html[data-tema^="21"] .ox-b2bv__krok { background: rgba(255, 255, 255, .96); border-radius: 22px; padding: 22px 24px; color: var(--sk-text, #1B1B1B); }
html[data-tema^="21"] .ox-b2bv__krok--riadok { display: flex; gap: 16px; align-items: center; padding: 16px 20px; }
html[data-tema^="21"] .ox-b2bv__krok--riadok h4 { margin: 0 0 4px; }
html[data-tema^="21"] .ox-b2bv__krok b { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sk-akcent-tmavy, #D60019); color: var(--sk-akcent-tmavy, #D60019); align-items: center; justify-content: center; font: 700 14px/1 var(--sk-font-text); }
html[data-tema^="21"] .ox-b2bv__krok h4 { margin: 14px 0 8px; font: 700 13px/1.3 var(--sk-font-text); letter-spacing: .14em; text-transform: uppercase; }
html[data-tema^="21"] .ox-b2bv__krok p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #574B47; }
html[data-tema^="21"] .ox-b2bv__krok strong { color: var(--sk-akcent-tmavy, #D60019); font-size: 14px; }
/* nálepka */
html[data-tema^="21"] .ox-b2bv__nalepka { margin: 0; justify-self: end; width: min(320px, 80%); }
html[data-tema^="21"] .ox-b2bv__nalepka img { display: block; width: 100%; height: auto; border-radius: 50%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
/* časová os */
html[data-tema^="21"] .ox-b2bv__os { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; margin-top: clamp(22px, 3vw, 40px); }
html[data-tema^="21"] .ox-b2bv__osk { background: #fff; color: var(--sk-text, #1B1B1B); border-radius: 22px; padding: 30px 32px; }
html[data-tema^="21"] .ox-b2bv__osr { display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 16px 0; border-top: 1px solid rgba(27, 27, 27, .12); align-items: center; }
html[data-tema^="21"] .ox-b2bv__osr:first-child { border-top: 0; }
html[data-tema^="21"] .ox-b2bv__osr b { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sk-akcent-tmavy, #D60019); color: var(--sk-akcent-tmavy, #D60019); align-items: center; justify-content: center; font: 700 13px/1 var(--sk-font-text); }
html[data-tema^="21"] .ox-b2bv__osn { font: 400 26px/1 var(--sk-font-nadpis); text-transform: uppercase; }
html[data-tema^="21"] .ox-b2bv__osn small { display: block; font: 700 11px/1.6 var(--sk-font-text); letter-spacing: .18em; color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"] .ox-b2bv__osr p { margin: 0; font-size: 14px; color: #574B47; line-height: 1.5; }
html[data-tema^="21"] .ox-b2bv__osr--svetly { opacity: .38; }
html[data-tema^="21"] .ox-b2bv__panel { background: #1b1b1b; color: #fff; border-radius: 22px; padding: 28px; align-self: start; }
html[data-tema^="21"] .ox-b2bv__panel p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); margin: 18px 0 0; }
html[data-tema^="21"] .ox-b2bv__pod { display: block; font: 700 11px/1.6 var(--sk-font-text); letter-spacing: .22em; text-transform: uppercase; color: #FF8A96; }
html[data-tema^="21"] .ox-b2bv__den { display: block; font: 400 84px/1 var(--sk-font-nadpis); margin: 8px 0 16px; font-variant-numeric: tabular-nums; }
html[data-tema^="21"] .ox-b2bv__meter { display: block; height: 8px; background: rgba(255, 255, 255, .15); border-radius: 4px; margin-bottom: 10px; }
html[data-tema^="21"] .ox-b2bv__meter i { display: block; height: 100%; width: 62%; background: var(--sk-akcent-tmavy, #D60019); border-radius: 4px; }
/* porovnanie čierna / červená */
html[data-tema^="21"] .ox-b2bv__por { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 26px; overflow: hidden; margin-top: clamp(22px, 3vw, 40px); }
html[data-tema^="21"] .ox-b2bv__pol { padding: 32px 34px 30px; color: #fff; }
html[data-tema^="21"] .ox-b2bv__pol--cierna { background: #1b1b1b; }
html[data-tema^="21"] .ox-b2bv__pol--cervena { background: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"] .ox-b2bv__pol .ox-b2bv__pod { color: rgba(255, 255, 255, .8); }
html[data-tema^="21"] .ox-b2bv__pol h3 { font: 400 34px/1 var(--sk-font-nadpis); text-transform: uppercase; margin: 12px 0 18px; color: #fff; }
html[data-tema^="21"] .ox-b2bv__riadok { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14px; }
html[data-tema^="21"] .ox-b2bv__riadok b { font-weight: 700; text-align: right; }
html[data-tema^="21"] .ox-b2bv__sumar { font: 400 22px/1 var(--sk-font-nadpis); text-transform: uppercase; margin: 20px 0 0; }
html[data-tema^="21"] .ox-b2bv__rucka { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--sk-text, #1B1B1B); display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); font-size: 16px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); }
/* registrácia podľa IČO */
html[data-tema^="21"] .ox-b2bv__vyhody { list-style: none; padding: 0; margin: 26px 0 0; font-size: 15px; line-height: 1.5; }
html[data-tema^="21"] .ox-b2bv__vyhody li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .25); display: flex; gap: 12px; align-items: flex-start; }
html[data-tema^="21"] .ox-b2bv__vyhody li i { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--sk-akcent-tmavy, #D60019); display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--sk-font-text); font-style: normal; margin-top: 2px; }
html[data-tema^="21"] .ox-b2bv__harok { background: #fff; color: var(--sk-text, #1B1B1B); border-radius: 22px; padding: 28px 30px 30px; }
html[data-tema^="21"] .ox-b2bv__rail { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
html[data-tema^="21"] .ox-b2bv__rail span { border-radius: 999px; padding: 8px 14px; font: 600 12px/1 var(--sk-font-text); border: 1px solid rgba(27, 27, 27, .12); color: #574B47; }
html[data-tema^="21"] .ox-b2bv__rail .ox-b2bv__rail--on { background: var(--sk-akcent-tmavy, #D60019); color: #fff; border-color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"] .ox-b2bv__cnt { font: 500 19px/1.3 var(--sk-font-text); margin: 0 0 4px; }
html[data-tema^="21"] .ox-b2bv__claim { font-size: 13.5px; color: var(--sk-akcent-tmavy, #D60019); margin: 0 0 18px; }
html[data-tema^="21"] .ox-b2bv__blk { font: 700 12px/1 var(--sk-font-text); letter-spacing: .14em; text-transform: uppercase; color: #574B47; margin: 16px 0 10px; }
html[data-tema^="21"] .ox-b2bv__fill { background: var(--sk-akcent-tmavy, #D60019); color: #fff; border-radius: 14px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
html[data-tema^="21"] .ox-b2bv__fill small { display: block; font-size: 12.5px; color: #FFD9D6; }
html[data-tema^="21"] .ox-b2bv__fill b { display: block; font-size: 17px; font-weight: 600; margin: 3px 0; }
html[data-tema^="21"] .ox-b2bv__fill i { display: block; font-size: 12px; color: #FFB3B8; font-style: normal; }
html[data-tema^="21"] .ox-b2bv__fill > span { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
html[data-tema^="21"] .ox-b2bv__open { background: #fff; border: 2px solid rgba(27, 27, 27, .12); border-radius: 14px; padding: 14px 18px; margin-bottom: 8px; }
html[data-tema^="21"] .ox-b2bv__open label { display: block; font: 600 13px/1 var(--sk-font-text); margin-bottom: 8px; }
html[data-tema^="21"] .ox-b2bv__in { height: 42px; border: 1px solid rgba(27, 27, 27, .12); border-radius: 999px; display: flex; align-items: center; padding: 0 16px; color: #8a7f7c; font-size: 14px; }
html[data-tema^="21"] .ox-b2bv__h { font-size: 12.5px; color: var(--sk-akcent-tmavy, #D60019); margin-top: 8px; }
html[data-tema^="21"] .ox-b2bv__open--focus { border-color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"] .ox-b2bv__open--focus .ox-b2bv__in { border: 2px solid var(--sk-akcent-tmavy, #D60019); color: var(--sk-text, #1B1B1B); }
html[data-tema^="21"] .ox-b2bv__harok-btn { background: var(--sk-akcent-tmavy, #D60019) !important; color: #fff !important; margin-top: 6px; }
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-b2bv__kroky, html[data-tema^="21"] .ox-b2bv__os, html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg, html[data-tema^="21"] .ox-b2bv__hrdina--ico { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bv__osr { grid-template-columns: 40px minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bv__osr p { grid-column: 2; }
	html[data-tema^="21"] .ox-b2bv__por { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bv__rucka { display: none; }
	html[data-tema^="21"] .ox-b2bv__nalepka { justify-self: center; }
}
/* b) 3D logo OXO Red na /oxo-red */
.ox-red3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#ox-obsah[data-trasa="oxo-red"] > .ox-sek { position: relative; z-index: 1; }
#ox-obsah[data-trasa="oxo-red"] > .ox-sek--krem { background: transparent !important; }
body:has(.ox-red3d) #ox-pata { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ox-red3d { opacity: .8; } }
/* 193b) Fable 22. 9. 2026: 3D logo - priesvitnosť rieši CSS na plátne (vrstvy v scéne sú plné, inak sa
   14 vrstiev sčítalo do takmer nepriehľadnej červenej); krémový podklad nesie #ox-obsah, sekcie sú
   priehľadné a nad plátnom. */
.ox-red3d { opacity: .16; }
#ox-obsah[data-trasa="oxo-red"] { background: var(--sk-krem, #FFF7E6); }

/* =============================================================================
   194) Porovnanie v sekcii 01: logá nad hlavičkami (Peter 22. 9. 2026: „na návrhy
   porovnávaní daj text aj hore logá - napravo OXO Red logo čierne a naľavo staré
   OXO logo z oxobubbletea.eu webu.")
   Vľavo obrázok klasického loga, vpravo maska hlavičkového loga prefarbená na
   čiernu (tá istá technika ako logo v hlavičke). Platí pre všetky návrhy p1-p6,
   preto bez `[data-ox-porovnanie]` - je to obsah, nie vzhľad konkrétneho návrhu.
   ⚠️ Ľavý obrázok si `porovnanie()` skryje sám (`onerror`), kým súbor nie je
   nahratý - tu mu len dávame rozmer.
   ========================================================================== */
html[data-tema^="21"] .ox-s01__logo { display: block; height: 40px; width: auto; max-width: 160px; margin-bottom: 12px; }
html[data-tema^="21"] .ox-s01__logo--klasik { object-fit: contain; object-position: left center; }
html[data-tema^="21"] .ox-s01__logo--red {
	width: 160px;
	background: #1B1B1B;
	-webkit-mask: var(--logo) left center / contain no-repeat;
	        mask: var(--logo) left center / contain no-repeat;
}
/* v čiernej polovici je klasické logo na tmavom - jemné odsadenie a jas */
html[data-tema^="21"] .ox-s01__pol--cierna .ox-s01__logo--klasik { filter: brightness(1.06); }
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-s01__logo { height: 30px; max-width: 124px; margin-bottom: 8px; }
	html[data-tema^="21"] .ox-s01__logo--red { width: 124px; }
}
/* 193c) Peter 22. 9. 2026: podklad stranky nechat biely - #ox-obsah na /oxo-red spat biely (193b daval krem),
   logo trochu jemnejsie, kedze je vacsie. */
#ox-obsah[data-trasa="oxo-red"] { background: #fff; }
.ox-red3d { opacity: .14; }

/* =============================================================================
   195) Porovnanie: logá na stred a výrazne väčšie, pravé biele (Peter 22. 9. 2026:
   „logá daj do stredu daného porovnania hore a väčšie o dosť" + „toto logo biele")
   Prebíja blok 194 - ten dával logá vľavo a 40 px. Ľavé logo je klasické farebné
   (logo-oxo-klasik-2.png), pravé je maska hlavičkového loga prefarbená na bielo,
   pretože sedí na červenej polovici.
   ========================================================================== */
html[data-tema^="21"] .ox-s01__logo { height: clamp(64px, 6.4vw, 104px); max-width: min(320px, 78%); margin: 0 auto 18px; }
html[data-tema^="21"] .ox-s01__logo--klasik { object-fit: contain; object-position: center; }
html[data-tema^="21"] .ox-s01__logo--red {
	width: min(320px, 78%);
	background: #fff;
	-webkit-mask: var(--logo) center / contain no-repeat;
	        mask: var(--logo) center / contain no-repeat;
}
html[data-tema^="21"] .ox-s01__pol--cierna .ox-s01__logo--klasik { filter: none; }
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-s01__logo { height: 56px; max-width: 74%; margin-bottom: 12px; }
	html[data-tema^="21"] .ox-s01__logo--red { width: 74%; }
}

/* =============================================================================
   196) Fable 22. 9. 2026: logá v porovnaní (blok 195, RegulusX) v CSS návrhoch p2/p5/p6.
   Deti .ox-s01__pol sú teraz: img.ox-s01__logo (1), h3 (2), 5× .ox-s01__riadok (3–7); pod
   a sumar už nie sú. V p2/p5/p6 je .ox-s01__pol display:contents, takže logo vpadlo do
   mriežky ako auto-položka (p2: vľavo nad stĺpec popisov, biele logo na bielom neviditeľné;
   p5: do stĺpca popisov; p6: do prázdnej dlaždice 2/3). Tu dostáva pevné miesto v 1. riadku.
   ========================================================================== */
/* p2 - biela tabuľka: logá do 1. riadku nad svoj stĺpec, pravé (maska) červené, lebo podklad je biely */
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__logo{grid-row:1;justify-self:center;align-self:end;margin:26px auto 4px}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cierna .ox-s01__logo{grid-column:2}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__pol--cervena .ox-s01__logo{grid-column:3}
html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__logo--red{background:var(--sk-akcent-tmavy)}
/* p5 - tmavočervený rozpis (stĺpce 200px | 1fr | 1fr): logá nad hodnotové stĺpce */
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__logo{grid-row:1;justify-self:center;align-self:end;margin:0 auto 22px}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cierna .ox-s01__logo{grid-column:2}
html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__pol--cervena .ox-s01__logo{grid-column:3}
/* p6 - dlaždice 3×2: nový 1. riadok s logami (ľavé nad 1. stĺpec, pravé nad 3.), dlaždice sa posúvajú do riadkov 2–3 */
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__porovnanie{grid-template-rows:auto auto auto}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__logo{justify-self:center;align-self:center;margin:0 auto 6px}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__logo{grid-area:1/1}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__logo{grid-area:1/3}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(3),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(3) b{grid-area:2/1}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(4),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(4) b{grid-area:2/2}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(5),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(5) b{grid-area:2/3}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(6),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(6) b{grid-area:3/1}
html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok:nth-child(7),html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__pol--cervena .ox-s01__riadok:nth-child(7) b{grid-area:3/2}
@media (max-width: 760px) {
	/* mobil (blok 191b dáva .ox-s01__pol späť display:block) - logo ide normálnym tokom na začiatok polovice */
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__logo, html[data-ox-porovnanie="p5"] .ox-s01 .ox-s01__logo, html[data-ox-porovnanie="p6"] .ox-s01 .ox-s01__logo { grid-area: auto; margin: 0 auto 12px; }
	html[data-ox-porovnanie="p2"] .ox-s01 .ox-s01__logo--red { background: #fff; }
}

/* =============================================================================
   197) Peter 22. 9. 2026 (18:25) k porovnaniu v sekcii 01: „tieto texty vycentruj" - nadpisy
   polovíc (OXO Bubble Tea franšíza / OXO Red Bubble Tea) na stred, pod vycentrované logá
   (blok 195). Platí pre všetky návrhy p1–p6; v p5 je h3 skryté, v p2 je v mriežke (riadok 2).
   ========================================================================== */
html[data-tema^="21"] .ox-s01 .ox-s01__pol h3 { text-align: center; }

/* =============================================================================
   198) Peter 22. 9. 2026 (19:05) — sekcia 02 „Pre prevádzky“ (NoirG, návrh
   `zaklad`) a porovnanie v sekcii 01. Šesť pokynov z jednej dávky:
   a) „tento widget nech nemá oblé rohy úplne v rohu“ + „tak isto dole“ — doska
      je pás cez celé okno, takže polomer ide preč hore aj dole (blok 28c ho
      dával na 26 px, keď doska ešte bola karta vo vnútri wrapu).
   b) „tento text zväčši“ — nadpis „Máte existujúcu gastro prevádzku?“.
   c) „tieto okná zväčši a daj ich zarovno titulky naľavo a celý obsah widgetu
      daj viac doprava a tým pádom úplne naľavo presuň nálepku“ — karty 01–04
      majú viac vzduchu aj väčšie písmo, oba stĺpce začínajú v tej istej výške
      (21g ich dovtedy centrovala, preto karty vybiehali nad nadočko), medzera
      medzi stĺpcami je väčšia, takže blok kariet sedí viac vpravo, a nálepka
      ide do ĽAVÉHO stĺpca pod tlačidlo.
   d) „nech to tým pádom nie je také vysoké po úpravách všetkých“ — menšie
      zvislé odsadenie dosky a nálepka už nerobí vlastný riadok POD kartami
      (výšku tak určuje vyšší z dvoch stĺpcov, nie ich súčet). Namerané na
      1600 px: 841 → 788 px aj s väčšími kartami a nadpisom.
   e) „zväčši tieto texty“ — riadky porovnania v sekcii 01 (návrh p3 Dve karty).
   ⚠️ Nálepka má v bloku 167 natvrdo `grid-column: 2; grid-row: 2`, preto ju tu
   treba prepísať OBOMA súradnicami, nie len `justify-self`.
   ⚠️ Karty majú v bloku 28e päť selektorov s `:first-child`/`:nth-child`, ktoré
   sú špecifickejšie než `li` — odsadenie preto musí zopakovať celú tú skupinu,
   inak by sa zväčšila len prostredná karta.
   ⚠️ Rozloženie je v `@media (min-width: 861px)`: pod 861 px si blok 167 dáva
   všetko späť do jedného stĺpca (`grid-column: auto`) a pevné súradnice by ho
   rozbili.
   ========================================================================== */
html[data-tema^="21g"] .ox-show__b2b { border-radius: 0; }
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b .ox-h3 {
	/* ⚠️ 22. 9. 2026 Peter: „riadky nech sú trošku ďalej od seba, keďže diakritika sa
	   odsekáva" — pri 1.02 zasahovali dĺžne (Á, Ú) do riadku nad sebou a orezávali sa. */
	font-size: clamp(32px, 4.3vw, 62px); line-height: 1.14; margin: 2px 0 12px;
}
/* ⚠️ 22. 9. 2026 (19:40) Peter, druhé kolo: „trošku zmenši tieto kocky ale text daj
   o trošku väčší, potom to celé posuň doprava a tým pádom sa nálepka zmestí naľavo
   od textu, nech je to v jednom riadku" — doska má TRI stĺpce v jednom riadku:
   nálepka · text · karty. Nálepka tým vypadla z druhého riadku (pôvodne pod textom),
   takže sekcia je ešte nižšia a text sa posunul doprava o jej šírku + medzeru. */
@media (min-width: 861px) {
	/* ⚠️ 22. 9. 2026 (19:55) Peter: „text a kocky 4 trošku viac doprava a potom nálepka
	   môže väčšia" — nálepka je širšia a väčšia medzera za ňou, takže text aj karty
	   idú doprava (pri 1600 px: text 391 → 444 px, karty 869 → 903 px). */
	/* ⚠️ 22. 9. 2026 (20:40) Peter: „text aj 4 kocky napravo posuň viac doprava a nálepku
	   zväčši, nech sú tie elementy viac rovnomerne rozložené na šírku." Doska je pás cez
	   celé okno, ale obsah dovtedy sedel presne v šírke wrapu, takže vpravo ostávalo
	   ~200 px prázdnej červenej. Pravé odsadenie je preto menšie než `calc(50vw - 50%)`
	   a obsah sa o toľko roztiahne doprava; ĽAVÉ ostáva na wrape, aby nálepka lícovala
	   so zvyškom stránky. Pri 1600 px: obsah 1193 → 1333 px, text 392 → ~456,
	   karty 498 → ~525, nálepka 190 → 208. */
	/* ⚠️ 22. 9. 2026 (21:10) Peter: „v tomto widgete vymeň logo a text" — poradie je teraz
	   TEXT · nálepka · karty (nálepka bola prvá). Text tak lícuje s ľavým okrajom wrapu
	   ako zvyšok stránky a nálepka sadla medzi text a karty. */
	html[data-tema^="21g"] .ox-show__b2b--zaklad {
		grid-template-columns: minmax(0, .92fr) auto minmax(0, 1.06fr);
		column-gap: clamp(30px, 4.5vw, 78px);
		/* ⚠️ 22. 9. 2026 (21:45) Peter: „naľavo je väčšia medzera pred textom než napravo za
		   kockami - nech je to rovnako veľká medzera zľava aj sprava." Doska aj pás noviniek
		   idú cez celé okno, takže rovnaké `padding-inline` = rovnaké hrany; hodnota je
		   spoločná premenná `--ox-pas-odsadenie`. Pôvodné `calc(50vw - 50%)` (= os wrapu)
		   by text aj karty stlačilo o 122 px a nadpis by padol na štyri riadky. */
		padding-inline: var(--ox-pas-odsadenie);
		align-items: start;
		/* ⚠️ 22. 9. 2026 (20:50) Peter: „na výšku to sprav menej vysoké - odstráň zbytočný
		   prázdny priestor dole a hore odober trošku." Hore ostáva viac než dole, lebo nad
		   nadočkom aj tak nič nie je; pri 1600 px: 651 → ~605 px. */
		padding-top: clamp(26px, 2.8vw, 44px);
		padding-bottom: clamp(20px, 2.2vw, 34px);
	}
	html[data-tema^="21g"] .ox-show__b2b--zaklad .ox-show__nalepka {
		grid-column: 2; grid-row: 1; justify-self: center; align-self: center;
		/* 22. 9. 2026 Peter: „nálepku väčšiu a trošilinku doprava a hore". Posun je cez
		   `top`/`left` (prvok už má `position: relative`), nie cez `transform` - ten drží
		   naklonenie -7° aj efekt pri prejdení myšou; a nie cez `margin`, ktorý by sa pri
		   `align-self: center` prejavil len polovicou. */
		width: clamp(178px, 15.8vw, 268px); margin: 0; top: -22px;
		left: calc(16px - var(--ox-b2b-posun));
		/* „okraje skús trošku rozmazať, nech to tam sadne, ale iba trošilinku" — kruhová
		   maska s úzkym prechodom (92 % plná, posledných 8 % do stratena). Maska sa
		   orezáva na border-box, takže vonkajší tieň by ostal useknutý - preto je preč. */
		-webkit-mask: radial-gradient(circle at 50% 50%, #000 92%, rgba(0, 0, 0, 0) 100%);
		mask: radial-gradient(circle at 50% 50%, #000 92%, rgba(0, 0, 0, 0) 100%);
		box-shadow: none;
	}
	html[data-tema^="21g"] .ox-show__b2b--zaklad > div:first-child { align-self: start; grid-column: 1; grid-row: 1; }
	/* 22. 9. 2026 Peter: „4 kocky čo sú napravo zarovnaj na výšku do stredu" - stĺpec
	   kariet je nižší než textový, takže `center` ho posadí na jeho os. */
	html[data-tema^="21g"] .ox-show__b2b--zaklad .ox-show__cesta {
		align-self: center; grid-column: 3; grid-row: 1;
		/* 22. 9. 2026 Peter: „tieto elementy všetky o trošku doľava, ale 20 px" (nálepka
		   aj karty). Posun je `position: relative`, takže mriežka ani šírky sa nemenia. */
		position: relative; left: calc(-1 * var(--ox-b2b-posun));
	}
}
/* odpoveď pod nadpisom - medzistupeň medzi nadpisom (62 px) a leadom (16,5 px) */
html[data-tema^="21g"] :where([data-ox21-domov], #ox-obsah:has(> .ox-show)) .ox-show__b2b .ox-b2bn__odpoved {
	color: #fff; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.4; font-weight: 600;
	max-width: 30ch; margin: 0 0 12px;
}
/* karty: menšia škatuľa, väčší text (Peter, druhé kolo) */
html[data-tema^="21g"] .ox-show__cesta { gap: clamp(10px, .9vw, 14px); }
html[data-tema^="21g"] .ox-show__cesta li,
html[data-tema^="21g"] .ox-show__cesta li:first-child,
html[data-tema^="21g"] .ox-show__cesta li:last-child,
html[data-tema^="21g"] .ox-show__cesta li:nth-child(odd),
html[data-tema^="21g"] .ox-show__cesta li:nth-child(-n+2) {
	padding: clamp(13px, 1.15vw, 18px); border-radius: 16px;
}
html[data-tema^="21g"] .ox-show__cesta li::before { width: 34px; height: 34px; font-size: 15px; margin-bottom: 4px; }
/* ⚠️ 22. 9. 2026 Peter: „tieto titulky sprav trošku hrubšie a ešte o trošičku väčšie" -
   titulok karty dedil Inter 400 (`b` v tomto bloku váhu nemal), preto pôsobil tenko.
   Inter 700 je v index.php načítaný, takže to nie je nepravý tučný rez. */
/* ⚠️ `li` v selektore je POVINNÉ: skorší blok má `html[data-tema^="21"] .ox-show__cesta li b
   { font-weight: 400 }`, čo je o jeden prvok špecifickejšie - bez `li` sa váha neprejaví. */
html[data-tema^="21g"] .ox-show__cesta li b { font-size: clamp(15.5px, 1.18vw, 18.5px); font-weight: 700; }
html[data-tema^="21g"] .ox-show__cesta small { font-size: clamp(13.5px, 1vw, 15px); line-height: 1.45; }
/* e) porovnanie p3: riadky boli 15 px, čo je pod úrovňou zvyšku manifestu */
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok { font-size: 17.5px; padding: 15px 0; }
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b { font-size: 17.5px; gap: 12px; }
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before { width: 28px; height: 28px; flex: 0 0 28px; font: 800 13px/1 Inter; }
/* 22. 9. 2026 Peter: „tieto ✕ka na porovnaní - zmeň farbu na červenú akú máme v pozadí",
   vzápätí „✕ka daj bielym a tie guľaté kruhy pozadie červené" — výsledok je presné
   zrkadlo pravej polovice: tam biely krúžok + červené ✓, tu červený krúžok + biele ✕.
   Červená = #D60019 (`--sk-akcent-tmavy`), prvá zarážka gradientu červenej dosky. */
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b::before {
	background: var(--sk-akcent-tmavy); color: #fff;
}
/* 22. 9. 2026 Peter: „✕ka v kruhoch presuň za text - nie pred textom", vzápätí „aj tieto
   fajky za text" - obe polovice teda majú značku vpravo za textom. `b` je inline-flex,
   takže stačí obrátiť smer; ::before ostáva v kóde prvý, len sa vykreslí posledný. */
html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b { flex-direction: row-reverse; }

/* =============================================================================
   199) Peter 22. 9. 2026 (20:20): „hornú časť, kde je OXO Red logo červené a text
   napravo, tak zúž, aby to malo rovnakú šírku ako to porovnanie pod tým, nech to ladí."
   `.ox-s01__redkarta` je sama tou bielou doskou, kým `.ox-s01__porovnanie` je len
   priesvitný rám a dve karty v ňom sú odsadené jeho `padding`-om (blok 172:
   `clamp(18px, 2.4vw, 34px)`). Preto karta dostane rovnakú hodnotu ako `margin-inline`
   — pri 1600 px potom obe končia presne na 125 a 1459 px.
   ⚠️ Keď sa zmení `padding` porovnania v `.ox-s01--a4b`, MUSÍ sa zmeniť aj toto,
   inak sa hrany rozídu.
   ========================================================================== */
html[data-tema^="21"] .ox-s01--a4b .ox-s01__redkarta { margin-inline: clamp(18px, 2.4vw, 34px); }

/* =============================================================================
   200) Peter 22. 9. 2026 (20:35): „do stredu daj pod seba tie červené claimy".
   ⚠️ PRAVIDLO ZRUŠENÉ v ten istý večer — o pol hodiny neskôr claimy dostali vlastný
   stĺpec karty (blok 201) a toto pravidlo (o jednu triedu špecifickejšie) ho
   prebíjalo: držalo `align-items: center`, takže štítky ostávali zubaté, a na mobile
   vnucovalo stĺpec aj tam, kde má byť riadok. Štýl claimov je teraz LEN v bloku 201.
   ========================================================================== */

/* =============================================================================
   201) Peter 22. 9. 2026 (21:00): „tých 6 claimov nech je v strede medzi logom a
   textom ako tretí element na šírku." Biela karta má teraz tri stĺpce:
   logo · claimy · text. Zoznam claimov vykresľuje `21-showroom.js` ako priameho
   potomka karty (`.ox-s01__redclaimy`), takže nie je vnorený v odsekoch.
   ⚠️ Blok 165 dáva `--logo` pod 860 px jeden stĺpec; `--tri` je rovnako špecifické
   a je NIŽŠIE v súbore, takže mobilnú vetvu treba zopakovať aj tu.
   ========================================================================== */
html[data-tema^="21"] .ox-s01__redkarta--tri {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
	gap: clamp(18px, 2.4vw, 40px); align-items: center;
}
/* 22. 9. 2026 Peter: „toto zarovnaj, aby začínali v rovnakej šírke" — štítky boli
   centrované, takže každý začínal inde a bodky tvorili zubatý okraj. `flex-start` ich
   zarovná na spoločnú ľavú hranu; stĺpec mriežky je `auto` (široký ako najdlhší štítok),
   takže celý blok ostáva opticky v strede karty. */
html[data-tema^="21"] .ox-s01__redkarta--tri .ox-s01__redclaimy {
	flex-direction: column; align-items: flex-start; gap: 8px; margin: 0;
}
@media (max-width: 860px) {
	html[data-tema^="21"] .ox-s01__redkarta--tri { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-s01__redkarta--tri .ox-s01__redclaimy { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* =============================================================================
   202) Peter 22. 9. 2026 (21:30): „text NOVINKY PRE PREVÁDZKY nech je zarovno textu
   z widgetu nad tým a tým pádom napravo textbox viac roztiahni, nech to sadne"
   + „tieto elementy všetky o trošku doľava, ale 20 px" (nálepka a karty v kapitole 02).
   Pás noviniek žije v päte, ktorá má UŽŠÍ wrap (1120 px) než zvyšok stránky
   (`--sk-maxw` = 1320 px). Oba pásy sú roztiahnuté cez celé okno, takže ich
   vnútorné odsadenie sa dá zladiť: rozdiel je presne (1320 − 1120) / 2 = 100 px.
   `max(var(--sk-pad), …)` drží zarovnanie aj pod ~1450 px, kde sa wrapy vyrovnajú
   a odpočet 100 px by už text vytlačil doľava mimo osi stránky.
   Vpravo pás kopíruje pravé odsadenie dosky 02 vrátane 20 px posunu kariet, takže
   textbox končí presne na ich hrane.
   ⚠️ Posun kariet a nálepky drží `--ox-b2b-posun` - meniť LEN tu, nie na troch miestach.
   ========================================================================== */
html[data-tema^="21g"] {
	/* spoločné odsadenie dvoch pásov cez celé okno: kapitola 02 a pás noviniek v päte.
	   Rovnaká hodnota na oboch stranách oboch pásov = rovnaké medzery aj vzájomné
	   zarovnanie textov. 7,5 vw je kompromis: pri 1600 px dá 120 px, takže nadpis
	   ostáva na troch riadkoch a karty si držia šírku. */
	--ox-pas-odsadenie: clamp(24px, 7.5vw, 150px);
	/* posun nálepky a kariet doľava; pri symetrických okrajoch musí byť 0, inak sa
	   pravá medzera opäť rozíde s ľavou */
	--ox-b2b-posun: 0px;
}
html[data-tema] #ox-pata .ox-pata__pas {
	padding-inline: var(--ox-pas-odsadenie, clamp(24px, 7.5vw, 150px));
	/* 22. 9. 2026 Peter: „text NOVINKY PRE PREVÁDZKY prehoď napravo a textbox nech je
	   naľavo, čiže naopak elementy." V HTML ostáva poradie nadpis → formulár (kvôli
	   čítačkám aj mobilu), vizuálne ich prehadzuje `order`. Prvý stĺpec je preto
	   širší - patrí formuláru. */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
html[data-tema] #ox-pata .ox-pata__pas > div:first-child { order: 2; }
html[data-tema] #ox-pata .ox-pata__pas .ox-pata__form { order: 1; }
/* 22. 9. 2026 Peter: „text NOVINKY PRE PREVÁDZKY nech končí zarovno štyroch kociek
   vo widgete nad tým … nech je to zarovnané komplet." Stĺpec končí na tej istej
   hrane ako karty, ale text v ňom je kratší než stĺpec, takže sa musí zarovnať
   doprava; odsek má `max-width` v ch, preto ho k pravej hrane tlačí `margin-left: auto`. */
html[data-tema] #ox-pata .ox-pata__pas > div:first-child { text-align: right; }
html[data-tema] #ox-pata .ox-pata__pas > div:first-child p { margin-left: auto; }
@media (max-width: 900px) {
	html[data-tema] #ox-pata .ox-pata__pas { padding-inline: var(--sk-pad); grid-template-columns: minmax(0, 1fr); }
	/* na mobile nech nadpis ostane prvý, formulár pod ním, a text späť doľava */
	html[data-tema] #ox-pata .ox-pata__pas > div:first-child,
	html[data-tema] #ox-pata .ox-pata__pas .ox-pata__form { order: 0; }
	html[data-tema] #ox-pata .ox-pata__pas > div:first-child { text-align: left; }
	html[data-tema] #ox-pata .ox-pata__pas > div:first-child p { margin-left: 0; }
}

/* =============================================================================
   203) INTERNÝ prepínač veľkosti textov — Peter 22. 9. 2026 (21:55): „hore do top
   baru pridaj, iba pre nás, aby sme vedeli pozrieť návrhy … 10 ich daj a každá
   trošku zmení veľkosť textov … aby sme vedeli porovnať, ako web vyzerá pri
   rôznych veľkostiach textov na celej domovskej stránke."

   Ovládač stavia `assets/velkosti.js` a ukáže sa LEN po `?velkosti=1`
   (`?velkosti=0` ho vypne). Bez neho na <html> nie je `data-ox-velkost`, takže
   ani jedno pravidlo tohto bloku nič neprepíše a verejnosť vidí web bez zmeny.

   Ako to funguje: sada nastaví násobiteľ `--ox-tm` a pravidlá nižšie ním
   prenásobia pôvodné veľkosti jednotlivých textových rolí. `!important` je tu
   naschvál — role majú v súbore viacero konkurenčných pravidiel a nástroj sa
   nikdy nespustí návštevníkovi, takže nemá čo pokaziť.
   ⚠️ Šírky odsekov sú v `ch` (44ch, 46ch, 30ch…), a `ch` rastie s písmom, takže
   riadky si držia rozumnú dĺžku samy — pri veľkých sadách sa odsek zúži, pri
   malých roztiahne. Preto tu šírky nepremieňam.
   ⚠️ Pridaná rola = pridaný riadok sem. Sekcie, ktoré sa dokresľujú až pri
   scrollovaní (príprava, kategórie, dôvody), nemajú svoju rolu podchytenú -
   doplniť, keď bude treba.
   ========================================================================== */
html[data-ox-velkost="v1"]  { --ox-tm: .78; }
html[data-ox-velkost="v2"]  { --ox-tm: .85; }
html[data-ox-velkost="v3"]  { --ox-tm: .91; }
html[data-ox-velkost="v4"]  { --ox-tm: .96; }
html[data-ox-velkost="v5"]  { --ox-tm: 1; }      /* Základ = dnešný web */
html[data-ox-velkost="v6"]  { --ox-tm: 1.05; }
html[data-ox-velkost="v7"]  { --ox-tm: 1.11; }
html[data-ox-velkost="v8"]  { --ox-tm: 1.18; }
html[data-ox-velkost="v9"]  { --ox-tm: 1.28; }
html[data-ox-velkost="v10"] { --ox-tm: 1.42; }

/* --- nadpisy ------------------------------------------------------------- */
html[data-ox-velkost] .ox-h1 { font-size: calc(clamp(38px, 6.6vw, 92px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-h2 { font-size: calc(clamp(34px, 4.6vw, 64px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-msr__h2 { font-size: calc(clamp(34px, 4.6vw, 64px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-s01--a4 .ox-s01__manifest > div > .ox-h2 { font-size: calc(clamp(42px, 4.7vw, 81px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-h3 { font-size: calc(clamp(22px, 2.4vw, 32px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-show__b2b .ox-h3 { font-size: calc(clamp(32px, 4.3vw, 62px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-s01__pol h3 { font-size: calc(clamp(24px, 2.4vw, 34px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-oko { font-size: calc(11.5px * var(--ox-tm)) !important; }

/* --- telo textu ---------------------------------------------------------- */
html[data-ox-velkost] .ox-lead { font-size: calc(clamp(17px, 1.5vw, 21px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-show__b2b p { font-size: calc(16.5px * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-b2bn__odpoved { font-size: calc(clamp(17px, 1.35vw, 21px) * var(--ox-tm)) !important; }

/* --- sekcia 01: manifest, porovnanie, štítky ------------------------------ */
html[data-ox-velkost] .ox-s01__riadok,
html[data-ox-velkost] .ox-s01__riadok b { font-size: calc(17.5px * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-show__bez li { font-size: calc(12px * var(--ox-tm)) !important; }

/* --- kapitola 02: karty 01-04 -------------------------------------------- */
html[data-ox-velkost] .ox-show__cesta li b { font-size: calc(clamp(15.5px, 1.18vw, 18.5px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-show__cesta small { font-size: calc(clamp(13.5px, 1vw, 15px) * var(--ox-tm)) !important; }

/* --- tlačidlá a menu ------------------------------------------------------ */
html[data-ox-velkost] .ox-btn { font-size: calc(14px * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-show__akcie .ox-btn { font-size: calc(16px * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-nav a { font-size: calc(16.5px * var(--ox-tm)) !important; }

/* --- päta ---------------------------------------------------------------- */
html[data-ox-velkost] .ox-pata__pas-h { font-size: calc(clamp(34px, 3.6vw, 54px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-pata__pas p { font-size: calc(clamp(15px, 1.15vw, 17px) * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-pata__stlpec h4 { font-size: calc(20px * var(--ox-tm)) !important; }
html[data-ox-velkost] .ox-pata__stlpec a,
html[data-ox-velkost] .ox-pata__stlpec p,
html[data-ox-velkost] .ox-pata__stlpec address { font-size: calc(14.5px * var(--ox-tm)) !important; }

/* --- samotný ovládač v lište (interný, preto smie byť nenápadne technický) - */
.ox-velk {
	display: inline-flex; align-items: center; gap: 4px; margin-right: 10px;
	padding: 3px 4px 3px 6px; border-radius: 999px;
	background: rgba(0, 0, 0, .55); color: #fff;
	font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap;
}
.ox-velk__sip {
	width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff;
	font: 700 13px/1 Inter, system-ui, sans-serif;
}
.ox-velk__sip:hover { background: rgba(255, 255, 255, .34); }
.ox-velk__text { display: inline-flex; align-items: baseline; gap: 5px; }
.ox-velk__poradie { opacity: .7; font-weight: 800; }
.ox-velk__vyber {
	max-width: 132px; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255, 255, 255, .18); color: #fff; padding: 3px 6px;
	font: 700 11px/1 Inter, system-ui, sans-serif;
}
.ox-velk__vyber option { color: #1B1B1B; }
.ox-velk--plavajuci { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 9999; }
@media (max-width: 900px) { .ox-velk__vyber, .ox-velk__nazov { display: none; } }

/* =============================================================================
   204) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): /b2b návrh 11 „Kalkulačka vedľa
   registrácie" napevno + „tieto tlačidlá zväčši, vycentruj a daj ich hore nad
   kalkulačku". Pravý stĺpec je teraz obal `.ox-b2bv__kalkstlpec` = tlačidlá + kalkulačka.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv__kalkstlpec { min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); }
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk {
	margin-top: 0; justify-content: center; gap: clamp(12px, 1.2vw, 18px);
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn {
	flex: 1 1 0; max-width: 340px; justify-content: center; text-align: center;
	font-size: clamp(16px, 1.25vw, 19px); padding: clamp(18px, 1.5vw, 22px) clamp(24px, 2.2vw, 36px);
	min-height: 64px;
}
@media (max-width: 560px) {
	html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn { flex-basis: 100%; max-width: none; }
}

/* =============================================================================
   205) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): na /b2b pás „Poďme do toho"
   nahradený 4 krokmi („ako sme mali predtým - iba 4 kroky") v 5 návrhoch, prepínač
   `b2bkroky` (widgety.js). Markup `b2bKrokyHtml()` je spoločný, návrh = atribút
   `html[data-ox-b2bkroky]`. Anton má jediný rez 400 - nikde font-weight 700 nad ním.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bkroky { background: #fff; color: #1a1a1a; padding-block: clamp(56px, 6vw, 96px); }
html[data-tema^="21"] .ox-b2bkroky__hlava { text-align: center; margin-bottom: clamp(28px, 3vw, 48px); }
html[data-tema^="21"] .ox-b2bkroky__hlava .ox-oko { justify-content: center; color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"] .ox-b2bkroky__hlava .ox-h2 { color: #1a1a1a; margin: 8px 0 0; }
html[data-tema^="21"] .ox-b2bkroky__zoznam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); counter-reset: none; }
html[data-tema^="21"] .ox-b2bkroky__krok { position: relative; min-width: 0; }
html[data-tema^="21"] .ox-b2bkroky__cislo { font-family: var(--sk-font-nadpis, Anton, sans-serif); font-weight: 400; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
html[data-tema^="21"] .ox-b2bkroky__nazov { font-family: var(--sk-font-nadpis, Anton, sans-serif); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.2; margin: 0 0 6px; }
html[data-tema^="21"] .ox-b2bkroky__text { font-family: Inter, system-ui, sans-serif; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; margin: 0; color: #4a4a4a; }

/* k1 · Karty - štyri karty s červeným číslom (pôvodný vzhľad „Ako to prebieha") */
html[data-ox-b2bkroky="k1"] .ox-b2bkroky { background: #f7f3f2; }
html[data-ox-b2bkroky="k1"] .ox-b2bkroky__krok { background: #fff; border-radius: 18px; padding: clamp(22px, 2vw, 30px); box-shadow: 0 18px 40px -28px rgba(80, 0, 10, .35); }
html[data-ox-b2bkroky="k1"] .ox-b2bkroky__cislo { width: 52px; height: 52px; border-radius: 50%; background: var(--sk-akcent-tmavy, #D60019); color: #fff; font-size: 22px; margin-bottom: 16px; }

/* k2 · Časová os - krúžky spojené linkou na červenej ploche */
html[data-ox-b2bkroky="k2"] .ox-b2bkroky { background: var(--sk-akcent-tmavy, #D60019); color: #fff; }
/* zosilnené: téma 21 farbí .ox-h2 a .ox-oko silnejším selektorom, na červenej ostávali tmavé */
html[data-ox-b2bkroky="k2"] .ox-b2bkroky.ox-b2bkroky .ox-b2bkroky__hlava .ox-oko,
html[data-ox-b2bkroky="k2"] .ox-b2bkroky.ox-b2bkroky .ox-b2bkroky__hlava .ox-h2 { color: #fff !important; }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky.ox-b2bkroky .ox-b2bkroky__hlava .ox-oko::before,
html[data-ox-b2bkroky="k2"] .ox-b2bkroky.ox-b2bkroky .ox-b2bkroky__hlava .ox-oko::after { background: rgba(255, 255, 255, .6) !important; }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky__krok { text-align: center; padding-top: 4px; }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky__krok::before { content: ''; position: absolute; top: 34px; left: 50%; width: calc(100% + clamp(14px, 1.6vw, 24px)); height: 2px; background: rgba(255, 255, 255, .45); z-index: 0; }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky__krok:last-child::before { display: none; }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky__cislo { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--sk-akcent-tmavy, #D60019); font-size: 26px; margin-bottom: 18px; box-shadow: 0 0 0 8px var(--sk-akcent-tmavy, #D60019); }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky__nazov { color: #fff; }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky__text { color: rgba(255, 255, 255, .88); max-width: 26ch; margin-inline: auto; }

/* k3 · Veľké čísla - obrie obrysové číslice, zvislé deliace linky */
html[data-ox-b2bkroky="k3"] .ox-b2bkroky__zoznam { gap: 0; }
html[data-ox-b2bkroky="k3"] .ox-b2bkroky__krok { padding: 4px clamp(18px, 2vw, 32px); border-left: 1px solid rgba(26, 26, 26, .14); }
html[data-ox-b2bkroky="k3"] .ox-b2bkroky__krok:first-child { border-left: 0; padding-left: 0; }
html[data-ox-b2bkroky="k3"] .ox-b2bkroky__cislo { font-size: clamp(72px, 7vw, 120px); color: transparent; -webkit-text-stroke: 2px var(--sk-akcent-tmavy, #D60019); margin-bottom: 14px; }
html[data-ox-b2bkroky="k3"] .ox-b2bkroky__nazov { color: var(--sk-akcent-tmavy, #D60019); }

/* k4 · Schody - plné červené karty, každá o stupeň vyššie */
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__zoznam { align-items: end; }
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__krok { background: var(--sk-akcent-tmavy, #D60019); color: #fff; border-radius: 18px; padding: clamp(22px, 2vw, 30px); }
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__krok:nth-child(1) { margin-top: 96px; }
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__krok:nth-child(2) { margin-top: 64px; }
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__krok:nth-child(3) { margin-top: 32px; }
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__cislo { font-size: 44px; color: rgba(255, 255, 255, .55); margin-bottom: 12px; }
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__nazov { color: #fff; }
html[data-ox-b2bkroky="k4"] .ox-b2bkroky__text { color: rgba(255, 255, 255, .9); }

/* k5 · Zvislá linka - jeden stĺpec v strede, červená koľaj s bodmi */
html[data-ox-b2bkroky="k5"] .ox-b2bkroky__zoznam { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; gap: 0; }
html[data-ox-b2bkroky="k5"] .ox-b2bkroky__krok { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding-bottom: 30px; }
html[data-ox-b2bkroky="k5"] .ox-b2bkroky__krok::before { content: ''; position: absolute; left: 35px; top: 60px; bottom: 0; width: 2px; background: rgba(214, 0, 25, .25); }
html[data-ox-b2bkroky="k5"] .ox-b2bkroky__krok:last-child { padding-bottom: 0; }
html[data-ox-b2bkroky="k5"] .ox-b2bkroky__krok:last-child::before { display: none; }
html[data-ox-b2bkroky="k5"] .ox-b2bkroky__cislo { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--sk-akcent-tmavy, #D60019); color: var(--sk-akcent-tmavy, #D60019); font-size: 28px; background: #fff; position: relative; z-index: 1; }
html[data-ox-b2bkroky="k5"] .ox-b2bkroky__telo { padding-top: 10px; }

@media (max-width: 900px) {
	html[data-tema^="21"] .ox-b2bkroky__zoznam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html[data-ox-b2bkroky="k2"] .ox-b2bkroky__krok::before { display: none; }
	html[data-ox-b2bkroky="k3"] .ox-b2bkroky__krok { border-left: 0; padding-left: 0; }
	html[data-ox-b2bkroky="k4"] .ox-b2bkroky__krok:nth-child(n) { margin-top: 0; }
	html[data-ox-b2bkroky="k5"] .ox-b2bkroky__zoznam { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	html[data-tema^="21"] .ox-b2bkroky__zoznam { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   206) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): „oprav rozloženie kalkulačky, aby
   to bolo prehľadné a elegantné, keďže teraz je to rozhádzané - kľudne trošku na
   šírku rozšír, ale aby to sadlo do podstránky aj s tým textom naľavo".
   Len /b2b návrh 11 (`.ox-b2bv__hrdina--kalkreg`), ostatné kalkulačky sa nemenia.
   Namerané pred úpravou pri 1600 px: kalkulačka 651 px, dva vnútorné stĺpce po ~250 px,
   výsledkové karty 129 px (čísla „42 480 €" sa lámali na dva riadky), položky setu
   biele na svetloružovej (sekcia .ox-b2bv--hodvabny dedí biely text), rozbaľovačky
   191 px vo vlastnom rámčeku 247 px.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg {
	grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
	column-gap: clamp(28px, 3.2vw, 56px);
}
/* 23. 9. 2026 Peter: „text (Vypočítajte si svoj zisk) nech má veľkosť ako Dnes objednáte, zajtra
   podávate" na /oxo-red = clamp(30px, 4.9vw, 66px) (namerané 66/63/49/30 px pri 1600/1280/1000/390);
   zároveň rieši „kalkulačka prekrýva text" - pri 84 px slovo VYPOČÍTAJTE nevošlo do stĺpca. */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-h1 { font-size: clamp(30px, 4.9vw, 66px); line-height: 1.08; overflow-wrap: anywhere; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { color: #1a1a1a; }

/* telo: set vľavo užší, výpočet vpravo širší */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__telo {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 2.6vw, 44px); align-items: start;
}
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__set,
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__zisk { min-width: 0; width: auto; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__nadpis { margin: 0 0 12px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__nadpis ~ .ox-kalk__nadpis { margin-top: 26px; }

/* obsah setu: čitateľný tmavý text, červená linka vľavo, bez ružových kvádrov */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__zoznam { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__zoznam li {
	color: #1a1a1a; background: #faf6f5; border-left: 3px solid var(--sk-akcent-tmavy, #D60019);
	border-radius: 0 10px 10px 0; padding: 9px 14px; font-size: 15px; font-weight: 500; line-height: 1.4;
}

/* príchute: rozbaľovačka na celú šírku, bez rámčeka okolo rámčeka */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__pole {
	display: block; padding: 0; margin: 0 0 8px; border: 0; background: none; box-shadow: none;
}
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__pole .ox-combo,
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__pole .ox-combo__btn { width: 100%; max-width: none; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__pole .ox-combo { border: 0; padding: 0; background: none; box-shadow: none; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-combo__btn { min-height: 48px; }

/* výsledky: namiesto dvoch úzkych stĺpcov dva vodorovné pruhy, v každom deň · 30 · 360 */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto;
	column-gap: 10px; row-gap: 2px; align-items: baseline; text-align: left;
	padding: 16px 18px 14px; border-radius: 16px;
}
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta-nazov { grid-column: 1 / -1; grid-row: 1; margin: 0 0 6px; white-space: nowrap; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta-nazov em { font-size: .55em; font-style: normal; opacity: .75; margin-left: 4px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta > b {
	grid-row: 2; white-space: nowrap; font-size: clamp(20px, 1.6vw, 28px); line-height: 1.05; margin: 0;
	font-variant-numeric: tabular-nums;
}
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta > small { grid-row: 3; margin: 0; white-space: nowrap; }

@media (max-width: 1180px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__telo { grid-template-columns: minmax(0, 1fr); }
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta > b { font-size: 20px; }
}

/* =============================================================================
   207) Peter 23. 9. 2026 (RegulusX - Nový OXO Web):
   a) „medzi top barom a obsahom podstránky je malý biely pás - odstráň ho" - lišta 2g
      má na všetkých šírkach 72 px (namerané 1920 až 390 px), obsah začínal na 78 px
      (blok 28x r. 7548), tých 6 px bolo biele pozadie stránky.
   b) kalkulačka: „tlačidlo Pridať do košíka vycentruj - hover myšou má zlú farbu".
      V sekcii .ox-b2bv--hodvabny dostáva .ox-btn--hlavne bielu výplň (je určená na
      červené pozadie), v bielej karte kalkulačky bolo tlačidlo biele na bielom.
      Plná tmavšia červená, hover #B00015 (pamäť: vždy --sk-akcent-tmavy).
   ========================================================================== */
html[data-ox-hlavicka="2g"]:not(.ox-hv-uvod) #ox-obsah { padding-top: 72px; }

html[data-tema^="21"] .ox-kalk #ox-kalk-kosik {
	display: flex; width: auto; min-width: 280px; margin: 18px auto 0; justify-content: center;
	background: var(--sk-akcent-tmavy, #D60019); color: #fff; border: 0;
	box-shadow: 0 14px 28px -16px rgba(214, 0, 25, .85);
}
html[data-tema^="21"] .ox-kalk #ox-kalk-kosik:hover,
html[data-tema^="21"] .ox-kalk #ox-kalk-kosik:focus-visible { background: #B00015; color: #fff; }
html[data-tema^="21"] .ox-kalk #ox-kalk-kosik:disabled { background: #d9a0a6; color: #fff; box-shadow: none; }

/* 207c) Peter 23. 9. 2026: „tlačidlá PREJSŤ DO OBCHODU a SPRÁVA ÚČTU oddeľ od vrchu
   kalkulačky a sprav tomu vlastný priestor, kde to bude vycentrované - proste element
   nad kalkulačkou a tam budú len tlačidlá v strede". Samostatný polopriehľadný panel
   na šírku kalkulačky, výrazná medzera pod ním. */
html[data-tema^="21"] .ox-b2bv__kalkstlpec { gap: clamp(28px, 3vw, 48px); }
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2.4vw, 40px);
	background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 24px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* =============================================================================
   208) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): bočný košík.
   a) „text niekedy prekrýva X-ko napravo" - r. 5522 dáva položke `padding: 16px 22px
      !important`, čím prebil pôvodných 52 px vpravo pre absolútne umiestnený × (right 12 px,
      30 px + rámik). Názov tak vbiehal pod krížik („Broskyňa 2.5k").
   b) „doprava - daj nad medzisúčet" - meradlo je teraz v .ox-mk__pata (doplnky.js).
   ========================================================================== */
.ox-minikosik .ox-mk__ul .ox-mk__polozka { padding-right: 58px !important; }
.ox-minikosik .ox-mk__pata .ox-mk__meter {
	padding: 12px 14px; margin: 0 0 14px; border: 0; border-radius: 12px;
	background: var(--sk-krem, #FFF7E6);
}

/* =============================================================================
   209) Peter 23. 9. 2026 (RegulusX - Nový OXO Web):
   a) /b2b: „tie tlačidlá roztiahni na šírku, aby text naľavo bol pod tým" - panel
      s tlačidlami je prvý riadok celej mriežky hrdinu (cez oba stĺpce), text a
      kalkulačka idú pod neho. Obal .ox-b2bv__kalkstlpec sa rozpustí (display: contents),
      takže panel aj kalkulačka sú priame položky mriežky; markup sa nemení.
   b) obchod: „odtiaľto odstráň kategóriu OXO Red 21, keďže stačí to nad tým" - riadok
      značiek #ox-znacky má po skrytí ostatných značiek jediný čip, celý sa skryje
      (markup ostáva, dopisPocty() ho ďalej nájde).
   c) obchod: „trošku sprav tieto texty čitateľnejšie" - cena bola v úzkom JetBrains
      Mono 22 px, popis 13 px a „bez DPH" 11 px v svetlosivej rgb(107, 98, 92).
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg { row-gap: clamp(28px, 3vw, 48px); }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalkstlpec { display: contents; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__akcie--nadkalk { grid-column: 1 / -1; grid-row: 1; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg > div:first-child { grid-column: 1; grid-row: 2; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalk { grid-column: 2; grid-row: 2; }
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn { flex: 1 1 0; max-width: 520px; }
@media (max-width: 1180px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalk { grid-column: 1; grid-row: 3; }
}

#ox-obsah[data-trasa="produkty"] #ox-znacky.ox-chipy { display: none; }

#ox-obsah[data-trasa="produkty"] .ox-produkt .ox-produkt__meta {
	font-size: 14.5px; line-height: 1.45; color: #3f3a36;
}
#ox-obsah[data-trasa="produkty"] .ox-produkt .ox-cena {
	font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
#ox-obsah[data-trasa="produkty"] .ox-produkt .ox-cena .ox-cena__dph {
	font-size: 12.5px; font-weight: 600; color: #4d4640; letter-spacing: 0;
}

/* =============================================================================
   210) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): /b2b „časová os - tento návrh sprav
   pevný, ale potom to presuň pod kalkulačku, a text, aby pozadie sedelo - hodváb - s
   widgetom nad tým". Kroky (k2 napevno) sú vnútri hodvábnej sekcie návrhu 11 pod
   kalkulačkou (.ox-b2bkroky--vnutri) - bez vlastného pozadia, preberajú hodváb sekcie.
   Krúžky nemajú červený prstenec (ten maskoval linku na plnej červenej, na hodvábe by
   bol vidieť ako fľak), linka preto začína a končí na okraji krúžku.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bkroky.ox-b2bkroky--vnutri {
	background: transparent; padding: clamp(56px, 6vw, 96px) 0 0; color: #fff;
}
html[data-ox-b2bkroky] .ox-b2bkroky.ox-b2bkroky--vnutri { background: transparent; }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky--vnutri .ox-b2bkroky__cislo { box-shadow: 0 10px 24px -12px rgba(60, 0, 8, .6); }
html[data-ox-b2bkroky="k2"] .ox-b2bkroky--vnutri .ox-b2bkroky__krok::before {
	left: calc(50% + 32px); width: calc(100% + clamp(14px, 1.6vw, 24px) - 64px); background: rgba(255, 255, 255, .5);
}

/* =============================================================================
   211) Peter 23. 9. 2026 (RegulusX - Nový OXO Web), /b2b návrh 11:
   a) „hover farba nech je červená ako pozadie, keď ukážem na button" - Správa účtu
      (.ox-btn--obrys) pri hover sčernel na #1B1B1B. Teraz plná tmavšia červená,
      biely text a rámik (pamäť: vždy --sk-akcent-tmavy).
   b) „texty sprav čitateľnejšie" (kalkulačka) - drobné popisy boli 11-13 px
      v svetlosivej rgb(107, 98, 92).
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--obrys:hover,
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--obrys:focus-visible {
	background: var(--sk-akcent-tmavy, #D60019); color: #fff; border-color: #fff;
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--hlavne:hover,
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--hlavne:focus-visible {
	background: #fff; color: #B00015; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__pod { font-size: 16px; line-height: 1.5; color: #3f3a36; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk .ox-label { font-size: 13.5px; color: #1a1a1a; letter-spacing: .06em; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__zoznam li { font-size: 16px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-combo__text { font-size: 16px; color: #1a1a1a; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__bunka small { font-size: 12.5px; color: #4d4640; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta > small { font-size: 14px; color: #3f3a36; font-weight: 500; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__karta-nazov em { font-size: .62em; opacity: 1; color: #4d4640; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__pozn { font-size: 14px; line-height: 1.55; color: #3f3a36; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__vyber { font-size: 15px; line-height: 1.5; color: #1a1a1a; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk__cena span { font-size: 13px; color: #3f3a36; }

/* =============================================================================
   212) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): časová os na /b2b - „nech sa
   postupne vykreslia body zľava doprava, keď scrollnem na túto sekciu, s nejakým
   pekným efektom - napr. ukáže sa obrázok nad 01 (zámok), potom sa začne zmenšovať a
   sadne na 01 a zmizne, potom 02 so záberom na košík atď. - 3 návrhy".
   Prepínač `krokyanim` (a1/a2/a3). Spúšťa pohlady.js krokyAnimZapoj(): trieda --anim
   (skryté východiskové stavy) a pri príchode do okna --hraj. Každý krok má `--i`,
   krok trvá --d. Pamäť: animácie VŽDY, prefers-reduced-motion sa ignoruje.
   ⚠️ Poistka: pravidlá bez atribútu návrhu dávajú obyčajné zjavenie, aby obsah nikdy
   neostal skrytý, keby widget nenastavil atribút.
   ========================================================================== */
.ox-b2bkroky--vnutri { --d: 1.2s; --t0: .55s; }
.ox-b2bkroky--vnutri .ox-b2bkroky__krok { position: relative; }
.ox-b2bkroky--vnutri .ox-b2bkroky__ikona {
	position: absolute; top: -12px; left: 50%; width: 96px; height: 96px; z-index: 3;
	display: grid; place-items: center; color: #fff; opacity: 0; pointer-events: none;
	transform: translate(-50%, 0);
}
.ox-b2bkroky--vnutri .ox-b2bkroky__ikona svg { width: 60px; height: 60px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* východiskový stav pred prehratím */
.ox-b2bkroky--anim .ox-b2bkroky__hlava,
.ox-b2bkroky--anim .ox-b2bkroky__cislo,
.ox-b2bkroky--anim .ox-b2bkroky__telo { opacity: 0; }
.ox-b2bkroky--anim .ox-b2bkroky__krok::before { transform: scaleX(0); transform-origin: left center; }

/* poistka + nadpis (všetky návrhy) */
.ox-b2bkroky--hraj .ox-b2bkroky__hlava { animation: okKrHore .6s ease both; }
.ox-b2bkroky--hraj .ox-b2bkroky__cislo { animation: okKrZjav .4s ease calc(var(--t0) + var(--i) * var(--d)) both; }
.ox-b2bkroky--hraj .ox-b2bkroky__telo { animation: okKrHore .5s ease calc(var(--t0) + var(--i) * var(--d) + .2s) both; }
.ox-b2bkroky--hraj .ox-b2bkroky__krok::before { animation: okKrLinka .5s ease-out calc(var(--t0) + var(--i) * var(--d) + .4s) both; }

@keyframes okKrZjav { from { opacity: 0; } to { opacity: 1; } }
@keyframes okKrHore { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes okKrLinka { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes okKrPop { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }

/* ---- a1 · Ikona zletí na bod: veľká ikona nad bodom, zmenší sa a sadne naň ---- */
html[data-ox-krokyanim="a1"] .ox-b2bkroky--hraj .ox-b2bkroky__ikona {
	animation: okA1Ikona var(--d) cubic-bezier(.55, 0, .3, 1) calc(var(--t0) + var(--i) * var(--d)) both;
}
html[data-ox-krokyanim="a1"] .ox-b2bkroky--hraj .ox-b2bkroky__cislo {
	animation: okKrPop .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--t0) + var(--i) * var(--d) + var(--d) * .8) both;
}
html[data-ox-krokyanim="a1"] .ox-b2bkroky--hraj .ox-b2bkroky__telo {
	animation: okKrHore .5s ease calc(var(--t0) + var(--i) * var(--d) + var(--d) * .9) both;
}
html[data-ox-krokyanim="a1"] .ox-b2bkroky--hraj .ox-b2bkroky__krok::before {
	animation: okKrLinka .45s ease-out calc(var(--t0) + var(--i) * var(--d) + var(--d)) both;
}
@keyframes okA1Ikona {
	0%   { opacity: 0; transform: translate(-50%, -150px) scale(.5); }
	22%  { opacity: 1; transform: translate(-50%, -118px) scale(1.18); }
	42%  { opacity: 1; transform: translate(-50%, -118px) scale(1); }
	82%  { opacity: 1; transform: translate(-50%, 0) scale(.42); }
	100% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
}

/* ---- a2 · Linka a záblesk: linka sa ťahá, bod blikne vlnou, ikona sa v ňom zatočí na číslo ---- */
html[data-ox-krokyanim="a2"] .ox-b2bkroky--vnutri .ox-b2bkroky__ikona { color: var(--sk-akcent-tmavy, #D60019); }
html[data-ox-krokyanim="a2"] .ox-b2bkroky--hraj .ox-b2bkroky__ikona {
	animation: okA2Ikona var(--d) ease calc(var(--t0) + var(--i) * var(--d)) both;
}
html[data-ox-krokyanim="a2"] .ox-b2bkroky--hraj .ox-b2bkroky__cislo {
	animation: okA2Bod .95s cubic-bezier(.2, .9, .3, 1) calc(var(--t0) + var(--i) * var(--d)) both,
	           okA2Cifra .3s linear calc(var(--t0) + var(--i) * var(--d) + var(--d) * .72) both;
}
html[data-ox-krokyanim="a2"] .ox-b2bkroky--hraj .ox-b2bkroky__telo {
	animation: okKrHore .55s ease calc(var(--t0) + var(--i) * var(--d) + var(--d) * .6) both;
}
html[data-ox-krokyanim="a2"] .ox-b2bkroky--hraj .ox-b2bkroky__krok::before {
	animation: okKrLinka calc(var(--d) * .65) linear calc(var(--t0) + var(--i) * var(--d) + var(--d) * .35) both;
}
@keyframes okA2Bod {
	0%   { opacity: 0; transform: scale(0); box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); }
	35%  { opacity: 1; transform: scale(1); }
	100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 24px rgba(255, 255, 255, 0); }
}
@keyframes okA2Cifra { from { color: transparent; } to { color: var(--sk-akcent-tmavy, #D60019); } }
@keyframes okA2Ikona {
	0%   { opacity: 0; transform: translate(-50%, 0) scale(.1) rotate(-160deg); }
	30%  { opacity: 1; transform: translate(-50%, 0) scale(.46) rotate(0); }
	60%  { opacity: 1; transform: translate(-50%, 0) scale(.46) rotateY(0); }
	75%  { opacity: 0; transform: translate(-50%, 0) scale(.46) rotateY(90deg); }
	100% { opacity: 0; transform: translate(-50%, 0) scale(.46) rotateY(90deg); }
}
html[data-ox-krokyanim="a2"] .ox-b2bkroky--anim:not(.ox-b2bkroky--hraj) .ox-b2bkroky__cislo { color: transparent; }

/* ---- a3 · Dlaždica dopadne: biela dlaždica s ikonou spadne s odrazom a zmení sa na bod ---- */
html[data-ox-krokyanim="a3"] .ox-b2bkroky--vnutri .ox-b2bkroky__ikona {
	background: #fff; color: var(--sk-akcent-tmavy, #D60019); border-radius: 24px;
	box-shadow: 0 18px 36px -16px rgba(60, 0, 8, .6);
}
html[data-ox-krokyanim="a3"] .ox-b2bkroky--vnutri .ox-b2bkroky__ikona svg { width: 52px; height: 52px; }
html[data-ox-krokyanim="a3"] .ox-b2bkroky--hraj .ox-b2bkroky__ikona {
	animation: okA3Dlazdica var(--d) linear calc(var(--t0) + var(--i) * var(--d)) both;
}
html[data-ox-krokyanim="a3"] .ox-b2bkroky--hraj .ox-b2bkroky__cislo {
	animation: okKrZjav .25s ease calc(var(--t0) + var(--i) * var(--d) + var(--d) * .8) both;
}
html[data-ox-krokyanim="a3"] .ox-b2bkroky--hraj .ox-b2bkroky__telo {
	animation: okA3Text .55s ease calc(var(--t0) + var(--i) * var(--d) + var(--d) * .82) both;
}
html[data-ox-krokyanim="a3"] .ox-b2bkroky--hraj .ox-b2bkroky__krok::before {
	animation: okKrLinka .45s ease-out calc(var(--t0) + var(--i) * var(--d) + var(--d)) both;
}
@keyframes okA3Dlazdica {
	0%   { opacity: 0; transform: translate(-50%, -190px) rotate(-10deg); border-radius: 24px; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
	28%  { opacity: 1; transform: translate(-50%, 0) rotate(0); border-radius: 24px; animation-timing-function: ease-out; }
	36%  { transform: translate(-50%, -18px); animation-timing-function: ease-in; }
	44%  { transform: translate(-50%, 0) scale(1); border-radius: 24px; animation-timing-function: ease-in-out; }
	60%  { transform: translate(-50%, 0) scale(1); border-radius: 24px; }
	80%  { opacity: 1; transform: translate(-50%, 0) scale(.667); border-radius: 50%; }
	100% { opacity: 0; transform: translate(-50%, 0) scale(.667); border-radius: 50%; }
}
@keyframes okA3Text { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }

/* =============================================================================
   213) Peter 23. 9. 2026 (RegulusX - Nový OXO Web), titulka návrh h9 (Silk):
   a) „?velkosti=1 bol vytvorený systém na zmenu veľkosti textov - oprav, aby sa menila
      veľkosť aj týchto textov" (nadnadpis, rad typov prevádzok, MY SME BUBBLE TEA,
      tlačidlo). Ich veľkosti sú v bloku 17xxx na šiestich šírkach okna (vw/clamp/max),
      násobiť každé zvlášť by bolo krehké - `zoom` s násobiteľom --ox-tm (blok 203) ich
      zväčší naraz na každej šírke a prelomí aj rozloženie. Bez `?velkosti=1` na <html>
      nie je data-ox-velkost, takže návštevník nič nezmení.
   b) „keď scrollujem dole, tak my sme bubble tea text sa stáva transparentným - pridaj
      rovnaký efekt na všetky tie texty" + „aj na tlačidlo Stať sa partnerom" - tá istá
      krivka ako .ox-uvod__nadpis (r. 4011): 1 - clamp(0, --uvod-p / .55, 1).
   ========================================================================== */
html[data-ox-velkost] .ox-uvod--h9 .ox-heroN__stred > * { zoom: var(--ox-tm, 1); }

html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__stred .ox-heroN__oko,
html[data-tema^="21"] .ox-uvod--h9 .ox-heroN__stred > .ox-btn {
	opacity: calc(1 - clamp(0, var(--uvod-p, 0) / .55, 1));
}

/* =============================================================================
   214) Peter 23. 9. 2026 (RegulusX - Nový OXO Web), /b2b návrh 11:
   a) „prepínanie veľkosti je rozbité v tejto sekcii - oprav, aby základ bol taký ako
      bez prepínača". Blok 203 dáva rolám (.ox-h1, .ox-h2, .ox-h3, .ox-lead, .ox-btn)
      PEVNÉ základy s !important, takže už pri v5 prebil veľkosti tejto stránky.
      Namerané pri 1600 px bez prepínača → pri v5: h1 73,6 → 92 px (vbehol pod
      kalkulačku), lead 18 → 21, tlačidlá nad kalkulačkou 19 → 14, nadpis kalkulačky
      40 → 32, Pridať do košíka 15 → 14, nadpis krokov 48 → 64. Tu majú PÔVODNÝ vzorec
      × --ox-tm, takže v5 = presne stav bez prepínača.
   b) „toto sprav trošku kompaktnejšie - lepšia animácia pri hoveri aj lepšie farby -
      texty tlačidiel väčšie" (panel Prejsť do obchodu / Správa účtu).
   ========================================================================== */
html[data-ox-velkost][data-tema^="21"] .ox-b2bv--kalkreg .ox-b2bv__hrdina--kalkreg .ox-h1 { font-size: calc(clamp(30px, 4.9vw, 66px) * var(--ox-tm)) !important; }
html[data-ox-velkost][data-tema^="21"] .ox-b2bv--kalkreg .ox-b2bv__hrdina--kalkreg .ox-lead { font-size: calc(clamp(17px, 1.15vw, 18px) * var(--ox-tm)) !important; }
html[data-ox-velkost][data-tema^="21"] .ox-b2bv--kalkreg .ox-kalk__hlava .ox-h3 { font-size: calc(clamp(26px, 3vw, 40px) * var(--ox-tm)) !important; }
html[data-ox-velkost][data-tema^="21"] .ox-b2bv--kalkreg .ox-kalk #ox-kalk-kosik { font-size: calc(15px * var(--ox-tm)) !important; }
html[data-ox-velkost][data-tema^="21"] .ox-b2bv--kalkreg .ox-b2bkroky .ox-h2 { font-size: calc(clamp(30px, 3.4vw, 48px) * var(--ox-tm)) !important; }

/* panel s tlačidlami: kompaktnejší */
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk {
	padding: clamp(12px, 1.2vw, 16px); gap: clamp(10px, 1vw, 14px); border-radius: 999px;
	background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22);
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 58px; padding: 14px 28px; border-radius: 999px;
	font-size: clamp(18px, 1.4vw, 21px); font-weight: 800; letter-spacing: .04em;
	transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s ease, color .25s ease, background-size .35s ease, border-color .25s ease;
}
html[data-ox-velkost][data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn { font-size: calc(clamp(18px, 1.4vw, 21px) * var(--ox-tm)) !important; }
/* šípka, ktorá pri hover prikĺzne */
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn::after {
	content: '→'; display: inline-block; margin-left: 0; max-width: 0; opacity: 0; overflow: hidden;
	transform: translateX(-8px); transition: max-width .3s ease, margin-left .3s ease, opacity .25s ease, transform .3s ease;
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn:hover::after,
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn:focus-visible::after { max-width: 1.2em; margin-left: .45em; opacity: 1; transform: none; }

/* Prejsť do obchodu: biele, tmavočervený text */
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--hlavne {
	background: #fff; color: #B00015; border: 0; box-shadow: 0 10px 24px -14px rgba(60, 0, 8, .7);
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--hlavne:hover,
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--hlavne:focus-visible {
	background: #fff; color: var(--sk-akcent-tmavy, #D60019); transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(60, 0, 8, .85), 0 0 0 3px rgba(255, 255, 255, .35);
}
/* Správa účtu: obrys, pri hover sa zľava vyplní tmavšou značkovou červenou (jedna plná farba) */
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--obrys {
	color: #fff; border: 2px solid rgba(255, 255, 255, .75);
	background: linear-gradient(var(--sk-akcent-tmavy, #D60019), var(--sk-akcent-tmavy, #D60019)) no-repeat left center / 0% 100%;
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--obrys:hover,
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn--obrys:focus-visible {
	color: #fff; border-color: #fff; background-size: 100% 100%; transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(60, 0, 8, .85);
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn:active { transform: translateY(0) scale(.98); }
/* 214c) titulka h9: „Stať sa partnerom" pri v5 14 px namiesto 15,68 (blok 203 dáva .ox-btn
   pevných 14 px s !important). Tlačidlo už zväčšuje `zoom` z bloku 213, preto sem patrí
   len PÔVODNÝ základ (r. 7787 a 17350), nie × --ox-tm. */
html[data-ox-velkost][data-tema^="21"] .ox-uvod--h9 .ox-heroN__stred > .ox-btn--hlavne { font-size: 15px !important; }
@media (min-width: 1001px) {
	html[data-ox-velkost][data-tema^="21"] .ox-uvod--h9 .ox-heroN__stred > .ox-btn--hlavne { font-size: max(14px, .98vw) !important; }
}

/* =============================================================================
   215) Peter 23. 9. 2026 (RegulusX - Nový OXO Web), /b2b návrh 11:
   a) „presuň túto sekciu (Ako to prebieha) pod tlačidlá" - mriežka hrdinu má riadky
      1 tlačidlá · 2 kroky · 3 text + kalkulačka (na mobile 3 text, 4 kalkulačka).
   b) „nech nezačínajú obrázky v animácii tak vysoko, keďže to prekrýva titulku" -
      ikona v a1 štartovala 150 px nad bodom a v a3 190 px nad ním, zasahovala do
      „Len pár klikov a je to!". Teraz štart 50 px pri oboch (a3 so 110 px ešte zasahoval 49 px) a väčší odstup pod nadpisom.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg > .ox-b2bkroky--vnutri { grid-column: 1 / -1; grid-row: 2; padding: clamp(8px, 1.4vw, 24px) 0 clamp(8px, 1.2vw, 20px); }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg > div:first-child { grid-row: 3; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalk { grid-row: 3; }
@media (max-width: 1180px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalk { grid-row: 4; }
}
html[data-tema^="21"] .ox-b2bkroky--vnutri .ox-b2bkroky__hlava { margin-bottom: clamp(52px, 5vw, 72px); }

@keyframes okA1Ikona {
	0%   { opacity: 0; transform: translate(-50%, -50px) scale(.5); }
	22%  { opacity: 1; transform: translate(-50%, -34px) scale(1.04); }
	42%  { opacity: 1; transform: translate(-50%, -34px) scale(.96); }
	82%  { opacity: 1; transform: translate(-50%, 0) scale(.42); }
	100% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
}
@keyframes okA3Dlazdica {
	0%   { opacity: 0; transform: translate(-50%, -50px) rotate(-8deg); border-radius: 24px; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
	28%  { opacity: 1; transform: translate(-50%, 0) rotate(0); border-radius: 24px; animation-timing-function: ease-out; }
	36%  { transform: translate(-50%, -14px); animation-timing-function: ease-in; }
	44%  { transform: translate(-50%, 0) scale(1); border-radius: 24px; animation-timing-function: ease-in-out; }
	60%  { transform: translate(-50%, 0) scale(1); border-radius: 24px; }
	80%  { opacity: 1; transform: translate(-50%, 0) scale(.667); border-radius: 50%; }
	100% { opacity: 0; transform: translate(-50%, 0) scale(.667); border-radius: 50%; }
}

/* =============================================================================
   216) Peter 23. 9. 2026 (RegulusX - Nový OXO Web), /b2b návrh 11: „tento text uprav,
   aby bol NAD kalkulačkou - tým pádom kalkulačku daj na celú šírku". Mriežka má jeden
   stĺpec: 1 tlačidlá · 2 časová os · 3 text (nadpis, úvod, 4 karty krokov v rade) ·
   4 kalkulačka na celú šírku.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg { grid-template-columns: minmax(0, 1fr); }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg > div:first-child { grid-column: 1 / -1; grid-row: 3; text-align: center; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg > div:first-child .ox-oko { justify-content: center; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg > div:first-child .ox-lead { margin-inline: auto; max-width: 62ch; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kroky--stlpec {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px);
	margin-top: clamp(20px, 2.4vw, 32px); text-align: left;
}
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalk { grid-column: 1 / -1; grid-row: 4; }
@media (max-width: 1180px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kalk { grid-row: 4; }
}
@media (max-width: 900px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kroky--stlpec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__kroky--stlpec { grid-template-columns: minmax(0, 1fr); }
}

/* 217) Peter 23. 9. 2026: panel Prejsť do obchodu / Správa účtu „trošku zmenši celé a texty
   o pár px menšie". Panel užší (do 880 px, na stred), tlačidlá nižšie, text 18-21 → 16-18 px. */
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk {
	width: 100%; max-width: 880px; justify-self: center; padding: 10px; gap: 10px;
}
html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn {
	min-height: 50px; padding: 11px 24px; font-size: clamp(16px, 1.15vw, 18px); max-width: 420px;
}
html[data-ox-velkost][data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn { font-size: calc(clamp(16px, 1.15vw, 18px) * var(--ox-tm)) !important; }
@media (max-width: 560px) {
	/* 217b) na mobile pod seba - `flex: 1 1 0` z bloku 209 prebil mobilné pravidlo bloku 204 a tlačidlá
	   sa tlačili vedľa seba na 99 px výšky */
	html[data-tema^="21"] .ox-b2bv__akcie--nadkalk { border-radius: 26px; }
	html[data-tema^="21"] .ox-b2bv__akcie--nadkalk .ox-btn { flex: 1 1 100%; max-width: none; }
}

/* 218) Peter 23. 9. 2026: „tlačidlo Pridať do košíka trošku zväčši a vycentruj, nech je v strede
   kalkulačky" - tlačidlo je v novej päte .ox-kalk__pata (doplnky.js) pod oboma stĺpcami. */
html[data-tema^="21"] .ox-kalk__pata { display: flex; flex-direction: column; align-items: center; padding: 8px clamp(20px, 3vw, 40px) clamp(26px, 3vw, 40px); }
html[data-tema^="21"] .ox-kalk #ox-kalk-kosik {
	min-width: 340px; min-height: 58px; margin: 0 auto; padding: 16px 36px; font-size: 17px; letter-spacing: .04em;
}
html[data-ox-velkost][data-tema^="21"] .ox-b2bv--kalkreg .ox-kalk #ox-kalk-kosik { font-size: calc(17px * var(--ox-tm)) !important; }
html[data-tema^="21"] .ox-kalk__pata .ox-kalk__prihlas { text-align: center; margin-top: 12px; }
@media (max-width: 560px) { html[data-tema^="21"] .ox-kalk #ox-kalk-kosik { min-width: 0; width: 100%; } }

/* =============================================================================
   219) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): „pridaj ešte 3 návrhy pre tento
   widget - teraz máme 3 pekné, ale ešte 3" (animácia časovej osi, widget krokyanim).
   Žiadna ikona nejde NAD bod (Peter: obrázky nesmú prekrývať titulku).
   ========================================================================== */
/* ---- a4 · Vír: ikona sa roztočí na mieste bodu a stiahne sa doň, text sa odkryje stieraním ---- */
html[data-ox-krokyanim="a4"] .ox-b2bkroky--hraj .ox-b2bkroky__ikona {
	animation: okA4Vir var(--d) cubic-bezier(.3, .7, .3, 1) calc(var(--t0) + var(--i) * var(--d)) both;
}
html[data-ox-krokyanim="a4"] .ox-b2bkroky--hraj .ox-b2bkroky__cislo {
	animation: okKrPop .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--t0) + var(--i) * var(--d) + var(--d) * .72) both;
}
html[data-ox-krokyanim="a4"] .ox-b2bkroky--hraj .ox-b2bkroky__telo {
	animation: okA4Stieranie .6s cubic-bezier(.6, 0, .2, 1) calc(var(--t0) + var(--i) * var(--d) + var(--d) * .8) both;
}
html[data-ox-krokyanim="a4"] .ox-b2bkroky--hraj .ox-b2bkroky__krok::before {
	animation: okKrLinka .45s ease-out calc(var(--t0) + var(--i) * var(--d) + var(--d)) both;
}
@keyframes okA4Vir {
	0%   { opacity: 0; transform: translate(-50%, 0) scale(2.1) rotate(-240deg); }
	40%  { opacity: 1; transform: translate(-50%, 0) scale(.95) rotate(0); }
	60%  { opacity: 1; transform: translate(-50%, 0) scale(.95) rotate(0); }
	82%  { opacity: 1; transform: translate(-50%, 0) scale(.42) rotate(90deg); }
	100% { opacity: 0; transform: translate(-50%, 0) scale(.2) rotate(180deg); }
}
@keyframes okA4Stieranie {
	from { opacity: 1; clip-path: inset(0 100% 0 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---- a5 · Výťah: ikona vyjde zdola spod textu, vystúpi na bod a zmenší sa doň ---- */
html[data-ox-krokyanim="a5"] .ox-b2bkroky--hraj .ox-b2bkroky__ikona {
	animation: okA5Vytah var(--d) cubic-bezier(.25, .8, .3, 1) calc(var(--t0) + var(--i) * var(--d)) both;
}
html[data-ox-krokyanim="a5"] .ox-b2bkroky--hraj .ox-b2bkroky__cislo {
	animation: okKrPop .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--t0) + var(--i) * var(--d) + var(--d) * .75) both,
	           okA5Ziara 1s ease-out calc(var(--t0) + var(--i) * var(--d) + var(--d) * .75) both;
}
html[data-ox-krokyanim="a5"] .ox-b2bkroky--hraj .ox-b2bkroky__telo {
	animation: okA5Sprava .55s cubic-bezier(.2, .8, .3, 1) calc(var(--t0) + var(--i) * var(--d) + var(--d) * .85) both;
}
html[data-ox-krokyanim="a5"] .ox-b2bkroky--hraj .ox-b2bkroky__krok::before {
	animation: okKrLinka .45s ease-out calc(var(--t0) + var(--i) * var(--d) + var(--d)) both;
}
@keyframes okA5Vytah {
	0%   { opacity: 0; transform: translate(-50%, 130px) scale(.8); }
	30%  { opacity: 1; transform: translate(-50%, 70px) scale(1); }
	55%  { opacity: 1; transform: translate(-50%, 0) scale(.9); }
	82%  { opacity: 1; transform: translate(-50%, 0) scale(.42); }
	100% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
}
@keyframes okA5Ziara {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .0), 0 0 0 0 rgba(255, 255, 255, .0); }
	30%  { box-shadow: 0 0 34px 10px rgba(255, 255, 255, .55), 0 0 0 6px rgba(255, 255, 255, .25); }
	100% { box-shadow: 0 10px 24px -12px rgba(60, 0, 8, .6), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes okA5Sprava { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }

/* ---- a6 · Preklopenie: bod sa v 3D otočí z ikony na číslo, text sa preklopí zhora ---- */
html[data-ox-krokyanim="a6"] .ox-b2bkroky--vnutri .ox-b2bkroky__krok { perspective: 700px; }
html[data-ox-krokyanim="a6"] .ox-b2bkroky--vnutri .ox-b2bkroky__ikona { color: var(--sk-akcent-tmavy, #D60019); }
html[data-ox-krokyanim="a6"] .ox-b2bkroky--vnutri .ox-b2bkroky__ikona::before {
	content: ''; position: absolute; inset: 16px; border-radius: 50%; background: #fff; z-index: -1;
	box-shadow: 0 10px 24px -12px rgba(60, 0, 8, .6);
}
html[data-ox-krokyanim="a6"] .ox-b2bkroky--vnutri .ox-b2bkroky__ikona svg { width: 34px; height: 34px; }
html[data-ox-krokyanim="a6"] .ox-b2bkroky--hraj .ox-b2bkroky__ikona {
	animation: okA6Predok calc(var(--d) * .8) cubic-bezier(.4, 0, .2, 1) calc(var(--t0) + var(--i) * var(--d)) both;
}
html[data-ox-krokyanim="a6"] .ox-b2bkroky--hraj .ox-b2bkroky__cislo {
	animation: okA6Zadok calc(var(--d) * .4) cubic-bezier(.2, .8, .3, 1.2) calc(var(--t0) + var(--i) * var(--d) + var(--d) * .56) both;
}
html[data-ox-krokyanim="a6"] .ox-b2bkroky--hraj .ox-b2bkroky__telo {
	transform-origin: top center;
	animation: okA6Text .6s cubic-bezier(.2, .8, .3, 1) calc(var(--t0) + var(--i) * var(--d) + var(--d) * .75) both;
}
html[data-ox-krokyanim="a6"] .ox-b2bkroky--hraj .ox-b2bkroky__krok::before {
	animation: okKrLinka .45s ease-out calc(var(--t0) + var(--i) * var(--d) + var(--d)) both;
}
@keyframes okA6Predok {
	0%   { opacity: 0; transform: translate(-50%, 0) scale(.6) rotateY(-90deg); }
	25%  { opacity: 1; transform: translate(-50%, 0) scale(1) rotateY(0); }
	70%  { opacity: 1; transform: translate(-50%, 0) scale(1) rotateY(0); }
	100% { opacity: 0; transform: translate(-50%, 0) scale(1) rotateY(90deg); }
}
@keyframes okA6Zadok {
	from { opacity: 0; transform: rotateY(-90deg); }
	to   { opacity: 1; transform: rotateY(0); }
}
@keyframes okA6Text {
	from { opacity: 0; transform: rotateX(-75deg); }
	to   { opacity: 1; transform: none; }
}

/* 220) Peter 23. 9. 2026: „tlačidlá presuň pod widget (Ako to prebieha)" - poradie riadkov
   1 časová os · 2 tlačidlá · 3 text · 4 kalkulačka. */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg > .ox-b2bkroky--vnutri { grid-row: 1; padding-top: 0; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-b2bv__akcie--nadkalk { grid-row: 2; }


/* =============================================================================
   221) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): „pridaj ďalších 6 profesionálnych
   dizajnov pre kalkulačku - hľadaj aj prompty na 21st, superdesign a pod., aby to bolo
   čo najmodernejšie a elegantné". Inšpirácia z 21st.dev (ROI Pricing Calculator, Loops
   PricingSlider, Seat-Based Pricing Slider, Stats Bento, Analytics Bento): veľké výsledné
   číslo ako hrdina, tenké posuvníky, tichá sivá/tmavá plocha pre výsledky, bento dlaždice.
   Čisto CSS nad existujúcim markupom kalkulačky (výpočet sa nemení), widget `kalk`.
   Predpona je silnejšia ako rozloženie bloku 206, aby ho návrhy vedeli prefarbiť.
   Bez dlhých pomlčiek, červené plochy len v --sk-akcent-tmavy (#D60019).
   ========================================================================== */
/* 1 · ROI panel (21st „ROI Pricing Calculator"): biela karta, výsledky v sivom paneli, zisk ako tmavá hlavná dlaždica */
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: #fff; border-radius: 22px; box-shadow: 0 30px 70px -40px rgba(40, 0, 6, .55); overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: #fff; color: #111; text-align: left; padding: 30px 36px 6px; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava .ox-h3 { color: #111; font-size: clamp(26px, 2.4vw, 34px); }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p { color: #555; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava::before { content: 'Kalkulačka zisku'; display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #f2f0ef; color: #444; font: 600 12px/1.4 Inter, sans-serif; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__telo { padding: 22px 36px 10px; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk { background: #f5f3f2; border-radius: 18px; padding: 22px; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis { color: #111; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karty { display: flex; flex-direction: column-reverse; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: #141414; border: 0; color: #fff; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: rgba(255, 255, 255, .7) !important; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--trzby { background: #fff; border: 1px solid #e7e2e0; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--trzby > b { color: #111; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li { background: #fff; border: 1px solid #ebe6e4; border-left: 3px solid #111; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #111; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: #fff; border-color: #e7e2e0; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #111; }
html[data-tema^="21"][data-ox-kalk="roi"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena { background: #f5f3f2; }

/* 2 · Minimal (21st „PricingSlider Loops"): svetlosivý podklad, dva biele panely, čísla v Inter */
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: #f1f0ef; border-radius: 26px; padding: 10px; box-shadow: none; overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: transparent; color: #111; padding: 26px 20px 10px; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava .ox-h3 { color: #111; font-family: Inter, sans-serif; font-weight: 800; text-transform: none; letter-spacing: -.02em; font-size: clamp(26px, 2.4vw, 36px); }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p { color: #666; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__telo { gap: 10px; padding: 10px; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set, html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk { background: #fff; border-radius: 18px; padding: 24px; border: 1px solid #e6e4e2; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis { font-family: Inter, sans-serif; font-weight: 700; text-transform: none; font-size: 15px; letter-spacing: 0; color: #111; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li { background: #f7f6f5; border-left: 0; border-radius: 10px; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta { background: #f7f6f5; border: 0; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: #fff; border: 1.5px solid #111; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov { font-family: Inter, sans-serif; font-weight: 700; text-transform: none; font-size: 14px; color: #111; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -.02em; color: #111; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: #f7f6f5; border: 0; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { font-family: Inter, sans-serif; font-weight: 800; color: #111; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena { background: #f7f6f5; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -.02em; }
html[data-tema^="21"][data-ox-kalk="minimal"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pata { padding-top: 14px; }

/* 3 · Noir bento (21st „Stats Bento"): tmavá kalkulačka, dlaždica zisku so šrafovaním */
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: #111; color: #fff; border-radius: 24px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: #111; border-bottom: 1px solid #262626; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-label, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena span { color: #b5b0ae !important; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis { color: #fff; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li { background: #1c1c1c; color: #eee; border-left-color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { background: #1c1c1c; border-color: #2c2c2c; color: #fff; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__text { color: #fff !important; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena { background: #1c1c1c; color: #eee; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: #1c1c1c; border-color: #2c2c2c; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #fff; background: transparent; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka small { color: #b5b0ae !important; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #fff; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta { background: #1c1c1c; border: 1px solid #2c2c2c; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta em { color: #b5b0ae !important; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: var(--sk-akcent-tmavy, #D60019) repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 9px); border: 0; }
html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="noir"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: rgba(255, 255, 255, .8) !important; }

/* 4 · Sklo na hodvábe: priesvitné sklo priamo na červenom hodvábe, biely text */
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); border-radius: 26px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(40, 0, 6, .7); color: #fff; overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .2); }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-label, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena span, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta em, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka small { color: rgba(255, 255, 255, .82) !important; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { background: rgba(255, 255, 255, .92); border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #fff; background: transparent; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .25); }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: rgba(255, 255, 255, .95); }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: #3f3a36 !important; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik { background: #fff !important; color: var(--sk-akcent-tmavy, #D60019) !important; }
html[data-tema^="21"][data-ox-kalk="sklo"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik:hover { background: #ffe9ec !important; }

/* 5 · Švajčiarska mriežka: ostré 1 px linky, bez zaoblení, výsledky ako tabuľka */
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: #fff; border-radius: 0; box-shadow: none; border: 2px solid #111; overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: #fff; color: #111; text-align: left; border-bottom: 2px solid #111; padding: 22px 28px; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava .ox-h3 { color: #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p { color: #333; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__telo { gap: 0; padding: 0; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set { border-right: 1px solid #111; padding: 24px 28px; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk { padding: 24px 28px; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis { color: #111; border-bottom: 1px solid #111; padding-bottom: 8px; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam { gap: 0; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li { background: none; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; padding: 10px 0; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { border-radius: 0; border-color: #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { border-radius: 0; border: 1px solid #111; background: #fff; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karty { gap: 0; border: 1px solid #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta { border-radius: 0; background: #fff; border: 0; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta + .ox-kalk__karta { border-top: 1px solid #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: rgba(255, 255, 255, .75) !important; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--trzby > b { color: #111; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena, html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber, html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { border-radius: 0; background: #f4f4f4; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pata { border-top: 2px solid #111; padding-top: 24px; }
html[data-tema^="21"][data-ox-kalk="swiss"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik { border-radius: 0 !important; }

/* 6 · Krémová prémia: teplý krém, mäkké tiene, hrubé posuvníky, zaoblené dlaždice */
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: #fbf6f0; border-radius: 32px; box-shadow: 0 40px 80px -44px rgba(60, 0, 8, .6); overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: #fbf6f0; color: #1a1a1a; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava .ox-h3 { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p { color: #5a524c; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava .ox-h3::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--sk-akcent-tmavy, #D60019); margin-right: 12px; vertical-align: middle; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set, html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk { background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 16px 40px -30px rgba(60, 0, 8, .5); }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__telo { padding: 6px 24px 10px; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li { background: #fbf6f0; border-left: 0; border-radius: 14px; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { border-radius: 14px; border-color: #eadfd4; background: #fffdfb; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: var(--sk-akcent-tmavy, #D60019); height: 36px; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: #fbf6f0; border: 0; border-radius: 18px; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta { border-radius: 22px; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--trzby { background: #fbf6f0; border: 0; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: var(--sk-akcent-tmavy, #D60019); border: 0; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: rgba(255, 255, 255, .85) !important; }
html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena, html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber, html[data-tema^="21"][data-ox-kalk="krem"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { background: #fbf6f0; border-radius: 18px; border-left: 0; }


/* =============================================================================
   222) Peter 23. 9. 2026 (RegulusX - Nový OXO Web): kalkulačka - „tie návrhy sú príliš
   rovnaké - buď viac kreatívny a viac používaj červenú a bielu, je tam veľa čiernej",
   „návrh 8 (Sklo na hodvábe) je ale super, ten môžeš spraviť ako pevný" a „na ten potom
   sprav 4 ďalšie návrhy odvodené od toho". Sklo je predvolené, prepínač ponúka už len ho
   a štyri odvodeniny (widgety.js). Každá odvodenina = celé sklo (kópia pravidiel bloku 221
   s iným id) + vlastné úpravy. Bez čiernej, červená len --sk-akcent-tmavy.
   ========================================================================== */
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); border-radius: 26px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(40, 0, 6, .7); color: #fff; overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .2); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-label, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena span, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta em, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka small { color: rgba(255, 255, 255, .82) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { background: rgba(255, 255, 255, .92); border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #fff; background: transparent; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .25); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: rgba(255, 255, 255, .95); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: #3f3a36 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik { background: #fff !important; color: var(--sk-akcent-tmavy, #D60019) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik:hover { background: #ffe9ec !important; }

/* 8b · Sklo, biele výsledky: sklo ostáva, celý stĺpec výpočtu je plná biela doska s červenými číslami */
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk { background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 24px 50px -30px rgba(60, 0, 8, .6); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__nadpis { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-label, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__bunka small, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta em { color: #4d4640 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk input[type="range"] { accent-color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__bunka { background: #fff4f5; border-color: #ffd6db; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__bunka input { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby { background: #fff4f5; border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk { background: var(--sk-akcent-tmavy, #D60019); border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk > b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk em { color: rgba(255, 255, 255, .88) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-biele"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__pozn { background: #fff4f5; border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); border-radius: 26px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(40, 0, 6, .7); color: #fff; overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .2); }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-label, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena span, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta em, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka small { color: rgba(255, 255, 255, .82) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { background: rgba(255, 255, 255, .92); border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #fff; background: transparent; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .25); }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: rgba(255, 255, 255, .95); }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: #3f3a36 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik { background: #fff !important; color: var(--sk-akcent-tmavy, #D60019) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik:hover { background: #ffe9ec !important; }

/* 8c · Mliečne sklo: silnejšie matné sklo, biela hlavička s červeným nadpisom, biele priesvitné panely */
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); border-color: rgba(255, 255, 255, .45); }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: rgba(255, 255, 255, .95); border-bottom: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava .ox-h3 { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p { color: #4d4640 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set, html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); border-radius: 22px; padding: 22px; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li { background: rgba(255, 255, 255, .22); border-left: 3px solid #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-mliecne"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--trzby { background: rgba(255, 255, 255, .22); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); border-radius: 26px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(40, 0, 6, .7); color: #fff; overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .2); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-label, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena span, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta em, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka small { color: rgba(255, 255, 255, .82) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { background: rgba(255, 255, 255, .92); border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #fff; background: transparent; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .25); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: rgba(255, 255, 255, .95); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: #3f3a36 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik { background: #fff !important; color: var(--sk-akcent-tmavy, #D60019) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik:hover { background: #ffe9ec !important; }

/* 8d · Sklo s červenými dlaždicami: tenký biely žiariaci rám, výsledky ako plné tmavočervené dlaždice */
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 30px 70px -40px rgba(40, 0, 6, .7); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta { background: var(--sk-akcent-tmavy, #D60019); border: 1px solid rgba(255, 255, 255, .55); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta em { color: rgba(255, 255, 255, .85) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: #fff; border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: #4d4640 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { background: transparent; border: 1.5px solid rgba(255, 255, 255, .8); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__text { color: #fff !important; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn svg, html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn::after { color: #fff; stroke: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena { background: var(--sk-akcent-tmavy, #D60019); border: 1px solid rgba(255, 255, 255, .55); }
html[data-tema^="21"][data-ox-kalk="sklo-cervene"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: var(--sk-akcent-tmavy, #D60019); border-color: rgba(255, 255, 255, .55); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); border-radius: 26px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(40, 0, 6, .7); color: #fff; overflow: hidden; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .2); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-label, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena span, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta em, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka small { color: rgba(255, 255, 255, .82) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__btn { background: rgba(255, 255, 255, .92); border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { color: #fff; background: transparent; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk input[type="range"] { accent-color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .25); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk { background: rgba(255, 255, 255, .95); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta--zisk em { color: #3f3a36 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik { background: #fff !important; color: var(--sk-akcent-tmavy, #D60019) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk #ox-kalk-kosik:hover { background: #ffe9ec !important; }

/* 8e · Perlové dlaždice na hodvábe: sklenený obal, vnútri dve biele karty s červenými akcentmi */
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk { background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 20px 44px -30px rgba(60, 0, 8, .7); color: #1a1a1a; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-kalk__nadpis, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__nadpis { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-kalk__zoznam li, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-kalk__vyber { background: #fff4f5; color: #1a1a1a; border-left-color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-kalk__vyber b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-combo__btn { background: #fff; border: 1px solid #f1d4d8; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-combo__text { color: #1a1a1a !important; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-kalk__cena { background: #fff4f5; border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-kalk__cena span { color: #4d4640 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__set .ox-kalk__cena b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__pod, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-label, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__pozn, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__bunka small, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby > small, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby em { color: #4d4640 !important; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk input[type="range"] { accent-color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__bunka { background: #fff4f5; border-color: #f1d4d8; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__bunka input { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby { background: #fff4f5; border: 0; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--trzby > b { color: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk { background: var(--sk-akcent-tmavy, #D60019); }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk .ox-kalk__karta-nazov, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk > b { color: #fff; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk > small, html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__karta--zisk em { color: rgba(255, 255, 255, .88) !important; }
html[data-tema^="21"][data-ox-kalk="sklo-perlove"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zisk .ox-kalk__pozn { background: #fff4f5; border: 0; }

/* =============================================================================
   223) Peter 23. 9. 2026 (RegulusX - Nový OXO Web):
   a) časté otázky, návrh 6 Konverzácia (napevno): „uprav, aby to bolo na celú šírku, keďže
      teraz je napravo prázdno". Bubliny mali strop 680 / 720 px - otázka sa roztiahne do
      62 %, odpoveď do 64 % a končí na pravom okraji. Odpoveď v plnej tmavšej červenej
      namiesto prechodu (pamäť: jedna plocha, žiadny gradient).
   b) „toto (pás Novinky pre prevádzky v päte) nech neukazuje v /my-account sekcii" -
      /my-account presmeruje na /ucet; päta je mimo #ox-obsah, preto :has() podľa trasy.
   ========================================================================== */
html[data-tema^="21"] .ox-faq--chat .ox-faq__zoznam { width: 100%; max-width: none; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__polozka { display: flex; flex-direction: column; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__otazka { max-width: min(62%, 980px); align-self: flex-start; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__odpoved {
	max-width: min(64%, 1000px); align-self: flex-end; margin: 10px 0 0 auto;
	background: var(--sk-akcent-tmavy, #D60019);
}
html[data-tema^="21"] .ox-faq--chat .ox-faq__q { font-size: 16.5px; }
html[data-tema^="21"] .ox-faq--chat .ox-faq__odpoved p { font-size: 16px; line-height: 1.6; }
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-faq--chat .ox-faq__otazka, html[data-tema^="21"] .ox-faq--chat .ox-faq__odpoved { max-width: 100%; }
}

/* 23. 9. 2026 Peter: „toto odstráň aj z B2B zákaznícka zóna" */
body:has(#ox-obsah[data-trasa="ucet"]) #ox-pata .ox-pata__pas,
body:has(#ox-obsah[data-trasa="b2b"]) #ox-pata .ox-pata__pas { display: none; }

/* 223c) Peter 23. 9. 2026 (/ucet): „zväčši texty, aby to bolo celé čitateľnejšie". Namerané:
   popisky dlaždíc 11 px monospace, riadky 13,5 px svetlosivé rgb(107, 98, 92), tlačidlá 13,5 px. */
#ox-obsah[data-trasa="ucet"] .ox-dlazdica__oko { font-size: 13px !important; letter-spacing: .12em !important; }   /* iné pravidlo ho držalo na 11 px */
#ox-obsah[data-trasa="ucet"] .ox-dlazdica__text { font-size: 16px; line-height: 1.55; color: #3f3a36; }
#ox-obsah[data-trasa="ucet"] .ox-dlazdica__cislo { font-size: 56px; }
#ox-obsah[data-trasa="ucet"] .ox-dlazdica b { font-size: 26px; }
#ox-obsah[data-trasa="ucet"] .ox-chip { font-size: 15.5px; }
#ox-obsah[data-trasa="ucet"] p.ox-text-tlmeny { font-size: 17px; color: #3f3a36; }
#ox-obsah[data-trasa="ucet"] .ox-btn--tiche.ox-btn--maly { font-size: 15px; color: #3f3a36; }

/* =============================================================================
   224) Peter 23. 9. 2026 (/b2b kalkulačka): „v kalkulačke zväčši všetky texty, nech je to
   čitateľnejšie, hlavne toto" (pruhy Tržby / Čistý zisk a poznámka). Platí pre všetky
   návrhy kalkulačky; predpona .ox-kalk.ox-kalk prebije rozloženie blokov 206 a 211.
   ========================================================================== */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov { font-size: 26px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov em { font-size: 14px; letter-spacing: .06em; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b { font-size: clamp(30px, 2.6vw, 40px); }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small { font-size: 16px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta { padding: 20px 22px 18px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pozn { font-size: 16px; line-height: 1.6; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__pod { font-size: 17px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-label { font-size: 15px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis { font-size: clamp(24px, 2vw, 30px); }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__zoznam li { font-size: 17px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-combo__text { font-size: 17px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__vyber { font-size: 16.5px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena span { font-size: 14.5px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { font-size: 40px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka small { font-size: 13.5px; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava p { font-size: 18px; }
@media (max-width: 640px) {
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b { font-size: 22px; }
	html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > small { font-size: 13.5px; }
}

/* 224b) Peter 23. 9. 2026 (/ucet): „nech to je na jednom riadku, uprav veľkosť" - záložky účtu.
   Pri 15,5 px (blok 223c) potrebovali ~1160 px, menu má 1124 px, „Odhlásiť sa" padlo do 2. riadku.
   14 px a tesnejšie medzery sa zmestia od ~1100 px; užšie okná riadok nezalomia, len posúvajú. */
#ox-obsah[data-trasa="ucet"] .ox-ucet-menu {
	flex-wrap: nowrap !important; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#ox-obsah[data-trasa="ucet"] .ox-ucet-menu::-webkit-scrollbar { display: none; }
#ox-obsah[data-trasa="ucet"] .ox-ucet-menu .ox-chip { font-size: 14px; padding: 8px 14px; white-space: nowrap; flex: 0 0 auto; }

/* 225) Peter 23. 9. 2026 (/oxo-red metriky d6): „animáciu tejto sekcie spomaľ, ale o polovicu" -
   zjavenie bunky .55 s → 1,1 s (počítadlo v pohlady.js 550/1500 → 1100/3000 ms). */
html[data-tema^="21"] .ox-dov6__metriky--postupne > * { transition-duration: 1.1s, 1.1s; }

/* 226) Peter 23. 9. 2026 (/b2b kalkulačka): „niektoré písmená sú blízko seba - pridaj malý letter
   spacing všade, kde treba, aby to bolo čitateľnejšie". Anton je úzky rez; čísla a nadpisy
   v kalkulačke dostávajú jemné rozostupy (všetky návrhy). */
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta > b { letter-spacing: .035em; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__karta-nazov { letter-spacing: .05em; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__bunka input { letter-spacing: .035em; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__cena b { letter-spacing: .035em; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__nadpis { letter-spacing: .04em; }
html[data-tema^="21"] .ox-b2bv__hrdina--kalkreg .ox-kalk.ox-kalk .ox-kalk__hlava .ox-h3 { letter-spacing: .04em; }

/* =============================================================================
   227) Peter 23. 9. 2026 (RegulusX - Nový OXO Web), titulka:
   a) „Prečo všetci chcú OXO Bubble Tea?" (#ox-msr): „zbytočne veľká výška - dole je veľká
      medzera, elementy (bodky + Ťahaj alebo použi šípky) daj vyššie a dole odstráň prázdny
      priestor, a trošku aj hore". Sekcia mala min-height max(780px, min(88vh, 920px)) -
      pri 1920x960 845 px, karty končili na 683, lišta 706-751, pod ňou 94 px prázdna.
      Výška podľa obsahu, menšie horné odsadenie, lišta tesnejšie pod kartami.
   b) karta sekcie 01: „nad týmto widgetom aj pod ním sú väčšie biele medzery ako naľavo a
      napravo - zjednoť to". Boky = --ox-s01-okraj (clamp(20px, 3.6vw, 76px), mobil 12 px);
      nad kartou bolo 58 px, pod ňou 142 px (margin B2B pásu 116 px + 26 px). Nad aj pod
      kartou je teraz tá istá premenná ako po bokoch.
   ========================================================================== */
/* ⚠️ a) VRÁTENÉ v ten istý deň - Peter: „výšku tohto widgetu vráť naspäť na výšku, ako mala".
   #ox-msr má znova pôvodnú min-height, odsadenia aj polohu lišty (bloky 4364-4384). */

/* viditeľný bok = okraj - polovica posuvnej lišty (plocha je o ňu užšia a centrovaná), preto aj vertikála */
html[data-tema^="21"] .ox-show--21-showroom { --ox-s01-okraj: clamp(20px, 3.6vw, 76px); --ox-s01-v: calc(var(--ox-s01-okraj) - var(--ox-scroll, 0px) / 2); padding-top: var(--ox-s01-v) !important; }
html[data-tema^="21"] .ox-show--21-showroom > .ox-wrap > .ox-s01,
html[data-tema^="21"] .ox-show--21-showroom .ox-s01 { margin-bottom: 0; }
html[data-tema^="21"] .ox-show--21-showroom .ox-s01 + .ox-show__b2b { margin-top: var(--ox-s01-v) !important; }
@media (max-width: 760px) {
	html[data-tema^="21"] .ox-show--21-showroom { --ox-s01-okraj: 12px; }
}

/* 228) Peter 23. 9. 2026: „nad a pod porovnaním je fialový pás - nech sú tak vysoké, ako
   široké sú okraje napravo a naľavo od porovnania". Namerané v konečnom stave (bez nábehu):
   boky 76 px, dole 76 px, hore 80 px (margin rámu 46 px + odsadenie 34 px). Margin rámu =
   odsadenie karty 01 (clamp(22px, 2.8vw, 42px)), takže hore = boky = dole na každej šírke. */
html[data-tema^="21"] .ox-s01--a4b .ox-s01__porovnanie { margin-top: clamp(22px, 2.8vw, 42px); }

/* =============================================================================
   229) Peter 23. 9. 2026 (titulka, sekcia 01): „po scrolle zhora na sekciu Prečo všetci
   chcú sa spustí animácia, keď sa začnú postupne zospodu texty skladať - sprav rovnaký
   efekt na písmo aj pre túto sekciu". Spúšťač je už existujúci `ox-s01--in` (nabehBloku
   na .ox-s01, hľadá prvok zakaždým znova - prežije aj prestavanie zamknutým widgetom).
   Každý riadok nadpisu (.ox-s01__nr) je zospodu orezaný a jeho text (.ox-s01__nt) z neho
   vyjde zdola, riadok po riadku; úvodný text vystúpi po nich. Zvýraznenia (návrh t4)
   presahujú riadok hore aj do strán - orez je len zospodu (so 14 % rezervou).
   ========================================================================== */
html[data-tema^="21"] .ox-s01 .ox-titulka01--t4 .ox-s01__nr { clip-path: inset(-60% -10% -14% -10%); }
html[data-tema^="21"] .ox-s01 .ox-titulka01--t4 .ox-s01__nt {
	display: inline-block; will-change: transform;
	transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .6s ease;
}
html[data-tema^="21"] .ox-s01 .ox-titulka01--t4 .ox-s01__nr:nth-child(1) .ox-s01__nt { transition-delay: .15s; }
html[data-tema^="21"] .ox-s01 .ox-titulka01--t4 .ox-s01__nr:nth-child(2) .ox-s01__nt { transition-delay: .30s; }
html[data-tema^="21"] .ox-s01 .ox-titulka01--t4 .ox-s01__nr:nth-child(3) .ox-s01__nt { transition-delay: .45s; }
html[data-tema^="21"] .ox-s01 .ox-titulka01--t4 .ox-s01__nr:nth-child(4) .ox-s01__nt { transition-delay: .60s; }
html[data-tema^="21"] .ox-s01:not(.ox-s01--in) .ox-titulka01--t4 .ox-s01__nt { transform: translateY(118%); opacity: 0; transition-delay: 0s; }
/* úvodný text vystúpi zdola po poslednom riadku */
html[data-tema^="21"] .ox-s01 .ox-titulka01--t4 > div > .ox-lead { transition: transform 1s cubic-bezier(.16, 1, .3, 1) .75s, opacity .8s ease .75s; }
html[data-tema^="21"] .ox-s01:not(.ox-s01--in) .ox-titulka01--t4 > div > .ox-lead { transform: translateY(28px); opacity: 0; transition-delay: 0s; }

/* 230) Peter 23. 9. 2026 (obchod): fotky produktov jednotne - fotka s výrazne iným pomerom strán
   ako rám (pohlady.js jednotneFotky, trieda --vypln) rám vyplní a orežú sa jej okraje. */
.ox-produkt__foto img.ox-produkt__img--vypln { object-fit: cover !important; width: 100%; height: 100%; }

/* =============================================================================
   231) Peter 23. 9. 2026 — pokladňa, 3. krok „Platba" (návrh Piesok, odteraz napevno):
   „QR platba nech ukazuje aj text ZADARMO a tatrapay+ Poplatok za platbu kartou,
   a pridaj tam tretiu možnosť Dobierka, ale nech je to sivé a nedá sa vybrať."
   Markup stavia `pohlady.js` → krok3() (`PLATBA_STITKY` + dlaždica
   `.ox-platba-volba--vypnuta`). Štítok ide pod názov brány a zarovnáva sa rovnako
   ako on (`margin-left: auto` - názov brány v Piesku stojí vpravo hore).
   ========================================================================== */
.ox-platba-stitok {
	display: inline-block; align-self: flex-start; margin: 4px 0 2px;
	padding: 3px 9px; border-radius: 999px;
	font: 700 10.5px/1.25 var(--sk-font-text, Inter), system-ui, sans-serif;
	font-style: normal; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-stitok { align-self: auto; margin-left: auto; }
.ox-platba-stitok--zadarmo { background: #E6F4EA; color: #17692F; }   /* 6,3:1 - zelená = výhoda */
.ox-platba-stitok--poplatok { background: #F1E9E6; color: #574B47; }  /* 7,2:1 - neutrálna, nie varovanie */
/* Dobierka: sivá, bez reakcie na myš, rádio je `disabled` (vo formulári nemá `name`) */
.ox-platba-volba--vypnuta { cursor: not-allowed; opacity: .55; filter: grayscale(1); }
.ox-platba-volba--vypnuta input { cursor: not-allowed; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba--vypnuta:hover { border-color: var(--pi-linka); }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba--vypnuta b { color: var(--pi-atrament); }

/* =============================================================================
   232) Peter 23. 9. 2026 — pokladňa (Piesok): „texty, čo sú malé, sprav väčšie a
   čitateľnejšie - hore, ako sú Produkty / Údaje / Platba, tak zväčši symbol 1 2 3."
   Drobné písmo Piesku beží z dvoch tokenov (--pi-oko 11px, --pi-oko-s 10px, mono,
   prestrk .22em / .14em) — pri tej veľkosti a takom prestrku sa verzálky zlievali.
   Tokeny idú na 13 / 12 px a prestrk zhruba na polovicu, takže sa zväčšia VŠETKY
   štítky naraz (kroky, súhrn, doprava zadarmo, rozpis) bez prepisovania každého.
   ⚠️ Rozsah je ten istý ako pri definícii tokenov v bloku Piesok (0) - .ox-kroky
   nie je vnútri .ox-pokladna, preto obe kotvy.
   ========================================================================== */
html[data-ox-pokladna="piesok"] .ox-pokladna,
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) {
	--pi-oko:           700 13px/1.5 var(--pi-mono);
	--pi-oko-prestrk:   .12em;
	--pi-oko-s:         600 12px/1.5 var(--pi-mono);
	--pi-oko-s-prestrk: .07em;
}
/* kroky hore mali prestrk natvrdo .18em */
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { letter-spacing: .1em; }
/* symbol kroku = 30 px kruh: ✓ pri hotových (bledočervený), číslo pri aktívnom
   (plný červený - farbu drží blok z 21 témy, tu len tvar a veľkosť) */
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) .ox-krok__cislo {
	display: inline-grid; place-items: center; flex: none;
	width: 30px; height: 30px; margin-right: 12px; border-radius: 50%;
	font: 800 16px/1 var(--sk-font-text, Inter), system-ui, sans-serif; letter-spacing: 0;
}
html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok--hotovy .ox-krok__cislo {
	background: rgba(214, 0, 25, .1); color: var(--sk-akcent-tmavy, #D60019);
}
/* telo: popisy platieb, riadky súhrnu, pás dopravy zadarmo, štítky platby */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba small { font-size: 14px; line-height: 1.5; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-stitok { font-size: 11.5px; }
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-suhrn__riadok { font-size: 15.5px; }
html[data-ox-pokladna="piesok"] #ox-pokladna-suhrn .ox-dz { font-size: 14.5px; }

/* 233) Peter 23. 9. 2026: hero video sa počas prehrávania postupne zväčšuje zo 100 % na 200 %
   (21-showroom.js uvodZapoj nastavuje --ox-vid-s podľa priebehu videa, po dobehnutí 2). */
html[data-tema^="21"] .ox-uvod .ox-uvod__video { transform: scale(var(--ox-vid-s, .5));   /* pred prvým výpočtom už 50 %, aby neskočilo zo 100 */ transform-origin: 50% 50%; will-change: transform; }

/* 234) 24. 9. 2026 (audit ER-01, EH-02/ER-02): MOBILNÉ MENU a tlačidlo B2B.
   · Mobilné menu (#ox-mobil-menu) je vnútri #ox-hlavicka, takže naň dopadali farby lišty
     2g: na titulke biele odkazy (5937) na bielom paneli, na podstránkach (--svetla, 7695)
     B2B tmavé na víne. Oprava _zaklad.css zo 17. 9. (html[data-tema] .ox-mobil-menu …)
     s nimi prehrávala na špecificite. Tu platí: tmavý text, bez bielej pilulky aktívnej
     položky, B2B ako plné tlačidlo v tmavšej značkovej červenej s bielym textom.
   · Hosť má od 23. 9. odkaz B2B „/prihlasenie?spat=%2Fb2b“, takže naň nesedeli pravidlá
     [href$="/b2b"] (112, 113) a dostal tmavý text na víne (kontrast 1,2 až 1,7 : 1).
     Rovnaký vzhľad ako prihlásený (hodnoty z blokov 112 a 113), podľa triedy --b2b. */
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-mobil-menu .ox-nav__odkaz,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-mobil-menu .ox-nav__odkaz { color: var(--sk-text); background: transparent; box-shadow: none; border-radius: 0 !important; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-mobil-menu .ox-nav__odkaz:hover,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-mobil-menu .ox-nav__odkaz:hover,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-mobil-menu .ox-nav__odkaz.ox-nav__odkaz--aktivny,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-mobil-menu .ox-nav__odkaz.ox-nav__odkaz--aktivny { color: var(--sk-akcent-tmavy, #D60019); background: transparent; box-shadow: none; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-mobil-menu .ox-nav__znacka { color: var(--sk-akcent-tmavy, #D60019); }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-mobil-menu .ox-nav__odkaz.ox-nav__odkaz--b2b,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-mobil-menu .ox-nav__odkaz.ox-nav__odkaz--b2b {
	background: var(--sk-akcent-tmavy, #D60019); color: #fff; border-bottom: 0; border-radius: 999px !important;
	padding: 14px 20px; margin: 8px 0; box-shadow: 0 10px 22px -14px rgba(214, 0, 25, .85);
}
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-mobil-menu .ox-nav__odkaz.ox-nav__odkaz--b2b:hover,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-mobil-menu .ox-nav__odkaz.ox-nav__odkaz--b2b:hover { background: #B00015; color: #fff; }
/* lišta na počítači: B2B hosťa rovnako ako B2B prihláseného */
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz.ox-nav__odkaz--b2b {
	background: linear-gradient(180deg, rgba(225, 0, 26, .58), rgba(176, 0, 21, .52)) !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -12px rgba(120, 0, 14, .6);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz.ox-nav__odkaz--b2b:hover {
	background: linear-gradient(180deg, rgba(225, 0, 26, .78), rgba(176, 0, 21, .72)) !important;
	color: #fff !important;
}
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav .ox-nav__odkaz.ox-nav__odkaz--b2b {
	background: linear-gradient(180deg, rgba(225, 0, 26, .82), rgba(176, 0, 21, .76)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -14px rgba(120, 0, 14, .7);
}

/* 235) Peter 24. 9. 2026 (mobil): „nad týmto elementom je veľká červená medzera, odstráň ju, nech
   je text nad obrázkami". Na mobile (jeden stĺpec) sa medzera skladala z troch častí:
   · .ox-msr__javisko drží výšku NAJDLHŠIEHO tvrdenia (všetky stavy ležia v jednej bunke, aby
     stránka pri striedaní neposkakovala) - kratšie tvrdenie malo pod sebou prázdno až ~90 px,
   · medzera riadkov mriežky 21,6 px,
   · scéna --msr-scena-v = clamp(340px, 46vh, 420px) okolo karty vysokej ~280 px (57 px hore aj
     dole; na iPhone je vh väčšie, preto tam bola medzera ešte vyššia).
   Teraz text sedí dole v bunke (tesne nad kartami), rezerva ostáva hore pod nadpisom sekcie,
   a scéna má výšku karty + malý okraj, rovnakú na Androide aj iPhone (bez vh). */
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__javisko .ox-msr__stav { align-self: end; }
	html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__mriezka { row-gap: 10px; }
	html[data-tema^="21"] .ox-msr--rodina-show { --msr-scena-v: calc(var(--msr-karta-v, 260px) + 64px); }
}

/* 235b) Peter 24. 9. 2026: „na iPhone (Safari) sú obrázky z tohto elementu rozbité - sú tam pásiky, na
   Androide to ide". Karta kolesa je 3D otočená (rotateY + translateZ, backface-visibility: hidden),
   má overflow: hidden so zaoblením a fotka v nej má ešte vlastnú 2D transformáciu. WebKit na iOS
   takto orezávanú vrstvu kreslí po dlaždiciach a švy medzi nimi vidno ako pásy. Len pre iOS
   (@supports -webkit-touch-callout): orezanie fotky cez masku, obrázok na vlastnej vrstve bez
   zmenšenia. Chrome a Android sa nemenia. */
@supports (-webkit-touch-callout: none) {
	html[data-tema^="21"] #ox-msr .ox-msr__karta .ox-msr__foto { -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; }
	html[data-tema^="21"] #ox-msr .ox-msr__karta .ox-msr__foto img { transform: translateZ(0) !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}

/* 236) Peter 24. 9. 2026: porovnanie „na iPhone to vyzerá celkom ok, ale na Androide je to moc
   natiahnuté". Na 412 px ostávalo riadku len 232 px (odsadenie mriežky 22 + rámu 18 + karty 38 px
   z každej strany), hodnoty sa lámali do 2-3 riadkov a porovnanie malo 1 276 px. Na mobile rám
   bez odsadenia, karta 22/18 px, riadky 15,5 px. Karta OXO Red nad porovnaním (blok 199) drží
   rovnakú šírku. */
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-s01--a4b .ox-s01__porovnanie { padding: 0; gap: 12px; }
	html[data-tema^="21"] .ox-s01--a4b .ox-s01__redkarta { margin-inline: 0; }
	html[data-tema^="21"] .ox-s01--a4b .ox-s01__porovnanie .ox-s01__pol { padding: 26px 18px 18px; }
	html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok { font-size: 15.5px; padding: 12px 0; gap: 12px; align-items: center; }
	html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b { font-size: 15.5px; gap: 8px; }
	html[data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before { width: 24px; height: 24px; flex: 0 0 24px; }
}

/* 237) Peter 24. 9. 2026: namiesto ✕ a ✓ v porovnaní smajlíky, 3 návrhy (widget `smajliky`,
   atribút data-ox-smajlik). Franšíza (biela karta) = smutný smajlík v tmavšej červenej, OXO Red
   (červená karta) = usmiaty smajlík v bielom krúžku - farby krúžkov ostávajú ako pri ✕/✓.
   s1 Linka · s2 Očká oblúčiky · s3 Žmurknutie. */

/* 238) Peter 24. 9. 2026: obchodné podmienky (a ostatné /stranka/…) - kostra textu, kým sa obsah
   načíta z mostu (pohlady.js stranka()); predtým bola stránka pod nadpisom úplne prázdna. */
.ox-stranka-kostra { margin-top: 24px; display: grid; gap: 14px; }
.ox-stranka-kostra i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(27, 27, 27, .06), rgba(27, 27, 27, .12), rgba(27, 27, 27, .06)); background-size: 200% 100%; animation: ox-kostra-vlna 1.2s linear infinite; }
.ox-stranka-kostra i:nth-child(3n) { width: 72%; }
.ox-stranka-kostra i:nth-child(4) { height: 22px; width: 40%; margin-top: 10px; }
@keyframes ox-kostra-vlna { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* 237b) Peter 24. 9. 2026: „smajlíkov daj krajších, lepších - sú moc jednoduché". Celý krúžok je
   teraz v SVG (vlastné pozadie), preto má ::before priehľadné pozadie a 30 px (mobil 27 px).
   s1 Roztomilé (odlesk v očiach, líčka, jazýček; smutný s obočím a slzičkou) · s2 Emoji (žltá
   tvár, zuby, líčka; smutný so slzou) · s3 Elegantné linky (obočie, zatvorené očká, úsmev). */
html[data-ox-smajlik][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before { content: ''; font-size: 0; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; box-shadow: 0 3px 8px -3px rgba(60, 0, 8, .45); }
@media (max-width: 620px) { html[data-ox-smajlik][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before { width: 27px; height: 27px; flex: 0 0 27px; } }
html[data-ox-smajlik="s1"][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23fff'/%3E%3Cellipse cx='11.3' cy='13' rx='1.8' ry='2.4' fill='%233A1A12'/%3E%3Cellipse cx='20.7' cy='13' rx='1.8' ry='2.4' fill='%233A1A12'/%3E%3Ccircle cx='11.9' cy='12' r='.7' fill='%23fff'/%3E%3Ccircle cx='21.3' cy='12' r='.7' fill='%23fff'/%3E%3Cellipse cx='7.9' cy='18' rx='2.3' ry='1.4' fill='%23FF8FA0' opacity='.75'/%3E%3Cellipse cx='24.1' cy='18' rx='2.3' ry='1.4' fill='%23FF8FA0' opacity='.75'/%3E%3Cpath d='M10.8 18.3Q16 25.2 21.2 18.3Z' fill='%238C0A1B'/%3E%3Cpath d='M13.3 21.6Q16 23.9 18.7 21.6Q16 20.1 13.3 21.6Z' fill='%23FF6F80'/%3E%3C/svg%3E") center / 100% no-repeat; }
html[data-ox-smajlik="s1"][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23D60019'/%3E%3Cpath d='M8.6 10.2l3.8-1.5M23.4 10.2l-3.8-1.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cellipse cx='11.3' cy='14' rx='1.7' ry='2.2' fill='%23fff'/%3E%3Cellipse cx='20.7' cy='14' rx='1.7' ry='2.2' fill='%23fff'/%3E%3Ccircle cx='11.3' cy='14.6' r='.8' fill='%23D60019'/%3E%3Ccircle cx='20.7' cy='14.6' r='.8' fill='%23D60019'/%3E%3Cpath d='M22.3 16.9c1 1.5 1.5 2.5 1.5 3.2a1.5 1.5 0 0 1-3 0c0-.7.5-1.7 1.5-3.2z' fill='%239FDBFF'/%3E%3Cpath d='M11.2 23.4Q16 18.3 20.8 23.4Q16 21.8 11.2 23.4Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat; }
html[data-ox-smajlik="s2"][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23FFCC4D'/%3E%3Cpath d='M4.2 20.5A12.5 12.5 0 0 0 27.8 20.5A13 13 0 0 1 4.2 20.5Z' fill='%23F2A900' opacity='.45'/%3E%3Cpath d='M9 11.3q2.3-2.3 4.6 0M18.4 11.3q2.3-2.3 4.6 0' stroke='%236B3E14' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3Cpath d='M8.8 16.8Q16 27.5 23.2 16.8Z' fill='%236B2512'/%3E%3Cpath d='M9.9 17.6H22.1Q21.6 19.4 20.8 20.3H11.2Q10.4 19.4 9.9 17.6Z' fill='%23fff'/%3E%3Cpath d='M12.6 23.2Q16 25.8 19.4 23.2Q16 21.6 12.6 23.2Z' fill='%23FF6F80'/%3E%3Cellipse cx='7.5' cy='16.8' rx='2' ry='1.2' fill='%23FF8A65' opacity='.55'/%3E%3Cellipse cx='24.5' cy='16.8' rx='2' ry='1.2' fill='%23FF8A65' opacity='.55'/%3E%3C/svg%3E") center / 100% no-repeat; }
html[data-ox-smajlik="s2"][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23FFCC4D'/%3E%3Cpath d='M4.2 20.5A12.5 12.5 0 0 0 27.8 20.5A13 13 0 0 1 4.2 20.5Z' fill='%23F2A900' opacity='.45'/%3E%3Cpath d='M8.5 10.6l3.9-1.8M23.5 10.6l-3.9-1.8' stroke='%236B3E14' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='11.4' cy='14.2' rx='1.7' ry='2.3' fill='%236B3E14'/%3E%3Cellipse cx='20.6' cy='14.2' rx='1.7' ry='2.3' fill='%236B3E14'/%3E%3Cpath d='M22.6 17.4c1.1 1.6 1.6 2.7 1.6 3.4a1.6 1.6 0 0 1-3.2 0c0-.7.5-1.8 1.6-3.4z' fill='%235FB8F5'/%3E%3Cpath d='M11 24.4Q16 18.8 21 24.4' stroke='%236B3E14' stroke-width='1.9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
html[data-ox-smajlik="s3"][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__riadok b::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23fff'/%3E%3Ccircle cx='16' cy='16' r='13.4' fill='none' stroke='%23D60019' stroke-width='.8' opacity='.25'/%3E%3Cpath d='M8.9 9.4q2-1.3 4 0M19.1 9.4q2-1.3 4 0' stroke='%23D60019' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M9.2 13.6q1.7-2 3.4 0M19.4 13.6q1.7-2 3.4 0' stroke='%23D60019' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M9.6 17.6Q16 25.4 22.4 17.6Q16 20.2 9.6 17.6Z' fill='%23D60019'/%3E%3Ccircle cx='8.2' cy='17.2' r='1.3' fill='%23D60019' opacity='.25'/%3E%3Ccircle cx='23.8' cy='17.2' r='1.3' fill='%23D60019' opacity='.25'/%3E%3C/svg%3E") center / 100% no-repeat; }
html[data-ox-smajlik="s3"][data-ox-porovnanie="p3"] .ox-s01 .ox-s01__pol--cierna .ox-s01__riadok b::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23D60019'/%3E%3Ccircle cx='16' cy='16' r='13.4' fill='none' stroke='%23fff' stroke-width='.8' opacity='.3'/%3E%3Cpath d='M8.8 10.4q2.2-.2 4-1.8M23.2 10.4q-2.2-.2-4-1.8' stroke='%23fff' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M9.4 13.8q1.6 1.6 3.2 0M19.4 13.8q1.6 1.6 3.2 0' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10.8 23.6Q16 18.6 21.2 23.6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* 239) Peter 24. 9. 2026: „na mobile v hero sekcii daj text vyššie, keďže sa to prekrýva s videom pod
   tým". Na mobile (jeden stĺpec) stál text na 50 % výšky a video pod ním sa počas prehrávania
   zväčšuje až na 200 % (blok 233) - horný okraj videa tak dorástol do tlačidla. Text ide na 33 %. */
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__stred { top: 33%; }
}

/* ==========================================================================
   240) Peter 25. 9. 2026: „hover text je červený pri červenom top bare" - téma NoirG 3
   dáva ikonám pri hover farbu --sk-akcent (počíta s bielym podkladom), ale hlavička 2g
   má pri hover len priesvitnú bielu → červený názov firmy na červenej lište.
   Na ČERVENEJ lište ostáva text a ikona pri hover biela; svetlá lišta (--svetla) sa nemení.
   ========================================================================== */
html[data-ox-hlavicka="2g"] #ox-hlavicka:not(.ox-hlavicka--svetla) .ox-ikonbtn:hover,
html[data-ox-hlavicka="2g"] #ox-hlavicka:not(.ox-hlavicka--svetla) .ox-ikonbtn:focus-visible { color: #fff; }

/* =============================================================================
   241) Audit storefrontu 26. 9. 2026 (oprava F4, len CSS). Každá časť nesie ID
   nálezu z auditu (audit26/vysledok.json). Pravidlá vlastníka: červené plochy
   jednou farbou #D60019 bez prechodu, texty pre návštevníka bez dlhej pomlčky.
   Súbory iných relácií (wa-tlacidlo.js, index.php, varianty.js) sa nemenia,
   ich časť opráv je v PRE-INYCH.md.
   ========================================================================== */

/* 241a) L1-12, L4-19: tlačidlo „B2B Zákaznícka zóna" v hlavičke malo prechod
   (bloky 75, 112, 113 a 234; na titulke .58/.52, na podstránke .82/.76).
   Jedna plná tmavšia červená, hover #B00015 ako v mobilnom menu (234). Biely
   vnútorný rámik a tieň ostávajú, na červenej lište titulky ho odlišujú. */
html #ox-hlavicka .ox-nav__odkaz--b2b { background: var(--sk-akcent-tmavy, #D60019); }
html #ox-hlavicka .ox-nav__odkaz--b2b:hover { background: #B00015; }
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz.ox-nav__odkaz--b2b,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"],
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav .ox-nav__odkaz.ox-nav__odkaz--b2b,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav .ox-nav__odkaz[href$="/b2b"] {
	background: var(--sk-akcent-tmavy, #D60019) !important;
}
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz.ox-nav__odkaz--b2b:hover,
html[data-ox-hlavicka="2g"] #ox-hlavicka .ox-nav .ox-nav__odkaz[href$="/b2b"]:hover,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav .ox-nav__odkaz.ox-nav__odkaz--b2b:hover,
html[data-ox-hlavicka="2g"] #ox-hlavicka.ox-hlavicka--svetla .ox-nav .ox-nav__odkaz[href$="/b2b"]:hover {
	background: #B00015 !important;
}

/* 241b) K2-19, L5-26: načítavacia plocha #ox-preloader (štýl priamo v index.php)
   mala prechod #E1001A, #D60019, #B00015. Teraz jedna plocha v tmavšej červenej.
   „html" pred ID prebije inline <style> v tele stránky bez !important; varianty.css
   je v <head> a blokuje vykreslenie, takže platí už od prvého snímku. Farba lišty
   prehliadača (meta theme-color #E1001A) sa v CSS nedá zmeniť, je v PRE-INYCH.md. */
html #ox-preloader { background: var(--sk-akcent-tmavy, #D60019); }

/* 241c) L2-01: Obchodné podmienky a Ochrana súkromia boli na telefóne prázdne.
   Celý text stránky /stranka/... je jeden blok .ox-detail__popis s nábehom „posun"
   (opacity 0), ktorý sa odhalí až pri 8 % viditeľnosti; blok vysoký 17 000 px na
   telefóne tú hranicu nedosiahne nikdy a poistka po 6 s ho preskočí. Príčina je
   v JS (varianty.js nabehZapoj, oprava v PRE-INYCH.md). Tu poistka len pre text
   stránok (.ox-wrap > .ox-detail__popis): je viditeľný hneď, bez nábehu.
   Popis produktu (.ox-detail__info > .ox-detail__popis) sa nemení. */
html[data-tema^="21"] .ox-sek > .ox-wrap > .ox-detail__popis.ox-rv {
	opacity: 1; transform: none; clip-path: none; transition: none;
}

/* 241d) L2-05: lišta cookies zaberala na telefóne 351 px (42 % Pixel 7, 53 % iPhone 13)
   a zakrývala spodnú polovicu úvodu. Na telefóne (do 560 px) je krátka: nadpis, veta
   a dve rovnako veľké tlačidlá „Len nevyhnutné" / „Prijať všetko", ako navrhol audit.
   Riadky kategórií s prepínačmi sa na telefóne neukazujú: voliteľná je len jedna
   (meranie), takže voľbu úplne pokrývajú tie dve tlačidlá; veta nad nimi obe
   kategórie pomenúva. Na počítači a tablete sa nemení nič.
   26. 9. 2026 (kolo 2, regresie z overenia kola 1):
   · Poznámka pod tlačidlami má riadok 18 px a odstup 14 px (na telefóne predtým 8 px),
     spodok lišty na telefóne 14 px. 44 px plocha odkazov „Ochrana súkromia" a „uložiť
     výber" (241l) sa tak zmestí medzi tlačidlá a spodok lišty a do „Len nevyhnutné"
     už nesiaha (predtým 4 až 7 px, ťuk na spodok tlačidla otvoril Ochranu súkromia
     alebo uložil výber). Tlačidlá navyše ležia nad odkazmi (z-index).
   · Telefón na šírku (výška do 500 px, šírka nad 560 px): lišta je rovnako ako na
     výšku bez riadkov kategórií, text vľavo, tlačidlá pod sebou vpravo, a končí
     pred tlačidlom Späť hore (#ox-dock). Predtým mala šírku až 720 px a pri 740 × 360
     a 667 × 375 ho zakryla. Rezerva 121 px = odsadenie lišty 20 + medzera 12 +
     pohár 69 + jeho odsadenie 20. Výška lišty klesla zo 177 až 196 px na 122 až 151 px. */
.ox-cookies.ox-cookies .ox-cookies__pozn { margin-top: 14px !important; line-height: 18px; }
.ox-cookies .ox-cookies__tlacidla { position: relative; z-index: 2; }
@media (max-width: 560px) {
	.ox-cookies.ox-cookies { padding: 14px 16px; font-size: 13px; }
	.ox-cookies.ox-cookies .ox-cookies__h { font-size: 18px; margin-bottom: 6px; }
	.ox-cookies.ox-cookies > p:not(.ox-cookies__pozn) { margin-bottom: 0; line-height: 1.4; }
	.ox-cookies.ox-cookies > .ox-cookies__kat { display: none; }
	.ox-cookies.ox-cookies .ox-cookies__tlacidla { margin-top: 12px; }
	.ox-cookies.ox-cookies .ox-cookies__tlacidla .ox-btn { min-height: 44px; padding-inline: 8px; white-space: nowrap; }
	.ox-cookies.ox-cookies .ox-cookies__pozn { font-size: 12px !important; }
}
@media (max-height: 500px) and (min-width: 561px) {
	.ox-cookies.ox-cookies {
		display: grid; grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "h tl" "p tl" "pozn tl"; gap: 6px 18px; align-items: center; justify-content: stretch;
		width: min(720px, calc(100vw - 121px)); bottom: 10px; padding: 12px 18px 14px;
	}
	.ox-cookies.ox-cookies .ox-cookies__h { grid-area: h; margin: 0; font-size: 18px; }
	.ox-cookies.ox-cookies > p:not(.ox-cookies__pozn) { grid-area: p; margin: 0; line-height: 1.4; }
	.ox-cookies.ox-cookies > .ox-cookies__kat { display: none; }
	.ox-cookies.ox-cookies .ox-cookies__tlacidla { grid-area: tl; margin: 0; flex-direction: column; gap: 8px; }
	.ox-cookies.ox-cookies .ox-cookies__tlacidla .ox-btn { flex: none; min-height: 44px; padding-inline: 16px; white-space: nowrap; }
	.ox-cookies.ox-cookies .ox-cookies__pozn { grid-area: pozn; margin: 0 !important; font-size: 12px !important; text-align: left; }
}

/* 241e) L2-04, L2-05: plávajúce prvky WhatsApp (wa-tlacidlo.js, z-index 9990) na mobile.
   · Kým je otvorená lišta cookies, na telefóne a tablete (aj na šírku) sa WhatsApp
     neukazuje; bublina aj tlačidlo boli pod lištou. Po voľbe sa objavia (bublina
     titulky tiež, ak medzitým mala vyjsť). Späť hore (#ox-dock) ide nad lištu;
     wa-tlacidlo.js ho inak drží na 84 px s !important.
   · Pri otvorenom mobilnom menu, hľadaní alebo mini-košíku sa WhatsApp skryje
     (ležal cez menu so z-index 55).
   · Koniec stránky: päta dostane na mobile rezervu pod obsahom, aby tlačidlo, Späť
     hore a bublina neprekrývali údaje firmy a odkazy (Kalkulačka zisku, Časté otázky,
     Môj účet, Obchodné podmienky, Ochrana súkromia).
   · Telefón na šírku (výška do 500 px): bublina ide nad tlačidlo k pravému okraju, je
     užšia (230 px) a bez odseku, ostáva nadpis, „Prvý na Slovensku" a „Napísať";
     predtým stála vedľa tlačidla a zakrývala „Stať sa partnerom" v strede úvodu.
   · Malá bublina „Chcete objednať rýchlo?" sa na telefóne neukazuje pri detaile
     produktu, v košíku, pokladni, registrácii a prihlásení (zakrývala názov produktu
     a tlačidlo objednania, polia formulárov). Zelené tlačidlo funguje ďalej.
   · Krížiky bublín mali 24 × 24 a 21 × 24 px, teraz 44 × 44 px (L2-11); sivý krížik
     malej bubliny #888 mal 3,5 : 1, #5C5C5C má 6,7 : 1. */
@media (max-width: 900px), (max-height: 500px) {
	html.ox-cookies-otvorene .oxo-wa { display: none; }
}
@media (max-width: 560px) {
	html.ox-cookies-otvorene body.oxo-wa-on #ox-dock { bottom: calc(18px + var(--ox-cookies-h, 0px)) !important; }
}
body:has(#ox-mobil-menu:not([hidden])) .oxo-wa,
body:has(#ox-hladanie:not([hidden])) .oxo-wa,
html.ox-mk-otvoreny .oxo-wa { display: none; }
@media (max-width: 820px) {
	body.oxo-wa-on #ox-pata::after { content: ''; display: block; height: 150px; }
	body.oxo-wa-on:has(.oxo-wa-promo, .oxo-wa__bub) #ox-pata::after { height: 224px; }
	body:has(#ox-obsah:is([data-trasa="produkt"], [data-trasa="kosik"], [data-trasa="pokladna"], [data-trasa="registracia"], [data-trasa="prihlasenie"])) .oxo-wa__bub { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
	.oxo-wa .oxo-wa-promo { width: 230px; }
	.oxo-wa .oxo-wa-promo__h { font-size: 16px; }
	.oxo-wa .oxo-wa-promo__s { font-size: 12px; letter-spacing: .02em; }
	.oxo-wa .oxo-wa-promo__p { display: none; }
	.oxo-wa .oxo-wa-promo__tel { padding: 10px 12px; }
}
.oxo-wa .oxo-wa-promo__zavri { top: 0; right: 0; width: 44px; height: 44px; background: none; line-height: 44px; border-radius: 0; }
.oxo-wa .oxo-wa-promo__zavri::before {
	content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 26px; height: 26px;
	margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255, 255, 255, .22);
}
.oxo-wa .oxo-wa__zavri { top: -6px; right: -6px; width: 44px; height: 44px; padding: 0; color: #5C5C5C; }

/* 241f) L5-12: biely text 12 px na zelenom tlačidle „Napísať" v bubline titulky
   (#25D366) mal kontrast 1,98 : 1. Zelená WhatsApp ostáva, text a ikona sú tmavozelené
   #0B3D1F (6,2 : 1). */
.oxo-wa .oxo-wa-promo__btn { color: #0B3D1F !important; }

/* 241g) L5-12: /b2b, červená ukážka formulára. Popisky #FFD9D6 (4,16 : 1), zdroje údajov
   #FFB3B8 (3,19 : 1) a pravý štítok s opacitou .8 boli pod 4,5 : 1; vzorové polia #8a7f7c
   na bielej 3,88 : 1. Popisky biele (5,4 : 1), zdroje #FFE9E7 (4,7 : 1), polia #6F6663 (5,6 : 1). */
html[data-tema^="21"] .ox-b2bv__fill small { color: #fff; }
html[data-tema^="21"] .ox-b2bv__fill i { color: #FFE9E7; }
html[data-tema^="21"] .ox-b2bv__fill > span { opacity: 1; }
html[data-tema^="21"] .ox-b2bv__in { color: #6F6663; }

/* 241h) L4-23: registrácia, texty na červenej doske (#D60019). Chybové texty #FFC2C6
   (3,56 : 1) sú biele s ikonou výkričníka (5,4 : 1), pomocné texty biele na 94 %
   (4,9 : 1), poznámka „(Povinný údaj pre platbu kartou)" na telefóne 12 px namiesto
   10,8 px (L2-11; na počítači ostáva 11,5 px z bloku 159e, inak by sa pri Priezvisku orezala).
   Štítky overenia (RPO v poriadku, chyba, načítava, nedostupné) mali svetlý text na
   priesvitnom podklade (3,6 až 4,1 : 1): biely alebo takmer biely text na tmavšom
   podklade (6,8 až 8,2 : 1), zelený a žltý rámik zachováva význam. */
html[data-ox-reg="doska"] #ox-reg-telo .ox-chyba { color: #fff; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-chyba:not(:empty)::before {
	content: ''; display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -2px; flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff'/%3E%3Cpath d='M8 3.6v5.2' stroke='%23D60019' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.9' r='1.2' fill='%23D60019'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ox-reg="doska"] #ox-reg-telo .ox-hint,
html[data-ox-reg="doska"] #ox-reg-telo .ox-text-tlmeny,
html[data-ox-reg="doska"] #ox-reg-telo .ox-label__pozn { color: rgba(255, 255, 255, .94); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-label__pozn { font-size: 12px; }
/* tiché tlačidlo na doske (napr. „← Späť") malo biele .78 = 3,6 : 1 */
html[data-ox-reg="doska"] #ox-reg-telo .ox-btn--tiche { color: rgba(255, 255, 255, .94); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--ok,
html[data-ox-reg="doska"] #ox-reg-telo .ox-prev-karta__zamok { background: rgba(0, 0, 0, .24); color: #fff; box-shadow: inset 0 0 0 1px rgba(157, 239, 178, .75); }
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--chyba { background: rgba(0, 0, 0, .24); color: #FFE3E5; }
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--nacitava,
html[data-ox-reg="doska"] #ox-reg-telo .ox-pill--nedostupne { background: rgba(0, 0, 0, .24); color: #FFE7B3; box-shadow: inset 0 0 0 1px rgba(255, 217, 138, .6); }

/* 241i) L4-09: na titulke má hlavička červenú lištu a fokus klávesnice bol karmínový
   obrys (214, 0, 25) na karmíne, teda neviditeľný. Na červenej lište (nie --svetla)
   je obrys biely (5,4 : 1). Platí len pre prvky lišty; mini-košík a mobilné menu
   majú biely podklad a ostávajú pri svojom obryse. */
html[data-ox-hlavicka="2g"] #ox-hlavicka:not(.ox-hlavicka--svetla) :is(.ox-hlavicka__vnutro > .ox-logo, .ox-nav > .ox-nav__odkaz, .ox-nav__akcie > .ox-ikonbtn, .ox-kosik-obal > .ox-ikonbtn):focus-visible {
	outline: 3px solid #fff !important; outline-offset: 3px;
}

/* 241j) L2-08: riadok typov prevádzok v úvode (bistro, fast-food, pekáreň...) mal pod
   1000 px písmo min(11.5px, .82vw), teda 3,2 px na iPhone a 6,7 px na tablete.
   Pod 1000 px 12 px, zalomený vyvážene na viac riadkov. */
@media (max-width: 1000px) {
	html[data-tema^="21"] .ox-heroN--h9 .ox-heroN__oko-r2 {
		font-size: 12px; line-height: 1.5; letter-spacing: .04em; white-space: normal; text-wrap: balance;
	}
}

/* 241k) L2-10: detail produktu na tablete (700 až 1100 px) a na telefóne na šírku bol
   v jednom stĺpci a štvorcová galéria (754 px) zabrala celú prvú obrazovku, názov bol
   na 995 px, na šírku na 1013 px. Tu dva stĺpce: galéria vľavo, názov a tlačidlo
   vpravo; malé fotky sa už nezväčšujú na dvojnásobok. */
@media (min-width: 700px) and (max-width: 1100px), (max-height: 500px) and (min-width: 560px) and (orientation: landscape) {
	html[data-tema^="21"] .ox-detail { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 32px); }
}

/* 241l) L2-11, L2-12: dotykové plochy a drobné písmo.
   · bodky slidera (30 × 3 px): priehľadný okraj zväčší plochu na 45 px výšky,
     viditeľný pásik ostáva rovnaký; šípky slidera 38 → 44 px plochy;
   · odkazy v päte (26 px) majú na telefóne 44 px; tlačidlo „esc" v hľadaní,
     prepínač a odkazy v lište cookies, pole „Hľadať v otázkach" a „Zostať prihlásený"
     majú plochu aspoň 44 px;
   · texty s informáciou majú aspoň 12 px (štítky kariet „Skladom · 60–75 porcií",
     „Príslušenstvo", „žiadne stroje", „Ťahaj alebo použi šípky", spodok päty, esc);
   · polia newslettera (15 px) a hľadania v otázkach (14,5 px) majú pod 1000 px
     16 px, inak ich Safari na iPhone pri ťuknutí priblíži (L2-12); rovnako ostatné
     polia a výbery v obsahu (zľavový kód 15 px, príchute v kalkulačke 14,5 px). */
.ox-msr__bodka.ox-msr__bodka { box-sizing: content-box; border-block: 20px solid transparent; margin-block: -20px; background-clip: padding-box; border-radius: 0; }
.ox-msr__bodka.ox-msr__bodka i { border-radius: 999px; }
/* len šípky vitríny, ktoré sú position: absolute (inak by ::after siahal na celú sekciu) */
html[data-tema^="21"] .ox-msr--rodina-show .ox-msr__vitrina > .ox-msr__arw::after { content: ''; position: absolute; inset: -3px; }
.ox-pal__esc.ox-pal__esc { position: relative; font-size: 12px; }
.ox-pal__esc.ox-pal__esc::after { content: ''; position: absolute; inset: -12px -6px; }
.ox-cookies .ox-tg::before { content: ''; position: absolute; inset: -9px -2px; }
/* 26. 9. 2026 (kolo 2): odkazy lišty cookies 18 + 2 × 13 = 44 px, odstup od tlačidiel je
   v 241d. a[href] prebije aj pravidlo témy pre „uložiť výber" (padding 15 px, siahal
   do tlačidiel aj na počítači), obidva odkazy tak majú rovnakú plochu. */
.ox-cookies.ox-cookies .ox-cookies__pozn a[href] { display: inline-block; position: relative; z-index: 1; padding: 13px 3px; margin: -13px -3px; }
html[data-tema^="21"] .ox-faq__hladanie { min-height: 44px; }
#ox-login .ox-check { min-height: 44px; align-items: center; }
html[data-tema^="21"] .ox-produkt__stitky .ox-odznak { font-size: 12px; }
html[data-tema^="21"] .ox-msr__hint { font-size: 12px; }
html[data-tema^="21"] #ox-pata .ox-pata__spodok,
html[data-tema^="21"] #ox-pata .ox-pata__spodok span,
html[data-tema^="21"] #ox-pata .ox-pata__spodok a { font-size: 12px; }
@media (max-width: 620px) {
	html[data-tema^="21"] .ox-show__bez li { font-size: 12px; }
}
@media (max-width: 820px) {
	html[data-tema] #ox-pata .ox-pata__stlpec ul { row-gap: 0; }
	html[data-tema] #ox-pata .ox-pata__stlpec li a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 1000px) {
	html[data-tema] #ox-pata .ox-pata__input,
	html[data-tema^="21"] .ox-faq__hladanie input,
	html[data-tema^="21"] #ox-obsah :is(.ox-input, .ox-select, textarea) { font-size: 16px; }
}

/* 241m) L2-14: katalóg na telefóne. Rad filtrov je vodorovne posúvateľný a dedil zo
   .ox-chipy zaoblenie 999px, ktoré pri overflow orezalo „V" vo „VŠETKO". Bez zaoblenia
   (vlasová linka je rovná) a vpravo jemné dobiele stmavnutie ako náznak, že rad
   pokračuje; na konci radu leží za posledným filtrom, nič neprekryje. */
@media (max-width: 700px) {
	#ox-obsah[data-trasa="produkty"] #ox-filtre { border-radius: 0; }
	#ox-obsah[data-trasa="produkty"] #ox-filtre::after {
		content: ''; position: sticky; right: 0; flex: 0 0 32px; align-self: stretch; margin-left: -18px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 80%); pointer-events: none;
	}
}

/* 241n) L3-18: pokladňa (Piesok), 3. krok na mobile. Súhrn so sumou „Spolu" bol až
   pod tlačidlom „Zaplatiť". Do 1100 px (jeden stĺpec) ide v 3. kroku súhrn pred
   chybový box a tlačidlá Späť / Zaplatiť; poradie v kóde ani na počítači sa nemení.
   Na telefóne (do 480 px) sa riadok krokov lámal na dva a spojovacia čiara ostala
   osamotená na začiatku druhého riadku: čiary sa skryjú a kroky sú tesnejšie. */
@media (max-width: 1100px) {
	html[data-ox-pokladna="piesok"] .ox-pokladna:has(#ox-objednat) > #ox-krok-obsah { display: contents; }
	html[data-ox-pokladna="piesok"] .ox-pokladna:has(#ox-objednat) #ox-obj-chyba { order: 1; }
	html[data-ox-pokladna="piesok"] .ox-pokladna:has(#ox-objednat) .ox-reg-akcie { order: 2; }
}
@media (max-width: 480px) {
	html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) .ox-kroky__ciara { display: none; }
	html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok { margin-right: 12px; letter-spacing: .05em; }
	html[data-ox-pokladna="piesok"] .ox-kroky:not(#ox-reg-kroky) > .ox-krok:last-of-type { margin-right: 0; }
}

/* 241o) L5-03: posuny rozloženia (CLS 0,6 až 0,8 na katalógu a detaile).
   · Appka vloží hlavičku, prázdny <main id="ox-obsah"> a hneď pätu; päta stála v okne
     a po príchode dát odskočila o výšku obsahu. Obsah má výšku aspoň okna, päta je od
     začiatku pod ním.
   · Titulka: úvod sa najprv vykreslil s odsadením podstránky (72 px) a až o 120 ms
     neskôr doplnky.js pridal triedu ox-hv-uvod (podľa #ox-obsah .ox-msr) a úvod
     vyskočil hore. Tá istá podmienka cez :has() platí hneď od prvého vykreslenia.
   · Bublina WhatsApp sa vkladá do radu vedľa tlačidla, takže sa pri jej príchode
     posunul celý plávajúci box aj tlačidlo. Bublina teraz stojí vedľa tlačidla
     absolútne (rovnaké miesto), box ani tlačidlo sa nehýbu. */
#ox-obsah { min-height: 100vh; min-height: 100svh; }
html[data-ox-hlavicka="2g"] #ox-obsah:has(.ox-msr) { padding-top: 0; }
.oxo-wa > .oxo-wa-promo,
.oxo-wa > .oxo-wa__bub { position: absolute; right: calc(100% + 12px); bottom: 0; }
.oxo-wa > .oxo-wa__bub { width: max-content; }
@media (max-height: 500px) and (orientation: landscape) {
	.oxo-wa > .oxo-wa-promo,
	.oxo-wa > .oxo-wa__bub { right: 0; bottom: calc(100% + 12px); }
}

/* 241p) L2-03 (26. 9. 2026, kolo 2, požiadavka F1): mobilné menu hlavičky 2g začínalo
   na 90 px, hlavička má 72 px (do 1080 px, na titulke aj podstránkach, aj po odrolovaní).
   Medzi nimi ostal 18 px pás stránky, cez ktorý bolo vidno hrdinu. Menu začína hneď
   pod hlavičkou. */
html[data-ox-hlavicka="2g"] .ox-mobil-menu { inset: 72px 0 0 0; }

/* 241q) L5-03, zvyšok na titulke (26. 9. 2026, kolo 2, požiadavka F1: „rezervovať riadok
   písacieho stroja, kurzor ::after animovať cez transform"). Dva zdroje posunov:
   · Riadok písacieho stroja (.ox-uvod__riadok, úvod h9) bol vycentrovaný cez flex a každé
     napísané písmeno ho rozšírilo, takže sa celý riadok posunul doľava (54 až 79 posunov
     počas prvej vety, CLS titulky 0,105 na 390 × 664). Teraz stojí v rozložení vždy na
     rovnakom mieste (začiatok + 50 %) a do stredu ho vracia transformácia -50 % vlastnej
     šírky; transformáciu Chrome za posun rozloženia nepovažuje. Vzhľad je rovnaký: veta
     rastie zo stredu, hotová stojí v strede. Rodič (flex riadok) začína zľava, aby stred
     sedel aj pri vete širšej ako stĺpec; zvislé centrovanie (align-items) ostáva.
     Iný transform riadok v h9 nemá (blok 174: transform none, posun rieši rodič).
   · Lesk v nadpise bubliny WhatsApp (wa-tlacidlo.js, .oxo-wa-promo__hl::after) sa
     v nekonečnej slučke posúval vlastnosťou left (to bol „::after" z auditu). Ten istý
     pohyb robí transformácia: -150 % a 325 % vlastnej šírky (40 %) = -60 % a 130 %
     šírky nadpisu ako predtým; zdroj v wa-tlacidlo.js je v PRE-INYCH.md §3. */
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis { justify-content: flex-start; }
html[data-tema^="21"] .ox-uvod--h9 .ox-uvod__nadpis .ox-uvod__riadok {
	position: relative; left: 50%; transform: translateX(-50%);
}
.oxo-wa .oxo-wa-promo__hl::after { left: 0; animation-name: ox-wa-lesk; }
@keyframes ox-wa-lesk {
	0% { transform: translateX(-150%) skewX(-20deg); }
	45%, 100% { transform: translateX(325%) skewX(-20deg); }
}

/* =============================================================================
   242) Peter 27. 9. 2026 (prod za bránou, pokladňa krok 3 „Spôsob platby"): „v prvom riadku QR platba
   - zadarmo, v druhom TatraPay+ s textom poplatok za platbu kartou - tak ako je to zadarmo pri QR platbe
   - a dobierka pod tým, čiže každé na vlastný riadok." Dlaždice Piesku (flex-wrap, 1 1 200px, r. ~14963)
   sa v bloku platby skladajú POD SEBA; názov brány a štítok stoja v jednom riadku, popis pod nimi.
   Štítok TatraPay+ = trieda --poplatok z bloku 231 (pohlady.js PLATBA_STITKY), text bez sumy.
   Dobierka (sivá, --vypnuta) ostáva posledná - markup ju vykresľuje za bránami.
   ========================================================================== */
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-blok:has(.ox-platba-volba) { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-blok:has(.ox-platba-volba) > h3 { flex: none; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba { flex: none; width: 100%; align-items: center; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba > span { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba > span > b { margin: 0; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba > span > .ox-platba-stitok { margin: 0; align-self: center; }
html[data-ox-pokladna="piesok"] #ox-krok-obsah .ox-platba-volba > span > small { flex: 1 0 100%; }

/* =============================================================================
   243) Peter 27. 9. 2026: „web /vzorky má starý dizajn, prerob to, aby to bolo ako na novom." Trasa /vzorky
   v storefronte (app.js → pohlady.js vzorky()): formulár z mu-pluginu oxo-vzorky-landing.php dostáva vzhľad
   nového webu - hodváb (--ox-silk), Anton nadpisy, Inter texty, firemná červená. Plugin má vlastné pravidlá
   s !important (písmo Luckiest Guy/Figtree, #ff1600), preto vyššia špecifickosť + !important. Logika
   (lookup IČO/PSČ, odoslanie, poďakovanie) sa nemení.
   ========================================================================== */
#ox-obsah .ox-vzorky { background: var(--ox-silk, #D60019); color: #fff; padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
#ox-obsah .ox-vzorky .ox-hlava-sekcie { text-align: center; margin: 0 auto 26px; display: block; }
#ox-obsah .ox-vzorky .ox-oko { color: rgba(255, 255, 255, .85); }
#ox-obsah .ox-vzorky .ox-h1 { color: #fff; font-size: clamp(40px, 6vw, 84px); line-height: 1.06; text-transform: uppercase; margin: 10px auto 0; max-width: 16ch; }
#ox-obsah .ox-vzorky .ox-vzorky__nacitava { color: #fff; text-align: center; padding: 40px 0; opacity: .85; }
#ox-obsah .ox-vzorky .oxo-vz-wrap { font-family: var(--sk-font-text, Inter), system-ui, sans-serif !important; max-width: 820px; padding: 0 0 8px; }
#ox-obsah .ox-vzorky .oxo-vz-eyebrow, #ox-obsah .ox-vzorky .oxo-vz-intro h2 { display: none !important; }   /* očko a nadpis dáva hlava sekcie */
#ox-obsah .ox-vzorky .oxo-vz-intro p { font-size: clamp(16px, 1.5vw, 18px) !important; line-height: 1.6; }
#ox-obsah .ox-vzorky .oxo-vz-facts div { border-radius: 18px; box-shadow: 0 18px 40px -22px rgba(60, 0, 8, .55); }
#ox-obsah .ox-vzorky .oxo-vz-facts b { font-family: var(--sk-font-nadpis, Anton), Impact, sans-serif; color: var(--sk-akcent-tmavy, #D60019); font-size: 30px; }
#ox-obsah .ox-vzorky .oxo-vz-facts span { font-family: var(--sk-font-text, Inter), sans-serif; color: var(--sk-text-tlmeny, #574B47); }
#ox-obsah .ox-vzorky .oxo-vz-box li { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; font-family: var(--sk-font-text, Inter), sans-serif; font-weight: 600; }
#ox-obsah .ox-vzorky .oxo-vz-card { border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); color: var(--sk-text, #1B1B1B); }
#ox-obsah .ox-vzorky .oxo-vz-card h3 { font-family: var(--sk-font-nadpis, Anton), Impact, sans-serif !important; text-transform: uppercase !important; letter-spacing: 0 !important; color: var(--sk-text, #1B1B1B) !important; font-size: 34px !important; line-height: 1.1 !important; }
#ox-obsah .ox-vzorky .oxo-vz-head p { font-family: var(--sk-font-text, Inter), sans-serif; color: var(--sk-text-tlmeny, #574B47) !important; font-size: 15.5px; }
#ox-obsah .ox-vzorky .oxo-vz-sekcia { font-family: var(--sk-font-text, Inter), sans-serif; font-weight: 700; color: var(--sk-akcent-tmavy, #D60019); border-top-color: rgba(27, 27, 27, .1); }
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form label { font-family: var(--sk-font-text, Inter), sans-serif; color: var(--sk-text, #1B1B1B); }
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form input:not([type=checkbox]),
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form textarea,
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form select,
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form select option { font-family: var(--sk-font-text, Inter), sans-serif !important; border-radius: 12px !important; border-color: rgba(27, 27, 27, .15) !important; }
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form input:focus,
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form textarea:focus,
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form select:focus { border-color: var(--sk-akcent-tmavy, #D60019) !important; box-shadow: 0 0 0 4px rgba(214, 0, 25, .14) !important; }
#ox-obsah .ox-vzorky .oxo-vz-hint { font-family: var(--sk-font-text, Inter), sans-serif; }
#ox-obsah .ox-vzorky .oxo-vz-label, #ox-obsah .ox-vzorky .oxo-vz-count { font-family: var(--sk-font-text, Inter), sans-serif; }
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form .oxo-vz-chips label { font-family: var(--sk-font-text, Inter), sans-serif; }
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form .oxo-vz-chips label:has(input:checked) { background: var(--sk-akcent-tmavy, #D60019); border-color: var(--sk-akcent-tmavy, #D60019); }
#ox-obsah .ox-vzorky .oxo-vz-check { font-family: var(--sk-font-text, Inter), sans-serif; }
#ox-obsah .ox-vzorky .oxo-vz-check a { color: var(--sk-akcent-tmavy, #D60019) !important; }
#ox-obsah .ox-vzorky .oxo-vz-card .oxo-vz-form .oxo-vz-check input { accent-color: var(--sk-akcent-tmavy, #D60019); }
#ox-obsah .ox-vzorky .oxo-vz-btn { font-family: var(--sk-font-text, Inter), sans-serif !important; font-weight: 700; font-size: 16px; letter-spacing: .06em; border-radius: 14px; background: var(--sk-akcent-tmavy, #D60019); box-shadow: 0 12px 28px -12px rgba(214, 0, 25, .7); }
#ox-obsah .ox-vzorky .oxo-vz-btn:hover { background: #7E000F; filter: none; }
#ox-obsah .ox-vzorky .oxo-vz-note { font-family: var(--sk-font-text, Inter), sans-serif; }
#ox-obsah .ox-vzorky .oxo-vz-err { border-radius: 14px; font-family: var(--sk-font-text, Inter), sans-serif; }
#ox-obsah .ox-vzorky .oxo-vz-thanks h3 { font-family: var(--sk-font-nadpis, Anton), Impact, sans-serif !important; text-transform: uppercase !important; }
#ox-obsah .ox-vzorky .oxo-vz-thanks p { font-family: var(--sk-font-text, Inter), sans-serif; }
@media (max-width: 640px) { #ox-obsah .ox-vzorky .ox-h1 { font-size: 38px; } }
/* 243b) Peter 27. 9. 2026 (/vzorky): „zo /vzorky odstráň toto" = pás štyroch čísel (1,70 € / 5,90 € / 3,10 € / 40 s).
   Obsah ostáva v plugine (stará stránka WordPressu ho má ďalej), storefront ho neukazuje. */
#ox-obsah .ox-vzorky .oxo-vz-facts { display: none !important; }