/* !!! DOLEZITE – TENTO @import MUSI BYT UPLNE PRVY RIADOK SUBORU gaea-custom.min.css !!!
   @import funguje LEN ak je pred VSETKYMI ostatnymi pravidlami.
   Ak vkladas tento subor na koniec, presun tento jeden riadok uplne
   na zaciatok gaea-custom.min.css (este pred povodny obsah).
   Bez toho sa font nenacita a nadpisy ostanu na Raleway. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');


/* ============================================================
   GAEA.CZ – Redesign produktovych stranok (CSS only)
   Brand: navy #001B54, zelena #8CC63E, nadpisy Plus Jakarta Sans

   POZN: Tema (template.min.css / gaea-custom.min.css) ma na viacere
   prvky KONKRETNEJSIE selektory ako my, preto su na spornych
   vlastnostiach (pozadie obrazkov, ramy kariet, font, darcek)
   pouzite !important. Inak ich tema prebije.
   ============================================================ */


/* ------------------------------------------------------------
   BLOK 0 – Brand premenne + font nadpisov
   ------------------------------------------------------------ */
/* Brand premenne GLOBALNE na :root – aby boli dostupne vsade
   (predtym boli len na par kontajneroch a font sa mimo nich rozpadal). */
:root {
  --g-navy: #001B54;
  --g-green: #8CC63E;
  --g-green-soft: #eef5e0;
  --g-green-text: #3B6D11;
  --g-border: #eceae3;
  --g-muted: #6b6b6b;
  --g-font-head: 'Plus Jakarta Sans', 'Raleway', sans-serif;
}

/* Font SITE-WIDE (Plus Jakarta Sans) – na VSETKOM okrem ikonovych
   fontov (FontAwesome, Tabler, glyphicon ostavaju nedotknute). */
html, body,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]):not(.ti):not([class^="ti-"]):not([class*=" ti-"]):not(.glyphicon):not([class^="glyphicon-"]) {
  font-family: 'Plus Jakarta Sans', 'Raleway', sans-serif !important;
}


/* ============================================================
   KROK 1 – PDP (detail produktu)
   ============================================================ */

/* BLOK 1 – Galeria: zaoblene rohy, biele pozadie */
.product-detail .product-images .carousel,
.product-detail .product-images .carousel-inner {
  border-radius: 14px;
  overflow: hidden;
  background: #fff !important;
}
.product-detail .product-images .carousel-inner {
  border: 1px solid var(--g-border, #eceae3);
}
.product-detail .product-images .carousel-indicators img,
.product-detail .product-images .thumbnails img {
  border-radius: 10px;
  transition: border-color .15s ease;
}
.product-detail .product-images .carousel-indicators .active img,
.product-detail .product-images .thumbnails .active img {
  border: 2px solid var(--g-green, #8CC63E) !important;
}

/* BLOK 2 – Vyrobca ako eyebrow */
.product-detail .product-data .manufacturer-logo { margin-bottom: 6px; }
.product-detail .product-data .manufacturer-logo a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-green, #8CC63E);
}

/* BLOK 3 – Nadpis produktu */
.product-detail .product-data h1.product-name {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--g-navy, #001B54) !important;
  margin-bottom: 8px;
}

/* BLOK 4 – Kratky popis */
.product-detail .product-data .short-description {
  font-size: 13px;
  font-weight: 300;
  color: var(--g-muted, #6b6b6b);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* BLOK 6 – Cena */
.product-detail .product-data .product-prices { margin-bottom: 12px; }
.product-detail .product-data .price.price-total {
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  color: var(--g-navy, #001B54) !important;
}
.product-detail .product-data .price.price-per-dose {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--g-green-text, #3B6D11);
  background: var(--g-green-soft, #eef5e0);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* BLOK 8 – Hlavne tlacidlo do kosika (len HLAVNY formular, NIE sticky!)
   Scoped na .main-add-to-cart-form, aby width:100% nepresiaklo do
   sticky listy (.mobile-buy-form), ktora je tiez v .product-data. */
.product-detail .product-data .main-add-to-cart-form .btn-cart {
  width: 100% !important;
  background-color: var(--g-green, #8CC63E) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 14px 16px !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .12s ease, filter .12s ease;
}
.product-detail .product-data .main-add-to-cart-form .btn-cart:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}


/* ============================================================
   KROK 2 – KARTY PRODUKTOV (grid kategorie + suvisiace produkty)
   Cielene na .product-inner. !important kde tema prebija.
   ============================================================ */

/* BLOK 10 – Karta: "liquid glass" look so tienom (site-wide)
   Plati na .product-inner (grid + carousely + suvisiace) aj
   .product-info-box (ostatne zobrazenia), takze je to vsade. */
.product-inner,
.product-info-box {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.50)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  /* svetle, takmer biele tiene – minimum cierneho */
  box-shadow: 0 8px 20px rgba(120,140,170,.10),
              inset 0 1px 1px rgba(255,255,255,1),
              inset 0 -10px 22px rgba(255,255,255,.65) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-inner:hover,
.product-info-box:hover {
  transform: translateY(-4px);
  border-color: rgba(140,198,62,.6) !important;
  box-shadow: 0 12px 26px rgba(120,140,170,.16),
              inset 0 1px 1px rgba(255,255,255,1),
              inset 0 -10px 22px rgba(255,255,255,.7) !important;
  z-index: 5;
}

/* BLOK 11 – Obrazok: BIELE pozadie (preč zelena), zaoblenie, jemny zoom */
.product-inner .image-box {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto !important;     /* obrazok pohlti volny priestor namiesto diery medzi textom */
  border-radius: 12px !important;
  overflow: hidden;
  background: transparent !important;
  padding: 8px !important;
  margin-bottom: 12px;
}
.product-inner .image-box img { transition: transform .25s ease; }
.product-inner:hover .image-box img { transform: scale(1.04); }

/* BLOK 11b – Stitky (akcie, zlavy) ako pilulky */
.product-inner .product-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.product-inner .product-tags > * { border-radius: 999px !important; }

/* BLOK 12 – Nazov produktu: navy, orezany na 2 riadky */
.product-inner h2 { margin: 0 0 6px !important; }
.product-inner .product-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--g-navy, #001B54) !important;
}
.product-inner .product-name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* BLOK 13 – "Detailni popis >" jemnejsi (odkomentuj na skrytie) */
.product-inner .product-primary-info a.link {
  font-size: 11px;
  color: #9b9b9b;
}
/*
.product-inner .product-primary-info a.link { display: none !important; }
*/

/* BLOK 14 – Spodok karty: cena + CTA dole */
.product-inner .product-info { flex: 0 0 auto; display: flex; flex-direction: column; }
.product-inner .product-secondary-info {
  margin-top: 12px;        /* maly rozostup namiesto velkej diery (auto) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.product-inner .product-secondary-info .price.price-total {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--g-navy, #001B54) !important;
}
.product-inner .product-secondary-info .price.price-per-dose {
  font-size: 11px !important;
  font-weight: 300 !important;
  color: #7f7f7f !important;
}

/* BLOK 15 – CTA na celu sirku (BEZ shadow) */
.product-inner .product-secondary-info .controls,
.product-inner .product-secondary-info .add-to-cart-form { width: 100% !important; }
.product-inner .product-secondary-info .btn-cart {
  width: 100% !important;
  background-color: var(--g-green, #8CC63E) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 12px !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .12s ease, filter .12s ease;
}
.product-inner .product-secondary-info .btn-cart:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* BLOK 16 – Nadpis sekcie "Suvisiace produkty" */
.product-detail .carousel-header {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--g-navy, #001B54) !important;
}


/* ============================================================
   KROK 3 – DARCEKOVY BOX (.gift-info)
   Preč sive pozadie -> elegantny svetly box (s !important).
   ============================================================ */
.gift-info-wrapper .gift-info,
.product-detail .gift-info {
  background: #f7faf0 !important;
  border: 1px solid #e3ecd2 !important;
  border-left: 3px solid var(--g-green, #8CC63E) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  color: var(--g-navy, #001B54) !important;
}
.gift-info .h4 {
  font-family: var(--g-font-head) !important;
  font-weight: 700 !important;
  color: var(--g-navy, #001B54) !important;
  margin-bottom: 4px;
}
.gift-info p {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--g-muted, #6b6b6b) !important;
  line-height: 1.5;
}
.gift-info a { color: var(--g-green-text, #3B6D11) !important; }
.gift-info .selector-name { font-weight: 600 !important; }


/* ============================================================
   KROK 4 – PRIESTOR PRE HOVER (aby tien/nadvihnutie neorezavalo)
   Carousely (.swipeable) maju overflow hidden a orezavali by tien
   aj nadvihnutie karty hore. Davame im vertikalny vnutorny priestor,
   tien sa potom zmesti dovnutra a neoreze sa.
   ============================================================ */
/* Carousel: vypnut orezavanie tam kde sa da + dat vertikalny priestor,
   aby sa nadvihnutie + tien karty zmestili a neorezavali sa.
   .swipeable ma overflow-y:hidden (kvoli horiz. scrollu), preto mu
   davame velky vertikalny padding – tien sa zmesti dovnutra. */
/* PRICINA orezavania: .swipeable ma JS-om nastavenu pevnu vysku +
   overflow-y:hidden, takze tien aj nadvihnutie sa nezmestia.
   Riesenie: vyska auto (prebije inline JS vysku) + priestor navyse. */
.swipeable-box { overflow: visible !important; }
.swipeable {
  height: auto !important;
  min-height: 0 !important;
  overflow-y: visible !important;
  padding-top: 26px !important;
  padding-bottom: 40px !important;
}
/* Grid (kategoria) – nech sa nadvihnuta karta neschova pod susednu */
.product-grid .row.equal-height { overflow: visible !important; }
.product-grid .row.equal-height > .product { z-index: 0; }
.product-grid .row.equal-height > .product:hover { z-index: 5; }

/* Velmi jemny takmer biely podklad – aby frost (sklo) malo na com
   vyniknut. Skoro neviditelny, len lahky nadych. Ak nechces, zmaz. */
.product-grid.main,
.swipeable-box {
  background: #f6f7f9;
  border-radius: 18px;
  padding: 10px 12px;
}


/* ============================================================
   KROK 5 – FIX STICKY LISTY NA MOBILE
   Na mobile sa sticky lista rozhadzala. Tlacidlo dostane prirodzenu
   sirku, layout sa prearanzuje a setrime miesto (skry per-davku
   a pocitadlo mnozstva v sticky liste na malych obrazovkach).
   ============================================================ */
@media (max-width: 767px) {
  /* viac priestoru – lista nech dycha */
  .sticky-add-to-cart { padding: 10px 0 !important; }
  .sticky-add-to-cart .container { padding-left: 12px !important; padding-right: 12px !important; }

  .sticky-add-to-cart__inner {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  .sticky-add-to-cart__inner > .d-flex {
    width: 100%;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
  }

  /* CENA: mensia, kompaktna (nie zbytocne velka) */
  .sticky-add-to-cart .sticky-add-to-cart__price { flex: 0 0 auto; }
  .sticky-add-to-cart .price.price-total { font-size: 16px !important; white-space: nowrap; }
  .sticky-add-to-cart .price.price-per-dose { font-size: 10px !important; }

  /* POCITADLO MNOZSTVA – viditelne a zaoblene */
  .sticky-add-to-cart .quantity-box {
    display: inline-flex !important;
    align-items: center;
    border-radius: 12px !important;
    overflow: hidden !important;
    height: 40px;
  }
  .sticky-add-to-cart .quantity-box input { width: 38px !important; }

  /* CTA – prirodzena sirka, neorezat text, trochu vzduchu */
  .sticky-add-to-cart .sticky-form-wrapper { flex: 0 1 auto; min-width: 0; }
  .sticky-add-to-cart .sticky-form-wrapper form > div {
    display: flex !important;
    align-items: center;
    gap: 8px;
    justify-content: flex-end !important;
  }
  .sticky-add-to-cart .btn-cart {
    width: auto !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
}


/* ============================================================
   KROK 6 – SITE-WIDE: ziadne tiene textov + zjednotene rohy
   ============================================================ */

/* Ziadny text-shadow nikde na webe */
* { text-shadow: none !important; }

/* Zjednotene zaoblenie – velke boxy/karty/obrazky = 16px */
.product-inner,
.product-info-box,
.image-box,
.product-images .carousel,
.product-images .carousel-inner,
.product-tabs .collapse-wrapper,
.claims .card,
.gift-info,
.swipeable img,
.product-inner img,
.alert,
.box,
.panel {
  border-radius: 16px !important;
}

/* Tlacidla = 14px (jednotne zaoblenie), formularove prvky = 12px */
.btn,
.btn-cart,
a.btn,
button.btn,
input[type="submit"],
.popup-cart .dropdown-toggle,
.popup-cart > a {
  border-radius: 14px !important;
}
input.form-control,
select.form-control,
textarea.form-control {
  border-radius: 12px !important;
}

/* Pilulky ostavaju okruhle (cena za davku, stitky) */
.price.price-per-dose,
.product-tags > *,
.stock-status {
  border-radius: 999px !important;
}

/* TEXTOVE bloky NEzaoblovat – zaoblenie + overflow:hidden orezavalo text! */
.short-description,
.product-inner .short-description,
.product-inner .description { border-radius: 0 !important; }

/* Pocitadlo mnozstva zaoblene ako zvysok stranky.
   Sirka AUTO + flex, aby sa zmestili vsetky 3 prvky (− 1 +) a "+"
   sa neorezavalo (tema mala uzku pevnu sirku + nas overflow:hidden). */
.quantity-box {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  flex: 0 0 auto !important;      /* nech sa NEzmensuje pod obsah (inak orezalo "+") */
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* tlacidlo do kosika nech uvolni miesto pocitadlu */
.product-data .add-to-cart-form .btn-cart { flex: 1 1 auto !important; min-width: 0 !important; }
/* +/- tlacidla: vycentrovana ikona, plna vyska, pevna sirka */
.quantity-box .quantity-minus,
.quantity-box .quantity-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  align-self: stretch !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.quantity-box .quantity-minus i,
.quantity-box .quantity-plus i {
  display: block !important;
  line-height: 1 !important;
}
/* input v strede, dost siroky aby sa cislo zmestilo */
.quantity-box input,
.quantity-box .quantity {
  width: 42px !important;
  min-width: 42px !important;
  font-size: 16px !important;
  text-align: center !important;
  padding: 8px 2px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Accordion "Popis produktu" – krajsi ram k zjednotenym rohom */
.product-tabs .collapse-wrapper {
  border: 1px solid var(--g-border, #eceae3) !important;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Claims karty – zjednotene rohy + von zo sivej, do glass stylu */
.claims .card {
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.30)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 10px 30px rgba(0,27,84,.12),
              inset 0 1px 1px rgba(255,255,255,.95) !important;
}


/* ============================================================
   KROK 7 – HEADER MENU ako liquid glass + FIX prekryvania dropdownu
   - Tlacidla: biele cipy s navy textom; hover/active = modra (navy).
   - Dropdown (vyrolovane submenu): biele s navy textom.
   - AKCE ostava cervene.
   DOLEZITE: cele menu dostane vysoky z-index, aby dropdown bol NAD
   carouselom a obrazkami. Bez toho sa prekryvaju.
   POZN: cely tento blok je v @media (min-width: 992px), takze na
   MOBILE ostava povodne menu temy NEDOTKNUTE.
   ============================================================ */

@media (min-width: 992px) {

/* Menu nad obsahom stranky (carousel, bannery, produkty) */
.header-menu { position: relative !important; z-index: 600 !important; }
.header-menu .navbar-nav > li { position: relative !important; }
.header-menu .navbar-nav > li:hover,
.header-menu .navbar-nav > li.open,
.header-menu .navbar-nav > li.active { z-index: 1002 !important; }

/* Top-level tlacidla – biele cipy, navy text. BEZ blur (kvoli stackingu). */
.header-menu .navbar-nav > li:not(.akce) {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,27,84,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(120,140,170,.12) !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.header-menu .navbar-nav > li:not(.akce) > a {
  color: var(--g-navy, #001B54) !important;
}
/* hover / active = modra (navy) zvyraznenie + biely text */
.header-menu .navbar-nav > li:not(.akce):hover,
.header-menu .navbar-nav > li:not(.akce).open,
.header-menu .navbar-nav > li:not(.akce).active {
  background: var(--g-navy, #001B54) !important;
  border-color: var(--g-navy, #001B54) !important;
  box-shadow: 0 6px 16px rgba(0,27,84,.22) !important;
}
.header-menu .navbar-nav > li:not(.akce):hover > a,
.header-menu .navbar-nav > li:not(.akce).open > a,
.header-menu .navbar-nav > li:not(.akce).active > a {
  color: #fff !important;
}

/* AKCE – ostava cervene, len zjednotene zaoblenie */
.header-menu .navbar-nav > li.akce { border-radius: 12px !important; }

/* DROPDOWN (vyrolovane submenu) – biele s navy textom */
.header-menu .dropdown-menu {
  background: rgba(255,255,255,.97) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0,27,84,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(0,27,84,.16) !important;
  overflow: hidden;
  padding: 6px !important;
  z-index: 1002 !important;
}
.header-menu .dropdown-menu a {
  color: var(--g-navy, #001B54) !important;
  border-radius: 10px !important;
}
.header-menu .dropdown-menu a:hover {
  background: var(--g-green-soft, #eef5e0) !important;
  color: var(--g-green-text, #3B6D11) !important;
}

} /* koniec @media (min-width: 992px) – uravy menu LEN pre desktop.
     Na mobile (< 992px) ostava povodne menu temy nedotknute. */


/* ============================================================
   KROK 9 – Vacsie pismo v popise produktu (Popis produktu)
   ============================================================ */
.product-tabs .description,
.product-tabs .description p,
.product-tabs .description li,
.product-tabs .description span,
.product-tabs .content,
.product-tabs .content p,
.product-tabs .content li {
  font-size: 16px !important;
  line-height: 1.7 !important;
}


/* ============================================================
   KROK 10 – LAVY FILTER KATEGORII (farby ako header menu)
   Struktura: .col-md-pull-9 (lavy stlpec) > taby .nav-tabs +
   zoznam ul.menu > li.menu-item > a (linky maju svetlomodre pozadie).
   Ciel: biele cipy, navy text, aktivna/hover = navy, AKCE cervene.
   ============================================================ */

/* Polozky kategorii ako svetlomodre glass cipy s navy textom */
.col-md-pull-9 .menu li.menu-item > a {
  background: linear-gradient(135deg, rgba(214,235,250,.92), rgba(232,244,252,.8)) !important;
  color: var(--g-navy, #001B54) !important;
  border: 1px solid rgba(120,170,210,.35) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
/* vnorene podkategorie – svetlejsi odtien */
.col-md-pull-9 .menu .submenu li.menu-item > a {
  background: linear-gradient(135deg, rgba(233,244,252,.92), rgba(244,250,254,.82)) !important;
  border-color: rgba(120,170,210,.28) !important;
}
.col-md-pull-9 .menu li.menu-item { margin: 4px 0 !important; }

/* VYNUT navy text na vsetkych NEAKTIVNYCH polozkach – oprava kontrastu
   (niektore akciove polozky ako .kiki-health-akce mali od temy biely
   text na svetlomodrom pozadi = necitatelne). */
.col-md-pull-9 .menu li.menu-item:not(.active):not(.active-path) > a,
.col-md-pull-9 .menu li.menu-item:not(.active):not(.active-path) > a * {
  color: var(--g-navy, #001B54) !important;
}

/* hover = svetlejsia modra + biely text */
.col-md-pull-9 .menu li.menu-item > a:hover {
  background: #3f86cf !important;
  color: #fff !important;
  border-color: #3f86cf !important;
}
.col-md-pull-9 .menu li.menu-item > a:hover i,
.col-md-pull-9 .menu li.menu-item > a:hover * { color: #fff !important; }

/* aktivna kategoria = svetlejsia modra (nie tmava navy) */
.col-md-pull-9 .menu li.menu-item.active > a,
.col-md-pull-9 .menu li.menu-item.active-path > a {
  background: #2f6fb3 !important;
  color: #fff !important;
  border-color: #2f6fb3 !important;
}
.col-md-pull-9 .menu li.menu-item.active > a i,
.col-md-pull-9 .menu li.menu-item.active > a *,
.col-md-pull-9 .menu li.menu-item.active-path > a i,
.col-md-pull-9 .menu li.menu-item.active-path > a * { color: #fff !important; }

/* AKCE (hlavna kategoria) ostava cervene aj ked je rozbalene/aktivne.
   POZOR: len presna trieda .akce – NIE podkategorie ako .vegmart-akce
   ci .kiki-health-akce. Vyssia specifickost prebije aj .active-path. */
.col-md-pull-9 .menu li.menu-item.akce > a,
.col-md-pull-9 .menu li.menu-item.akce.active > a,
.col-md-pull-9 .menu li.menu-item.akce.active-path > a {
  background: #D52828 !important;
  color: #fff !important;
  border-color: #D52828 !important;
}
.col-md-pull-9 .menu li.menu-item.akce > a *,
.col-md-pull-9 .menu li.menu-item.akce.active-path > a * { color: #fff !important; }

/* Taby KATEGORIE / ZNACKY – neaktivny svetlomodry, aktivny navy */
.col-md-pull-9 .nav-tabs > li > a {
  background: linear-gradient(135deg, rgba(214,235,250,.95), rgba(232,244,252,.85)) !important;
  color: var(--g-navy, #001B54) !important;
  border: 1px solid rgba(120,170,210,.35) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600 !important;
}
.col-md-pull-9 .nav-tabs > li > a:hover {
  background: linear-gradient(135deg, rgba(198,228,248,.98), rgba(220,238,251,.9)) !important;
}
.col-md-pull-9 .nav-tabs > li.active > a {
  background: #2f6fb3 !important;
  color: #fff !important;
  border-color: #2f6fb3 !important;
  border-radius: 12px 12px 0 0 !important;
}


/* ============================================================
   KROK 11 – Filter: zaobleny spodok + tvrdenia (Vegan...) ako
   ciste biele liquid-glass karticky pod filtrom.
   ============================================================ */

/* Filter box – zaobleny spodok */
.col-md-pull-9 .tab-content {
  background: #fff !important;
  border: 1px solid rgba(0,27,84,.10) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  padding: 10px !important;
}

/* Tvrdenia (Vegan, Cruelty Free, Obaly...) – ciste biele glass karticky */
.col-md-pull-9 .about-boxes .about-box {
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(120,140,170,.10),
              inset 0 1px 1px rgba(255,255,255,1) !important;
  padding: 14px 16px !important;
  margin: 0 0 12px !important;
}
.col-md-pull-9 .about-boxes .about-box h2 {
  color: var(--g-navy, #001B54) !important;
  font-size: 16px !important;
  margin: 0 0 6px !important;
}
.col-md-pull-9 .about-boxes .about-box .text {
  color: var(--g-muted, #6b6b6b) !important;
}


/* ============================================================
   KROK 12 – Svetlomodre "blurry" pozadie na top bar + footer
   Mäkka aurora zo svetlomodrych tonov (ladi s logom).
   ============================================================ */

/* Spolocny modry aurora podklad – sytejsia modra */
.top,
footer {
  background-color: #aaddf4 !important;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(86,180,230,.85), transparent 60%),
    radial-gradient(circle at 82% 25%, rgba(56,138,221,.7), transparent 55%),
    radial-gradient(circle at 50% 95%, rgba(120,200,236,.9), transparent 60%),
    linear-gradient(135deg, #bfe3f7 0%, #8ccbee 100%) !important;
}

/* Top bar – tmavy citatelny text na svetlom podklade */
.top { border-bottom: 1px solid rgba(0,27,84,.08) !important; }
.top, .top a, .top span, .top li, .top div {
  color: var(--g-navy, #001B54) !important;
}
.top a:hover { color: #2f6fb3 !important; }

/* Footer – text na svetlom podklade musi byt tmavy (bol svetly na sivom) */
footer, footer a, footer p, footer span, footer li, footer div,
footer h1, footer h2, footer h3, footer h4, footer h5 {
  color: var(--g-navy, #001B54) !important;
}
footer a:hover { color: #2f6fb3 !important; }
footer { border-top: 1px solid rgba(0,27,84,.08) !important; }


/* ============================================================
   KROK 14 – Filtracna tabulka "Vybrat produkty" (.product-filters)
   na vysledkoch vyhladavania -> biely liquid glass + 16px rohy.
   ============================================================ */
.product-filters {
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(120,140,170,.10),
              inset 0 1px 1px rgba(255,255,255,1) !important;
}


/* ============================================================
   KROK 15 – Checkout tlacidlo "Dále" v kosiku
   Plna sirka (ako tlacidlo pod nim) + sipka dopredu.
   ============================================================ */
.btn-checkout {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.btn-checkout::after {
  content: "\00a0\2192";   /* medzera + sipka doprava → */
  font-weight: 700;
  display: inline-block;
}


/* ============================================================
   POZNAMKY
   - @import (font) MUSI byt prvy riadok suboru.
   - !important je tu zamerne – tema ma konkretnejsie selektory.
     Ak chces neskor cistejsie riesenie, da sa zvysit specifickost
     prefixom kontajnerov namiesto !important, ale toto je spolahlive.
   - List view (.product-info-box) zatial neupraveny.
   ============================================================ */