/* ==========================================================================
   Domácí potřeby Třebíč — vzhled projektu
   --------------------------------------------------------------------------
   Projektová vrstva nad neutrálním `site.css`. Do `site.css` se nesahá.

   ZMĚŘENO U ORIONU (jeho vlastní `cz-default.css`, ne odhad)
   ----------------------------------------------------------
     #202449 tmavě modrá ×71  ← hlavní barva     #98d4e4 blankytná ×58 ← podpis
     #cfd8dc · #90a4ae · #eceff1 studené modrošedé (Material) · Roboto

   Franšízor je MODRÝ stejně jako my, takže kobalt z loga nás neodliší.
   Odlišení stojí na čtyřech věcech:
     1. TEPLÉ neutrály (len, písek) proti jejich studeným modrošedým
     2. žádná světle modrá, ani jako tónování ploch
     3. patkové písmo proti Robotu
     4. editoriální stavba proti Material kartám

   CO SI ZADAVATEL VYŽÁDAL ZPĚT (needitovat bez domluvy)
   -----------------------------------------------------
     · PATIČKA — tmavá s kobaltovým pruhem nahoře a odsazením (§13)
     · KARTA PRODEJNY — světlá karta, ne tmavý pás přes celou šířku (§10)

   PRAVIDLO BAREV: mimo `:root` se neobjeví žádný `#hex` ani `rgb()`.
   ========================================================================== */

/* ==========================================================================
   1. PÍSMA — vendorovaná lokálně, viz fonts/README.md
   ========================================================================== */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("fonts/fraunces-var-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: 500 700;
    font-display: swap;
    src: url("fonts/fraunces-var-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: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/source-sans-3-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: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/source-sans-3-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: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/source-sans-3-600-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: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/source-sans-3-600-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;
}

/* ==========================================================================
   2. TOKENY
   ========================================================================== */

:root {
    --kobalt: #114378;
    --kobalt-tmavy: #0a2c52;
    --kobalt-hluboky: #071d38;

    /* TEPLÉ neutrály — hlavní odlišení od ORIONu */
    --len: #f7f3ea;
    --len-tmavy: #efe8d9;
    --pisek: #e3d9c4;
    --vlasova: #ddd3bf;
    --inkoust: #191713;
    --inkoust-tlumeny: #6a6154;
    --bila: #ffffff;

    --zelen: #1d6b4a;
    --zelen-tmava: #14502f;
    --zelen-jemna: #e9f1ec;

    --na-tmavem: #f2ede2;
    --na-tmavem-tlumeny: #a9a294;
    --na-tmavem-slaby: #7c7568;
    --zavoj: rgba(247, 243, 234, 0.14);
    --zavoj-slaby: rgba(247, 243, 234, 0.07);

    --color-bg: var(--len);
    --color-bg-soft: var(--len-tmavy);
    --color-bg-sunken: var(--pisek);
    --color-fg: var(--inkoust);
    --color-fg-muted: var(--inkoust-tlumeny);
    --color-fg-faint: var(--inkoust-tlumeny);
    --color-border: var(--vlasova);
    --color-border-strong: var(--inkoust);

    --color-accent: var(--kobalt);
    --color-accent-hover: var(--kobalt-tmavy);
    --color-accent-soft: var(--len-tmavy);
    --color-focus: var(--kobalt);

    --color-cta: var(--zelen);
    --color-cta-hover: var(--zelen-tmava);
    --color-cta-soft: var(--zelen-jemna);

    --shadow-soft: none;
    --color-shadow: transparent;

    --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ŠKÁLA NADPISŮ. Původní strop byl 6,5 rem (104 px) u `xxl` a 1,9 rem
       u `l`; `l` se přitom používal i na názvy v kartičkách, takže dlaždice
       zboží měly nadpisy jako sekce. Poměry jsou srovnané: hero zůstává
       výrazné, ale nepřeroste stránku, a kartička dostala vlastní stupeň
       `m`, který je velikostí textu, ne nadpisu. */
    --nadpis-xxl: clamp(2.1rem, 1.15rem + 4vw, 4.5rem);
    --nadpis-xl: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
    --nadpis-l: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
    --nadpis-m: clamp(1rem, 0.96rem + 0.22vw, 1.12rem);

    --radius: 2px;
    --radius-lg: 4px;
    --container: 76rem;
}

/* ==========================================================================
   3. ZÁKLAD
   ========================================================================== */

body {
    font-family: var(--font-body);
    background: var(--len);
    color: var(--inkoust);
    font-size: 1.0625rem;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 0, "WONK" 0;
}

.verzalky {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--inkoust-tlumeny);
    margin: 0;
}

/* ==========================================================================
   4. HLAVIČKA
   ========================================================================== */

.site-header {
    background: var(--len);
    border-bottom: 1px solid var(--vlasova);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__logo { height: 2.4rem; }

.site-header__brand-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

.site-header__brand-claim {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--inkoust-tlumeny);
}

.site-nav__link {
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--inkoust);
    text-transform: uppercase;
}

.site-nav__link:hover { color: var(--kobalt); }

/* ==========================================================================
   5b. OZNÁMENÍ NAD HLAVIČKOU (modul `info`, zobrazení `topbar`)
   ========================================================================== */

.cms-info-notice {
    background: var(--kobalt-hluboky);
    color: var(--na-tmavem);
    border: 0;
    border-bottom: 1px solid var(--kobalt);
}

.cms-info-notice__title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--bila);
}

.cms-info-notice__body { color: var(--na-tmavem-tlumeny); }

.cms-info-notice a { color: var(--bila); }

.cms-info-notice__close,
.cms-info-notice__confirm {
    color: var(--na-tmavem);
    background: transparent;
    border: 1px solid var(--na-tmavem-slaby);
    border-radius: var(--radius);
}

.cms-info-notice__close:hover,
.cms-info-notice__confirm:hover {
    background: var(--zavoj);
    color: var(--bila);
}

/* ==========================================================================
   5.–6. ÚVODNÍ PÁS (hero) — fotka je POZADÍ, ne pruh nad stránkou
   --------------------------------------------------------------------------
   Nahradilo samostatný `.banner` a typografický `.uvod`. Dřív to byly dvě
   věci nad sebou: fotka s tmavým popiskem a pod ní teprve úvod webu.
   Zabíralo to půl obrazovky a nesouviselo to spolu.

   Dvě velikosti: `--uvod` na domovské stránce (claim, odkazy),
   `--sekce` na zbytku webu (jen nadpis stránky).
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-items: center;
    background: var(--kobalt-hluboky);
}

.hero--uvod {
    min-height: clamp(22rem, 42vw, 32rem);
    padding-block: clamp(var(--space-6), 6vw, var(--space-8));
}

.hero--sekce {
    min-height: clamp(9rem, 17vw, 14rem);
    padding-block: clamp(var(--space-5), 4vw, var(--space-7));
}

.hero__pozadi {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 900ms ease;
}

.hero__slide.je-aktivni { opacity: 1; }

.hero__slide picture,
.hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ZÁVOJ. Není to dekorace, je to podmínka čitelnosti: fotky jdou od skoro
   bílých regálů po tmavý exteriér a text musí být čitelný nad každou z nich.
   Tmavne se kobaltem, ne černou — ať pás zůstane v paletě webu.
   Vodorovný přechod drží text vlevo krytý, vpravo nechá fotku vyniknout. */
.hero__zavoj {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right,
            rgba(7, 29, 56, 0.90) 0%,
            rgba(7, 29, 56, 0.74) 45%,
            rgba(7, 29, 56, 0.42) 100%),
        linear-gradient(to top,
            rgba(7, 29, 56, 0.55) 0%,
            rgba(7, 29, 56, 0) 55%);
}

.hero__obsah {
    position: relative;
    z-index: 1;
    color: var(--na-tmavem);
}

.hero--uvod .hero__obsah { max-width: 44rem; }

/* Stín navíc k závoji — pojistka pro místa, kde fotka vyjde světlá i pod ním. */
.hero__obsah :where(h1, h2, p) {
    text-shadow: 0 1px 3px rgba(7, 29, 56, 0.55);
}

.hero__obsah .verzalky { color: var(--na-tmavem-tlumeny); }

.hero__obsah :where(h1, h2) {
    font-size: var(--nadpis-xxl);
    line-height: 0.96;
    margin: var(--space-3) 0 var(--space-4);
    color: var(--bila);
    text-wrap: balance;
}

.hero--sekce .hero__obsah :where(h1, h2) {
    font-size: var(--nadpis-xl);
    margin: 0;
}

.hero__obsah p {
    font-size: clamp(1rem, 0.94rem + 0.35vw, 1.2rem);
    line-height: 1.55;
    color: var(--na-tmavem);
    max-width: 34rem;
}

.hero__znak {
    position: absolute;
    top: 50%;
    right: -4rem;
    transform: translateY(-50%);
    width: 26rem;
    height: 26rem;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

.hero__akce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-5);
}

/* Odkazy v pásu jsou na tmavém — výchozí kobaltová varianta by zmizela. */
.hero__akce .odkaz-sipka {
    color: var(--bila);
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.hero__akce .odkaz-sipka:hover {
    color: var(--bila);
    border-bottom-color: var(--bila);
}

.odkaz-sipka {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--kobalt);
    border-bottom: 2px solid var(--kobalt);
    padding-bottom: 2px;
}

.odkaz-sipka::after { content: " →"; }

.odkaz-sipka:hover {
    color: var(--inkoust);
    border-bottom-color: var(--inkoust);
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
}

@media (max-width: 48rem) {
    .hero__znak { display: none; }

    /* Na úzké obrazovce nemá vodorovný přechod smysl — text jde přes celou
       šířku, takže se tmaví rovnoměrně. */
    .hero__zavoj {
        background:
            linear-gradient(to top,
                rgba(7, 29, 56, 0.88) 0%,
                rgba(7, 29, 56, 0.62) 60%,
                rgba(7, 29, 56, 0.5) 100%);
    }
}

/* ==========================================================================
   7. SORTIMENT — kartičky s medailonem
   --------------------------------------------------------------------------
   Kartičky, ne řádkový seznam: na úvodní stránce je jen VÝBĚR kategorií
   a pod ním odkaz na úplný sortiment. Až kategorií přibude, výběr se nemění —
   mění se jen číslo v šabloně.
   ========================================================================== */

.sortiment { padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }

.sortiment__hlavicka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--vlasova);
    padding-bottom: var(--space-3);
}

.sortiment__hlavicka :where(h2) {
    font-size: var(--nadpis-xl);
    margin: 0;
}

.karty {
    display: grid;
    /* `min(100%, …)` je to podstatné: bez něj drží stopa 15 rem i na
       obrazovce, která ji neunese, a mřížka přeteče z viewportu ven.
       S ním spadne na jeden sloupec sama, bez media query. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.karta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-5);
    background: var(--bila);
    border: 1px solid var(--vlasova);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
}

.karta:hover {
    border-color: var(--kobalt);
    background: var(--len-tmavy);
}

.karta__nazev {
    font-family: var(--font-heading);
    font-weight: 600;
    /* Vlastní stupeň, ne `--nadpis-l`: je to popisek dlaždice, ne nadpis
       sekce. S nadpisovou velikostí byly kartičky zboží obří. */
    font-size: var(--nadpis-m);
    line-height: 1.22;
    overflow-wrap: anywhere;
    color: var(--inkoust);
    margin: 0;
}

.karta:hover .karta__nazev { color: var(--kobalt); }

.karta__popis {
    font-size: 0.95rem;
    color: var(--inkoust-tlumeny);
    margin: 0;

    /* Perexy zboží jsou různě dlouhé — u části položek je to jedna kóta,
       u části celý odstavec z Orionu. Bez ořezu byla jedna karta v mřížce
       třikrát vyšší než sousední. Ořezává se zobrazení, ne data. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.karta__pocet {
    margin-top: auto;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inkoust-tlumeny);
    font-weight: 600;
}

.karta__obrazek {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--vlasova);
}

.sortiment__vic {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   8. MEDAILON — kruh z loga
   ========================================================================== */

.medailon {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kobalt);
    color: var(--bila);
    box-shadow: inset 0 0 0 1px var(--kobalt), inset 0 0 0 3px var(--len),
        inset 0 0 0 4px var(--kobalt);
    flex: none;
}

.medailon svg {
    width: 58%;
    height: 58%;
    fill: currentColor;
    display: block;
}

.medailon--l { width: 3.75rem; height: 3.75rem; }
.medailon--m { width: 2.75rem; height: 2.75rem; }

.karta:hover .medailon {
    background: var(--kobalt-tmavy);
    box-shadow: inset 0 0 0 1px var(--kobalt-tmavy), inset 0 0 0 3px var(--len-tmavy),
        inset 0 0 0 4px var(--kobalt-tmavy);
}

.uvod__znak .medailon {
    width: 100%;
    height: 100%;
    background: none;
    color: var(--kobalt);
    box-shadow: none;
}

.uvod__znak .medailon svg { width: 100%; height: 100%; }

/* ==========================================================================
   9. VÝHODY — ikony + krátký text
   --------------------------------------------------------------------------
   Sekce má smysl jen s informací, která NENÍ jinde na stránce. Duplicitní
   údaje (adresa, hodiny, telefon) sem nepatří — jsou v kartě prodejny.
   ========================================================================== */

.vyhody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-5);
    padding-block: var(--space-6);
    border-block: 1px solid var(--vlasova);
    list-style: none;
    margin: 0;
}

.vyhoda {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
}

.vyhoda__nadpis {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.06rem;
    margin: 0 0 var(--space-1);
    color: var(--inkoust);
}

.vyhoda__text {
    margin: 0;
    font-size: 0.94rem;
    color: var(--inkoust-tlumeny);
}

/* ==========================================================================
   10. PRODEJNA — tmavý pás přes celou šířku
   --------------------------------------------------------------------------
   ⚠ SCHVÁLENO ZADAVATELEM — NEEDITOVAT BEZ DOMLUVY.
   Už dvakrát jsem tenhle blok přepsal, aniž o to někdo požádal. Podoba je
   z commitu `7d7c468` a vrací se do ní beze změny.

   Je to jediná plná plocha na stránce: kotva, ke které se má návštěvník
   dostat — proto kontrast, ne další světlá krabice.

   Pás vyžaduje třídu `.pas` v šabloně, která ho vytáhne přes celou šířku
   okna i uvnitř `.container`.
   ========================================================================== */

/* Pás přes celou šířku okna, i když je uvnitř `.container`. */
/* Pás přes celou šířku okna zevnitř `.container`.

   `50vw` počítá i se svislým posuvníkem, takže pás vyčnívá o jeho šířku
   a stránka dostane vodorovný posuvník. Přesně spočítat to bez JS nejde,
   proto se ten přesah UŘÍZNE na `body` (`overflow-x: clip`) — `clip`,
   ne `hidden`: `hidden` by z těla udělalo rolovací kontejner a rozbilo
   `position: sticky` v hlavičce i v postranním menu. */
.pas {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

body {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   KARTA MAJITELE

   Na ŠÍŘKU OBSAHU, ne přes celé okno: je to karta, ne pás. Vzdušnější
   proto, že kolem ní zůstane stejný okraj jako u dlaždic sortimentu nad ní,
   takže se úvodní stránka nerozpadne na střídání širokých pruhů.

   Barevně jde za kartou prodejny (tmavý kobalt) — patří k sobě: kdo prodává
   a kde. Fotka je kruhová: portrét má bílé pozadí a na tmavé kartě by ze
   čtverce byl bílý blok. Kruh z něj udělá medailon, což je tvarosloví,
   které web už používá u kategorií.
   -------------------------------------------------------------------------- */

.majitel {
    background: var(--kobalt-hluboky);
    color: var(--na-tmavem);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    margin-block: clamp(var(--space-6), 5vw, var(--space-8));
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    align-items: center;
}

.majitel:not(:has(.majitel__foto)) {
    grid-template-columns: minmax(0, 1fr);
}

.majitel__foto {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    background: var(--len);
    box-shadow: 0 0 0 1px var(--kobalt), 0 0 0 5px var(--kobalt-hluboky),
        0 0 0 6px var(--zavoj);
}

.majitel__obsah { max-width: 44rem; }

.majitel .verzalky { color: var(--na-tmavem-tlumeny); }

.majitel :where(h2) {
    font-size: var(--nadpis-l);
    color: var(--bila);
    margin: var(--space-2) 0 var(--space-3);
}

.majitel__text {
    margin: 0;
    color: var(--na-tmavem);
    line-height: 1.6;
}

.majitel__akce { margin: var(--space-4) 0 0; }

.majitel__akce .odkaz-sipka {
    color: var(--bila);
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.majitel__akce .odkaz-sipka:hover { border-bottom-color: var(--bila); }

@media (max-width: 40rem) {
    .majitel {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }
    .majitel__foto { max-width: 9rem; }
}

/* --------------------------------------------------------------------------
   FOTKA V KARTĚ PRODEJNY

   Stejný princip jako úvodní pás: snímek, přes něj závoj, přes něj text.
   Na rozdíl od pásu se ale NESTŘÍDÁ — karta prodejny ukazuje pořád tutéž
   prodejnu. Závoj je tu hustší než v pásu: pod textem leží adresa, hodiny
   a telefon, tedy údaje, které se musí dát přečíst na první pokus.
   -------------------------------------------------------------------------- */

.prodejna-pas--foto { position: relative; isolation: isolate; }

.prodejna-pas__pozadi {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.prodejna-pas__pozadi img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prodejna-pas__zavoj {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right,
            rgba(7, 29, 56, 0.94) 0%,
            rgba(7, 29, 56, 0.86) 55%,
            rgba(7, 29, 56, 0.62) 100%);
}

.prodejna-pas__obsah { position: relative; z-index: 1; }

@media (max-width: 48rem) {
    .prodejna-pas__zavoj {
        background: linear-gradient(to bottom,
            rgba(7, 29, 56, 0.92) 0%,
            rgba(7, 29, 56, 0.88) 100%);
    }
}

.prodejna-pas {
    background: var(--kobalt-hluboky);
    color: var(--na-tmavem);
    padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}

.prodejna-pas .verzalky {
    color: var(--na-tmavem-tlumeny);
}

.prodejna-pas :where(h2) {
    font-size: var(--nadpis-xl);
    color: var(--bila);
    margin: var(--space-3) 0 var(--space-5);
}

.prodejna-pas__mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-6);
    align-items: start;
}

.prodejna-pas__vchod {
    border-left: 2px solid var(--zelen);
    padding-left: var(--space-3);
    font-weight: 600;
    color: var(--bila);
}

.prodejna-pas__hodiny {
    width: 100%;
    border-collapse: collapse;
}

.prodejna-pas__hodiny th,
.prodejna-pas__hodiny td {
    border-bottom: 1px solid var(--zavoj-slaby);
    padding: var(--space-2) 0;
    color: var(--na-tmavem);
}

.prodejna-pas__hodiny th {
    font-weight: 400;
    text-align: left;
    color: var(--na-tmavem-tlumeny);
}

.prodejna-pas__hodiny td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.prodejna-pas__kontakt {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.prodejna-pas a {
    color: var(--na-tmavem);
}

/* ==========================================================================
   11. TLAČÍTKA
   ========================================================================== */

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: var(--space-3) var(--space-5);
}

.btn--cta { background: var(--zelen); color: var(--bila); }
.btn--cta:hover { background: var(--zelen-tmava); color: var(--bila); }

.btn--primary { background: var(--kobalt); color: var(--bila); }
.btn--primary:hover { background: var(--kobalt-tmavy); }

.btn--ghost {
    background: transparent;
    color: var(--kobalt);
    border-color: var(--vlasova);
}

.btn--ghost:hover {
    border-color: var(--kobalt);
    background: var(--len-tmavy);
}

/* ==========================================================================
   12. PODKATEGORIE
   ========================================================================== */

.block-subcategories ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0 var(--space-6);
    border-top: 1px solid var(--vlasova);
    padding: 0;
    margin: var(--space-5) 0 0;
    list-style: none;
}

.block-subcategories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--vlasova);
    font-weight: 600;
    text-decoration: none;
    color: var(--inkoust);
}

.block-subcategories a::after { content: "→"; color: var(--kobalt); opacity: 0; }
.block-subcategories a:hover { color: var(--kobalt); }
.block-subcategories a:hover::after { opacity: 1; }

/* ==========================================================================
   12b. STRÁNKA KATEGORIE — dva sloupce, strom vlevo
   ========================================================================== */

.drobecky {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--vlasova);
    font-size: 0.9rem;
}

.drobecky ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.drobecky li + li::before {
    content: "›";
    margin-right: var(--space-2);
    color: var(--inkoust-tlumeny);
}

.drobecky a { color: var(--inkoust-tlumeny); text-decoration: none; }
.drobecky a:hover { color: var(--kobalt); }
.drobecky [aria-current="page"] { font-weight: 600; }

.kat {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
    padding-block: var(--space-6);
}

.kat__menu {
    position: sticky;
    top: 5rem;
    border-right: 1px solid var(--vlasova);
    padding-right: var(--space-5);
}

/* --------------------------------------------------------------------------
   POSTRANNÍ STROM — rozbalovací, ne jen výřez

   Dřív to byl plochý seznam, ze kterého se propouštěly jen některé uzly:
   hlouběji se člověk dostal až proklikem. Teď má každá větev přepínač,
   takže jde otevřít na místě. Odsazení dělá vnořený `<ul>`, ne třída na
   úrovni — hloubka tak není omezená pěti připravenými pravidly.
   -------------------------------------------------------------------------- */

.kat-strom {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

/* Vnořené úrovně: odsazení a jemná linka, ať je vidět, kam patří. */
.kat-strom .kat-strom {
    margin: 0;
    padding-left: var(--space-4);
    border-left: 1px solid var(--vlasova);
}

.kat-strom__radek {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    border-bottom: 1px solid var(--len-tmavy);
}

.kat-strom__odkaz {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2) 0;
    text-decoration: none;
    color: var(--inkoust);
    font-size: 0.95rem;
    line-height: 1.35;
}

.kat-strom__odkaz:hover { color: var(--kobalt); }

/* Otevřená větev: aktuální kategorie plnou vahou, předci jen zvýrazněně. */
.kat-strom__odkaz.je-aktivni {
    font-weight: 700;
    color: var(--kobalt);
    box-shadow: inset 3px 0 0 var(--kobalt);
    padding-left: var(--space-3);
}

.kat-strom__odkaz.je-v-linii { font-weight: 600; color: var(--kobalt); }

/* Přepínač je čtvereček se šipkou. Musí mít vlastní dosažitelnou plochu —
   proto `flex: none` a pevná šířka, ne jen ikonka v textu. */
.kat-strom__prepinac {
    flex: none;
    width: 2rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--inkoust-tlumeny);
    display: grid;
    place-items: center;
}

.kat-strom__prepinac::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 160ms ease;
}

.kat-strom__prepinac[aria-expanded="true"]::before { transform: rotate(45deg); }
.kat-strom__prepinac:hover { color: var(--kobalt); }

@media (prefers-reduced-motion: reduce) {
    .kat-strom__prepinac::before { transition: none; }
}

/* --------------------------------------------------------------------------
   FILTR PODLE PODKATEGORIE — schovaný accordion

   Nahradil dvě věci, které dělaly skoro totéž: kartičky podkategorií
   (odkazovaly) a pruh filtru (filtroval). Kartičky teď filtrují a proklik
   obstarává strom vlevo. Seznam je zavřený, protože na „Vybavení kuchyně"
   je podkategorií devět a odsouvaly zboží pod ohyb.
   -------------------------------------------------------------------------- */

.podfiltr { margin-bottom: var(--space-5); }

.podfiltr__radek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.podfiltr__prepinac {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--inkoust);
    background: var(--len-tmavy);
    border: 1px solid var(--vlasova);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}

.podfiltr__prepinac::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 160ms ease;
}

.podfiltr__prepinac[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.podfiltr__prepinac:hover { border-color: var(--kobalt); color: var(--kobalt); }

/* Aktivní filtr musí být poznat na první pohled — jinak člověk nepochopí,
   proč vidí míň zboží, než čekal. */
.podfiltr.je-aktivni .podfiltr__prepinac {
    background: var(--kobalt);
    border-color: var(--kobalt);
    color: var(--bila);
}

.podfiltr.je-aktivni .podfiltr__prepinac:hover { color: var(--bila); }

.podfiltr__pocet {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--inkoust-tlumeny);
    background: var(--len);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.podfiltr.je-aktivni .podfiltr__pocet {
    color: var(--bila);
    background: rgba(255, 255, 255, 0.18);
}

.podfiltr__zrusit { font-size: 0.92rem; }

.podfiltr__seznam { margin-top: var(--space-4); }

/* Filtrační kartičky jsou menší než kartičky sortimentu — je to ovládání
   výpisu, ne obsah stránky. */
/* Specificita schválně stejná jako u `.kat__obsah .karty` výš — jinak by
   pravidlo pro zboží přebilo i kartičky filtru, které mají být menší. */
.kat__obsah .karty--filtr,
.karty--filtr {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-3);
}

/* Zboží v kategorii sdílí sloupec se stromem, takže má užší stopu:
   při 13 rem vycházel na tabletu jediný sloupec přes celou šířku. */
.kat__obsah .karty {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
}

.karta--filtr {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
}

.karta--filtr .karta__nazev {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
}

.karta--filtr.je-aktivni {
    border-color: var(--kobalt);
    box-shadow: inset 0 0 0 1px var(--kobalt);
}

@media (prefers-reduced-motion: reduce) {
    .podfiltr__prepinac::after { transition: none; }
}

.kat__perex {
    font-size: 1.12rem;
    color: var(--inkoust);
    max-width: 44rem;
}

.kat__sekce { margin-top: var(--space-7); }

.kat__prazdno {
    border: 1px dashed var(--vlasova);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    color: var(--inkoust-tlumeny);
    background: var(--len-tmavy);
}

/* -- filtr --------------------------------------------------------------- */

.filtr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.filtr__volba {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--vlasova);
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--inkoust);
    background: var(--bila);
}

.filtr__volba:hover { border-color: var(--kobalt); color: var(--kobalt); }

.filtr__volba.je-aktivni {
    background: var(--kobalt);
    border-color: var(--kobalt);
    color: var(--bila);
}

/* ==========================================================================
   13. PATIČKA — vyžádáno zadavatelem, needitovat bez domluvy
   ========================================================================== */

.site-footer {
    background: var(--inkoust);
    color: var(--na-tmavem);
    border-top: 5px solid var(--kobalt);
    margin-top: var(--space-8);
}

.site-footer a { color: var(--na-tmavem); }
.site-footer a:hover { color: var(--bila); }

.site-footer__identita { color: var(--na-tmavem-tlumeny); }

.site-footer__identita strong {
    color: var(--na-tmavem);
    font-family: var(--font-heading);
    font-weight: 600;
}

.site-footer__copy {
    color: var(--na-tmavem-slaby);
    font-size: var(--font-size-sm);
}

.site-footer__site {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
}

.site-footer__site a {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.78rem;
    text-decoration: none;
    border-bottom: 1px solid var(--na-tmavem-slaby);
    padding-bottom: 2px;
}

.site-footer__site a:hover { border-bottom-color: var(--bila); }

/* ==========================================================================
   14. POZNÁMKA (volný pruh)
   ========================================================================== */

.pozn {
    border-top: 1px solid var(--vlasova);
    border-bottom: 1px solid var(--vlasova);
    padding-block: var(--space-5);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}

.pozn::before {
    content: "";
    width: 3px;
    align-self: stretch;
    background: var(--zelen);
}

.pozn :where(h2, h3) {
    font-size: var(--nadpis-l);
    margin: 0 0 var(--space-2);
    color: var(--inkoust);
}

.pozn p { margin: 0; color: var(--inkoust-tlumeny); max-width: 46rem; }

/* ==========================================================================
   15. MOBIL
   ========================================================================== */

@media (max-width: 47.99rem) {
    body { font-size: 1rem; }

    /* Počet sloupců si mřížka určí sama podle šířky (viz `.karty`).
       Napevno vnucené dva sloupce přetékaly na úzkých telefonech ven
       z obrazovky — měřeno na 360 px. */
    .karty { gap: var(--space-3); }
    .karta { padding: var(--space-4); }
    .medailon--l { width: 3rem; height: 3rem; }

    .block-subcategories ul { grid-template-columns: minmax(0, 1fr); }
    .block-subcategories a::after { opacity: 1; }

    /* Na mobilu jde strom pod obsah, ne nad něj — jinak by návštěvník musel
       přerolovat 86 odkazů, než uvidí, na co klikl. */
    .kat {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .kat__menu {
        position: static;
        order: 2;
        border-right: 0;
        border-top: 1px solid var(--vlasova);
        padding-right: 0;
        padding-top: var(--space-5);
    }

    .kat__obsah { order: 1; }

}

@media (prefers-reduced-motion: no-preference) {
    .karta,
    .block-subcategories a,
    .btn,
    .odkaz-sipka {
        transition: background-color 150ms ease, color 150ms ease,
            border-color 150ms ease, opacity 150ms ease;
    }
}

/* ============================================================
   §16 COOKIE LIŠTA — srovnání výraznosti tlačítek
   ============================================================
   Zadání (`05-plan.md` Č6) žádá „Odmítnout vše" a „Přijmout vše" na první
   vrstvě STEJNĚ VÝRAZNÁ. Výchozí skin modulu dává přijetí třídu
   `consent__btn--primary` s plnou akcentní výplní, kdežto odmítnutí nechává
   neutrální — tedy přesně ten rozdíl, kvůli kterému lidé klikají na přijetí,
   aniž by volili.

   Do modulu se nesahá. Obě volby tady dostanou TOTOŽNÝ vzhled: stejná výplň,
   rám, velikost i tučnost. Rozlišuje je jen popisek, což je záměr.

   „Nastavení" naopak SMÍ být tišší — není to volba, je to odbočka
   k podrobnostem. Zůstává čitelné a klikatelné, jen nesoutěží s tou dvojicí. */

.consent__btn[data-consent-accept-all],
.consent__btn[data-consent-reject] {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong);
    color: var(--color-fg);
    font-weight: 600;
    min-width: 12rem;
}

.consent__btn[data-consent-accept-all]:hover,
.consent__btn[data-consent-reject]:hover {
    background: var(--color-bg-sunken);
    border-color: var(--color-fg-muted);
}

.consent__btn[data-consent-prefs-toggle] {
    background: transparent;
    border-color: transparent;
    color: var(--color-fg-muted);
    text-decoration: underline;
    font-weight: 400;
}

.consent__btn[data-consent-prefs-toggle]:hover {
    background: transparent;
    color: var(--color-fg);
}

/* ============================================================
   §17 STRÁNKA 404 — rozcestník, ne slepá ulička
   ============================================================
   Obslouží ~4 400 vstupů ze starého e-shopu, které nemají protějšek. */

.chyba404 { max-width: 46rem; }

.chyba404__uvod {
    color: var(--color-fg-muted);
    margin-bottom: var(--space-6);
}

.chyba404__blok {
    padding-top: var(--space-5);
    margin-top: var(--space-5);
    border-top: 1px solid var(--vlasova);
}

.chyba404__blok h2 { margin-bottom: var(--space-3); }

.chyba404__hledani {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.chyba404__label {
    flex: 1 0 100%;
    color: var(--color-fg-muted);
    font-size: 0.875rem;
}

.chyba404__vstup {
    flex: 1 1 18rem;
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-fg);
}

.chyba404__kategorie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ============================================================
   §18 PŘEHLED ZNAČEK
   ============================================================
   Rozvržení NESTOJÍ NA OBRÁZKU (`AC-12`): loga zatím nemáme a dlaždice musí
   držet tvar i bez nich. Až přijdou, přibude uvnitř `<img>` a mřížka se
   nemění. */

.znacky__uvod {
    max-width: 44rem;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-6);
}

.znacky__seznam {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.znacka {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 5.5rem;
    padding: var(--space-4);
    border: 1px solid var(--vlasova);
    border-radius: var(--radius);
    background: var(--color-bg-soft);
}

.znacka__nazev {
    font-weight: 600;
    font-size: 1.0625rem;
}

a.znacka__nazev { text-decoration: none; }
a.znacka__nazev:hover { text-decoration: underline; }

.znacka__popis {
    margin: var(--space-2) 0 0;
    font-size: 0.875rem;
    color: var(--color-fg-muted);
}

/* ============================================================
   §19 PRÁZDNÉ BLOKY LAYOUTU
   ============================================================
   `LayoutRenderer` vykreslí obal bloku i tehdy, když pole není vyplněné —
   a `.block` má `margin-bottom`, takže tři nevyplněná pole udělají na stránce
   díru, kterou nikdo nezadal. Na stránkách značek je to vidět hned: layout
   nabízí logo, perex a popis, a dokud je klient nevyplní, jsou prázdné všechny.

   `:empty` samo nestačí — obal nevyplněného rich-textu obsahuje bílé znaky,
   takže se pod `:empty` nevejde. Proto ještě „nemá ani jedno prvkové dítě":
   vyplněný rich-text vždycky nese aspoň `<p>`, prázdný nic. */

.block:empty,
.block-field:not(:has(*)),
.block-rich-text:not(:has(*)) {
    display: none;
}

/* --------------------------------------------------------------------------
   12. DETAIL PRODUKTU (`site/skins/catalog/content/catalog_item.php`)

   Fotka vedle údajů, ne nad nimi: layout typu `produkt` je plochý `stack`
   a ten se na detail zboží nehodí. Na mobilu se sloupce skládají pod sebe.
   -------------------------------------------------------------------------- */

.produkt {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-6);
    align-items: start;
    margin-bottom: var(--space-7);
}

.produkt__foto {
    background: var(--len-tmavy);
    border: 1px solid var(--vlasova);
    border-radius: var(--radius);
    overflow: hidden;
}

.produkt__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Prázdný obal by jinak spadl na nulovou výšku a rozhodil mřížku. */
.produkt__foto:empty {
    aspect-ratio: 1 / 1;
}

.produkt__info h1 {
    margin-top: 0;
}

.produkt__perex {
    font-size: 1.05rem;
    color: var(--inkoust);
    margin-bottom: var(--space-5);
}

.produkt__data {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem var(--space-4);
    margin: 0 0 var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--vlasova);
}

.produkt__data dt {
    color: var(--inkoust-tlumeny);
    font-size: 0.9rem;
}

.produkt__data dd {
    margin: 0;
    font-size: 0.95rem;
}

.produkt__dotaz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin: 0;
}

.produkt__dotaz-pozn {
    color: var(--inkoust-tlumeny);
    font-size: 0.9rem;
}

.produkt__popis {
    max-width: 46rem;
    margin-bottom: var(--space-7);
}

.produkt__popis h2 {
    margin-bottom: var(--space-3);
}

@media (max-width: 48rem) {
    .produkt {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }
}

/* Stránkování výpisu zboží — bez něj vysype značka Orion 1 664 kartiček naráz. */
.strankovani {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--vlasova);
}

.strankovani__krok {
    font-weight: 600;
    color: var(--kobalt);
    border: 1px solid var(--vlasova);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
}

.strankovani__krok:hover {
    border-color: var(--kobalt);
    background: var(--len-tmavy);
}

.strankovani__stav { color: var(--inkoust-tlumeny); font-size: 0.95rem; }
.strankovani__pocet { color: var(--inkoust-tlumeny); }

/* --------------------------------------------------------------------------
   GALERIE PRODEJNY (`content/prodejna.php`)

   Tytéž snímky, které se střídají v úvodním pásu — jen tady stojí vedle sebe,
   aby si je člověk mohl projít najednou. Zdrojem je bannerová SADA, ne pevný
   seznam: když klient fotky v administraci vymění, vymění se na obou místech.
   -------------------------------------------------------------------------- */

.prodejna-text { max-width: 46rem; }

.galerie-prodejny { padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }

.galerie-prodejny__mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.galerie-prodejny__polozka figure {
    margin: 0;
    background: var(--bila);
    border: 1px solid var(--vlasova);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.galerie-prodejny__polozka img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.galerie-prodejny__polozka figcaption {
    padding: var(--space-3) var(--space-4);
    font-size: 0.92rem;
    color: var(--inkoust-tlumeny);
}

/* Souvislý text má mít čitelnou délku řádku. Bez omezení se na širokém okně
   táhne přes 1 180 px, což je zhruba dvojnásobek toho, co se pohodlně čte
   (stránka „O nás" po naplnění z archivu). Netýká se mřížek ani kartiček —
   jen textových bloků. */
.block-text,
.block-rich-text {
    max-width: 46rem;
}

/* --------------------------------------------------------------------------
   PRAKTICKÉ ÚDAJE (`content/prodejna.php`)

   Holé údaje na světlém podkladu, ne tmavá karta z úvodní stránky. Na úvodu
   je karta prodejny upoutávka; tady je to cíl cesty — člověk sem přišel
   právě pro adresu a otevírací dobu, takže se nemá přes co prokousávat.
   -------------------------------------------------------------------------- */

.udaje {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    padding-block: clamp(var(--space-5), 4vw, var(--space-6));
    border-block: 1px solid var(--vlasova);
    margin-bottom: clamp(var(--space-6), 5vw, var(--space-7));
}

.udaje__blok :where(h2) {
    font-size: var(--nadpis-l);
    margin: 0 0 var(--space-3);
}

.udaje__adresa { margin: 0; line-height: 1.6; }

.udaje__vchod {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--zelen);
    color: var(--inkoust-tlumeny);
}

.udaje__hodiny { width: 100%; border-collapse: collapse; }

.udaje__hodiny th,
.udaje__hodiny td {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--len-tmavy);
    font-weight: 400;
    text-align: left;
}

.udaje__hodiny td { text-align: right; font-variant-numeric: tabular-nums; }

.udaje__kontakt {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   KONTAKT NA MAJITELE (`content/kontakt.php`)

   Místo formuláře. U krámu s osobní obsluhou je konkrétní člověk s číslem
   důvěryhodnější než textové pole — a web sám na produktech říká, že se má
   dostupnost ověřit; tohle je to místo, kde se ověřuje.
   -------------------------------------------------------------------------- */

.kontakt-osoba {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    align-items: start;
    margin-block: clamp(var(--space-5), 4vw, var(--space-7));
}

.kontakt-osoba:not(:has(.kontakt-osoba__foto)) {
    grid-template-columns: minmax(0, 1fr);
}

.kontakt-osoba__foto {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    background: var(--len-tmavy);
    border: 1px solid var(--vlasova);
}

.kontakt-osoba__obsah { max-width: 42rem; }

.kontakt-osoba :where(h2) {
    font-size: var(--nadpis-l);
    color: var(--kobalt);
    margin: var(--space-2) 0 var(--space-3);
}

.kontakt-osoba__text { margin: 0 0 var(--space-5); line-height: 1.6; }

.kontakt-osoba__spojeni {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-4);
}

.kontakt-osoba__spojeni li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.kontakt-osoba__hodnota {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--kobalt);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.kontakt-osoba__hodnota:hover { text-decoration: underline; }

.kontakt-osoba__akce { margin: var(--space-5) 0 0; }

@media (max-width: 40rem) {
    .kontakt-osoba { grid-template-columns: minmax(0, 1fr); }
    .kontakt-osoba__foto { max-width: 9rem; }
}