/* ==========================================================================
   CESTOVNÁ AGENTÚRA – DEMO
   Paleta: hlboká morská modrá, lagúnová tyrkysová, západ slnka oranžová.
   Písmo: Bricolage Grotesque (nadpisy) + Source Sans 3 (text). Self-hosted.
   ========================================================================== */

:root {
    /* Farby */
    --abyss:   #05263a;   /* hlboká morská modrá, pozadie tmavých sekcií */
    --sea:     #0a6e92;   /* stredná modrá, odkazy a akcenty */
    --lagoon:  #2bb8be;   /* tyrkysová, hlavný akcent */
    --lagoon-tmava: #1a9aa0;
    --foam:    #f2f8fb;   /* svetlé pozadie stránky */
    --sunset:  #f26a2e;   /* oranžová, len CTA a ceny */
    --sunset-tmava: #d9531a;
    --piesok:  #f7ede1;   /* jemné teplé pozadie sekcií */

    --biela:   #ffffff;
    --tmava:   #0c2230;   /* text */
    --seda:    #5a6b74;   /* sekundárny text */
    --seda-svetla: #dce6ea;
    --ram:     #e2ecf0;

    /* Typografia */
    --font-nadpis: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --font-text:   'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

    /* Rozmery */
    --obal-max: 1180px;
    --radius:   16px;
    --radius-s: 10px;
    --tien:     0 10px 30px -12px rgba(5, 38, 58, .28);
    --tien-vys: 0 22px 48px -18px rgba(5, 38, 58, .38);

    --prechod: .22s cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------- Reset a základ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--tmava);
    background: var(--foam);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, svg { max-width: 100%; display: block; }

a { color: var(--sea); text-decoration-color: color-mix(in srgb, var(--sea) 35%, transparent); text-underline-offset: .15em; }
a:hover { color: var(--lagoon-tmava); }

h1, h2, h3, h4 {
    font-family: var(--font-nadpis);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--abyss);
    margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

:focus-visible {
    outline: 3px solid var(--sunset);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------- Layout pomôcky */
.obal {
    width: 100%;
    max-width: var(--obal-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.sekcia { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sekcia--tmava { background: var(--abyss); color: var(--seda-svetla); }
.sekcia--tmava h2, .sekcia--tmava h3 { color: var(--biela); }
.sekcia--piesok { background: var(--piesok); }

.sekcia__hlava { max-width: 62ch; margin-bottom: 2.5rem; }
.sekcia__hlava--stred { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-text);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lagoon-tmava);
    margin-bottom: .9rem;
}
.sekcia--tmava .eyebrow { color: var(--lagoon); }

.nadpis-xl { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
.nadpis-l  { font-size: clamp(1.7rem, 4vw, 2.5rem); }

.perex { font-size: 1.15rem; color: var(--seda); }
.sekcia--tmava .perex { color: color-mix(in srgb, var(--seda-svetla) 88%, transparent); }

.preskocit {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--abyss);
    color: #fff;
    padding: .8rem 1.2rem;
    z-index: 200;
}
.preskocit:focus { left: .5rem; top: .5rem; }

/* ----------------------------------------------------------- Tlačidlá */
.tlacidlo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-nadpis);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    padding: .95rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--prechod), background var(--prechod), box-shadow var(--prechod);
}
.tlacidlo--primar {
    background: var(--sunset);
    color: #fff;
    box-shadow: 0 8px 20px -8px var(--sunset);
}
.tlacidlo--primar:hover { background: var(--sunset-tmava); color: #fff; transform: translateY(-2px); }
.tlacidlo--sekundar {
    background: var(--lagoon);
    color: var(--abyss);
}
.tlacidlo--sekundar:hover { background: var(--lagoon-tmava); color: #fff; transform: translateY(-2px); }
.tlacidlo--obrys {
    background: transparent;
    border-color: currentColor;
    color: var(--abyss);
}
.tlacidlo--obrys:hover { background: var(--abyss); color: #fff; border-color: var(--abyss); }
.sekcia--tmava .tlacidlo--obrys { color: #fff; }
.sekcia--tmava .tlacidlo--obrys:hover { background: #fff; color: var(--abyss); }
.tlacidlo--maly { padding: .6rem 1.1rem; font-size: .92rem; }
.tlacidlo--siroky { width: 100%; justify-content: center; }
.tlacidlo svg { width: 1.1em; height: 1.1em; fill: currentColor; }

/* --------------------------------------------------------- Demo lišta */
.demo-lista {
    background: repeating-linear-gradient(45deg, #12384c, #12384c 12px, #0f3143 12px, #0f3143 24px);
    color: #cfe6ee;
    font-size: .82rem;
    text-align: center;
    padding: .5rem 1rem;
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.demo-lista__odznak {
    background: var(--sunset);
    color: #fff;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .12em;
    padding: .12rem .5rem;
    border-radius: 4px;
}

/* --------------------------------------------------------- Hlavička */
.hlavicka {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--biela) 88%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--ram);
}
.hlavicka__obal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}
.logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--sea); }
.logo__ikona { width: 40px; height: 40px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__text strong {
    font-family: var(--font-nadpis);
    font-size: 1.18rem;
    color: var(--abyss);
    letter-spacing: -.01em;
}
.logo__text small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--seda); }

.navigacia .menu {
    display: flex;
    align-items: center;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu a:not(.tlacidlo) {
    display: inline-block;
    font-family: var(--font-nadpis);
    font-weight: 500;
    font-size: 1rem;
    color: var(--tmava);
    text-decoration: none;
    padding: .55rem .85rem;
    border-radius: 8px;
    transition: background var(--prechod), color var(--prechod);
}
.menu a:not(.tlacidlo):hover { background: var(--foam); color: var(--sea); }
.menu a.aktivny { color: var(--lagoon-tmava); }
.menu__cta { margin-left: .4rem; }

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    margin-inline: auto;
    background: var(--abyss);
    border-radius: 2px;
    transition: transform var(--prechod), opacity var(--prechod);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================ HERO */
.hero { position: relative; background: var(--abyss); color: #fff; overflow: hidden; }
.hero__pozadie { position: absolute; inset: 0; z-index: 0; }
.hero__pozadie picture, .hero__pozadie img { width: 100%; height: 100%; object-fit: cover; }
.hero__pozadie::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,38,58,.55) 0%, rgba(5,38,58,.35) 40%, rgba(5,38,58,.82) 100%);
}

/* Rotujúce hero pozadie (5 záberov, crossfade) */
.hero__slideshow { position: absolute; inset: 0; z-index: 0; background: var(--abyss); }
.hero__slide {
    position: absolute; inset: 0;
    opacity: 0;
    animation: heroFade 30s infinite;
    animation-fill-mode: both;
}
.hero__slide picture, .hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slideshow::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(5,38,58,.55) 0%, rgba(5,38,58,.4) 40%, rgba(5,38,58,.85) 100%);
}
@keyframes heroFade {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    17%  { opacity: 1; }
    20%  { opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__slide { animation: none; opacity: 0; }
    .hero__slide:first-child { opacity: 1; }
}
.hero__obal {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem);
    display: grid;
    gap: 2.5rem;
}
.hero__text { max-width: 40ch; }
.hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero h1 .zvyraznene { color: var(--lagoon); }
.hero__perex { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #e8f3f7; max-width: 46ch; }
.hero__akcie { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* --- Signature prvok: odletová tabuľa --- */
.tabula {
    background: color-mix(in srgb, var(--abyss) 82%, #000);
    border: 1px solid rgba(43,184,190,.35);
    border-radius: var(--radius);
    box-shadow: var(--tien-vys);
    overflow: hidden;
    max-width: 640px;
}
.tabula__hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.1rem;
    background: rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.tabula__titulok {
    font-family: var(--font-nadpis);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.tabula__bodka {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--lagoon);
    box-shadow: 0 0 0 0 rgba(43,184,190,.7);
    animation: pulz 2s infinite;
}
@keyframes pulz {
    0%   { box-shadow: 0 0 0 0 rgba(43,184,190,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(43,184,190,0); }
    100% { box-shadow: 0 0 0 0 rgba(43,184,190,0); }
}
.tabula__zivo { font-size: .72rem; letter-spacing: .14em; color: var(--lagoon); text-transform: uppercase; }

.tabula__hlavicka-riadok,
.tabula__riadok {
    display: grid;
    grid-template-columns: 1.4fr .9fr .5fr .7fr auto;
    gap: .6rem;
    align-items: center;
    padding: .7rem 1.1rem;
}
.tabula__hlavicka-riadok {
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7fa6b5;
    padding-block: .55rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.tabula__riadok {
    color: #eaf4f8;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background var(--prechod);
}
.tabula__riadok:last-child { border-bottom: 0; }
.tabula__riadok:hover { background: rgba(43,184,190,.10); color: #fff; }
.tabula__ciel { font-family: var(--font-nadpis); font-weight: 600; font-size: 1.02rem; color: #fff; }
.tabula__ciel small { display: block; font-family: var(--font-text); font-weight: 400; font-size: .76rem; color: #8fb2c0; letter-spacing: 0; text-transform: none; }
.tabula__datum { font-variant-numeric: tabular-nums; font-size: .9rem; }
.tabula__noci { font-variant-numeric: tabular-nums; font-size: .9rem; color: #a9c6d1; }
.tabula__cena { font-family: var(--font-nadpis); font-weight: 700; color: var(--sunset); font-size: 1.05rem; white-space: nowrap; }
.tabula__sipka { color: var(--lagoon); font-size: 1.1rem; }
.tabula__paticka {
    padding: .75rem 1.1rem;
    text-align: center;
    background: rgba(0,0,0,.2);
}
.tabula__paticka a { color: var(--lagoon); font-weight: 600; text-decoration: none; font-size: .9rem; }
.tabula__paticka a:hover { text-decoration: underline; }

/* Pás dôvery pod hero */
.pas-dovery {
    background: var(--abyss);
    border-top: 1px solid rgba(255,255,255,.08);
    color: #cfe0e7;
}
.pas-dovery__obal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    justify-content: center;
    padding-block: 1.2rem;
    font-size: .95rem;
}
.pas-dovery__polozka { display: inline-flex; align-items: center; gap: .55rem; }
.pas-dovery__polozka svg { width: 20px; height: 20px; fill: var(--lagoon); flex: none; }

/* Zoznam „istôt" (dôvera pri kúpe) – detail, košík, objednávka */
.istoty {
    list-style: none; margin: 1.1rem 0 0; padding: 1.1rem 0 0;
    border-top: 1px solid var(--ram); display: grid; gap: .6rem;
}
.istoty li { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; color: var(--seda); line-height: 1.35; }
.istoty svg { width: 18px; height: 18px; fill: var(--sea); flex: none; margin-top: .05rem; }

/* ============================================================ Karty zájazdov */
.mriezka-zajazdov {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.6rem;
}
.karta {
    display: flex;
    flex-direction: column;
    background: var(--biela);
    border: 1px solid var(--ram);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--tien);
    transition: transform var(--prechod), box-shadow var(--prechod);
}
.karta:hover { transform: translateY(-4px); box-shadow: var(--tien-vys); }
.karta__obrazok { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.karta__obrazok img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.karta:hover .karta__obrazok img { transform: scale(1.05); }

.karta__stitok {
    position: absolute;
    top: .9rem; left: .9rem;
    background: var(--sunset);
    color: #fff;
    font-family: var(--font-nadpis);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .03em;
    padding: .3rem .7rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
}
.karta__zlava {
    position: absolute;
    top: .9rem; right: .9rem;
    background: rgba(5,38,58,.85);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.karta__stitok--vypredane { background: #64748b; }
.karta--vypredane .karta__obrazok img { filter: grayscale(.7) brightness(.9); }
.karta--vypredane .cena-blok__suma { color: var(--seda); }
.tlacidlo--vypredane {
    background: #e2e8f0; color: #64748b; cursor: not-allowed;
    border-color: transparent; pointer-events: none;
}
.detail-vypredane {
    display: flex; flex-direction: column; gap: .3rem;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: var(--radius-s); padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.detail-vypredane strong { font-family: var(--font-nadpis); font-size: 1.1rem; color: #475569; }
.detail-vypredane span { font-size: .9rem; color: var(--seda); }
.karta__lokalita {
    position: absolute;
    bottom: .8rem; left: .9rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.karta__lokalita svg { width: 15px; height: 15px; fill: currentColor; }

.karta__telo { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.4rem; }
.karta__hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.karta__nazov { font-size: 1.28rem; margin-bottom: .2rem; }
.hviezdy { display: inline-flex; gap: 1px; flex: none; margin-top: .2rem; }
.hviezdy svg { width: 15px; height: 15px; fill: #f4b740; }
.karta__perex { color: var(--seda); font-size: .96rem; margin: .5rem 0 1rem; }

.karta__parametre {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.1rem;
}
.znacka {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--foam);
    border: 1px solid var(--ram);
    border-radius: 999px;
    padding: .28rem .7rem;
    font-size: .82rem;
    color: var(--sea);
    font-weight: 600;
}
.znacka svg { width: 14px; height: 14px; fill: var(--lagoon-tmava); }

.karta__spodok {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ram);
}
.cena-blok { line-height: 1.1; }
.cena-blok__od { display: block; font-size: .72rem; color: var(--seda); text-transform: uppercase; letter-spacing: .08em; }
.cena-blok__povodna { font-size: .9rem; color: var(--seda); text-decoration: line-through; margin-right: .35rem; }
.cena-blok__suma { font-family: var(--font-nadpis); font-weight: 700; font-size: 1.7rem; color: var(--sunset); }
.cena-blok__pozn { font-size: .74rem; color: var(--seda); }

/* ============================================================ Prečo s nami */
.mriezka-dovodov {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}
.dovod {
    background: var(--biela);
    border: 1px solid var(--ram);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    box-shadow: var(--tien);
}
.dovod__ikona {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lagoon), var(--sea));
    margin-bottom: 1.1rem;
}
.dovod__ikona .ikona { width: 28px; height: 28px; fill: #fff; }
.dovod h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.dovod p { color: var(--seda); font-size: .96rem; margin: 0; }

/* ============================================================ Referencie */
.mriezka-referencii {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}
.referencia {
    position: relative;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    padding: 2.2rem 1.7rem 1.6rem;
}
.referencia::before {
    content: "\201C";
    position: absolute;
    top: -.2rem; left: 1rem;
    font-family: var(--font-nadpis);
    font-size: 4rem;
    line-height: 1;
    color: var(--lagoon);
    opacity: .45;
}
.referencia__text { font-size: 1.02rem; color: #e8f3f7; margin-bottom: 1.2rem; }
.referencia__autor { display: flex; align-items: center; gap: .7rem; }
.referencia__monogram {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sunset), var(--lagoon));
    color: #fff; font-family: var(--font-nadpis); font-weight: 700;
    flex: none;
}
.referencia__meno { font-weight: 700; color: #fff; font-size: .95rem; }
.referencia__kde { font-size: .82rem; color: #9fbccb; }
.referencie-pozn { text-align: center; font-size: .85rem; color: #7fa6b5; margin-top: 2rem; }

/* ============================================================ CTA pás */
.cta-pas {
    background: linear-gradient(120deg, var(--sea), var(--lagoon));
    color: #fff;
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, 3.2rem);
    text-align: center;
    box-shadow: var(--tien-vys);
}
.cta-pas h2 { color: #fff; }
.cta-pas p { color: rgba(255,255,255,.9); max-width: 52ch; margin-inline: auto; }
.cta-pas .tlacidlo { margin-top: 1.4rem; }

/* ============================================================ Detail zájazdu */
.detail-hero { position: relative; color: #fff; background: var(--abyss); }
.detail-hero__pozadie { position: absolute; inset: 0; }
.detail-hero__pozadie img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__pozadie::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,38,58,.35), rgba(5,38,58,.85));
}
.detail-hero__obal { position: relative; z-index: 1; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3rem); }
.detail-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); max-width: 20ch; }
.detail-hero__lokalita { display: inline-flex; align-items: center; gap: .4rem; color: var(--lagoon); font-weight: 600; margin-bottom: .6rem; }
.detail-hero__lokalita svg { width: 18px; height: 18px; fill: currentColor; }

.omrvinky { font-size: .85rem; color: #b6cdd7; margin-bottom: 1.2rem; }
.omrvinky a { color: #d6e7ee; }
.omrvinky span { opacity: .6; margin-inline: .4rem; }

.detail-mriezka {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.detail-mriezka > * { min-width: 0; }   /* aby široké tabuľky nerozťahovali stránku */
.detail-popis h2 { font-size: 1.6rem; margin-top: 2rem; }
.detail-popis h2:first-child { margin-top: 0; }
.detail-zoznam { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .6rem; }
.detail-zoznam li { display: flex; gap: .6rem; align-items: flex-start; }
.detail-zoznam svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; }
.detail-zoznam--ano svg { fill: var(--lagoon-tmava); }
.detail-zoznam--nie svg { fill: var(--seda); }
.dve-kolonky { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1rem; }

/* Bočná karta s cenou a CTA */
.detail-panel {
    background: var(--biela);
    border: 1px solid var(--ram);
    border-radius: var(--radius);
    box-shadow: var(--tien);
    padding: 1.6rem;
    position: sticky;
    top: 96px;
}
.detail-panel__cena { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.detail-panel__suma { font-family: var(--font-nadpis); font-weight: 700; font-size: 2.4rem; color: var(--sunset); }
.detail-panel__povodna { text-decoration: line-through; color: var(--seda); }
.detail-panel__pozn { color: var(--seda); font-size: .85rem; margin-bottom: 1.2rem; }
.detail-panel__parametre { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.detail-panel__parametre li {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--ram);
    font-size: .95rem;
}
.detail-panel__parametre li:last-child { border-bottom: 0; }
.detail-panel__parametre .stitok-nazov { color: var(--seda); display: inline-flex; align-items: center; gap: .5rem; }
.detail-panel__parametre .stitok-nazov svg { width: 17px; height: 17px; fill: var(--lagoon-tmava); }
.detail-panel__parametre .hodnota { font-weight: 600; text-align: right; }
.detail-panel__pozn-demo { font-size: .78rem; color: var(--seda); margin-top: 1rem; text-align: center; }

/* Informačný box o platbe (bankový prevod) + QR */
.platba-box {
    display: flex;
    gap: 1.6rem;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 2rem;
    background: var(--foam);
    border: 1px solid var(--ram);
    border-left: 4px solid var(--lagoon);
    border-radius: var(--radius-s);
    padding: 1.4rem 1.5rem;
}
.platba-box__telo { flex: 1 1 280px; min-width: 0; }
.platba-box__hlava { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .9rem; }
.platba-box__ikona {
    display: grid; place-items: center;
    width: 46px; height: 46px; flex: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--lagoon), var(--sea));
}
.platba-box__ikona svg { width: 24px; height: 24px; fill: #fff; }
.platba-box h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.platba-box__popis { color: var(--seda); font-size: .95rem; margin: 0; }
.platba-box__udaje {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .7rem 1.5rem;
    margin: 0 0 .9rem;
    padding: .9rem 0;
    border-block: 1px solid var(--ram);
}
.platba-box__udaje > div { display: flex; flex-direction: column; gap: .1rem; }
.platba-box__udaje dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--seda); }
.platba-box__udaje dd { margin: 0; font-family: var(--font-nadpis); font-weight: 600; color: var(--abyss); word-break: break-word; }
.platba-box__pozn { font-size: .84rem; color: var(--seda); margin: 0; }

.platba-box__qr {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: 0;
    text-align: center;
}
.platba-box__qr-ramik {
    width: 132px; height: 132px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--ram);
    border-radius: 12px;
    box-shadow: var(--tien);
}
.platba-box__qr-ramik svg { width: 100%; height: 100%; display: block; }
.platba-box__qr figcaption { font-size: .76rem; color: var(--seda); line-height: 1.3; }
.platba-box--objednavka { background: var(--piesok); }

/* ============================================================ Košík / e-shop */
/* Odkaz na košík v hlavičke + odznak */
.kosik-odkaz { position: relative; }
.kosik-odkaz svg { width: 18px; height: 18px; }
.kosik-odznak {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: var(--abyss); color: #fff;
    border-radius: 999px; font-size: .74rem; font-weight: 700;
    margin-left: .1rem;
}
.tlacidlo--sekundar .kosik-odznak,
.tlacidlo--primar .kosik-odznak { background: rgba(0,0,0,.25); }

/* Tlačidlá na karte (Detail + Do košíka) */
.karta__akcie { display: flex; gap: .5rem; flex: none; }
.karta__akcie form { margin: 0; }

/* Vizuálne skryté (pre labely) */
.vpn { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pridať do košíka na detaile */
.pridaj-form { display: grid; gap: .8rem; }
.pridaj-form__pole { display: grid; gap: .35rem; }
.pridaj-form__pole label { font-weight: 600; color: var(--abyss); font-size: .9rem; }
.pridaj-form__pole select {
    width: 100%; font-family: var(--font-text); font-size: .95rem;
    border: 1.5px solid var(--ram); border-radius: var(--radius-s); padding: .6rem .7rem; background: #fff;
}
.pridaj-form__pole select:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(43,184,190,.2); }
.pridaj-form__osoby { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pridaj-form__osoby label { font-weight: 600; color: var(--abyss); }
.pridaj-form__osoby input {
    width: 90px; text-align: center;
    font-family: var(--font-nadpis); font-weight: 600; font-size: 1.1rem;
    border: 1.5px solid var(--ram); border-radius: var(--radius-s); padding: .6rem;
}
.pridaj-form__osoby input:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(43,184,190,.2); }
.pridaj-form button svg { width: 18px; height: 18px; }

/* Rozloženie košík / objednávka: obsah + súhrn */
.kosik-mriezka { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }

/* Riadky košíka */
.kosik-polozky { display: grid; gap: 1rem; }
.kosik-riadok {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    background: var(--biela);
    border: 1px solid var(--ram);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--tien);
}
.kosik-riadok__obrazok { flex: none; width: 84px; border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 1; }
.kosik-riadok__obrazok img { width: 100%; height: 100%; object-fit: cover; }
.kosik-riadok__info { flex: 1 1 180px; min-width: 0; }
.kosik-riadok__nazov { font-family: var(--font-nadpis); font-weight: 600; font-size: 1.1rem; color: var(--abyss); text-decoration: none; }
.kosik-riadok__meta { font-size: .85rem; color: var(--seda); margin-top: .15rem; }
.kosik-riadok__cena-os { font-size: .85rem; color: var(--sea); margin-top: .3rem; }
.kosik-riadok__osoby { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.kosik-riadok__osoby label { font-size: .82rem; color: var(--seda); }
.kosik-riadok__osoby input {
    width: 64px; text-align: center; font-weight: 600;
    border: 1.5px solid var(--ram); border-radius: 8px; padding: .45rem;
}
.kosik-riadok__osoby input:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(43,184,190,.2); }
.kosik-riadok__medzisucet { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.kosik-riadok__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--seda); }
.kosik-riadok__medzisucet strong { font-family: var(--font-nadpis); font-size: 1.25rem; color: var(--abyss); }
.kosik-riadok__medzisucet form { margin: 0; }
.kosik-riadok__odobrat {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 0; cursor: pointer;
    color: var(--seda); font-size: .82rem; padding: .2rem 0;
}
.kosik-riadok__odobrat:hover { color: var(--sunset-tmava); }
.kosik-riadok__odobrat svg { width: 15px; height: 15px; fill: currentColor; }
.kosik-vymazat { margin-top: .3rem; }

.odkaz-tlacidlo { background: none; border: 0; padding: 0; cursor: pointer; color: var(--sea); font: inherit; text-decoration: underline; text-underline-offset: .15em; }
.odkaz-tlacidlo:hover { color: var(--lagoon-tmava); }

/* Súhrn (košík aj objednávka) */
.kosik-suhrn {
    background: var(--biela);
    border: 1px solid var(--ram);
    border-radius: var(--radius);
    box-shadow: var(--tien);
    padding: 1.5rem;
    position: sticky; top: 96px;
}
.kosik-suhrn h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.kosik-suhrn__riadok,
.kosik-suhrn__polozka { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .95rem; border-bottom: 1px solid var(--ram); }
.kosik-suhrn__polozka small { font-weight: 400; }
.kosik-suhrn__spolu {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 1rem 0 1.2rem; margin-top: .3rem;
    font-family: var(--font-nadpis);
}
.kosik-suhrn__spolu strong { font-size: 1.7rem; color: var(--sunset); }
.kosik-suhrn__pozn { font-size: .82rem; color: var(--seda); margin-bottom: 1rem; }
.kosik-suhrn__spat { display: inline-block; margin-top: 1rem; font-size: .9rem; }

/* Prázdny košík */
.prazdny-kosik { text-align: center; padding: 3rem 1rem; }
.prazdny-kosik svg { width: 64px; height: 64px; fill: var(--ram); margin: 0 auto 1rem; }
.prazdny-kosik h2 { font-size: 1.6rem; }
.prazdny-kosik p { color: var(--seda); margin-bottom: 1.5rem; }

/* Objednávka – tabuľka a potvrdenie */
.objednavka-platba-info {
    background: var(--foam); border: 1px solid var(--ram); border-left: 4px solid var(--lagoon);
    border-radius: var(--radius-s); padding: 1rem 1.2rem; font-size: .92rem; color: var(--tmava);
}
.objednavka-tabulka { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.objednavka-tabulka td { padding: .9rem 0; border-bottom: 1px solid var(--ram); vertical-align: top; }
.objednavka-tabulka__cena { text-align: right; white-space: nowrap; font-family: var(--font-nadpis); font-weight: 600; }
.objednavka-tabulka tfoot td { border-bottom: 0; border-top: 2px solid var(--abyss); font-family: var(--font-nadpis); font-size: 1.1rem; padding-top: 1rem; }
.objednavka-tabulka__spolu { color: var(--sunset); font-size: 1.5rem; }
.jemne { color: var(--seda); font-weight: 400; font-size: .88rem; }

.objednavka-hotovo { text-align: center; margin-bottom: 2.5rem; }
.objednavka-hotovo__ikona {
    display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem;
    border-radius: 50%; background: linear-gradient(135deg, var(--lagoon), var(--sea));
}
.objednavka-hotovo__ikona svg { width: 38px; height: 38px; fill: #fff; }

/* Výberové skupiny (poistenie, sedadlá) */
.vyber-skupina { display: grid; gap: .7rem; margin-bottom: 1.8rem; }
.vyber { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer;
    background: var(--biela); border: 1.5px solid var(--ram); border-radius: var(--radius-s); padding: .9rem 1rem;
    transition: border-color var(--prechod), box-shadow var(--prechod); }
.vyber:hover { border-color: var(--lagoon); }
.vyber input { margin-top: .2rem; width: 20px; height: 20px; flex: none; accent-color: var(--lagoon-tmava); }
.vyber:has(input:checked) { border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(43,184,190,.15); }
.vyber__telo { flex: 1; }
.vyber__hlava { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.vyber__nazov { font-family: var(--font-nadpis); font-weight: 600; color: var(--abyss); }
.vyber__cena { font-weight: 700; color: var(--sunset); white-space: nowrap; font-size: .95rem; }
.vyber__popis { display: block; font-size: .86rem; color: var(--seda); margin-top: .25rem; }

/* Cart row select */
.kosik-riadok__osoby select { border: 1.5px solid var(--ram); border-radius: 8px; padding: .45rem; font-size: .9rem; background: #fff; }
.kosik-riadok__osoby select:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(43,184,190,.2); }

/* Typy izieb na detaile */
.izby-zoznam { display: grid; gap: .8rem; margin-top: .5rem; }
.izba-karta { background: var(--foam); border: 1px solid var(--ram); border-radius: var(--radius-s); padding: 1rem 1.1rem; }
.izba-karta__hlava { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .3rem; }
.izba-karta__hlava strong { font-family: var(--font-nadpis); color: var(--abyss); }
.izba-karta__hlava span { color: var(--sunset); font-weight: 700; white-space: nowrap; }
.izba-karta p { margin: 0; font-size: .9rem; color: var(--seda); }

/* Letové časy */
.lety { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; background: var(--abyss); color: #eaf4f8;
    border-radius: var(--radius-s); padding: 1.1rem 1.4rem; }
.lety__smer { display: flex; align-items: center; gap: .7rem; font-family: var(--font-nadpis); font-weight: 600; }
.lety__sipka { color: var(--lagoon); }
.lety__noci { background: rgba(43,184,190,.2); color: var(--lagoon); border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; font-weight: 600; }

/* Tabuľka teplôt */
.teploty-obal { overflow-x: auto; min-width: 0; }
.teploty { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 560px; }
.teploty th, .teploty td { padding: .5rem .3rem; text-align: center; border-bottom: 1px solid var(--ram); }
.teploty thead th { color: var(--seda); font-weight: 600; font-size: .78rem; }
.teploty tbody th { text-align: left; color: var(--abyss); font-weight: 700; white-space: nowrap; }
.teploty tbody tr:first-child td { color: var(--sunset-tmava); font-weight: 600; }
.teploty tbody tr:last-child td { color: var(--sea); font-weight: 600; }

/* Termíny a ceny (december / január / február) na detaile */
.terminy-tabulka { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 288px; }
.terminy-tabulka th, .terminy-tabulka td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--ram); }
.terminy-tabulka thead th { color: var(--seda); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.terminy-tabulka td.c, .terminy-tabulka th.c { text-align: right; white-space: nowrap; font-weight: 700; }
.terminy-tabulka tbody td { color: var(--abyss); }
.terminy-tabulka tr.je-od td { background: rgba(43,184,190,.08); }
.terminy-tabulka tr.je-od td.c { color: var(--sea); }

/* ============================================================ Filter zájazdov */
.filter-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.filter { background: var(--biela); border: 1px solid var(--ram); border-radius: var(--radius); box-shadow: var(--tien); padding: 1.4rem; }
.filter__form { display: grid; gap: 1rem; }
.filter__form .pole { gap: .35rem; }
.filter__form label { font-size: .9rem; }
.filter__form select, .filter__form input[type="search"], .filter__form input[type="number"] {
    width: 100%; font-family: var(--font-text); font-size: .95rem; color: var(--tmava); background: #fff;
    border: 1.5px solid var(--ram); border-radius: var(--radius-s); padding: .6rem .7rem;
}
.filter__form select:focus, .filter__form input:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(43,184,190,.2); }
.filter__hlava { display: flex; align-items: center; justify-content: space-between; }
.filter__hlava h2 { margin: 0; font-size: 1.3rem; }
.filter__hviezdy { display: flex; gap: .4rem; }
.filter__chip { display: inline-flex; align-items: center; gap: .3rem; border: 1.5px solid var(--ram); border-radius: 999px;
    padding: .35rem .7rem; cursor: pointer; color: #f4b740; font-size: .95rem; user-select: none; }
.filter__chip input { width: 16px; height: 16px; accent-color: var(--lagoon-tmava); }
.filter__chip:has(input:checked) { border-color: var(--lagoon); background: var(--foam); }
.filter__cena { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.filter__cena input { text-align: center; }

/* Oprava pretekania polí za sidebar filtra */
.filter, .filter__form, .filter__form .pole { min-width: 0; }
.filter__form select,
.filter__form input[type="search"],
.filter__form input[type="number"] { max-width: 100%; min-width: 0; }
.filter__cena input[type="number"] { width: auto; flex: 1 1 0; }

.vysledky__lista { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; color: var(--seda); }
.vysledky__pocet { font-family: var(--font-nadpis); font-weight: 700; color: var(--abyss); font-size: 1.15rem; }
.vysledky__zoradit { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; }
.vysledky__zoradit select { border: 1.5px solid var(--ram); border-radius: var(--radius-s); padding: .45rem .6rem; background: #fff; font-family: var(--font-text); }
.vysledky__prazdne { text-align: center; padding: 3rem 1rem; color: var(--seda); }

/* Hero vyhľadávací box */
.hero-hladaj { background: color-mix(in srgb, var(--biela) 96%, transparent); border-radius: var(--radius); box-shadow: var(--tien-vys); padding: 1rem; margin-top: 1.4rem; }
.hero-hladaj__mriezka { display: grid; grid-template-columns: 1fr; gap: .7rem; align-items: end; }
.hero-hladaj .pole { gap: .3rem; }
.hero-hladaj label { font-size: .8rem; color: var(--seda); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hero-hladaj select, .hero-hladaj input { width: 100%; font-family: var(--font-text); font-size: 1rem; border: 1.5px solid var(--ram); border-radius: var(--radius-s); padding: .7rem .8rem; background: #fff; color: var(--tmava); }
.hero-hladaj select:focus, .hero-hladaj input:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(43,184,190,.2); }
.hero-hladaj .tlacidlo { justify-content: center; }

@media (min-width: 760px) {
    .filter-layout { grid-template-columns: 280px 1fr; }
    .filter { position: sticky; top: 90px; }
    .hero-hladaj__mriezka { grid-template-columns: 1.4fr 1.2fr .8fr auto; }
}

/* Galéria fotiek */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.galeria__polozka { display: block; position: relative; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0;
    cursor: pointer; background: var(--ram); border-radius: var(--radius-s); overflow: hidden; line-height: 0; box-shadow: var(--tien); }
.galeria__polozka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.galeria__polozka:hover img, .galeria__polozka:focus-visible img { transform: scale(1.08); }
.galeria__pozn { font-size: .8rem; color: var(--seda); margin-bottom: 2rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
    background: rgba(4,20,30,.92); padding: clamp(1rem, 4vw, 3rem); }
.lightbox.otvoreny { display: flex; }
.lightbox__ramik { margin: 0; max-width: 1100px; max-height: 100%; display: flex; flex-direction: column; gap: .6rem; }
.lightbox__obr { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius-s); background: #04141e; }
.lightbox__popis { color: #cfe0e7; font-size: .82rem; text-align: center; }
.lightbox__zavri { position: absolute; top: 1rem; right: 1.2rem; width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox__zavri:hover { background: rgba(255,255,255,.24); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox__nav:hover { background: rgba(43,184,190,.5); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
@media (max-width: 560px) { .lightbox__nav { width: 42px; height: 42px; font-size: 1.5rem; } .lightbox__nav--prev { left: .3rem; } .lightbox__nav--next { right: .3rem; } }

/* Kompaktná hlavička detailu (namiesto veľkého hero obrázka) */
.detail-hlavicka { background: var(--abyss); color: #fff; padding-block: clamp(1.5rem, 3vw, 2.3rem); }
.detail-hlavicka h1 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0; }
.detail-hlavicka__lokalita { display: inline-flex; align-items: center; gap: .4rem; color: var(--lagoon); font-weight: 600; margin-bottom: .5rem; }
.detail-hlavicka__lokalita svg { width: 18px; height: 18px; fill: currentColor; }
.detail-hlavicka__riadok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; }
.detail-hlavicka .detail-hodnotenie { margin-top: 0; }
.detail-hlavicka .detail-hodnotenie > span { display: flex; flex-direction: column; line-height: 1.2; }

/* Eshop galéria (hlavný obrázok + prepínacie náhľady) */
.produkt-galeria { margin-bottom: 1.6rem; }
.produkt-galeria__hlavny { display: block; position: relative; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0;
    cursor: zoom-in; background: var(--ram); border-radius: var(--radius); overflow: hidden; box-shadow: var(--tien); line-height: 0; }
.produkt-galeria__hlavny img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produkt-galeria__zvacsit { position: absolute; right: .8rem; bottom: .8rem; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(5,38,58,.72); color: #fff; }
.produkt-galeria__zvacsit svg { width: 20px; height: 20px; }
.produkt-galeria__nahlady { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .5rem; margin-top: .55rem; }
.produkt-galeria__nahlad { display: block; position: relative; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 2px solid transparent;
    cursor: pointer; background: var(--ram); border-radius: 8px; overflow: hidden; line-height: 0; }
.produkt-galeria__nahlad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.produkt-galeria__nahlad:hover img { transform: scale(1.08); }
.produkt-galeria__nahlad.je-aktivny { border-color: var(--lagoon); }
.produkt-galeria__nahlad--hotel.je-aktivny { border-color: var(--sunset); }
.produkt-galeria__kat {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    background: linear-gradient(transparent, rgba(5,38,58,.82));
    color: #fff; font-size: .62rem; font-weight: 700; line-height: 1;
    text-transform: uppercase; letter-spacing: .03em;
    padding: .5rem .35rem .28rem; text-align: center; pointer-events: none;
}

/* ============================================================ Akcie, hodnotenie, wishlist, recenzie, newsletter */
/* Odznaky na karte (stack) */
.karta__stitky { position: absolute; top: .9rem; left: .9rem; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; z-index: 2; }
.karta__stitok { position: static; }
.karta__stitok--last { background: var(--sunset); }
.karta__stitok--first { background: var(--sea); }
.karta__stitok--zlava { background: var(--abyss); }

/* Hodnotenie – badge na obrázku */
.karta__hodnotenie {
    position: absolute; bottom: .8rem; right: .8rem; z-index: 2;
    background: var(--abyss); color: #fff; font-family: var(--font-nadpis); font-weight: 700;
    font-size: .95rem; padding: .3rem .55rem; border-radius: 8px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}

/* Wishlist srdce na karte */
.karta { position: relative; }
.karta__srdce {
    position: absolute; top: .7rem; right: .7rem; z-index: 3; width: 38px; height: 38px;
    display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.85); backdrop-filter: blur(4px); transition: transform var(--prechod);
}
.karta__srdce svg { width: 20px; height: 20px; fill: none; stroke: var(--seda); stroke-width: 2; }
.karta__srdce:hover { transform: scale(1.12); }
.karta__srdce.aktivne svg { fill: var(--sunset); stroke: var(--sunset); }

/* Hodnotenie v detaile hero */
.detail-hodnotenie { display: inline-flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.detail-hodnotenie__skore { background: var(--lagoon); color: var(--abyss); font-family: var(--font-nadpis); font-weight: 800; font-size: 1.2rem; padding: .25rem .6rem; border-radius: 8px; }
.detail-hodnotenie__slovom { font-weight: 700; color: #fff; }
.detail-hodnotenie__pocet { color: #b6cdd7; font-size: .9rem; }

/* Recenzie */
.recenzie-suhrn { display: flex; align-items: center; gap: 1rem; margin: .3rem 0 1.2rem; }
.recenzie-suhrn__skore { background: var(--lagoon); color: var(--abyss); font-family: var(--font-nadpis); font-weight: 800; font-size: 1.6rem; padding: .3rem .7rem; border-radius: 10px; }
.recenzie-suhrn strong { display: block; }
.recenzie { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.recenzia { margin: 0; background: var(--foam); border: 1px solid var(--ram); border-radius: var(--radius-s); padding: 1rem 1.1rem; }
.recenzia__hlava { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.recenzia__meno { font-weight: 700; color: var(--abyss); }
.recenzia__skore { background: var(--abyss); color: #fff; font-weight: 700; font-size: .82rem; padding: .15rem .5rem; border-radius: 6px; }
.recenzia blockquote { margin: 0; color: var(--seda); font-size: .95rem; }

/* Wishlist v hlavičke */
.menu__oblubene a.oblubene-odkaz { display: inline-flex; align-items: center; gap: .2rem; position: relative; color: var(--tmava); padding: .5rem; }
.menu__oblubene a.oblubene-odkaz:hover { color: var(--sunset); }
.oblubene-odznak { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--sunset); color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 700; }

/* Newsletter v pätičke */
.newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.6rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.newsletter__nadpis { color: #fff; font-size: 1.3rem; margin-bottom: .2rem; }
.newsletter p { color: #8fb2c0; margin: 0; font-size: .95rem; }
.newsletter__form { display: flex; gap: .6rem; flex: 1 1 340px; max-width: 460px; }
.newsletter__form input { flex: 1; border: 1.5px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; border-radius: var(--radius-s); padding: .75rem .9rem; font-family: var(--font-text); font-size: 1rem; }
.newsletter__form input::placeholder { color: #7fa6b5; }
.newsletter__form input:focus { outline: none; border-color: var(--lagoon); }
.newsletter__form .tlacidlo { white-space: nowrap; }

@media (min-width: 620px) { .recenzie { grid-template-columns: 1fr 1fr; } }

/* ============================================================ Formulár */
.formular { display: grid; gap: 1.2rem; }
.pole { display: grid; gap: .4rem; }
.pole label { font-weight: 600; font-size: .95rem; color: var(--abyss); }
.pole .povinne { color: var(--sunset); }
.pole input,
.pole select,
.pole textarea {
    width: 100%;
    font-family: var(--font-text);
    font-size: 1rem;
    color: var(--tmava);
    background: var(--biela);
    border: 1.5px solid var(--ram);
    border-radius: var(--radius-s);
    padding: .8rem .9rem;
    transition: border-color var(--prechod), box-shadow var(--prechod);
}
.pole textarea { min-height: 140px; resize: vertical; }
.pole input:focus,
.pole select:focus,
.pole textarea:focus {
    outline: none;
    border-color: var(--lagoon);
    box-shadow: 0 0 0 3px rgba(43,184,190,.2);
}
.pole__napoveda { font-size: .82rem; color: var(--seda); }
.pole-dvojica { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.pole-trojica { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Cestujúci (objednávka) */
.cestujuci-zoznam { display: grid; gap: 1rem; margin-bottom: 1.8rem; }
.cestujuci {
    border: 1.5px solid var(--ram); border-radius: var(--radius-s);
    padding: 1rem 1.1rem 1.1rem; margin: 0; background: var(--biela);
}
.cestujuci legend {
    font-weight: 700; color: var(--abyss); font-size: .82rem;
    text-transform: uppercase; letter-spacing: .05em; padding: 0 .4rem;
}
.cestujuci .pole label { font-size: .85rem; }

/* FAQ (natívny accordion) */
.faq { display: grid; gap: .7rem; }
.faq__polozka {
    border: 1px solid var(--ram); border-radius: var(--radius-s);
    background: var(--biela); box-shadow: var(--tien); overflow: hidden;
}
.faq__otazka {
    cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
    font-family: var(--font-nadpis); font-weight: 600; color: var(--abyss);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq__otazka::-webkit-details-marker { display: none; }
.faq__otazka::after {
    content: '+'; font-size: 1.5rem; color: var(--lagoon-tmava); line-height: 1;
    transition: transform var(--prechod);
}
.faq__polozka[open] .faq__otazka::after { content: '\2013'; }
.faq__odpoved { padding: 0 1.3rem 1.2rem; color: var(--seda); }
.faq__odpoved p { margin: 0; }

/* Vzor dokumentu (odstúpenie od zmluvy) */
.vzor-dokument {
    border: 1px dashed var(--ram); border-radius: var(--radius-s);
    padding: 1.4rem 1.5rem; background: #fbfcfd; margin: 1rem 0 1.5rem;
}
.vzor-tabulka { width: 100%; border-collapse: collapse; margin: .8rem 0; }
.vzor-tabulka th, .vzor-tabulka td { border: 1px solid var(--ram); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.vzor-tabulka th { width: 45%; font-weight: 600; color: var(--abyss); background: var(--piesok, #f4f7f9); }
.vzor-podpis { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1.6rem; flex-wrap: wrap; }

.suhlas { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--seda); }
.suhlas input { width: 20px; height: 20px; flex: none; margin-top: .15rem; accent-color: var(--lagoon-tmava); }

/* Antispam: skryté pole (honeypot). Nikdy nezobrazovať. */
.web-pole { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Hlášky formulára */
.hlaska {
    border-radius: var(--radius-s);
    padding: 1rem 1.2rem;
    margin-bottom: 1.6rem;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}
.hlaska svg { width: 22px; height: 22px; flex: none; margin-top: .1rem; }
.hlaska--ok { background: #e6f7f2; border: 1px solid #a9e3d1; color: #0d6b4f; }
.hlaska--ok svg { fill: #0d6b4f; }
.hlaska--chyba { background: #fdece8; border: 1px solid #f5c4b6; color: #9c2c11; }
.hlaska--chyba svg { fill: #9c2c11; }
.pole--chyba input, .pole--chyba textarea, .pole--chyba select { border-color: #d9531a; }
.chyba-text { color: #9c2c11; font-size: .85rem; }

/* ============================================================ Kontakt layout */
.kontakt-mriezka { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.kontakt-info {
    background: var(--abyss);
    color: #dbe9ef;
    border-radius: var(--radius);
    padding: 1.8rem;
}
.kontakt-info h2 { color: #fff; font-size: 1.4rem; }
.kontakt-info__polozka { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.2rem; }
.kontakt-info__polozka svg { width: 22px; height: 22px; fill: var(--lagoon); flex: none; margin-top: .15rem; }
.kontakt-info__polozka a { color: #fff; }
.kontakt-info__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #8fb2c0; display: block; }
.kontakt-info__hodiny { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .92rem; }
.kontakt-info__hodiny li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }

/* ============================================================ Textové stránky */
.text-stranka { max-width: 780px; }
.text-stranka h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.text-stranka h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.text-stranka ul { padding-left: 1.2rem; }
.text-stranka li { margin-bottom: .4rem; }
.doplnit {
    background: #fdf4e3;
    border: 1px dashed var(--sunset);
    border-radius: var(--radius-s);
    padding: .3rem .5rem;
    color: var(--sunset-tmava);
    font-size: .9rem;
}

/* Číselné dlaždice O nás */
.cisla-mriezka { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
.cislo-dlazdica { text-align: center; }
.cislo-dlazdica__hodnota { font-family: var(--font-nadpis); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3rem); color: var(--lagoon-tmava); line-height: 1; }
.cislo-dlazdica__popis { color: var(--seda); font-size: .95rem; margin-top: .3rem; }

/* Pás s obrázkom + text (O nás) */
.split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.split__obrazok img { border-radius: var(--radius); box-shadow: var(--tien); aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ============================================================ Pätička */
.pata { background: #04202f; color: #a7c0cb; font-size: .95rem; }
.pata__mriezka {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.pata__stlpec--znacka { max-width: 34ch; }
.logo--pata { color: var(--lagoon); margin-bottom: 1rem; }
.logo--pata .logo__text strong { color: #fff; }
.logo--pata .logo__text small { color: #7fa6b5; }
.pata__popis { color: #8fb2c0; font-size: .92rem; }
.pata__nadpis { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.pata__odkazy { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.pata__odkazy a { color: #a7c0cb; text-decoration: none; }
.pata__odkazy a:hover { color: var(--lagoon); }
.pata__kontakt { font-style: normal; line-height: 1.7; }
.pata__kontakt a { color: #cfe0e7; }
.pata__medzera { margin-top: .6rem; }
.pata__ico { margin-top: .6rem; font-size: .82rem; color: #6f909e; }
.pata__spodok { border-top: 1px solid rgba(255,255,255,.08); }
.pata__spodok-obal {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    justify-content: space-between;
    padding-block: 1.2rem;
    font-size: .82rem;
    color: #6f909e;
}
.pata__spodok-obal p { margin: 0; }

/* ============================================================ Sekcia s hlavou a akciou v riadku */
.hlava-riadok {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.hlava-riadok .sekcia__hlava { margin-bottom: 0; }

/* ============================================================ Responzívne */
@media (min-width: 700px) {
    .hero__obal { grid-template-columns: 1fr; }
    .pole-dvojica { grid-template-columns: 1fr 1fr; }
    .pole-trojica { grid-template-columns: 1fr 1fr 1fr; }
    .split { grid-template-columns: 1fr 1fr; }
    .dve-kolonky { grid-template-columns: 1fr 1fr; }
    .kontakt-mriezka { grid-template-columns: 1.3fr .9fr; }
    .pata__mriezka { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
    .kosik-mriezka { grid-template-columns: 1fr 340px; }
    .kosik-riadok__osoby { margin-left: auto; }
}

@media (min-width: 900px) {
    .hero__obal {
        grid-template-columns: 1fr minmax(480px, 560px);
        align-items: center;
        gap: 3rem;
    }
    .detail-mriezka { grid-template-columns: minmax(0, 1fr) 360px; gap: 3rem; }
}

/* Mobilné menu */
@media (max-width: 860px) {
    .hamburger { display: flex; }
    /* Bez backdrop-filter na hlavičke – inak by z nej vznikol containing block
       pre position:fixed a bočné menu by sa pozicovalo voči hlavičke (rozbité). */
    .hlavicka { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--biela); }
    .navigacia {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(82vw, 320px);
        max-width: 100vw;
        background: var(--biela);
        box-shadow: -12px 0 40px -18px rgba(0,0,0,.4);
        transform: translateX(100%);
        transition: transform var(--prechod);
        padding: 5.5rem 1.5rem 2rem;
        z-index: 90;
        overflow-y: auto;
    }
    .navigacia.otvorene { transform: translateX(0); }
    .navigacia .menu { flex-direction: column; align-items: stretch; gap: .2rem; }
    .menu a:not(.tlacidlo) { padding: .8rem 1rem; font-size: 1.1rem; }
    .menu__cta { margin: 1rem 0 0; }
    .menu__cta .tlacidlo { width: 100%; justify-content: center; }
    body.menu-otvorene { overflow: hidden; }
    .prekrytie {
        position: fixed; inset: 0;
        background: rgba(5,38,58,.5);
        opacity: 0; visibility: hidden;
        transition: opacity var(--prechod), visibility var(--prechod);
        z-index: 80;
    }
    .prekrytie.zobrazene { opacity: 1; visibility: visible; }
}

/* Menšie tabuľky na malých displejoch */
@media (max-width: 560px) {
    .tabula__hlavicka-riadok { display: none; }
    .tabula__riadok {
        grid-template-columns: 1fr auto;
        grid-template-areas: "ciel cena" "meta meta";
        gap: .3rem .6rem;
    }
    .tabula__ciel { grid-area: ciel; }
    .tabula__cena { grid-area: cena; text-align: right; }
    .tabula__datum { grid-area: meta; font-size: .82rem; color: #a9c6d1; }
    .tabula__noci, .tabula__sipka { display: none; }
}

/* Animácie odhalenia pri scrolle.
   Skryjeme len ak beží JS (trieda .js na <html>). Bez JS je obsah vždy viditeľný. */
.js .odhal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .odhal.viditelne { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .js .odhal { opacity: 1; transform: none; }
    .karta:hover .karta__obrazok img { transform: none; }
}