/* Základ obchodu – společný pro všechny šablony: rozvržení, formuláře, košík, pokladna, rozvržení ze Studia, animace.
   Řídí se docs/design-pravidla.md: obsah oddělují prostor, typografie a linky, ne boxy se stínem; tlačítka bez
   pilulek, záře a nadzvednutí. Barvy, písma a tvary jen přes proměnné (--c-*, --font-*, --r*) z nastavení vzhledu
   (theme_css_vars()) a volby rozvržení přes atributy <html data-s-…>. Šablony (themes/<id>/theme.css) na tom stavějí. */

:root {
  --wrap: 1280px;
  --wrap-narrow: 720px;
  --gutter: clamp(18px, calc(4.5 * var(--vw, 1vw)), 56px);
  --section: calc(clamp(64px, calc(9 * var(--vw, 1vw)), 136px) * var(--space, 1));
  --gap: calc(clamp(20px, calc(2.6 * var(--vw, 1vw)), 40px) * var(--space, 1));
  --fs-base: 16.5px;
  --fs-hero: clamp(2.5rem, calc(6 * var(--vw, 1vw)), 5.2rem);
  --fs-h1: clamp(2.1rem, calc(4.4 * var(--vw, 1vw)), 3.4rem);
  --fs-h2: clamp(1.6rem, calc(3 * var(--vw, 1vw)), 2.4rem);
  --head-weight: 600;
  --head-tracking: -0.02em;
  --head-transform: none;
  --head-line: 1.06;
  --btn-h: 48px;
  --btn-weight: 600;
  --btn-transform: none;
  --btn-tracking: 0;
  --media-bg: var(--c-surface-2);
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / .18);   /* jen pro vrstvy nad stránkou (boční košík, menu) */
  /* ozdobná hvězdička (SVG maska v barvě textu) – místo znaků ✦ */
  --orn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.4 16.6 11.1 24 12C16.6 12.9 12.9 16.6 12 24C11.1 16.6 7.4 12.9 0 12C7.4 11.1 11.1 7.4 12 0Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* skryté části (firemní údaje v pokladně…) i přes display: grid */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: calc(100% * var(--fs-scale, 1)); }
/* posuvníky ve všech šablonách: tenké, zaoblené, v barvě textu obchodu s průhledností (sedí ke každé paletě, světlé i tmavé),
   bez šipek; pod myší výraznější (zadavatel 27. 10. 2026: „tak je uprav všude, kde se vyskytují, napříč všemi šablonami“).
   Šablona je nepřebarvuje napevno – jen skrývá u vodorovných řad (karusely, kategorie), kde se posouvá tažením. */
html, body, body * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c-text) 28%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 5px; background: color-mix(in srgb, var(--c-text) 28%, transparent) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--c-text) 45%, transparent); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
/* Studio → Velikost textu: zvětší i zmenší celý obchod (rem i základní písmo šablony) */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(var(--fs-base) * var(--fs-scale, 1));
  line-height: 1.62;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); line-height: var(--head-line); text-transform: var(--head-transform); margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--c-text); color: var(--c-bg); transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
.muted { color: var(--c-muted); }
.small { font-size: .875rem; }
.orn { display: inline-block; width: .8em; height: .8em; vertical-align: .05em; background: currentColor; -webkit-mask: var(--orn-mask) center / contain no-repeat; mask: var(--orn-mask) center / contain no-repeat; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: calc(var(--wrap-narrow) + 2 * var(--gutter)); }
.section { padding: calc(var(--section) / 2) 0; }
.section-tight { padding-top: 8px; }
.main { min-height: calc(50 * var(--vh, 1vh)); }

/* ---------- pozadí stránky (Studio → Celý obchod) ---------- */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
[data-s-background="grain"] body::before, [data-s-background="paper"] body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .1;
}
[data-s-background="paper"] body::before { background-size: 420px; opacity: .14; filter: contrast(1.2); }
[data-scheme="dark"][data-s-background="grain"] body::before, [data-scheme="dark"][data-s-background="paper"] body::before { filter: invert(1); opacity: .07; }
[data-s-background="lines"] body::before { background: repeating-linear-gradient(0deg, rgb(var(--c-text-rgb) / .06) 0 1px, transparent 1px 34px); }
[data-s-background="grid"] body::before { background: linear-gradient(rgb(var(--c-text-rgb) / .055) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgb(var(--c-text-rgb) / .055) 1px, transparent 1px) 0 0 / 44px 44px; }
[data-s-background="dots"] body::before { background: radial-gradient(rgb(var(--c-text-rgb) / .16) 1px, transparent 1.4px) 0 0 / 22px 22px; }
[data-s-background="image"] body::before { background: linear-gradient(rgb(var(--c-bg-rgb) / var(--bg-overlay)), rgb(var(--c-bg-rgb) / var(--bg-overlay))), var(--bg-image, none) center / cover no-repeat; }

/* ---------- tlačítka (Studio: styl plné / obrys / text, tvar ostré / jemné / oblé) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 26px;
  border: 1.5px solid var(--c-accent); border-radius: var(--r-btn);
  background: var(--c-accent); color: var(--c-on-accent);
  font-weight: var(--btn-weight); font-size: .95rem; letter-spacing: var(--btn-tracking); text-transform: var(--btn-transform);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-text)); border-color: color-mix(in srgb, var(--c-accent) 86%, var(--c-text)); }
.btn .i { width: 18px; height: 18px; }
[data-s-buttons="outline"] .btn { background: transparent; color: var(--c-text); border-color: var(--c-text); }
[data-s-buttons="outline"] .btn:hover { background: var(--c-text); color: var(--c-bg); }
[data-s-buttons="outline"] :is(.btn-buy, .btn-block) { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
[data-s-buttons="outline"] :is(.btn-buy, .btn-block):hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-text)); border-color: color-mix(in srgb, var(--c-accent) 86%, var(--c-text)); color: var(--c-on-accent); }
[data-s-buttons="text"] .btn { background: none; border: 0; padding: 0 2px; min-height: 0; height: auto; color: var(--c-text); border-radius: 0;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--c-accent); font-size: 1.02rem; }
[data-s-buttons="text"] .btn:hover { color: var(--c-accent-ink); text-underline-offset: 4px; }
[data-s-buttons="text"] .btn-block, [data-s-buttons="text"] .btn-buy { background: var(--c-accent); color: var(--c-on-accent); text-decoration: none; min-height: var(--btn-h); padding: 0 26px; border-radius: var(--r-btn); }
[data-s-buttons="text"] .btn { transition: color .2s, text-underline-offset .25s var(--ease); }
:is([data-s-buttons="text"], [data-s-buttons="corners"]) .btn-block, [data-s-buttons="corners"] .btn-buy { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }

/* Výplň zleva: obrys, pod myší se tlačítko zleva vyplní barvou značky (plná barva, žádný přechod) */
[data-s-buttons="sweep"] .btn { background: linear-gradient(var(--c-accent), var(--c-accent)) left / 0 100% no-repeat; color: var(--c-text); border-color: var(--c-text);
  transition: background-size .45s var(--ease), color .3s, border-color .3s; }
[data-s-buttons="sweep"] .btn:hover { background-size: 100% 100%; color: var(--c-on-accent); border-color: var(--c-accent); }
[data-s-buttons="sweep"] :is(.btn-buy, .btn-block) { background-size: 100% 100%; color: var(--c-on-accent); border-color: var(--c-accent); }
[data-s-buttons="sweep"] :is(.btn-buy, .btn-block):hover { background-color: var(--c-text); background-size: 0 100%; color: var(--c-bg); border-color: var(--c-text); }

/* Razítko: plná barva s ostrým posunutým „stínem“ v barvě textu (bez rozmazání); stisk ho zmenší */
[data-s-buttons="stamp"] .btn { border-color: var(--c-text); box-shadow: 4px 4px 0 var(--c-text); transition: box-shadow .18s, transform .18s, background-color .2s; }
[data-s-buttons="stamp"] .btn:hover { box-shadow: 2px 2px 0 var(--c-text); transform: translate(2px, 2px); background: var(--c-accent); }
[data-s-buttons="stamp"] .btn:active { box-shadow: 0 0 0 var(--c-text); transform: translate(4px, 4px); }

/* Rohy: tenké značky v rozích, pod myší se spojí v celý rámeček – redakční, klidné */
[data-s-buttons="corners"] .btn { position: relative; background: none; border-color: transparent; color: var(--c-text); --cn: 9px; --cn-c: var(--c-text);
  background-image: linear-gradient(var(--cn-c), var(--cn-c)), linear-gradient(var(--cn-c), var(--cn-c)), linear-gradient(var(--cn-c), var(--cn-c)), linear-gradient(var(--cn-c), var(--cn-c)),
    linear-gradient(var(--cn-c), var(--cn-c)), linear-gradient(var(--cn-c), var(--cn-c)), linear-gradient(var(--cn-c), var(--cn-c)), linear-gradient(var(--cn-c), var(--cn-c));
  background-repeat: no-repeat;
  background-size: var(--cn) 1px, 1px var(--cn), var(--cn) 1px, 1px var(--cn), var(--cn) 1px, 1px var(--cn), var(--cn) 1px, 1px var(--cn);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  transition: background-size .4s var(--ease), color .2s; }
[data-s-buttons="corners"] .btn:hover { --cn: 51%; color: var(--c-accent-ink); }
/* nákupní tlačítka (Do košíku, K pokladně, Objednat) jsou i u stylu Rohy plná – musí být vidět na první pohled */
[data-s-buttons="corners"] :is(.btn-buy, .btn-block) { background: var(--c-accent); background-image: none; color: var(--c-on-accent); border-color: var(--c-accent); }
[data-s-buttons="corners"] :is(.btn-buy, .btn-block):hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-text)); border-color: color-mix(in srgb, var(--c-accent) 86%, var(--c-text)); color: var(--c-on-accent); }
/* Rohy + zaoblení ze Studia: značky v rozích by zaoblení usekl – místo nich jemný zaoblený obrys, pod myší plný */
[data-s-buttons="corners"]:not([data-s-button-shape="square"]) .btn:not(.btn-buy, .btn-block) { background-image: none; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); transition: border-color .2s, color .2s; }
[data-s-buttons="corners"]:not([data-s-button-shape="square"]) .btn:not(.btn-buy, .btn-block):hover { border-color: currentColor; }

.btn-lg { min-height: calc(var(--btn-h) + 6px); padding: 0 32px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-outline { background: transparent; color: var(--c-text); border-color: var(--c-line-strong); }
.btn-outline:hover { background: transparent; border-color: var(--c-text); }
.link, .btn-link { display: inline-block; color: var(--c-text); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--c-line-strong); transition: text-decoration-color .2s; }
.link:hover, .btn-link:hover { text-decoration-color: currentColor; }
.btn-link { margin-top: 14px; color: var(--c-muted); font-size: .92rem; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; position: relative; text-decoration: none; transition: color .2s; }
.icon-btn:hover { color: var(--c-accent-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.chip { padding: 4px 0; text-decoration: none; font-size: .95rem; border-bottom: 1px solid var(--c-line-strong); transition: border-color .2s; }
.chip:hover, .chip.is-on { border-color: var(--c-text); }
.chip.is-on { font-weight: 600; }
.tag { display: inline-block; padding: 3px 8px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; background: var(--c-bg); color: var(--c-text); border-radius: min(var(--r-sm), 4px); }
.tag-sale { background: var(--c-sale); color: var(--c-on-sale, #fff); }
.tag-muted { color: var(--c-muted); }
.eyebrow { font-size: .95rem; font-weight: 500; color: var(--c-accent-ink); margin-bottom: 16px; }

/* ---------- typografická plocha místo fotky (ukázky, zboží bez fotky) ---------- */
.ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 8%; overflow: hidden; background: var(--ph-bg); color: var(--ph-fg); }
.ph-1 { --ph-bg: var(--c-surface-2); --ph-fg: var(--c-text); }
.ph-2 { --ph-bg: color-mix(in srgb, var(--c-accent) 15%, var(--c-bg)); --ph-fg: var(--c-accent-ink); }
.ph-3 { --ph-bg: color-mix(in srgb, var(--c-accent2) 34%, var(--c-bg)); --ph-fg: var(--c-text); }
.ph-4 { --ph-bg: color-mix(in srgb, var(--c-text) 8%, var(--c-bg)); --ph-fg: var(--c-text); }
.ph-text { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); line-height: 1.05; font-size: clamp(1.15rem, calc(2.2 * var(--vw, 1vw)), 1.9rem); max-width: 11ch; text-wrap: balance; }
.ph-lg .ph-text { font-size: clamp(2rem, calc(5 * var(--vw, 1vw)), 4.2rem); max-width: 10ch; }
.ph-mini { padding: 0; }
.ph-mini .ph-text { display: none; }
.cat-media .ph-text { font-size: clamp(1.4rem, calc(2.6 * var(--vw, 1vw)), 2.2rem); }
/* ukázková plocha už nese název kategorie – pod ní jen počet */
.cat-card:has(.ph) .cat-name { display: none; }

/* ---------- oznamovací lišta a hlavička ---------- */
.announce { overflow: hidden; background: var(--c-text); color: var(--c-bg); font-size: .84rem; }
.announce-track { display: flex; justify-content: center; padding: 9px 0; white-space: nowrap; }
.announce-track > span { padding: 0 2.5rem; }
.announce-track > span[aria-hidden] { display: none; }
/* stojící lišta: delší text se zalomí na střed – v úzkém okně se nesmí uříznout na obou stranách (audit 1. 11. 2026) */
:where(:root:not([data-marquee="on"])) .announce-track { white-space: normal; text-align: center; line-height: 1.4; }
:where(:root:not([data-marquee="on"])) .announce-track > span { padding: 0 var(--gutter, 20px); }
[data-marquee="on"] .announce-track { justify-content: flex-start; width: max-content; animation: marquee calc(32s * var(--anim-speed)) linear infinite; }
[data-marquee="on"] .announce-track > span[aria-hidden] { display: inline; }
@keyframes marquee { to { transform: translateX(-33.333%); } }
/* omezený pohyb: lišta stojí – jen jeden text na střed, ne tři kopie zarovnané vlevo (skript v layout.php přepne i data-marquee,
   ať platí pravidla šablon pro stojící lištu; tohle je pojistka bez skriptu) */
@media (prefers-reduced-motion: reduce) {
  [data-marquee="on"] .announce-track { justify-content: center; width: auto; }
  [data-marquee="on"] .announce-track > span[aria-hidden] { display: none; }
}
/* stojící lišta na telefonu: delší text se zalomí na střed, ne useknout na obou stranách (audit 2.20) */
@media (max-width: 860px) {
  :root:not([data-marquee="on"]) .announce-track > span:not([aria-hidden]) { white-space: normal; text-align: center; padding-inline: var(--gutter, 20px); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .announce-track > span:not([aria-hidden]) { white-space: normal; text-align: center; padding-inline: var(--gutter, 20px); }
}

.header { position: sticky; top: 0; z-index: 40; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
:root[data-s-header-sticky="off"] .header { position: relative; }
:root[data-s-header-sticky="off"] :is(.pd-gallery, .summary, .at-cats-preview) { top: 24px; }
.nav-extra { display: none; }
.header-inner { display: flex; align-items: center; gap: 36px; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo-img { height: var(--logo-h); width: auto; max-width: 240px; object-fit: contain; }
.logo-text { font-family: var(--font-logo); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.nav { display: flex; gap: 30px; flex: 1; }
.nav a { text-decoration: none; font-size: .97rem; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
/* menu na jeden řádek (shop.js – kontrola 19 vzhledů 31. 10. 2026): co se nevejde, je schované (nav-off) a v rozbalovací nabídce
   položky E-shop (kategorie a Akce) nebo Další; položka na počítači nikdy nezalomí svůj text na dva řádky */
@media (min-width: 861px) {
  [data-nav] a[data-nav-k], [data-nav] [data-nav-trigger] { white-space: nowrap; }
  [data-nav] a.nav-off { display: none !important; }
  /* menu se nikdy nezalomí na dva řádky ani na okamžik (před prvním složením v shop.js, po načtení písma) – jinak by hlavička
     vyrostla a po složení celá stránka poskočila nahoru (CLS – audit rychlosti 1. 11. 2026); než ho shop.js poprvé složí
     (html.nav-fit), co přečnívá, se ořízne */
  html.js [data-nav]:has(> a[data-nav-k]), html.js [data-nav] :has(> a[data-nav-k]) { flex-wrap: nowrap; white-space: nowrap; }
  html.js:not(.nav-fit) [data-nav] { overflow-x: clip; }   /* jen do strany – svislé menu (Denní) si nechá vlastní posouvání */
}
[data-nav] a[data-nav-trigger] { display: inline-flex; flex-direction: row; align-items: center; }
[data-nav] [data-nav-trigger] .nav-caret { display: inline-block; flex: none; width: .85em; height: .85em; margin: 0 0 0 .3em; transition: transform .2s var(--ease); }
[data-nav] [data-nav-trigger][aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-pop { position: fixed; z-index: 60; min-width: 220px; max-width: 340px; padding: 8px 0; background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: min(var(--r-sm), 4px); box-shadow: 0 16px 36px rgb(0 0 0 / .16); }
.nav-pop[hidden] { display: none; }
.nav-pop a { display: block; padding: 9px 20px; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pop a:hover, .nav-pop a:focus-visible { background: color-mix(in srgb, var(--c-text) 6%, transparent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.nav-pop .nav-pop-all { border-bottom: 1px solid var(--c-line); margin-bottom: 4px; }
.header-actions { display: flex; gap: 2px; margin-left: auto; }
.nav-toggle { display: none; }
.cart-count { position: absolute; top: 5px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--c-accent); color: var(--c-on-accent); font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.cart-count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.3); } }

.search-panel { border-top: 1px solid var(--c-line); background: var(--c-bg); padding: 14px 0 18px; }
.search-form { display: flex; align-items: center; gap: 12px; }
.search-form input { flex: 1; border: 0; background: transparent; font-size: 1.3rem; padding: 10px 0; outline: none; }
.suggest { display: grid; }
.suggest a { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); text-decoration: none; }
.suggest a:hover, .suggest a.is-active { color: var(--c-accent-ink); }
.suggest img { width: 48px; height: 48px; object-fit: cover; background: var(--media-bg); }

/* ---------- úvod (Studio → Rozvržení úvodu) ---------- */
.hero { position: relative; padding: calc(var(--section) * .55) 0 calc(var(--section) * .6); overflow: hidden; }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, calc(6 * var(--vw, 1vw)), 104px); align-items: center; }
.hero-title { font-size: var(--fs-hero); margin-bottom: 22px; max-width: 13ch; }
.hero-text { font-size: 1.16rem; color: var(--c-muted); max-width: 34em; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hero-media { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--media-bg); border-radius: var(--r-sm); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* výřez a přiblížení fotky v rámečku (Studio, úprava na stránce); oříznutí přesahu jen u přiblížené fotky */
.hero-media img, .hero-bg img { object-position: var(--hero-pos, 50% 50%); scale: var(--hero-zoom, 1); transform-origin: var(--hero-pos, 50% 50%); }
.soon-media img, .poster-media img { object-position: var(--soon-pos, 50% 50%); scale: var(--soon-zoom, 1); transform-origin: var(--soon-pos, 50% 50%); }
.story-media img { object-position: var(--story-pos, 50% 50%); scale: var(--story-zoom, 1); transform-origin: var(--story-pos, 50% 50%); }
[data-zoom-hero] :is(.hero-media, .hero-bg), [data-zoom-soon] :is(.soon-media, .poster-media), [data-zoom-story] .story-media { overflow: hidden; }
.hero--text .hero-inner, .hero--stacked .hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero--text .hero-title { font-size: clamp(2.8rem, calc(8.2 * var(--vw, 1vw)), 7.4rem); max-width: 14ch; }
.hero--text .hero-text { font-size: 1.25rem; }
.hero--stacked .hero-media { aspect-ratio: 21 / 9; margin-top: clamp(28px, calc(4 * var(--vw, 1vw)), 56px); }
.hero--full { display: flex; align-items: flex-end; color: #fff; }
/* úvod s fotkou přes celou šířku drží pevný poměr stran podle volby výšky – výřez fotky (pozice a přiblížení ze Studia)
   je tak v každé velikosti okna stejný jako v náhledu, nic se neořezává jinak (zadavatel 25. 10. 2026) */
:root { --hero-ratio: 21 / 9; --hero-ratio-n: 2.3333; }
[data-s-hero-height="tall"] { --hero-ratio: 16 / 9; --hero-ratio-n: 1.7778; }
[data-s-hero-height="screen"] { --hero-ratio: 3 / 2; --hero-ratio-n: 1.5; }
.hero--full { aspect-ratio: var(--hero-ratio); padding-top: 0; padding-bottom: 0; }
/* poměr stran je na počítači jen nejmenší výška: když se text nevejde (velký nadpis v užším okně), úvod se prodlouží
   a nic se neořízne (zadavatel 27. 10. 2026: „poměrové přizpůsobování šířce okna stále nefunguje“ – nadpis a tlačítko
   byly useknuté); výšku podle poměru drží neviditelný prvek ::before (procenta odsazení se počítají ze šířky úvodu) */
@media (min-width: 861px) {
  .hero--full { aspect-ratio: auto; }
  .hero--full::before { content: ""; flex: none; width: 0; padding-bottom: calc(100% / var(--hero-ratio-n)); }
  .hero--full > .hero-inner { padding-block: clamp(28px, calc(3.5 * var(--vw, 1vw)), 56px); }
}
/* okno širší než 1440 px (Poměrově): úvod přes celou šířku zvětšený jako celek – --hero-k nastavuje layout.php; uvnitř zvětšení
   platí jednotky návrhu (1 vw = 14,4 px), ať se nezvětšují dvakrát; nástroje úprav v úvodu zůstávají v běžné velikosti */
@media (min-width: 1441px) {
  .hero--full { zoom: var(--hero-k, 1); --vw: 14.4px; }
  .hero--full :is(.sec-tools, .edit-photo-tools, .sec-panel, .tx-bar, .tx-colors, .sec-add) { zoom: calc(1 / var(--hero-k, 1)); }
}
.hero--full .hero-bg { position: absolute; inset: 0; }
.hero--full .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--full .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / var(--hero-overlay)), rgb(0 0 0 / calc(var(--hero-overlay) * .35))); }
.hero--full .hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero--full .hero-text, .hero--full .eyebrow { color: rgb(255 255 255 / .86); }
.hero--full .link { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
/* světlá fotka (Text na fotce: Podle fotky / Tmavý): tmavý text vlevo, fotku pod textem jen zjemní barva pozadí */
.hero--full.hero--on-light { color: var(--c-text); }
/* rozvržení úvodu přes celou šířku je pro bílý i tmavý text stejné (text vlevo, svisle na střed) –
   volba „Text na fotce“ mění jen barvu písma a ztmavení / zesvětlení fotky pod ním */
.hero--full { align-items: center; }
.hero--full .hero-content { max-width: min(36rem, 52%); }
.hero--full:not(.hero--on-light) .hero-bg::after { background: linear-gradient(to right, rgb(0 0 0 / min(.92, calc(var(--hero-overlay) * 1.8))), rgb(0 0 0 / calc(var(--hero-overlay) * .3)) var(--hero-ov-end, 62%)),
  linear-gradient(to top, rgb(0 0 0 / calc(var(--hero-overlay) * .9)), rgb(0 0 0 / 0) 42%); } /* i odkazy a linky dole přes celou šířku */
.hero--on-light .hero-bg::after { background: linear-gradient(to right, rgb(var(--c-bg-rgb) / calc(var(--hero-overlay) * 1.8)), rgb(var(--c-bg-rgb) / 0) var(--hero-ov-end, 62%)); }
.hero--on-light :is(.hero-text, .eyebrow) { color: var(--c-muted); }
/* tmavá paleta = světlý text: světlou fotku pod ním je potřeba ztmavit víc (barvou pozadí) */
/* Fotka do ztracena: fotka zleva plynule mizí do barvy pozadí, text stojí na čistém pozadí (funguje v každé paletě) */
.hero--fade { background: var(--c-bg); }
.hero--fade .hero-bg { left: 30%; }
.hero--fade .hero-bg img { -webkit-mask-image: linear-gradient(to right, transparent, #000 38%); mask-image: linear-gradient(to right, transparent, #000 38%); }
.hero--fade .hero-bg::after, [data-scheme="dark"] .hero--fade .hero-bg::after { display: none; }
.hero--fade .hero-content { max-width: min(36rem, 40%); }
.hero--fade .hero-title { font-size: clamp(2.4rem, calc(4.6 * var(--vw, 1vw)), 4.8rem); }
[data-scheme="dark"] .hero--on-light .hero-bg::after { background: linear-gradient(to right, rgb(var(--c-bg-rgb) / min(.95, calc(var(--hero-overlay) * 1.7 + .1))), rgb(var(--c-bg-rgb) / calc(var(--hero-overlay))) calc(var(--hero-ov-end, 62%) - 20%), rgb(var(--c-bg-rgb) / calc(var(--hero-overlay) * .16)) calc(var(--hero-ov-end, 62%) + 10%)); }
.hero--on-light .hero-content { max-width: min(36rem, 52%); }
.hero--full.hero--on-light .link { color: var(--c-text); text-decoration-color: currentColor; }
/* Telefon: vlastní výška (poměr stran) úvodní fotky nad textem – volba Výška fotky na telefonu */
@media (max-width: 860px) {
  [data-s-hero-m-ratio="16-9"] { --hero-ratio: 16 / 9; --hero-ratio-n: 1.7778; }
  [data-s-hero-m-ratio="4-3"] { --hero-ratio: 4 / 3; --hero-ratio-n: 1.3333; }
  [data-s-hero-m-ratio="1-1"] { --hero-ratio: 1 / 1; --hero-ratio-n: 1; }
  [data-s-hero-m-ratio="4-5"] { --hero-ratio: 4 / 5; --hero-ratio-n: .8; }
}
/* Telefon s vlastním výřezem úvodní fotky (výřez upravený na telefonu): výřez z --hero-m-pos / --hero-m-zoom */
@media (max-width: 860px) { :root[data-hero-m] { --hero-pos: var(--hero-m-pos); --hero-zoom: var(--hero-m-zoom); } }
/* totéž příběh a stránka Brzy otevíráme: výřez upravený na telefonu platí jen na telefonu */
@media (max-width: 860px) { :root[data-story-m] { --story-pos: var(--story-m-pos); --story-zoom: var(--story-m-zoom); } :root[data-soon-m] { --soon-pos: var(--soon-m-pos); --soon-zoom: var(--soon-m-zoom); } }
/* Délka linky v úvodu ze Studia (šablony s "hero_rule" v theme.json kreslí linku přes --hero-rule-len): počítač a telefon zvlášť –
   telefon bez vlastní hodnoty má délku podle šablony, ne z počítače */
:root[data-hero-rule] { --hero-rule-len: var(--hero-rule-d); }
@media (max-width: 860px) {
  :root[data-hero-rule] { --hero-rule-len: initial; }
  :root[data-hero-m-rule] { --hero-rule-len: var(--hero-rule-m); }
}
/* Velikost nadpisu a textu v úvodu ze Studia: násobek velikosti, kterou má šablona (zoom zvětší i řádkování a okraje) */
/* velikost jednoho textu z lišty u upravovaného textu (--tx-z) se násobí s velikostí nastavenou pro celou sekci */
[data-tx] { zoom: var(--tx-z, 1); }
.hero .hero-title { zoom: calc(var(--hero-ts, 1) * var(--tx-z, 1)); }
.hero .hero-text { zoom: calc(var(--hero-xs, 1) * var(--tx-z, 1)); }
/* Šířka pole s textem ze Studia (data-hero-w; bez něj podle šablony) – podíl šířky úvodu pro nadpis a text */
/* ztmavení / zesvětlení fotky pod textem sahá tak daleko jako pole s textem */
:root[data-hero-w] { --hero-ov-end: min(100%, calc(var(--hero-text-w) + 12%)); }
@media (min-width: 861px) {
  :root[data-hero-w] .hero :is(.hero-content, .fm-hero-main) { max-width: var(--hero-text-w) !important; }
  :root[data-hero-w] .hero :is(.hero-title, .hero-text) { max-width: none; }
  :root[data-hero-w] .hero.hero--split .hero-inner { grid-template-columns: minmax(0, var(--hero-text-w)) minmax(0, 1fr) !important; }
  :root[data-hero-w] .hero.hero--split .hero-content { max-width: none !important; }
}
/* Úvod: fotka zrcadlově, umístění a zarovnání textu (zadavatel 27. 10. 2026: „nastavit hero obrázek zrcadlově… texty
   vlevo, uprostřed i vpravo a ještě na těch místech zarovnávat“). „Podle šablony“ (auto) nic nemění; volby přebijí šablonu. */
[data-s-hero-flip="on"] .hero :is(.hero-media, .hero-bg) img { rotate: y 180deg; }
[data-s-hero-align="left"] .hero :is(.hero-content, .fm-hero-main) { text-align: left !important; justify-items: start !important; }
[data-s-hero-align="center"] .hero :is(.hero-content, .fm-hero-main) { text-align: center !important; justify-items: center !important; }
[data-s-hero-align="right"] .hero :is(.hero-content, .fm-hero-main) { text-align: right !important; justify-items: end !important; }
[data-s-hero-align="left"] .hero :is(.hero-content, .fm-hero-main) > :not(.hero-actions) { margin-left: 0 !important; margin-right: auto !important; }
[data-s-hero-align="center"] .hero :is(.hero-content, .fm-hero-main) > :not(.hero-actions) { margin-left: auto !important; margin-right: auto !important; }
[data-s-hero-align="right"] .hero :is(.hero-content, .fm-hero-main) > :not(.hero-actions) { margin-left: auto !important; margin-right: 0 !important; }
[data-s-hero-align="left"] .hero .hero-actions { justify-content: flex-start !important; justify-self: start !important; }
[data-s-hero-align="center"] .hero .hero-actions { justify-content: center !important; justify-self: center !important; }
[data-s-hero-align="right"] .hero .hero-actions { justify-content: flex-end !important; justify-self: end !important; }
/* šablony s tlačítky ve vlastním řádku pod textem (Pelíšek – text a tlačítka v pásu s linkou) */
[data-s-hero-align="left"] .hero .hero-content :has(> .hero-actions) { justify-content: flex-start !important; }
[data-s-hero-align="center"] .hero .hero-content :has(> .hero-actions) { justify-content: center !important; }
[data-s-hero-align="right"] .hero .hero-content :has(> .hero-actions) { justify-content: flex-end !important; }
/* …a když jsou text a tlačítka pod sebou (telefon, text vedle fotky): tlačítka vodorovně podle zarovnání */
@media (max-width: 860px) {
  [data-s-hero-align="left"] .hero .hero-actions { align-self: flex-start !important; }
  [data-s-hero-align="center"] .hero .hero-actions { align-self: center !important; }
  [data-s-hero-align="right"] .hero .hero-actions { align-self: flex-end !important; }
}
/* Posun celého bloku textu v úvodu tažením na stránce (zadavatel 28. 10. 2026: „aby šel celý nastavený blok textu v hero
   posouvat do stran a klidně nahoru a dolů“) – v tisícinách šířky úvodu, takže drží místo v každé velikosti okna;
   počítač a telefon zvlášť (jednotka = tisícina šířky návrhu 1440 / 390 px). Ostatní prvky se nehýbou (relativní posun). */
@media (min-width: 861px) {
  :root[data-hero-move] .hero :is(.hero-content, .fm-hero-main) { position: relative; left: calc(var(--hero-tx-x, 0) * min(var(--vw, 1vw), 14.4px) / 10); top: calc(var(--hero-tx-y, 0) * min(var(--vw, 1vw), 14.4px) / 10); }
}
@media (max-width: 860px) {
  :root[data-hero-mmove] .hero :is(.hero-content, .fm-hero-main) { position: relative; left: calc(var(--hero-mtx-x, 0) * var(--vw, 1vw) / 10); top: calc(var(--hero-mtx-y, 0) * var(--vw, 1vw) / 10); }
}
/* zarovnání jen na telefonu (hero_m_align) – přebije zarovnání z počítače, počítač se nemění (zadavatel 28. 10. 2026:
   „úpravy hero mi teď na mobilu ovlivňují nastavení hero na PC“) */
@media (max-width: 860px) {
  :root[data-s-hero-m-align="left"] .hero :is(.hero-content, .fm-hero-main) { text-align: left !important; justify-items: start !important; }
  :root[data-s-hero-m-align="center"] .hero :is(.hero-content, .fm-hero-main) { text-align: center !important; justify-items: center !important; }
  :root[data-s-hero-m-align="right"] .hero :is(.hero-content, .fm-hero-main) { text-align: right !important; justify-items: end !important; }
  :root[data-s-hero-m-align="left"] .hero :is(.hero-content, .fm-hero-main) > :not(.hero-actions) { margin-left: 0 !important; margin-right: auto !important; }
  :root[data-s-hero-m-align="center"] .hero :is(.hero-content, .fm-hero-main) > :not(.hero-actions) { margin-left: auto !important; margin-right: auto !important; }
  :root[data-s-hero-m-align="right"] .hero :is(.hero-content, .fm-hero-main) > :not(.hero-actions) { margin-left: auto !important; margin-right: 0 !important; }
  :root[data-s-hero-m-align="left"] .hero .hero-actions { justify-content: flex-start !important; justify-self: start !important; align-self: flex-start !important; }
  :root[data-s-hero-m-align="center"] .hero .hero-actions { justify-content: center !important; justify-self: center !important; align-self: center !important; }
  :root[data-s-hero-m-align="right"] .hero .hero-actions { justify-content: flex-end !important; justify-self: end !important; align-self: flex-end !important; }
  :root[data-s-hero-m-align="left"] .hero .hero-content :has(> .hero-actions) { justify-content: flex-start !important; }
  :root[data-s-hero-m-align="center"] .hero .hero-content :has(> .hero-actions) { justify-content: center !important; }
  :root[data-s-hero-m-align="right"] .hero .hero-content :has(> .hero-actions) { justify-content: flex-end !important; }
}
[data-s-hero-align="left"] .hero--split .hero-actions { align-self: flex-start !important; }
[data-s-hero-align="center"] .hero--split .hero-actions { align-self: center !important; }
[data-s-hero-align="right"] .hero--split .hero-actions { align-self: flex-end !important; }
@media (min-width: 861px) {
  /* blok textu jen tak široký, jak potřebuje obsah – jinak by u široké šablony (900 px) umístění nebylo poznat */
  /* (i když nadpis šablony přesahuje pole s textem – Dílna – blok ho obejme a nevyjede z okraje) */
  :is([data-s-hero-place="left"], [data-s-hero-place="center"], [data-s-hero-place="right"]) .hero:not(.hero--split) .hero-content { width: fit-content; max-width: 100%; }
  [data-s-hero-place="left"] .hero:not(.hero--split) :is(.hero-content, .fm-hero-main) { margin-left: 0 !important; margin-right: auto !important; }
  [data-s-hero-place="center"] .hero:not(.hero--split) :is(.hero-content, .fm-hero-main) { margin-left: auto !important; margin-right: auto !important; }
  [data-s-hero-place="right"] .hero:not(.hero--split) :is(.hero-content, .fm-hero-main) { margin-left: auto !important; margin-right: 0 !important; }
  /* text a fotka vedle sebe: Vpravo = fotka vlevo, text vpravo */
  [data-s-hero-place="right"] .hero--split .hero-media { order: -1; }
  [data-s-hero-place="right"] .hero.hero--split .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important; }
  :root[data-hero-w][data-s-hero-place="right"] .hero.hero--split .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-text-w)) !important; }
  /* fotka přes celou šířku: ztmavení / zesvětlení pod textem z té strany, kde text stojí (uprostřed rovnoměrně) */
  [data-s-hero-place="right"] .hero--full:not(.hero--on-light) .hero-bg::after { background: linear-gradient(to left, rgb(0 0 0 / min(.92, calc(var(--hero-overlay) * 1.8))), rgb(0 0 0 / calc(var(--hero-overlay) * .3)) var(--hero-ov-end, 62%)),
    linear-gradient(to top, rgb(0 0 0 / calc(var(--hero-overlay) * .9)), rgb(0 0 0 / 0) 42%); }
  [data-s-hero-place="center"] .hero--full:not(.hero--on-light) .hero-bg::after { background: radial-gradient(ellipse 60% 75% at 50% 50%, rgb(0 0 0 / min(.85, calc(var(--hero-overlay) * 1.6))), rgb(0 0 0 / calc(var(--hero-overlay) * .3))); }
  [data-s-hero-place="right"] .hero--on-light:not(.hero--fade) .hero-bg::after { background: linear-gradient(to left, rgb(var(--c-bg-rgb) / calc(var(--hero-overlay) * 1.8)), rgb(var(--c-bg-rgb) / 0) var(--hero-ov-end, 62%)); }
  [data-s-hero-place="center"] .hero--on-light:not(.hero--fade) .hero-bg::after { background: radial-gradient(ellipse 60% 75% at 50% 50%, rgb(var(--c-bg-rgb) / min(.9, calc(var(--hero-overlay) * 1.7))), rgb(var(--c-bg-rgb) / 0)); }
  [data-scheme="dark"][data-s-hero-place="right"] .hero--on-light:not(.hero--fade) .hero-bg::after { background: linear-gradient(to left, rgb(var(--c-bg-rgb) / min(.95, calc(var(--hero-overlay) * 1.7 + .1))), rgb(var(--c-bg-rgb) / calc(var(--hero-overlay))) calc(var(--hero-ov-end, 62%) - 20%), rgb(var(--c-bg-rgb) / calc(var(--hero-overlay) * .16)) calc(var(--hero-ov-end, 62%) + 10%)); }
  /* fotka do ztracena: u textu vpravo mizí fotka doprava */
  [data-s-hero-place="right"] .hero--fade .hero-bg { left: 0; right: 30%; }
  [data-s-hero-place="right"] .hero--fade .hero-bg img { -webkit-mask-image: linear-gradient(to left, transparent, #000 38%); mask-image: linear-gradient(to left, transparent, #000 38%); }
}
[data-s-hero-height="tall"] .hero:not(.hero--full) { min-height: calc(72 * var(--vh, 1vh)); display: flex; align-items: center; }
[data-s-hero-height="screen"] .hero:not(.hero--full) { min-height: calc(calc(100 * var(--fvh, 1svh)) - var(--header-h)); display: flex; align-items: center; }
[data-s-hero-height="tall"] .hero > .wrap, [data-s-hero-height="screen"] .hero > .wrap { width: 100%; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: calc(var(--gap) * 1.1); }
.section-title { font-size: var(--fs-h2); margin: 0; }
.section-link { font-weight: 500; font-size: .97rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--c-line-strong); }
.section-link:hover { text-decoration-color: currentColor; }
.section-link .i { display: none; }

.usp { padding-top: calc(var(--section) / 4); }
.usp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--c-line); }
.usp-item { display: flex; gap: 14px; align-items: flex-start; padding: 26px 28px 8px 0; }
.usp-item + .usp-item { border-left: 1px solid var(--c-line); }
/* odsazení od dělicí linky drží jádro (vyšší váha), aby ho šablona omylem nezrušila – ikona nikdy nesedí na lince */
.usp-list > .usp-item + .usp-item { padding-left: clamp(20px, calc(2.4 * var(--vw, 1vw)), 32px); }
.usp-icon { width: 22px; height: 22px; color: var(--c-accent-ink); margin-top: 3px; }
.usp-item strong { display: block; font-size: 1.02rem; font-weight: 600; margin-bottom: 2px; }
.usp-item p { margin: 0; color: var(--c-muted); font-size: .94rem; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); }
.cat-card { display: grid; gap: 14px; text-decoration: none; }
.cat-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--media-bg); border-radius: var(--r-sm); }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat-card:hover .cat-media img { transform: scale(1.03); }
.cat-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-name { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.2rem; }
.cat-card:hover .cat-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cat-count { flex: none; color: var(--c-muted); font-size: .85rem; white-space: nowrap; } /* „4 produkty“ se nikdy nezalomí vedle dlouhého názvu */

.story-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, calc(7 * var(--vw, 1vw)), 120px); align-items: center; }
.story-media { overflow: hidden; aspect-ratio: 5 / 4; background: var(--media-bg); border-radius: var(--r-sm); }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story--text .story-inner { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.story-text .section-title { margin-bottom: 22px; }
.prose { color: var(--c-text); }
.prose p, .prose li { color: color-mix(in srgb, var(--c-text), var(--c-bg) min(16%, var(--c-soft, 16%))); } /* --c-soft z palette_vars() – jen tolik, kolik čitelnost dovolí */
.prose h2 { font-size: 1.45rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.4em; }
.prose a { color: var(--c-accent-ink); text-underline-offset: 3px; }
/* poznámka nad povinnou stránkou jen pro správce (legal_draft_note): vzor nepotvrzený, chybí údaje firmy – rovná linka vlevo */
.legal-draft { margin: 0 0 28px; padding: 4px 0 4px 16px; border-left: 3px solid var(--c-accent-ink); font-size: .92rem; color: var(--c-text); }
.legal-draft p { margin: 0 0 6px; }
.legal-draft p:last-child { margin: 0; }
.legal-draft a { color: var(--c-accent-ink); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }

/* ---------- další sekce úvodu (vícekrát – Přidat sekci): jen proměnné šablony, bez boxů, obsah oddělují linky a prostor.
   Šablona je může přepsat vlastním views/home/block-<druh>.php a stylem. ---------- */
.block-text-body { max-width: 72ch; }
.block-media-text .section-title { margin-bottom: 22px; }
.faq-list { max-width: 900px; }
.block-media-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, calc(7 * var(--vw, 1vw)), 120px); align-items: center; }
.block-media--right .block-media-photo { order: 2; }
.block-media--noimg .block-media-inner { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.block-media-photo { overflow: hidden; aspect-ratio: 4 / 3; background: var(--media-bg); border-radius: var(--r-sm); }
.block-media-photo img, .gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.block-actions { margin: 28px 0 0; }
.faq-list { border-top: 1px solid var(--c-line); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.12rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover > span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq-ico { flex: none; width: 20px; height: 20px; color: var(--c-muted); transition: transform .2s var(--ease); }
.faq-item[open] .faq-ico { transform: rotate(180deg); }
.faq-item .prose { max-width: 68ch; padding: 0 0 22px; }
.gallery-grid { display: grid; grid-template-columns: repeat(var(--gal-n, 3), minmax(0, 1fr)); gap: var(--gap); }
.gallery-item { margin: 0; overflow: hidden; aspect-ratio: 1; background: var(--media-bg); border-radius: var(--r-sm); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.review-quote { margin: 0; padding-top: 20px; border-top: 1px solid var(--c-line); }
.review-quote blockquote { margin: 14px 0 16px; font-size: 1.05rem; line-height: 1.55; }
.review-quote blockquote p { margin: 0; }
.review-quote figcaption { color: var(--c-muted); font-size: .9rem; }
.review-quote figcaption a { color: inherit; text-underline-offset: 3px; }
.brands-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, calc(4 * var(--vw, 1vw)), 64px); margin: 0; padding: 0; list-style: none; }
.brands-row a { display: flex; align-items: center; min-height: 52px; color: var(--c-text); text-decoration: none; opacity: .75; transition: opacity .2s var(--ease); }
.brands-row a:hover { opacity: 1; }
.brands-row span { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.2rem; }
.brands-row img { display: block; max-width: 150px; max-height: 48px; object-fit: contain; }
.contact-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding-top: 24px; border-top: 1px solid var(--c-line); }
.contact-col { display: flex; gap: 14px; min-width: 0; }
.contact-col > .i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--c-accent-ink); }
.contact-col p { margin: 0 0 6px; overflow-wrap: anywhere; }
.contact-col a { color: var(--c-text); text-underline-offset: 3px; }
/* Kontakt a mapa s prodejnami (lib/stores.php): otevírací doba jako tabulka, mapa ve zvolené výšce (--map-h) – vedle údajů,
   nebo přes celou šířku; skutečná mapa se načte až po klepnutí (shop.js data-map) */
.store-name { margin: 0 0 6px; font-size: 1.05rem; }
.hours-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 16px; margin: 0 0 6px; }
.hours-list > div { display: contents; }
.hours-list dt { color: var(--c-muted); }
.hours-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours-note { color: var(--c-muted); font-size: .92em; }
/* víc prodejen vedle sebe: mapy stejně vysoko (dole), i když má jedna prodejna víc řádků otevírací doby */
.stores-list.is-many .store-item { display: flex; flex-direction: column; }
.stores-list.is-many .store-item .contact-cols { margin-bottom: 22px; }
.stores-list.is-many .store-item .map-box { margin-top: auto; }
.stores-list.is-many { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: calc(var(--gap) * 1.4) var(--gap); }
.stores-list.is-many .contact-cols, .block-contact.map-side .contact-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.block-contact.map-side .store-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap); align-items: start; }
.block-contact.map-side .map-box { margin-top: 24px; }
.block-contact.map-full .map-box { margin-top: 22px; }
.stores-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--c-line); }
.stores-contact .i { width: 18px; height: 18px; color: var(--c-accent-ink); }
.stores-contact a { color: var(--c-text); text-underline-offset: 3px; }
.map-box { position: relative; height: var(--map-h, 320px); overflow: hidden; border-radius: var(--radius, 6px); background: var(--c-surface, var(--c-bg)); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-text); }
/* náhled mapy, než ji návštěvník načte: ulice tenkými linkami v barvě textu, špendlík v barvě obchodu */
.map-art { position: absolute; inset: 0; opacity: .5;
  background:
    linear-gradient(12deg, transparent calc(50% - 7px), rgb(var(--c-text-rgb) / .16) calc(50% - 7px), rgb(var(--c-text-rgb) / .16) calc(50% + 7px), transparent calc(50% + 7px)),
    linear-gradient(98deg, transparent calc(38% - 5px), rgb(var(--c-text-rgb) / .12) calc(38% - 5px), rgb(var(--c-text-rgb) / .12) calc(38% + 5px), transparent calc(38% + 5px)),
    repeating-linear-gradient(90deg, transparent 0 63px, rgb(var(--c-text-rgb) / .08) 63px 65px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgb(var(--c-text-rgb) / .08) 47px 49px); }
.map-pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); color: var(--c-accent); }
.map-pin .i { width: 34px; height: 34px; }
.map-cta { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 6px; padding: 16px; text-align: center; background: linear-gradient(transparent, rgb(var(--c-bg-rgb) / .85) 45%); }
.map-cta small { color: var(--c-muted); font-size: .8rem; }
.map-cta small a { color: inherit; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-box.is-loaded :is(.map-art, .map-pin, .map-cta) { display: none; }
.block-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px clamp(28px, calc(4 * var(--vw, 1vw)), 64px);
  padding: clamp(26px, calc(3 * var(--vw, 1vw)), 44px) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.block-cta-inner p { margin: 10px 0 0; color: var(--c-muted); }
/* služby a ceník: s fotkou karty v mřížce (fotka, název s cenou, popis), bez fotek ceník s tečkovanou linkou k ceně */
.svc-list, .team-list { list-style: none; margin: 0; padding: 0; }
.block-services--cards .svc-list { display: grid; grid-template-columns: repeat(var(--svc-n, 3), minmax(0, 1fr)); gap: calc(var(--gap) * 1.2) var(--gap); }
.svc-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--media-bg); border-radius: var(--r-sm); margin-bottom: 18px; }
.svc-media img, .team-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-media .ph, .team-media .ph { position: absolute; inset: 0; }
.svc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; }
.svc-name { margin: 0; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.15rem; line-height: 1.25; }
.svc-price { font-weight: 600; white-space: nowrap; color: var(--c-accent-ink); }
.svc-desc { grid-column: 1 / -1; max-width: 72ch; margin: 6px 0 0; color: var(--c-muted); line-height: 1.55; }
.block-services--list .svc-list { max-width: 900px; border-top: 1px solid var(--c-line); }
.block-services--list .svc { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.block-services--list .svc-body { grid-template-columns: minmax(0, max-content) minmax(24px, 1fr) auto; }   /* název se zalomí – při velkém písmu ceník nevyjede z okna (mantinely vzhledu) */
.block-services--list .svc-body::after { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .35em; border-bottom: 1px dotted var(--c-line-strong); }
.block-services--list .svc-price { grid-column: 3; grid-row: 1; }
/* nadpis skupiny v ceníku (položka bez ceny a popisu – Ruce, Nohy…): bez teček a prázdné ceny, ve všech šablonách (svc_is_head) */
.svc.svc-head .svc-body { grid-template-columns: minmax(0, 1fr); }
.svc.svc-head .svc-body::after { display: none; }
.svc.svc-head .svc-name { font-size: 1.35rem; color: var(--c-accent-ink); }
.block-services--list .svc.svc-head { padding-top: 30px; }
.block-services--list .svc.svc-head:first-child { padding-top: 10px; }
/* tým: fotka na výšku, jméno a čím se zabývá */
.team-list { display: grid; grid-template-columns: repeat(var(--team-n, 3), minmax(0, 1fr)); gap: calc(var(--gap) * 1.2) var(--gap); }
.team-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--media-bg); border-radius: var(--r-sm); margin-bottom: 16px; }
.team-name { margin: 0; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.12rem; }
.team-role { margin: 4px 0 0; color: var(--c-muted); }
/* další pole položky seznamu (alergeny, vlastní pole – list_extras_html) pod popisem; seznam jako tabulka (block-list.php):
   sloupce podle polí, řádky oddělené linkami, bez boxů; na telefonu každý řádek pod sebou s popisky polí */
.svc-extra, .team-extra, .faq-extra { grid-column: 1 / -1; margin: 6px 0 0; color: var(--c-muted); font-size: .92em; line-height: 1.5; }
.svc-extra.is-long, .team-extra.is-long, .faq-extra.is-long { display: grid; gap: 2px; }
.faq-item > .faq-extra { margin: -12px 0 22px; max-width: 68ch; }
.lst-k { font-size: .82em; letter-spacing: .02em; color: var(--c-muted); opacity: .85; }
.lst-k::after { content: ":"; }
.lst-long > p { margin: 0 0 .5em; }
.lst-long > p:last-child { margin-bottom: 0; }
.lst-table { border-top: 1px solid var(--c-line); }
.lst-row { display: grid; grid-template-columns: var(--lst-cols, minmax(0, 1fr)); column-gap: calc(var(--gap) * .8); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.lst-row:last-child { border-bottom: 0; }
.lst-head { padding: 10px 0; color: var(--c-muted); font-size: .8rem; letter-spacing: .04em; }
.lst-c { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.lst-c--title { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.08rem; line-height: 1.3; }
.lst-c--long { color: var(--c-muted); }
.lst-c--price { font-weight: 600; white-space: nowrap; color: var(--c-accent-ink); text-align: right; }
.lst-head .lst-c--price { text-align: right; }
.lst-row .lst-c--photo { align-self: center; }
.lst-photo { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--media-bg); border-radius: var(--r-sm); }
.lst-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lst-photo .ph { position: absolute; inset: 0; }
.lst-photo .ph-text { font-size: 1.2rem; }
.lst-photo .ph-initial .ph-text { white-space: nowrap; }
.lst-group { display: block; padding: 28px 0 10px; }
.lst-group .lst-c { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.3rem; color: var(--c-accent-ink); }
@media (max-width: 860px) {
  .lst-head { display: none; }
  .lst-table { border-top: 1px solid var(--c-line); }
  .lst-row:not(.lst-group) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 16px 0; }
  .lst-row:not(.lst-group) .lst-c { grid-column: 1 / -1; order: 1; }
  :root:not(.is-editing) .lst-row:not(.lst-group) .lst-c.is-empty { display: none; }
  .lst-row:not(.lst-group) .lst-c--title { grid-column: 1; order: 0; }
  .lst-row:not(.lst-group) .lst-c--price { grid-column: 2; order: 0; }
  .lst-row:not(.lst-group) .lst-c--photo { width: 4.5rem; order: -1; }
  .lst-row:not(.lst-group) .lst-c:not(.lst-c--title):not(.lst-c--price):not(.lst-c--photo):not(.lst-c--long)::before { content: attr(data-label) ": "; color: var(--c-muted); font-size: .86em; }
}

/* před a po: dvě fotky přes sebe, vlevo od jezdce Před, vpravo Po (block-compare.php, posuvník v shop.js). Čára a jezdec jsou
   bílé se stínem – leží vždy na fotce, v každé paletě stejně čitelné; štítky Před / Po jako tmavé sklo */
.cmp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cmp-n, 2), minmax(0, 1fr)); gap: calc(var(--gap) * 1.2) var(--gap); }
.cmp-list:has(> :only-child) { max-width: 640px; margin-inline: auto; }
.cmp-list:has(> :only-child .cmp-frame[style*="--cmp-ar:1."]), .home-sec[data-sec-ratio="landscape"] .cmp-list:has(> :only-child) { max-width: 1040px; }
.home-sec[data-sec-ratio="square"] .cmp-list:has(> :only-child) { max-width: 760px; }
.home-sec[data-sec-ratio="portrait"] .cmp-list:has(> :only-child) { max-width: 640px; }
.cmp-frame { --cmp: 50%; position: relative; overflow: hidden; aspect-ratio: var(--cmp-ar, .8); background: var(--media-bg); border-radius: var(--r-sm);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; isolation: isolate; }
.home-sec[data-sec-ratio="portrait"] .cmp-frame { aspect-ratio: 4 / 5; }
.home-sec[data-sec-ratio="square"] .cmp-frame { aspect-ratio: 1; }
.home-sec[data-sec-ratio="landscape"] .cmp-frame { aspect-ratio: 3 / 2; }
.cmp-frame[data-cmp-edit] { cursor: default; }
.cmp-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.cmp-img .ph { position: absolute; inset: 0; }
html.js .cmp-frame .cmp-img.cmp-before, .cmp-frame .cmp-img.cmp-before { z-index: 1; clip-path: inset(0 calc(100% - var(--cmp)) 0 0) !important; }   /* !important: odhalení sekcí (.rv img) a omezení pohybu ořez jinak vypnou */
.cmp-tag { position: absolute; z-index: 2; top: 14px; padding: .38em .72em; border-radius: var(--r-sm); background: rgb(0 0 0 / .55);
  color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; pointer-events: none; transition: opacity .25s; }
.cmp-tag--before { left: 14px; }
.cmp-tag--after { right: 14px; }
.cmp-frame.is-low .cmp-tag--before, .cmp-frame.is-high .cmp-tag--after { opacity: 0; }
.cmp-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--cmp); width: 44px; margin-left: -22px; cursor: ew-resize; outline: none; touch-action: none; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgb(255 255 255 / .92); box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), 0 0 14px rgb(0 0 0 / .25); }
.cmp-knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgb(255 255 255 / .94); color: #141414;
  box-shadow: 0 6px 22px rgb(0 0 0 / .28), 0 0 0 1px rgb(255 255 255 / .6) inset; transition: background-color .2s, box-shadow .2s; }
.cmp-knob .i { width: 15px; height: 15px; margin: 0 -2px; }
.cmp-frame:hover .cmp-knob, .cmp-frame.is-drag .cmp-knob { background: #fff; box-shadow: 0 8px 26px rgb(0 0 0 / .34), 0 0 0 1px rgb(255 255 255 / .8) inset; }
.cmp-handle:focus-visible .cmp-knob { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.cmp-name { margin: 14px 0 0; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.08rem; line-height: 1.3; }
.cmp-intro { max-width: 46em; }
.block-cta-inner .btn .i { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .block-media-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .block-media--right .block-media-photo { order: 0; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-services--cards .svc-list { grid-template-columns: minmax(0, 1fr); }
  .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .cmp-list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .reviews-grid, .contact-cols { grid-template-columns: minmax(0, 1fr); }
  .block-contact.map-side .store-item { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .block-cta-inner .btn { width: 100%; justify-content: center; }
}

/* novinky: pás přes celou šířku, ne box */
.newsletter { background: var(--c-surface); margin: calc(var(--section) / 2) 0; padding: calc(var(--section) * .55) 0; }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.newsletter-inner p { color: var(--c-muted); margin: 10px 0 0; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter-form input[type=email] { flex: 1 1 220px; }
.newsletter-msg { flex-basis: 100%; margin: 0; font-size: .9rem; min-height: 1.2em; }
.newsletter-msg:empty { min-height: 0; margin-top: -10px; } /* prázdný řádek zprávy nesmí posunout pole mimo osu s textem */
/* ---------- rozvržení sekcí z Upravit sekci (section_style_choices, home_section_attrs → data-sec-*) ----------
   zadavatel 27. 10. 2026: „potřebuju, aby šlo na stránce… měnit všechno, co měnit jde“ – platí ve všech šablonách,
   proto vyšší specifičnost (.home-sec[…] .section …) než pravidla šablon */
/* zarovnání nadpisu a textu */
.home-sec[data-sec-align="center"] .section .section-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.home-sec[data-sec-align="center"] .section :is(.story-text, .story-head, .fm-statement, .block-media-text, .newsletter-inner > div:first-child, .block-cta-inner > div:first-child, .block-text-body) { text-align: center; }
.home-sec[data-sec-align="center"] .section :is(.block-text-body, .faq-list, .story--text .story-inner) { margin-inline: auto; }
.home-sec[data-sec-align="left"] .section .section-head { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: left; }
.home-sec[data-sec-align="left"] .section .section-head::before { display: none; }
.home-sec[data-sec-align="left"] .section .section-title::after { margin-left: 0; }
.home-sec[data-sec-align="left"] .section :is(.story-inner, .story-text, .story-head, .fm-statement, .block-media-text, .newsletter-inner, .block-cta-inner, .block-text-body) { text-align: left; justify-items: stretch; }
/* šířka obsahu */
.home-sec[data-sec-width="narrow"] .wrap { max-width: calc(min(var(--wrap), 960px) + 2 * var(--gutter)); }
.home-sec[data-sec-width="wide"] .wrap { max-width: none; }
/* příběh: fotka vpravo (zrcadlí i mřížky šablon s nestejnými sloupci) */
@media (min-width: 861px) {
  .home-sec[data-sec-side="right"] .section :is(.story-inner, .fm-story-grid) { direction: rtl; }
  .home-sec[data-sec-side="right"] .section :is(.story-inner, .fm-story-grid) > * { direction: ltr; }
}
/* zarovnání vedle sebe: příběh, fotka a text, novinky */
.home-sec[data-sec-valign="top"] .section :is(.story-inner, .fm-story-grid, .block-media-inner, .newsletter-inner) { align-items: start; }
.home-sec[data-sec-valign="middle"] .section :is(.story-inner, .fm-story-grid, .block-media-inner, .newsletter-inner) { align-items: center; }
.home-sec[data-sec-valign="bottom"] .section :is(.story-inner, .fm-story-grid, .block-media-inner, .newsletter-inner) { align-items: end; }
/* galerie: fotek v řadě; časté dotazy: sloupce; výzva k akci: rozvržení */
@media (min-width: 861px) {
  .home-sec[data-sec-cols="2"] .section .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-sec[data-sec-cols="1"] .section .cmp-list { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
  .home-sec[data-sec-cols="2"] .section .cmp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .home-sec[data-sec-cols="3"] .section .cmp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .home-sec[data-sec-cols="3"] .section .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-sec[data-sec-cols="4"] .section .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-sec[data-sec-cols="2"] .section :is(.block-services--cards .svc-list, .team-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-sec[data-sec-cols="3"] .section :is(.block-services--cards .svc-list, .team-list) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-sec[data-sec-cols="4"] .section :is(.block-services--cards .svc-list, .team-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-sec[data-sec-cols="2"] .section .block-services--list .svc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gap) * 1.6); max-width: none; border-top: 0; }
  .home-sec[data-sec-cols="2"] .section .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gap) * 1.6); align-items: start; max-width: none; }
  .home-sec[data-sec-layout="side"] .section .block-cta-inner { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
}
.home-sec[data-sec-layout="center"] .section .block-cta-inner { flex-direction: column; justify-content: center; align-items: center; text-align: center; }
/* novinky: vedle sebe / pod sebou / na střed – jen na počítači, na telefonu je vše pod sebou */
@media (min-width: 861px) {
  .home-sec[data-sec-layout="side"] .newsletter .newsletter-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: stretch; text-align: left; max-width: none; }
  .home-sec[data-sec-layout="stack"] .newsletter .newsletter-inner { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; max-width: 720px; margin-inline: 0; gap: 22px; }
  .home-sec[data-sec-layout="center"] .newsletter .newsletter-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 640px; margin-inline: auto; gap: 22px; }
  .home-sec:is([data-sec-layout="stack"], [data-sec-layout="center"]) .newsletter .newsletter-form { width: min(520px, 100%); }
  .home-sec[data-sec-layout="center"] .newsletter .newsletter-form { justify-content: center; }
  .home-sec[data-sec-layout="side"] .newsletter .newsletter-form { width: auto; justify-content: flex-start; }
}

/* ---------- produkty: fotka a text pod ní, bez karet ---------- */
.grid-products { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(var(--gap) * 1.4) var(--gap); }
@media (min-width: 1081px) { :root[data-s-grid-cols="3"] .grid-products { --cols: 3; } }
:root[data-fluid][data-s-grid-cols="3"] .grid-products { --cols: 3; } /* poměrová velikost: volba platí i v užším okně */
@media (max-width: 560px) { :root[data-s-grid-cols-m="1"] .grid-products { --cols: 1; } }
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 561px) and (max-width: 860px) { :where(:root[data-mfluid])[data-s-grid-cols-m="1"] .grid-products { --cols: 1; } }
@media (min-width: 861px) and (max-width: 1080px) {
  /* na počítači s poměrovou velikostí (data-fluid) neplatí – stránka má místo jako na 1440 px a nic neschovává; telefon má
     vlastní počet níž (jinak by silnější :root:not() přebil telefonní pravidla a na telefonu byly tři karty vedle sebe) */ :root:not([data-fluid]) .carousel-track { --cols: 3; } }
@media (max-width: 860px) {
  .carousel-track { --cols: 2.35; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scroll-padding-left: 0; }
  .carousel .carousel-arrows { display: none; }
}
@media (max-width: 560px) {
  .carousel-track { --cols: 1.55; --cgap: 14px; }
  :root[data-s-grid-cols-m="2"] .carousel-track { --cols: 2.2; }
}
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 561px) and (max-width: 860px) {
  :where(:root[data-mfluid]) .carousel-track { --cols: 1.55; --cgap: 14px; }
  :where(:root[data-mfluid])[data-s-grid-cols-m="2"] .carousel-track { --cols: 2.2; }
}
/* karusel zboží (Studio → Sekce úvodní stránky): řada karet do stran; na mobilu je vidět kus další karty,
   aby bylo jasné, že jde posunout. Bez lišty posuvníku, šipky jen na počítači a tabletu. */
.carousel-head { display: flex; align-items: center; gap: clamp(14px, calc(2 * var(--vw, 1vw)), 24px); }
.carousel-arrows { display: inline-flex; gap: 2px; }
.carousel-arrows .icon-btn:disabled { opacity: .28; cursor: default; }
.carousel.is-static .carousel-arrows { display: none; }
.carousel-track { --cols: 4; --cgap: var(--gap); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--cgap)) / var(--cols));
  gap: var(--cgap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; min-width: 0; }
.carousel-track:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; }
@media (min-width: 1081px) { :root[data-s-grid-cols="3"] .carousel-track { --cols: 3; } }
:root[data-fluid][data-s-grid-cols="3"] .carousel-track { --cols: 3; } /* poměrová velikost: volba platí i v užším okně */
/* vybrané zboží: neúplnou poslední řadu skryje shop.js podle skutečného počtu sloupců */
.grid-products > .is-orphan { display: none !important; }
.pc { position: relative; display: flex; flex-direction: column; }
.pc-media { position: relative; display: block; aspect-ratio: var(--media-ratio); overflow: hidden; background: var(--media-bg); border-radius: var(--r-sm); }
.pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.1s * var(--anim-speed, 1)) var(--ease), opacity .5s; }
.pc-img2 { opacity: 0; }
.pc-tags { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.pc-body { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; flex: 1; }
.pc-name { font-size: 1.04rem; font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -.005em; font-family: var(--font-body); }
.pc-name a { text-decoration: none; }
.pc-name a::after { content: ""; position: absolute; inset: 0; }
.pc:hover .pc-name a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pc-short { margin: 0; color: var(--c-muted); font-size: .9rem; line-height: 1.45; }
.pc-foot { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 6px; }
.pc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pc-price small { color: var(--c-muted); }
.price { font-weight: 600; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.price-old { color: var(--c-muted); font-size: .88rem; }
.pc-add { position: relative; z-index: 2; border: 0; background: none; padding: 2px 0; cursor: pointer; font-size: .88rem; font-weight: 600;
  color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.pc-add:hover { color: var(--c-accent-ink); }
.pc form { margin: 0; }
[data-s-card-align="center"] .pc-body { align-items: center; text-align: center; }
[data-s-card-align="center"] .pc-foot { flex-direction: column; align-items: center; gap: 6px; }

.page-head { padding: clamp(32px, calc(5 * var(--vw, 1vw)), 72px) 0 clamp(20px, calc(3 * var(--vw, 1vw)), 40px); }
.page-head-sm { padding-bottom: 8px; }
.page-title { font-size: var(--fs-h1); margin-bottom: 14px; }
.page-lead { font-size: 1.12rem; color: var(--c-muted); max-width: 40em; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; color: var(--c-muted); margin-bottom: 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-text); }
.crumbs > * + *::before { content: "/"; margin-right: 8px; opacity: .5; }
.listing-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 34px; border-bottom: 1px solid var(--c-line); }
.listing-count { color: var(--c-muted); font-size: .92rem; }
.sort select { border: 0; border-bottom: 1px solid var(--c-line-strong); border-radius: 0; background: transparent; padding: 6px 4px; min-height: 0; }
.pager { display: flex; justify-content: center; gap: 4px; margin-top: 56px; }
.pager a, .pager span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; text-decoration: none; border-bottom: 1px solid transparent; }
.pager a:hover { border-color: var(--c-line-strong); }
.pager span[aria-current] { border-color: var(--c-text); font-weight: 700; }
.empty { color: var(--c-muted); padding: 32px 0; }
.empty + .explore { margin-top: -8px; }
.explore { display: grid; gap: 22px; padding-bottom: 32px; }
.explore .search-inline { margin-top: 0; }
.empty-state .explore { margin-top: 28px; width: 100%; }
.empty-state { padding-block: 56px; display: grid; justify-items: start; gap: 10px; }
.empty-state > .i { width: 40px; height: 40px; color: var(--c-muted); }
.search-inline { display: flex; gap: 12px; max-width: 600px; margin-top: 18px; }
.search-inline input { flex: 1; }

/* detail */
.pd-wrap { padding: 24px 0 var(--section); }
.pd { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, calc(6 * var(--vw, 1vw)), 104px); align-items: start; }
.pd-gallery { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 12px; }
.pd-main { position: relative; aspect-ratio: var(--media-ratio); overflow: hidden; background: var(--media-bg); border-radius: var(--r-sm); }
.pd-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.pd-sale { position: absolute; top: 16px; left: 16px; z-index: 1; }
.pd-thumbs { display: flex; gap: 10px; }
.pd-thumbs button { width: 76px; aspect-ratio: var(--media-ratio); padding: 0; border: 0; border-bottom: 2px solid transparent; overflow: hidden; background: var(--media-bg); cursor: pointer; opacity: .62; transition: .2s; }
.pd-thumbs button[aria-pressed=true], .pd-thumbs button:hover { opacity: 1; border-color: var(--c-text); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-info > .tag { margin-bottom: 16px; }
.pd-title { font-size: clamp(2rem, calc(3.6 * var(--vw, 1vw)), 3rem); margin-bottom: 14px; }
.pd-short { font-size: 1.12rem; color: var(--c-muted); }
.pd-price { display: flex; align-items: baseline; gap: 14px; margin: 26px 0; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.pd-price .price { font-size: 1.8rem; font-family: var(--font-head); font-weight: var(--head-weight); }
.pd-price .price-low { flex-basis: 100%; margin-top: -6px; color: var(--c-muted); font-size: .85rem; }
.price-note { color: var(--c-muted); font-size: .86rem; }
.pd-variants { border: 0; padding: 0; margin: 0 0 24px; }
.pd-variants legend { font-weight: 600; font-size: .92rem; margin-bottom: 10px; }
.variant-list { display: flex; flex-wrap: wrap; gap: 8px; }
.variant { position: relative; }
.variant input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.variant span { display: inline-block; padding: 10px 16px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); font-weight: 500; transition: .2s; }
.variant input:checked + span { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
.variant input:focus-visible + span { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.variant.is-out span { opacity: .45; text-decoration: line-through; }
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.pd-actions .btn { flex: 1; min-width: 200px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); height: calc(var(--btn-h) + 6px); }
.qty button { width: 42px; height: 100%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.qty .i { width: 16px; height: 16px; }
.qty input { width: 40px; border: 0; background: transparent; text-align: center; -moz-appearance: textfield; font-weight: 600; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-sm { height: 40px; }
.qty-sm button { width: 32px; }
.qty-sm input { width: 32px; }
.pd-stock { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .93rem; }
.pd-stock .i { width: 18px; height: 18px; }
.pd-stock.is-ok { color: var(--c-ok); }
.pd-stock.is-out { color: var(--c-muted); }
.pd-ship { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .93rem; color: var(--c-muted); }
.pd-ship .i { width: 18px; height: 18px; flex: none; }
.pd-ship a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 4px; }
/* stránka Doprava a platba: tabulka cen z nastavení (značka {doprava}) – linky, žádné boxy */
.ship-table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.ship-table th { text-align: left; font-weight: 600; padding: 0 12px 10px 0; border-bottom: 1px solid var(--c-text); }
.ship-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.ship-table td + td, .ship-table th + th { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 12px; }
.ship-table small { color: var(--c-muted); }
.pd-desc { margin-top: 36px; }
/* dokumenty ke stažení u zboží (product_docs_html): řádky oddělené linkou, ikona souboru, název, druh · typ · velikost */
.pd-docs { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--c-line); }
.pd-docs h2 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 4px; }
.pd-docs ul { list-style: none; margin: 0; padding: 0; }
.pd-docs li + li { border-top: 1px solid var(--c-line); }
.pd-docs a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: inherit; text-decoration: none; }
.pd-docs a > .i { width: 22px; height: 22px; flex: none; color: var(--c-muted); }
.pd-docs a span { display: grid; gap: 1px; min-width: 0; }
.pd-docs strong { font-weight: 600; overflow-wrap: anywhere; }
.pd-docs small { color: var(--c-muted); font-size: .82rem; }
.pd-docs .pd-docs-dl { margin-left: auto; width: 18px; height: 18px; opacity: .55; }
.pd-docs a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.pd-docs a:hover .pd-docs-dl { opacity: 1; }
.pd-meta { list-style: none; padding: 18px 0 0; margin: 28px 0 0; font-size: .9rem; display: grid; gap: 6px; border-top: 1px solid var(--c-line); }
.pd-meta span { color: var(--c-muted); display: inline-block; min-width: 90px; }

/* ---------- formuláře ---------- */
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number], input[type=password], select, textarea {
  width: 100%; min-height: 50px; padding: 11px 14px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-bg); color: var(--c-text);
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 100px; resize: vertical; }
input:not([type=checkbox], [type=radio]):focus, select:focus, textarea:focus { outline: none; border-color: var(--c-text); box-shadow: 0 0 0 1px var(--c-text); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--c-sale); }
.search-form input, .qty input { min-height: 0; border: 0; box-shadow: none !important; }
.qty input { width: 40px; height: 100%; padding: 0; background: transparent; border-radius: 0; }
.qty-sm input { width: 32px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .9rem; font-weight: 600; }
.field-err { display: block; color: var(--c-sale); font-size: .86rem; margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.span-2 { grid-column: 1 / -1; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; cursor: pointer; margin: 6px 0 16px; }
.check-line input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-accent); flex: none; }
.flash { padding: 14px 0; margin: 16px 0; border-top: 2px solid var(--c-ok); border-bottom: 1px solid var(--c-line); }
.flash-err { border-top-color: var(--c-sale); }

/* ---------- košík a pokladna: řádky a linky, ne boxy ---------- */
.cart-layout, .checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: clamp(32px, calc(5 * var(--vw, 1vw)), 80px); align-items: start; }
.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-text); }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto auto auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.cart-img { position: relative; width: 88px; aspect-ratio: var(--media-ratio); overflow: hidden; background: var(--media-bg); }
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: grid; gap: 2px; font-size: .93rem; }
.cart-name { font-weight: 600; font-size: 1.02rem; text-decoration: none; }
.cart-sum { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.summary { position: sticky; top: calc(var(--header-h) + 24px); padding-top: 18px; border-top: 1px solid var(--c-text); }
.summary-title { font-size: 1.25rem; margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: .96rem; }
.summary-vat-row { padding: 2px 0; font-size: .84rem; color: var(--c-muted); }   /* rozpis DPH po sazbách (plátce DPH) */
.summary-vat:not(:empty) { padding-top: 4px; }
.summary-total { border-top: 1px solid var(--c-line); margin-top: 8px; padding-top: 18px; margin-bottom: 20px; font-size: 1.18rem; }
.free-ship { display: grid; gap: 8px; font-size: .92rem; margin-bottom: 16px; }
.free-ship .bar { height: 3px; background: var(--c-line); overflow: hidden; }
.free-ship .bar i { display: block; height: 100%; background: var(--c-accent); transition: width .6s var(--ease); }
.mini-cart { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 14px; }
.mini-cart li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; font-size: .93rem; }
.mini-cart li:not(:has(img, .ph)) { grid-template-columns: 1fr auto; }
.mini-cart img, .mini-cart .ph { position: relative; width: 56px; aspect-ratio: var(--media-ratio); object-fit: cover; background: var(--media-bg); }
.mini-cart div { display: grid; }
.mini-cart small { color: var(--c-muted); }
.co-block { border: 0; padding: 0; margin: 0 0 44px; }
.co-block legend { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.4rem; margin-bottom: 14px; }
.option { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.option:first-of-type { border-top: 1px solid var(--c-line); }
.option:has(input:checked) .option-body strong { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.option input { width: 18px; height: 18px; accent-color: var(--c-accent); margin: 0; }
.option-body { display: grid; }
.option-body small { color: var(--c-muted); }
.option-body .option-when { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.option-when .i { width: 14px; height: 14px; }
.option[hidden] { display: none; }
/* výdejní místo (Zásilkovna) pod výběrem dopravy */
.pickup { padding: 16px 0 4px; }
.pickup[hidden] { display: none; }
.pickup-cookies { margin: 8px 0 0; }   /* mapa Zásilkovny se načte až po kliknutí – může ukládat vlastní cookies */
/* osobní odběr: výběr výdejního místa (Nastavení › Prodejny a otevírací doba) – menší řádky odsazené pod dopravou */
.pickup-own { padding-left: 34px; }
.pickup-own-title { margin: 0 0 4px; font-weight: 600; }
.pickup-own .option { grid-template-columns: auto 1fr; padding: 12px 0; }
.pickup-own .option:last-of-type { border-bottom: 0; }
.order-ship { display: flex; flex-wrap: wrap; gap: 8px 48px; margin: 0 0 28px; }
.order-ship p { margin: 0; }
.order-paid { display: flex; align-items: center; gap: 8px; color: var(--c-ok, var(--c-text)); font-weight: 600; }
.order-paid .i { width: 18px; height: 18px; }
.pay-note { margin: 0 0 20px; max-width: 60ch; color: var(--c-text); }
.pickup-chosen { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-weight: 600; }
.pickup-chosen .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-accent-ink); }
.option-price { font-weight: 600; white-space: nowrap; }
.option-price s { font-weight: 400; color: var(--c-muted); }   /* původní cena dopravy, když je zdarma nebo levnější */
.option.is-off { cursor: not-allowed; }
.option.is-off :is(.option-body strong, .option-body small:not(.option-off), .option-price, .option-logos) { opacity: .5; }
.option-body .option-off { color: var(--c-sale); }   /* proč doprava nejde vybrat (příliš těžký košík) */
.terms { font-size: .86rem; }
.terms a { color: var(--c-accent-ink); }

.order-page .thanks { margin-bottom: 40px; }
.pay-box { display: flex; gap: 32px; justify-content: space-between; align-items: center; padding: 26px 0; border-top: 1px solid var(--c-text); border-bottom: 1px solid var(--c-line); margin-bottom: 28px; flex-wrap: wrap; }
.pay-box h2 { font-size: 1.35rem; }
.pay-data { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin: 0 0 12px; }
.pay-data dt { color: var(--c-muted); }
.pay-data dd { margin: 0; }
.qr { margin: 0; font-size: .82rem; color: var(--c-muted); }
.qr img { background: #fff; padding: 6px; margin-bottom: 6px; }
.order-box { padding-top: 10px; }
.order-address { margin: 22px 0 0; line-height: 1.6; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, calc(6 * var(--vw, 1vw)), 96px); }
.contact-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; } /* bez údajů firmy: formulář pod nadpisem */
.contact-info p { display: flex; gap: 12px; align-items: center; }

/* boční košík (vrstva nad stránkou – stín povolený) */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .4); opacity: 0; transition: opacity .3s; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--c-bg); padding: 24px 28px; overflow-y: auto; transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.drawer-head h2 { margin: 0; font-size: 1.35rem; }
.drawer-total { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--c-line); margin-top: 6px; font-size: 1.12rem; }

/* upoutávka */
.page-coming-soon .main { min-height: calc(100 * var(--fvh, 1vh)); }
.soon { position: relative; min-height: calc(100 * var(--fvh, 1vh)); display: grid; grid-template-columns: 1fr 1fr; }
.soon-media { position: relative; overflow: hidden; }
.soon-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.soon-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, calc(6 * var(--vw, 1vw)), 96px); gap: 8px; }
.soon-content .logo { margin-bottom: auto; padding-bottom: 32px; }
.soon-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: auto; padding-top: 40px; font-size: .86rem; color: var(--c-muted); }
.soon:not(:has(.soon-media)) { grid-template-columns: minmax(0, 860px); }
/* stránky, které jdou zobrazit i před otevřením webu (právní texty, 404, objednávka – site_teaser()): rozvržení upoutávky,
   bez menu a patičky rozpracovaného webu – logo, cesta zpět na úvod, dole odkazy jako na upoutávce */
.teaser-head-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: clamp(18px, calc(2.4 * var(--vw, 1vw)), 32px); }
.teaser-head .logo-text { font-size: clamp(1.4rem, calc(2 * var(--vw, 1vw)), 1.9rem); line-height: 1.05; overflow-wrap: normal; }
.teaser-head .logo-img { height: clamp(36px, calc(4 * var(--vw, 1vw)), 52px); }
.teaser-back { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text); font-size: .95rem; text-decoration: none; }
.teaser-back .i { width: 18px; height: 18px; }
.teaser-back:hover { color: var(--c-accent-ink); }
.teaser-foot .soon-links { margin: 0; padding: 28px 0 32px; }
.is-teaser .main { min-height: calc(55 * var(--vh, 1vh)); }
/* plakát: fotka přes celou stránku, zleva (na telefonu dolů) do barvy pozadí; logo nahoře, výhody pod přihlášením */
.soon-poster { position: relative; min-height: calc(100 * var(--fvh, 1vh)); min-height: calc(100 * var(--fvh, 1svh)); display: flex; flex-direction: column; padding: clamp(24px, calc(4 * var(--vw, 1vw)), 56px) clamp(20px, calc(6 * var(--vw, 1vw)), 96px); overflow: hidden; }
.poster-media { position: absolute; inset: 0 0 0 28%; overflow: hidden; }
.poster-media img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.soon-poster > :not(.poster-media) { position: relative; }
.poster-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.poster-top .logo .logo-text { font-size: clamp(2rem, calc(3 * var(--vw, 1vw)), 2.8rem); line-height: 1; }
.poster-top .logo img { height: clamp(44px, calc(5 * var(--vw, 1vw)), 64px); width: auto; }
.poster-top .social { margin: 0; }
.poster-main { margin: auto 0; max-width: 40rem; padding: 48px 0; }
.poster-main .hero-title { margin-bottom: 18px; }
.poster-main .hero-text { margin-bottom: 26px; }
.poster-main .newsletter-form { max-width: 520px; }
.poster-usp { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; margin: 40px 0 0; padding: 0; }
.poster-usp li { display: grid; align-content: start; gap: 4px; padding: 2px 20px; border-left: 1px solid var(--c-line); }
.poster-usp li:first-child { border-left: 0; padding-left: 0; }
.poster-usp strong { font-size: .98rem; }
.poster-usp span { color: var(--c-muted); font-size: .86rem; line-height: 1.5; }
.poster-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: .86rem; color: var(--c-muted); }
.poster-links a { color: inherit; }

/* ---------- patička (pás přes celou šířku) ---------- */
.main:has(> .newsletter:last-child, > .home-sec:last-child > .newsletter) .newsletter { margin-bottom: 0; }
.main:has(> .newsletter:last-child, > .home-sec:last-child > .newsletter) + .footer { margin-top: 0; }
.footer { margin-top: var(--section); padding: clamp(48px, calc(7 * var(--vw, 1vw)), 96px) 0 28px; background: var(--c-surface); font-size: .94rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px 64px; align-items: end; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--c-line); }
.footer-top .logo .logo-text { font-size: clamp(2.1rem, calc(3.4 * var(--vw, 1vw)), 3rem); line-height: 1; }
.footer-top .logo img { max-height: 64px; width: auto; }
.footer-news-title { font-size: 1.2rem; margin: 0 0 6px; }
.footer-news p { margin: 0 0 16px; color: var(--c-muted); }
.footer-news .newsletter-form { max-width: 520px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer:has(.footer-top) .footer-grid { grid-template-columns: 1fr 1fr 1.2fr; } /* výchozí patička: značka je nahoře */
.footer-brand p { color: var(--c-muted); max-width: 26em; margin-top: 14px; }
.footer-title { font-size: .95rem; font-family: var(--font-body); font-weight: 600; margin-bottom: 14px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-links a, .footer-contact li > span { text-decoration: none; color: color-mix(in srgb, var(--c-text), var(--c-bg) min(18%, var(--c-soft, 18%))); } /* adresa (bez odkazu) stejně jako e-mail a telefon nad ní */
.footer-links a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact a, .footer-contact span { display: inline-flex; gap: 10px; align-items: center; max-width: 100%; overflow-wrap: anywhere; }   /* dlouhý e-mail v úzkém sloupci se zalomí */
.footer-contact .i { width: 18px; height: 18px; color: var(--c-muted); }
.social { display: flex; gap: 14px; margin-top: 20px; }
.social a { display: grid; place-items: center; color: var(--c-muted); transition: color .2s; }
.social a:hover { color: var(--c-text); }
.social .i { width: 20px; height: 20px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 56px; padding-top: 22px;
  /* linka jen přes šířku obsahu (bez okrajů .wrap) */
  background: linear-gradient(var(--c-line), var(--c-line)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px; color: var(--c-muted); font-size: .84rem; }

/* podpis platformy (shop_credit) – nenápadně, v barvě patičky */
.credit { color: var(--c-muted); font-size: .75rem; letter-spacing: .01em; } /* drobně a nenápadně (zadavatel 25. 10. 2026) – velikostí, ne průhledností (čitelnost ≥ 4,5 : 1) */
.credit a { color: inherit; font-weight: 500; text-decoration: none; letter-spacing: .03em; }
.credit a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* tajný odkaz na náhled neuložených úprav: nenápadný pruh dole, že jde o náhled (návštěvník bez přihlášení) */
.preview-note { position: fixed; z-index: 9990; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  width: max-content; max-width: calc(100% - 24px); padding: 10px 14px; border-radius: 6px; background: var(--c-bg);
  color: var(--c-text); font-size: 13.5px; line-height: 1.4; box-shadow: 0 10px 30px rgb(0 0 0 / .18), inset 0 0 0 1px color-mix(in srgb, var(--c-text) 14%, transparent); }
.preview-note p { margin: 0; }
.preview-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.credit-bar { padding-top: 16px; text-align: center; line-height: 1.4; } /* úplně dole pod spodní lištou patičky, na střed */
/* spodní řádek patičky (©, loga plateb) na telefonu vždy na střed – pod ním je podpis platformy na střed (zadavatel 2. 11. 2026:
   „pokud jsou takhle patičky na mobilu, zarovnávej je na střed“); platí pro všechny šablony */
@media (max-width: 860px) { .footer .footer-bottom { justify-content: center !important; justify-items: center !important; align-items: center; text-align: center !important; } }

/* ---------- animace (nastavení: Vzhled → Animace) ---------- */
/* Různé prvky se objevují různě (ne jeden stejný „fade-up“ na všem): text podle volby, obrázky se odkrývají clonou. */
html.js[data-anim="on"]:not([data-reveal="none"]) .rv {
  opacity: 0;
  transition: opacity calc(.9s * var(--anim-speed)) var(--ease), transform calc(1s * var(--anim-speed)) var(--ease), filter calc(1s * var(--anim-speed)) var(--ease), clip-path calc(1.1s * var(--anim-speed)) var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms * var(--anim-speed));
}
html.js[data-reveal="rise"] .rv { transform: translateY(var(--anim-dist)); }
html.js[data-reveal="zoom"] .rv { transform: scale(calc(2 - var(--anim-scale))); }
html.js[data-reveal="blur"] .rv { filter: blur(10px); }
/* fotky v úvodu a příběhu se odkrývají ořezem – ořez je na obrázku, ne na rámečku (jinak by ho pozorovatel
   posouvání nikdy „neviděl“), a jen u fotek (u textu by usekl háčky nad velkými písmeny) */
html.js[data-anim="on"]:not([data-reveal="none"]) :is(.hero-media, .story-media).rv { opacity: 1; transform: none; filter: none; }
html.js[data-anim="on"]:not([data-reveal="none"]) :is(.hero-media, .story-media).rv img { clip-path: inset(0 0 100% 0); transition: clip-path calc(1.1s * var(--anim-speed)) var(--ease); }
html.js[data-anim="on"] .rv.is-in { opacity: 1; transform: none; filter: none; }
/* čára v úvodu (šablony s „hero_rule“, prvek [data-rule-line]) se při objevení nakreslí zleva jako ostatní prvky webu
   (zadavatel 27. 10. 2026: „čára v hero nemá tu animaci jako ostatní prvky webu“); rule-rv = animuje se jen čára, ne text v prvku */
@property --hero-rule-len { syntax: '<length-percentage>'; inherits: true; initial-value: 100%; }
html.js[data-anim="on"]:not([data-reveal="none"]) [data-rule-line].rv {
  transition: opacity calc(.9s * var(--anim-speed)) var(--ease), transform calc(1s * var(--anim-speed)) var(--ease), filter calc(1s * var(--anim-speed)) var(--ease), --hero-rule-len calc(1.3s * var(--anim-speed)) var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms * var(--anim-speed)); }
html.js[data-anim="on"]:not([data-reveal="none"]) [data-rule-line].rv:not(.is-in) { --hero-rule-len: 0%; }
html.js[data-anim="on"]:not([data-reveal="none"]) .rule-rv.rv { opacity: 1; transform: none; filter: none; }
.is-editing [data-rule-line].rv { transition: none !important; }   /* v úpravách posuvník délky mění čáru hned */
html.js[data-anim="on"]:not([data-reveal="none"]) :is(.hero-media, .story-media).rv.is-in img { clip-path: inset(0 0 0 0); }

[data-hover="lift"] .pc.card-hover:hover .pc-media img, [data-hover="lift"] .cat-card:hover img { transform: scale(var(--anim-scale)); }
[data-hover="glow"] .pc.card-hover:hover .pc-media { outline: 1px solid var(--c-accent); outline-offset: 4px; }
[data-hover="tilt"] .card-hover { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .25s ease-out; }
[data-img="zoom"] .pc:hover .pc-img { transform: scale(var(--anim-scale)); }
[data-img="swap"] .pc:hover .pc-img2 { opacity: 1; }
[data-hero="drift"] :is(.hero-media, .hero-bg, .soon-media, .poster-media) img { animation: drift calc(24s * var(--anim-speed)) ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(var(--anim-scale)) translate(-1.2%, -.8%); } }
[data-anim="off"] *, [data-anim="off"] *::before, [data-anim="off"] *::after { animation: none !important; transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: calc(.35s * var(--anim-speed, 1)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js .rv, html.js .rv img { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ---------- mobil ---------- */
/* tři karty vedle sebe jen v užším okně počítače – telefon má dvě (nebo jednu podle volby), viz níž */
@media (min-width: 861px) and (max-width: 1080px) { :root:not([data-fluid]) .grid-products { --cols: 3; } }
@media (max-width: 1080px) {
  /* na počítači s poměrovou velikostí (data-fluid) neplatí – stránka má místo jako na 1440 px a nic neschovává */
  :root:not([data-fluid]) .footer-grid, :root:not([data-fluid]) .footer:has(.footer-top) .footer-grid { grid-template-columns: 1fr 1fr; }
  :root:not([data-fluid]) .footer-top { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 860px) {
  :root { --header-h: 62px; }
  .nav-toggle { display: inline-grid; margin-left: -10px; }
  .header-inner { gap: 8px; }
  .logo { margin-right: auto; }
  /* dlouhý název obchodu nesmí vytlačit košík mimo obrazovku (v žádné šabloně): logo se zmenší, název se zalomí */
  .header .header-inner > .logo { flex: 0 1 auto; min-width: 0; }
  .header .logo .logo-img { max-width: 100%; }
  .header .logo .logo-text { font-size: clamp(1rem, calc(5.4 * var(--vw, 1vw)), 1.35rem); line-height: 1.05; overflow-wrap: normal; } /* slovo se nikdy nedělí – delší slovo zmenší shop.js (logoFit) */
  .header-actions, .header .nav-toggle { flex: none; }
  /* zavřené menu i schované (visibility) – jinak by jeho odkazy dostávaly fokus klávesnicí a četla je čtečka (audit 30. 10. 2026) */
  .nav { position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 0; z-index: 30; flex-direction: column; gap: 0; padding: 12px var(--gutter) 40px; background: var(--c-bg); transform: translateX(-100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; overflow-y: auto; }
  .nav.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  .nav a { font-size: 1.4rem; font-family: var(--font-head); padding: 14px 0; border-bottom: 1px solid var(--c-line); }
  .nav a::after { display: none; }
  /* doplněk mobilního menu pod čarou: Doprava a platba, Kontakt, telefon */
  .header .nav .nav-extra { display: grid; margin-top: 18px; }
  .header .nav .nav-extra a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-muted); }
  .header .nav .nav-extra a:hover { color: var(--c-text); }
  .header .nav .nav-extra .i { width: 18px; height: 18px; flex: none; }
  .header-actions { margin-left: 0; }
  .hero-inner, .story-inner, .newsletter-inner, .pd, .cart-layout, .checkout, .contact-grid, .soon { grid-template-columns: minmax(0, 1fr); } /* minmax: dlouhé slovo nebo tlačítko nesmí sloupec roztáhnout za okraj (závěrečný audit 2.20) */
  .hero--split .hero-media { order: -1; } /* poměr stran fotky stejný jako na počítači – stejný výřez */
  /* na mobilu je fotka pod textem celá – i světlou fotku zjemníme rovnoměrně */
  /* tmavá fotka pod bílým textem: na úzké obrazovce je text přes celou fotku – ztmavit víc a rovnoměrně */
  /* telefon a tablet: fotka nahoře celá ve stejném poměru jako na počítači (stejný výřez), text pod ní. Tmavá fotka
     s bílým textem pokračuje tmavým pásem, do kterého fotka dole přechází; světlá fotka do barvy pozadí. */
  .hero.hero--full { display: block; aspect-ratio: auto; padding-bottom: calc(var(--section) * .45); overflow-x: clip;
    /* kde pod textem začíná přechod fotky (Text výš do fotky): 0 = text pod fotkou */
    --hm-b: min(82%, calc((1 - var(--hero-mlift, 0)) * 100%)); }
  .hero.hero--full .hero-bg { position: relative; inset: auto; left: 0; aspect-ratio: var(--hero-ratio); }
  .hero.hero--full:not(.hero--on-light) { background: rgb(16 16 18); }
  .hero--full:not(.hero--on-light) .hero-bg::after { background: linear-gradient(to bottom, rgb(16 16 18 / 0) 55%, rgb(16 16 18)); }
  .hero--full:not(.hero--on-light) .hero-inner { margin-top: -8px; position: relative; }
  /* tablet a mobil: světlá fotka (i do ztracena) nahoře a dolů do ztracena, text pod ní na čistém pozadí –
     tmavý text přes předměty na fotce by se s nimi pral */
  .hero.hero--full.hero--on-light { display: block; min-height: 0; padding-top: 0; }
  .hero--on-light .hero-bg { position: relative; inset: auto; left: 0; height: auto; aspect-ratio: var(--hero-ratio); }
  .hero--on-light .hero-bg::after, [data-scheme="dark"] .hero--on-light .hero-bg::after { display: none; }
  .hero--on-light .hero-bg img { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
  .hero--on-light .hero-inner { margin-top: -28px; position: relative; }
  .hero--on-light .hero-content, .hero--full .hero-content { max-width: none; }
  .hero--fade .hero-title { font-size: clamp(2.2rem, calc(10 * var(--vw, 1vw)), 3.4rem); }
  /* volba „Fotka na telefonu: za textem“ – světlá fotka (i do ztracena) přes celý úvod, pod textem mizí do barvy pozadí
     podle posuvníku (--hero-mfade: 0 = fotka celá, 1 = pod textem úplně zmizí) */
  [data-s-hero-mobile="behind"] .hero.hero--full { display: flex; align-items: flex-end; min-height: calc(78 * var(--svh, 1svh)); padding-top: 0; background: none; }
  [data-s-hero-mobile="behind"] .hero.hero--full .hero-bg { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; }
  [data-s-hero-mobile="behind"] .hero--full:not(.hero--on-light) .hero-bg::after { background: rgb(0 0 0 / min(.82, calc(var(--hero-overlay) + .22))); }
  [data-s-hero-mobile="behind"] .hero--full:not(.hero--on-light) .hero-inner { margin-top: 0; }
  [data-s-hero-mobile="behind"] .hero--on-light .hero-bg img { -webkit-mask-image: linear-gradient(to bottom, #000 12%, rgb(0 0 0 / calc(1 - var(--hero-mfade, .7))) 58%);
    mask-image: linear-gradient(to bottom, #000 12%, rgb(0 0 0 / calc(1 - var(--hero-mfade, .7))) 58%); }
  [data-s-hero-mobile="behind"] .hero--on-light .hero-inner { margin-top: 0; }
  /* Za textem + Obsah stránky výš přes fotku: fotka si drží svou výšku (78 % obrazovky), polohu i výřez, jen úvod se
     zkrátí – text a zbytek stránky vyjedou nahoru přes spodek fotky (zadavatel: „bez toho, aby se pohla ta fotka“) */
  [data-s-hero-mobile="behind"] .hero.hero--full { min-height: calc(calc(78 * var(--svh, 1svh)) * (1 - var(--hero-mlift, 0))); overflow: hidden; }
  [data-s-hero-mobile="behind"] .hero.hero--full .hero-bg { bottom: auto; height: calc(78 * var(--svh, 1svh)); }
  /* Fotka nad textem: posuvníky „Text výš do fotky“ (--hero-mlift, podíl výšky fotky) a „Fotka pod textem do ztracena“ */
  [data-s-hero-mobile="above"] .hero--full:not(.hero--on-light) .hero-bg::after {
    background: linear-gradient(to bottom, rgb(16 16 18 / 0) calc(var(--hm-b) - 30%), rgb(16 16 18 / var(--hero-mfade, .7)) var(--hm-b),
      rgb(16 16 18 / var(--hero-mfade, .7)) max(var(--hm-b), 84%), rgb(16 16 18)); }
  [data-s-hero-mobile="above"] .hero--on-light .hero-bg img {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--hm-b) - 30%), rgb(0 0 0 / calc(1 - var(--hero-mfade, .7))) var(--hm-b), rgb(0 0 0 / calc(1 - var(--hero-mfade, .7))) max(var(--hm-b), 84%), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(var(--hm-b) - 30%), rgb(0 0 0 / calc(1 - var(--hero-mfade, .7))) var(--hm-b), rgb(0 0 0 / calc(1 - var(--hero-mfade, .7))) max(var(--hm-b), 84%), transparent); }
  [data-s-hero-mobile="above"] .hero.hero--full :is(.hero-inner, .fm-hero-inner) { margin-top: calc(-28px - calc(100 * var(--vw, 1vw)) / var(--hero-ratio-n) * var(--hero-mlift, 0)); position: relative; }
  [data-s-hero-mobile="above"] .hero.hero--full:not(.hero--on-light) :is(.hero-inner, .fm-hero-inner) { margin-top: calc(-8px - calc(100 * var(--vw, 1vw)) / var(--hero-ratio-n) * var(--hero-mlift, 0)); }
  /* Podklad pod textem: pás přes celou šířku v barvě pozadí (u bílého textu tmavý), okraje do ztracena */
  .hero.hero--full :is(.hero-content, .fm-hero-inner) { position: relative; isolation: isolate; }
  .hero.hero--full :is(.hero-content, .fm-hero-inner)::before { content: ""; position: absolute; z-index: -1; top: -22px; bottom: -22px; left: calc(50% - calc(50 * var(--vw, 1vw))); right: calc(50% - calc(50 * var(--vw, 1vw)));
    background: rgb(var(--c-bg-rgb) / var(--hero-mback, 0));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    pointer-events: none; }
  .hero.hero--full:not(.hero--on-light) :is(.hero-content, .fm-hero-inner)::before { background: rgb(16 16 18 / var(--hero-mback, 0)); }
  /* barva nadpisu změněná na stránce má přednost před tónem fotky: světlý text = tmavý podklad, tmavý text = světlý */
  :root[data-hero-tx="light"] .hero.hero--full :is(.hero-content, .fm-hero-inner)::before { background: rgb(16 16 18 / var(--hero-mback, 0)); }
  :root[data-hero-tx="dark"] .hero.hero--full :is(.hero-content, .fm-hero-inner)::before { background: rgb(var(--c-bg-rgb) / var(--hero-mback, 0)); }
  /* „Fotka do ztracena“ je volba počítače (fotka se prolne do strany) – na telefonu fotka přejde dolů do barvy jako jindy,
     jinak končila ostrou hranou a pod ní zůstal pruh (zadavatel 29. 10. 2026: „co ta mezera?“) */
  .hero--fade .hero-bg img { -webkit-mask-image: none; mask-image: none; }
  :root .hero.hero--fade:not(.hero--on-light) .hero-bg::after { display: block; }
  /* Barva pod fotkou (fotka nad textem; zadavatel 28. 10. 2026: „barva pod ním asi nejde nikde změnit“): fotka přejde do zvolené
     barvy, písmo a tlačítka se jí přizpůsobí – barvy palety se berou z :root (na úvodu se pak přepíší, bez zacyklení) */
  [data-s-hero-m-bg="page"] { --hm-c: var(--c-bg); --hm-ink: var(--c-text); --hm-ink2: var(--c-muted); }
  [data-s-hero-m-bg="surface"] { --hm-c: var(--c-surface); --hm-ink: var(--c-text); --hm-ink2: var(--c-muted); }
  [data-s-hero-m-bg="dark"] { --hm-c: rgb(16 16 18); --hm-ink: #fff; --hm-ink2: rgb(255 255 255 / .82); }
  [data-s-hero-m-bg="accent"] { --hm-c: var(--c-accent); --hm-ink: var(--c-on-accent); --hm-ink2: color-mix(in srgb, var(--c-on-accent) 84%, transparent); }
  [data-s-hero-m-bg="accent2"] { --hm-c: var(--c-accent2); --hm-ink: var(--c-on-accent2); --hm-ink2: color-mix(in srgb, var(--c-on-accent2) 84%, transparent); }
  [data-s-hero-m-bg="accent"] { --hm-btn: var(--c-on-accent); --hm-on-btn: var(--c-accent); }
  [data-s-hero-m-bg="accent2"] { --hm-btn: var(--c-accent); --hm-on-btn: var(--c-on-accent); }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]) .hero.hero--full { background: var(--hm-c); color: var(--hm-ink); --c-text: var(--hm-ink); --c-muted: var(--hm-ink2); }
  [data-s-hero-mobile="above"]:is([data-s-hero-m-bg="accent"], [data-s-hero-m-bg="accent2"]) .hero.hero--full { --c-accent: var(--hm-btn); --c-on-accent: var(--hm-on-btn); --c-accent-ink: var(--hm-ink); }
  /* text stojí na zvolené barvě – na telefonu má přednost i před barvou nastavenou na stránce (ta platí pro text na fotce na počítači) */
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]) .hero.hero--full :is(.hero-title, .fm-hero-title, .link, [data-tx]:not(.btn)) { color: var(--hm-ink) !important; }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]) .hero.hero--full :is(.hero-text, .eyebrow) { color: var(--hm-ink2) !important; }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]) .hero.hero--full .link { text-decoration-color: currentColor; }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"])[data-s-hero-rule-c="auto"] .hero.hero--full { --hero-rule-c: color-mix(in srgb, var(--hm-ink) 55%, transparent); }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]) .hero.hero--full .btn { color: var(--hm-ink) !important; }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]):is([data-s-buttons="solid"], [data-s-buttons="stamp"]) .hero.hero--full .btn { color: var(--c-on-accent) !important; }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]) .hero--full:not(.hero--on-light) .hero-bg::after {
    background: linear-gradient(to bottom, transparent calc(var(--hm-b) - 30%), color-mix(in srgb, var(--hm-c) calc(var(--hero-mfade, .7) * 100%), transparent) var(--hm-b),
      color-mix(in srgb, var(--hm-c) calc(var(--hero-mfade, .7) * 100%), transparent) max(var(--hm-b), 84%), var(--hm-c)); }
  [data-s-hero-mobile="above"]:not([data-s-hero-m-bg="auto"]) .hero.hero--full :is(.hero-content, .fm-hero-inner)::before { background: color-mix(in srgb, var(--hm-c) calc(var(--hero-mback, 0) * 100%), transparent); }
  .pd-gallery, .summary { position: static; }
  .grid-products { --cols: 2; }
  .soon-media { min-height: calc(38 * var(--vh, 1vh)); }
  .poster-media { inset: 0 0 auto 0; height: calc(50 * var(--vh, 1vh)); }
  .poster-media img { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
  .soon-poster:not(.no-photo) .poster-top { margin-bottom: calc(30 * var(--vh, 1vh)); }
  .poster-main { padding: 0 0 32px; }
}
@media (max-width: 600px) {
  .poster-usp { grid-template-columns: 1fr; gap: 14px; }
  .poster-usp li { border-left: 0; padding: 0; }
  .usp-list { grid-template-columns: 1fr; } /* pod sebou – ve sloupcích bez odsazení by se texty dotýkaly */
  .usp-list > .usp-item + .usp-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .usp-item { padding: 18px 0; }
}
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 601px) and (max-width: 860px) {
  :where(:root[data-mfluid]) .poster-usp { grid-template-columns: 1fr; gap: 14px; }
  :where(:root[data-mfluid]) .poster-usp li { border-left: 0; padding: 0; }
  :where(:root[data-mfluid]) .usp-list { grid-template-columns: 1fr; } /* pod sebou – ve sloupcích bez odsazení by se texty dotýkaly */
  :where(:root[data-mfluid]) .usp-list > .usp-item + .usp-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  :where(:root[data-mfluid]) .usp-item { padding: 18px 0; }
}
@media (max-width: 560px) {
  .grid-products { gap: 34px 14px; }
  /* kategorie na telefonu ve dvou sloupcích – po jedné přes celou šířku byly fotky obří a stránka nekonečná (kontrola 19 vzhledů
     31. 10. 2026); počet zboží vždy pod názvem */
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .cat-body { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 72px 1fr auto; grid-template-areas: "img info rm" "img qty sum"; gap: 8px 14px; }
  .cart-img { grid-area: img; width: 72px; }
  .cart-info { grid-area: info; }
  .cart-line .qty { grid-area: qty; justify-self: start; }
  .cart-sum { grid-area: sum; }
  .cart-rm { grid-area: rm; justify-self: end; }
  /* patička na telefonu: Nabídka a Informace vedle sebe, Kontakt přes celou šířku (e-mail se nezalomí uprostřed); stejně silný
     selektor jako pravidlo do 1080 px, jinak by vyhrálo a sloupec Kontakt by byl jen v půlce šířky */
  :root:not([data-fluid]) .footer-grid, :root:not([data-fluid]) .footer:has(.footer-top) .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  :root:not([data-fluid]) .footer div:has(> .footer-contact) { grid-column: 1 / -1; }
  .section-head { flex-wrap: wrap; }
  .pd-actions .btn { min-width: 0; }
  .hero-title { max-width: none; }
}
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 561px) and (max-width: 860px) {
  :where(:root[data-mfluid]) .grid-products { gap: 34px 14px; }
  :where(:root[data-mfluid]) .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  :where(:root[data-mfluid]) .cat-body { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; }
  :where(:root[data-mfluid]) .form-grid { grid-template-columns: 1fr; }
  :where(:root[data-mfluid]) .cart-line { grid-template-columns: 72px 1fr auto; grid-template-areas: "img info rm" "img qty sum"; gap: 8px 14px; }
  :where(:root[data-mfluid]) .cart-img { grid-area: img; width: 72px; }
  :where(:root[data-mfluid]) .cart-info { grid-area: info; }
  :where(:root[data-mfluid]) .cart-line .qty { grid-area: qty; justify-self: start; }
  :where(:root[data-mfluid]) .cart-sum { grid-area: sum; }
  :where(:root[data-mfluid]) .cart-rm { grid-area: rm; justify-self: end; }
  :root[data-mfluid] .footer-grid, :root[data-mfluid] .footer:has(.footer-top) .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  :root[data-mfluid] .footer div:has(> .footer-contact) { grid-column: 1 / -1; }
  :where(:root[data-mfluid]) .section-head { flex-wrap: wrap; }
  :where(:root[data-mfluid]) .pd-actions .btn { min-width: 0; }
  :where(:root[data-mfluid]) .hero-title { max-width: none; }
}

/* našeptávač: produkt bez fotky nemá prázdný sloupec */
.suggest a:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
.suggest a > span:empty { display: none; }
/* úvod s fotkou přes celou šířku: obrysová a textová tlačítka bíle (jsou na fotce) */
:is([data-s-buttons="outline"], [data-s-buttons="text"], [data-s-buttons="sweep"]) .hero--full:not(.hero--on-light) .btn { color: #fff; border-color: #fff; }
[data-s-buttons="corners"] .hero--full:not(.hero--on-light) .btn { color: #fff; --cn-c: #fff; }
[data-s-buttons="stamp"] .hero--full:not(.hero--on-light) .btn { border-color: #fff; box-shadow: 4px 4px 0 #fff; }

/* slevový kód v košíku a pokladně: nenápadný odkaz, po rozbalení pole a tlačítko v řadě */
.coupon { margin-top: 18px; margin-bottom: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: .93rem; }   /* nikdy nalepené na tlačítko K pokladně */
.coupon summary { cursor: pointer; color: var(--c-muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-line-strong); width: max-content; }
.coupon summary::-webkit-details-marker { display: none; }
.coupon summary { list-style: none; }
.coupon-row { display: flex; gap: 10px; margin-top: 12px; }
.coupon input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-err { margin: 10px 0 0; color: var(--c-sale); font-size: .88rem; }
.coupon-on { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coupon-on span { display: inline-flex; align-items: center; gap: 8px; }
.coupon-on .i { width: 18px; height: 18px; }
.summary-discount { color: var(--c-sale); }

/* Reklamace a odstoupení: na stránce objednávky, formuláře, vyhledání objednávky na právních stránkách (linky, žádné boxy) */
.returns-box { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.returns-box h2 { font-size: 1.25rem; margin: 0 0 12px; }
.returns-list { list-style: none; margin: 0 0 14px; padding: 0; }
.returns-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; padding: 12px 0; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.returns-list li > span { flex: 1 1 260px; }
.returns-list small { display: block; margin-top: 6px; color: var(--c-muted); }
.returns-list em { font-style: normal; font-weight: 600; font-size: .92rem; }
.returns-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 6px 0 0; }
.returns-links a, .returns-actions a { color: var(--c-text); text-underline-offset: 4px; }
.returns-form .co-block { margin-bottom: 26px; }
.returns-item { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 0; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.returns-item label { display: grid; gap: 3px; flex: 1 1 220px; }
.returns-item small { color: var(--c-muted); font-size: .88rem; }
.returns-item select { width: auto; min-width: 140px; }
.returns-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.returns-lookup { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.returns-lookup h2 { font-size: 1.3rem; margin: 0 0 8px; }
.returns-lookup > p { color: var(--c-muted); max-width: 42em; margin: 0 0 18px; }
.returns-lookup-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 0 14px; align-items: end; }
.returns-lookup-form .field { margin-bottom: 0; }
@media (max-width: 720px) {
  .returns-lookup-form { grid-template-columns: 1fr; gap: 14px; }
  .returns-lookup-form .btn { justify-self: start; }
}
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 721px) and (max-width: 860px) {
  :where(:root[data-mfluid]) .returns-lookup-form { grid-template-columns: 1fr; gap: 14px; }
  :where(:root[data-mfluid]) .returns-lookup-form .btn { justify-self: start; }
}
.returns-form .returns-item:first-of-type { border-top: 1px solid var(--c-line); }
input[type=file] { max-width: 100%; font-size: .92rem; color: var(--c-muted); }
input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm, 4px); background: transparent; color: var(--c-text); font: inherit; font-weight: 600; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--c-text); }
.returns-blocked { font-size: 1.08rem; max-width: 40em; }

/* Hodnocení zboží: hvězdičky (SVG), výpis pod sebou oddělený linkami, výběr hvězdiček ve formuláři */
.stars { display: inline-flex; gap: 2px; vertical-align: -3px; }
.stars .i { width: 17px; height: 17px; stroke: none; color: var(--c-line-strong); }
.stars .i.is-on { color: var(--c-accent); }
.pd-rating { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 10px; color: var(--c-muted); font-size: .92rem; text-decoration: none; }
.pd-rating:hover span { text-decoration: underline; text-underline-offset: 3px; }
.reviews-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.reviews-sum strong { font-size: 1.3rem; }
.reviews { list-style: none; margin: 0; padding: 0; }
.reviews li { padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.reviews li:first-child { border-top: 1px solid var(--c-line); }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.review-head .muted { font-size: .88rem; }
.reviews p { margin: 10px 0 0; max-width: 46em; }
.review-answer { padding-left: 16px; border-left: 2px solid var(--c-line-strong); color: var(--c-muted); }
.review-item { border: 0; margin: 0; padding: 22px 0 6px; border-top: 1px solid var(--c-line); }
.review-item legend { padding: 0; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.2rem; float: left; width: 100%; margin-bottom: 10px; }
.review-item > :not(legend) { clear: both; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 0 0 14px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { cursor: pointer; color: var(--c-line-strong); padding: 2px; }
.star-input .i { width: 32px; height: 32px; stroke: none; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--c-accent); }
.star-input input:focus-visible + label { outline: 2px solid var(--c-text); outline-offset: 2px; border-radius: 2px; }
.review-name { max-width: 360px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--c-line); }

/* Hlídací pes a dotazy k zboží: rozbalovací řádek s linkou, žádné boxy */
.watch { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--c-line); }
.watch summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--c-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 4px; }
.watch summary::-webkit-details-marker { display: none; }
.pd-safety dl { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; font-size: .92rem; }
.pd-safety dt { color: var(--c-muted); }
.pd-safety dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pd-safety dl { grid-template-columns: 1fr; gap: 2px; } .pd-safety dd { margin-bottom: 8px; } }
@media (min-width: 561px) and (max-width: 860px) { :where(:root[data-mfluid]) .pd-safety dl { grid-template-columns: 1fr; gap: 2px; } :where(:root[data-mfluid]) .pd-safety dd { margin-bottom: 8px; } }
.watch summary .i { width: 18px; height: 18px; }
.watch-form { display: flex; gap: 10px; margin-top: 12px; }
.watch-form input[type=email] { flex: 1; min-width: 0; }
.watch-note { margin: 8px 0 0; color: var(--c-muted); font-size: .88rem; }
.watch + .ask { margin-top: 0; border-top: 0; padding-top: 10px; }
.ask-form { margin-top: 16px; }
.ask-more { margin: 16px 0 0; }
.ask-more a { color: var(--c-text); text-underline-offset: 4px; }
.reviews, .reviews-sum { max-width: 860px; }
.questions .question { margin: 0; }

/* Bannery na úvodu: fotka přes celou plochu, text dole na ztmavení; bez rámečků a stínů */
.banners-grid { display: grid; grid-template-columns: repeat(var(--banner-cols, 1), minmax(0, 1fr)); gap: clamp(12px, calc(2 * var(--vw, 1vw)), 24px); }
.banners--2 .banners-grid { --banner-cols: 2; }
.banners--3 .banners-grid { --banner-cols: 3; }
.banner { position: relative; display: flex; align-items: flex-end; min-height: clamp(220px, calc(26 * var(--vw, 1vw)), 360px); overflow: hidden; border-radius: var(--r-sm);
  background: var(--c-accent); color: var(--c-on-accent); text-decoration: none; isolation: isolate; }
/* štítek s textem na banneru posunutý / zvětšený na stránce (zadavatel 29. 10. 2026) – posun v tisícinách šířky banneru,
   velikost jako celek (text se zvětší s ním); počítač a telefon zvlášť */
.banner { container-type: inline-size; }
@media (min-width: 861px) {
  .banner[data-bb] .banner-body { translate: calc(var(--bb-x, 0) * .1cqw) calc(var(--bb-y, 0) * .1cqw); scale: calc(var(--bb-s, 100) / 100); transform-origin: 0 0; }
}
@media (max-width: 860px) {
  .banner[data-bbm] .banner-body { translate: calc(var(--bbm-x, 0) * .1cqw) calc(var(--bbm-y, 0) * .1cqw); scale: calc(var(--bbm-s, 100) / 100); transform-origin: 0 0; }
}
.banners--1 .banner { min-height: clamp(220px, calc(22 * var(--vw, 1vw)), 320px); }
.banner-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease, ease); }
.banner:has(.banner-img) { color: #fff; }
.banner:has(.banner-img)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / .08) 62%); }
/* telefon: text banneru zabere skoro celou výšku – clona sahá výš, ať bílý nadpis nesedí na světlém nebo rušném místě fotky (audit 1. 11. 2026) */
@media (max-width: 860px) { .banner:has(.banner-img)::after { background: linear-gradient(to top, rgb(0 0 0 / .68), rgb(0 0 0 / .44) 62%, rgb(0 0 0 / .26)); } }
.banner-body { position: relative; display: grid; gap: 8px; padding: clamp(18px, calc(2.4 * var(--vw, 1vw)), 32px); max-width: 34em; }
/* prázdné části banneru (jen pro přihlášeného správce kvůli úpravám) mimo úpravy nezabírají místo – stránka vypadá jako pro zákazníky */
html:not(.is-editing) .banner :is(.banner-text:empty, .banner-cta:empty, .banner-cta.is-nolink) { display: none; }
.banner-title { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(1.35rem, calc(2.2 * var(--vw, 1vw)), 2rem); line-height: 1.12; }
.banners--1 .banner-title { font-size: clamp(1.5rem, calc(3 * var(--vw, 1vw)), 2.6rem); }
.banner-text { font-size: .98rem; opacity: .92; }
.banner-cta { justify-self: start; margin-top: 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
[data-hover="lift"] a.banner:hover .banner-img { transform: scale(var(--anim-scale)); }
a.banner:hover .banner-cta { text-decoration-thickness: 2px; }
a.banner:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
@media (max-width: 820px) { .banners--3 .banners-grid { --banner-cols: 1; } .banners--3 .banner { min-height: 200px; } }
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 821px) and (max-width: 860px) { :where(:root[data-mfluid]) .banners--3 .banners-grid { --banner-cols: 1; } :where(:root[data-mfluid]) .banners--3 .banner { min-height: 200px; } }
@media (max-width: 620px) { .banners--2 .banners-grid { --banner-cols: 1; } .banner { min-height: 200px; } }
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 621px) and (max-width: 860px) { :where(:root[data-mfluid]) .banners--2 .banners-grid { --banner-cols: 1; } :where(:root[data-mfluid]) .banner { min-height: 200px; } }
@media (prefers-reduced-motion: reduce) { .banner-img { transition: none; } [data-hover] a.banner:hover .banner-img { transform: none; } }

/* ---------- Štítky bannerů (zadavatel 29. 10. 2026: „podobné štítky by měly jít vkládat k obrázkům napříč šablonami… výběr
   třeba z deseti druhů“) – druh vybraný u banneru (banner_labels(), data-label) přebije štítek šablony: text leží vždy na fotce
   (i v šablonách s textem pod fotkou nebo vedle ní) a štítek bere barvy jen z palety obchodu, takže sedí ke každé šabloně.
   Grafika štítku (podklad, tvar, dírka, provázek, páska…) je ve vlastní vrstvě .banner-shape – „Zrcadlit tvar“
   (data-lflip, od 1.57.0 zrcadlově místo otočení o 180° – zadavatel 29. 10. 2026) převrátí jen ji, text zůstane rovně (zadavatel: „samozřejmě jen tu jeho grafiku, ne text zrcadlově“).
   Natočení (--lb-rot0 druhu + --lb-rot z úprav) točí celý štítek kolem jeho středu; posun a velikost z úprav (translate,
   scale z levého horního rohu) se s ním skládají – proto transform s počátkem 0 0 a otočením kolem 50 % 50 %.
   .lb-sample je zmenšená ukázka v nabídce Štítek (úpravy na stránce). */
.banner-shape { display: none; }
:root .banners .banner[data-label] { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; grid-template-columns: none; text-align: start;
  min-height: clamp(220px, calc(26 * var(--vw, 1vw)), 360px); color: var(--c-text); }
:root .banners .banner[data-label] .banner-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; order: 0; }
:root .banners .banner[data-label]::after { display: none; }
:root .banners .banner:is([data-label], [data-lrot]) .banner-body { transform-origin: 0 0;
  transform: translate(50%, 50%) rotate(calc((var(--lb-rot0, 0) + var(--lb-rot, 0)) * 1deg)) translate(-50%, -50%); }
:is(:root .banners .banner[data-label] .banner-body, .lb-sample, .photo-sticker) { position: relative; z-index: 1; isolation: isolate; display: grid; gap: 4px; justify-items: start; align-content: start;
  width: auto; max-width: min(26em, calc(100% - 28px)); margin: clamp(14px, calc(2 * var(--vw, 1vw)), 26px); padding: 14px 20px 16px;
  background: none; color: var(--c-text); text-align: start; border: 0; border-radius: 0; outline: 0; box-shadow: none;
  clip-path: none; -webkit-mask: none; mask: none; rotate: none; }
:is(:root .banners .banner[data-label], .lb-sample, .photo-sticker) .banner-shape { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--c-bg); color: inherit; }
:is(:root .banners .banner[data-lflip], .lb-sample[data-lflip], .photo-sticker[data-lflip]) .banner-shape { scale: -1 1; }
:is(:root .banners .banner[data-label], .lb-sample, .photo-sticker) .banner-title { color: inherit; font-size: clamp(1.2rem, calc(1.9 * var(--vw, 1vw)), 1.65rem); line-height: 1.1; }
:is(:root .banners .banner[data-label], .lb-sample, .photo-sticker) .banner-text { color: inherit; opacity: .78; font-size: .95rem; }
:is(:root .banners .banner[data-label], .lb-sample, .photo-sticker) .banner-cta { justify-self: inherit; margin-top: 4px; padding: 0; border: 0; background: none; color: inherit;
  font-size: .92rem; letter-spacing: normal; text-transform: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Cenovka – cenovka s dírkou, špičkou doleva (zrcadlená doprava) */
:root .banners .banner[data-label="cenovka"] { align-items: flex-start; }
:is(:root .banners .banner[data-label="cenovka"] .banner-body, .lb-sample[data-lb="cenovka"], .photo-sticker[data-label="cenovka"]) { padding: 12px 22px 14px 38px; }
:is(:root .banners .banner[data-label="cenovka"][data-lflip] .banner-body, .lb-sample[data-lb="cenovka"][data-lflip], .photo-sticker[data-label="cenovka"][data-lflip]) { padding: 12px 38px 14px 22px; }
:is(:root .banners .banner[data-label="cenovka"], .lb-sample[data-lb="cenovka"], .photo-sticker[data-label="cenovka"]) .banner-shape { clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 20px 50%, transparent 4px, #000 4.5px); mask: radial-gradient(circle at 20px 50%, transparent 4px, #000 4.5px); }
:is(:root .banners .banner[data-label="cenovka"], .lb-sample[data-lb="cenovka"], .photo-sticker[data-label="cenovka"]) .banner-cta { color: var(--c-accent-ink); }
/* Visačka – papírová visačka na provázku, se zkosenými rohy a kroužkem  */
:root .banners .banner[data-label="visacka"] { align-items: flex-start; }
:is(:root .banners .banner[data-label="visacka"] .banner-body, .lb-sample[data-lb="visacka"], .photo-sticker[data-label="visacka"]) { --lb-rot0: -3; margin-top: clamp(44px, calc(5 * var(--vw, 1vw)), 64px); padding: 30px 22px 16px;
  justify-items: center; text-align: center; }
:is(:root .banners .banner[data-label="visacka"], .lb-sample[data-lb="visacka"], .photo-sticker[data-label="visacka"]) .banner-shape {
  background: linear-gradient(135deg, transparent 12px, var(--c-bg) 12.5px) left / 51% 100% no-repeat, linear-gradient(225deg, transparent 12px, var(--c-bg) 12.5px) right / 51% 100% no-repeat; }
:is(:root .banners .banner[data-label="visacka"], .lb-sample[data-lb="visacka"], .photo-sticker[data-label="visacka"]) .banner-shape::before { content: ""; position: absolute; top: 9px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c-text) 40%, transparent); background: color-mix(in srgb, var(--c-text) 14%, transparent); }
:is(:root .banners .banner[data-label="visacka"], .lb-sample[data-lb="visacka"], .photo-sticker[data-label="visacka"]) .banner-shape::after { content: ""; position: absolute; bottom: calc(100% - 14px); left: 50%; width: 1.5px; height: 90px;
  background: color-mix(in srgb, var(--c-bg) 80%, transparent); }
/* Páska – lepicí páska s roztřepenými konci, lehce nakřivo */
:is(:root .banners .banner[data-label="paska"] .banner-body, .lb-sample[data-lb="paska"], .photo-sticker[data-label="paska"]) { --lb-rot0: -2; padding: 12px 30px 14px; }
:is(:root .banners .banner[data-label="paska"], .lb-sample[data-lb="paska"], .photo-sticker[data-label="paska"]) .banner-shape { background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 12.5%, 100% 25%, calc(100% - 6px) 37.5%, 100% 50%, calc(100% - 6px) 62.5%, 100% 75%, calc(100% - 6px) 87.5%, 100% 100%,
    0 100%, 6px 87.5%, 0 75%, 6px 62.5%, 0 50%, 6px 37.5%, 0 25%, 6px 12.5%); }
/* Razítko – dvojitý rámeček v barvě značky, verzálky, natočené */
:root .banners .banner[data-label="razitko"] { align-items: center; justify-content: flex-end; }
:is(:root .banners .banner[data-label="razitko"] .banner-body, .lb-sample[data-lb="razitko"], .photo-sticker[data-label="razitko"]) { --lb-rot0: -5; padding: 18px 26px; justify-items: center; text-align: center; color: var(--c-accent-ink); }
:is(:root .banners .banner[data-label="razitko"], .lb-sample[data-lb="razitko"], .photo-sticker[data-label="razitko"]) .banner-shape { background: color-mix(in srgb, var(--c-bg) 90%, transparent); border: 4px double currentColor; }
:is(:root .banners .banner[data-label="razitko"], .lb-sample[data-lb="razitko"], .photo-sticker[data-label="razitko"]) :is(.banner-title, .banner-cta) { text-transform: uppercase; letter-spacing: .06em; }
:is(:root .banners .banner[data-label="razitko"], .lb-sample[data-lb="razitko"], .photo-sticker[data-label="razitko"]) .banner-text { opacity: .9; }
/* Stuha – stuha od levého okraje (zrcadlená od pravého) s vystřiženým koncem, v barvě značky */
:root .banners .banner[data-label="stuha"] { align-items: center; }
:is(:root .banners .banner[data-label="stuha"] .banner-body, .lb-sample[data-lb="stuha"], .photo-sticker[data-label="stuha"]) { margin-left: 0; padding: 12px 48px 14px clamp(18px, calc(2.4 * var(--vw, 1vw)), 32px);
  max-width: min(30em, calc(100% - 14px)); color: var(--c-on-accent); }
:is(:root .banners .banner[data-label="stuha"][data-lflip] .banner-body, .lb-sample[data-lb="stuha"][data-lflip], .photo-sticker[data-label="stuha"][data-lflip]) { margin-left: auto; margin-right: 0; padding: 12px clamp(18px, calc(2.4 * var(--vw, 1vw)), 32px) 14px 48px; }
:is(:root .banners .banner[data-label="stuha"], .lb-sample[data-lb="stuha"], .photo-sticker[data-label="stuha"]) .banner-shape { background: var(--c-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%); }
/* Účtenka – vytištěná účtenka shora , zubatý okraj, strojové písmo */
:root .banners .banner[data-label="uctenka"] { align-items: flex-start; justify-content: flex-end; }
:is(:root .banners .banner[data-label="uctenka"] .banner-body, .lb-sample[data-lb="uctenka"], .photo-sticker[data-label="uctenka"]) { margin-top: 0; padding: 18px 20px 26px; max-width: min(19em, calc(100% - 28px)); }
:is(:root .banners .banner[data-label="uctenka"], .lb-sample[data-lb="uctenka"], .photo-sticker[data-label="uctenka"]) .banner-shape {
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
:is(:root .banners .banner[data-label="uctenka"], .lb-sample[data-lb="uctenka"], .photo-sticker[data-label="uctenka"]) :is(.banner-title, .banner-text, .banner-cta) { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
:is(:root .banners .banner[data-label="uctenka"], .lb-sample[data-lb="uctenka"], .photo-sticker[data-label="uctenka"]) .banner-title { font-size: clamp(1.05rem, calc(1.5 * var(--vw, 1vw)), 1.3rem); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
:is(:root .banners .banner[data-label="uctenka"], .lb-sample[data-lb="uctenka"], .photo-sticker[data-label="uctenka"]) .banner-text { justify-self: stretch; margin-top: 4px; padding-top: 8px; border-top: 1px dashed currentColor; font-size: .85rem; }
/* Lístek – lístek v barvě značky přilepený páskou , lehce natočený */
:root .banners .banner[data-label="listek"] { align-items: flex-start; justify-content: flex-end; }
:is(:root .banners .banner[data-label="listek"] .banner-body, .lb-sample[data-lb="listek"], .photo-sticker[data-label="listek"]) { --lb-rot0: 2; margin-top: clamp(26px, calc(3 * var(--vw, 1vw)), 40px); padding: 26px 22px 20px;
  min-width: 11em; max-width: min(17em, calc(100% - 28px)); min-height: 8em; }
:is(:root .banners .banner[data-label="listek"], .lb-sample[data-lb="listek"], .photo-sticker[data-label="listek"]) .banner-shape { background: color-mix(in srgb, var(--c-accent) 24%, var(--c-bg)); }
:is(:root .banners .banner[data-label="listek"], .lb-sample[data-lb="listek"], .photo-sticker[data-label="listek"]) .banner-shape::before { content: ""; position: absolute; top: -10px; left: 50%; width: 76px; height: 22px; margin-left: -38px;
  rotate: -4deg; background: color-mix(in srgb, var(--c-bg) 58%, transparent); }
/* Samolepka – kulatá samolepka v barvě značky s čárkovaným okrajem */
:root .banners .banner[data-label="samolepka"] { align-items: flex-start; justify-content: flex-end; }
:is(:root .banners .banner[data-label="samolepka"] .banner-body, .lb-sample[data-lb="samolepka"], .photo-sticker[data-label="samolepka"]) { --lb-rot0: 8; width: 11.5em; max-width: none; aspect-ratio: 1; padding: 1.6em;
  align-content: center; justify-items: center; text-align: center; color: var(--c-on-accent); }
:is(:root .banners .banner[data-label="samolepka"], .lb-sample[data-lb="samolepka"], .photo-sticker[data-label="samolepka"]) .banner-shape { border-radius: 50%; background: var(--c-accent); }
:is(:root .banners .banner[data-label="samolepka"], .lb-sample[data-lb="samolepka"], .photo-sticker[data-label="samolepka"]) .banner-shape::before { content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--c-on-accent) 60%, transparent); }
:is(:root .banners .banner[data-label="samolepka"], .lb-sample[data-lb="samolepka"], .photo-sticker[data-label="samolepka"]) .banner-title { font-size: clamp(1.05rem, calc(1.6 * var(--vw, 1vw)), 1.35rem); }
:is(:root .banners .banner[data-label="samolepka"], .lb-sample[data-lb="samolepka"], .photo-sticker[data-label="samolepka"]) .banner-text { font-size: .82rem; }
/* Linka – text přímo na ztmavené fotce, linka v barvě značky vlevo (zrcadlená vpravo) */
:root .banners .banner[data-label="linka"]::after { display: block; content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgb(0 0 0 / .64), rgb(0 0 0 / .12) 72%); }
:is(:root .banners .banner[data-label="linka"] .banner-body, .lb-sample[data-lb="linka"], .photo-sticker[data-label="linka"]) { padding: 2px 0 4px 18px; color: #fff; }
:is(:root .banners .banner[data-label="linka"][data-lflip] .banner-body, .lb-sample[data-lb="linka"][data-lflip], .photo-sticker[data-label="linka"][data-lflip]) { padding: 2px 18px 4px 0; }
:is(:root .banners .banner[data-label="linka"], .lb-sample[data-lb="linka"], .photo-sticker[data-label="linka"]) .banner-shape { background: none; border-left: 3px solid var(--c-accent); }
/* Pruh – pruh přes celou šířku dole, odkaz vpravo */
:is(:root .banners .banner[data-label="pruh"] .banner-body, .lb-sample[data-lb="pruh"], .photo-sticker[data-label="pruh"]) { width: 100%; max-width: none; margin: 0; padding: 16px clamp(18px, calc(2.4 * var(--vw, 1vw)), 32px);
  grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; color: var(--c-bg); }
:is(:root .banners .banner[data-label="pruh"], .lb-sample[data-lb="pruh"], .photo-sticker[data-label="pruh"]) .banner-shape { background: color-mix(in srgb, var(--c-text) 86%, transparent); }
:is(:root .banners .banner[data-label="pruh"], .lb-sample[data-lb="pruh"], .photo-sticker[data-label="pruh"]) :is(.banner-title, .banner-text) { grid-column: 1; }
:is(:root .banners .banner[data-label="pruh"], .lb-sample[data-lb="pruh"], .photo-sticker[data-label="pruh"]) .banner-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
/* Štítky na fotkách (příběh, Fotka a text – photo_sticker()): stejné druhy jako u bannerů, umístění v rohu nebo uprostřed fotky,
   velikost S / M / L, natočení kolem středu */
:is(.story-media, .block-media-photo, .gallery-item):has(> .photo-sticker) { position: relative; }
.gallery-item > .photo-sticker { zoom: calc(var(--ps-z, 1) * .7); }   /* fotky galerie jsou menší – štítek o kus menší, ať je nepřeplácá */
@media (max-width: 860px) { .gallery-item > .photo-sticker { zoom: calc(var(--ps-z, 1) * .55); } }   /* telefon: galerie ve dvou sloupcích */
.gallery-item > .photo-sticker[data-label="samolepka"] { width: 8.5em !important; padding: 1.1em !important; }   /* kulatá samolepka by malou fotku zakryla (!important – :is() u druhů má vyšší váhu) */
.photo-sticker { position: absolute !important; z-index: 2; margin: 0 !important; max-width: min(18em, 76%) !important; transform-origin: 50% 50%;
  transform: rotate(calc((var(--lb-rot0, 0) + var(--lb-rot, 0)) * 1deg)); zoom: var(--ps-z, 1); }
.photo-sticker[data-size="s"] { --ps-z: .78; } .photo-sticker[data-size="l"] { --ps-z: 1.28; }
.photo-sticker[data-pos="tl"] { top: 6%; left: 6%; } .photo-sticker[data-pos="tr"] { top: 6%; right: 6%; }
.photo-sticker[data-pos="bl"] { bottom: 6%; left: 6%; } .photo-sticker[data-pos="br"] { bottom: 6%; right: 6%; }
.photo-sticker[data-pos="c"] { top: 50%; left: 50%; translate: -50% -50%; }
.photo-sticker[data-label="pruh"] { left: 0; right: 0; width: auto !important; max-width: none !important; translate: none; }
.photo-sticker[data-label="pruh"]:is([data-pos="tl"], [data-pos="tr"]) { top: 0; bottom: auto; }
.photo-sticker[data-label="pruh"]:is([data-pos="bl"], [data-pos="br"], [data-pos="c"]) { top: auto; bottom: 0; }
.photo-sticker[data-label="linka"] { text-shadow: 0 1px 8px rgb(0 0 0 / .55); }
.photo-sticker .banner-title { font-family: var(--font-head); font-weight: var(--head-weight, 600); }
html:not(.is-editing) .photo-sticker .banner-text:empty { display: none; }
/* telefon: menší okraje, štítek nikdy širší než banner */
@media (max-width: 620px) {
  :root .banners .banner[data-label] .banner-body { margin: 12px; max-width: calc(100% - 24px); }
  :root .banners .banner[data-label="visacka"] .banner-body { margin-top: 40px; }
  :root .banners .banner[data-label="stuha"] .banner-body { margin-left: 0; max-width: calc(100% - 12px); }
  :root .banners .banner[data-label="stuha"][data-lflip] .banner-body { margin-left: auto; margin-right: 0; }
  :root .banners .banner[data-label="uctenka"] .banner-body { margin-top: 0; }
  :root .banners .banner[data-label="samolepka"] .banner-body { width: 9.5em; padding: 1.3em; }
  :root .banners .banner[data-label="pruh"] .banner-body { margin: 0; max-width: none; }
}
@media (min-width: 621px) and (max-width: 860px) {
  :root[data-mfluid] .banners .banner[data-label] .banner-body { margin: 12px; max-width: calc(100% - 24px); }
  :root[data-mfluid] .banners .banner[data-label="visacka"] .banner-body { margin-top: 40px; }
  :root[data-mfluid] .banners .banner[data-label="stuha"] .banner-body { margin-left: 0; max-width: calc(100% - 12px); }
  :root[data-mfluid] .banners .banner[data-label="stuha"][data-lflip] .banner-body { margin-left: auto; margin-right: 0; }
  :root[data-mfluid] .banners .banner[data-label="uctenka"] .banner-body { margin-top: 0; }
  :root[data-mfluid] .banners .banner[data-label="samolepka"] .banner-body { width: 9.5em; padding: 1.3em; }
  :root[data-mfluid] .banners .banner[data-label="pruh"] .banner-body { margin: 0; max-width: none; }
}

/* Filtry výpisu: rozbalovací řádek nad výpisem, skupiny vedle sebe oddělené prostorem, žádné boxy */
.filters { margin: 0 0 18px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.filters summary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 600; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary .i { width: 18px; height: 18px; }
.filters-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: min(var(--r-sm), 4px); background: var(--c-accent); color: var(--c-on-accent); font-size: .78rem; }
.filters-form { padding: 6px 0 20px; }
.filters-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 32px; }
.filter { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: .92rem; }
.filter .check-line { margin: 0 0 8px; align-items: center; }
.filter .check-line input { margin-top: 0; }
.filter small { color: var(--c-muted); margin-left: 4px; }
.filter-price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-price input { min-width: 0; padding-left: 10px; padding-right: 10px; }
@media (max-width: 720px) {
  .filters-groups { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .filter-wide { grid-column: 1 / -1; }
}
/* telefon s poměrovou velikostí (data-mfluid): stránka je vždy navržená na 390 px, totéž v celém telefonním vzhledu */
@media (min-width: 721px) and (max-width: 860px) {
  :where(:root[data-mfluid]) .filters-groups { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  :where(:root[data-mfluid]) .filter-wide { grid-column: 1 / -1; }
}
.filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.filters-actions a { color: var(--c-text); text-underline-offset: 4px; }
.brand-logo { display: block; max-height: 64px; max-width: 220px; margin: 6px 0 10px; object-fit: contain; }

/* Sekce úvodní stránky: vlastní pozadí (paleta sekce v proměnných) a odsazení ze Studia */
.home-sec { display: flow-root; }
.home-sec[data-sec-bg] { background: var(--c-bg); color: var(--c-text); }
/* fotka za sekcí (Upravit sekci › Pozadí sekce › Fotka): ztmavená, ať je bílé písmo čitelné – síla ztmavení --sec-dim */
.home-sec[data-sec-bg="photo"] { background: linear-gradient(rgb(0 0 0 / var(--sec-dim, .5)), rgb(0 0 0 / var(--sec-dim, .5))), var(--sec-photo) center / cover no-repeat, var(--c-bg); }
/* nástroje úprav (lišta sekce, Přidat sekci, panel) jsou v sekci také – odsazení ani pozadí sekce se jich netýká */
.home-sec[data-sec-bg] > :not(.sec-tools, .sec-add, .sec-panel), .home-sec[data-sec-space] > :not(.sec-tools, .sec-add, .sec-panel) { margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: calc(var(--section) * var(--sec-k, .5)) !important; padding-bottom: calc(var(--section) * var(--sec-k, .5)) !important; }
/* velikost písma jen v jedné sekci úvodu (Nastavit u sekce) – násobek velikosti, kterou má šablona */
.home-sec[data-sec-title="s"] { --sec-ts: .85; }
.home-sec[data-sec-title="l"] { --sec-ts: 1.18; }
.home-sec[data-sec-title="xl"] { --sec-ts: 1.4; }
.home-sec[data-sec-text="s"] { --sec-xs: .9; }
.home-sec[data-sec-text="l"] { --sec-xs: 1.12; }
.home-sec[data-sec-text="xl"] { --sec-xs: 1.25; }
.home-sec[data-sec-title] :is(h2, h3, h4, .banner-title, [class*="usp"] strong) { zoom: calc(var(--sec-ts) * var(--tx-z, 1)); }
.home-sec[data-sec-text] :is(p, .banner-text, .banner-cta) { zoom: calc(var(--sec-xs) * var(--tx-z, 1)); }
.home-sec[data-sec-space="less"] { --sec-k: .22; }
.home-sec[data-sec-space="more"] { --sec-k: .8; }
.home-sec[data-sec-bg] > :not(.sec-tools, .sec-add, .sec-panel) { background: transparent !important; color: var(--c-text) !important; }
/* šablona může mít sekci obarvenou po svém (např. novinky naopak) – s vlastním pozadím sekce platí barvy sekce */
.home-sec[data-sec-bg] :is(.section-title, h2, h3) { color: var(--c-text) !important; }
.home-sec[data-sec-bg] :is(.newsletter-inner p, .section-head p) { color: var(--c-muted) !important; }
.home-sec[data-sec-bg] input:is([type=email], [type=text]) { background: transparent !important; color: var(--c-text) !important; border-color: var(--c-line-strong) !important; }
.home-sec[data-sec-bg] input::placeholder { color: var(--c-muted) !important; }
/* Studio: sekce otevřená v panelu se v náhledu krátce zvýrazní */
.home-sec.is-studio-focus { outline: 2px dashed var(--c-accent); outline-offset: -6px; transition: outline-color .6s; }

/* Můj účet (lib/account.php): části oddělené linkou, objednávky jako řádky – bez rámečků, jen proměnné šablony */
.account-page .account-block { padding: 26px 0; }
.account-page .account-block:first-child { padding-top: 0; }
.account-page .account-block + .account-block { border-top: 1px solid var(--c-line); }
.account-page .account-block h2 { font-size: 1.25rem; margin: 0 0 14px; }
.account-orders { list-style: none; margin: 0; padding: 0; }
.account-orders li { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 18px; align-items: center; padding: 14px 0; }
.account-orders li + li { border-top: 1px solid var(--c-line); }
.account-orders .ao-main { display: grid; gap: 3px; min-width: 0; }
.account-orders .ao-total { white-space: nowrap; }
.account-orders .ao-again { margin: 0; }
.account-login { display: grid; gap: 14px; max-width: 420px; }
.account-login .btn { justify-self: start; }
.account-erase summary { cursor: pointer; }
.account-erase form { display: grid; gap: 12px; justify-items: start; margin-top: 10px; }
.account-logout { margin-top: 10px; }
@media (max-width: 860px) {
  .account-orders li { grid-template-columns: 1fr auto; }
  .account-orders .ao-again { grid-column: 1 / -1; }
}

/* Loga plateb, karet a dopravců (lib/logos.php): čistá SVG v barvě textu šablony, decentně průhledná – sedí ke každé šabloně
   i tmavé paletě (zadavatel 27. 10. 2026: „uděláš je decentně šedé, aby se hodily do stránek“); nahraná loga jako maska */
/* šeď log jako v e-shopu AVITONA (zadavatel 29. 10. 2026: „použij i stejné loga… i tu stejnou logiku a šedou barvu“): v pokladně
   barva textu × .55 (vybraná volba .75), v patičce tlumená barva textu × .85 – stejně ve všech šablonách */
:root { --pay-logo-o: .55; }
.pay-logo { display: inline-block; flex: none; height: calc(1.05rem * var(--pl-k, 1)); width: auto; shape-rendering: geometricPrecision; }
.option-logos .pay-logo { height: calc(1.5rem * var(--pl-k, 1)); }   /* v pokladně větší – drobná loga byla „kostrbatá“ (zadavatel 27. 10. 2026) */
span.pay-logo { aspect-ratio: var(--pl-r, 3); background: currentColor; -webkit-mask: var(--pl) center / contain no-repeat; mask: var(--pl) center / contain no-repeat; }
.option:has(.option-logos) { grid-template-columns: auto 1fr auto auto; }
.option-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 16px; color: var(--c-text); opacity: var(--pay-logo-o); }
/* vždy jedna řada (zadavatel 27. 10. 2026 – Google Pay padal na další řádek); u vybrané volby stejně sytá – stejné logo
   má vypadat všude stejně (zadavatel 29. 10. 2026: „ta zásilkovna je každá jiná“) */
.pay-logos-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 36px; padding-top: 30px; color: var(--c-muted); opacity: .85; }
.pay-logos-bar .pay-logo { height: calc(1.4rem * var(--pl-k, 1)); }
.pay-logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; }
.pay-logos-sep { width: 1px; height: 1.6rem; background: currentColor; opacity: .5; }
[data-s-footer-logos="off"] .pay-logos-bar { display: none; }
[data-s-footer-logos="on"] .footer-pay[data-has-logos] { display: none; }   /* platby textem v patičce šablony jen bez pásu log */
/* pod tlačítkem K pokladně: karty a brána, jen s nastavenou platbou kartou (pay_trust_html) */
.pay-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin: 16px 0 0; opacity: var(--pay-logo-o); }
.pay-trust .pay-logo { height: calc(1.3rem * var(--pl-k, 1)); }
/* stránka Doprava a platba: loga u názvu dopravy a platby (shipping_table_html) */
.ship-logos { display: inline-flex; align-items: center; gap: 12px; margin-left: 12px; vertical-align: middle; opacity: var(--pay-logo-o); }
.ship-logos .pay-logo { height: calc(1.25rem * var(--pl-k, 1)); }
/* na počítači loga i ceny ve společných sloupcích celé skupiny (subgrid): loga začínají pod sebou, ceny končí pod sebou,
   i když je cena delší (přeškrtnutá) nebo dopravce logo nemá (zadavatel 29. 10. 2026: „hlídej tu sjednocenost log“) */
@media (min-width: 861px) {
  .co-block:has(.option-logos) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 16px; }
  .co-block:has(.option-logos) > * { grid-column: 1 / -1; }
  .co-block:has(.option-logos) > .option { grid-template-columns: subgrid; }
  .co-block:has(.option-logos) .option-logos { grid-column: 3; justify-content: center; }   /* na střed sloupce – klidnější než zubatý levý okraj */
  .co-block:has(.option-logos) .option-price { grid-column: 4; justify-self: end; }
}
@media (max-width: 860px) {
  .option:has(.option-logos) { grid-template-columns: auto 1fr auto; }
  .option-logos { grid-column: 2; grid-row: 2; justify-content: flex-start; margin-top: -6px; }
}
@media (max-width: 560px) {
  /* na telefonu platby a doprava každé na svém řádku, loga o kousek menší, ať se řádek nerozpadne na osamělá loga */
  .pay-logos-bar { flex-direction: column; gap: 16px; }
  .pay-logos-row { gap: 12px 18px; }
  .pay-logos-bar .pay-logo { height: calc(1.12rem * var(--pl-k, 1)); }
  .pay-logos-sep { display: none; }
}

/* ---------- rozložení, odsazení a části patičky (Celý obchod › Patička, v úpravách „Upravit patičku“; zadavatel 28. 10. 2026:
   „v editoru nejdou měnit parametry patičky? poskládání, velikosti…“) – .footer-cols = sloupce v každé šabloně (footer_cols_class()),
   data-fpart = části; !important, protože šablony mají vlastní mřížky. Počítač nad 860 px, telefon do 860 px. ---------- */
.footer-top:not(:has(.footer-news)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
  :root[data-s-footer-layout="even"] .footer-cols, :root[data-s-footer-layout="auto"] .footer-cols.is-fewer {
    grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  :root[data-s-footer-layout="center"] .footer-cols { display: flex !important; flex-wrap: wrap; justify-content: center; width: 100%; justify-self: stretch; gap: 36px clamp(28px, calc(4 * var(--vw, 1vw)), 64px) !important; }
  :root[data-s-footer-layout="center"] .footer-cols > * { flex: 0 1 200px; min-width: 0; }
}
@media (max-width: 860px) {
  :root[data-s-footer-layout-m="one"] .footer-cols, :root[data-s-footer-layout-m="center"] .footer-cols { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  :root[data-s-footer-layout-m="two"] .footer-cols { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 20px !important; }
  :root[data-s-footer-layout-m="two"] .footer-cols > :is(.footer-brand, .gm-foot-brand, .gm-foot-news, [data-fpart="contact"]) { grid-column: 1 / -1 !important; }
  :root:is([data-s-footer-layout-m="one"], [data-s-footer-layout-m="center"]) .footer-cols > * { grid-column: auto !important; }
}
/* na střed: všechno v patičce pod sebou na střed (počítač „center“, telefon „center“) */
@media (min-width: 861px) {
  :root[data-s-footer-layout="center"] .footer :is(.footer-top, .footer-cols, .footer-brand, .gm-foot-brand, .gm-foot-news, .lf-inner, [data-fpart]) { text-align: center; }
  :root[data-s-footer-layout="center"] .footer-top { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
  :root[data-s-footer-layout="center"] .footer :is(.social, .footer-bottom, .newsletter-form) { justify-content: center; }
  :root[data-s-footer-layout="center"] .footer :is(.footer-brand p, .footer-news .newsletter-form) { margin-inline: auto; }
  :root[data-s-footer-layout="center"] .footer-contact :is(a, span) { justify-content: center; }
}
@media (max-width: 860px) {
  :root[data-s-footer-layout-m="center"] .footer :is(.footer-top, .footer-cols, .footer-brand, .gm-foot-brand, .gm-foot-news, .lf-inner, [data-fpart]) { text-align: center; }
  :root[data-s-footer-layout-m="center"] .footer-top { justify-items: center; }
  :root[data-s-footer-layout-m="center"] .footer :is(.social, .footer-bottom, .newsletter-form) { justify-content: center; }
  :root[data-s-footer-layout-m="center"] .footer :is(.footer-brand p, .footer-news .newsletter-form) { margin-inline: auto; }
  :root[data-s-footer-layout-m="center"] .footer-contact :is(a, span) { justify-content: center; }
}
:root[data-s-footer-space="less"] .footer { padding-top: clamp(28px, calc(3 * var(--vw, 1vw)), 40px) !important; padding-bottom: 18px !important; }
:root[data-s-footer-space="more"] .footer { padding-top: clamp(80px, calc(10 * var(--vw, 1vw)), 140px) !important; padding-bottom: 44px !important; }

/* ---------- písmo menu a patičky zvlášť (Celý obchod › Písmo menu / Písmo v patičce; zadavatel 27. 10. 2026: „chtěl bych měnit
   ty malé texty… na webu máme jen plošně… to bych měl hero jako barák“) – zvětší se jen nejvyšší textové prvky (vnořené ne
   dvakrát), násobí se s velikostí z lišty textu (--tx-z) ---------- */
:root[data-s-nav-size="s"] { --nav-z: .88; } :root[data-s-nav-size="l"] { --nav-z: 1.14; } :root[data-s-nav-size="xl"] { --nav-z: 1.28; }
:root[data-s-footer-size="s"] { --foot-z: .88; } :root[data-s-footer-size="l"] { --foot-z: 1.16; } :root[data-s-footer-size="xl"] { --foot-z: 1.32; }
:root:not([data-s-nav-size="m"]) .header :is(.nav, nav) :is(a, button, summary):not(:is(a, button, summary) *) { zoom: calc(var(--nav-z, 1) * var(--tx-z, 1)); }
:root:not([data-s-footer-size="m"]) .footer :is(p, li, dt, dd, address, h2, h3, h4, .footer-title, .footer-text, .footer-bottom > span, .footer-bottom > small):not(:is(p, li, dt, dd, address, h2, h3, h4, .footer-title, .footer-text, .footer-bottom > span) *) {
  zoom: calc(var(--foot-z, 1) * var(--tx-z, 1)); }
/* kulaté a kapslové fotky (Noční, Přesná): roh je mimo tvar – štítek z rohu sedne doprostřed nahoru / dolů */
:is(.theme-luna, .theme-klinika) .story-media > .photo-sticker:is([data-pos="tl"], [data-pos="tr"]) { top: 9%; right: auto; left: 50%; translate: -50% 0; }
:is(.theme-luna, .theme-klinika) .story-media > .photo-sticker:is([data-pos="bl"], [data-pos="br"]) { bottom: 9%; right: auto; left: 50%; translate: -50% 0; }

/* okno v grafice obchodu místo alert() prohlížeče (okno.js) – barvy, písmo a tlačítka podle šablony */
.okno--shop { width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--c-line);
  border-radius: var(--r-sm, 4px); background: var(--c-bg); color: var(--c-text); box-shadow: 0 24px 60px rgb(0 0 0 / .3); font-family: var(--font-body, inherit); }
.okno--shop::backdrop { background: rgb(0 0 0 / .5); }
.okno--shop .okno-form { display: grid; gap: 12px; padding: 24px 24px 22px; }
.okno--shop .okno-title { margin: 0; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.15rem; line-height: 1.35; }
.okno--shop .okno-text { display: grid; gap: 8px; color: var(--c-muted); line-height: 1.55; }
.okno--shop .okno-text p { margin: 0; }
.okno--shop .okno-field { display: grid; gap: 6px; }
.okno--shop :is(.okno-title, .okno-text, .okno-field, .okno-actions .btn)[hidden] { display: none; }
.okno--shop.okno--wide { width: min(560px, calc(100vw - 32px)); }
.okno--shop .okno-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.okno--shop .btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-line-strong, var(--c-line)); }
@media (max-width: 860px) { .okno--shop .okno-actions { flex-direction: column-reverse; } .okno--shop .okno-actions .btn { width: 100%; justify-content: center; } }

/* ---------- společné drobnosti šablon (docs/sablony.md, kap. 4b) – nikdy hlavní vychytávka šablony, jen doplněk ----------
   Sklo (.glass), kulatý štítek s textem po obvodu (.badge-round, part('badge')), běžící řádek (.marquee, part('marquee'))
   a filmové zrno (.film-grain). Při omezení pohybu stojí, na telefonu menší; barvy jen z palety. */

/* sklo:začátek – panel se silně rozmazanou fotkou pod sebou (zadavatel 1. 11. 2026: „průhlednost půjde nastavit od 0 do 100
   a i blur půjde ladit… ladit jsou i oblosti rohů“). Upravit sekci › Sklo (section_glass(), home_section_attrs()) dává na obal
   sekce --glass-a (0–100, 0 = panel zmizí a zůstane text přímo na fotce), --glass-blur (px) a --glass-r (zaoblení; bez hodnoty
   zaoblení obchodu --r). Šablona dává jen třídu .glass a odstín: --glass-rgb (barva skla), --glass-scrim-rgb (přechod pod textem),
   --glass-edge-rgb (vlasová linka po obvodu). backdrop-filter je dovolený jen tady (scripts/kontrola.php). */
.glass {
  --glass-k: calc(var(--glass-a, 40) / 100);
  position: relative; isolation: isolate;
  border-radius: var(--glass-r, var(--r, 0px));
  background: rgb(var(--glass-rgb, var(--c-bg-rgb)) / calc(var(--glass-k) * .92));
  box-shadow: inset 0 0 0 1px rgb(var(--glass-edge-rgb, 255 255 255) / calc(var(--glass-k) * .5));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 20) * 1px * min(1, var(--glass-a, 40) / 10))) saturate(1.12);
  backdrop-filter: blur(calc(var(--glass-blur, 20) * 1px * min(1, var(--glass-a, 40) / 10))) saturate(1.12);
}
/* čitelnost i bez skla: pod textem jemný přechod, který sílí, jak sklo mizí (při průhlednosti 0 zůstane jen on) */
.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(farthest-side, rgb(var(--glass-scrim-rgb, var(--c-bg-rgb)) / calc(.18 + (1 - var(--glass-k)) * .5)), rgb(var(--glass-scrim-rgb, var(--c-bg-rgb)) / calc((1 - var(--glass-k)) * .12))); }
/* prohlížeč bez rozmazání pozadí: sklo plnější, ať je text čitelný i bez něj */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(var(--glass-rgb, var(--c-bg-rgb)) / calc(.3 + var(--glass-k) * .65)); }
}
/* sklo:konec */

/* kulatý štítek s textem po obvodu: SVG s textPath (délka textu přesně na obvod), pomalu se otáčí; text se píše na stránce
   (ed() na .badge-src – v úpravách je vidět uprostřed štítku), barvy --badge-bg / --badge-fg (šablona) */
.badge-round { --badge-d: clamp(92px, calc(9.8 * var(--vw, 1vw)), 148px); position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--badge-d); height: var(--badge-d); border-radius: 50%; background: var(--badge-bg, var(--c-accent2)); color: var(--badge-fg, var(--c-on-accent2));
  text-decoration: none; }
.badge-round svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.badge-round text { fill: currentColor; font-family: var(--font-head); font-weight: 500; }
.badge-round .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.badge-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root.is-editing .badge-src { position: relative; width: auto; height: auto; max-width: 74%; overflow: visible; clip-path: none; white-space: normal;
  font-size: .62rem; line-height: 1.25; text-align: center; z-index: 1; }
:root.is-editing .badge-round .badge-dot { display: none; }
html.js[data-anim="on"] .badge-round svg { animation: badge-spin calc(36s * var(--anim-speed, 1)) linear infinite; }
:root.is-editing .badge-round svg { animation-play-state: paused; }
@keyframes badge-spin { to { rotate: 360deg; } }
a.badge-round:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 4px; }

/* běžící řádek textu mezi vlasovými linkami: dvě stejné skupiny za sebou, posun o polovinu = plynule dokola; pod myší, při
   omezení pohybu a v úpravách stojí */
.marquee { overflow: hidden; border-block: 1px solid var(--c-line); font-family: var(--font-head); font-size: clamp(1.15rem, calc(1.9 * var(--vw, 1vw)), 1.9rem);
  line-height: 1; white-space: nowrap; }
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; flex: none; }
.marquee-group > span { padding: .55em 0; }
.marquee-group > span::after { content: ""; display: inline-block; width: .3em; height: .3em; margin: 0 .9em; border-radius: 50%; background: currentColor; opacity: .55; vertical-align: .18em; }
html.js[data-anim="on"] .marquee-track { animation: marquee-run calc(46s * var(--anim-speed, 1)) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-run { to { transform: translateX(-50%); } }
.marquee-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
:root.is-editing .marquee-src { position: static; width: auto; height: auto; clip-path: none; margin: 0; padding: .55em var(--gutter, 20px); text-align: center; white-space: normal; }
:root.is-editing .marquee-track { display: none; }
@media (prefers-reduced-motion: reduce) { .marquee-track, .badge-round svg { animation: none !important; } }

/* filmové zrno přes fotku nebo sekci (rodič s position: relative); jemně se chvěje, při omezení pohybu stojí */
.film-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--grain-o, .1); mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px; }
html.js[data-anim="on"] .film-grain { animation: grain-shift .9s steps(4) infinite; }
@keyframes grain-shift { 25% { background-position: -60px 40px; } 50% { background-position: 80px -30px; } 75% { background-position: -30px -70px; } }
@media (prefers-reduced-motion: reduce) { .film-grain { animation: none !important; } }

/* ---------- Rezervace (lib/booking.php, views/front/booking*.php, home/block-booking.php) – jen proměnné palety, všechny šablony ---------- */
.rz-wrap > * { max-width: 860px; }
.rz-step { padding: 26px 0; border-top: 1px solid var(--c-line); scroll-margin-top: 90px; }
.rz-step:first-of-type { border-top: 0; padding-top: 6px; }
.rz-h { margin: 0 0 14px; font-size: 1.15rem; line-height: 1.3; }
.rz-h .muted { font-weight: 400; margin-left: 6px; }
.rz-h-you { margin-top: 26px; }
.rz-svc { list-style: none; margin: 0; padding: 0; }
.rz-svc li + li { border-top: 1px solid var(--c-line); }
.rz-svc a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 52px; padding: 12px 14px; margin: 0 -14px;
  color: var(--c-text); text-decoration: none; border-radius: var(--r-sm, 4px); transition: background-color .15s; }
.rz-svc a:hover { background: rgba(var(--c-text-rgb), .05); }
.rz-svc a[aria-current] { background: rgba(var(--c-text-rgb), .07); border-left: 3px solid var(--c-accent); padding-left: 11px; border-radius: 0 var(--r-sm, 4px) var(--r-sm, 4px) 0; }
.rz-svc-name { display: grid; gap: 2px; font-weight: 600; }
.rz-svc-name small { font-weight: 400; color: var(--c-muted); font-size: .88rem; }
.rz-svc-meta { flex: none; color: var(--c-muted); white-space: nowrap; font-size: .94rem; }
.rz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-chips a, .rz-days > *, .rz-times span { display: inline-grid; place-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm, 4px); color: var(--c-text); text-decoration: none; background: transparent; transition: border-color .15s, background-color .15s, color .15s; }
.rz-chips a:hover, .rz-days a:hover, .rz-times label:hover span { border-color: var(--c-accent); }
.rz-chips a[aria-current], .rz-days a[aria-current], .rz-times input:checked + span { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.rz-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.rz-days > * { flex: none; min-width: 64px; padding: 8px 6px; line-height: 1.2; scroll-snap-align: start; }
.rz-days small { font-size: .78rem; color: inherit; opacity: .75; }
.rz-days .is-off { opacity: .38; cursor: default; }
.rz-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: .92rem; }
.rz-pager a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.rz-pager a:last-child { margin-left: auto; }
.rz-pager .i { width: 16px; height: 16px; }
@media (min-width: 861px) { .rz-days { flex-wrap: wrap; overflow: visible; } }
.rz-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; }
.rz-times label { position: relative; cursor: pointer; }
.rz-times input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rz-times span { display: grid; width: 100%; font-variant-numeric: tabular-nums; }
.rz-times input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.rz-consent { margin-top: 4px; }
.rz-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.rz-summary p { margin: 0; }
.rz-done { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 22px; }
.rz-done dt { color: var(--c-muted); }
.rz-done dd { margin: 0; font-weight: 600; }
.rz-cancel { max-width: 460px; }
.rz-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px clamp(28px, calc(4 * var(--vw, 1vw)), 64px); align-items: start; }
.rz-sec-head p { margin: 10px 0 20px; color: var(--c-muted); }
.rz-sec-list { list-style: none; margin: 0; padding: 0; }
.rz-sec-list li + li { border-top: 1px solid var(--c-line); }
.rz-sec-list a { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; color: var(--c-text); text-decoration: none; }
.rz-sec-list a:hover span:first-child { color: var(--c-accent-ink, var(--c-accent)); }
.rz-sec-list .muted { white-space: nowrap; }
@media (max-width: 860px) {
  .rz-sec { grid-template-columns: 1fr; }
  .rz-svc a { flex-wrap: wrap; gap: 4px 12px; }
  .rz-summary .btn { width: 100%; }
  .rz-done { grid-template-columns: 1fr; gap: 2px; }
  .rz-done dd { margin-bottom: 10px; }
}