/* ==========================================================================
   GK Footer

   ŠÍRKA: všetky tri časti (karty, modrá časť, spodný pás) používajú kontajner
   témy `.container` (max 1430 px, obsah 1400 px) — rovnaký ako hlavička,
   produkty a recenzie. Vďaka tomu je pätička zarovnaná s ostatnými
   sekciami pri každej šírke obrazovky. Tu sa preto NEnastavuje max-width
   ani vodorovné odsadenie, len zvislé.

   Ostatné rozmery sú z návrhu vo Figme (rám 1767 px):
     • kontaktné karty  3 × karta, medzera 20
     • modrá časť       pomer stĺpcov 181 : 155 : 255 : 354 : 371
     • spodný pás       86 px vysoký
   Pod 1100 px sa stĺpce preskladajú (mobilná verzia vo Figme nie je,
   rozloženie pre menšie obrazovky je navrhnuté podľa desktopu).
   ========================================================================== */

.gf {
  --gf-blue:  #2756a0;
  --gf-navy:  #1f4a9b;
  --gf-green: #61bb52;
  --gf-ink:   #393939;
  --gf-line:  #ebebeb;
  --gf-font:  Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  font-family: var(--gf-font);
  -webkit-font-smoothing: antialiased;
}

/* téma má vlastné štýly pre p/ul/a/img — tu ich vynulujeme len vo vnútri pätičky */
.gf p,
.gf ul { margin: 0; padding: 0; }
.gf ul { list-style: none; }
.gf li { margin: 0; padding: 0; list-style: none; }
.gf a { text-decoration: none; }
.gf a,
.gf button,
.gf [role="button"] { -webkit-tap-highlight-color: transparent; }
.gf img { display: block; max-width: none; height: auto; }
.gf *,
.gf *::before,
.gf *::after { box-sizing: border-box; }

/* Web má globálne pravidlo, ktoré zaobľuje rohy VŠETKÝCH obrázkov o 10 px
   (img:not(.nav img):not(…) { border-radius:10px !important }). V pätičke
   z vlajočky 10 × 7 robilo krúžok a orezávalo rohy pásu platieb. Vo Figme
   žiadne obrázky zaoblené nie sú. Selektor s #id je silnejší ako to pravidlo.
   Ikony e-shopov ostávajú okrúhle (sú kreslené ako krúžky). */
#gk-footer:not(#gk-x) img { border-radius: 0 !important; }
#gk-footer:not(#gk-x) .gf__shops img,
#gk-footer:not(#gk-x) .gf__picker img,
#gk-footer:not(#gk-x) .gf__dlg-item img { border-radius: 50% !important; }

/* Kontajner témy (.container) má clearfix z Bootstrapu 3: ::before/::after
   s content:" ". V mriežke a flexboxe sa z nich stanú neviditeľné položky —
   zaberú prvé políčko mriežky (karty sa posunú, tretia skočí do nového
   riadku) a vo flexe odtlačia copyright a platby od okrajov. Tu ich vypneme. */
.gf .container::before,
.gf .container::after { content: none; display: none; }

/* ── Newsletter ───────────────────────────────────────────────────────────
   Rozmery z Figmy (rám 1767): modrý pás 232 px s jemným vodoznakom „g",
   maskot 335 px vľavo presahuje 25 px nad pás, pod ním tmavý rozmazaný tieň
   (pás ho dole oreže). Kompozícia maskot + formulár má 1152 px a je v obsahu
   posunutá o 22 px doľava (padding-right 45 px). Nadpis 20 px bold,
   NEWSLETTER 26 px, text 15 px, polia a tlačidlo 226 × 44 px, medzera 24. */

.gf .gnl {
  position: relative;
  margin: 30px 0 0;           /* miesto pre maskota, ktorý presahuje nad pás */
  background: var(--gf-blue);
  color: #fff;
  /* dole a po stranách orezať (tieň pod maskotom), hore nechať presah maskota */
  clip-path: inset(-40px 0 0 0);
}
.gnl::before {
  /* vodoznak „g" = vlastný vektor od klienta (Union.svg, 1332 × 232):
     v šírke sekcií, na stred, prirodzená veľkosť (nenaťahuje sa);
     farba ide od farby pásu na krajoch k tmavšej v strede → po stranách mizne */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(1332px, 100%);
  transform: translateX(-50%);
  /* výška = celý pás (na desktope 232 px = 1:1 s Figmou; na vyššom mobilnom
     páse sa vzor proporcionálne zväčší, aby pokryl celé pozadie) */
  background: url("img/newsletter/pattern.svg?v=1") center top / auto 100% no-repeat;
  pointer-events: none;
}
.gnl__inner { position: relative; }

.gnl__wrap {
  display: grid;
  grid-template-columns: 393px minmax(0, 1fr);
  max-width: 1197px;
  margin: 0 auto;
  padding-right: 45px;
}

.gnl__art { position: relative; }
.gf .gnl__mascot { position: absolute; left: 0; top: -25px; width: 335px; }
.gnl__shadow {
  position: absolute;
  left: 22px;
  top: 140px;
  width: 340px;
  height: 110px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .68) 0, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.gnl__form { min-width: 0; padding: 23.5px 0 20px; }

.gnl__top { display: grid; grid-template-columns: 326px minmax(0, 1fr); }

.gf .gnl__title {
  margin: 0;
  padding: 0 0 0 5px;
  font-size: inherit;
  line-height: inherit;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}
.gnl__kicker {
  display: block;
  font: 700 20px/24px var(--gf-font);
  letter-spacing: .2px;
}
.gnl__name {
  display: block;
  margin-top: 5.5px;
  font: 300 26px/32px var(--gf-font);
}
.gnl__name::after {
  content: "";
  display: block;
  /* vlastný vektor čiary od klienta (Vector 19 (1)), 169 × 16 + 1 px rezerva */
  width: 171px;
  height: 18px;
  margin: -1px 0 0 1.5px;
  background: url("img/newsletter/ul-newsletter.svg?v=1") left top / 100% 100% no-repeat;
}

.gf .gnl__text {
  margin: 4.5px 0 0;
  font: 400 15.6px/19px var(--gf-font);
  color: #fff;
}
.gf .gnl__text strong { font-weight: 700; color: #fff; }

.gnl__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 226px));
  gap: 24px;
  margin-top: 16px;
}

#gk-footer .gnl__input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
  font: 400 16px/44px var(--gf-font);
  color: var(--gf-ink);
  text-align: center;
}
#gk-footer .gnl__input::placeholder { color: #b0b0b0; opacity: 1; }
#gk-footer .gnl__input:focus { outline: 3px solid rgba(255, 255, 255, .55); outline-offset: 2px; }

#gk-footer .gnl__btn {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--gf-green) !important;
  box-shadow: none !important;
  font: 700 17px/44px var(--gf-font) !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
@media (hover: hover) { #gk-footer .gnl__btn:hover { background: #55a847 !important; transform: translateY(-1px); } }
#gk-footer .gnl__btn:active { background: #55a847 !important; transform: scale(.98); }
#gk-footer .gnl__btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }

.gnl__consent {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  margin: 19px 0 0 9px;
  font: 400 12.2px/15.5px var(--gf-font);
  color: #fff;
  cursor: pointer;
}
#gk-footer .gnl__check {
  -webkit-appearance: none;
          appearance: none;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: #fff center / 13px 13px no-repeat;
  cursor: pointer;
}
#gk-footer .gnl__check:checked { background-image: url("img/icon-check.svg?v=2"); }
#gk-footer .gnl__check:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 2px; }

/* Na desktope texty nezalamovať — môžu siahnuť do voľného miesta vpravo. */
@media (min-width: 1200px) {
  .gf .gnl__text,
  .gnl__consent span { white-space: nowrap; }
}
@media (max-width: 1199px) {
  #gk-footer .gnl__btn { font-size: 15px !important; }
  .gnl__wrap { grid-template-columns: 280px minmax(0, 1fr); padding-right: 0; }
  .gf .gnl__mascot { width: 260px; top: -18px; }
  .gnl__shadow { left: 10px; top: 110px; width: 270px; height: 90px; }
  .gnl__top { grid-template-columns: 1fr; }
  .gf .gnl__text { margin-top: 12px; }
}
/* pod 992 px sú 3 polia vedľa seba príliš úzke — tlačidlo ide pod ne na celú šírku */
@media (max-width: 991px) {
  .gnl__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  #gk-footer .gnl__btn { grid-column: 1 / -1; font-size: 16px !important; }
}
/* Mobil: kompaktne (klient: „príde mi to ako veľká sekcia") — maskot menší
   vpravo vedľa nadpisu (presahuje nad pás), meno a e-mail vedľa seba,
   tlačidlo pod nimi, menšie písmo. */
@media (max-width: 767px) {
  .gf .gnl { margin-top: 26px; }
  .gnl__wrap { display: block; position: relative; }
  .gnl__art { position: absolute; top: 0; right: -8px; width: 175px; height: 0; z-index: 1; }
  .gf .gnl__mascot { left: 0; top: -32px; width: 175px; transform: none; }
  .gnl__shadow { left: 10px; top: 46px; width: 165px; height: 44px; transform: none; }
  .gnl__form { padding: 20px 0 18px; }
  .gnl__top { display: block; }
  /* nadpis nesmie zájsť pod maskota (na úzkych telefónoch sa zalomí) */
  .gf .gnl__title { padding: 0 158px 0 0; }
  .gnl__kicker { font-size: 17px; line-height: 21px; letter-spacing: 0; }
  .gnl__name { margin-top: 3px; font-size: 22px; line-height: 27px; }
  .gnl__name::after { width: 144px; height: 15px; margin: 0 0 0 1px; }
  .gf .gnl__text { margin-top: 12px; padding-right: 0; font-size: 13.5px; line-height: 18px; white-space: normal; }
  .gf .gnl__text br { display: none; }
  .gnl__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
  #gk-footer .gnl__input { height: 42px; padding: 0 12px; font-size: 15px; line-height: 42px; }
  #gk-footer .gnl__btn { grid-column: 1 / -1; height: 44px; font-size: 15px !important; }
  .gnl__consent { gap: 12px; margin: 14px 0 0; font-size: 11px; line-height: 14px; }
  #gk-footer .gnl__check { width: 18px; height: 18px; margin-top: 0; }
}

/* ── Overené zákazníkmi — Heureka recenzie ────────────────────────────────
   Rozmery z Figmy (rám 1767): nadpis 20 px so zelenou čiarou (Vector 19)
   a vedľa neho odznak Heureka 67 px. Pod tým 5 kariet 264 × 130 px,
   medzera 20, zaoblenie 12; hviezdy 19,5 px (rozostup 22,5), dátum a zdroj
   11 px sivou, text recenzie 13 px. Text má najviac 2 riadky, aby boli
   všetky karty rovnako vysoké (dlhší sa skráti trojbodkou). */

/* téma dáva každej <section> spodný okraj 40 px — tu ho nechceme;
   hlavy kuchárov z NA NOŽE sú vo Figme 25 px pod kartami */
.gf .gr { margin: 0; padding: 14px 0 12px; }

/* nadpis začína v jednej línii s textom v kartách */
.gr__head { display: flex; align-items: flex-start; gap: 21px; padding-left: 20px; }

.gf .gr__title {
  margin: 20px 0 0;
  padding: 0;
  font: 700 20px/24px var(--gf-font);
  /* Figma kreslí Inter pri 20 px užšie (optická veľkosť) — vyrovnanie šírky */
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--gf-blue);
}
.gr__title::after {
  content: "";
  display: block;
  /* vlastný vektor čiary od klienta (Vector 19), 197 × 14 + 1 px rezerva */
  width: 199px;
  height: 16px;
  margin: 5px 0 0 -3px;
  background: url("img/reviews/ul-reviews.svg?v=1") left top / 100% 100% no-repeat;
}

.gf .gr__badge { flex: none; width: 67px; height: 67px; }

.gr__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-top: 27px;
}

.gr__card {
  min-width: 0;
  padding: 14px 16px 16px 19px;
  border: 1px solid var(--gf-line);
  border-radius: 12px;
  background: #fff;
}

/* Hviezdy: 5 hviezd ako maska, oranžová časť má šírku --gr-fill
   (počíta ju šablóna podľa hodnotenia, napr. 4,5 = polovičná piata). */
.gr__stars {
  display: block;
  width: 112.5px;
  height: 19px;
  background: linear-gradient(90deg, #f29c11 0 var(--gr-fill, 112.5px), #e8e8e8 var(--gr-fill, 112.5px) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.5' height='19'%3E%3Cpath d='M11.25 0L13.55 7.08L21 7.08L14.97 11.46L17.27 18.54L11.25 14.17L5.23 18.54L7.53 11.46L1.5 7.08L8.95 7.08Z'/%3E%3C/svg%3E") 0 0 / 22.5px 19px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.5' height='19'%3E%3Cpath d='M11.25 0L13.55 7.08L21 7.08L14.97 11.46L17.27 18.54L11.25 14.17L5.23 18.54L7.53 11.46L1.5 7.08L8.95 7.08Z'/%3E%3C/svg%3E") 0 0 / 22.5px 19px repeat-x;
}

.gf .gr__meta {
  margin-top: 9px;
  font: 400 11px/12.5px var(--gf-font);
  color: #b0b0b0;
}
/* vlajka = obdĺžnik; jemný obrys, aby biely pruh nesplynul s bielou kartou */
.gf .gr__flag { display: inline-block; width: 10px; height: 7px; vertical-align: baseline; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18); }
.gr__src { display: block; }

.gf .gr__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 32px;
  margin-top: 12.5px;
  font: 400 13px/16px var(--gf-font);
  color: #000;
  overflow-wrap: anywhere;
}

/* Užšie obrazovky: karty v jednom riadku, posúvajú sa do strany. */
@media (max-width: 1199px) {
  .gr__grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .gr__card { flex: 0 0 264px; scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .gr__head { align-items: center; gap: 14px; padding-left: 0; }
  .gf .gr__title { margin-top: 0; }
  .gf .gr__badge { width: 56px; height: 56px; }
  .gr__grid { margin-top: 20px; }
  .gr__card { flex-basis: min(264px, 80%); }
}

/* ── NA NOŽE — Partner relácie ────────────────────────────────────────────
   Rozmery z Figmy (rám 1767): logo GastroKuchyne 418 px, kuchári 353 × 296
   (presne na strede stránky, dole sa strácajú do bielej), logo NA NOŽE 310 px
   a pod ním „Partner relácie" so zelenou čiarou. Za kuchármi jemný vodoznak.
   Celá sekcia je odkaz na stránku o relácii (ako starý obrázok s Markízou). */

.gn { display: block; position: relative; color: inherit; text-decoration: none; }
.gn:hover, .gn:focus { color: inherit; text-decoration: none; }

.gn__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 310px;
  padding-top: 12px;
}

/* vodoznak „g" za kuchármi — na krajoch sa stráca do bielej */
.gn__bg {
  position: absolute;
  left: 13%;
  right: 11%;
  bottom: 0;
  height: 261px;
  background: url("img/najnoze/pattern.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  pointer-events: none;
}

.gn__col { position: relative; display: flex; flex-direction: column; align-items: center; }
.gn__col--chefs { align-self: end; }
/* logo GastroKuchyne vo Figme nie je v stĺpci na strede — začína 28 px od okraja obsahu */
@media (min-width: 1200px) { .gn__col--gk { align-items: flex-start; padding-left: 28px; } }
/* Blok NA NOŽE nie je na strede — nôž má ako hlavy kuchárov presahovať nad
   vodoznak: vo Figme je hrot noža 20 px pod hlavami a 14 px nad vodoznakom. */
@media (min-width: 1200px) { .gn__col--show { align-self: start; margin-top: 18px; padding-right: 10px; } }

.gn__gk { width: 418px; max-width: 100%; }

.gn__chefs {
  width: 353px;
  /* kuchári sa dole strácajú do bielej (vo Figme prechod, fotka je odrezaná) */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* 324 px obrázok = 310 px samotná kresba (SVG má okolo kresby voľný okraj);
   margin-left vyrovná nesúmerný okraj SVG, aby kresba sedela ako vo Figme */
.gn__najnoze { width: 324px; max-width: 100%; margin-left: 4px; }

.gn__partner {
  display: block;
  margin-top: 18px;
  font: 700 33px/1.1 var(--gf-font);
  color: var(--gf-blue);
  text-align: center;
}
.gn__partner::after {
  content: "";
  display: block;
  /* vlastný vektor čiary od klienta (Vector 18), 243 × 23 */
  width: 243px;
  height: 23px;
  margin: 2px auto 0;
  background: url("img/najnoze/ul-partner.svg?v=2") left top / 100% 100% no-repeat;
}

@media (max-width: 1199px) {
  /* minmax(0, …) — stĺpce sa smú zúžiť, inak NA NOŽE vytieklo z obrazovky */
  .gn__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 260px; }
  .gn__gk { width: 300px; }
  .gn__chefs { width: 290px; }
  .gn__najnoze { width: 240px; }
  .gn__partner { font-size: 26px; }
  .gn__partner::after { width: 190px; height: 18px; }
}
@media (max-width: 991px) {
  .gn__inner { min-height: 220px; }
  .gn__gk { width: 220px; }
  .gn__chefs { width: 240px; }
  .gn__najnoze { width: 190px; }
  .gn__partner { margin-top: 12px; font-size: 21px; }
  .gn__partner::after { width: 150px; height: 14px; }
}

/* Mobil: kuchári vľavo, vpravo pod sebou logo GastroKuchyne, logo NA NOŽE
   a „Partner relácie" (klient). */
@media (max-width: 767px) {
  .gn__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "chefs gk" "chefs show";
    align-content: center;
    column-gap: 10px;
    row-gap: 12px;
    min-height: 0;
    padding-top: 22px;
  }
  .gn__col--gk { grid-area: gk; align-self: end; }
  .gn__col--chefs { grid-area: chefs; align-self: end; }
  .gn__col--show { grid-area: show; align-self: start; }
  .gn__gk { width: min(170px, 100%); }
  .gn__chefs { width: min(200px, 100%); }
  .gn__najnoze { width: min(135px, 100%); margin-left: 0; }
  .gn__partner { margin-top: 6px; font-size: 17px; }
  .gn__partner::after { width: 124px; height: 12px; }
  .gn__bg { left: 0; right: 0; height: 170px; }
}

/* ── kontaktné karty ─────────────────────────────────────────────────────── */

.gf__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 24px;
}

.gf__card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 18px;
  border: 1px solid var(--gf-line);
  border-radius: 12px;
  background: #fff;
  color: var(--gf-ink);
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.gf__card:focus-visible {
  border-color: var(--gf-blue);
  box-shadow: 0 4px 16px rgba(39, 86, 160, .10);
}
/* Efekt pri prejdení myšou len na zariadeniach s myšou — mobil ho po ťuknutí
   „zasekne" (rámik by ostal modrý). Na dotyk krátka odozva pri stlačení. */
@media (hover: hover) {
  .gf__card:hover {
    border-color: var(--gf-blue);
    box-shadow: 0 4px 16px rgba(39, 86, 160, .10);
  }
}
.gf__card:active { border-color: var(--gf-blue); transform: scale(.985); }

.gf .gf__card,
.gf .gf__card:hover,
.gf .gf__card:focus { color: var(--gf-ink); }

.gf__card-ico { flex: 0 0 34px; width: 34px; height: 34px; }

/* Riadky v kartách sa NElámu (klient) — veľkosti sú zvolené tak, aby sa
   najdlhší riadok zmestil do karty od šírky obrazovky 1200 px. Pod ňou sa
   karty preskladajú pod seba. */
.gf__card-txt { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.gf__card-txt strong { font-weight: 700; font-size: 16px; line-height: 19px; color: var(--gf-ink); }
.gf__card-txt span { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--gf-ink); }

/* ── modrá časť ──────────────────────────────────────────────────────────── */

.gf__main { background: var(--gf-blue); }

.gf__inner {
  display: grid;
  /* 1. stĺpec = presne šírka odznaku ShopRoku, aby lícoval s okrajom kontajnera */
  grid-template-columns: 181px 155fr 255fr 354fr 371fr;
  padding-top: 40px;
  padding-bottom: 46px;
  /* vodoznak „g" — v návrhu je len v šírke obsahu, tmavší než pozadie */
  background: url("img/pattern.svg") center / cover no-repeat;
}

.gf__col--brand { grid-column: 1; padding-top: 35px; display: flex; flex-direction: column; align-items: center; }
.gf__inner > nav:not(.gf__col--shops) { grid-column: 3; }
.gf__col--why   { grid-column: 4; }
.gf__col--shops { grid-column: 5; }

.gf__badge { width: 181px; }

/* nadpis stĺpca + zelená čiara pod ním (rovnaká ako v hero) */
.gf__h {
  /* block + fit-content: čiara má šírku nadpisu, ale pod nadpisom nevzniká
     medzera pre riadok textu, ktorú by nechal inline-block */
  display: block;
  width: fit-content;
  margin-bottom: 13px !important;
  font-weight: 700;
  font-size: 14.2px;
  line-height: 18px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}

.gf__h::after {
  content: "";
  display: block;
  /* Každý nadpis má vo Figme VLASTNÝ vektor čiary nakreslený na svoju dĺžku
     (dodal klient) — rozmery presne podľa SVG, nič sa nenaťahuje. */
  width: 99px;
  height: 7px;
  margin: 5px 0 0 -4px;
  background: url("img/ul-info.svg?v=1") left top / 100% 100% no-repeat;
}

.gf__h--center { margin: 46px auto 21px !important; text-align: center; }

.gf__h--follow::after { width: 121px; height: 9px; margin: 5px 0 0 calc((100% - 121px) / 2); background-image: url("img/ul-follow.svg?v=1"); }
.gf__h--info::after   { width: 99px;  height: 7px; background-image: url("img/ul-info.svg?v=1"); }
.gf__h--why::after    { width: 188px; height: 8px; background-image: url("img/ul-why.svg?v=1"); }
.gf__h--shops::after  { width: 99px;  height: 7px; background-image: url("img/ul-shops.svg?v=1"); }

.gf__list li { font-size: 12.5px; line-height: 21px; color: #fff; }
.gf .gf__list a,
.gf .gf__list a:visited { color: #fff; }
.gf .gf__list a:focus-visible,
.gf .gf__list a:active { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .gf .gf__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }

/* „Prečo nakupovať" — fajka visí vľavo od textu, nadpis zarovnaný s textom */
.gf__col--why .gf__h { margin-left: 31px; }
.gf__list--check li { position: relative; padding-left: 31px; }
.gf__list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;                       /* (riadok 21 − fajka 13) / 2 */
  width: 13px;
  height: 13px;
  /* fajka dodaná klientom (Vector 28.svg), 13 × 13 */
  background: url("img/icon-check.svg?v=2") center / contain no-repeat;
}

/* e-shopy: dva stĺpce, najprv ľavý zhora nadol */
.gf__col--shops .gf__h { margin-left: 43px; }
.gf__shops {
  display: grid;
  grid-template-columns: 216fr 155fr;
  /* 13 e-shopov: ľavý stĺpec 7 (krajiny + partnerské), pravý 6 */
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: 16px;
}
.gf__shops a { display: flex; align-items: center; gap: 21px; font-size: 12.5px; line-height: 22px; }
.gf .gf__shops a,
.gf .gf__shops a:visited,
.gf .gf__shops a:hover { color: #fff; }
.gf .gf__shops a:focus-visible span,
.gf .gf__shops a:active span { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .gf .gf__shops a:hover span { text-decoration: underline; text-underline-offset: 3px; } }
.gf__shops img {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.gf__social { display: flex; gap: 2px; }
.gf__social img { width: 38px; height: 38px; transition: transform .16s ease; }
.gf__social a:focus-visible img { transform: translateY(-2px); }
@media (hover: hover) { .gf__social a:hover img { transform: translateY(-2px); } }
.gf__social a:active img { transform: scale(.92); }

/* ── spodný pás ──────────────────────────────────────────────────────────── */

.gf__bar { background: var(--gf-navy); }

.gf__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Zámerne nízky pás (vo Figme 86 px) — pri plnej výške pôsobil ako druhá
     pätička v pätičke. Je to len ukončenie: copyright + platby. */
  min-height: 54px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.gf__copy { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .92); }

.gf__pay { display: flex; align-items: center; gap: 28px; }
/* pevné šírky + height:auto → na úzkej obrazovke sa logá zmenšia v pomere, nikdy nezväčšia */
.gf__pay img { height: auto; max-width: 100%; }
.gf__pay img:first-child { width: 373px; }   /* výška 22 px */
.gf__pay img:last-child { width: 81px; }

/* Tlačidlo nastavení cookies — úplne vpravo na okraji stránky, „pláva" cez
   hranicu modrej časti a spodného pásu. Len polopriehľadná biela výplň, BEZ
   okraja (klient); pri prejdení myšou sa výplň zosvetlí.
   Poloha: top −44 px → do pásu zasahuje len 12 px a končí nad štítkami platieb
   (tie začínajú 16 px pod hornou hranou pásu). Pri užších oknách (napr. MacBook
   1512 px) by inak vodorovne narazilo do Euroleasingu.
   Téma štýluje <button> po svojom, preto zvýšená špecifickosť a !important. */
.gf__bar { position: relative; }

.gf button.gf__cookie {
  position: absolute;
  top: -44px;
  right: 24px;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .30) !important;
  box-shadow: 0 4px 14px rgba(10, 30, 70, .18) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  line-height: 0 !important;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.gf button.gf__cookie img { width: 32px; height: 32px; }
.gf button.gf__cookie:focus-visible {
  background: rgba(255, 255, 255, .48) !important;
  transform: translateY(-2px);
}
@media (hover: hover) {
  .gf button.gf__cookie:hover {
    background: rgba(255, 255, 255, .48) !important;
    transform: translateY(-2px);
  }
}
.gf button.gf__cookie:active { background: rgba(255, 255, 255, .48) !important; transform: scale(.94); }
.gf button.gf__cookie:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 767px) {
  /* mobil: tlačidlo celé v spodnom páse (vpravo dole, v línii s „Darček"),
     nezasahuje do modrej časti */
  .gf button.gf__cookie { top: auto; bottom: 12px; right: 12px; width: 44px !important; height: 44px !important; }
  .gf button.gf__cookie img { width: 28px; height: 28px; }
}

/* bočné záložky (Heureka, Bezpečný nákup) skryté pri pätičke — prepína skript */
.gk-tab-away { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* plávajúci gombík Complianz v rohu obrazovky — nahradený tlačidlom v pätičke */
#cmplz-manage-consent { display: none !important; }

/* ── menšie obrazovky ────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
  /* 3 karty vedľa seba by boli príliš úzke na texty v jednom riadku */
  .gf__cards { grid-template-columns: minmax(0, 560px); justify-content: center; gap: 12px; }
}

@media (max-width: 1099px) {
  .gf__inner { grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 32px; padding-top: 40px; padding-bottom: 40px; background-size: auto 100%; }
  .gf__col--brand { grid-column: 1 / -1; padding-top: 0; }
  .gf__inner > nav:not(.gf__col--shops) { grid-column: 1; }
  .gf__col--why   { grid-column: 2; }
  .gf__col--shops { grid-column: 1 / -1; }
  .gf__col--shops .gf__h { margin-left: 0; }
  /* e-shopy ostávajú v 2 stĺpcoch ako na desktope — pri 3 stĺpcoch by sa
     poradie pomiešalo (partnerské weby by skončili uprostred zoznamu) */
  .gf__shops { grid-template-columns: 1fr 1fr; max-width: 520px; column-gap: 24px; }
  .gf__shops a { gap: 14px; }

  .gf__bar-inner { flex-direction: column; justify-content: center; text-align: center; padding-top: 22px; padding-bottom: 22px; }
  .gf__pay { flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
}

@media (max-width: 767px) {
  .gf__cards { grid-template-columns: 1fr; gap: 10px; padding-top: 22px; padding-bottom: 20px; }
  /* mobil: menšie písmo aj ikona (bežné mobilné veľkosti — nadpis 14–15 px, popis 12–13 px) */
  .gf__card { justify-content: flex-start; gap: 12px; min-height: 0; padding: 12px 14px; }
  .gf__card-ico { flex-basis: 28px; width: 28px; height: 28px; }
  .gf__card-txt { white-space: normal; }
  .gf__card-txt strong { font-size: 14.5px; line-height: 18px; }
  .gf__card-txt span { font-size: 12.5px; }

  .gf__inner { grid-template-columns: 1fr; row-gap: 32px; padding-top: 36px; padding-bottom: 36px; }
  .gf__inner > nav:not(.gf__col--shops),
  .gf__col--why,
  .gf__col--shops { grid-column: 1; }
  /* na mobile väčšie písmo a vyššie riadky — odkazy sa musia dať trafiť prstom */
  .gf__list li { font-size: 14px; line-height: 28px; }
  .gf__list--check li::before { top: 7.5px; }   /* (28 − 13) / 2 */
  /* odkazy: celý riadok 36 px sa dá ťuknúť prstom (text sám má len 17 px) */
  .gf .gf__list a { display: block; padding: 4px 0; }
  .gf__shops a { font-size: 14px; padding: 5px 0; }
  .gf__shops { row-gap: 4px; }
  /* nadpis „Prečo nakupovať" na mobile zarovno s ostatnými nadpismi */
  .gf__col--why .gf__h { margin-left: 0; }

  .gf__copy { font-size: 13px; }
}

/* ── Mobil: rozbaľovacie zoznamy + výber krajiny ────────────────────────
   „Informácie" a „Prečo nakupovať" sa na mobile rozbaľujú ťuknutím na nadpis
   (skript pridá role=button a aria-expanded). „Naše e-shopy" je na mobile
   tlačidlo s vybranou krajinou; otvorí okno zospodu obrazovky s krajinami
   v 2 stĺpcoch — prvá je vybraná (krajina tohto webu). */

.gf__picker { display: none; }

@media (max-width: 767px) {
  .gf__inner { row-gap: 6px; padding-bottom: 40px; }
  /* spodný pás: miesto dole pre cookie tlačidlo (44 px + 12 px od spodku) */
  .gf__bar-inner { padding-bottom: 68px; }

  /* Informácie / Prečo nakupovať / Naše e-shopy — vľavo s odsadením 16 px
     (ShopRoku a „Sledujte nás" ostávajú na strede) */
  .gf__col--shops .gf__h { margin-left: 16px; }
  .gf__col--brand { margin-bottom: 22px; }
  .gf__col--shops { margin-top: 18px; }

  .gf__col--acc .gf__h {
    position: relative;
    /* celý riadok sa dá ťuknúť; šípka na pravom okraji */
    width: 100%;
    margin-bottom: 0 !important;
    padding: 12px 44px 12px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* šípka vpravo — pri otvorení sa otočí */
  .gf__col--acc .gf__h::before {
    content: "";
    position: absolute;
    right: 16px;
    top: 14px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
  }
  .gf__col--acc.is-open .gf__h::before { transform: rotate(180deg); }
  .gf__col--acc .gf__h:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
  .gf__col--acc .gf__list { display: none; padding: 4px 16px 10px; }
  .gf__col--acc.is-open .gf__list { display: block; }

  .gf__shops { display: none; }
  #gk-footer .gf__picker {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
    font: 400 14px/1.2 var(--gf-font) !important;
    color: #fff !important;
    text-align: left;
    text-transform: none;
    cursor: pointer;
  }
  #gk-footer .gf__picker:active,
  #gk-footer .gf__picker:focus-visible { background: rgba(255, 255, 255, .16) !important; }
  .gf__picker img { flex: none; width: 24px; height: 24px; }
  .gf__picker-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gf__picker-txt strong { font-weight: 700; margin-right: 4px; }
  .gf__picker-chev {
    flex: none;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Produkt na mobile: téma tu má pevné tlačidlo „Pridať do košíka" 10 px od
   spodku obrazovky (52 px vysoké, pod 576 px). Na konci stránky by zakrylo
   spodok pätičky aj cookie tlačidlo — nechávame pod ním voľné miesto. */
@media (max-width: 575.98px) {
  .single-product.sticky-single-add-to-cart-mobile .gf__bar { padding-bottom: 76px; }
  .single-product.sticky-single-add-to-cart-mobile .gf button.gf__cookie { bottom: 88px; }
}

/* výber krajiny: na telefóne cez celú šírku, na širších obrazovkách pevná šírka */
@media (min-width: 576px) and (max-width: 767px) {
  #gk-footer .gf__picker { max-width: 360px; }
}

/* okno s krajinami (otvára sa len z mobilného tlačidla) */
.gf__dlg {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: #fff;
  color: #1d2a44;
  box-shadow: 0 -10px 40px rgba(10, 30, 70, .25);
  overflow: auto;
  overscroll-behavior: contain;
}
.gf__dlg[open] { animation: gf-sheet .22s ease-out; }
@keyframes gf-sheet { from { transform: translateY(30px); opacity: 0; } }
.gf__dlg::backdrop { background: rgba(12, 28, 60, .55); }
html.gk-noscroll { overflow: hidden; }

.gf__dlg-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px 20px;
  background: #fff;
}
.gf .gf__dlg-title {
  margin: 0;
  font: 700 15px/1.2 var(--gf-font);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--gf-blue);
}
#gk-footer .gf__dlg-close {
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #eef2f8 !important;
  box-shadow: none !important;
  font: 400 24px/36px var(--gf-font) !important;
  color: var(--gf-blue) !important;
  cursor: pointer;
}
.gf .gf__dlg-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 4px 14px calc(18px + env(safe-area-inset-bottom));
  list-style: none;
}
#gk-footer .gf__dlg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 9px 10px !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  font: inherit !important;
  color: #1d2a44 !important;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}
#gk-footer .gf__dlg-item:active,
#gk-footer .gf__dlg-item:focus-visible { border-color: #b7c4da !important; }
@media (hover: hover) { #gk-footer .gf__dlg-item:hover { border-color: #b7c4da !important; } }
/* vybraná krajina — zelený rámik a fajka */
#gk-footer .gf__dlg-item.is-current { border-color: var(--gf-green) !important; background: #f2f9f0 !important; box-shadow: inset 0 0 0 1px var(--gf-green) !important; }
#gk-footer .gf__dlg-item { position: relative; }
.gf__dlg-item.is-current::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 12px;
  height: 12px;
  background: url("img/icon-check.svg?v=2") center / contain no-repeat;
}
.gf__dlg-item img { flex: none; width: 26px; height: 26px; }
.gf__dlg-txt { display: flex; flex-direction: column; min-width: 0; }
.gf__dlg-name { font: 700 13.5px/1.25 var(--gf-font); }
.gf__dlg-dom { overflow: hidden; font: 400 11.5px/1.3 var(--gf-font); color: #7a8599; text-overflow: ellipsis; white-space: nowrap; }

/* Štítok nad novou pätičkou v náhľade pre administrátorov — aby bolo pri
   porovnávaní jasné, ktorá je ktorá (stará pätička je vtedy nad ním). */
.gf-preview-label {
  margin: 0;
  padding: 10px 20px;
  background: #fff4c2;
  border-top: 3px solid #f0b400;
  font: 700 14px/1.4 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #5a4500;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gf__card, .gf__social img { transition: none; }
}