/* ============================================================
   Strechy Partizánske — hlavný štýl témy
   Zdroj dizajnu: eshop-real/style.css (2026-08-26)
   Woo blok na konci je téme vlastný — pri ďalšom prenose dizajnu
   ho treba znova pripojiť, v zdroji nie je.
   ============================================================ */
/* ============================================================
   ESHOP — Strechy Partizánske
   Design language matchne funnel-v1 (modrá + biela + červená)
   ============================================================ */

:root {
  --blue: #1565C0;
  --blue-dark: #0d47a1;
  --blue-deep: #0a3578;
  --blue-soft: #e3f0fb;

  --red: #D32F2F;
  --red-dark: #b71c1c;

  --yellow: #FBC02D;
  /* tmavšia zlatá pre hviezdičky — žltá mala na bielej kontrast 1,66:1 */
  --star: #C97F00;
  --green: #2E7D32;

  --grey-50: #f8fafc;
  --grey-100: #eef2f6;
  --grey-200: #d8dee5;
  --grey-300: #a8b2bc;
  --grey-700: #4a5560;
  --grey-900: #15191f;

  /* sémantické tokeny — jediné, čo prepína tmavý režim */
  --bg: #fff;
  --surface: #fff;
  --blue-ink: #1565C0;
  --red-ink: #D32F2F;
  --green-ink: #2E7D32;

  /* jednotná výška všetkých interaktívnych prvkov (buttony, inputy, logo) */
  --ui-h: 55px;

  --shadow-sm: 0 2px 8px rgba(15,30,60,0.06);
  --shadow-md: 0 8px 24px rgba(15,30,60,0.1);
  --shadow-lg: 0 20px 50px rgba(15,30,60,0.18);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--grey-900);
  background: var(--bg);
  padding-bottom: 40px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5 { margin: 0 0 10px; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* Cutoff state — keď cutoff prešiel, červenkasté zvýraznenie */
#cutoff.expired { opacity: 0.85; }
#cutoff.expired b { color: #ef9a9a; }

/* Disclaimer pri bundle CTA (dáva sa pri objednávke) */
.bundle-disclaimer {
  display: block !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px dashed rgba(255,255,255,0.18);
  font-size: 11.5px !important;
  opacity: 0.78;
  line-height: 1.4;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.92) !important;
}
.bundle-disclaimer b { color: var(--yellow); font-weight: 700; }

/* ============================================================
   PREBAR + PRICE PIN — časová os cutoff window 8:00 → 14:00
   --p   (0..1) progress, riadi gradient + marker
   --pin (0..1) clamped 6—94 %, pozícia floating pinu
   ============================================================ */
.prebar-wrap {
  position: relative;
  margin-bottom: 56px;
}
.prebar {
  background: linear-gradient(
    90deg,
    var(--blue-deep) 0%,
    var(--blue) calc((1 - var(--p, 0)) * 100% - 5%),
    var(--red) calc((1 - var(--p, 0)) * 100% + 5%),
    var(--red-dark) 100%
  );
  color: #fff;
  padding: 10px 0;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 1.5s ease;
  position: relative;
  overflow: visible;
}
.prebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  animation: prebar-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes prebar-shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
.prebar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prebar-pill {
  background: rgba(0,0,0,0.18);
  padding: 3px 10px;
  border-radius: 99px;
  font-weight: 600;
}
.prebar-pill .name-cta,
.prebar-pill .name-edit {
  color: var(--yellow);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(251,192,45,0.4);
  cursor: pointer;
  white-space: nowrap;
}
.prebar-pill .name-cta:hover,
.prebar-pill .name-edit:hover {
  text-decoration-color: var(--yellow);
}
.prebar-pill .name-edit { font-size: 11px; opacity: 0.85; }
.prebar-end b {
  background: rgba(0,0,0,0.25);
  padding: 2px 8px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-left: 4px;
}

/* Žltý marker */
.prebar-marker {
  position: absolute;
  top: -2px; bottom: -2px;
  left: calc(var(--p, 0) * 0% + (1 - var(--p, 0)) * 100%);
  width: 3px;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(251,192,45,0.95), 0 0 4px #fff;
  transition: left 1.5s ease;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%);
}
.prebar-marker::before,
.prebar-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 11px; height: 11px;
  background: var(--yellow);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(251,192,45,0.9);
}
.prebar-marker::before { top: -5px; }
.prebar-marker::after  { bottom: -5px; }

/* Floating price pin */
.prebar-pin {
  position: absolute;
  top: 100%;
  /* --pin-w nastavuje JS zo skutočnej šírky pinu, aby neprečnieval cez okraj */
  left: clamp(
    calc(var(--pin-w, 180px) / 2),
    calc((1 - var(--pin, 0)) * 100%),
    calc(100% - var(--pin-w, 180px) / 2)
  );
  transform: translateX(-50%);
  background: var(--yellow);
  color: #15191f;
  padding: 10px 18px 11px 16px;
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  z-index: 35;
  transition: left 1.5s ease, transform 0.2s, background 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border-top: 4px solid var(--yellow);
}
.prebar-pin::before {
  content: '';
  position: absolute;
  top: -4px; left: 0; right: 0;
  height: 4px;
  background: var(--yellow);
}
.prebar-pin:hover {
  background: #f9b21a;
  transform: translateX(-50%) translateY(2px);
  box-shadow: 0 18px 32px rgba(0,0,0,0.28);
}
.pin-pct {
  font-size: 24px;
  font-weight: 900;
  color: var(--red-dark);
  line-height: 1;
}
.pin-meta { display: flex; flex-direction: column; line-height: 1.2; }
.pin-meta small {
  font-size: 10px;
  color: #4a5560;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.pin-meta b {
  font-size: 13.5px;
  color: #15191f;
  font-weight: 800;
}
@media (max-width: 700px) {
  .hide-sm { display: none; }
  .prebar { padding: 7px 0; font-size: 12.5px; }
  .prebar-inner { gap: 8px; }
}
@media (max-width: 600px) {
  .prebar-pin { padding: 8px 12px 9px; gap: 10px; }
  .pin-pct { font-size: 19px; }
  .pin-meta small { font-size: 9px; }
  .pin-meta b { font-size: 12px; }
  .prebar-wrap { margin-bottom: 50px; }
}

/* ============================================================
   TOPBAR (logo + search + actions)
   ============================================================ */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--grey-100);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-sm);
}
.topbar-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 14px 20px;
}
@media (max-width: 900px) {
  .topbar-inner { grid-template-columns: auto auto; }
  form.search { grid-column: 1 / -1; order: 3; }
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: auto; height: var(--ui-h); border-radius: 4px; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

/* TELEFÓN — vedľa loga (desktop) / vrch stránky (mobil) */
.brand-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--blue-ink);
  height: var(--ui-h);
  padding: 0 12px;
  border: 1px solid var(--grey-100);
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s;
}
.brand-phone:hover { background: var(--grey-50); }
.bp-ic { font-size: 18px; }
.bp-tx { display: flex; flex-direction: column; line-height: 1.15; }
.bp-tx small { font-size: 11px; color: var(--grey-700); }
.bp-tx b { font-size: 16px; font-weight: 800; color: var(--blue-ink); }

/* Tmavý režim: kontakt v hlavičke celý bielou. Emoji telefónu je farebný glyph,
   `color` naň nezaberie — biela silueta sa preto robí filtrom. */
[data-theme="dark"] .brand-phone,
[data-theme="dark"] .bp-tx small,
[data-theme="dark"] .bp-tx b { color: #fff; }
[data-theme="dark"] .bp-ic { filter: brightness(0) invert(1); }

.phonebar {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--grey-100);
  padding: 8px 12px;
}
/* Telefón drží stred pruhu aj s ikonami vedľa — preto grid s prázdnym
   protiváhovým stĺpcom, nie flex so space-between. */
.phonebar-tel {
  color: var(--blue-ink);
  font-size: 17px;
  font-weight: 800;
}
@media (max-width: 900px) {
  .brand-phone { display: none; }
  .phonebar { display: block; }
}

form.search { position: relative; max-width: 580px; width: 100%; }
form.search input {
  background: var(--surface);
  color: var(--grey-900);
  width: 100%;
  height: var(--ui-h);
  padding: 0 50px 0 16px;
  border: 2px solid var(--blue);
  border-radius: 6px;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
}
form.search input:focus { border-color: var(--blue-dark); }
form.search button {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: var(--red);
  color: #fff;
  border: 0;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
}
form.search button:hover { background: var(--red-dark); }

.actions { display: flex; gap: 6px; align-items: center; }
.act {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ui-h);
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--grey-700);
  transition: background .15s;
}
.act:hover { background: var(--grey-50); }
.act-ic {
  font-size: 22px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.act-tx { display: flex; flex-direction: column; line-height: 1.15; }
.act-tx b { font-size: 13px; color: var(--grey-900); font-weight: 700; }
.act-tx small { font-size: 11px; color: var(--grey-700); }
.act-cart { background: var(--red); color: #fff; }
.act-cart:hover { background: var(--red-dark); }
.act-cart .act-tx b, .act-cart .act-tx small { color: #fff; }
.act-funnel { background: var(--blue-soft); }
.act-funnel:hover { background: #cee0f3; }
.act-funnel .act-tx b { color: var(--blue-ink); }
.act-acc { background: var(--blue); color: #fff; }
.act-acc:hover { background: var(--blue-dark); }
.act-acc .act-tx b, .act-acc .act-tx small { color: #fff; }
.act-ic svg { display: block; }
@media (max-width: 700px) {
  .act-tx { display: none; }
}

/* Prepínač mobilného menu — v rovnakom rade ako E-book */
.act-menu {
  display: none;
  background: var(--blue-soft);
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.act-menu .act-tx b { color: var(--blue-ink); }
.act-menu.is-open { background: var(--blue); }
.act-menu.is-open .act-ic { color: #fff; }
.act-menu.is-open .act-tx b, .act-menu.is-open .act-tx small { color: #fff; }

/* MAIN NAV */
.mainnav {
  background: var(--blue);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mainnav-inner {
  display: flex;
  flex-wrap: wrap;
}
/* wp_nav_menu s items_wrap '%3$s' vypíše <li> mimo <ul>, takže pravidlo
   `ul { list-style: none }` ich nechytí a prehliadač im dá odrážku. */
.mainnav-inner li { list-style: none; }
.mainnav a {
  display: block;
  padding: 12px 18px;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: background .15s;
}
.mainnav a:hover { background: var(--blue-dark); }
.mainnav .hot { background: var(--red); animation: pulse 3s infinite; }
.mainnav .hot:hover { background: var(--red-dark); }
/* Eshop je tlačidlo pri prepínači režimu, nie položka WP menu (vyňaté z menu Hlavné).
   Rovnaké hrany (radius 6px ako .btn) má aj prepínač — pravidlo je pri .theme-toggle. */
.mainnav .nav-eshop {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px; /* presne pod tlačidlom Účet v topbare (Účet 96, Košík 119, medzera 6) */
  height: 38px;
  background: var(--red);
  border-radius: 6px;
  border-right: 0;
  padding: 0;
  font-weight: 700;
}
.mainnav .nav-eshop:hover { background: var(--red-dark); }

@media (max-width: 900px) {
  .act-menu { display: flex; }
  .mainnav { display: none; }
  .mainnav.open { display: block; }
  .mainnav-inner { flex-direction: column; }
  .mainnav a {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    padding: 13px 0;
  }
  .mainnav .nav-eshop {
    margin: 10px 0 0;
    align-self: flex-start;
    border-bottom: 0;
  }
}
@media (max-width: 700px) {
  :root { --ui-h: 50px; }
  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .actions { gap: 4px; justify-content: flex-end; }
  .act {
    width: var(--ui-h);
    padding: 0;
    justify-content: center;
    flex: 0 0 auto;
  }
  .act-ic { font-size: 21px; line-height: 1; }
}
@keyframes pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--blue-soft) 0%, var(--bg) 65%);
  padding: 50px 0 60px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(21,101,192,0.1) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-inner {
  display: grid;
  gap: 40px;
  align-items: center;
  position: relative;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.6fr 1fr; gap: 50px; } }
.hero-tag {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 14px;
}
.hero h1 span { color: var(--red-ink); }
.hero-sub {
  font-size: 17px;
  color: var(--grey-700);
  margin: 0 0 24px;
  max-width: 540px;
}
.hero-sub b { color: var(--grey-900); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 16px 12px;
  box-shadow: var(--shadow-sm);
  max-width: 540px;
}
.hero-stats > div { text-align: center; }
.hero-stats b {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--blue-ink);
  line-height: 1;
  margin-bottom: 4px;
}
.hero-stats span { font-size: 11.5px; color: var(--grey-700); line-height: 1.25; display: block; }

/* HERO PROMO CARD */
.hero-promo {
  background: var(--surface);
  border: 2px solid var(--red);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-md);
}
.promo-badge {
  position: absolute;
  top: -16px; right: 20px;
  background: var(--red);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 900;
  font-size: 16px;
}
.hero-promo h3 { font-size: 22px; color: var(--blue-ink); margin-bottom: 4px; }
.hero-promo p { color: var(--grey-700); font-size: 13.5px; margin: 0 0 14px; }
.promo-price { margin-bottom: 16px; }
.promo-price s { color: var(--grey-300); font-size: 14px; display: block; }
.promo-price b { color: var(--red-ink); font-size: 28px; font-weight: 900; display: block; }
.hero-promo small { display: block; margin-top: 10px; color: var(--red-ink); font-size: 11.5px; font-weight: 600; }

/* PROMO SLIDER — TIP karta strieda tri povrchové varianty zachytávača.
   Nosný layout (flex, šírky) je AJ inline vo front-page.php, aby rozsync
   HTML ↔ CSS kartu nerozbil (28.8.2026); tu je kozmetika a animácia. */
.promo-viewport { overflow: hidden; border-radius: 8px; }
.promo-track { display: flex; width: calc(var(--sp-slides, 1) * 100%); transition: transform .6s ease; }
.promo-slide { width: calc(100% / var(--sp-slides, 1)); flex: none; }
.promo-img { width: 180px; height: 180px; padding: 14px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.promo-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.promo-img-fallback { font-size: 64px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .promo-track { transition: none; } }
/* fotka má multiply — v tme potrebuje svetlú podložku, ako .prod-img */
[data-theme="dark"] .promo-img { background: #e6ebf1; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ui-h);
  padding: 0 22px;
  border: 0;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  text-decoration: none;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(211,47,47,0.25); }
.btn-primary:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(21,101,192,0.35); }
.btn-outline { background: var(--surface); color: var(--blue-ink); border: 2px solid var(--blue); padding: 0 20px; }
.btn-outline:hover { background: var(--blue); color: #fff; }

/* Tmavý režim: obrysové tlačidlo malo text v --blue-ink (#6fb4ff) — na tmavom
   podklade pôsobil ako odkaz, nie ako tlačidlo. To isté číslo v mobilnom pruhu. */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .phonebar-tel { color: #fff; }

.btn-yellow { background: var(--yellow); color: #15191f; box-shadow: 0 4px 12px rgba(251,192,45,0.35); }
.btn-yellow:hover { background: #f9b21a; transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 0 28px; font-size: 16px; }

/* ============================================================
   USP BAR
   ============================================================ */
.usps {
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
  border-bottom: 1px solid var(--grey-100);
  padding: 22px 0;
}
.usps-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.usp { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.usp span { font-size: 24px; }
.usp b { display: block; color: var(--grey-900); font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.usp small { display: block; color: var(--grey-700); font-size: 11.5px; }

/* ============================================================
   SECTION SHARED
   ============================================================ */
.section { padding: 60px 0; }
.section-grey { background: var(--grey-50); }

.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red-ink);
  margin-bottom: 10px;
}
.eyebrow.yellow { color: var(--yellow); }

.sec-h {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
}
.sec-h span { color: var(--red-ink); }
.sec-h.light { color: #fff; }
.sec-h.light span { color: var(--yellow); }
.lead { font-size: 15.5px; color: var(--grey-700); margin: 0 0 30px; max-width: 720px; }
.lead.light { color: rgba(255,255,255,0.85); }

.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; gap: 20px; flex-wrap: wrap; }
.link-all { color: var(--red-ink); font-weight: 700; font-size: 14px; }
.heureka-badge { background: var(--green); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12.5px; }

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.cat {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 20px;
  transition: all .15s;
  display: block;
}
.cat:hover {
  border-color: var(--blue-ink);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cat-ic {
  font-size: 38px;
  margin-bottom: 10px;
}
/* Obrázok kategórie má vlastný podklad so zaoblením, preto sa nekreslí rám ani
   pozadie. Vypĺňa celú obsahovú šírku karty, takže okraj hore aj po stranách je
   rovnaký (= padding karty). Preto má .cat rovnomerný padding 20px — pri
   pôvodnom strope 148 px ostávalo vpravo 66 px prázdna a fotka sedela mimo osi. */
.cat-ic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 24px;
}
.cat h3 {
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--grey-900);
}
.cat small {
  font-size: 12.5px;
  color: var(--grey-700);
  display: block;
  margin-bottom: 8px;
}
.cat-tags {
  font-size: 11px;
  color: var(--blue-ink);
  font-weight: 600;
  display: block;
  padding-top: 8px;
  border-top: 1px dashed var(--grey-200);
}

/* Dlaždice typových skupín. Nemajú obrázok zámerne — vlastná výroba nad nimi
   nesie fotky a druhá foto mriežka pod ňou by ju zrovnala. */
.typ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
}
.typ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 15px 16px;
  transition: all .15s;
}
.typ:hover {
  border-color: var(--blue-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.typ-nazov {
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-900);
}
.typ-pocet {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-ink);
  background: var(--blue-soft);
  border-radius: 20px;
  padding: 3px 10px;
}

/* ============================================================
   FUNNEL CTA BANNER
   ============================================================ */
.funnel-banner {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  padding: 40px 0;
}
.fb-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 800px) { .fb-inner { grid-template-columns: 2fr 1fr; gap: 40px; } }
.fb-eye { display: inline-block; color: var(--yellow); font-weight: 700; font-size: 13px; letter-spacing: 1px; margin-bottom: 8px; }
.funnel-banner h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.funnel-banner h2 span { color: var(--yellow); }
.funnel-banner p { font-size: 15px; opacity: 0.9; margin: 0; max-width: 620px; }
.fb-cta { text-align: center; }
.fb-cta small { display: block; margin-top: 10px; font-size: 12px; opacity: 0.8; }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.prod {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 16px;
  transition: all .15s;
  display: flex;
  flex-direction: column;
}
.prod:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
/* hover kdekoľvek na karte prefarbí CTA na modrú — vyššia špecificita než .btn-primary:hover */
.prod:hover .btn-primary,
.prod:focus-visible .btn-primary {
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(21, 101, 192, 0.35);
}
.prod-tag {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--green);
  color: #fff;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  z-index: 2;
}
.prod-tag-hot { background: var(--red); animation: pulse 2.5s infinite; }
.prod-tag-new { background: var(--blue); }
.prod-stock {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(15,30,60,0.85);
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  z-index: 2;
}
.prod-img {
  background: var(--blue-soft);
  border-radius: 8px;
  padding: 30px 0;
  margin-bottom: 14px;
  font-size: 60px;
  text-align: center;
}
.prod h3 {
  font-size: 15.5px;
  /* presne 2 riadky — dlhší názov sa oreže, kratší dorovná, karta má vždy rovnakú výšku */
  min-height: 2.36em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 4px;
  color: var(--grey-900);
}
.prod small {
  color: var(--grey-700);
  font-size: 13.5px;
  margin-bottom: 10px;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-rating {
  font-size: 13px;
  color: var(--yellow);
  margin-bottom: 10px;
  height: 18px;
  overflow: hidden;
  white-space: nowrap;
}
.prod-rating { color: var(--star); }
.prod-rating b { color: var(--grey-900); font-weight: 700; }
.prod-rating span { color: var(--grey-700); }
.prod-price {
  /* poistka pri dlhších názvoch — cena a CTA sa vždy prilepia na spodok karty */
  margin-top: auto;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  height: 30px;
  overflow: hidden;
}
.prod-price s { color: var(--grey-300); font-size: 13px; }
.prod-price b { color: var(--red-ink); font-size: 22px; font-weight: 900; }
.prod-price span { color: var(--grey-700); font-size: 12.5px; margin-left: auto; }
.prod > .btn { margin-top: 0; }

/* ============================================================
   BUNDLE BANNER
   ============================================================ */
.bundle {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-dark) 60%, var(--red) 130%);
  color: #fff;
  border-radius: 14px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.bundle::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
@media (min-width: 800px) { .bundle { grid-template-columns: 1.6fr 1fr; gap: 50px; } }
.bundle .lead { color: rgba(255,255,255,0.88); margin-bottom: 18px; }
.bundle-list { display: grid; gap: 6px; font-size: 14px; }
.bundle-list li { padding: 4px 0; }

.bundle-buy {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 26px;
  text-align: center;
  position: relative;
}
.bundle-buy small { display: block; font-size: 12px; opacity: 0.85; }
.bundle-buy s { display: block; color: rgba(255,255,255,0.6); font-size: 18px; margin: 4px 0 4px; }
.bundle-buy b { display: block; color: var(--yellow); font-size: 38px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.bundle-save { color: var(--yellow) !important; font-weight: 700 !important; font-size: 13px !important; margin-bottom: 14px !important; }
.bundle-buy .btn { margin-bottom: 8px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.rev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.rev {
  background: var(--surface);
  border: 1px solid var(--grey-100);
  border-radius: 10px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.rv-stars { color: var(--star); font-size: 16px; margin-bottom: 10px; letter-spacing: 1.5px; }
.rev p { font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.rev small { font-size: 12px; color: var(--grey-700); }
.rev small b { color: var(--grey-900); font-weight: 700; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter {
  background: var(--yellow);
  padding: 40px 0;
}
.news-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}
@media (min-width: 800px) { .news-inner { grid-template-columns: 1fr auto; gap: 40px; } }
.newsletter h2 { font-size: 22px; margin-bottom: 4px; color: #15191f; }
.newsletter p { margin: 0; color: #15191f; font-size: 14.5px; }
.news-form { display: flex; gap: 8px; }
.news-form input {
  padding: 12px 14px;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  min-width: 240px;
  background: var(--surface);
  color: var(--grey-900);
}
/* Bez týchto dvoch riadkov nechá `color-scheme: dark` na poli tmavé pozadie,
   ale placeholder sivý — text v okne potom splynie s podkladom. */
.news-form input::placeholder {
  color: var(--grey-700);
  opacity: 1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--blue-deep);
  color: #eef2f6;
  padding: 50px 0 0;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}
.footer strong { display: block; font-size: 16px; color: var(--yellow); margin-bottom: 10px; font-weight: 800; }
.footer h5 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--yellow);
  margin-bottom: 12px;
}
.footer ul li { padding: 0; }
.footer a { color: #eef2f6; display: inline-block; padding: 7px 0; }
.footer a:hover { color: var(--yellow); }
.footer p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.footer-bottom {
  margin-top: 40px;
  padding: 18px 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 12px;
  color: #a8b2bc;
}

/* ============================================================
   COOKIE LIŠTA
   ============================================================ */
.cookiebar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--blue-deep);
  color: #fff;
  border-top: 3px solid var(--red);
  padding: 14px 0;
  z-index: 45;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}
.cookiebar[hidden] { display: none; }
.cookie-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-inner p { margin: 0; font-size: 13.5px; max-width: 760px; }
.cookie-inner b { color: var(--yellow); font-weight: 700; }
.cookie-inner a { color: #fff; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .btn-outline { background: transparent; color: #fff; border-color: #fff; }
.cookie-actions .btn-outline:hover { background: #fff; color: var(--blue-deep); }
@media (max-width: 700px) {
  .cookie-inner { justify-content: center; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; padding: 0 10px; }
}


/* ============================================================
   EXTENSIONS — eshop-real (SPA views v demo tokenoch)
   ============================================================ */
.demo-strip { background: #fff3cd; color: #6b5400; font-size: 12px; text-align: center; padding: 5px 10px; }
.ds-short { display: none; }
@media (max-width: 700px) {
  .ds-full { display: none; }
  .ds-short { display: inline; }
}
/* Štvorec, nie pevná výška: obrázky produktov sú štvorcové, takže pri nízkom
   páse ostávalo po stranách 40 % šírky prázdnych a výrobok pôsobil maličko. */
.prod-img { padding: 5%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prod-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
a.prod { color: inherit; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
@media (max-width: 700px) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}
.chip { border: 1px solid var(--grey-200); background: var(--surface); border-radius: 99px; padding: 7px 15px; font-size: 13.5px; cursor: pointer; font-weight: 600; font-family: inherit; }
.chip small { color: var(--grey-700); font-weight: 400; }
.chip.on { background: var(--blue); border-color: var(--blue-ink); color: #fff; }
.chip.on small { color: #cfe0f5; }
.empty { text-align: center; color: var(--grey-700); padding: 60px 0; }
.crumb { font-size: 13.5px; margin-bottom: 16px; color: var(--grey-700); }
.crumb a { color: var(--blue-ink); font-weight: 600; }
.detail { display: grid; grid-template-columns: minmax(280px, 480px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .detail { grid-template-columns: 1fr; } }
.gallery { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 10px; }
.gallery .main { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery .main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.thumbs img { width: 64px; height: 48px; object-fit: contain; border: 2px solid var(--grey-200); border-radius: 6px; cursor: pointer; background: var(--surface); }
.thumbs img.on { border-color: var(--blue-ink); }
.pinfo h1 { font-size: 24px; margin-bottom: 6px; }
.pinfo .avail { color: var(--green-ink); font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.pinfo .bigprice { font-size: 28px; font-weight: 900; color: var(--red-ink); margin: 8px 0 16px; }
.pinfo .bigprice small { font-size: 14px; color: var(--grey-700); font-weight: 600; }
.vgroup { margin-bottom: 14px; }
.vgroup label.g { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.vopts { display: flex; gap: 8px; flex-wrap: wrap; }
.vopt { border: 2px solid var(--grey-200); background: var(--surface); border-radius: 6px; padding: 7px 14px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; }
.vopt.on { border-color: var(--blue-ink); background: var(--blue-soft); color: var(--blue-dark); }
.buyrow { display: flex; gap: 12px; align-items: center; margin: 18px 0 22px; flex-wrap: wrap; }
.qty { display: flex; border: 1px solid var(--grey-200); border-radius: 6px; overflow: hidden; background: var(--surface); }
.qty button { border: none; background: none; width: 38px; font-size: 18px; cursor: pointer; color: var(--blue-ink); font-family: inherit; }
.qty input { width: 52px; border: none; text-align: center; font: inherit; font-weight: 700; background: transparent; color: var(--grey-900); }
.pdesc { background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: 10px; padding: 16px 18px; margin-top: 20px; white-space: pre-line; font-size: 14.5px; }
table.params { border-collapse: collapse; margin-top: 14px; width: 100%; max-width: 460px; font-size: 14px; }
table.params td { border: 1px solid var(--grey-200); padding: 7px 12px; }
table.params td:first-child { font-weight: 600; background: var(--blue-soft); width: 45%; }
.cart-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--grey-200); }
.cart-table th, .cart-table td { padding: 11px 13px; border-bottom: 1px solid var(--grey-100); text-align: left; font-size: 14.5px; }
.cart-table th { background: var(--blue-soft); font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }
.cart-table td.num, .cart-table th.num { text-align: right; white-space: nowrap; }
.cart-table .rm { color: var(--red-ink); cursor: pointer; font-weight: 700; background: none; border: none; font-size: 16px; }
.total { text-align: right; font-size: 19px; font-weight: 800; margin: 16px 0; }
.total small { display: block; font-size: 12.5px; color: var(--grey-700); font-weight: 400; }
form.checkout { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 22px; max-width: 560px; margin-top: 10px; box-shadow: var(--shadow-sm); }
form.checkout h2 { font-size: 18px; margin-bottom: 4px; }
form.checkout label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 5px; }
form.checkout input, form.checkout textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--grey-200); border-radius: 6px; font: inherit; background: var(--surface); color: var(--grey-900); }
.ok-box { background: #e6f4e7; border: 1px solid #bcdcbe; color: #205723; border-radius: 10px; padding: 18px 20px; margin-top: 14px; }
.page-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 24px 28px; white-space: pre-line; font-size: 14.5px; max-width: 860px; }
.page-card h1 { white-space: normal; font-size: 24px; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 900px; }
.kcard { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 20px 22px; font-size: 14.5px; }
.kcard h3 { font-size: 14px; color: var(--blue-ink); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.kcard a { color: var(--blue-ink); font-weight: 700; }
.ebook-lp { max-width: 760px; }
.ebook-lp .eyebrow { color: var(--red-ink); }
.ebook-lp h1 { font-size: 30px; margin: 8px 0 12px; }
.ebook-lp ul.benefits { list-style: none; padding: 0; margin: 18px 0; }
.ebook-lp ul.benefits li { padding: 8px 0 8px 34px; position: relative; font-size: 15.5px; }
.ebook-lp ul.benefits li::before { content: "✓"; position: absolute; left: 4px; color: var(--green-ink); font-weight: 800; font-size: 18px; }
.lead-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.lead-form input { flex: 1; min-width: 220px; padding: 13px 16px; border: 2px solid var(--blue); border-radius: 6px; font: inherit; font-size: 15px; background: var(--surface); color: var(--grey-900); }
.lead-note { font-size: 12px; color: var(--grey-700); }
.popup-overlay { position: fixed; inset: 0; background: rgba(10,25,55,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.popup-overlay.show { opacity: 1; pointer-events: auto; }
.popup { background: var(--surface); border-radius: 12px; max-width: 520px; width: 100%; box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(14px); transition: transform .25s; }
.popup-overlay.show .popup { transform: none; }
.popup .ph { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); color: #fff; padding: 26px 28px 20px; position: relative; }
.popup .ph .eyebrow { color: var(--yellow); }
.popup .ph h3 { color: #fff; font-size: 21px; margin: 6px 0 4px; }
.popup .ph p { margin: 0; color: #c8d9f0; font-size: 13.5px; }
.popup .pclose { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #c8d9f0; font-size: 22px; cursor: pointer; }
.popup .pbody { padding: 22px 28px 26px; }
.popup .pbody ul { margin: 0 0 16px; padding-left: 20px; font-size: 14px; }
.popup .pbody li { margin: 4px 0; }

/* ============================================================
   FOCUS — klávesová navigácia
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.mainnav :focus-visible,
.prebar :focus-visible,
.footer :focus-visible,
.cookiebar :focus-visible,
.act-cart:focus-visible,
.act-acc:focus-visible { outline-color: #fff; }

/* ============================================================
   PREPÍNAČ TÉMY
   ============================================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 12px 18px;
  background: none;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; /* rovnaké hrany ako tlačidlo Eshop */
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
/* V mainnav sedí hneď za tlačidlom Eshop — doprava ho tlačí Eshop, nie toggle.
   Šírka zhodná s Eshopom (120px), preto tesnejší padding, gap a font. */
.mainnav .theme-toggle {
  margin-left: 6px;
  align-self: center;
  border-left: 0;
  width: 119px; /* presne pod tlačidlom Košík */
  height: 38px;
  justify-content: center;
  gap: 5px;
  padding: 0;
  font-size: 12.5px;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--blue-dark); }
.theme-toggle svg { display: block; }
.tt-sun { display: none; }
[data-theme="dark"] .tt-sun { display: block; }
[data-theme="dark"] .tt-moon { display: none; }
@media (max-width: 900px) {
  .theme-toggle { margin-left: 0; width: 100%; border-left: 0; justify-content: flex-start; padding: 13px 0; }
  /* V mainnav zostáva tlačidlom pod Eshopom, zarovnaný doľava. */
  .mainnav .theme-toggle {
    margin: 8px 0 4px;
    width: 119px;
    align-self: flex-start;
    justify-content: center;
    padding: 0;
  }
}

/* ============================================================
   TMAVÝ REŽIM
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #10151b;
  --surface: #191f27;

  --grey-50: #1b212a;
  --grey-100: #2a323d;
  --grey-200: #3a4552;
  --grey-300: #7c8794;
  --grey-700: #a9b4c0;
  --grey-900: #e9eef4;

  --blue-soft: #16283d;
  --blue-ink: #6fb4ff;
  --red-ink: #ff7a75;
  --green-ink: #5fd46a;
  --star: #fbc02d;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.6);
}
/* fotky produktov majú mix-blend-mode: multiply — potrebujú svetlú podložku */
[data-theme="dark"] .prod-img,
[data-theme="dark"] .gallery .main,
[data-theme="dark"] .thumbs img { background: #e6ebf1; }
[data-theme="dark"] .demo-strip { background: #2f2a12; color: #e8c766; }
[data-theme="dark"] .act-funnel { color: #fff; }
[data-theme="dark"] .act-funnel .act-tx b,
[data-theme="dark"] .act-funnel .act-tx small { color: #fff; }
/* base hover je hardcoded svetlomodra — v tme by prebila biely text */
[data-theme="dark"] .act-funnel:hover { background: #1f3550; }
[data-theme="dark"] .promo-price s,
[data-theme="dark"] .prod-price s { color: var(--grey-300); }

/* ============================================================
   MENINOVÁ VÝHRA
   ============================================================ */
.oslava {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 12, 24, 0.82);
  backdrop-filter: blur(3px);
}
.oslava[hidden] { display: none; }
.oslava-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* papieriky sa kreslia NAD kartu, aby sa na nej mohla nabaliť kopa */
.oslava-canvas-top { z-index: 2; }
.oslava-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border-radius: 16px;
  border-top: 6px solid var(--yellow);
  padding: 32px 28px 26px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: oslava-in .45s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes oslava-in {
  from { transform: scale(.82) translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.oslava-x {
  position: absolute;
  top: 8px; right: 10px;
  width: 36px; height: 36px;
  border: 0;
  background: none;
  color: var(--grey-700);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.oslava-x:hover { background: var(--grey-50); }
.oslava-emoji { font-size: 46px; line-height: 1; margin-bottom: 8px; }
.oslava-card h2 { font-size: 25px; margin-bottom: 6px; }
.oslava-card h2 span { color: var(--blue-ink); }
.oslava-lead { color: var(--grey-700); font-size: 14.5px; margin: 0 0 18px; }
.oslava-prize {
  background: var(--yellow);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.oslava-prize b {
  display: block;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: #15191f;
}
.oslava-prize span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #5a4a12;
}
.oslava-code { font-size: 14.5px; margin: 0 0 18px; color: var(--grey-700); }
.oslava-code b {
  color: var(--red-ink);
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 17px;
}
.oslava-note { font-size: 11.5px; color: var(--grey-700); margin: 14px 0 0; }
@media (max-width: 600px) {
  .oslava-card { padding: 26px 20px 22px; }
  .oslava-card h2 { font-size: 21px; }
  .oslava-prize b { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .oslava-card { animation: none; }
}

/* ============================================================
   POROVNANIE PRODUKTOV
   ============================================================ */
.cmp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px 9px;
  border: 1px solid var(--grey-200);
  border-radius: 99px;
  background: var(--surface);
  color: var(--grey-700);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: all .15s;
}
.cmp:hover { border-color: var(--blue); color: var(--blue-ink); }
.cmp.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cmp.plno { border-color: var(--red); color: var(--red-ink); }
.cmp.plno span::after { content: " — max 4"; }
.cmp-detail { margin-top: 14px; font-size: 13px; padding: 8px 14px; }

.cmpbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 44;
  background: var(--blue-deep);
  color: #fff;
  border-top: 3px solid var(--yellow);
  padding: 12px 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.28);
}
.cmpbar[hidden] { display: none; }
.cmp-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cmp-items { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cmp-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 5px 6px 5px 5px;
  font-size: 12px;
  max-width: 210px;
}
.cmp-chip img { width: 34px; height: 26px; object-fit: contain; background: #fff; border-radius: 4px; }
.cmp-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chip button {
  border: 0; background: none; color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.cmp-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cmp-actions .btn-outline { background: transparent; color: #fff; border-color: #fff; }
.cmp-actions .btn-outline:hover { background: #fff; color: var(--blue-deep); }
.cmp-actions .is-off { opacity: .5; pointer-events: none; }

.cmp-only {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cmp-wrap { overflow-x: auto; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 560px; table-layout: fixed; }
.cmp-table th, .cmp-table td {
  border: 1px solid var(--grey-200);
  padding: 11px 13px;
  font-size: 13.5px;
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}
.cmp-table thead td { text-align: center; }
.cmp-table thead img { width: 100%; max-width: 150px; height: 92px; object-fit: contain; margin: 0 auto 8px; background: #fff; border-radius: 6px; }
.cmp-name { display: block; font-weight: 700; margin-bottom: 4px; }
.cmp-name:hover { color: var(--blue-ink); }
.cmp-price { display: block; color: var(--red-ink); font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.cmp-drop { border: 0; background: none; color: var(--grey-700); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.cmp-drop:hover { color: var(--red-ink); }
.cmp-table th { width: 190px; background: var(--grey-50); font-weight: 700; }
.cmp-table thead th { background: transparent; }
.cmp-table tr.diff th { color: var(--blue-ink); }
.cmp-table tr.diff td { font-weight: 600; }
.cmp-table.len-rozdiely tr.same { display: none; }
@media (max-width: 700px) {
  .cmp-inner { justify-content: center; }
  .cmp-actions { width: 100%; }
  .cmp-actions .btn { flex: 1; padding: 0 10px; }
  .cmp-chip { max-width: 150px; }
  .cmp-table th { width: 130px; }
}

/* ============================================================
   NA WEBE SA PRACUJE + HRA
   ============================================================ */
.wip {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wip[hidden] { display: none; }
.wip-pas {
  height: 12px;
  flex-shrink: 0;
  background: repeating-linear-gradient(45deg,
    var(--yellow) 0 22px, #15191f 22px 44px);
  background-size: 62px 62px;
  animation: pas 1.6s linear infinite;
}
@keyframes pas { to { background-position: 62px 0; } }
.wip-in {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wip-head { text-align: center; flex-shrink: 0; }
.wip-znacka {
  color: var(--yellow);
  display: inline-block;
  animation: klepni 2.6s ease-in-out infinite;
  transform-origin: 50% 85%;
}
@keyframes klepni {
  0%, 62%, 100% { transform: rotate(0); }
  70% { transform: rotate(-9deg); }
  78% { transform: rotate(7deg); }
  86% { transform: rotate(-4deg); }
}
.wip-head h1 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 4px; }
.wip-head h1 span { color: var(--red-ink); }
.wip-head p { color: var(--grey-700); max-width: 560px; margin: 0 auto 8px; font-size: 14px; }
.wip-bar {
  height: 6px;
  max-width: 320px;
  margin: 0 auto;
  background: var(--grey-100);
  border-radius: 99px;
  overflow: hidden;
}
.wip-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  animation: napln 3.4s ease-in-out infinite;
}
@keyframes napln {
  0% { width: 8%; }
  55% { width: 74%; }
  75% { width: 78%; }
  100% { width: 8%; }
}
.wip-skip {
  align-self: center;
  flex-shrink: 0;
  background: none;
  border: 0;
  color: var(--grey-700);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 10px;
}
.wip-skip:hover { color: var(--blue-ink); }

.hra {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.hra-hud {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--grey-100);
  font-size: 13px;
  color: var(--grey-700);
  font-weight: 600;
}
.hra-hud b { color: var(--grey-900); font-size: 15px; }
.hra-hud i { font-style: normal; }
.hra-stav { display: flex; align-items: center; gap: 14px; }
.hra-zivoty { color: var(--red-ink); letter-spacing: 3px; }
.hra-zivoty[hidden] { display: none; }

.hra-taby { display: flex; gap: 6px; flex-wrap: wrap; }
.hra-tab {
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  color: var(--grey-700);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.hra-tab:hover { background: var(--grey-100); color: var(--grey-900); }
.hra-tab.is-akt {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
#hraCanvas {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: linear-gradient(180deg, var(--blue-soft) 0%, var(--surface) 78%);
  touch-action: none;
  cursor: pointer;
}
#hraCanvas.hra-bez-kurzora { cursor: none; }
.hra-prekryv {
  position: absolute;
  inset: 45px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  background: rgba(10, 16, 26, 0.72);
  backdrop-filter: blur(2px);
  color: #fff;
}
.hra-prekryv[hidden] { display: none; }
/* na nizkych obrazovkach ma prednost hracia plocha pred dekoraciou hlavicky */
@media (max-width: 560px) {
  .hra-hud { justify-content: center; }
  .hra-tab { padding: 5px 9px; font-size: 12px; }
  .hra-stav { gap: 10px; font-size: 12px; }
}
@media (max-height: 640px) {
  .wip-znacka, .wip-head p, .wip-bar { display: none; }
  .wip-head h1 { font-size: 24px; margin: 0 0 4px; }
  .wip-in { padding: 10px 12px 8px; gap: 8px; }
}
.hra-prekryv h2 { font-size: 24px; margin: 0; }
.hra-prekryv p { margin: 0 0 6px; font-size: 14px; max-width: 380px; opacity: .92; }

.wip-strip {
  position: relative;
  background: #15191f;
  color: var(--yellow);
  font-size: 12.5px;
  overflow: hidden;
}
.wip-strip[hidden] { display: none; }
.wip-strip-run {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(251,192,45,0.16) 0 14px, transparent 14px 28px);
  background-size: 40px 40px;
  animation: pas 2.4s linear infinite;
  pointer-events: none;
}
.wip-strip-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 20px;
  flex-wrap: wrap;
}
.wip-strip b { color: #fff; }
.wip-strip button {
  background: var(--yellow);
  color: #15191f;
  border: 0;
  border-radius: 99px;
  padding: 3px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wip-strip button:hover { background: #fff; }
@media (max-width: 600px) {
  .wip-in { padding: 18px 14px 22px; gap: 14px; }
  #hraCanvas { height: min(42vh, 320px); }
  .hra-hud { font-size: 12px; padding: 8px 10px; }
}

/* ============================================================
   WOOCOMMERCE ADAPTÁCIE — mapovanie Woo markup na demo dizajn
   ============================================================ */
ul.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* Woo dava polozkam float + percentualnu sirku (22.05% pri columns-4) — v gride
   ich to zrazi na zlomok stlpca. Selektor musi mat aspon specificitu Woo pravidla. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.prod {
  width: auto;
  float: none;
  margin: 0;
  clear: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.prod-price .price { font-weight: 800; font-size: 17px; color: var(--blue-dark); }
.prod-price .price del { color: var(--grey-300); font-size: 13px; font-weight: 400; margin-right: 6px; }
.prod-price .price ins { text-decoration: none; color: var(--red); }
/* CTA karty je tiež <a> — .prod a (0,1,1) prebíja .btn-primary (0,1,0), takže bez
   :not(.btn) by tlačidlo zdedilo tmavý text karty namiesto bieleho. */
.prod a:not(.btn) { color: inherit; text-decoration: none; }
.prod .button, a.button.btn { text-align: center; }
.woo-main { padding: 26px 0 70px; }
/* Pás nad výpisom produktov — svetlý režim bledý, tmavý režim tmavý.
   Pevné hodnoty zámerne: --grey-900 sa v tmavom režime prehadzuje na svetlú,
   takže gradient cez premennú by v tmavom skončil v bledej. */
.shop-hero { background: linear-gradient(135deg, var(--blue-soft) 0%, #fff 65%); padding: 26px 0 20px; }
.shop-hero .page-title { font-size: 26px; margin: 6px 0 4px; }

[data-theme="dark"] .shop-hero {
  background: linear-gradient(135deg, #0a3578 0%, #131922 72%);
  color: #fff;
}
[data-theme="dark"] .shop-hero .page-title { color: #fff; }
[data-theme="dark"] .shop-hero .woocommerce-breadcrumb { color: rgba(255,255,255,.72); }
[data-theme="dark"] .shop-hero .woocommerce-breadcrumb a { color: rgba(255,255,255,.92); text-decoration: underline; }
[data-theme="dark"] .shop-hero .woocommerce-breadcrumb a:hover { color: #fff; }
[data-theme="dark"] .shop-hero .term-description,
[data-theme="dark"] .shop-hero p { color: rgba(255,255,255,.85); }
.woocommerce-breadcrumb { font-size: 13px; color: var(--grey-700); margin-bottom: 6px; }
.woocommerce-breadcrumb a { color: var(--blue); }
.woo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 14px 0 18px; flex-wrap: wrap; }
.woocommerce-result-count { margin: 0; color: var(--grey-700); font-size: 13.5px; }
.woocommerce-ordering select { padding: 8px 12px; border: 1px solid var(--grey-200); border-radius: 6px; font: inherit; }
.woo-pagination .woocommerce-pagination { margin-top: 26px; text-align: center; }
.woo-pagination .page-numbers { list-style: none; padding: 0; display: inline-flex; gap: 6px; }
.woo-pagination .page-numbers li a, .woo-pagination .page-numbers li span { display: inline-block; padding: 8px 14px; border: 1px solid var(--grey-200); border-radius: 6px; font-weight: 700; color: var(--blue); }
.woo-pagination .page-numbers li span.current { background: var(--blue); color: #fff; border-color: var(--blue); }
/* Woo dáva hláškam natvrdo color #515151 — v tmavom režime nečitateľné; tokeny to preklopia samy. */
.woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--blue-soft); border-left: 4px solid var(--blue); padding: 12px 16px 12px 44px; border-radius: 6px; margin: 14px 0; list-style: none; color: var(--grey-900); }
/* Ikonu kreslí Woo cez ::before absolútne na left 1.5em — pri paddingu témy sedela na prvom písmene. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { left: 14px; top: 50%; transform: translateY(-50%); }
.woocommerce-error { background: #fdecea; border-color: var(--red); }
/* single product */
.woo-single div.product { display: grid; grid-template-columns: minmax(280px, 480px) 1fr; gap: 32px; align-items: start; }
@media (max-width: 760px) { .woo-single div.product { grid-template-columns: 1fr; } }
/* Woo layout.css dáva galérii a summary float + width 48 % — v gride ich to
   zráža na polovicu bunky. A taby, upsell aj súvisiace produkty sú tiež priame
   deti div.product, takže bez plného rozpätia obsadia bunky gridu vedľa seba. */
.woo-single div.product > div.images,
.woo-single div.product > div.summary { width: auto; float: none; }
.woo-single div.product > .woocommerce-tabs,
.woo-single div.product > .up-sells,
.woo-single div.product > .related.products { grid-column: 1 / -1; }
.woo-single .woocommerce-product-gallery img { border: 1px solid var(--grey-200); border-radius: 10px; width: 100%; height: auto; padding: 6%; background: #fff; }
.woo-single .summary .product_title { font-size: 26px; margin-bottom: 8px; }
/* Špecificita aspoň (0,4,x): Woo pravidlo .woocommerce div.product span.price
   (0,3,2) inak cenu zrazí na 1.25em ~ 20px a font-size odtiaľto neplatí. */
.woo-single div.product .summary .price { font-size: 24px; font-weight: 800; color: var(--blue-dark); }
.woo-single .summary form.cart { display: flex; gap: 12px; align-items: center; margin: 18px 0; flex-wrap: wrap; }
.woo-single .summary form.cart .qty { width: 70px; padding: 11px 8px; border: 1px solid var(--grey-200); border-radius: 6px; text-align: center; font: inherit; }
/* Tlačidlo má aj triedu .alt — Woo pravidlo pre button.button.alt má (0,3,1)
   a fialovú #7f54b3, takže selektor tu musí byť aspoň (0,4,1). */
.woo-single div.product .summary .single_add_to_cart_button { background: var(--red); color: #fff; border: 0; border-radius: 6px; padding: 13px 26px; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 4px 12px rgba(211,47,47,0.25); }
.woo-single div.product .summary .single_add_to_cart_button:hover { background: var(--red-dark); }
.woo-single .woocommerce-tabs ul.tabs { list-style: none; padding: 0; display: flex; gap: 6px; border-bottom: 2px solid var(--grey-100); margin: 30px 0 0; }
.woo-single .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 18px; font-weight: 700; color: var(--grey-700); }
.woo-single .woocommerce-tabs ul.tabs li.active a { color: var(--blue); border-bottom: 2px solid var(--blue); margin-bottom: -2px; }
.woo-single .woocommerce-Tabs-panel { padding: 18px 0; }
.woo-single .shop_attributes td, .woo-single .shop_attributes th { border: 1px solid var(--grey-200); padding: 7px 12px; }
.woo-single .shop_attributes th { background: var(--blue-soft); }
/* cart + checkout základ */
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--grey-200); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-bottom: 1px solid var(--grey-100); padding: 11px 13px; text-align: left; }
.woocommerce table.shop_table th { background: var(--blue-soft); font-size: 12.5px; text-transform: uppercase; }
.woocommerce button.button, .woocommerce a.checkout-button, .woocommerce #place_order { background: var(--red); color: #fff; border: 0; border-radius: 6px; padding: 12px 22px; font-weight: 700; cursor: pointer; }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select { padding: 10px 12px; border: 1px solid var(--grey-200); border-radius: 6px; font: inherit; width: 100%; }
.woocommerce form .form-row { margin-bottom: 12px; }
.related.products { margin-top: 40px; }
.related.products > h2 { font-size: 20px; margin-bottom: 16px; }

/* ============================================================
   WOOCOMMERCE — tmavý režim
   Woo blok vyššie ma natvrdo #fff pozadia; v tme by svietili.
   ============================================================ */
[data-theme="dark"] .woocommerce table.shop_table { background: var(--surface); }
[data-theme="dark"] .woocommerce-message,
[data-theme="dark"] .woocommerce-info { background: var(--blue-soft); }
[data-theme="dark"] .woocommerce-error { background: #3a1f1e; border-color: var(--red-ink); }
[data-theme="dark"] .woocommerce input.input-text,
[data-theme="dark"] .woocommerce textarea,
[data-theme="dark"] .woocommerce select,
[data-theme="dark"] .woocommerce-ordering select {
  background: var(--surface);
  color: var(--grey-900);
  border-color: var(--grey-200);
}
/* Musí prebiť svetlé pravidlo ceny (0,4,1) — preto aj tu div.product. */
[data-theme="dark"] .woo-single div.product .summary .price { color: #fff; }
[data-theme="dark"] .woo-pagination .page-numbers li a,
[data-theme="dark"] .woo-pagination .page-numbers li span { color: var(--blue-ink); }

/* ===== Farebné náhľady produktu (RAL prepínač) ===== */
.sp-farby { margin: 22px 0 8px; }
.sp-farby-h { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.sp-farby-skupina { margin-bottom: 12px; }
.sp-farby-povrch {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; opacity: .65; margin-bottom: 6px;
}
.sp-farby-mriezka { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-farba {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 52px; padding: 5px 2px; border: 2px solid transparent; border-radius: 9px;
  text-decoration: none; color: inherit; transition: border-color .15s, background-color .15s;
}
.sp-farba:hover, .sp-farba:focus-visible { border-color: currentColor; }
.sp-farba[aria-current="true"] { border-color: currentColor; background: rgba(127,127,127,.12); }
.sp-farba-bodka {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25); box-shadow: inset 0 -3px 6px rgba(0,0,0,.18);
}
.sp-farba-kod { font-size: 11px; font-weight: 600; line-height: 1; }
.sp-farby-pozn { font-size: 12px; opacity: .7; margin: 10px 0 0; }

@media (max-width: 480px) {
  .sp-farba { width: 46px; }
  .sp-farba-bodka { width: 26px; height: 26px; }
}

/* ===== Shop s bočným filtrom ===== */
.sp-shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.sp-shop-obsah { min-width: 0; }

/* Bez position:sticky. Odkedy filter aj akcie sedia v spoločnom obale .sp-shop-bok,
   sticky filter sa v ňom pri scrollovaní posúval dole a ako pozicovaný prvok sa
   vykreslil NAD akciovou kartou pod sebou — „Zrušiť filtre" a chipy pretlačili promo
   panel. Bok je aj tak ~950 px vysoký, čiže vyšší než okno bežného notebooku;
   lepenie by znamenalo buď nedostupný spodok panela, alebo vlastný scrollbar. */
.sp-filter {
  padding: 18px;
  border: 1px solid rgba(127,127,127,.22); border-radius: 14px;
  background: rgba(127,127,127,.05);
}
.sp-filter-hlavicka { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sp-filter-hlavicka h2 { font-size: 17px; margin: 0; }
.sp-filter-zavri { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; color: inherit; }

.sp-filter-blok { margin-bottom: 18px; }
.sp-filter-blok h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  opacity: .6; margin: 0 0 8px;
}
.sp-filter-zoznam { list-style: none; margin: 0; padding: 0; }
.sp-filter-zoznam a {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
  border-radius: 8px; text-decoration: none; color: inherit; font-size: 14px; line-height: 1.3;
}
.sp-filter-zoznam a:hover { background: rgba(127,127,127,.14); }
.sp-filter-zoznam a.on { background: var(--brand, #c0392b); color: #fff; font-weight: 600; }
.sp-filter-zoznam span { opacity: .6; font-size: 12px; flex: none; }
.sp-filter-zoznam a.on span { opacity: .85; }

.sp-filter-chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip {
  padding: 5px 11px; border: 1px solid rgba(127,127,127,.32); border-radius: 999px;
  background: none; color: inherit; font-size: 13px; cursor: pointer;
}
.sp-chip:hover { border-color: currentColor; }
.sp-chip[aria-pressed="true"] { background: var(--brand, #c0392b); border-color: transparent; color: #fff; }

.sp-filter-cena { display: block; }
.sp-cena-popis { display: block; font-size: 13px; margin-bottom: 6px; }
.sp-filter-cena input { width: 100%; }

.sp-filter-reset {
  width: 100%; padding: 9px; border: 1px solid rgba(127,127,127,.32); border-radius: 9px;
  background: none; color: inherit; font-size: 13px; cursor: pointer;
}
.sp-filter-reset:hover { border-color: currentColor; }
.sp-filter-vysledok { font-size: 13px; opacity: .7; margin: 10px 0 0; text-align: center; }

.sp-filter-otvor { display: none; }

@media (max-width: 900px) {
  .sp-shop-layout { grid-template-columns: 1fr; }
  .sp-filter-otvor {
    display: block; width: 100%; margin-bottom: 14px; padding: 11px;
    border: 1px solid rgba(127,127,127,.32); border-radius: 10px;
    background: none; color: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  /* Na mobile filter neberie miesto zoznamu — otvára sa cez tlačidlo. */
  .sp-filter { display: none; }
  .sp-filter.otvoreny { display: block; margin-bottom: 16px; }
  .sp-filter-zavri { display: block; }
}

/* Hierarchia kategórií vo filtri — podkategórie odsadené pod svojím rodičom. */
.sp-filter-zoznam li.uroven-0 > a { font-weight: 600; }
.sp-filter-zoznam li.uroven-1 > a { padding-left: 22px; font-size: 13.5px; }
.sp-filter-zoznam li.uroven-1 > a::before {
  content: ""; position: absolute; margin-left: -12px; margin-top: .55em;
  width: 6px; height: 1px; background: currentColor; opacity: .4;
}
.sp-filter-zoznam li.uroven-1 > a { position: relative; }

/* ============================================================
   ESHOP — čitateľnosť kariet, cena, prilepená hlavička (26.8.2026)
   ============================================================ */

/* Woo core dáva li.product vlastný padding:0 vyššou špecificitou než .prod,
   takže text a cena sa lepili priamo na okraj karty. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.prod { padding: 16px; }

/* Woo v loope vracia holý <span class="woocommerce-Price-amount"> bez obalu .price,
   ten padol pod pravidlo `.prod-price span` (12,5 px, šedá) a cena vyzerala ako poznámka. */
.prod-price { height: auto; min-height: 34px; align-items: baseline; }
.prod-price .woocommerce-Price-amount {
  font-size: 22px;
  font-weight: 900;
  /* rovnaká farba ako text karty — v tmavom režime sa --grey-900 prehodí na svetlú */
  color: var(--grey-900);
  line-height: 1.1;
}
.prod-price .woocommerce-Price-currencySymbol { font-size: .78em; font-weight: 800; }
.prod-price ins { text-decoration: none; }
.prod-price del { margin-right: 4px; }
.prod-price del .woocommerce-Price-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-300);
}

/* Detail produktu — rovnaká logika, Woo tam obal .price dáva. */
.woo-single .summary .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }

/* Prihlásený redaktor má fixný WP admin bar; sticky hlavička s top:0 sa mu schovala
   pod neho a orezala si vrch (logo + telefón). */
body.admin-bar .topbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* pod 600 px je admin bar position:absolute, odscrolluje sa preč */
  body.admin-bar .topbar { top: 0; }
}

/* Pás nad výpisom — nadpis „Shop“ preč, drobček nesie orientáciu, tak nech je čitateľný. */
.sp-skryty-nadpis {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.shop-hero .woocommerce-breadcrumb {
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-900);
  margin-bottom: 0;
}
.shop-hero .woocommerce-breadcrumb a { color: var(--blue); font-weight: 500; }
.shop-hero .woocommerce-breadcrumb a:hover { text-decoration: underline; }
.shop-hero:has(.sp-skryty-nadpis) { padding: 18px 0 16px; }

/* Filter — „Cena“ a rozsah na jednom riadku. */
.sp-cena-hlavicka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sp-cena-hlavicka h3 { margin: 0; }
.sp-cena-popis { font-size: 14px; font-weight: 700; }
#sp-cena { width: 100%; }

/* ============================================================
   SPÄTNÁ VÄZBA — stránka s hodnotením (template-spatna-vazba.php)
   ============================================================ */
.sv-wrap { max-width: 720px; padding: 56px 20px 72px; }
.sv-uvod { text-align: center; margin-bottom: 26px; }
.sv-uvod h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 6px 0 12px; }
.sv-perex { color: var(--grey-700); font-size: 16px; margin: 0; }

.sv-karta {
  background: var(--surface);
  border: 1px solid var(--grey-100);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.sv-hlaska { border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; margin: 0 0 18px; }
.sv-chyba { background: var(--blue-soft); color: var(--red-ink); border: 1px solid var(--grey-200); }

.sv-pole { display: block; margin-bottom: 18px; }
.sv-pole > span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.sv-pole > span small { font-weight: 400; color: var(--grey-700); }
.sv-povinne { color: var(--red-ink); }
.sv-form input[type="text"],
.sv-form input[type="email"],
.sv-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font: inherit;
  background: var(--bg);
  color: var(--grey-900);
}
.sv-form textarea { resize: vertical; min-height: 120px; }
.sv-form input:focus-visible,
.sv-form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sv-riadok { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sv-riadok .sv-pole { margin-bottom: 18px; }

/* Hviezdičky: v HTML sú od 5 po 1, row-reverse ich vykreslí zľava doprava,
   takže `~` vie prefarbiť všetky nižšie hodnoty. */
.sv-hviezdy-pole { border: 0; padding: 0; margin: 0 0 22px; }
.sv-hviezdy-pole legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.sv-hviezdy { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.sv-hviezdy input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-hviezdy label {
  font-size: 38px;
  line-height: 1;
  padding: 5px 3px;
  color: var(--grey-200);
  cursor: pointer;
  transition: color .12s, transform .12s;
}
.sv-hviezdy label:hover,
.sv-hviezdy label:hover ~ label,
.sv-hviezdy input:checked ~ label { color: var(--star); }
.sv-hviezdy label:hover { transform: scale(1.08); }
.sv-hviezdy input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.sv-suhlas { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--grey-700); margin-bottom: 22px; }
.sv-suhlas input { margin-top: 3px; flex: none; }

.sv-google { text-align: center; font-size: 14px; color: var(--grey-700); margin: 22px 0 0; }
.sv-google a { color: var(--blue-ink); font-weight: 700; }
.sv-google a:hover { text-decoration: underline; }

.sv-dakujeme { text-align: center; }
.sv-dakujeme h1 { font-size: clamp(26px, 4.5vw, 34px); margin: 4px 0 10px; }
.sv-dakujeme p { color: var(--grey-700); margin: 0 0 22px; }
.sv-vysledok { color: var(--star); font-size: 40px; line-height: 1; letter-spacing: 4px; }
.sv-spat { margin: 22px 0 0 !important; font-size: 14px; }
.sv-spat a { color: var(--blue-ink); font-weight: 600; }

@media (max-width: 560px) {
  .sv-riadok { grid-template-columns: 1fr; gap: 0; }
  .sv-karta { padding: 22px 18px; }
  .sv-hviezdy label { font-size: 34px; padding: 7px 4px; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Jedna–dve reálne recenzie by sa v auto-fit gride roztiahli cez celú šírku. */
.rev-grid:has(.rev:first-child:last-child) { max-width: 520px; }
.rev-grid:has(.rev:nth-child(2):last-child) { max-width: 800px; }

/* ============================================================
   O NÁS — profil firmy (page-templates/template-o-nas.php)
   ============================================================ */
.on-uvod { padding: 56px 0 44px; border-bottom: 1px solid var(--grey-100); }
.on-uvod-inner { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .on-uvod-inner { grid-template-columns: 1.35fr 1fr; gap: 48px; } }
.on-uvod h1 { font-size: clamp(28px, 4.4vw, 42px); margin: 4px 0 14px; }
.on-uvod h1 span { color: var(--red-ink); }
.on-uvod .lead { margin-bottom: 22px; }

.on-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.on-fakty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.on-fakty li {
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: 10px;
  padding: 16px 18px;
}
.on-fakty b { display: block; font-size: 22px; font-weight: 800; color: var(--blue-ink); line-height: 1.1; }
.on-fakty span { display: block; font-size: 12.5px; color: var(--grey-700); margin-top: 4px; }

.on-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.on-karta {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 26px 24px;
}
.on-ic { display: block; font-size: 34px; line-height: 1; margin-bottom: 12px; }
.on-karta h3 { font-size: 17px; margin-bottom: 8px; }
.on-karta p { margin: 0; font-size: 14.5px; color: var(--grey-700); }

.on-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 30px; margin-top: 8px; }
.on-body li {
  font-size: 14.5px;
  color: var(--grey-700);
  padding-left: 30px;
  position: relative;
}
.on-body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.on-body b { display: block; color: var(--grey-900); font-size: 15px; margin-bottom: 2px; }

/* Prevádzka — fotka vľavo, text vpravo; bez fotky text zaberie celú šírku. */
.on-prevadzka { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .on-prevadzka { grid-template-columns: 1fr 1fr; gap: 44px; } }
.on-prevadzka--bezfoto { grid-template-columns: 1fr; max-width: 760px; }
.on-foto { margin: 0; }
.on-foto-img {
  width: 100%;
  /* height:auto musí byť pred aspect-ratio — WP dáva do <img> atribút height,
     ktorý by inak pomer prebil a fotku natiahol. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.on-foto figcaption { font-size: 12.5px; color: var(--grey-700); margin-top: 10px; }
.on-foto-chyba {
  border: 2px dashed var(--grey-300);
  border-radius: 14px;
  padding: 28px;
  font-size: 13.5px;
  color: var(--grey-700);
  aspect-ratio: 3 / 2;
  display: grid;
  align-content: center;
  gap: 6px;
}
.on-foto-chyba b { color: var(--red-ink); font-size: 15px; }
.on-prevadzka-text p { font-size: 15px; color: var(--grey-700); margin: 0 0 14px; }
.on-prevadzka-text .on-cta { margin-top: 20px; }

.on-mapa-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .on-mapa-grid { grid-template-columns: 1.6fr 1fr; gap: 28px; } }

.on-mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--grey-200);
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(21,101,192,0.07) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(21,101,192,0.07) 38px 39px),
    var(--blue-soft);
}
@media (min-width: 900px) { .on-mapa { aspect-ratio: 16 / 10; } }
.on-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.on-mapa-vyzva {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 26px;
}
.on-mapa-pin { font-size: 40px; line-height: 1; }
.on-mapa-vyzva b { font-size: 16px; color: var(--grey-900); }
.on-mapa-vyzva p { margin: 0 0 6px; font-size: 12.5px; color: var(--grey-700); max-width: 380px; }
.on-mapa-vyzva > a { font-size: 13px; font-weight: 700; color: var(--blue-ink); text-decoration: underline; }

.on-kontakt {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 14px;
  padding: 26px 24px;
}
.on-kontakt h3 { font-size: 16px; margin-bottom: 12px; }
.on-kontakt p { font-size: 14.5px; color: var(--grey-700); margin: 0 0 14px; }
.on-kontakt a:not(.btn) { color: var(--blue-ink); font-weight: 600; }
.on-kontakt a:not(.btn):hover { text-decoration: underline; }
.on-adresa { color: var(--grey-900) !important; line-height: 1.6; }
.on-pozn { font-size: 13px !important; }

.on-udaje { margin: 20px 0 0; padding-top: 18px; border-top: 1px dashed var(--grey-200); font-size: 13px; }
.on-udaje dt { font-weight: 700; color: var(--grey-900); }
.on-udaje dd { margin: 0 0 10px; color: var(--grey-700); }
.on-udaje dd:last-child { margin-bottom: 0; }

.on-obsah { max-width: 820px; }
.on-obsah p { font-size: 15px; color: var(--grey-700); }

@media (max-width: 520px) {
  .on-fakty { grid-template-columns: 1fr; }
  .on-cta .btn { width: 100%; justify-content: center; }
}

/* Karty žijú z tokenov, len mriežka mapy má natvrdo modrú — v tme by svietila. */
[data-theme="dark"] .on-mapa {
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.06) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.06) 38px 39px),
    var(--grey-50);
}

/* ==========================================================================
   AKCIOVÝ SIDEBAR — rotujúce promo karty (inc/akcie.php, assets/js/akcie.js)
   Štýl vychádza z dodávateľských bannerov: tmavý podklad, červený akcent.
   ========================================================================== */

/* Obal bočných panelov — grid .sp-shop-layout má len dva stĺpce, filter aj akcie
   musia zdieľať prvý. Lepí sa CELÝ obal, nie samotný .sp-filter: sticky na filtri
   ho pri scrollovaní posúvalo dole v rámci obalu a keďže je pozicovaný, kreslil sa
   nad akciovou kartou pod ním — filter „prešiel" cez promo panel. max-height drží
   vyšší panel než okno doscrollovateľný. */
.sp-shop-bok { min-width: 0; }

.sp-akcie {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  background: #14161a;
  color: #fff;
}

.sp-akcie-nadpis {
  margin: 0;
  padding: 14px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.sp-akcie-okno {
  position: relative;
  display: grid;
}

/* Karty ležia na sebe, aby panel nepreskakoval na výšku pri prepnutí. */
.sp-akcia {
  grid-area: 1 / 1;
  padding: 20px 18px 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.sp-akcia.je-aktivna {
  opacity: 1;
  visibility: visible;
}

.sp-akcia-stitok {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--red, #e11d2e);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  padding-right: 16px;
}

.sp-akcia-nadpis {
  margin: 0 0 6px;
  font-size: 1.32rem;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}

.sp-akcia-podnadpis {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.68);
}

.sp-akcia-body {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.sp-akcia-body li {
  position: relative;
  padding-left: 16px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}

.sp-akcia-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 3px;
  background: var(--red, #e11d2e);
}

.sp-akcia-cena {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--red, #e11d2e);
}

.sp-akcia-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: var(--red, #e11d2e);
  text-decoration: none;
  transition: filter 0.2s ease;
}

.sp-akcia-cta:hover,
.sp-akcia-cta:focus-visible {
  filter: brightness(1.12);
  color: #fff;
}

.sp-akcia-dodavatel {
  margin: 14px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.sp-akcie-body-nav {
  display: flex;
  gap: 7px;
  padding: 0 18px 18px;
}

.sp-akcie-bod {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}

.sp-akcie-bod.je-aktivny {
  background: var(--red, #e11d2e);
  transform: scale(1.25);
}

/* Na mobile je filter skrytý v šuflíku — akcie dáme nad výpis, nie do neho. */
@media (max-width: 900px) {
  .sp-akcie { margin-top: 16px; }
  .sp-akcia-nadpis { font-size: 1.18rem; }
}

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

/* ============================================================
   SOCIÁLNE SIETE — mainnav a pätička (functions.php: sp_vypis_socialne)
   ============================================================ */

.sp-social {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.sp-social li { list-style: none; }

/* Názov siete je v odkaze kvôli čítačkám, vidieť má byť len logo. */
.sp-social .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sp-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .15s, color .15s, transform .15s;
}
.sp-social a:hover { transform: translateY(-1px); }

/* --- v modrom pruhu pod hlavičkou --- */
.mainnav .sp-social { margin-left: 10px; }
.mainnav .sp-social a {
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff;
  /* Tmavší podklad, nie svetlejší — zosvetlená modrá zrážala kontrast bielej
     ikony na 4,3:1, takto drží nad 6:1. */
  background: rgba(0,0,0,0.18);
  border-right: 0;
}
.mainnav .sp-social a:hover { background: rgba(0,0,0,0.32); }

/* --- v pätičke --- */
.sp-social-nadpis { margin-top: 18px; }
.footer .sp-social { gap: 8px; }
.footer .sp-social a {
  width: 42px;
  height: 42px;
  padding: 0;
  color: #eef2f6;
  background: rgba(255,255,255,0.1);
}
.footer .sp-social a:hover { color: #fff; }

/* Značkové farby až pri hoveri — inak by dve sýte plochy prebili červené CTA. */
.sp-social a.sp-social-facebook:hover  { background: #1877F2; color: #fff; }
.sp-social a.sp-social-instagram:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); color: #fff; }
/* Trustpilot zeleň je značkovo #00B67A, ale s bielou ikonou dáva len 2,6:1.
   Stmavená na #00875A drží 4,55:1, teda v línii s Facebookom (4,23:1). */
.sp-social a.sp-social-trustpilot:hover { background: #00875A; color: #fff; }

@media (max-width: 900px) {
  /* V rozbalenom menu stoja vedľa seba pod tlačidlom Eshop, nie na celú šírku. */
  .mainnav .sp-social {
    margin: 6px 0 10px;
    align-self: flex-start;
  }
  .mainnav .sp-social a { border-bottom: 0; }
}

/* --- v hornom pruhu (len mobil, kde je mainnav zabalený do menu) --- */
.phonebar {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.phonebar .sp-social a {
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--blue-ink);
  background: var(--blue-soft);
}
.phonebar .sp-social a:hover { background: var(--blue); color: #fff; }

@media (max-width: 900px) {
  .phonebar { display: flex; }
}

/* Pri úzkom displeji by trojica telefón + dve ikony pretiekla — telefón
   sa zmenší skôr, než sa čokoľvek zalomí. */
@media (max-width: 380px) {
  .phonebar-tel { font-size: 15px; }
  .phonebar .sp-social a { width: 30px; height: 30px; }
  .phonebar .sp-social a svg { width: 17px; height: 17px; }
}

/* ------------------------------------------------------------------
   FILTER — prepínač usporiadania kategórií (typ / značka)
   ------------------------------------------------------------------ */

.sp-pohlad {
  display: flex; gap: 4px; margin-bottom: 10px; padding: 3px;
  border: 1px solid rgba(127,127,127,.22); border-radius: 10px;
}
.sp-pohlad-tab {
  flex: 1; padding: 7px 6px; border: 0; border-radius: 7px;
  background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.sp-pohlad-tab:hover { background: rgba(127,127,127,.14); }
.sp-pohlad-tab.on { background: var(--brand, #c0392b); color: #fff; font-weight: 600; }

/* Riadok vetvy: odkaz rastie, rozbaľovacie tlačidlo má pevnú šírku. */
.sp-vetva-riadok { display: flex; align-items: center; gap: 2px; }
.sp-vetva-riadok > a { flex: 1; min-width: 0; }
.sp-vetva-nazov {
  flex: 1; padding: 7px 10px; font-size: 14px; font-weight: 600; opacity: .75;
}
.sp-vetva-tlacidlo {
  flex: none; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: inherit;
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: transform .15s ease;
}
.sp-vetva-tlacidlo:hover { background: rgba(127,127,127,.14); }
.sp-vetva-tlacidlo[aria-expanded="true"] { transform: rotate(180deg); }
.sp-vetva { list-style: none; margin: 0; padding: 0; }

/* Odsadenie podľa hĺbky; hlbšie úrovne sú menšie a tlmenejšie. */
.sp-zoznam-strom .uroven-1 > .sp-vetva-riadok { padding-left: 12px; }
.sp-zoznam-strom .uroven-2 > .sp-vetva-riadok { padding-left: 24px; }
.sp-zoznam-strom .uroven-1 a { font-size: 13.5px; }
.sp-zoznam-strom .uroven-2 a { font-size: 13px; opacity: .85; }
.sp-zoznam-strom .uroven-0 > .sp-vetva-riadok > a { font-weight: 600; }

/* ============================================================
   APPKA PRE ANDROID — ikona v hlavičke (inc/pwa.php: sp_vypis_appku)
   ============================================================ */

/* Ikony stoja spolu vpravo, telefón drží ľavú stranu pruhu. */
.phonebar-ikony {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-appka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .15s, color .15s, transform .15s;
}
.sp-appka:hover { transform: translateY(-1px); }

/* --- v hornom pruhu (mobil) --- */
/* Značková zelená #3DDC84 má na bielom pruhu kontrast 1,8:1 — nečitateľná.
   Svetlý režim preto dostane tmavší odtieň (4,4:1), tmavý si značkovú udrží. */
.sp-appka--bar {
  width: 34px;
  height: 34px;
  color: #1e7e45;
  background: var(--blue-soft);
}
[data-theme="dark"] .sp-appka--bar { color: #3ddc84; }
.sp-appka--bar:hover { background: #3ddc84; color: #0b3d20; }

/* Pravá skupina modrého pruhu: panáčik, siete, Eshop, prepínač režimu — v tomto
   poradí. Odsadenie od menu drží obal, nie `margin-left: auto` na prvom prvku;
   ten by pri vypnutej appke skočil na sieť a poradie by sa rozpadlo. */
.mainnav-vpravo {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.mainnav-vpravo .theme-toggle { margin-left: 0; }
.mainnav-vpravo .nav-eshop { margin-left: 10px; }

@media (max-width: 900px) {
  /* V rozbalenom menu ostávajú v jednom riadku, rovnako ako na desktope. */
  .mainnav-vpravo {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 12px 0 4px;
  }
  /* Prvky si z pôvodného stĺpcového rozloženia nesú `align-self: flex-start`
     a vlastné odsadenia — v riadku by stáli každý inde. */
  .mainnav-vpravo .sp-appka--nav,
  .mainnav-vpravo .sp-social,
  .mainnav-vpravo .nav-eshop,
  .mainnav-vpravo .theme-toggle {
    align-self: center;
    margin: 0;
  }
  /* `.mainnav a` dáva položkám menu spodnú čiaru; ikonám a tlačidlám nepatrí. */
  .mainnav-vpravo .sp-appka--nav { border-bottom: 0; }

  /* Prepínač režimu je tu druhé tlačidlo vedľa Eshopu — rovnaká veľkosť
     aj hrany, len bez červenej, ktorá patrí jedinému CTA v pruhu. Okraj musí
     byť, inak tlačidlo na modrom pruhu splynie a vyzerá ako holá ikona.
     Text sa nevojde, mesiac a slnko povedia to isté.
     `flex: 0 0 auto` musí byť explicitné: s predvoleným `0 1 auto` si
     tlačidlo drží šírku podľa pôvodného textu aj po jeho skrytí. */
  .mainnav-vpravo .theme-toggle {
    flex: 0 0 auto;
    width: 96px;
    height: 38px;
    padding: 0;
    justify-content: center;
    background: rgba(0,0,0,0.24);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
  }
  .mainnav-vpravo .theme-toggle:hover { background: rgba(0,0,0,0.4); }
  .mainnav-vpravo .theme-toggle .tt-tx { display: none; }
}

/* Pod 380 px by štvorica v plnej veľkosti pretiekla. Uberá sa len tlačidlám —
   ikony ostávajú 38 px, aby mal celý rad rovnakú výšku. */
@media (max-width: 380px) {
  .mainnav-vpravo .nav-eshop,
  .mainnav-vpravo .theme-toggle { width: 88px; }
}

/* --- v modrom pruhu (desktop) --- */
/* Pruh je modrý v oboch režimoch, takže farba sa tu neprepína.
   Selektor musí byť dvojtriedny: `.mainnav a` (0,1,1) inak prebije farbu
   a navyše vnúti odkazu `display:block`, padding a pravú čiaru. */
.mainnav .sp-appka--nav {
  display: inline-flex;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #3ddc84;
  background: rgba(0,0,0,0.18);
  border-right: 0;
}
.mainnav .sp-appka--nav:hover { background: #3ddc84; color: #0b3d20; }

@media (max-width: 900px) {
  .mainnav .sp-appka--nav { margin: 0; }
}

/* Pri úzkom displeji sa zmenší spolu so sociálnymi ikonami. */
@media (max-width: 380px) {
  .sp-appka--bar { width: 30px; height: 30px; }
  .sp-appka--bar svg { width: 17px; height: 17px; }
}

/* --- visiaca ceduľka pod panáčikom --- */
/* Odkaz je kotva, z ktorej ceduľka visí. Pruh nemá `overflow: hidden`,
   takže smie prečnievať pod hlavičku. */
.mainnav .sp-appka--nav { position: relative; overflow: visible; }

.sp-appka-vlajka {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 5;
  padding: 3px 9px;
  border-radius: 6px;
  background: #3ddc84;
  color: #0b3d20;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  /* Bod otáčania leží nad ceduľkou, v mieste závesu — inak by sa krútila
     okolo vlastného stredu a vyzerala by ako trepotanie, nie hojdanie. */
  transform-origin: 50% -7px;
  animation: sp-hupanie 3.4s ease-in-out infinite;
}

/* Špička smerom hore, k panáčikovi. */
.sp-appka-vlajka::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: #3ddc84;
}

/* Posun doľava je súčasťou každého kroku — samostatný `translateX`
   by ho animácia prepísala a ceduľka by odskočila doprava. */
@keyframes sp-hupanie {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50%      { transform: translateX(-50%) rotate(3deg); }
}

.sp-appka--nav:hover .sp-appka-vlajka { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sp-appka-vlajka { animation: none; transform: translateX(-50%); }
}

@media (max-width: 900px) {
  /* V rozbalenom menu stojí panáčik v stĺpci, ceduľka by prekryla položku pod ním. */
  .sp-appka-vlajka { display: none; }
}


.sv-drobne { margin-top: 14px; font-size: 13px; color: var(--grey-700); }


/* --- appka sa ešte len pripravuje --- */
/* Kým v Customizeri nie je adresa Google Play, vypíše sa `<span>`, nie odkaz.
   Zelená by lákala na klik, ktorý nikam nevedie — stav je preto neutrálny
   a ceduľka sa nehojdá. */
.sp-appka--caka { cursor: default; }
.sp-appka--caka:hover { transform: none; }

.sp-appka--bar.sp-appka--caka,
.sp-appka--bar.sp-appka--caka:hover {
  color: #52606d;
  background: var(--blue-soft);
}
[data-theme="dark"] .sp-appka--bar.sp-appka--caka,
[data-theme="dark"] .sp-appka--bar.sp-appka--caka:hover { color: #a9b4bf; }

.mainnav .sp-appka--nav.sp-appka--caka,
.mainnav .sp-appka--nav.sp-appka--caka:hover {
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,0.18);
}

.sp-appka--caka .sp-appka-vlajka {
  animation: none;
  transform: translateX(-50%);
  background: #e6ebf0;
  color: #33414f;
}
.sp-appka--caka .sp-appka-vlajka::before { border-bottom-color: #e6ebf0; }


/* ============================================================
   PONUKA APPKY — prvá návšteva z Androidu (inc/pwa.php, assets/pwa/ponuka.js)
   ============================================================ */

/* Spodný panel, nie okno cez celú obrazovku: ponuka nemá blokovať web,
   len sa prihlásiť o slovo. Skript ju ukáže až po cookie lište. */
.sp-appka-ponuka {
  position: fixed;
  left: 12px;
  right: 12px;
  /* Odsadenie zdola dopĺňa skript podľa toho, či dole stojí cookie lišta. */
  bottom: calc(12px + var(--sp-nad-listou, 0px));
  z-index: 60;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1), bottom .25s ease;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--grey-100);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  /* Vysunie sa zdola; `je-vidno` pridá skript až v ďalšom snímku. */
  transform: translateY(120%);
}
.sp-appka-ponuka.je-vidno { transform: translateY(0); }
.sp-appka-ponuka[hidden] { display: none; }

.sp-ponuka-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: #0d47a1;
  color: #3ddc84;
}
.sp-ponuka-ikona svg { width: 26px; height: 26px; }

.sp-ponuka-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-ponuka-text b { font-size: 15.5px; color: var(--grey-900); }
.sp-ponuka-text span { font-size: 13px; color: var(--grey-700); }

/* Tlačidlá idú pod text až cez obe bunky — vedľa neho by sa na 360 px nezmestili. */
.sp-ponuka-akcie {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}
.sp-ponuka-akcie .btn { flex: 1 1 0; justify-content: center; padding: 11px 12px; }

/* Sťahovanie appky je zelené so šípkou nadol — vedľa „Teraz nie" musí byť na
   prvý pohľad jasné, ktoré tlačidlo sťahuje. Zelená #15803d drží s bielym
   textom kontrast 5,0:1; svetlejšia #16a34a by dala len 3,3:1. */
.sp-ponuka-stiahnut {
  gap: 8px;
  background: #15803d;
  color: #fff;
  box-shadow: 0 4px 12px rgba(21, 128, 61, .28);
}
.sp-ponuka-stiahnut:hover,
.sp-ponuka-stiahnut:focus-visible {
  background: #166534;
  color: #fff;
  box-shadow: 0 8px 18px rgba(21, 128, 61, .38);
}
.sp-ponuka-stiahnut svg { flex: none; }

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


/* ============================================================
   KARTY PRODUKTOV NA MOBILE — na celú šírku
   ============================================================ */

/* `woocommerce-smallscreen.css` sa načíta až pod 768 px a dáva položkám
   `width: 48%` selektorom `.woocommerce ul.products[class*=columns-] li.product`
   (0,4,2). Pravidlo v sekcii WOOCOMMERCE ADAPTÁCIE má len (0,3,2), takže na
   mobile prehrávalo a karta zostala na necelej polovici stĺpca, hoci grid jej
   dal celú šírku. Preto ten istý tvar selektora — main.css sa načítava neskôr,
   takže pri rovnakej špecificite vyhráva.

   `float` a `clear` z Woo sa v gride ignorujú, dorovnáva sa len šírka a spodný
   odstup (Woo dáva 2.992em, medzery drží `gap`). */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products[class*="columns-"] li.prod {
  width: auto;
  margin: 0;
}


/* --- Sortiment: logo značky vľavo od jej nadpisu --- */
/* Logo má dve verzie a prepína sa rovnako ako logo firmy v hlavičke: Tondach,
   Regamet, KM BETA, SATJAM a EVROmat majú v origináli tmavý text, ktorý by na
   tmavej téme zmizol. Značkové farby (červená, žltá, svetlomodrá) sú v oboch. */
.sp-znacka {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 34px 0 10px;
}
/* Pevný box, do ktorého sa logo vpíše — nadpisy tak začínajú všetky na tom istom
   mieste, hoci logá majú pomer strán od 1:1 (KJG) po 7,5:1 (BRAMAC). */
.sp-znacka-logo { flex: 0 0 auto; line-height: 0; }
.sp-znacka-logo img {
  display: block;
  width: 190px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
}
.sp-znacka-logo .znacka-dark { display: none; }
[data-theme="dark"] .sp-znacka-logo .znacka-light { display: none; }
[data-theme="dark"] .sp-znacka-logo .znacka-dark { display: block; }
/* Názov firmy je v logu — textový nadpis by ho duplikoval, ostáva len pre
   čítačky a štruktúru dokumentu (zadanie Michala 30. 8. 2026). */
.sp-znacka h3 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 520px) {
  .sp-znacka { gap: 12px; }
  .sp-znacka-logo img { width: 132px; height: 38px; }
}

/* ============================================================
   MINI KOŠÍK — panel pri prejdení nad Košík v topbare
   Obsah drží div.widget_shopping_cart_content, ktorý si Woo
   cart-fragments obnovuje sám po každom pridaní do košíka.
   ============================================================ */
.sp-minikosik { position: relative; display: flex; }
.sp-minikosik-panel {
  position: absolute; top: 100%; right: 0; z-index: 90;
  width: 348px; padding-top: 10px; /* most pre myš medzi tlačidlom a panelom */
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sp-minikosik:hover .sp-minikosik-panel,
.sp-minikosik:focus-within .sp-minikosik-panel { opacity: 1; visibility: visible; transform: none; }
.sp-minikosik-panel .widget_shopping_cart_content {
  background: var(--surface); border: 1px solid var(--grey-200);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 14px 16px;
}
.sp-minikosik-panel ul.product_list_widget { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.sp-minikosik-panel ul.product_list_widget li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grey-100); font-size: 13px; }
.sp-minikosik-panel ul.product_list_widget li:last-child { border-bottom: 0; }
.sp-minikosik-panel ul.product_list_widget li > a:not(.remove) { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--grey-900); font-weight: 600; line-height: 1.3; }
.sp-minikosik-panel ul.product_list_widget li img { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--grey-100); border-radius: 6px; float: none; margin: 0; }
.sp-minikosik-panel .quantity { white-space: nowrap; color: var(--grey-700); font-size: 12.5px; }
.sp-minikosik-panel a.remove { order: 3; width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--grey-50); font-size: 15px; }
.sp-minikosik-panel a.remove:hover { background: var(--red); color: #fff !important; }
.sp-minikosik-panel .woocommerce-mini-cart__total { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; font-size: 14px; color: var(--grey-900); }
.sp-minikosik-panel .woocommerce-mini-cart__buttons { display: flex; gap: 8px; margin: 0; }
.sp-minikosik-panel .woocommerce-mini-cart__buttons a.button { flex: 1; text-align: center; padding: 10px 12px; border-radius: 6px; font-weight: 700; font-size: 13px; background: var(--blue-soft); color: var(--blue-ink); }
.sp-minikosik-panel .woocommerce-mini-cart__buttons a.button.checkout { background: var(--red); color: #fff; }
.sp-minikosik-panel .woocommerce-mini-cart__buttons a.button.checkout:hover { background: var(--red-dark); }
.sp-minikosik-panel .woocommerce-mini-cart__empty-message { margin: 0; color: var(--grey-700); font-size: 13.5px; }
/* fotky produktov potrebujú v tme svetlú podložku — rovnako ako .prod-img */
[data-theme="dark"] .sp-minikosik-panel ul.product_list_widget li img { background: #e6ebf1; }
/* Na dotykovej obrazovke hover nie je a panel by prekážal — klik ide rovno do košíka. */
@media (max-width: 900px) { .sp-minikosik-panel { display: none; } }

/* ============================================================
   TEXTOVÉ STRÁNKY — obsah z editora (page.php → .entry-content)
   Globálny reset hore v súbore ruší `ul` odrážky aj odsadenie, takže
   dlhý právny text by inak splynul do jednej neprehľadnej plochy.
   ============================================================ */
.entry-content { line-height: 1.7; }
.entry-content h2 { font-size: 21px; margin: 34px 0 12px; }
.entry-content h3 { font-size: 17px; margin: 26px 0 8px; }
.entry-content p { margin: 0 0 14px; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content ul,
.entry-content ol { padding-left: 22px; margin: 0 0 16px; }
.entry-content li { margin-bottom: 7px; }
.entry-content a { color: var(--blue-ink); text-decoration: underline; }

/* Spodný pruh pätičky: vľavo firemné údaje, vpravo autor webu.
   `.footer a` má padding 7px 0 — v jednoriadkovom pruhu by rozhodil výšku. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 18px;
}
.footer-bottom a { padding: 0; }
.footer-autor a { color: #c9d3dd; text-decoration: underline; }
.footer-autor a:hover { color: var(--yellow); }

/* ============================================================
   AKCIOVÝ PRUH DOČASNE SCHOVANÝ (28. 8. 2026, na žiadosť Michala)
   Časová os s posúvajúcim sa markerom, odpočet do polnoci a ceduľka
   „Tvoja zľava“. HTML v header.php ani countdown.js sa nemazali —
   návrat je zmazanie tohto jedného bloku.
   ============================================================ */
.prebar-wrap { display: none; }

/* ============================================================
 * Spätná väzba — doplnenie po kliknutí v e-maile
 *
 * Hodnotenie je v tomto kroku už uložené, preto pás `.sv-potvrdene` a nie
 * hviezdičkové pole. Odporúčanie aj chipy sú skryté prepínače so štýlom na
 * `<label>` — rovnaký vzor ako `.sv-hviezdy` vyššie v súbore.
 * ============================================================ */
.sv-potvrdene {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--grey-100);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 22px;
}
[data-theme="dark"] .sv-potvrdene { background: rgba(255,255,255,0.07); }
.sv-potvrdene--zle { border-left: 3px solid var(--star); }
/* Tmavší jantár než `--star` (#C97F00): tá má na sivom páse len 2,86:1, na
   bielej karte 3,22:1. Tu drží 4,13:1. V tmavom režime je `--star` jasná
   žltá s kontrastom 8,18:1, tam sa nemení nič. */
.sv-potvrdene-hv { color: #A66600; font-size: 20px; letter-spacing: 3px; line-height: 1; }
[data-theme="dark"] .sv-potvrdene-hv { color: var(--star); }
.sv-potvrdene-txt { font-size: 14px; color: var(--grey-700); }

.sv-volby-pole,
.sv-chipy-pole { border: 0; padding: 0; margin: 0 0 22px; }
.sv-volby-pole legend,
.sv-chipy-pole legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.sv-napoveda { display: block; font-size: 13px; color: var(--grey-700); margin-bottom: 10px; }

.sv-volby,
.sv-chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-volby input,
.sv-chipy input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.sv-volby label,
.sv-chipy label {
  display: inline-block;
  border: 1px solid var(--grey-200);
  background: var(--surface);
  color: var(--grey-700);
  font-size: 14px;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.sv-volby label { border-radius: 4px; }
.sv-chipy label { border-radius: 100px; font-size: 13.5px; padding: 8px 14px; }
/* Prepisuje sa len rámik. `--grey-200` je v tmavom režime tmavá (#3a4552),
   takže ako farba písma dávala na tmavej karte kontrast 1,7:1; `--grey-700`
   zo základného pravidla je naopak v tmavom režime svetlá (#a9b4c0) a drží 7,88:1. */
[data-theme="dark"] .sv-volby label,
[data-theme="dark"] .sv-chipy label { border-color: rgba(255,255,255,0.18); }

.sv-volby label:hover,
.sv-chipy label:hover { border-color: var(--blue-ink); }

.sv-volby input:checked + label {
  border-color: var(--green-ink);
  background: rgba(46,125,50,0.12);
  color: var(--grey-900);
  font-weight: 600;
}
.sv-chipy input:checked + label {
  border-color: var(--blue-ink);
  background: var(--blue-soft);
  color: var(--grey-900);
  font-weight: 600;
}
[data-theme="dark"] .sv-volby input:checked + label,
[data-theme="dark"] .sv-chipy input:checked + label { color: #fff; }
[data-theme="dark"] .sv-chipy input:checked + label { background: rgba(21,101,192,0.35); }

.sv-volby input:focus-visible + label,
.sv-chipy input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Telefón v zlej vetve stojí pod tlačidlom ako druhá možnosť, nie ako CTA. */
.sv-wrap .btn-outline.btn-block { margin-top: 8px; }

/* ---------------------------------------------------------------
   Cena bez DPH pod hlavnou cenou (inc/dph.php)
   Ceny v katalógu sú koncové; základ dane potrebuje ten, kto kupuje
   na firmu. Vlastný riadok, aby sa hlavná cena nezmenšila.
   --------------------------------------------------------------- */
.sp-bez-dph {
  display: block;
  margin-top: 2px;
  font-size: .72em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--grey-700);
  white-space: nowrap;
}
.woo-single .summary .sp-bez-dph { font-size: 15px; margin-top: 4px; }
/* ============================================================
   BANNER „AKO PREBIEHA OBJEDNÁVKA" — úvodná stránka
   ============================================================ */
/* Zámerne svetlý, nie modrý ako `.funnel-banner` — dva sýte pruhy pod sebou by
   si konkurovali a ani jeden by nezaujal. Fotka je `aria-hidden`, lebo hneď
   vedľa nej stojí odkaz s tým istým cieľom a čítačka by ho hlásila dvakrát. */
.obchod-banner { background: var(--grey-50); }
.ob-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.ob-foto {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  line-height: 0;
}
.ob-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.ob-text p { color: var(--grey-700); font-size: 16px; margin: 10px 0 16px; }
.ob-body { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.ob-body li { position: relative; padding-left: 26px; font-size: 15px; color: var(--grey-900); }
.ob-body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-ink);
  font-weight: 700;
}
@media (min-width: 900px) {
  .ob-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; }
}

/* ============================================================
   HERO NA MOBILE — oprava odrezaného textu (audit 29. 8. 2026)
   Grid stĺpec .hero-inner rástol podľa min-content obsahu
   (hero-stats + promo karta) na 592 px a .hero { overflow:hidden }
   text odsekol. min-width:0 na deťoch gridu + minmax(0,1fr)
   v hero-stats nechá stĺpec držať šírku kontajnera.
   ============================================================ */
.hero-inner > * { min-width: 0; }
.hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ============================================================
   BANER ANDROID APLIKÁCIE V PÄTIČKE — na každej stránke
   (29. 8. 2026, sťahovanie APK priamo z webu do vydania v Play)
   ============================================================ */
.sp-app-pas { border-bottom: 1px solid rgba(255,255,255,.14); padding: 2px 0 20px; margin-bottom: 28px; }
.sp-app-pas-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-app-pas-text b { display: block; color: #fff; font-size: 17px; margin-bottom: 2px; }
.sp-app-pas-text small { color: rgba(255,255,255,.78); }
.sp-app-pas-btn { white-space: nowrap; }
.sp-app-pas-coming { border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Kariéra — voľné pozície (29. 8. 2026) */
.sp-pozicie { margin-top: 34px; padding-top: 10px; border-top: 1px solid var(--grey-200); }
.sp-pozicia { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 18px 20px; margin: 14px 0; }
.sp-pozicia h3 { margin: 0 0 8px; }
.sp-pozicie-prazdne { color: var(--grey-700); }
/* ============================================================
   PÁS NAD PÄTIČKOU — výhody, aplikácia, platby
   ============================================================ */
.sp-pata-plus {
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
  padding: 42px 0 46px;
  margin-top: 60px;
}

/* Výhody eshopu */
.sp-vyhody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px 20px;
  margin: 0 0 38px;
}
.sp-vyhoda {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 0 6px;
}
.sp-vyhoda-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-ink);
}
.sp-vyhoda b { font-size: 15px; font-weight: 800; color: var(--grey-900); }
.sp-vyhoda small { font-size: 13px; line-height: 1.45; color: var(--grey-700); }

/* Banner pripravovanej aplikácie */
.sp-appka-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  overflow: hidden;
  padding: 34px 36px 0;
  border-radius: 20px;
  background: linear-gradient(120deg, var(--blue-dark) 0%, var(--blue) 62%, #1e78d8 100%);
  color: #fff;
}
.sp-appka-text { align-self: center; padding: 6px 0 40px; max-width: 560px; }
.sp-appka-stitok {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: #3d2c00;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.sp-appka-text h3 { font-size: 27px; margin: 0 0 10px; color: #fff; }
.sp-appka-text p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.92); }
.sp-appka-caka {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}
/* Telefón je zapustený do spodnej hrany banneru — ako na predlohe. */
.sp-appka-mockup { margin-bottom: -26px; }
.sp-telefon {
  position: relative;
  width: 232px;
  padding: 15px 9px 9px;
  border-radius: 36px;
  background: #0b1220;
  box-shadow: 0 18px 44px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.14);
}
.sp-telefon-usko {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: #2a3444;
}
/* Snímok je vyšší než okno telefónu — spodok sa oreže, obsah drží pri hornej
   hrane, takže je vždy vidieť hlavičku eshopu, nie stred stránky. */
.sp-telefon-obraz {
  width: 100%;
  height: auto;
  aspect-ratio: 236 / 458;
  object-fit: cover;
  object-position: top center;
  border-radius: 26px;
  background: #fff;
}

/* Možnosti platby */
.sp-platby {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 34px;
}
.sp-platby-popis {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--grey-700);
}
.sp-platby-zoznam { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-platba { display: block; line-height: 0; }

/* Zoznam dokumentov v pätičke — rovnaké odsadenie ako ostatné stĺpce */
.footer .sp-dokumenty li { padding: 0; }

/* Tmavý režim: pás nesie svetlú kartu s platbami, tie musia zostať čitateľné
   aj na tmavom podklade — biele pozadie dlaždíc je v SVG napevno, prepisuje sa
   len rám pásu a odtiene textu. */
[data-theme="dark"] .sp-pata-plus { border-top-color: rgba(255,255,255,0.10); }
/* Modrá ikona na modrom kruhu splývala — v tmavom režime je kruh tmavý
   a grafika biela, rovnako ako ikony v modrom pruhu hlavičky. */
[data-theme="dark"] .sp-vyhoda-ic { background: rgba(0,0,0,0.30); color: #fff; }
[data-theme="dark"] .sp-appka-banner { background: linear-gradient(120deg, #0a3578 0%, #14539f 62%, #1a6ec2 100%); }

@media (max-width: 900px) {
  .sp-appka-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 30px 22px 0;
  }
  .sp-appka-text { padding-bottom: 6px; }
  .sp-appka-mockup { margin-bottom: -26px; }
  .sp-telefon { width: 212px; padding: 13px 8px 8px; border-radius: 32px; }
}

@media (max-width: 560px) {
  .sp-pata-plus { padding: 32px 0 36px; margin-top: 40px; }
  .sp-vyhody { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  .sp-vyhoda-ic { width: 54px; height: 54px; }
  .sp-vyhoda-ic svg { width: 28px; height: 28px; }
  .sp-vyhoda b { font-size: 13.5px; }
  .sp-vyhoda small { font-size: 12px; }
  .sp-appka-text h3 { font-size: 22px; }
  .sp-appka-text p { font-size: 14px; }
  .sp-platby { flex-direction: column; gap: 12px; }
}


/* ============================================================
   CENY V KARTE POD SEBOU, VPRAVO (29. 8. 2026)
   Veľká cena s DPH hore, pod ňou malá bez DPH — zákazník číta
   koncovú cenu prvú, základ dane je doplnok pre firmy.
   ============================================================ */
.prod-price {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  text-align: right;
}
.prod-price .sp-bez-dph { margin-left: 0; }

/* Bodky pod slidrom: ukazujú, koľko variantov je a na ktorom stojíme; klik prepne.
   Rozmer a flex sú aj inline vo front-page.php — tu je len farba a stav. */
.promo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.promo-dot {
  width: 12px; height: 12px; padding: 0;
  border: 0;
  border-radius: 50%;
  /* neaktívne sú plné šedé, nie obrysové — obrys mal na bielej 2,1:1 */
  background: var(--grey-700);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.promo-dot:hover { background: var(--red-ink); transform: scale(1.15); }
.promo-dot:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }
.promo-dot.je-aktivna { background: var(--red-ink); transform: scale(1.15); }
/* ------------------------------------------------------------------
   HORNÝ PRUH — telefónne číslo nesmie ísť na dva riadky
   ------------------------------------------------------------------ */
/* Prihlásenému redaktorovi pribúda v pruhu ikona správy, takže na číslo
   ostane o ~36 px menej a lámalo sa za medzerou už pri 360 px. Číslo si
   drží jeden riadok a svoju šírku; miesto uvoľňujú tesnejšie ikony,
   ktoré v krajnom prípade ustúpia (majú shrink) — nie číslo. */
.phonebar-tel { white-space: nowrap; flex: none; }

@media (max-width: 440px) {
  .phonebar { padding: 8px 10px; gap: 8px; }
  .phonebar-tel { font-size: 15px; }
  .phonebar-ikony { gap: 4px; }
  .phonebar .sp-social { gap: 4px; }
  .phonebar .sp-social a,
  .phonebar .sp-appka--bar { width: 30px; height: 30px; }
  .phonebar .sp-social a svg,
  .phonebar .sp-appka--bar svg { width: 17px; height: 17px; }
}

/* ------------------------------------------------------------------
   ÚZKY DISPLEJ — nič nesmie prejsť za okraj obrazovky
   ------------------------------------------------------------------ */
/* E-book formulár na úvodnej: `min-width: 240px` na poli plus tlačidlo dá
   min-content 337 px, kým 320 px displej má na obsah 280 px — celá stránka
   sa preto dala posúvať do strany. Pole sa teraz zmenší, tlačidlo v krajnom
   prípade podskočí pod neho. `minmax(0, 1fr)` treba preto, že `1fr` sám
   nepustí stĺpec pod min-content svojho obsahu. */
.news-inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .news-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.news-form { flex-wrap: wrap; }
.news-form input { min-width: 0; flex: 1 1 180px; }

/* Pod ~340 px sa telefón a päť ikon do pruhu nezmestia ani po zmenšení
   (Galaxy Fold zavretý má 280 px) — vypadnú z neho sociálne siete, ktoré
   sú aj v rozbalenom menu a v pätičke. Appka a správa zostávajú.
   Menej ikon je lepšie než pruh presahujúci obrazovku. */
@media (max-width: 339px) {
  .phonebar .sp-social { display: none; }
}

/* Hľadacie pole: `max-width` mu nebráni nafúknuť sa na vlastnú min-content
   šírku (input má vnútornú šírku z atribútu `size`) a pri 280 px displeji
   prečnievalo za okraj aj s `width: 100%`. */
form.search, form.search input { min-width: 0; }

/* Podnadpis sekcie „Prečo práve my" na /o-nas/ sa má zmestiť na jeden riadok;
   `.lead` má inak strop 720 px, text potrebuje asi 800 px. Na užšom displeji
   sa zalomí sám, strop je len horná hranica. */
.lead--siroky { max-width: none; }

/* ------------------------------------------------------------------
   TLAČIDLÁ V TEXTOVOM OBSAHU — biely nápis, žiadne podčiarknutie
   ------------------------------------------------------------------ */
/* `.entry-content a` (0,1,1) prebíja `.btn-primary` (0,1,0) a robí z červeného
   tlačidla podčiarknutý modrý odkaz. Piatykrát tá istá pasca (karty produktov,
   pokladňa, „Objednať znova", mapa) — preto je selektor s názvom prvku
   a pokrýva rovno všetky tlačidlá v obsahu, nielen jedno miesto. */
.entry-content a.btn { text-decoration: none; }
.entry-content a.btn-primary { color: #fff; }


/* ============================================================
   TLAČIDLO FÓRA V MODROM PRUHU
   ============================================================
   Fórum stálo v hlavnom menu ako textová položka; teraz je vpravo pri
   sociálnych sieťach ako ikona. Selektor musí niesť dve triedy — `.mainnav a`
   (0,1,1) by odkazu vnútil spodnú čiaru, padding aj `display: block`. */
.mainnav .sp-forum-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-left: 10px;
  border-bottom: 0;
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,0.18);
  transition: background .15s, transform .15s;
}
.mainnav .sp-forum-btn:hover {
  background: rgba(0,0,0,0.32);
  transform: translateY(-1px);
}
/* Sociálne siete idú hneď za ním, takže dvojitá medzera by rozhodila rytmus. */
.mainnav .sp-forum-btn + .sp-social { margin-left: 6px; }

@media (max-width: 900px) {
  /* V rozbalenom menu stojí v jednom riadku s ostatnými, bez vlastného odsadenia. */
  .mainnav-vpravo .sp-forum-btn { align-self: center; margin: 0; }
}


/* ============================================================
   ZVÝRAZNENIE OTVORENEJ STRÁNKY V MODROM PRUHU
   ============================================================
   WordPress dáva položke triedu `current-menu-item` a odkazu
   `aria-current="page"`; dovtedy sa nekreslilo nič a pruh po načítaní
   stránky vyzeral rovnako ako pred klikom. Selektor musí niesť dve triedy —
   `.mainnav a` (0,1,1) by inak prebil pozadie. Okraj je `box-shadow`, nie
   `border`: skutočný rám by položke pridal 4 px a rad by poskočil. */
.mainnav .current-menu-item > a,
.mainnav .current_page_item > a,
.mainnav .current-menu-ancestor > a,
.mainnav a[aria-current="page"],
.mainnav .sp-forum-btn.je-aktivne {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--red);
  border-right: 0;
  border-radius: 6px;
}
.mainnav .current-menu-item > a:hover,
.mainnav a[aria-current="page"]:hover,
.mainnav .sp-forum-btn.je-aktivne:hover { background: var(--blue-dark); }

/* Deliaca čiara susednej položky stojí tesne pri ľavej hrane rámu, takže
   vľavo presvitala svetlá linka a vpravo nie. Vlastná `border-right` musí
   byť nulová, nie priehľadná: inset tieň sa kreslí až za rámom, čiže
   priehľadný 1 px by červenú vpravo odsadil od okraja. */
.mainnav li:has(+ li.current-menu-item) > a,
.mainnav li:has(+ li.current_page_item) > a { border-right-color: transparent; }

@media (max-width: 900px) {
  /* V rozbalenom menu majú položky nulový bočný padding a spodnú čiaru —
     zvýraznená položka by mala text nalepený na červenom ráme. */
  .mainnav .current-menu-item > a,
  .mainnav .current_page_item > a,
  .mainnav .current-menu-ancestor > a,
  .mainnav a[aria-current="page"] {
    padding-left: 12px;
    padding-right: 12px;
    border-bottom-color: transparent;
  }
  .mainnav li:has(+ li.current-menu-item) > a,
  .mainnav li:has(+ li.current_page_item) > a { border-bottom-color: transparent; }
}

/* Ikony výhod v páse nad pätičkou: `.sp-vyhody svg` z ucet.css im dáva modrú
   napevno, takže biela farba na krúžku sa na SVG neprepísala. */
[data-theme="dark"] .sp-vyhody svg { color: #fff; }

/* ============================================================
   ÚZKY DISPLEJ: RAD IKON V ROZBALENOM MENU
   ============================================================
   Pribudlo tlačidlo fóra, takže päť prvkov v plnej veľkosti (408 px) preteklo
   obsahovú šírku telefónu (335 px pri 375 px displeji). Uberá sa všetkým naraz,
   aby rad zostal v jednom riadku a rovnako vysoký: 320 px sa zmestí aj na
   360 px displej. */
@media (max-width: 470px) {
  .mainnav-vpravo { gap: 4px; }
  .mainnav-vpravo .sp-appka--nav,
  .mainnav-vpravo .sp-forum-btn,
  .mainnav-vpravo .sp-social a {
    width: 32px;
    height: 32px;
  }
  .mainnav-vpravo .sp-appka--nav svg,
  .mainnav-vpravo .sp-forum-btn svg,
  .mainnav-vpravo .sp-social a svg { width: 18px; height: 18px; }
  .mainnav-vpravo .sp-social { gap: 4px; margin-left: 0; }
  .mainnav-vpravo .sp-forum-btn + .sp-social { margin-left: 0; }
  .mainnav-vpravo .nav-eshop,
  .mainnav-vpravo .theme-toggle { width: 68px; height: 32px; }
}


/* ============================================================
   ROZBALENÉ MENU: ODSADENIE TEXTU A ZAOBLENIE
   ============================================================
   Položky mali nulový bočný padding, takže text lipol na okraji obrazovky
   a zvýraznená položka na svojom ráme. Zaoblenie majú všetky, aby hover
   aj zvýraznenie vyzerali ako tlačidlá, nie ako pruhy cez celú šírku. */
@media (max-width: 900px) {
  .mainnav a {
    padding: 13px 12px;
    border-radius: 6px;
  }
}

/* ============================================================
   HĽADACIE POLE: VÝZVA A LUPA
   ============================================================
   Text výzvy nechával prehliadač na svojej sivej (`color-scheme: dark`),
   takže na tmavom poli splýval s podkladom. */
form.search input::placeholder {
  color: var(--grey-700);
  opacity: 1;
}
[data-theme="dark"] form.search input::placeholder { color: rgba(255,255,255,0.78); }
/* Emoji lupu kreslí každý systém inak a na červenom tlačidle vyzerala ako
   nalepená nálepka — teraz je to ťahová ikona v jednom štýle so zvyškom pruhu. */
form.search button svg { width: 20px; height: 20px; }


/* ============================================================
   DROBČEKOVÁ NAVIGÁCIA V TMAVOM REŽIME
   ============================================================
   WooCommerce dáva `.woocommerce .woocommerce-breadcrumb` sivú #767676 so
   špecificitou (0,2,0) — pravidlo témy (0,1,0) prehráva a na tmavom podklade
   z toho ostal sotva čitateľný riadok. Rovnaká špecificita stačí, `main.css`
   sa načítava po Woo. Odkazy sú o niečo jasnejšie než text, aby bolo vidieť,
   čo je klikateľné. */
[data-theme="dark"] .woocommerce-breadcrumb { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .woocommerce-breadcrumb a { color: rgba(255,255,255,0.95); }
[data-theme="dark"] .woocommerce-breadcrumb a:hover { color: #fff; text-decoration: underline; }


/* ============================================================
   POČÍTADLO NÁVŠTEV V PÄTIČKE
   ============================================================
   Stojí medzi copyrightom a autorom webu; `.footer-bottom` je flex, takže
   na širokom displeji je uprostred a na mobile spadne pod copyright. */
.footer-pocitadlo {
  font-size: 12.5px;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
}
.footer-pocitadlo b { color: rgba(255,255,255,0.88); font-weight: 700; }
@media (max-width: 700px) {
  .footer-pocitadlo { white-space: normal; }
}

/* ============================================================
   PARTNERSKÝ PROGRAM — IKONA V PRUHU A V PÄTIČKE
   ============================================================
   Rovnaký tvar ako tlačidlo fóra. Selektor musí niesť dve triedy —
   `.mainnav a` (0,1,1) by odkazu vnútil spodnú čiaru, padding aj
   `display: block`. */
.mainnav .sp-af-btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-left: 6px;
  border-bottom: 0;
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,0.18);
  transition: background .15s, transform .15s;
}
.mainnav .sp-af-btn-nav:hover {
  background: rgba(0,0,0,0.32);
  transform: translateY(-1px);
}
.mainnav .sp-af-btn-nav + .sp-social { margin-left: 6px; }

/* Otvorená stránka — rovnaký tenký rám ako pri ostatných položkách pruhu.
   Musí byť `box-shadow: inset`, nie `border`: skutočný rám by pridal 2 px
   a rad ikon by poskočil. */
.mainnav .sp-af-btn-nav.je-aktivne {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--red);
}
.mainnav .sp-af-btn-nav.je-aktivne:hover { background: var(--blue-dark); }

@media (max-width: 900px) {
  .mainnav-vpravo .sp-af-btn-nav { align-self: center; margin: 0; }
}

/* V rozbalenom mobilnom menu sa ikona nevykresľuje vôbec — v pätičke je
   odkaz na to isté. Rad piatich prvkov už bez nej vypĺňal celý riadok:
   namerané pretečenie 17 px pri 471 px a 8 px pri 480 px displeji, kým
   bez ikony bola tá istá šírka čistá. Hranica je 900 px, teda presne tam,
   kde sa menu prepína na burger — pevný prah okolo 500 px by držal len
   dovtedy, kým do pruhu niečo nepribudne. */
@media (max-width: 900px) {
  .mainnav-vpravo .sp-af-btn-nav { display: none; }
}

/* --- Pätička: odkaz s ikonou pod sociálnymi sieťami --- */
.footer .sp-af-pata {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: #eef2f6;
  line-height: 1.3;
  transition: background .15s;
}
.footer .sp-af-pata:hover { background: rgba(255,255,255,0.16); color: #fff; }
.sp-af-pata-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.sp-af-pata-ic svg { width: 18px; height: 18px; }
.sp-af-pata small {
  display: block;
  font-size: 11.5px;
  color: rgba(255,255,255,0.72);
  font-weight: 400;
}
.sp-af-pata > span:last-child { font-weight: 700; font-size: 13.5px; }