/* =========================================================================
   GOLDIE — design systém
   Jediný, světlý režim „Tichý luxus“ (světlá galerie, klid, prostor). Tmavý
   motiv web nemá: <meta name="color-scheme" content="light"> a color-scheme níže
   brání prohlížeči web samovolně ztmavit (G-42).
   Písma: Fraunces (nadpisy), Hanken Grotesk (text a UI), IBM Plex Mono (štítky).
   ========================================================================= */

/* ---------- písma (G-10) ----------
   Hostujeme je sami ve /fonts/ (licence SIL OFL 1.1, texty licencí tamtéž) – žádný
   požadavek na Google Fonts. Soubory jsou beze změny převzaté z Google Fonts, jen
   podmnožiny latin a latin-ext (čeština potřebuje obě) a jen použité řezy: Fraunces
   v38 jako variabilní písmo (opsz 9–144, wght 400–600, bez kurzívy), Hanken Grotesk
   v12 (wght 300–700), IBM Plex Mono v20 (400 a 500). Verze je v názvu souboru, při
   aktualizaci písma vznikne nový název.
   font-display: swap → text je hned čitelný záložním písmem. Písma se záměrně
   NEpřednačítají (<link rel="preload">): v měření (mobil, 4× CPU, 1,6 Mb/s) Chrome
   s preloadem čekal s prvním vykreslením textu na písmo – FCP detailu produktu
   0,7 s → 1,95 s. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/fraunces-v38-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/fraunces-v38-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/fonts/hanken-grotesk-v12-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/fonts/hanken-grotesk-v12-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-v20-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-v20-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-mono-v20-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-mono-v20-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Záložní písma se srovnanými metrikami (G-32): než se webfont načte, kreslí se text
   systémovým písmem zvětšeným/zmenšeným na stejnou průměrnou šířku znaků (size-adjust)
   a se stejnou výškou řádku (ascent/descent), takže výměna písma neposouvá obsah.
   Hodnoty jsou spočítané z metrik písem (fontTools, vzorek českého textu): Fraunces
   proti Georgii, Hanken Grotesk proti Arialu, IBM Plex Mono proti Courier New.
   Tučný řez má vlastní pravidlo, aby prohlížeč tučné písmo nevyráběl uměle. */
@font-face { font-family: "Fraunces Fallback"; font-weight: 100 549; src: local("Georgia");
  size-adjust: 103.23%; ascent-override: 94.74%; descent-override: 24.70%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; font-weight: 550 900; src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 103.23%; ascent-override: 94.74%; descent-override: 24.70%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback"; font-weight: 100 549; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 99.69%; ascent-override: 100.31%; descent-override: 30.39%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 99.69%; ascent-override: 100.31%; descent-override: 30.39%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; font-weight: 100 549; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("Cousine");
  size-adjust: 100%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; font-weight: 550 900; src: local("Courier New Bold"), local("CourierNewPS-BoldMT"), local("Liberation Mono Bold"), local("Cousine Bold");
  size-adjust: 100%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%; }

/* ---------- tokeny ---------- */
:root {
  color-scheme: light;
  --bg:        #ece7dd;   /* teplá galerie off-white */
  --bg-2:      #f5f1e8;   /* povrch / karty */
  --bg-3:      #e3ddd0;   /* jemné vyplnění */
  --ink:       #201c16;   /* text */
  --ink-soft:  #4a443a;
  /* Kontrast podle WCAG 2.1 AA (text ≥ 4,5 : 1 na --bg, --bg-2 i --bg-3,
     okraje ovládacích prvků ≥ 3 : 1). Při změně tokenů poměry znovu přepočítat. */
  --muted:     #635b4e;   /* 5,4 : 1 na --bg, 4,9 : 1 na --bg-3 */
  --faint:     #675f50;   /* 5,1 : 1 na --bg */
  --line:      #d8d0c1;   /* dekorativní linky a rámečky karet */
  --line-soft: #e6e0d3;
  --line-strong: #887f6f; /* okraj vstupních polí: 3,2 : 1 na --bg, 3,5 : 1 na --bg-2 */

  --brass:     #a06f2c;   /* akcent — mosaz/přezka (plochy, linky, NE text) */
  --brass-ink: #7e561d;   /* akcent pro text a plná tlačítka: 4,8 : 1 na --bg-3, s --on-brass 6,1 : 1 */
  --brass-deep:#6a4718;   /* hover plného tlačítka */
  --leather:   #7a4a2c;   /* kožená hněď */
  --on-brass:  #fbf7ee;   /* text na mosazi */
  --foto:      #ffffff;   /* pozadí dlaždic s fotkou výrobku (fotky jsou výřezy na bílém) */

  /* Tmavý pás usně (stránka Zakázková výroba a pozvánka na úvodu – oddíl „zakázková výroba“ na konci souboru). Kontrast
     podle WCAG 2.1 AA proti --tma: --tma-ink 15,1 : 1, --tma-soft 10,9 : 1, --tma-muted 7,7 : 1 (6,9 : 1 na
     světlejší záplatě), --tma-brass 10 : 1; plné tlačítko --ink na --tma-brass 9,6 : 1. */
  --tma:        #21160e;   /* tmavá useň (pozadí pásu) */
  --tma-ink:    #f4ecdf;   /* nadpisy */
  --tma-soft:   #d6c9b5;   /* běžný text */
  --tma-muted:  #b9a990;   /* popisky */
  --tma-brass:  #e3bd80;   /* mosaz na tmavé: text, linky, prošití a plné tlačítko */
  --tma-brass-hover: #f0d3a3;
  --tma-line:   rgba(227,189,128,.20);   /* dělicí linky */
  --tma-zaplata: #2f1e13;  /* světlejší useň (podklad fotky) = --tma s 16 % --leather */

  --ok:   #41693a;        /* 5,2 : 1 na --bg */
  --warn: #835820;        /* chyby a „brzy“: 5,0 : 1 na --bg, 4,6 : 1 na --bg-3 */

  --shadow-sm: 0 1px 2px rgba(40,30,16,.05), 0 4px 12px -6px rgba(40,30,16,.14);
  --shadow-md: 0 2px 4px rgba(40,30,16,.06), 0 22px 44px -24px rgba(40,30,16,.28);
  --shadow-lg: 0 4px 8px rgba(40,30,16,.08), 0 40px 70px -30px rgba(40,30,16,.40);

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --maxw: 1220px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;

  --ff-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --ff-text: "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-anchor: none; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-text);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }

/* ---------- typografie ---------- */
.display, h1, h2, h3 { font-family: var(--ff-display); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(34px, 6vw, 66px); }
h2 { font-size: clamp(26px, 4vw, 42px); }
h3, .h3 { font-size: clamp(20px, 2.6vw, 27px); }
p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-ink); font-weight: 500;
}
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); line-height: 1.55; }
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 780px; }
.section { padding-block: clamp(48px, 8vw, 104px); }
.section--tight { padding-block: clamp(32px, 5vw, 60px); }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* Výpisy opasků: na telefonu VŽDY 2 vedle sebe, ať nezaberou celou obrazovku.
   Cílíme jen mřížky se skutečnými produkty (karta má obrázek .product-card__media),
   takže textové/info karty (blog, materiály) zůstávají 1 na řádek. Prohlížeče bez
   :has() spadnou na výchozí 1 sloupec (stejné jako dnes) — nenápadná degradace. */
@media (max-width: 560px) {
  .grid:has(> .product-card .product-card__media) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid:has(> .product-card .product-card__media) .price { font-size: 15px; }
}
/* zhutnění karty pro 2-up je u základních pravidel karty (níž, za .product-card__foot) – tady by ho přebila */

.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  border: 1px solid transparent; transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brass-ink); color: var(--on-brass); }
.btn--primary:hover { background: var(--brass-deep); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { opacity: .88; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-ink); }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.link-arrow { display: inline-flex; align-items: center; gap: .5em; color: var(--brass-ink); font-family: var(--ff-mono); font-size: 13px; letter-spacing: .06em; }
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translate(3px, -1px); }

/* ---------- badge / pill ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line);
  color: var(--muted); background: var(--bg-2);
}
.badge--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.badge--soon { color: var(--warn); }
.badge--ok::before, .badge--soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Štítky dostupnosti výrobku ve třech skupinách (audit logiky 18. 10. 2026, O31; mapování v G.dostupnost
   ve web/js/app.js a dostupnostProduktu v src/seo.js): badge--ok = lze koupit hned (zelená, plná tečka),
   badge--limit = lze koupit s omezením nebo delší lhůtou – poslední kus, na objednávku (hnědooranžová,
   plná tečka), badge--out = koupit nejde – vyprodáno, připravujeme (šedá, prázdný kroužek). Skupinu nese
   i tvar tečky, nejen barva. */
.badge--limit { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.badge--out { color: var(--muted); }
.badge--limit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--out::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid currentColor; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
/* Hlavičku vkládá app.js až po načtení skriptů. Do té doby drží prázdný
   <header id="site-header"> její výšku (řádek + 1px linka), aby obsah pod ní
   neposkočil o 69 px (CLS, G-32). */
#site-header:empty { display: block; height: calc(var(--header-h) + 1px); }
.site-header__row { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.logo { font-family: var(--ff-display); font-weight: 600; font-size: 25px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
.logo .dot { color: var(--brass); }
/* Pojistka pro dlouhou lištu: lištu sbalí do menu až app.js (prizpusobListu), server ale vkládá plnou
   lištu už do HTML. Než se skript načte, logo, tlačítko menu a ikony vpravo (hlavně KOŠÍK) se nezmenší
   a nabídka se zúží a přebytek ořízne – ikony z obrazovky nevypadnou. Odsazení 6 px drží místo
   pro obrys fokusu odkazů, který by ořez jinak usekl. */
.logo, .nav-toggle, .header-actions { flex-shrink: 0; }
.main-nav { display: flex; gap: 4px; margin-inline: auto; min-width: 0; overflow: hidden; padding: 6px; }
/* nowrap: víceslovná kategorie („Obaly na doklady“) se v liště nezalomí; když se položky
   nevejdou, lišta se sbalí do menu (.site-header--sbalene níže) */
.main-nav a {
  padding: 9px 14px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: 14.5px; color: var(--ink-soft); transition: color .18s ease, background .18s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); background: var(--bg-3); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; color: var(--ink); transition: background .18s ease;
}
.icon-btn:hover { background: var(--bg-3); }
.cart-link { position: relative; }
.cart-count {
  position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--brass-ink); color: var(--on-brass);
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600; display: grid; place-items: center;
  transform: scale(0); transition: transform .2s cubic-bezier(.2,1.3,.5,1);
}
.cart-count.show { transform: scale(1); }
.nav-toggle { display: none; }
/* odkazy, které patří jen do mobilního menu (Hledat); v liště je ekvivalent jako ikona */
.nav-extra { display: none; align-items: center; gap: 12px; color: var(--ink-soft); }
.nav-extra svg { flex: 0 0 auto; }
/* Otevřené menu je nejvýš do spodního okraje okna a posouvá se samo: s každou kategorií přibude řádek
   a na telefonu (hlavně na šířku) by konec menu jinak zůstal mimo obrazovku. */
@media (max-width: 860px) {
  .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 18px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 8px; border-radius: 0; border-bottom: 1px solid var(--line-soft); white-space: normal; }
  .nav-toggle { display: inline-grid; }
  .header-actions { margin-left: auto; }
}
/* Sbalená lišta i na širším displeji: když se položky (kategorie z administrace) nevejdou do řádku,
   přidá app.js hlavičce třídu site-header--sbalene (prizpusobListu, změřená šířka) a nabídka
   je v tlačítku Menu – stejná pravidla jako mobilní menu výše. */
.site-header--sbalene .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
  flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 18px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.site-header--sbalene .main-nav.open { display: flex; }
.site-header--sbalene .main-nav a { padding: 13px 8px; border-radius: 0; border-bottom: 1px solid var(--line-soft); white-space: normal; }
.site-header--sbalene .nav-toggle { display: inline-grid; }
.site-header--sbalene .header-actions { margin-left: auto; }
/* Úzké displeje (telefon): zmenšit rozestupy a přesunout hledání do menu,
   aby v liště vždy zbylo místo na oblíbené, motiv a hlavně KOŠÍK (blocker). */
@media (max-width: 600px) {
  .site-header__row { gap: 10px; }
  .logo { font-size: 22px; }
  .header-actions { gap: 2px; }
  .header-actions .icon-btn { width: 40px; height: 40px; }
  .nav-toggle { width: 40px; height: 40px; }
  .header-actions .hide-narrow { display: none; }
  .main-nav .nav-extra { display: flex; }
}
/* Nabídka Obchod (rozbalovací, rozhodnutí R3 A, web/js/app.js initObchod): tlačítko vypadá jako odkaz lišty.
   Na počítači (nad 860 px, lišta nesbalená) je panel pod lištou přes celou šířku obsahu stránky (řádek lišty
   je uvnitř .wrap) a kategorie jsou v mřížce – s přibývajícími kategoriemi přibývají řádky panelu, lišta zůstane
   stejná. Panel je umístěný vůči řádku lišty, takže ho neořízne overflow nabídky (pojistka výše). Na telefonu
   a ve sbalené liště je to rozbalovací skupina v menu s odsazenými odkazy. Zavřený panel má atribut hidden. */
.nav-obchod { display: flex; }
.nav-obchod__tlacitko {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: var(--r-pill);
  background: none; font: inherit; font-size: 14.5px; white-space: nowrap; color: var(--ink-soft); cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.nav-obchod__tlacitko:hover, .nav-obchod__tlacitko[aria-expanded="true"], .nav-obchod--aktivni .nav-obchod__tlacitko { color: var(--ink); background: var(--bg-3); }
.nav-obchod__sipka { flex: 0 0 auto; transition: transform .18s ease; }
.nav-obchod__tlacitko[aria-expanded="true"] .nav-obchod__sipka { transform: rotate(180deg); }
.nav-obchod__panel[hidden] { display: none !important; }
@media (min-width: 861px) {
  .site-header__row { position: relative; }
  .site-header:not(.site-header--sbalene) .nav-obchod__panel {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 2;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; padding: 14px;
    background: var(--bg); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-md);
  }
  .site-header:not(.site-header--sbalene) .nav-obchod__panel a { padding: 12px 16px; border-radius: var(--r-md); white-space: normal; }
}
@media (max-width: 860px) {
  .nav-obchod { flex-direction: column; }
  .nav-obchod__tlacitko { width: 100%; justify-content: space-between; padding: 13px 8px; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .nav-obchod__panel { display: flex; flex-direction: column; }
  .nav-obchod__panel a { padding-left: 24px; }
}
.site-header--sbalene .nav-obchod { flex-direction: column; }
.site-header--sbalene .nav-obchod__tlacitko { width: 100%; justify-content: space-between; padding: 13px 8px; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
.site-header--sbalene .nav-obchod__panel { display: flex; flex-direction: column; }
.site-header--sbalene .nav-obchod__panel a { padding-left: 24px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 0; position: relative; z-index: 1; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 56px 40px; }
@media (max-width: 780px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4, .site-footer .site-footer__title { font-family: var(--ff-mono); font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.site-footer a { color: var(--ink-soft); display: block; padding: 5px 0; font-size: 14.5px; }
.site-footer a:hover { color: var(--brass-ink); }
.site-footer__bar { border-top: 1px solid var(--line-soft); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); font-family: var(--ff-mono); }
/* loga plateb (podmínka Comgate pro platby kartou, app.js platbyHTML): oficiální SVG beze změny, pořadí
   Comgate → Visa → Mastercard. Výšky podle vzorové lišty Comgate – Visa a Mastercard mají v souboru vlastní
   ochrannou zónu, proto jsou jejich obrázky vyšší než logo Comgate. Na úzkém displeji se řada zalomí. */
.site-footer__platby { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 0 24px; }
.site-footer__platby img { display: block; width: auto; max-width: none; flex: none; }
.site-footer a.site-footer__comgate { display: block; flex: none; padding: 0; }
.site-footer__comgate img { height: 24px; }
.site-footer__platby .site-footer__visa { height: 50px; }
.site-footer__platby .site-footer__mastercard { height: 32px; }
/* kategorie, které se teprve chystají — čitelně odlišené štítkem „brzy" */
/* display:flex (ne inline-flex) → každý odkaz je vlastní řádek jako ostatní odkazy
   v patičce; jinak se na mobilu tři „brzy" odkazy slévají do jednoho řádku vedle sebe.
   width:fit-content drží klikací plochu u textu, flex-wrap chrání i velmi úzké displeje. */
.site-footer a.foot-soon { color: var(--muted); display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-footer a.foot-soon:hover { color: var(--brass-ink); }
.foot-soon em { font-style: normal; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: var(--r-pill); padding: 1px 7px; }

/* ---------- produktová karta ---------- */
.product-card { position: relative; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease; }
/* Produktová karta je <article>: odkazem je jen název, ::after roztáhne jeho klikací
   plochu na celou kartu. Akce karty (.card-actions, z-index 2) leží nad ním. */
.product-card__link { color: inherit; }
.product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__link:focus-visible { outline: none; }
.product-card__link:focus-visible::after { outline: 2px solid var(--brass-ink); outline-offset: -3px; border-radius: var(--r-lg); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); }
.product-card__media { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__badge { position: absolute; top: 12px; left: 12px; }
.product-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__name { font-family: var(--ff-display); font-size: 21px; line-height: 1.1; }
.product-card__meta { font-size: 13.5px; color: var(--muted); }
/* Tečky variant pod názvem (SLOUCENI-VARIANT-SPEC §3): tlačítka nad roztaženým odkazem (z-index 2 jako .card-actions),
   dotyková plocha 24 × 24 px (WCAG 2.5.8), vzorek 16 px v tónu varianty, s druhým tónem (prošití) rozpůlený úhlopříčkou.
   Záporný okraj zarovná vzorek s textem; na úzké kartě (2 vedle sebe na telefonu) zasáhne řada do vnitřního okraje
   karty jen o tolik, aby se šest teček (6 × 24 px) vešlo do jednoho řádku – nejvýš o 14 px, pak se řada zalomí. */
.product-card__tecky { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center;
  margin: 2px -4px 0; margin-inline: max(-14px, min(-4px, calc((100% - 144px) / 2))); }
.card-tecka { width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; }
.card-tecka__ton { width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ton, var(--bg-3)) 50%, var(--ton2, var(--ton, var(--bg-3))) 50%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); transition: box-shadow .15s ease; }
.card-tecka:hover .card-tecka__ton { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 0 2px var(--bg-2), 0 0 0 3px var(--line-strong); }
/* zapnutá tečka: prstenec v --brass-ink (kontrast 3 : 1 i na --bg-2) */
.card-tecka[aria-pressed="true"] .card-tecka__ton { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 0 2px var(--bg-2), 0 0 0 3.5px var(--brass-ink); }
.card-tecka:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: -1px; border-radius: 50%; }
.product-card__tecky-vic { margin-left: 4px; font-family: var(--ff-mono); font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .card-tecka__ton { transition: none; } }
.product-card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* zhutnění produktové karty pro 2 vedle sebe na telefonu (mřížka výš u .grid:has) – až za základními pravidly karty,
   jinak je stejně silné selektory níž v souboru přebijí */
@media (max-width: 560px) {
  .product-card__body { padding: 13px 13px 15px; gap: 4px; }
  .product-card__name { font-size: 16.5px; }
  .product-card__meta { font-size: 12px; }
  .product-card__foot { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 10px; }
  /* štítek dostupnosti na úzké kartě: vlevo DOLE na fotce – nahoře vpravo jsou srdíčko a rychlý náhled (sloupec
     12 + 38 + 8 + 38 px), vedle nich se „NA OBJEDNÁVKU“ čitelným písmem nevejde. Dole má štítek celou šířku fotky:
     12 px s malým proložením je na jednom řádku na 360 i 320 px; max-width = pojistka pro delší text z administrace */
  .product-card__badge {
    top: auto; bottom: 8px; left: 8px; max-width: calc(100% - 16px);
    padding: 3px 6px; gap: 4px; font-size: 12px; letter-spacing: .02em;
  }
  .product-card__badge::before { width: 5px; height: 5px; }
  /* výrobek bez fotky: nápis zástupné plochy („foto brzy“) nad štítkem, ne přes něj */
  .product-card__media .ph__label { bottom: 42px; }
}
.price { font-family: var(--ff-mono); font-size: 17px; font-weight: 500; letter-spacing: .01em; }

/* ---------- placeholder produktu (než přijdou fotky) ---------- */
.ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--ton, #7a4a2c) 42%, #000 0%) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--ton, #7a4a2c) 78%, #fff 22%), color-mix(in srgb, var(--ton, #7a4a2c) 92%, #000 8%) 55%, color-mix(in srgb, var(--ton, #7a4a2c) 70%, #000 30%));
  display: grid; place-items: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(115deg, #000 0 1px, transparent 1px 4px);
}
/* Značka uprostřed: ražená pečeť „G“ jako na kůži. Neutrální pro celý sortiment – dřív tu byl pásek
   se sponou a výrobek bez fotky vypadal jako opasek (audit logiky 18. 10. 2026, O14). */
.ph__znak { position: relative; z-index: 1; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.28);
  font-family: var(--ff-display); font-size: 30px; line-height: 1; color: rgba(255,255,255,.78); }
.ph__label { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); z-index: 1; }

/* ---------- formuláře ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.input, .select, textarea.input {
  width: 100%; padding: 12px 14px; background: var(--bg-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease;
}
/* fokus: výrazný 2px prstenec v barvě akcentu (ne jen změna barvy 1px okraje) */
.input:focus, .select:focus { border-color: var(--brass-ink); box-shadow: 0 0 0 1px var(--brass-ink); outline: none; }
.input::placeholder { color: var(--muted); opacity: 1; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23635b4e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

/* výběr velikosti / variant jako čipy */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); font-size: 14px; transition: border-color .15s ease, background .15s ease; }
.chip:hover { border-color: var(--brass); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.selected { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, var(--bg-2)); color: var(--brass-ink); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; color: var(--ink); }
.qty button:hover { background: var(--bg-3); }
.qty input { width: 42px; text-align: center; border: none; background: transparent; font-family: var(--ff-mono); }
/* obrys fokusu dovnitř: .qty ořezává obsah do tvaru pilulky (overflow: hidden) a obrys vně by uřízl; zaoblený, ať se
   vejde i do půlkruhových konců */
.qty button:focus-visible, .qty input:focus-visible { outline-offset: -4px; border-radius: var(--r-pill); }

/* ---------- prose (blog / právní / o nás) ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; font-family: var(--ff-text); font-weight: 700; }
.prose p, .prose li { color: var(--ink-soft); line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: .4em; }
.prose a { color: var(--brass-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--brass); padding-left: 18px; font-family: var(--ff-display); font-size: 1.3em; color: var(--ink); }

/* ---------- breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-family: var(--ff-mono); padding-block: 18px; }
.breadcrumb a:hover { color: var(--brass-ink); }
/* cíl dotyku aspoň 24 px na výšku (WCAG 2.5.8), odkazy jsou od sebe 8 px + lomítko */
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
/* hledání: podnadpis kategorie, když výsledky patří do víc kategorií (search.html) */
.hledani-skupina { font-size: clamp(18px, 2.1vw, 22px); margin: 34px 0 16px; }
.hledani-skupina:first-child { margin-top: 0; }

/* ---------- hero (úvodní stránka) ---------- */
.hero { position: relative; min-height: clamp(460px, 78vh, 760px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg .ph { --ton: var(--leather); }
.hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--bg) 20%, transparent) 55%, var(--bg) 100%); }
.hero__inner { position: relative; z-index: 2; padding-bottom: clamp(40px, 7vw, 84px); }
.hero__title { font-size: clamp(40px, 8vw, 92px); }

/* ---------- utils ---------- */
/* text jen pro čtečky obrazovky (např. „otevře se v novém okně“ u odkazu na jiný web) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* slovo se spojovníkem (e-mail, Z-BOX) se nezlomí na konci řádku za spojovníkem */
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-sm { gap: 10px; }
.gap-md { gap: 18px; }
.wrap-btns { display: flex; flex-wrap: wrap; gap: 12px; }
[hidden] { display: none !important; }

/* reveal on scroll (progresivní vylepšení; bez JS zůstává vidět) */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
/* fokus z klávesnice uvnitř ještě neodhaleného bloku: ukázat hned, ne až po scrollu a přechodu */
.js .reveal:focus-within { opacity: 1; transform: none; transition: none; }
/* výraznější „pop" pro produktové karty na HOMEPAGE — naskakují při scrollu
   (translateY + scale s jemným přestřelením). --rd = stagger prodleva podle
   sloupce (nastavuje app.js). Ostatní stránky ponechávají jemný .reveal. */
.js .home-hero .product-card.reveal { opacity: 0; transform: translateY(34px) scale(.94);
  transition: opacity .5s ease var(--rd, 0s), transform .55s cubic-bezier(.2, .9, .25, 1.12) var(--rd, 0s); }
.js .home-hero .product-card.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .home-hero .product-card.reveal { opacity: 1; transform: none; transition: none; }
}

/* toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 200;
  background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- hero: tmavá kožená scéna + světlý text ---------- */
.hero__scrim { background: linear-gradient(180deg, rgba(74,42,20,.60), rgba(28,15,7,.72)); mix-blend-mode: multiply; z-index: 2; }
.hero__inner { color: #f4eee2; }
.hero .eyebrow { color: #e3bd80; }
.hero__title { color: #f6f1e7; }
.hero .lead { color: rgba(246,241,231,.9); }
.hero .btn--ghost { border-color: rgba(246,241,231,.55); color: #f6f1e7; background: transparent; }
.hero .btn--ghost:hover { border-color: #f6f1e7; color: #fff; background: rgba(255,255,255,.10); }

/* hero duotone brand — fotka sjednocená koženým tónem (varianta 6) */
.hero { isolation: isolate; }
/* pozadí hero fotky dodává homepage inline (.hero__slide); základní .hero__bg
   proto žádnou fotku nenastavuje (dřívější url mířila na neexistující soubor). */
.hero__bg { background-size: cover; background-position: center 42%; }
/* Fotka slidu je <img> se srcset: první slide se načítá hned (fetchpriority="high",
   je to LCP prvek), ostatní až před svým zobrazením (G-10). */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__bg .ph { display: none; }
.hero__tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(90,58,34,.32), rgba(20,12,6,.42)); }

/* hero fixed reveal — obsah přejíždí přes fotku při scrollu */
.hero { position: fixed; inset: 0; z-index: 0; min-height: 0; align-items: center; }
.hero-spacer { height: 100vh; height: 100dvh; }
.page-flow { position: relative; z-index: 1; background: var(--bg); }

/* hero první-scroll (pagani styl): zoom + fade hera, scroll prompt */
.hero__bg { will-change: transform; transform-origin: center; }
.hero__inner { will-change: opacity, transform; }
.scroll-cue { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:9px; color:rgba(247,242,232,.72); font-family:var(--ff-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; }
.scroll-cue i { width:1px; height:36px; background:linear-gradient(rgba(247,242,232,.78),transparent); transform-origin:top; animation:scrollpulse 1.9s ease-in-out infinite; }
@keyframes scrollpulse { 0%,100%{opacity:.25; transform:scaleY(.55);} 50%{opacity:1; transform:scaleY(1);} }
@media (prefers-reduced-motion:reduce){ .scroll-cue i{animation:none;} }

/* H2: gradient-scrim hlavička nad hero (homepage) */
body.home-hero .site-header{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease; }
body.home-hero .site-header::after{ content:""; position:absolute; left:0; right:0; top:0; height:230%; background:linear-gradient(to bottom, rgba(8,6,3,.78), rgba(8,6,3,0)); z-index:-1; pointer-events:none; transition:opacity .3s ease; }
/* světlé logo jen v hlavičce nad tmavým hero — NE v patičce (tam by na světlém
   pozadí zmizelo); patička si ponechá výchozí tmavé logo. */
body.home-hero .site-header .logo{ color:#f4eee2; }
body.home-hero .main-nav a{ color:rgba(244,238,226,.82); }
body.home-hero .main-nav a:hover, body.home-hero .main-nav a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.10); }
body.home-hero .main-nav.open a{ color:var(--ink-soft); }
/* světlé ikony jen v hlavičce (ne zavírací křížek rychlého náhledu na světlém pozadí); po najetí myší
   jemně průhledné bílé pozadí jako u odkazů nabídky – výchozí --bg-3 by světlou ikonu nad fotkou schovalo */
body.home-hero .site-header .icon-btn{ color:#f4eee2; }
body.home-hero .site-header .icon-btn:hover{ background:rgba(255,255,255,.12); }
/* po scrollu i s otevřeným menu (site-header--menu, app.js) plné pozadí a tmavé ikony: menu je světlý
   panel a křížek na zavření musí být vidět */
body.home-hero .site-header.scrolled, body.home-hero .site-header.site-header--menu{ background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line-soft); }
body.home-hero .site-header.scrolled::after, body.home-hero .site-header.site-header--menu::after{ opacity:0; }
body.home-hero .site-header.scrolled .logo, body.home-hero .site-header.site-header--menu .logo{ color:var(--ink); }
body.home-hero .site-header.scrolled .main-nav a{ color:var(--ink-soft); }
body.home-hero .site-header.scrolled .main-nav a:hover, body.home-hero .site-header.scrolled .main-nav a[aria-current="page"],
body.home-hero .main-nav.open a:hover, body.home-hero .main-nav.open a[aria-current="page"]{ color:var(--ink); background:var(--bg-3); }
body.home-hero .site-header.scrolled .icon-btn, body.home-hero .site-header.site-header--menu .icon-btn{ color:var(--ink); }
body.home-hero .site-header.scrolled .icon-btn:hover, body.home-hero .site-header.site-header--menu .icon-btn:hover{ background:var(--bg-3); }
/* nabídka Obchod nad úvodní fotkou: tlačítko světlé jako odkazy lišty; otevřená nabídka (site-header--obchod,
   app.js) dá hlavičce plné pozadí jako po scrollu a panel je světlý, proto v něm tmavé odkazy */
body.home-hero .nav-obchod__tlacitko{ color:rgba(244,238,226,.82); }
body.home-hero .nav-obchod__tlacitko:hover, body.home-hero .nav-obchod__tlacitko[aria-expanded="true"], body.home-hero .nav-obchod--aktivni .nav-obchod__tlacitko{ color:#fff; background:rgba(255,255,255,.10); }
body.home-hero .site-header.site-header--obchod{ background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line-soft); }
body.home-hero .site-header.site-header--obchod::after{ opacity:0; }
body.home-hero .site-header.site-header--obchod .logo{ color:var(--ink); }
body.home-hero .site-header.site-header--obchod .main-nav a{ color:var(--ink-soft); }
body.home-hero .site-header.site-header--obchod .icon-btn{ color:var(--ink); }
body.home-hero .site-header.site-header--obchod .icon-btn:hover{ background:var(--bg-3); }
body.home-hero .site-header.scrolled .nav-obchod__tlacitko, body.home-hero .site-header.site-header--obchod .nav-obchod__tlacitko,
body.home-hero .site-header.site-header--menu .nav-obchod__tlacitko{ color:var(--ink-soft); background:none; }
body.home-hero .site-header.scrolled .nav-obchod__tlacitko:hover, body.home-hero .site-header.scrolled .nav-obchod__tlacitko[aria-expanded="true"],
body.home-hero .site-header.scrolled .nav-obchod--aktivni .nav-obchod__tlacitko,
body.home-hero .site-header.site-header--obchod .nav-obchod__tlacitko:hover, body.home-hero .site-header.site-header--obchod .nav-obchod__tlacitko[aria-expanded="true"],
body.home-hero .site-header.site-header--obchod .nav-obchod--aktivni .nav-obchod__tlacitko,
body.home-hero .site-header.site-header--menu .nav-obchod__tlacitko:hover, body.home-hero .site-header.site-header--menu .nav-obchod__tlacitko[aria-expanded="true"],
body.home-hero .site-header.site-header--menu .nav-obchod--aktivni .nav-obchod__tlacitko{ color:var(--ink); background:var(--bg-3); }
body.home-hero .nav-obchod__panel a{ color:var(--ink-soft); }
body.home-hero .nav-obchod__panel a:hover, body.home-hero .nav-obchod__panel a[aria-current="page"]{ color:var(--ink); background:var(--bg-3); }
/* vlastní velikost na detailu */
.chip--custom { border-style: dashed; color: var(--brass-ink); }
.chip--custom[aria-checked="true"] { border-style: solid; }
/* výběr varianty (R4 B): vzorek barvy, vyprodaná varianta jako neaktivní volba s viditelným „vyprodáno“ */
.chip__ton { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ton) 50%, var(--ton2, var(--ton)) 50%);   /* s druhým tónem (prošití) rozpůlený */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
/* zvolená varianta (detail, rychlý náhled): hodnota za názvem výběru („Provedení: Onyx – bílé prošití“), pod čipy popis */
.volba-hodnota { font-family: var(--ff-text); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.volba-popis { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.chip__pozn { color: var(--muted); font-size: 12.5px; }
.chip--vyprodano { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.chip--vyprodano:hover { border-color: var(--line); }
/* výběr varianty jako řada kulatých vzorků (detail i rychlý náhled, G.maVzorky v app.js): vzorek 32 px v tónu
   varianty, s druhým tónem (prošití) rozpůlený, dotyková plocha 44 × 44 px. Zvolený = mosazný prstenec (--brass má
   na --bg i --bg-2 kontrast nad 3 : 1), vyprodaný = přeškrtnutý a tlumený, vybrat nejde (aria-disabled). */
.vzorky { display: flex; flex-wrap: wrap; gap: 2px; margin-inline: -6px; }
.vzorek { position: relative; width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; }
.vzorek__ton { width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ton, var(--bg-3)) 50%, var(--ton2, var(--ton, var(--bg-3))) 50%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); transition: box-shadow .15s ease; }
.vzorek:hover .vzorek__ton { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 0 2.5px var(--bg), 0 0 0 3.5px var(--line-strong); }
.vzorek[aria-checked="true"] .vzorek__ton { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--brass); }
.vzorek:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: -1px; border-radius: 50%; }
.vzorek--vyprodano { cursor: not-allowed; }
.vzorek--vyprodano .vzorek__ton { opacity: .45; }
.vzorek--vyprodano:hover .vzorek__ton { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.vzorek--vyprodano::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 1.5px; border-radius: 1px;
  background: var(--ink-soft); transform: translate(-50%, -50%) rotate(-45deg); }
/* rychlý náhled má pozadí --bg-2: mezera mezi vzorkem a prstencem v jeho barvě; vyprodaný vzorek prstenec při najetí
   nedostane (silnější selektor by jinak přebil .vzorek--vyprodano:hover výš) – :where drží specifičnost na úrovni
   zvoleného vzorku pod ním, ten tak vyhrává pořadím (na dotyku zůstává :hover po klepnutí) */
.qv-info .vzorek:where(:not(.vzorek--vyprodano)):hover .vzorek__ton { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 0 2.5px var(--bg-2), 0 0 0 3.5px var(--line-strong); }
.qv-info .vzorek[aria-checked="true"] .vzorek__ton { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 0 2.5px var(--bg-2), 0 0 0 4.5px var(--brass); }
@media (prefers-reduced-motion: reduce) { .vzorek__ton { transition: none; } }
.custom-vel { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.custom-vel .input { max-width: 130px; }
.custom-vel .btn { padding: 10px 18px; }

/* a11y skip-link + cookie lišta */
.skip-link{ position:fixed; top:-60px; left:12px; z-index:130; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-family:var(--ff-mono); font-size:13px; transition:top .2s ease; }
.skip-link:focus{ top:12px; }
.cookie-bar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:120; max-width:600px; margin-inline:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:16px 18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.cookie-bar p{ font-size:14px; color:var(--ink-soft); flex:1; min-width:220px; margin:0; }
.cookie-bar__btns{ display:flex; gap:8px; }
.cookie-bar .btn{ padding:9px 16px; }

/* ---------- akce na kartě produktu (oblíbené + rychlý náhled) ---------- */
.card-actions { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.card-act {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; color: var(--ink);
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  border: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, opacity .2s ease;
}
.card-act:hover { background: var(--bg-2); border-color: var(--brass); transform: translateY(-1px); }
.card-act svg { pointer-events: none; }
/* srdíčko: přepínání outline / plné */
.card-fav .ico-off { display: grid; place-items: center; }
.card-fav .ico-on { display: none; }
.card-fav.is-active { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); }
.card-fav.is-active .ico-off { display: none; }
.card-fav.is-active .ico-on { display: grid; }
/* na dotykových zařízeních akce trvale viditelné; na myši elegantně po najetí */
@media (hover: hover) and (pointer: fine) {
  .card-quick { opacity: 0; transform: translateY(-4px); }
  .product-card:hover .card-quick,
  .product-card:focus-within .card-quick,
  .card-quick:focus-visible { opacity: 1; transform: none; }
}

/* ---------- rychlý náhled (modal) ---------- */
.qv-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, #100b06 62%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.qv-overlay.show { opacity: 1; }
.qv-modal {
  width: min(920px, 100%); max-height: 90vh; overflow: auto;
  position: relative; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.99); transition: transform .24s cubic-bezier(.2,.7,.2,1);
}
.qv-overlay.show .qv-modal { transform: none; }
.qv-close { position: absolute; top: 12px; right: 12px; z-index: 3; background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
.qv-close:hover { background: var(--bg-3); }
.qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 34px); }
.qv-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--bg-3); }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }
.qv-media .ph { border-radius: 0; }
.qv-info { padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) 0; display: flex; flex-direction: column; }
.qv-info .price { font-size: 22px; }
.qv-info .badge { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .qv-overlay, .qv-modal { transition: none; }
  .card-quick { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 640px) {
  .qv-grid { grid-template-columns: 1fr; }
  .qv-media { aspect-ratio: 16 / 10; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .qv-info { padding: 20px 20px 24px; }
}
body.qv-open { overflow: hidden; }

/* srdíčko v hlavičce používá stejný odznak jako košík (.wish-count = .cart-count) */
.wish-link { position: relative; }

/* ---------- detail produktu: karta materiálu a popis (v akordeonech, redesign 19. 10. 2026) ---------- */
/* název karty materiálu je h3 v akordeonu „Materiál a péče“, vzhledem drobný */
.pdp-panel__title { font-family: var(--ff-text); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.pdp-popis p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin-top: 6px; max-width: 62ch; }

/* ---------- pokladna: bloky formuláře ---------- */
/* Bloky 01–04 jsou <fieldset>: bez výchozího rámečku (groove) a odsazení prohlížeče.
   Horní linku a mezery mezi bloky doplňuje styl stránky pokladny. */
fieldset.co-block { border: 0; margin-inline: 0; padding: 0; min-width: 0; }

/* ---------- pokladna: souhrn objednávky ---------- */
/* Název a metadata položky musí být pod sebou, jinak splynou v „…prošití90 cm · 1 ks". */
.sum-item__name, .sum-item__meta { display: block; }

/* ---------- hero na mobilu: obsah se nesmí ořezávat / přetékat šířku ---------- */
@media (max-width: 600px) {
  .hero__title { font-size: clamp(32px, 10.5vw, 50px); }
  .hero .lead { max-width: 100%; }
  .hero .wrap-btns { flex-direction: column; align-items: stretch; width: 100%; }
  .hero .wrap-btns .btn { width: 100%; }
}

/* ---------- správa obsahu: texty z administrace, články a karty z D1 ---------- */
/* Dlouhá adresa nebo složené slovo z administrace nesmí na 390 px přetéct. */
.prose, .product-card__name, .breadcrumb { overflow-wrap: anywhere; }
.breadcrumb > * { min-width: 0; }
/* zalamuje se jen poslední položka (název článku); „Domů“, „Blog“ a lomítka se nesmí smrsknout
   na sloupec písmen („Dom/ů“) */
.breadcrumb > :not(:last-child) { flex-shrink: 0; }

/* fotka v textu článku nebo bloku O nás (figure z editoru) */
.prose figure { margin-block: 1.6em; }
.prose img { width: 100%; height: auto; border-radius: var(--r-lg); }
.prose figcaption { margin-top: 12px; font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); text-align: center; }
/* nepovinný popisek fotky, který majitelka v administraci vymazala */
figcaption:empty { display: none; }

/* úvod: text dílny (blok uvod.dilna.text; dřív dva <p style>) */
.uvod-dilna__text p { margin-top: 14px; color: var(--ink-soft); }
.uvod-dilna__text p:first-child { margin-top: 16px; }
.uvod-dilna__text a { color: var(--brass-ink); text-decoration: underline; text-underline-offset: 3px; }

/* článek (šablona sablony/clanek.html, obsah #clanek skládá server) – dřív inline styly statických článků */
.clanek-datum, .stack > .clanek-datum { margin-top: 4px; font-family: var(--ff-mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); }
.clanek-foto { margin: clamp(28px, 5vw, 44px) 0 0; }
.clanek-foto img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.clanek-foto figcaption { margin-top: 12px; font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); text-align: center; }
.clanek-oddelovac { margin-block: 36px; }
.clanek-cta { margin-top: 40px; }
/* pruh nahoře v náhledu nezveřejněného článku (?nahled=1, jen pro přihlášenou administraci) */
.clanek-nahled { padding: 10px var(--gutter); background: color-mix(in srgb, var(--brass) 16%, var(--bg-2)); border-bottom: 1px solid var(--line);
  color: var(--ink); font-family: var(--ff-mono); font-size: 13px; letter-spacing: .04em; text-align: center; }

/* karty článků z D1: výpis /blog (stejný markup jako statické karty) a od fáze 2 karty na úvodu */
.product-card__name.blog-karta__nazev { font-size: 23px; }
.product-card__meta.blog-karta__perex { line-height: 1.6; }
.product-card__meta.blog-karta__datum { font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .04em; }
.blog-prazdny { grid-column: 1 / -1; color: var(--muted); }
.product-card.uvod-karta { padding: 24px; }
.eyebrow.uvod-karta__stitek { color: var(--muted); }
.uvod-karta__nazev, .uvod-karta__perex { margin-top: 10px; }
.link-arrow.uvod-karta__cist { margin-top: 16px; }

/* průvodce velikostí (modal na /produkt): tučný text úvodu je tmavší – dřív <strong style> v řetězci skriptu */
.sizeguide-card strong { color: var(--ink); }
.sizeguide-card .sizeguide-steps strong { color: inherit; }

/* celá nabídka (/kategorie bez parametru, rozhodnutí R1 A): výrobky po kategoriích, nadpis skupiny s odkazem
   na kategorii (src/seo.js seoNabidky a web/kategorie.html skládají stejné HTML) */
.nabidka-skupina + .nabidka-skupina { margin-top: clamp(44px, 6vw, 76px); }
.nabidka-skupina__hlava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 22px; }
.nabidka-skupina__perex { max-width: 60ch; margin-top: 8px; }

/* ---------- zakázková výroba (tmavý pás usně, třídy zak__) ----------
   Zadání majitele 20. 10. 2026: dílna vyrobí z kůže téměř cokoli na zakázku (návrh „Tmavý kožený pás“). Tři podoby
   ve stejném vizuálním jazyce (tokeny --tma-*):
   - .zak--stranka  velký pás na stránce /zakazkova-vyroba (#zakazkovaVyroba): h1, výzvy, fotka 4 : 5 s pečetí,
                    možnosti a postup ve čtyřech krocích;
   - .zak--pozvanka nízká karta na úvodu pod úvodní fotkou (#uvodZakazky, doplňková služba e-shopu): pečeť, štítek,
                    nadpis v jednom řádku, jedna věta, tlačítko na /zakazkova-vyroba a odkaz na /kontakt (bez fotky);
   - .zak--karta    záplata tmavé usně se závěrečnou výzvou na konci stránky /zakazkova-vyroba.
   Společné: jemné zrno, teplá záře, vyleštěná hrana a šikmé prošití podél horní i dolní hrany (karty mají prošitý
   okraj); na stránce je světlá fotka okno do dílny v mosazné paspartě, přes roh pečeť s hvězdičkou (ražba). Pořadí
   čtení a tabulátoru = pořadí HTML (telefon), počítač přeskládá jen sloupce.
   Najetí myší (jen myš): fotka se přiblíží, pečeť pootočí (u fotky i nad kartou na úvodu), pod možností se protáhne
   linka; při omezení pohybu nic z toho. Prošití je maska (mask-image) v barvě tokenu; prohlížeč bez masek ho nekreslí (kroky pak spojí
   čárkovaná linka). Kontrasty textu viz tokeny --tma-* (7,7–15 : 1).
   Prohlížeč bez color-mix() (Safari < 16.2): plochy mají barvu z tokenu zvlášť (background-color), přechody
   s color-mix jsou jen background-image navíc – neplatný obrázek spadne na „none“, tmavá barva zůstane. */
.zak { position: relative; isolation: isolate; color: var(--tma-soft); padding-block: clamp(56px, 9.5vw, 140px);
  background-color: var(--tma);
  background-image:
    radial-gradient(ellipse 55% 65% at 24% 42%, color-mix(in srgb, var(--brass) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, color-mix(in srgb, var(--leather) 26%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--tma) 92%, var(--leather)) 0%, var(--tma) 55%, color-mix(in srgb, var(--tma) 85%, black) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tma-brass) 16%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--tma-brass) 12%, transparent); }
/* zrno usně: světlé a tmavé tečky šumu jako průhledný obrázek (bez míchání vrstev), jen dekor */
.zak::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .76 1 0 0 0 -.5'/%3E%3C/filter%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"); }
/* tvary stehů pro masky: šikmý steh vodorovně (14 × 6) a svisle (6 × 12) */
.zak { --zak-steh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6'%3E%3Cpath d='M3.2 4.3 9.8 1.7' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --zak-steh-svisly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12'%3E%3Cpath d='M1.8 8.6 4.2 3.4' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.zak__steh { display: none; position: absolute; left: 0; right: 0; height: 6px; pointer-events: none; opacity: .5; background: var(--tma-brass); }
.zak__steh--horni { top: clamp(14px, 1.6vw, 20px); }
.zak__steh--dolni { bottom: clamp(14px, 1.6vw, 20px); }
/* stránka: pás začíná hned pod lištou – jen spodní vyleštěná hrana (horní by splývala s lištou), bez vrženého stínu */
.zak--stranka { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--tma-brass) 12%, transparent); }

/* hlavička: štítek s linkou, dvoubarevný nadpis (druhý řádek mosazně s prošitím), úvodní text */
.zak__stitek { display: flex; align-items: center; gap: 14px; color: var(--tma-brass); }
.zak__stitek::before { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; opacity: .75; }
.zak__nadpis { color: var(--tma-ink); font-weight: 400; font-size: clamp(36px, 11vw, 82px); line-height: .98; letter-spacing: -.022em; }
.zak__nadpis-1 { display: block; }
.zak__nadpis-2 { position: relative; display: inline-block; padding-bottom: .1em; color: var(--tma-brass); }
.zak__nadpis-2::after { content: ""; display: none; position: absolute; left: .04em; right: .12em; bottom: -.04em; height: 6px; background: var(--tma-brass); opacity: .55; }
/* stránka: štítek „Zakázková výroba · Střítež“ je první částí h1 (vyhledávače, 21. 10. 2026), vypadá ale stejně jako
   dřív štítek nad nadpisem: řádkování a zalamování odstavce (body, p) místo nadpisových (h1 má balance; prohlížeč bez
   pretty, např. Firefox, tak dostane wrap jako u odstavce) a mezera 22 px pod štítkem místo odsazení h1 */
.zak__nadpis > .zak__stitek { margin-bottom: 22px; line-height: 1.6; text-wrap: wrap; text-wrap: pretty; }
.zak__lead { margin-top: 26px; max-width: 46ch; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.6; color: var(--tma-soft); text-wrap: pretty; }
/* odkaz v krátkých textech pásu (bloky typu inline: úvodní text, kroky, výzva) – podtržený, světlý na tmavé usni */
.zak :is(.zak__lead, .zak__uvodni, .zak__krok-text, .zak__karta-text) a { color: var(--tma-ink); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tma-brass) 55%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.zak :is(.zak__lead, .zak__uvodni, .zak__krok-text, .zak__karta-text) a:hover { color: var(--tma-brass); }

/* výzvy: plné světle mosazné tlačítko a obrysové; na telefonu přes celou šířku */
.zak__akce { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(28px, 7vw, 36px); }
.zak .btn--primary { background: var(--tma-brass); color: var(--ink); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--tma-brass) 60%, transparent); }
.zak .btn--primary:hover { background: var(--tma-brass-hover); }
.zak .btn svg { transition: transform .2s ease; }
.zak .btn--ghost { border-color: color-mix(in srgb, var(--tma-ink) 40%, transparent); color: var(--tma-ink); background: transparent; }
.zak .btn--ghost:hover { border-color: var(--tma-brass); color: var(--tma-brass); background: color-mix(in srgb, var(--tma-brass) 7%, transparent); }
.zak :focus-visible { outline-color: var(--tma-brass); }
@media (max-width: 519.98px) { .zak__akce .btn { width: 100%; } }

/* fotka: světlé okno do dílny v mosazné paspartě (obrys kopíruje zaoblení). Fotka je o odsazení obrysu
   odsazená od okraje obsahu, aby vnější obrys ležel na stejné linii jako ostatní obsah (telefon 16px od hrany). */
.zak__foto { margin: clamp(40px, 9vw, 52px) 0 0; min-width: 0; }
.zak__obraz { position: relative; margin-inline: 8px; }
.zak__ram { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg);
  background-color: var(--tma-zaplata); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85);
  outline: 1px solid color-mix(in srgb, var(--tma-brass) 30%, transparent); outline-offset: 8px; }
.zak__ram img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
/* výřez naladěný na výchozí čtvercovou fotku (na počítači klíčenka a nit uprostřed rámu 4 : 5);
   jinou fotku z administrace prohlížeč ořízne na střed */
.zak__ram img[src$="/nit-a-sidlo.jpg"] { object-position: 68% 50%; }
.zak__ram::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--tma) 42%, transparent) 100%); }
/* pečeť přes roh fotky: kruhový nápis a hvězdička (ražba) v mosazné barvě vyražené do tmavé usně */
.zak__pecet { position: absolute; z-index: 2; right: clamp(14px, 4vw, 22px); bottom: -40px; width: 96px; height: 96px; border-radius: 50%;
  background-color: var(--tma);
  background-image: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--tma) 78%, var(--leather)) 0%, var(--tma) 55%, color-mix(in srgb, var(--tma) 85%, black) 100%);
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .75), 0 0 0 1px color-mix(in srgb, var(--tma-brass) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--tma-ink) 14%, transparent), inset 0 -2px 6px rgba(0, 0, 0, .45);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.zak__pecet svg { width: 100%; height: 100%; }
.zak__pecet-steh { fill: none; stroke: var(--tma-brass); stroke-width: 1; stroke-dasharray: 2.4 3.2; opacity: .55; }
.zak__pecet-text { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; fill: var(--tma-brass); }
.zak__pecet-znak { fill: var(--tma-brass); opacity: .92; }
.zak__popisek { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-right: 128px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tma-muted); }
.zak__popisek::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--tma-brass); opacity: .6; }

/* malé nadpisy (štítky) částí, pod nimi nadpis části ve Fraunces a krátký úvodní text */
.zak__mini { margin-bottom: 14px; font-family: var(--ff-mono); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; color: var(--tma-muted); }
.zak__podnadpis { color: var(--tma-ink); font-weight: 400; font-size: clamp(27px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -.012em; }
.zak__uvodni { margin-top: 14px; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--tma-soft); text-wrap: pretty; }

/* možnosti na stránce: blok správy obsahu (odstavec a seznam) v .prose – barvy a rozvržení pásu místo světlého
   textu stránky. Položka = krátká mosazná linka, tučný název ve Fraunces na vlastním řádku (zalomení <br> skryté)
   a text; položky oddělené jemnými linkami. Bez stylů (čtečka, režim čtení) zůstane název a text na dvou řádcích. */
.zak__moznosti { margin-top: clamp(64px, 12vw, 80px); }
.zak .zak__moznosti-text { max-width: none; margin-top: 14px; }
.zak .zak__moznosti-text > p { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--tma-soft); }
.zak .zak__moznosti-text > * + * { margin-top: 24px; }
.zak .zak__moznosti-text ul { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 40px); border-top: 1px solid var(--tma-line); }
.zak .zak__moznosti-text li { position: relative; padding: 14px 0 16px; border-bottom: 1px solid var(--tma-line); font-size: 15px; line-height: 1.5; color: var(--tma-muted); text-wrap: pretty; }
.zak .zak__moznosti-text li::before { content: ""; display: block; width: 30px; height: 1px; margin: 5px 0 11px; background: var(--tma-brass); opacity: .7;
  transform: scaleX(.6); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.zak .zak__moznosti-text li::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--tma-brass); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* tučné písmo a citace světle (v .prose jsou tmavé pro světlou stránku); název položky = první tučný text
   položky, za kterým hned následuje zalomení <br> – jen ten jde na vlastní řádek ve Fraunces (tučné slovo uprostřed
   textu zůstane v řádku). Bez :has() zůstane název tučně a zalomí ho <br>. */
.zak .zak__moznosti-text :is(strong, blockquote) { color: var(--tma-ink); }
.zak .zak__moznosti-text blockquote { border-left-color: var(--tma-brass); }
.zak .zak__moznosti-text li > strong:first-child:has(+ br) { display: block; margin-bottom: 4px; font-family: var(--ff-display); font-size: clamp(19px, 1.55vw, 22px); font-weight: 400; line-height: 1.2; }
.zak .zak__moznosti-text li > strong:first-child:has(+ br) + br { display: none; }
.zak .zak__moznosti-text a { color: var(--tma-ink); text-decoration-color: color-mix(in srgb, var(--tma-brass) 55%, transparent); }
.zak .zak__moznosti-text a:hover { color: var(--tma-brass); }

/* postup: kroky 01–04 v kroužcích spojených šikmým stehem (bez masek čárkovanou linkou) */
.zak__kroky { margin-top: clamp(64px, 12vw, 80px); }
.zak__postup { list-style: none; display: grid; gap: 28px; margin-top: 26px; padding: 26px 0 0; border-top: 1px solid var(--tma-line); }
.zak__postup li { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 46px; padding-left: 64px; }
.zak__krok { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid; border-color: color-mix(in srgb, var(--tma-brass) 55%, transparent); background: var(--tma);
  font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--tma-brass); }
.zak__postup li:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 54px; bottom: -20px; width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--tma-brass) 50%, transparent); }
.zak__krok-nazev { padding-top: 10px; font-family: var(--ff-display); font-size: clamp(20px, 1.7vw, 23px); font-weight: 400; line-height: 1.2; letter-spacing: 0; color: var(--tma-ink); }
.zak__krok-text { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--tma-muted); text-wrap: pretty; }

/* pozvánka na úvodu: nízká karta tmavé usně uvnitř .wrap – doplňková služba e-shopu, ne hlavní nabídka (zadání
   majitele 20. 10. 2026; výrobky „Vybíráme pro vás“ jsou hned pod ní). Prošitý okraj jako záplata výzvy na stránce
   (čárkovaný obrys uvnitř karty), pečeť jako ikona, štítek, nadpis 26–34 px (druhá část mosazně s prošitím), jedna
   věta, plné tlačítko a nenápadný textový odkaz. Telefon: pod sebou, pečeť přes pravý horní roh karty jako pečeť
   na obálce; od 600 px pečeť vlevo vedle textu a výzev; od 1000 px jeden řádek pečeť – text – výzvy (sekce na
   1440 px asi 225 px vysoká, na telefonu 390 px asi 290 px). */
.zak-uvod { padding-top: clamp(30px, 2.8vw, 40px); }
/* výrobky hned pod kartou: menší odstup než mezi běžnými sekcemi, ať je karta vstupem do nabídky, ne samostatný blok */
.zak-uvod + .section { padding-top: clamp(44px, 5.4vw, 76px); }
/* bez výrobků je „Vybíráme pro vás“ skryté – stejný odstup pak drží dělicí linka pod ním */
.zak-uvod + .section[hidden] + .divider { margin-top: clamp(44px, 5.4vw, 76px); }
.zak--pozvanka { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: 26px clamp(22px, 3.4vw, 44px) 28px; border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .5), inset 0 1px 0 color-mix(in srgb, var(--tma-brass) 16%, transparent);
  outline: 1.5px dashed var(--tma-line); outline: 1.5px dashed color-mix(in srgb, var(--tma-brass) 40%, transparent); outline-offset: -9px; }
.zak--pozvanka .zak__pecet { top: -24px; right: 16px; bottom: auto; width: 66px; height: 66px; }
.zak--pozvanka .zak__stitek { padding-right: 64px; }
.zak--pozvanka .zak__nadpis { margin-top: 10px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.015em; }
.zak--pozvanka .zak__nadpis-1 { display: inline; }
.zak--pozvanka .zak__lead { margin-top: 8px; max-width: 58ch; font-size: 15.5px; line-height: 1.55; }
.zak--pozvanka .zak__akce { margin-top: 18px; gap: 10px 24px; }
.zak__odkaz { padding-block: 8px; font-family: var(--ff-mono); font-size: 13px; letter-spacing: .06em; color: var(--tma-ink);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tma-brass) 55%, transparent); text-underline-offset: 5px; }
.zak__odkaz:hover { color: var(--tma-brass); }

/* závěrečná výzva na stránce: záplata tmavé usně s prošitým okrajem, otázka ve Fraunces s mosaznou pointou */
.zak-zaver { padding-top: 0; }
.zak--karta { padding: clamp(28px, 4vw, 52px) clamp(24px, 4.4vw, 60px); border-radius: var(--r-lg);
  box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .55), inset 0 1px 0 color-mix(in srgb, var(--tma-brass) 16%, transparent);
  outline: 1.5px dashed color-mix(in srgb, var(--tma-brass) 42%, transparent); outline-offset: -10px; }
.zak--karta .zak__mini { margin-bottom: 12px; color: var(--tma-brass); }
.zak__otazka { color: var(--tma-ink); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.14; letter-spacing: -.012em; text-wrap: balance; }
.zak__otazka-2 { display: block; color: var(--tma-brass); }
.zak__karta-telo { margin-top: 18px; }
.zak__karta-text { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--tma-soft); text-wrap: pretty; }
.zak--karta .zak__akce { margin-top: 24px; }

/* objednávka a podmínky na stránce (světlý oddíl mezi pásem a výzvou): na počítači nadpis ve sloupci fotky,
   text ve sloupci nadpisu pásu – stejné linie jako pás nad ním */
.zak-podminky__nadpis { margin-top: 12px; }
.zak-podminky__text { margin-top: 22px; }
@media (min-width: 900px) {
  .zak-podminky__mrizka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6.5vw, 100px); align-items: start; }
  .zak-podminky__text { margin-top: 30px; }
}

/* prošití (masky): podél hran pásu, pod druhým řádkem (částí) nadpisu a mezi kroky */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .zak__steh { display: block; -webkit-mask: var(--zak-steh) repeat-x left center / 14px 6px; mask: var(--zak-steh) repeat-x left center / 14px 6px; }
  .zak__nadpis-2::after { display: block; -webkit-mask: var(--zak-steh) repeat-x left center / 14px 6px; mask: var(--zak-steh) repeat-x left center / 14px 6px; }
  .zak__postup li:not(:last-child)::before { left: 20px; width: 6px; border: 0; background: var(--tma-brass); opacity: .6;
    -webkit-mask: var(--zak-steh-svisly) repeat-y center top / 6px 12px; mask: var(--zak-steh-svisly) repeat-y center top / 6px 12px; }
}

@media (max-width: 599.98px) { .zak__popisek::before { display: none; } }
@media (max-width: 399.98px) {
  .zak__stitek { gap: 10px; letter-spacing: .18em; }
  .zak__stitek::before { width: 22px; }
  .zak__popisek { letter-spacing: .1em; }
}
@media (max-width: 359.98px) {
  .zak__stitek::before { display: none; }
  .zak__pecet { width: 84px; height: 84px; bottom: -34px; }
  .zak__popisek { padding-right: 100px; }
}
@media (min-width: 600px) {
  .zak__obraz { margin-inline: 12px; }
  .zak__ram { outline-offset: 12px; }
}
/* stránka, tablet a telefon na šířku: fotka nižší než na telefonu (rám přes celou šířku by byl vyšší než okno),
   možnosti ve dvou sloupcích. Výška = 16 : 10 šířky rámu (obsah 92vw − 24px), nejvýš 72 % výšky okna; výška
   zadaná přímo, ne aspect-ratio + max-height (to by zúžilo rám a pečeť by zůstala u pravého okraje) */
@media (min-width: 600px) and (max-width: 899.98px) {
  .zak--stranka .zak__ram { aspect-ratio: auto; height: min(calc(57.5vw - 15px), 72vh); }
  .zak--stranka .zak__ram img[src$="/nit-a-sidlo.jpg"] { object-position: 50% 38%; }
  .zak .zak__moznosti-text ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* telefon: hustší seznam možností a kroků */
@media (max-width: 599.98px) {
  .zak .zak__moznosti-text li { padding: 12px 0 14px; }
  .zak .zak__moznosti-text li::before { margin: 4px 0 9px; }
  .zak__postup { gap: 24px; }
}
/* stránka, počítač: fotka vlevo, nadpis s výzvami svisle na střed vedle ní; pod nimi možnosti přes celou šířku
   (seznam ve dvou sloupcích) a postup jako na tabletu – na užším počítači by vedle sebe byly sloupce moc úzké */
@media (min-width: 900px) {
  .zak--stranka .zak__mrizka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6.5vw, 100px);
    grid-template-rows: 1fr auto auto 1.25fr auto auto;
    grid-template-areas: "foto ." "foto hlava" "foto akce" "foto ." "moznosti moznosti" "kroky kroky"; }
  .zak--stranka .zak__hlava { grid-area: hlava; }
  .zak--stranka .zak__akce { grid-area: akce; margin-top: clamp(30px, 3.2vw, 42px); }
  .zak--stranka .zak__foto { grid-area: foto; margin-top: 0; }
  .zak--stranka .zak__moznosti { grid-area: moznosti; align-self: start; margin-top: clamp(80px, 8vw, 120px); }
  .zak--stranka .zak__kroky { grid-area: kroky; align-self: start; }
  .zak--stranka .zak__moznosti-text ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zak--stranka .zak__obraz { margin-inline: 12px 0; }
  .zak--stranka .zak__ram { aspect-ratio: 4 / 5; }
  .zak--stranka .zak__pecet { right: 18px; bottom: 18px; width: 104px; height: 104px; }
  .zak--stranka .zak__popisek { padding-right: 0; }
  .zak--stranka .zak__nadpis { font-size: clamp(50px, 5.6vw, 82px); }
  .zak--karta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
  .zak__karta-telo { margin-top: 0; }
}
/* stránka, širší počítač: možnosti a postup vedle sebe – možnosti zaberou i kus pravého sloupce (seznam ve dvou
   sloupcích), postup je užší, obě části končí zhruba stejně nízko. Mřížka má čtyři stopy: fotka (5), mezera,
   přesah (1,6) a zbytek (4,4); fotka i nadpis s výzvami zůstávají na stejných liniích jako na užším počítači. */
@media (min-width: 1100px) {
  .zak--stranka .zak__mrizka { grid-template-columns: minmax(0, 5fr) clamp(48px, 6.5vw, 100px) minmax(0, 1.6fr) minmax(0, 4.4fr); column-gap: 0;
    grid-template-rows: 1fr auto auto 1.25fr auto;
    grid-template-areas: "foto . . ." "foto . hlava hlava" "foto . akce akce" "foto . . ." "moznosti moznosti moznosti kroky"; }
  .zak--stranka .zak__kroky { margin-top: clamp(80px, 8vw, 120px); padding-left: clamp(40px, 4vw, 64px); }
}
/* úzký počítač: obě výzvy se vejdou vedle sebe (sloupec textu má od 900 px jen ~420 px) */
@media (min-width: 900px) and (max-width: 959.98px) { .zak--stranka .zak__akce .btn--lg { padding-inline: 22px; } }
/* široký počítač: pečeť přesahuje roh fotky do mezery mezi sloupci */
@media (min-width: 1200px) { .zak--stranka .zak__pecet { right: -46px; bottom: -46px; width: 120px; height: 120px; } }
/* pozvánka: telefon – tlačítko jen tak široké jako popisek, odkaz vedle něj (od 390 px) nebo pod ním; od 600 px
   pečeť vlevo přes výšku textu i výzev, od 1000 px výzvy vpravo v řádku s textem. Text má na počítači nejméně
   20rem: delší popisky z administrace nezúží text, odkaz se pak zalomí pod tlačítko. */
@media (max-width: 519.98px) {
  .zak--pozvanka .zak__akce { gap: 6px 18px; }
  .zak--pozvanka .zak__akce .btn { width: auto; padding-inline: 20px; }
}
@media (min-width: 600px) {
  .zak--pozvanka { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); }
  .zak--pozvanka .zak__pecet { position: relative; inset: auto; grid-row: span 2; width: 88px; height: 88px; }
  .zak--pozvanka .zak__stitek { padding-right: 0; }
}
@media (min-width: 1000px) {
  .zak--pozvanka { grid-template-columns: auto minmax(20rem, 1fr) auto; padding-block: 28px; }
  .zak--pozvanka .zak__pecet { grid-row: auto; }
  .zak--pozvanka .zak__akce { margin-top: 0; }
}
/* nástup (reveal ze základních pravidel) s jemným odstupňováním */
.js .zak__akce.reveal { transition-delay: .12s; }
.js .zak__foto.reveal { transition-delay: .06s; }
.js .zak__kroky.reveal, .js .zak__moznosti.reveal { transition-delay: .1s; }
@media (hover: hover) and (pointer: fine) {
  .zak__foto:hover .zak__ram img { transform: scale(1.035); }
  .zak__foto:hover .zak__pecet, .zak--pozvanka:hover .zak__pecet { transform: rotate(-14deg); }
  .zak .zak__moznosti-text li:hover::before { transform: scaleX(1); }
  .zak .zak__moznosti-text li:hover::after { transform: scaleX(1); }
  .zak .btn--primary:hover svg { transform: translate(2px, -2px); }
  .zak .btn--ghost:hover svg { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .zak__ram img, .zak__pecet, .zak .zak__moznosti-text li::before, .zak .zak__moznosti-text li::after, .zak .btn svg { transition: none; }
  .zak__foto:hover .zak__ram img, .zak__foto:hover .zak__pecet, .zak--pozvanka:hover .zak__pecet, .zak .btn:hover svg { transform: none; }
  .js .zak .reveal, .js .zak.reveal { transition-delay: 0s; }
}