/*
 * Barmuseum — verejný web.
 * Čierna a biela ako logo, jedna tmavočervená z plagátov starého webu.
 * Bez zostavovania: čistý CSS súbor.
 */

:root {
    --papier: #ffffff;
    --podklad: #f2f1ee;
    --atrament: #121212;
    --sede: #5d5d58;
    --ciara: #dedcd6;
    --cervena: #9a141b;
    --cervena-tmava: #760f14;
    --na-tmavom: #f4f3ef;
    --na-tmavom-sede: #b9b7b0;

    --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
    --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --s-xs: 0.8125rem;
    --s-s: 0.9375rem;
    --s-m: 1.0625rem;
    --s-l: 1.375rem;
    --s-xl: 1.875rem;
    --s-2xl: clamp(2.25rem, 5vw, 3.5rem);
    --s-3xl: clamp(2.75rem, 8vw, 5.75rem);

    --obal: 76rem;
    --okraj: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--papier);
    color: var(--atrament);
    font: 400 var(--s-m)/1.6 var(--text);
    font-stretch: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cervena); }

:focus-visible { outline: 3px solid var(--cervena); outline-offset: 3px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.obal {
    width: 100%;
    max-width: var(--obal);
    margin-inline: auto;
    padding-inline: var(--okraj);
}

.preskocit {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--atrament);
    color: var(--papier);
    padding: 0.5rem 1rem;
    z-index: 10;
}
.preskocit:focus { left: 1rem; }

/* ── Hlavička ─────────────────────────────────────────── */

.hlavicka {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--papier);
    border-bottom: 1px solid var(--atrament);
}

.hlavicka__riadok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.5rem;
    flex-wrap: wrap;
}

.logo img { height: 2.75rem; width: auto; }

.hlavicka nav { min-width: 0; }

main { flex: 1 0 auto; }

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
}

.menu a {
    font-weight: 600;
    font-size: var(--s-s);
    text-decoration: none;
    padding-block: 0.4rem;
    border-bottom: 2px solid transparent;
}
.menu a.je-aktivne { border-bottom-color: var(--cervena); }

@media (max-width: 40rem) {
    .hlavicka__riadok { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding-block: 0.6rem 0.2rem; }
    .logo img { height: 2.25rem; }
    .hlavicka nav { width: 100%; overflow-x: auto; }
    .menu { flex-wrap: nowrap; gap: 1.25rem; }
    .menu a { white-space: nowrap; display: inline-block; }
}

/* ── Typografia ───────────────────────────────────────── */

.nadpis-stranky {
    font-family: var(--display);
    font-size: var(--s-2xl);
    font-weight: 800;
    font-stretch: 80%;
    line-height: 1;
    letter-spacing: -0.01em;
}

.nadpis-sekcie {
    font-family: var(--display);
    font-size: var(--s-xl);
    font-weight: 750;
    font-stretch: 85%;
    line-height: 1.05;
}

.odkaz-dalej {
    font-weight: 600;
    font-size: var(--s-s);
    text-decoration: none;
    white-space: nowrap;
}

.sekcia { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.sekcia__hlavicka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.prazdne { color: var(--sede); padding-block: 2rem; }

/* ── Tlačidlá ─────────────────────────────────────────── */

.akcie { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.akcie--stlpec { flex-direction: column; }

.tlacidlo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.45rem 1rem;
    border: 1.5px solid var(--atrament);
    border-radius: 999px;
    background: transparent;
    color: var(--atrament);
    font: 600 var(--s-s)/1.1 var(--text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.tlacidlo:hover { background: var(--atrament); color: var(--papier); }

.tlacidlo--hlavne { background: var(--cervena); border-color: var(--cervena); color: var(--papier); }
.tlacidlo--hlavne:hover { background: var(--cervena-tmava); border-color: var(--cervena-tmava); color: var(--papier); }

.tlacidlo--svetle { border-color: var(--na-tmavom); color: var(--na-tmavom); }
.tlacidlo--svetle:hover { background: var(--na-tmavom); color: var(--atrament); }

.tlacidlo--velke { min-height: 3rem; padding-inline: 1.4rem; font-size: var(--s-m); }

.tlacidlo.je-neaktivne { opacity: 0.35; pointer-events: none; }

.stitok {
    display: inline-block;
    font-size: var(--s-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stitok--zrusene { color: var(--cervena); }
.stitok--velke { font-size: var(--s-s); margin-bottom: 0.5rem; }

/* ── Úvod: najbližšie podujatie ───────────────────────── */

.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(26rem, 52vw, 40rem);
    background: var(--atrament);
    color: var(--na-tmavom);
    overflow: hidden;
    isolation: isolate;
}

.hero__obrazok {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgb(18 18 18 / 0.55) 0%, rgb(18 18 18 / 0) 60%),
        linear-gradient(180deg, rgb(18 18 18 / 0) 20%, rgb(18 18 18 / 0.92) 90%);
}

.hero__text {
    display: grid;
    gap: 0.75rem;
    padding-block: 2.5rem clamp(2rem, 5vw, 3.5rem);
}

.hero__nadtitul {
    font-size: var(--s-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--na-tmavom-sede);
}

.hero__nazov {
    font-family: var(--display);
    font-size: var(--s-3xl);
    font-weight: 800;
    font-stretch: 75%;
    line-height: 0.92;
    letter-spacing: -0.015em;
    max-width: 16ch;
}
.hero__nazov a { text-decoration: none; }
.hero__nazov a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; }

.hero__termin {
    font-family: var(--display);
    font-size: var(--s-l);
    font-weight: 600;
    font-stretch: 85%;
}
.hero__termin span {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.45rem;
    background: var(--cervena);
    color: var(--papier);
}

.hero__podnadpis { max-width: 52ch; color: var(--na-tmavom-sede); }

.hero .akcie { margin-top: 0.75rem; }

.uvod-prazdny { padding-block: 5rem; display: grid; gap: 1rem; max-width: 48rem; }

/* ── Program: riadky ──────────────────────────────────── */

.zoznam { border-top: 1px solid var(--atrament); }

.riadok {
    display: grid;
    grid-template-columns: 4.5rem 4.5rem minmax(0, 1fr) auto;
    gap: 0.5rem 1.5rem;
    align-items: center;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--ciara);
}

.riadok__datum {
    display: grid;
    justify-items: center;
    text-decoration: none;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.riadok__den, .riadok__mesiac {
    font-size: var(--s-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sede);
}
.riadok__cislo {
    font-family: var(--display);
    font-size: 2.25rem;
    font-weight: 800;
    font-stretch: 80%;
    padding-block: 0.15rem;
}

.riadok__obrazok {
    display: block;
    width: 4.5rem;
    aspect-ratio: 1;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--podklad);
}
.riadok__obrazok img { width: 100%; height: 100%; object-fit: cover; }

.riadok__meta { font-size: var(--s-xs); color: var(--sede); }

.riadok__nazov {
    font-family: var(--display);
    font-size: var(--s-l);
    font-weight: 700;
    font-stretch: 88%;
    line-height: 1.15;
}
.riadok__nazov a { text-decoration: none; }
.riadok__nazov a:hover { text-decoration: underline; }

.riadok__podnadpis { font-size: var(--s-s); color: var(--sede); }

.riadok__akcie { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }

.riadok.je-zrusene .riadok__nazov { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--sede); }

@media (max-width: 40rem) {
    .riadok { grid-template-columns: 3.5rem 3.5rem minmax(0, 1fr); gap: 0.5rem 0.875rem; }
    .riadok__obrazok { width: 3.5rem; }
    .riadok__cislo { font-size: 1.875rem; }
    .riadok__akcie { grid-column: 2 / -1; justify-content: flex-start; }
}

.mesiac { margin-top: 2.5rem; }
.mesiac__nazov {
    font-size: var(--s-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.filtre { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.filter {
    font-size: var(--s-s);
    font-weight: 600;
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--ciara);
    border-radius: 999px;
}
.filter:hover { border-color: var(--atrament); color: var(--atrament); }
.filter.je-aktivne { background: var(--atrament); border-color: var(--atrament); color: var(--papier); }

.odkaz-archiv { margin-top: 2.5rem; }

/* ── Pás s rezerváciou ────────────────────────────────── */

.pas { background: var(--atrament); color: var(--na-tmavom); }
.pas__obsah {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}
.pas__obsah p { color: var(--na-tmavom-sede); max-width: 52ch; margin-top: 0.5rem; }

/* ── Archív ───────────────────────────────────────────── */

.mriezka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 2rem 1.5rem;
    margin-top: 2rem;
}
.karta__odkaz { display: grid; gap: 0.4rem; text-decoration: none; }
.karta__obrazok { aspect-ratio: 4 / 3; background: var(--podklad); overflow: hidden; max-width: 100%; }
.karta__obrazok img { width: 100%; height: 100%; object-fit: cover; }
.karta__meta { font-size: var(--s-xs); color: var(--sede); margin-top: 0.35rem; }
.karta__nazov { font-family: var(--display); font-size: var(--s-l); font-weight: 700; font-stretch: 88%; line-height: 1.15; }
.karta__odkaz:hover .karta__nazov { text-decoration: underline; }

.strankovanie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 3rem; }
.strankovanie__stav { font-size: var(--s-s); color: var(--sede); font-variant-numeric: tabular-nums; }

/* ── Detail podujatia ─────────────────────────────────── */

.detail { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }

.detail__hlavicka { display: grid; gap: 0.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--atrament); }
.detail__meta { font-size: var(--s-s); color: var(--sede); }
.detail__podnadpis { font-size: var(--s-l); color: var(--sede); max-width: 50ch; }

.detail__mriezka {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
    padding-top: 2rem;
}
@media (max-width: 52rem) {
    .detail__mriezka { grid-template-columns: minmax(0, 1fr); }
}

.detail__panel { align-self: start; position: sticky; top: 6rem; display: grid; gap: 1.5rem; }
@media (max-width: 52rem) { .detail__panel { position: static; } }

.udaje { margin: 0; display: grid; gap: 1rem; }
.udaje dt {
    font-size: var(--s-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sede);
}
.udaje dd { margin: 0.15rem 0 0; font-weight: 500; }
.udaje__cas { font-family: var(--display); font-size: var(--s-xl); font-weight: 750; font-stretch: 85%; font-variant-numeric: tabular-nums; }

.detail__obrazok { width: 100%; margin-bottom: 2rem; }

.text { max-width: 65ch; }
.text > * + * { margin-top: 1em; }
.text h2, .text h3 { font-family: var(--display); font-stretch: 88%; line-height: 1.15; margin-top: 1.6em; }
.text h2 { font-size: var(--s-xl); }
.text h3 { font-size: var(--s-l); }
.text a { color: var(--cervena); }
.text ul, .text ol { padding-left: 1.25rem; }

/* ── Formuláre ────────────────────────────────────────── */

.formular { max-width: 46rem; display: grid; gap: 2rem; margin-top: 2rem; }

.krok {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 1rem;
}
.krok legend {
    font-family: var(--display);
    font-size: var(--s-l);
    font-weight: 700;
    font-stretch: 88%;
    padding: 0 0 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--atrament);
    width: 100%;
}

.polia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
.pole { display: grid; gap: 0.35rem; }
.pole--siroke { grid-column: 1 / -1; }

.pole label, .pole__nazov { font-size: var(--s-s); font-weight: 600; }
.pole__pomoc { font-size: var(--s-xs); color: var(--sede); }

input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input:not([type]), select, textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--ciara);
    border-radius: 0.375rem;
    background: var(--papier);
    color: var(--atrament);
    font: 400 var(--s-m)/1.3 var(--text);
}
input:hover, select:hover, textarea:hover { border-color: var(--sede); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cervena); outline-offset: 1px; border-color: var(--atrament); }
textarea { min-height: 6rem; resize: vertical; }

.stoly { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0.75rem; }
.stol { position: relative; }
.stol input { position: absolute; opacity: 0; inset: 0; }
.stol span {
    display: grid;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--ciara);
    border-radius: 0.5rem;
    cursor: pointer;
}
.stol b { font-family: var(--display); font-size: var(--s-l); font-stretch: 88%; }
.stol small { color: var(--sede); font-size: var(--s-xs); }
.stol input:hover + span { border-color: var(--atrament); }
.stol input:checked + span { border-color: var(--cervena); box-shadow: inset 0 0 0 1.5px var(--cervena); }
.stol input:focus-visible + span { outline: 3px solid var(--cervena); outline-offset: 2px; }

.suhlas { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--s-s); }
.suhlas input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--cervena); }

.hlasenie {
    padding: 0.9rem 1rem;
    border-left: 4px solid var(--cervena);
    background: #f9ecec;
    font-size: var(--s-s);
}
.hlasenie ul { margin: 0; padding-left: 1.1rem; }

.zhrnutie { font-size: var(--s-s); color: var(--sede); }

/* ── Stránky z blokov ─────────────────────────────────── */

.stranka__hlavicka { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.stranka__hlavicka + .sekcia { padding-top: 2rem; }
.uvodny-text { margin-top: 0.75rem; max-width: 60ch; }
.bloky { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.blok-obrazok { margin: 0; max-width: 60rem; }
.blok-obrazok figcaption { font-size: var(--s-xs); color: var(--sede); margin-top: 0.5rem; }

.blok-text-obrazok {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 2rem clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.blok-text-obrazok.je-vlavo img { order: -1; }

.blok-video { margin: 0; max-width: 60rem; }
.blok-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

.tabulka { margin: 1rem 0 0; max-width: 46rem; border-top: 1px solid var(--atrament); }
.tabulka div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.25rem 1.5rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--ciara);
}
.tabulka dt { font-weight: 600; }
.tabulka dd { margin: 0; font-variant-numeric: tabular-nums; }
.tabulka .je-dnes { color: var(--cervena); }
@media (max-width: 30rem) { .tabulka div { grid-template-columns: minmax(0, 1fr); } }

.loga {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 1rem;
}
.loga li { display: grid; place-items: center; min-height: 6rem; padding: 1rem; border: 1px solid var(--ciara); border-radius: 0.5rem; }
.loga img { max-height: 4rem; width: auto; object-fit: contain; }
.loga a { display: grid; place-items: center; }

.listok-kategoria { margin-top: 1.75rem; max-width: 46rem; }
.listok-kategoria__nazov {
    font-size: var(--s-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--atrament);
}
.listok { list-style: none; margin: 0; padding: 0; }
.listok__polozka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.25rem 1.25rem;
    align-items: baseline;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--ciara);
}
.listok__polozka.ma-obrazok { grid-template-columns: 4rem minmax(0, 1fr) auto auto; align-items: center; }
.listok__obrazok {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.375rem;
    background: var(--ciara);
}
.listok__nazov b { font-weight: 600; }
.listok__nazov small { display: block; color: var(--sede); font-size: var(--s-xs); }
.listok__objem { color: var(--sede); font-size: var(--s-s); white-space: nowrap; font-variant-numeric: tabular-nums; }
.listok__cena { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; min-width: 4.5rem; }
.listok__polozka.je-nedostupne { color: var(--sede); }
.listok__polozka.je-nedostupne .listok__obrazok { opacity: 0.5; }
.listok__polozka.je-nedostupne .listok__cena { font-weight: 500; font-size: var(--s-xs); }
.stitok-napoja {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--cervena);
    border-radius: 999px;
    color: var(--cervena);
    font-size: 0.6875rem;
    font-weight: 700;
    vertical-align: 0.1em;
}

/* ── Galéria ─────────────────────────────────────────── */

.fotky {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 0.5rem;
}
.fotky a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--podklad); }
.fotky img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.fotky a:hover img { transform: scale(1.03); }

.prehliadac {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(10 10 10 / 0.94);
}
.prehliadac[open] { display: grid; place-items: center; }
.prehliadac::backdrop { background: transparent; }
.prehliadac img { max-width: calc(100vw - 7rem); max-height: calc(100vh - 4rem); width: auto; height: auto; object-fit: contain; }
.prehliadac button {
    position: absolute;
    border: 0;
    background: transparent;
    color: var(--na-tmavom);
    font: 400 2.5rem/1 var(--text);
    padding: 1rem;
    cursor: pointer;
}
.prehliadac__zavriet { top: 0.5rem; right: 0.75rem; font-size: 1.75rem !important; }
.prehliadac__spat { left: 0.25rem; top: 50%; translate: 0 -50%; }
.prehliadac__dalej { right: 0.25rem; top: 50%; translate: 0 -50%; }

/* ── E-shop ──────────────────────────────────────────── */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.vek { max-width: 40rem; display: grid; gap: 1.25rem; }

.filter--pod { font-weight: 500; }

.obchod-filtre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--podklad);
    border-radius: 0.5rem;
}
.obchod-filtre input, .obchod-filtre select { min-height: 2.5rem; font-size: var(--s-s); }
.obchod-filtre__skladom { align-self: end; padding-bottom: 0.6rem; }

.produkty {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 2rem 1.25rem;
    margin-top: 1.25rem;
}
.produkt-karta { display: grid; gap: 0.35rem; align-content: start; }
.produkt-karta__obrazok { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--podklad); overflow: hidden; border-radius: 0.375rem; max-width: 100%; }
.produkt-karta__obrazok img { width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; }
.produkt-karta__stitky { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.produkt-karta__nazov { font-family: var(--display); font-size: var(--s-l); font-weight: 700; font-stretch: 88%; line-height: 1.15; }
.produkt-karta__nazov a { text-decoration: none; }
.produkt-karta__nazov a:hover { text-decoration: underline; }
.produkt-karta__cena b { font-size: var(--s-l); font-variant-numeric: tabular-nums; }
.produkt-karta__cena small { display: block; color: var(--sede); font-size: var(--s-xs); }
.produkt-karta.je-vypredane .produkt-karta__obrazok img { opacity: 0.45; }

.stitok-produktu {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--papier);
    border: 1px solid var(--ciara);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stitok-produktu--novinka { background: var(--cervena); border-color: var(--cervena); color: var(--papier); }
.stitok-produktu--vypredane { background: var(--atrament); border-color: var(--atrament); color: var(--papier); }

.do-kosika { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
.do-kosika input { width: 4.5rem; min-height: 2.5rem; text-align: center; }

.produkt-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
    margin-top: 1.5rem;
}
@media (max-width: 52rem) { .produkt-detail { grid-template-columns: minmax(0, 1fr); } }
.produkt-detail__fotky { display: grid; gap: 0.75rem; align-content: start; }
.produkt-detail__fotky img { width: 100%; background: var(--podklad); border-radius: 0.5rem; object-fit: contain; max-height: 42rem; }
.produkt-detail__bez-fotky { aspect-ratio: 3 / 4; background: var(--podklad); border-radius: 0.5rem; }
.produkt-detail__info { display: grid; gap: 1.1rem; align-content: start; }
.produkt-detail__cena b { font-family: var(--display); font-size: var(--s-2xl); font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.produkt-detail__cena small { display: block; color: var(--sede); font-size: var(--s-s); }
.sklad { font-weight: 600; color: #2e7443; }
.sklad--nie { color: var(--cervena); }
.dorucenie { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.dorucenie li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; border-bottom: 1px solid var(--ciara); font-size: var(--s-s); }

/* ── Košík a pokladňa ─────────────────────────────────── */

.kosik { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.kosik__tabulka { width: 100%; border-collapse: collapse; font-size: var(--s-s); }
.kosik__tabulka th { text-align: left; font-size: var(--s-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sede); padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--atrament); }
.kosik__tabulka td { padding: 0.75rem 0.5rem 0.75rem 0; border-bottom: 1px solid var(--ciara); vertical-align: middle; }
.kosik__tabulka td small { display: block; color: var(--sede); font-size: var(--s-xs); }
.kosik__tabulka input { width: 4.5rem; min-height: 2.4rem; text-align: center; }
.cislo { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) {
    .kosik__tabulka thead { display: none; }
    .kosik__tabulka tr { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--ciara); }
    .kosik__tabulka td { border: 0; padding: 0; }
    .kosik__tabulka td:first-child { grid-column: 1 / -1; }
}

.kosik__spodok { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem 3rem; margin-top: 1.5rem; }
.kupon { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; }
.kupon .pole { min-width: 12rem; }

.suhrn { margin: 0; min-width: min(100%, 20rem); display: grid; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.suhrn div { display: flex; justify-content: space-between; gap: 2rem; }
.suhrn dd { margin: 0; }
.suhrn__spolu { padding-top: 0.5rem; border-top: 1px solid var(--atrament); font-weight: 700; font-size: var(--s-l); }

.pokladna { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2.5rem clamp(2rem, 5vw, 4rem); margin-top: 2rem; align-items: start; }
@media (max-width: 52rem) { .pokladna { grid-template-columns: minmax(0, 1fr); } }
.pokladna__formular { display: grid; gap: 2rem; }
.pokladna__suhrn { position: sticky; top: 6rem; display: grid; gap: 1rem; padding: 1.25rem; background: var(--podklad); border-radius: 0.5rem; }
@media (max-width: 52rem) { .pokladna__suhrn { position: static; } }

.volba { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border: 1.5px solid var(--ciara); border-radius: 0.5rem; cursor: pointer; }
.volba:has(input:checked) { border-color: var(--cervena); box-shadow: inset 0 0 0 1px var(--cervena); }
.volba input { margin-top: 0.3rem; accent-color: var(--cervena); }
.volba small { display: block; color: var(--sede); font-size: var(--s-xs); }
details summary { cursor: pointer; font-weight: 600; font-size: var(--s-s); }

/* ── Pätička ──────────────────────────────────────────── */

.paticka { background: var(--atrament); color: var(--na-tmavom); margin-top: auto; }

.paticka__mriezka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 2.5rem;
    padding-block: 3.5rem 2.5rem;
}

.paticka__nadpis {
    font-size: var(--s-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--na-tmavom-sede);
    margin-bottom: 0.9rem;
}

.paticka address { font-style: normal; margin-bottom: 0.9rem; }
.paticka a:hover { color: var(--papier); text-decoration-thickness: 2px; }

.hodiny { margin: 0; display: grid; gap: 0.2rem; font-variant-numeric: tabular-nums; }
.hodiny div { display: flex; justify-content: space-between; gap: 1rem; max-width: 16rem; }
.hodiny dd { margin: 0; }
.hodiny .je-dnes { color: var(--papier); font-weight: 700; }
.hodiny div:not(.je-dnes) { color: var(--na-tmavom-sede); }

.siete { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.siete a {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid #3a3a37;
    border-radius: 999px;
    font-size: var(--s-xs);
    font-weight: 600;
    text-decoration: none;
}
.siete a:hover { border-color: var(--na-tmavom); }

.paticka__odkazy { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }

.paticka__pravne { margin-top: 1.25rem; font-size: var(--s-xs); }

.text table { width: 100%; border-collapse: collapse; font-size: var(--s-s); }
.text th, .text td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--ciara); }
.text th { border-bottom-color: var(--atrament); font-size: var(--s-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sede); }
.text mark { background: #fbe7a1; padding: 0 0.2rem; }

.paticka__prevadzkovatel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 1.25rem 2rem;
    border-top: 1px solid #2d2d2b;
    font-size: var(--s-xs);
    color: var(--na-tmavom-sede);
}

.rezervacia-mriezka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.stol.je-nedostupny span { cursor: not-allowed; background: var(--podklad); color: var(--sede); }
.stol__stav { font-size: var(--s-xs); font-weight: 600; }
.stol.je-nedostupny .stol__stav { color: var(--sede); }
.stol:not(.je-nedostupny) .stol__stav { color: var(--cervena); }