/* =========================================================================
   JUAN BAR, Brezová pod Bradlom
   =========================================================================

   OBSAH
   -----
   1. Premenné (farby, písma, rozmery) + tmavý režim
   2. Základ (reset, body, odkazy, tlačidlá)
   3. Spoločné prvky (.in, .box karta, nadpisy, .eyebrow, .lead)
   4. Horná lišta (.bar, .nav, prepínač režimu)
   5. Tlačidlá (.cta, .btn)

   DOMOV
   6. Hero (logo JUAN BAR, stav otvorené/zatvorené)
   7. Ticker (červený bežiaci pás)
   8. Sekcie všeobecne + Promise (I, II, III)
   8b. Galéria (fotky z Google Máp)
   9. Dlaždice „Kam ďalej“ (.tiles)
   10. Dnešné hodiny (.todaybox)

   LÍSTOK
   11. Hlavička podstránky (.phead) – spoločná pre všetky podstránky
   12. Nápojový lístok (záložky, vyhľadávanie, karty kategórií)
   13. Ruleta drinkov (.roul, .slot)

   OSLAVY
   14. Príležitosti (.occ) + Tri kroky (.howto)
   15. Karta s telefónom (.party-card)

   KONTAKT
   16. Otváracie hodiny – graf (.hours-sec)
   17. Kde nás nájdete – mapa (.find)
   18. Sociálne siete (.soc)

   ZIMNÝ LÍSTOK
   18a. Vlastné fotky (.bites, .room)
   18b. Ľadové farby, sneženie, vločka (.winter)
   18c. Letný lístok – SKÚŠKA (.summer)

   19. Pätička + toast (hláška „Skopírované“)
   20. Animácie + vypnutie animácií

   Štýl: „bento“ – obsah v zaoblených kartách, bezpätkové písmo Inter.
   Mobil je základ. Desktop úpravy (@media min-width: 760px)
   sú vždy priamo na konci sekcie, ktorej sa týkajú.
   ========================================================================= */


/* =========================================================================
   1. PREMENNÉ
   ========================================================================= */

:root {
  /* svetlý režim */
  --paper: #f4f4f2;         /* pozadie stránky */
  --card: #ffffff;          /* biele karty */
  --card-2: #efefec;        /* jemne sivá výplň (tlačidlá nálad, záložky) */
  --ink: #0b0b0c;           /* hlavný text */
  --muted: #6b6b70;         /* sivý text */
  --rule: #e4e4e0;          /* čiary a okraje kariet */

  /* červená značky */
  --red: #930a2a;
  --red-ink: #930a2a;       /* tmavšia červená pre text */
  --on-red: #ffffff;        /* text na červenom pozadí */

  /* tmavé karty (hero,
  áuj hodiny, ruleta) – tmavé v oboch režimoch */
  --stage: #0d0d0f;
  --stage-ink: #f5f5f4;
  --stage-muted: #a1a1aa;
  --stage-rule: #27272a;

  --ok: #22c55e;

  /* písma */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mark: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* zaoblenie a tieň kariet */
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -16px rgb(0 0 0 / .14);

  /* šírka obsahu a okraje po stranách (rešpektuje výrez iPhonu) */
  --max: 72rem;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  /* koľko zostane po stranách, keď je okno širšie ako --max */
  --edge: max(0px, (100% - var(--max)) / 2);
}

/* Tmavý režim podľa systému (ak ho používateľ neprepol na svetlý) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #09090b;
    --card: #141416;
    --card-2: #1c1c1f;
    --ink: #f4f4f5;
    --muted: #a1a1aa;
    --rule: #26262a;
    --red: #ff3b45;
    --red-ink: #ff5c64;
    --stage: #141416;
    --stage-rule: #2a2a2e;
    --ok: #4ade80;
    --shadow: 0 0 0 1px rgb(255 255 255 / .02);
    color-scheme: dark;
  }
}

/* Tmavý režim zapnutý prepínačom v lište */
:root[data-theme="dark"] {
  --paper: #09090b;
  --card: #141416;
  --card-2: #1c1c1f;
  --ink: #f4f4f5;
  --muted: #a1a1aa;
  --rule: #26262a;
  --red: #ff3b45;
  --red-ink: #ff5c64;
  --stage: #141416;
  --stage-rule: #2a2a2e;
  --ok: #4ade80;
  --shadow: 0 0 0 1px rgb(255 255 255 / .02);
  color-scheme: dark;
}


/* =========================================================================
   2. ZÁKLAD
   ========================================================================= */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .25s, color .25s;
}

/* pruh pod výrezom iPhonu v farbe stránky */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--paper);
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

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

mark {
  background: color-mix(in srgb, var(--red) 22%, transparent);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
}


/* =========================================================================
   3. SPOLOČNÉ PRVKY
   ========================================================================= */

/* .in = obsah vycentrovaný na max. šírku --max.
   Robí to cez padding (nie max-width), takže nepotrebujeme vnútorný obal. */
.in {
  padding-left: calc(var(--edge) + var(--gut-l));
  padding-right: calc(var(--edge) + var(--gut-r));
}

/* .box = zaoblená karta zarovnaná s okrajmi obsahu (.in) */
.box {
  margin-left: calc(var(--edge) + var(--gut-l));
  margin-right: calc(var(--edge) + var(--gut-r));
  padding-inline: clamp(20px, 4vw, 48px);
  border-radius: var(--radius-lg);
}

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

/* malý červený popis nad nadpisom, s krátkou čiarkou pred textom */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 14px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

/* veľký nadpis sekcie */
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}

/* úvodný odstavec pod nadpisom */
.lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 36em;
  margin: 14px 0 0;
}

/* jednoduché zvislé rozloženia s medzerou */
.stack {
  display: grid;
  gap: 32px;
}

.split {
  display: grid;
  gap: 32px;
}

@media (min-width: 760px) {
  .split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}


/* =========================================================================
   4. HORNÁ LIŠTA (plávajúca, so sklenným efektom)
   ========================================================================= */

.bar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 20;
  margin: 10px calc(var(--edge) + var(--gut-r)) 0 calc(var(--edge) + var(--gut-l));
  padding: 6px 6px 6px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--shadow);
  color: var(--ink);
}

/* malé logo vľavo */
.mini {
  font-family: var(--font-mark);
  font-weight: 500;
  letter-spacing: .14em;
  font-size: 14px;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}

.mini svg {
  height: .78em;
  width: auto;
}

/* menu vpravo */
.nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav button {
  background: none;
  border: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  transition: color .15s, background .15s;
}

.nav button:hover {
  color: var(--ink);
}

.nav button.on {
  background: var(--ink);
  color: var(--paper);
}

/* prepínač svetlý / tmavý režim */
.theme {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s;
}

.theme:hover {
  border-color: var(--ink);
}

.theme svg {
  width: 18px;
  height: 18px;
}

/* vo svetlom režime ukáž mesiac, v tmavom slnko */
.theme .i-sun {
  display: none;
}

:root[data-theme="dark"] .theme .i-sun {
  display: block;
}

:root[data-theme="dark"] .theme .i-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .i-sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme .i-moon {
    display: none;
  }
}

@media (max-width: 420px) {
  .bar {
    padding-left: 14px;
  }

  .nav button {
    padding: 8px 9px;
    font-size: 13.5px;
  }
}


/* =========================================================================
   5. TLAČIDLÁ
   ========================================================================= */

/* .cta = veľké tlačidlo (hero, ruleta) */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, background .15s, border-color .15s, box-shadow .15s;
}

.cta:active {
  transform: scale(.97);
}

.cta svg {
  width: 18px;
  height: 18px;
}

/* červené plné */
.cta.red {
  background: var(--red);
  color: var(--on-red);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--red) 80%, transparent);
}

.cta.red:hover {
  background: var(--red-ink);
}

/* priesvitné (na tmavej karte) */
.cta.line {
  background: rgb(255 255 255 / .06);
  color: var(--stage-ink);
  border-color: rgb(255 255 255 / .14);
}

.cta.line:hover {
  background: rgb(255 255 255 / .12);
}

/* .btn = menšie tlačidlo (Zavolať, Google Mapy...) */
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.btn:hover {
  border-color: var(--ink);
}

.btn svg {
  width: 18px;
  height: 18px;
}

/* plné tmavé */
.btn.fill {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn.fill:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--on-red);
}


/* =========================================================================
   6. HERO (úvodná karta na domovskej stránke)
   ========================================================================= */

.hero {
  margin-top: 12px;
  /* tmavá karta s červenou žiarou v pravom hornom rohu */
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--red) 32%, transparent), transparent 70%),
    var(--stage);
  color: var(--stage-ink);
  border: 1px solid var(--stage-rule);
  position: relative;
  overflow: hidden;
  padding-block: 48px 28px;
  display: grid;
  gap: 26px;
}

/* logo JUAN BAR (aj v pätičke) */
.word {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: clamp(64px, 18vw, 168px);
  line-height: .82;
  letter-spacing: .04em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: .3em;
  row-gap: .08em;
}

.word .w {
  display: inline-flex;
  align-items: flex-end;
}

.word svg {
  height: .8em;
  width: auto;
  display: block;
  margin: 0 .015em;
  overflow: visible;
}

.word .bar-w {
  color: var(--stage-ink);
}

/* slogan */
.tag {
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 400;
  margin: 0;
  color: var(--stage-muted);
  max-width: 32em;
}

.tag em {
  color: var(--stage-ink);
  font-style: normal;
  font-weight: 500;
}

/* riadok s tlačidlami a stavom */
.hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

/* „Otvorené / Zatvorené“ s bodkou */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .1);
  background: rgb(255 255 255 / .04);
  font-size: 14.5px;
  color: var(--stage-ink);
}

.status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stage-muted);
  flex: none;
}

.status.open i {
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
  animation: pulse 2.4s infinite;
}

.status.closed i {
  background: var(--red);
}

/* spodný riadok s hodinami a adresou */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 13.5px;
  color: var(--stage-muted);
  border-top: 1px solid var(--stage-rule);
  padding-top: 18px;
  margin: 0;
}

.hero-meta b {
  color: var(--stage-ink);
  font-weight: 500;
}

/* pohár v logu: červená tekutina a bublinky */
#liquid {
  transform: translateY(0);
  animation: fill 1.6s cubic-bezier(.2, .7, .2, 1) .4s both;
}

.bub {
  animation: rise 3.2s ease-in infinite;
  opacity: 0;
}

.bub.b2 {
  animation-delay: 1.3s;
}

@media (min-width: 760px) {
  .hero {
    padding-block: 80px 32px;
  }
}


/* =========================================================================
   7. TICKER (červený bežiaci pás)
   ========================================================================= */

.ticker {
  margin-top: 12px;
  margin-bottom: 0;
  padding-inline: 0;
  background: var(--red);
  color: var(--on-red);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  animation: tick 38s linear infinite;
  padding-block: 14px;
}

.ticker-track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 32px;
}

/* bodka medzi slovami */
.ticker-track span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}


/* =========================================================================
   8. SEKCIE + PROMISE (I, II, III)
   ========================================================================= */

/* .sec = obyčajná sekcia so zvislými okrajmi */
.sec {
  padding-block: 64px;
}

.promise {
  display: grid;
  gap: 36px;
}

.promise-head {
  display: grid;
  justify-items: start;
}

/* tri karty pod sebou */
.trio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.trio li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 16px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* číslo I, II, III – len kurzívou, bez rámčeka */
.trio .ix {
  grid-row: span 2;
  min-width: 44px;
  color: var(--red-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
}

.trio h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.015em;
  margin: 0;
}

.trio p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

@media (min-width: 760px) {
  .promise {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
  }
}


/* =========================================================================
   8b. GALÉRIA (fotky z Google Máp, načíta ich script.js)
   ========================================================================= */

.gallery-head {
  display: grid;
  justify-items: start;
  margin-bottom: 24px;
}

/* bento mriežka: prvá fotka veľká, ostatné menšie */
.photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 12px;
}

.photos li.big {
  grid-column: span 2;
  grid-row: span 2;
}

.photos figure {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-2);
  border: 1px solid var(--rule);
}

.photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.photos li:hover img {
  transform: scale(1.04);
}

/* meno autora fotky (Google to vyžaduje) */
.photos figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photos figcaption a {
  text-decoration: none;
}

/* celá fotka je tlačidlo, ktoré ju zväčší */
.ph-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* 8. fotka je široká, aby v mriežke neostala diera */
.photos li:nth-child(8) {
  grid-column: span 2;
}

/* hodnotenie pod fotkami */

.gallery-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.gallery-foot b {
  color: var(--ink);
}

@media (min-width: 760px) {
  .photos {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
  }
}


/* zväčšená fotka (lightbox) */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background: rgb(0 0 0 / .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  pointer-events: none;
}

.lightbox img {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 120px);
  border-radius: var(--radius);
  pointer-events: auto;
}

.lightbox figcaption {
  color: rgb(255 255 255 / .75);
  font-size: 13px;
  pointer-events: auto;
}

/* okrúhle tlačidlá: zavrieť, späť, ďalej */
.lb-btn {
  position: fixed;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

.lb-btn:hover {
  background: rgb(255 255 255 / .2);
}

.lb-btn svg {
  width: 22px;
  height: 22px;
}

.lb-close {
  top: 16px;
  right: 16px;
}

.lb-prev,
.lb-next {
  top: 50%;
  transform: translateY(-50%);
}

.lb-prev {
  left: 16px;
}

.lb-next {
  right: 16px;
}

@media (max-width: 759px) {
  /* na mobile šípky dole, aby neprekrývali fotku */
  .lb-prev,
  .lb-next {
    top: auto;
    bottom: 20px;
    transform: none;
  }
}


/* =========================================================================
   9. DLAŽDICE „KAM ĎALEJ“
   ========================================================================= */

.tiles {
  display: grid;
  gap: 12px;
}

.tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  text-align: left;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}

.tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / .25);
}

.tile .k {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* nadpis + popis v strede dlaždice */
.tile-body {
  display: grid;
  gap: 8px;
  align-content: end;
}

.tile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}

.tile p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 24em;
}

/* spodný riadok „Otvoriť lístok →“ */
.tile .go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  font-weight: 600;
  font-size: 14.5px;
}

.tile .go svg {
  width: 20px;
  height: 20px;
  transition: transform .2s;
}

.tile:hover .go svg {
  transform: translateX(4px);
}

/* prvá, červená dlaždica */
.tile.main {
  background:
    radial-gradient(80% 80% at 100% 100%, rgb(255 255 255 / .18), transparent 60%),
    var(--red);
  border-color: var(--red);
  color: var(--on-red);
}

.tile.main .k,
.tile.main p {
  color: var(--on-red);
}

.tile.main p {
  opacity: .85;
}

.tile.main .go {
  border-color: rgba(255, 255, 255, .3);
}

/* dekoratívny kruh v rohu */
.tile.main::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
}

@media (min-width: 760px) {
  .tiles {
    grid-template-columns: 1.3fr 1fr 1fr;
  }

  .tile {
    min-height: 300px;
    padding: 28px;
  }
}


/* =========================================================================
   10. DNEŠNÉ HODINY (tmavá karta na domovskej stránke)
   ========================================================================= */

.todaybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stage-rule);
  background: var(--stage);
  color: var(--stage-ink);
}

.today-txt {
  margin: 0;
}

.todaybox .big {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}

.todaybox .big span {
  color: var(--red);
}

.todaybox small {
  display: block;
  color: var(--stage-muted);
  font-size: 14px;
  margin-top: 6px;
}


/* =========================================================================
   11. HLAVIČKA PODSTRÁNKY (Lístok, Oslavy, Kontakt)
   ========================================================================= */

/* jemné objavenie pri prepnutí podstránky */
.view {
  animation: viewIn .35s ease both;
}

.phead {
  margin-top: 12px;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--red) 26%, transparent), transparent 70%),
    var(--stage);
  color: var(--stage-ink);
  border: 1px solid var(--stage-rule);
  position: relative;
  overflow: hidden;
  padding-block: 40px 36px;
  display: grid;
  gap: 12px;
}

.phead .lead {
  color: var(--stage-muted);
  margin: 4px 0 0;
}

/* drobčeková navigácia „Domov / Lístok“ */
.crumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--stage-muted);
  margin: 0;
}

.crumb button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--stage-muted);
  font-size: inherit;
  cursor: pointer;
}

.crumb button:hover {
  color: var(--stage-ink);
}

.crumb b {
  color: var(--stage-ink);
  font-weight: 500;
}

.ptitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 9vw, 96px);
  line-height: .98;
  letter-spacing: -.01em;
  margin: 0;
}


/* =========================================================================
   12. NÁPOJOVÝ LÍSTOK
   ========================================================================= */

/* záložky + vyhľadávanie */
.tools {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

/* záložky ako jeden „prepínač“ */
.tabs {
  justify-self: start;
  max-width: 100%;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 500;
  transition: color .15s, background .15s;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

.search {
  position: relative;
}

.search input {
  width: 100%;
  padding: 13px 18px 13px 44px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

.search input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 15%, transparent);
}

/* lupa vnútri políčka */
.search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
}

/* kategórie (pivo, víno, ...) – každá vo vlastnej karte */
.cats {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: start;
}

.cat-b {
  min-width: 0;
  padding: 22px 22px 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.cat-b h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.cat-b h3::first-letter {
  text-transform: uppercase;
}

.cat-b h3 small {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* podnadpis „Čapované“, „Fľaškové“ */
.cat-b h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 16px 0 2px;
}

/* jeden riadok lístka: objem | názov | cena */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  display: grid;
  grid-template-columns: 3.7em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}

.row:last-child {
  border-bottom: 0;
}

.vol {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nm {
  font-weight: 500;
  min-width: 0;
}

.nm small {
  display: block;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--muted);
}

.pr {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.note {
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0 12px;
}

/* „nič sa nenašlo“ */
.empty {
  padding: 30px 0;
  color: var(--muted);
}

@media (min-width: 760px) {
  .tools {
    grid-template-columns: 1fr 18rem;
    align-items: center;
  }

  .cats {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}


/* =========================================================================
   13. RULETA DRINKOV
   ========================================================================= */

.roul {
  margin-bottom: 64px;
  padding-block: clamp(28px, 5vw, 56px);
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  display: grid;
  column-gap: 40px;
}

/* mobil: nadpis, nálady a karta pod sebou */
.roul-head {
  display: grid;
  justify-items: start;
}

.roul .slot {
  margin-top: 28px;
}

/* tlačidlá nálad (fieldset bez rámčeka) */
.moods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 22px 0 0;
  min-width: 0;
}

.mood {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card-2);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}

.mood:hover {
  border-color: var(--ink);
}

.mood[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* tmavá karta s vylosovaným drinkom */
.slot {
  position: relative;
  border-radius: 24px;
  background:
    radial-gradient(60% 70% at 100% 0%, color-mix(in srgb, var(--red) 30%, transparent), transparent 70%),
    var(--stage);
  color: var(--stage-ink);
  border: 1px solid var(--stage-rule);
  padding: 28px 24px 24px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  min-height: 250px;
}

.slot .cat {
  justify-self: start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stage-ink);
  background: rgb(255 255 255 / .08);
  padding: 5px 11px;
  border-radius: 999px;
}

/* názov drinku */
.slot .dn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
  min-height: 1em;
  overflow-wrap: anywhere;
}

.slot .dn::first-letter {
  text-transform: uppercase;
}

.slot .dsub {
  color: var(--stage-muted);
  margin: -4px 0 0;
  font-size: 14.5px;
  min-height: 1.4em;
}

.slot .pitch {
  margin: 0;
  color: var(--stage-muted);
  font-size: 16px;
  max-width: 28em;
}

/* spodok: cena + tlačidlo Vylosovať */
.slot .foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--stage-rule);
}

.slot .pr {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.slot .pr small {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--stage-muted);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 8px;
}

/* rozmazanie počas losovania */
.slot.spin .dn,
.slot.spin .dsub {
  filter: blur(1.2px);
  opacity: .75;
}

@media (min-width: 760px) {
  /* desktop: vľavo nadpis + nálady, vpravo karta cez oba riadky;
     ľavá strana je zvislo vycentrovaná voči karte */
  .roul {
    grid-template-columns: 1fr 1.1fr;
  }

  .roul-head {
    align-self: end;
  }

  .roul .moods {
    align-self: start;
  }

  .roul .slot {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }

  .slot {
    padding: 36px 32px 28px;
  }
}


/* =========================================================================
   14. OSLAVY: PRÍLEŽITOSTI + TRI KROKY
   ========================================================================= */

.occ {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.occ li {
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--card);
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
}

.occ h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.015em;
}

.occ p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* očíslovaný zoznam 1, 2, 3 */
.howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: s;
}

.howto li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.howto li:last-child {
  border-bottom: 0;
}

/* číslo v červenom štvorčeku */
.howto li::before {
  content: counter(s);
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.howto b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.015em;
}

.howto span {
  color: var(--muted);
}

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


/* =========================================================================
   15. OSLAVY: KARTA S TELEFÓNOM
   ========================================================================= */

.party-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  display: grid;
  gap: 18px;
  position: relative;
  background: var(--card);
}

.party-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.party-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
}

/* červená bodka ako odrážka */
.party-card li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 15%, transparent);
}

.phone {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  user-select: all;
}


/* =========================================================================
   16. KONTAKT: OTVÁRACIE HODINY (graf)
   ========================================================================= */

.hours-sec {
  margin-top: 12px;
  padding-block: clamp(32px, 5vw, 56px);
  background: var(--stage);
  color: var(--stage-ink);
  border: 1px solid var(--stage-rule);
}

.hours-sec .eyebrow {
  color: var(--stage-ink);
  background: rgb(255 255 255 / .08);
}

.hours-sec .lead {
  color: var(--stage-muted);
}

.hgrid {
  display: grid;
  gap: 32px;
}

/* „Otvorené každý deň.“ */
.bigstatus {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0;
}

.bigstatus span {
  color: var(--red);
}

.hint {
  color: var(--stage-muted);
  margin: 12px 0 0;
}

/* graf: jeden riadok = jeden deň (deň | pás | čas) */
.chart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.hrow {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 6.2rem;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--stage-rule);
  font-variant-numeric: tabular-nums;
}

.hrow .d {
  font-size: 14.5px;
  color: var(--stage-muted);
}

.hrow .t {
  text-align: right;
  font-weight: 500;
  font-size: 14.5px;
}

/* sivá koľajnica a pás otváracích hodín */
.track {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: var(--stage-rule);
}

.fillb {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: var(--stage-ink);
  opacity: .55;
}

/* dnešný deň je zvýraznený červenou */
.hrow.today .d,
.hrow.today .t {
  color: var(--stage-ink);
}

.hrow.today .d::after {
  content: " ●";
  color: var(--red);
  font-size: 11px;
  vertical-align: 2px;
}

.hrow.today .fillb {
  background: var(--red);
  opacity: 1;
}

/* zvislá čiara „teraz“ */
.now {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--stage-ink);
  border-radius: 2px;
}

.now::after {
  content: attr(data-t);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--stage-ink);
  white-space: nowrap;
}

/* os pod grafom: 6 h, 12 h, 18 h, 24 h */
.axis {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 6.2rem;
  gap: 12px;
  font-size: 12px;
  color: var(--stage-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.axis-scale {
  position: relative;
  height: 16px;
  margin-top: 6px;
}

.axis-scale > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.axis-scale > span:first-child {
  transform: none;
}

.axis-scale > span:last-child {
  transform: translateX(-100%);
}

@media (min-width: 760px) {
  .hgrid {
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
  }
}


/* =========================================================================
   17. KONTAKT: KDE NÁS NÁJDETE (mapa)
   ========================================================================= */

.find {
  display: grid;
  gap: 28px;
}

.map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  max-width: 100%;
}

.map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* text vedľa mapy */
.find-info {
  display: grid;
  gap: 20px;
  justify-items: start;
}

.find-info hgroup .eyebrow {
  margin-bottom: 14px;
}

.addr {
  font-style: normal;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* Pešo / Autom / Z Bradla */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--muted);
}

.steps li b {
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 760px) {
  .find {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}


/* =========================================================================
   18. KONTAKT: SOCIÁLNE SIETE
   ========================================================================= */

.social {
  display: grid;
  gap: 12px;
}

/* karta: ikona | názov | šípka */
.soc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  text-decoration: none;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}

.soc:hover {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  transform: translateY(-2px);
}

/* ikona v sivom štvorčeku */
.soc svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  background: var(--card-2);
}

.soc b {
  display: block;
  font-weight: 600;
  font-size: 17px;
}

.soc small {
  color: var(--muted);
  font-size: 14px;
}

.soc .ar {
  font-size: 20px;
  color: var(--red-ink);
}

@media (min-width: 760px) {
  .social {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =========================================================================
   18a. VLASTNÉ FOTKY (domov: .bites, oslavy: .room)
   ========================================================================= */

/* domov: šesť fotiek, dva rady po troch (na mobile sa posúvajú do strany) */
.bites {
  padding-bottom: 64px;
}

.bites-row,
.room-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bites-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.bites-row::-webkit-scrollbar {
  display: none;
}

.bites-row li {
  scroll-snap-align: start;
}

.bites figure,
.room figure {
  margin: 0;
  height: 100%;
}

.bites img,
.room img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--card-2);
}

/* výšku dáva pomer strán, aby popisok ostal pod fotkou a nezakryl ho ďalší rad */
.bites figure,
.bites img {
  height: auto;
}

.bites img {
  aspect-ratio: 4 / 5;
}

/* výrez širokej fotky tak, aby sa zmestil závin aj matcha */
.bites img.pos-zavin {
  object-position: 68% 50%;
}

.bites figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* oslavy: veľká fotka navrchu (.top), pod ňou široké (.wide) a na výšku.
   Na počítači 4 stĺpce: široká zaberá 2, poradie v HTML skladá plné rady bez dier. */
.room {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-bottom: 0;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.room-grid li {
  aspect-ratio: 3 / 4;
}

.room-grid .top,
.room-grid .wide {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

@media (min-width: 760px) {
  .bites-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }

  .room-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .room-grid .top {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }

  /* pri širšom výreze nech ostane vidno stôl, nie strop */
  .room-grid .top img {
    object-position: 50% 85%;
  }

  /* výšku radu určí fotka na výšku, široká sa jej prispôsobí */
  .room-grid .wide {
    position: relative;
    aspect-ratio: auto;
  }

  .room-grid .wide figure {
    position: absolute;
    inset: 0;
  }
}


/* =========================================================================
   18b. ZIMNÝ LÍSTOK (.winter) – ľadová modrá namiesto červenej + sneženie
   ========================================================================= */

.winter {
  --frost: #2f6c9a;         /* ľadová modrá pre text na svetlom */
  --frost-glow: #9fd3ff;    /* svetlá modrá na tmavej hlavičke */
  --snow: #8dbde3;          /* sneh vo svetlom režime – modrastý, aby bol vidieť */
  --snow-edge: rgb(47 108 154 / .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .winter {
    --frost: #8cc8f0;
    --snow: #ffffff;
    --snow-edge: rgb(159 211 255 / .5);
  }
}

:root[data-theme="dark"] .winter {
  --frost: #8cc8f0;
  --snow: #ffffff;
  --snow-edge: rgb(159 211 255 / .5);
}

/* hlavička: modrá žiara namiesto červenej + závej snehu dole */
.winter .phead {
  background:
    radial-gradient(120% 40% at 50% 115%, rgb(255 255 255 / .14), transparent 70%),
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--frost-glow) 24%, transparent), transparent 70%),
    var(--stage);
}

.winter .phead > :not(.flake) {
  position: relative;
}

/* veľká vločka v rohu, pomaly sa točí */
.winter .flake {
  position: absolute;
  right: -40px;
  top: -40px;
  width: clamp(180px, 30vw, 300px);
  color: var(--frost-glow);
  opacity: .16;
  animation: spinFlake 60s linear infinite;
}

/* padajúci sneh cez celú obrazovku (nad obsahom, ale klikať sa dá skrz) */
.snow {
  position: fixed;
  inset: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}

.snow i {
  position: absolute;
  top: -10px;
  left: var(--x);
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: var(--snow);
  box-shadow: 0 0 4px var(--snow-edge);
  opacity: .9;
  animation: snowfall var(--d, 14s) linear var(--w, 0s) infinite;
}

.snow i:nth-child(1)  { --x: 2%;  --s: 4px; --d: 14s; --w: -1s; }
.snow i:nth-child(2)  { --x: 6%;  --s: 6px; --d: 18s; --w: -9s; }
.snow i:nth-child(3)  { --x: 10%; --s: 3px; --d: 12s; --w: -4s; }
.snow i:nth-child(4)  { --x: 14%; --s: 5px; --d: 16s; --w: -12s; }
.snow i:nth-child(5)  { --x: 18%; --s: 3px; --d: 13s; --w: -2s; }
.snow i:nth-child(6)  { --x: 21%; --s: 7px; --d: 20s; --w: -15s; }
.snow i:nth-child(7)  { --x: 25%; --s: 3px; --d: 11s; --w: -7s; }
.snow i:nth-child(8)  { --x: 29%; --s: 5px; --d: 15s; --w: -3s; }
.snow i:nth-child(9)  { --x: 32%; --s: 4px; --d: 13s; --w: -10s; }
.snow i:nth-child(10) { --x: 36%; --s: 6px; --d: 19s; --w: -6s; }
.snow i:nth-child(11) { --x: 40%; --s: 3px; --d: 12s; --w: -11s; }
.snow i:nth-child(12) { --x: 43%; --s: 5px; --d: 17s; --w: -1s; }
.snow i:nth-child(13) { --x: 47%; --s: 4px; --d: 14s; --w: -8s; }
.snow i:nth-child(14) { --x: 51%; --s: 7px; --d: 21s; --w: -14s; }
.snow i:nth-child(15) { --x: 54%; --s: 3px; --d: 11s; --w: -5s; }
.snow i:nth-child(16) { --x: 58%; --s: 5px; --d: 16s; --w: -13s; }
.snow i:nth-child(17) { --x: 61%; --s: 4px; --d: 13s; --w: -2s; }
.snow i:nth-child(18) { --x: 65%; --s: 6px; --d: 18s; --w: -10s; }
.snow i:nth-child(19) { --x: 68%; --s: 3px; --d: 12s; --w: -6s; }
.snow i:nth-child(20) { --x: 72%; --s: 5px; --d: 15s; --w: -12s; }
.snow i:nth-child(21) { --x: 75%; --s: 4px; --d: 14s; --w: -4s; }
.snow i:nth-child(22) { --x: 79%; --s: 7px; --d: 20s; --w: -16s; }
.snow i:nth-child(23) { --x: 82%; --s: 3px; --d: 11s; --w: -9s; }
.snow i:nth-child(24) { --x: 86%; --s: 5px; --d: 17s; --w: -3s; }
.snow i:nth-child(25) { --x: 89%; --s: 4px; --d: 13s; --w: -11s; }
.snow i:nth-child(26) { --x: 93%; --s: 6px; --d: 19s; --w: -7s; }
.snow i:nth-child(27) { --x: 96%; --s: 3px; --d: 12s; --w: -1s; }
.snow i:nth-child(28) { --x: 99%; --s: 5px; --d: 16s; --w: -13s; }

/* karty: vločka pri nadpise, modré zloženie */
.winter .cat-b h3::after {
  content: "❄";
  font-size: 18px;
  color: var(--frost);
  margin-left: auto;
}

.winter .nm small {
  color: var(--frost);
}

/* =========================================================================
   18c. LETNÝ LÍSTOK (.summer) – SKÚŠKA
   Šalviová zelená + koralová ako na tlačenom letnom lístku, padajúce lupene.
   Na odstránenie zmaž celú túto sekciu (po „tlačidlo, ktoré vyzerá ako odkaz“)
   a @keyframes petalfall dole v animáciách.
   ========================================================================= */

.summer {
  --sage: #5f7f45;          /* zelená pre text na svetlom */
  --coral: #c9544c;         /* koralová pre názvy a ceny */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .summer {
    --sage: #a9c98d;
    --coral: #f2867d;
  }
}

:root[data-theme="dark"] .summer {
  --sage: #a9c98d;
  --coral: #f2867d;
}

/* hlavička: teplé slnko vpravo hore + zelený odlesk vľavo dole */
.summer .phead {
  background:
    radial-gradient(55% 110% at 100% 0%, rgb(255 190 110 / .30), transparent 70%),
    radial-gradient(50% 90% at 0% 100%, rgb(150 190 110 / .22), transparent 70%),
    var(--stage);
}

/* padajúce lupene kvetov cez celú obrazovku (nad obsahom, ale klikať sa dá skrz) */
.petals {
  position: fixed;
  inset: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}

.petals i {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: var(--s, 9px);
  height: var(--s, 9px);
  border-radius: 80% 0 80% 0;
  background: var(--c, #f4a7a0);
  /* tenký tmavší lem, aby boli lupene vidieť aj na svetlom pozadí */
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .15);
  opacity: .9;
  animation: petalfall var(--d, 16s) linear var(--w, 0s) infinite;
}

.petals i:nth-child(1)  { --x: 3%;  --s: 9px;  --d: 15s; --w: -2s;  --c: #ee8a80; }
.petals i:nth-child(2)  { --x: 7%;  --s: 12px; --d: 19s; --w: -10s; --c: #f0c03c; }
.petals i:nth-child(3)  { --x: 12%; --s: 8px;  --d: 13s; --w: -5s;  --c: #e05a4f; }
.petals i:nth-child(4)  { --x: 16%; --s: 11px; --d: 17s; --w: -13s; --c: #ec9cc2; }
.petals i:nth-child(5)  { --x: 20%; --s: 9px;  --d: 15s; --w: -1s;  --c: #8fb56f; }
.petals i:nth-child(6)  { --x: 24%; --s: 13px; --d: 21s; --w: -8s;  --c: #ee8a80; }
.petals i:nth-child(7)  { --x: 29%; --s: 8px;  --d: 13s; --w: -4s;  --c: #f0c03c; }
.petals i:nth-child(8)  { --x: 33%; --s: 11px; --d: 18s; --w: -15s; --c: #b678d0; }
.petals i:nth-child(9)  { --x: 37%; --s: 9px;  --d: 14s; --w: -7s;  --c: #e05a4f; }
.petals i:nth-child(10) { --x: 41%; --s: 12px; --d: 19s; --w: -11s; --c: #ec9cc2; }
.petals i:nth-child(11) { --x: 45%; --s: 8px;  --d: 13s; --w: -3s;  --c: #8fb56f; }
.petals i:nth-child(12) { --x: 49%; --s: 10px; --d: 16s; --w: -9s;  --c: #f0c03c; }
.petals i:nth-child(13) { --x: 53%; --s: 9px;  --d: 15s; --w: -14s; --c: #ee8a80; }
.petals i:nth-child(14) { --x: 57%; --s: 13px; --d: 22s; --w: -6s;  --c: #b678d0; }
.petals i:nth-child(15) { --x: 61%; --s: 8px;  --d: 13s; --w: -12s; --c: #e05a4f; }
.petals i:nth-child(16) { --x: 65%; --s: 11px; --d: 17s; --w: -2s;  --c: #ec9cc2; }
.petals i:nth-child(17) { --x: 69%; --s: 9px;  --d: 15s; --w: -10s; --c: #8fb56f; }
.petals i:nth-child(18) { --x: 73%; --s: 12px; --d: 20s; --w: -5s;  --c: #f0c03c; }
.petals i:nth-child(19) { --x: 77%; --s: 8px;  --d: 13s; --w: -16s; --c: #ee8a80; }
.petals i:nth-child(20) { --x: 81%; --s: 11px; --d: 18s; --w: -8s;  --c: #e05a4f; }
.petals i:nth-child(21) { --x: 85%; --s: 9px;  --d: 14s; --w: -1s;  --c: #b678d0; }
.petals i:nth-child(22) { --x: 89%; --s: 13px; --d: 21s; --w: -12s; --c: #ec9cc2; }
.petals i:nth-child(23) { --x: 94%; --s: 8px;  --d: 13s; --w: -6s;  --c: #8fb56f; }
.petals i:nth-child(24) { --x: 98%; --s: 10px; --d: 16s; --w: -14s; --c: #f0c03c; }

/* karty: kvietok pri nadpise, koralové názvy, zelené zloženie */
.summer .cat-b h3::after {
  content: "✿";
  font-size: 20px;
  color: var(--coral);
  margin-left: auto;
}

/* bez stĺpca s objemom: názov | cena */
.summer .row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.summer .nm {
  color: var(--coral);
}

.summer .nm small {
  color: var(--sage);
}

/* limonády: tri veľkosti s cenou + príchute ako štítky */
.sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 16px;
}

.sizes span {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  text-align: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sizes b {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage);
}

.flavors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flavors li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--coral) 35%, transparent);
  color: var(--coral);
  font-size: 14.5px;
  font-weight: 500;
}

.flavors li::first-letter {
  text-transform: uppercase;
}

/* upútavka na sezónny lístok na domovskej stránke (farby berie z .winter / .summer) */
.season-sec {
  padding-top: 20px;
}

.season-promo {
  width: 100%;
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
  padding: 26px clamp(20px, 4vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s;
}

.season-promo[hidden] {
  display: none;
}

.season-promo + .season-promo {
  margin-top: 12px;
}

.season-promo.winter {
  background: color-mix(in srgb, var(--frost) 9%, var(--card));
}

.season-promo.summer {
  background: color-mix(in srgb, var(--sage) 10%, var(--card));
}

.season-promo:hover {
  border-color: var(--muted);
}

.sp-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.winter .sp-k { color: var(--frost); }
.summer .sp-k { color: var(--coral); }

.sp-t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.sp-p {
  color: var(--muted);
}

.sp-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 14.5px;
}

.sp-go svg {
  width: 18px;
  height: 18px;
  transition: transform .2s;
}

.season-promo:hover .sp-go svg {
  transform: translateX(3px);
}

@media (min-width: 760px) {
  .season-promo {
    grid-template-columns: 1fr auto;
    column-gap: 32px;
    align-items: center;
  }

  .sp-k,
  .sp-t,
  .sp-p {
    grid-column: 1;
  }

  .sp-go {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
  }
}

/* tlačidlo, ktoré vyzerá ako odkaz */
.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--red-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}


/* =========================================================================
   19. PÄTIČKA + TOAST
   ========================================================================= */

.site-foot {
  background: var(--stage);
  color: var(--stage-muted);
  position: relative;
  padding-block: 10px 40px;
  display: grid;
  gap: 18px;
  font-size: 14px;
}

/* silueta Bradla nad pätičkou */
.hill {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
  color: var(--stage);
  background: var(--paper);
}

.site-foot .word {
  font-size: clamp(46px, 12vw, 90px);
  color: var(--stage-ink);
}

/* stĺpce Adresa / Hodiny / Kontakt */
.fgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px 30px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.fgrid b {
  color: var(--stage-ink);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}

/* vyskakovacia hláška dole (napr. „Číslo skopírované“) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / .4);
  z-index: 40;
}


/* =========================================================================
   20. ANIMÁCIE
   ========================================================================= */

/* pulzujúca zelená bodka „Otvorené“ */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

/* napĺňanie pohára v logu */
@keyframes fill {
  from { transform: translateY(17px); }
  to   { transform: translateY(0); }
}

/* bublinky v pohári */
@keyframes rise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: .9; }
  80%  { opacity: .6; }
  100% { transform: translateY(-12px); opacity: 0; }
}

/* bežiaci ticker */
@keyframes tick {
  to { transform: translateX(-50%); }
}

/* objavenie podstránky */
@keyframes viewIn {
  from { opacity: .001; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* sneh na zimnom lístku */
@keyframes snowfall {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(16px, 26vh); }
  50%  { transform: translate(-4px, 52vh); }
  75%  { transform: translate(14px, 78vh); }
  100% { transform: translate(0, calc(100vh + 20px)); }
}

@keyframes spinFlake {
  to { transform: rotate(360deg); }
}

/* lupene na letnom lístku (SKÚŠKA) */
@keyframes petalfall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-22px, 26vh) rotate(120deg); }
  50%  { transform: translate(8px, 52vh) rotate(240deg); }
  75%  { transform: translate(-16px, 78vh) rotate(360deg); }
  100% { transform: translate(6px, calc(100vh + 20px)) rotate(480deg); }
}

/* ak má používateľ v systéme vypnuté animácie */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .bub,
  .snow,
  .petals {
    opacity: 0;
  }
}