/* =============================================================
   nutiva-paticka.css
   verzia: 1.3   (drz ju rovnu ?v= v Zahlavi)
   changelog:
     1.3 (2026-08-20) — logo v prvom stlpci je vynate z toku a posadene nad stlpec,
         takze vsetky styri nadpisy zacinaju na jednej linke; logo zmensene na 140 px,
         medzera medzi riadkami mriezky 44 -> 68 px.
     1.2 (2026-08-20) — novy orezany PNG (3222x203, biele pozadie) splyva so sivou
         cez mix-blend-mode: multiply; desktop ma jeden riadok "Doprava a platba"
         + pas log + "Sledujte nas" s ikonkami vpravo; na mobile sa pas deli
         na dva riadky po styroch logach.
     1.1 (2026-08-20) — novy jednoradovy PNG banner dopravcov (3280x380, priehladny):
         zruseny rez povodneho trojradoveho obrazka, orez prazdnych okrajov cez
         aspect-ratio + object-fit, na mobile sa pas posuva do strany.
     1.0 (2026-08-20) — V11 redizajn paticky: mriezka 4 stlpcov na desktope,
         kontakt s ikonami a hodinami, stlpec Velkoobchod + Reklamacie,
         logá dopravcov v jednom pase, socialne ikonky zo sablonoveho
         zoznamu odkazov, akordeon na mobile.
   Nacitava sa AZ ZA nutiva-custom.css — pri zhode pravidiel musi vyhrat tento subor.
   Globalne tokeny (farby celeho e-shopu) sem NEPATRIA, tie ostavaju v nutiva-custom.css.
   ============================================================= */

/* ============================================================
   V11 PATICKA
   Desktop: 4 stlpce (kontakt | Vsetko o nakupe | Informacie pre vas | Velkoobchod)
   Mobil:   akordeon + kompaktny rezim
   ============================================================ */

#footer{
  --fg:#1e1e1c; --mut:#5f5f5a; --line:#e2e2de; --card:#ffffff; --acc:#61971e;
  background:#F6F6F6 !important;
  color:var(--fg) !important;
  padding:56px 0 0 !important;
  margin-top:56px !important;
  border-top:1px solid var(--line) !important;
}
#footer a{color:var(--fg)}

/* ---------- mriezka ---------- */
#footer .custom-footer{
  display:grid !important; align-items:start;
  grid-template-columns:1.1fr .92fr .92fr 1.06fr;
  grid-template-areas:
    "news news news news"
    "brand colA colB vo"
    "pay  pay  pay  pay";
  gap:68px 32px;   /* vacsia medzera medzi riadkami — v nej sedi logo nad stlpcom kontaktu */
}
#footer .custom-footer > *{width:auto !important;max-width:none !important;margin:0 !important;padding:0 !important;float:none !important;min-width:0 !important}
#footer .custom-footer__newsletter{grid-area:news}
#footer .site-name{grid-area:brand}
#footer .custom-footer__articles{grid-area:colA}
#footer .frank-col2{grid-area:colB}
#footer .custom-footer__vo{grid-area:vo}
#footer [class*="custom-footer__banner"]{grid-area:pay}

/* ---------- nadpisy stlpcov (zelena ciarka drzi sablona cez ::before) ---------- */
#footer .pageElement__heading{
  font-size:15px !important;font-weight:700 !important;letter-spacing:0 !important;
  text-transform:none !important;margin:0 0 20px !important;padding:0 !important;
  color:var(--fg) !important;border-bottom:0 !important;
}
#footer .pageElement__heading::before{margin-left:0 !important;margin-right:auto !important;left:0 !important;transform:none !important}

/* ---------- zoznamy odkazov ---------- */
#footer .custom-footer__articles ul{margin:0 !important;padding:0 !important;list-style:none !important;columns:1}
#footer .custom-footer__articles li{margin:0 0 13px !important;padding:0 !important;list-style:none !important}
#footer .custom-footer__articles li::before{display:none !important}
#footer .custom-footer__articles a{font-size:15px !important;line-height:1.35 !important;color:var(--mut) !important;text-decoration:none !important}
#footer .custom-footer__articles a:hover{color:var(--fg) !important;text-decoration:underline !important}

/* ---------- stlpec 1: logo + Zakaznicka podpora ----------
   Logo je vyňaté z toku a posadené NAD stlpec, do medzery pod newsletterom.
   Vdaka tomu zacina nadpis "Zakaznicka podpora:" na tej istej linke ako nadpisy
   ostatnych troch stlpcov — bez toho ho logo tlacilo o 91 px nizsie. */
#footer .site-name{background:none !important;display:flex !important;flex-direction:column;gap:20px;position:relative}
#footer .site-name .inner-box{
  background:none !important;border:0 !important;padding:0 !important;margin:0 !important;
  display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:18px !important;text-align:left !important;
}
/* sablona kladie cez cely blok zelenu poloprieshladnu vrstvu — preto vyzeral kontakt zeleny */
#footer .site-name .inner-box::before{display:none !important}
#footer .site-name .inner-box > a{
  position:absolute !important;left:0;bottom:calc(100% + 12px);margin:0 !important;align-self:flex-start}
#footer .site-name img{max-width:140px !important;width:auto !important;height:auto !important}

/* nadpis "Zakaznicka podpora:" dostane rovnaku zelenu ciarku ako ostatne nadpisy */
#footer .site-name strong{
  display:block !important;position:relative !important;
  font-size:15px !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--fg) !important;margin:0 0 20px !important;padding:0 !important;border-bottom:0 !important;
}
#footer .site-name strong::before{
  content:"" !important;position:absolute !important;left:0 !important;bottom:-13px !important;top:auto !important;
  display:block !important;width:40px !important;height:2px !important;background:var(--acc) !important;
}

/* ---------- kontaktne riadky (podpora aj velkoobchod maju rovnaku gramatiku) ---------- */
#footer .site-name .contacts,
#footer .custom-footer__vo .contacts{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:16px !important;margin:0 !important;width:auto !important}
#footer .site-name .contacts a,
#footer .custom-footer__vo .contacts a{
  display:flex !important;align-items:center;justify-content:flex-start !important;gap:12px;width:auto !important;
  padding:0 !important;text-indent:0 !important;background-image:none !important;
  text-decoration:none !important;color:var(--fg) !important;
}
#footer .site-name .contacts a span,
#footer .custom-footer__vo .contacts a span{padding:0 !important;margin:0 !important;text-indent:0 !important}
#footer .site-name .contacts a::before,
#footer .custom-footer__vo .contacts a::before{
  content:"";width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background-color:#fff !important;border:1px solid #e0e0dc !important;margin:0 !important;
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
}
#footer .site-name .project-phone::before,
#footer .custom-footer__vo .project-phone::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") !important;
}
#footer .site-name .project-email::before,
#footer .custom-footer__vo .project-email::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") !important;
}
#footer .site-name .project-phone span{font-size:19px !important;font-weight:700 !important;line-height:1.2}
#footer .site-name .project-email span{font-size:15px !important;line-height:1.2}
#footer .custom-footer__vo .project-phone span{font-size:17px !important;font-weight:700 !important;line-height:1.2}
#footer .custom-footer__vo .project-email span{font-size:15px !important;line-height:1.2}

/* otvaracie hodiny presne pod cislom (50px = ikonka 38 + medzera 12) */
#footer .site-name .project-phone{flex-wrap:wrap !important}
#footer .site-name .project-phone::after{
  content:"Po–Pi 9:00–16:00";flex-basis:100%;padding-left:50px !important;margin-top:4px;
  font-size:13px !important;font-weight:400 !important;color:var(--mut) !important;
}

/* ---------- stlpec 4: Velkoobchod + Reklamacie ---------- */
#footer .custom-footer__vo{display:flex;flex-direction:column;gap:16px}
#footer .custom-footer__vo .frank-h2{margin-top:10px !important}

/* ---------- logo EU / Plan obnovy (::after z nutiva-custom.css) ---------- */
#footer .site-name::after{margin-top:0 !important;height:46px !important;mix-blend-mode:multiply;order:3}

/* ---------- newsletter ---------- */
#footer .custom-footer__newsletter{
  background:var(--card) !important;border:1px solid var(--line);border-radius:16px;
  padding:26px 28px !important;align-items:flex-start !important;gap:24px;
}
#footer .custom-footer__newsletter .newsletter-header{margin:0 !important;padding:0 !important}
#footer .custom-footer__newsletter .pageElement__heading{
  font-size:22px !important;line-height:1.25 !important;margin:0 0 8px !important;
}
#footer .custom-footer__newsletter .pageElement__heading::before{display:none !important}
#footer .custom-footer__newsletter .newsletter-header p{font-size:14px !important;color:var(--mut) !important;margin:0 !important;line-height:1.45}
#footer .custom-footer__newsletter form{margin:3px 0 0 !important;padding:0 !important}
#footer .custom-footer__newsletter form fieldset{flex-wrap:wrap !important}
/* suhlas: CSS ho iba stypuje, vytvara ho admin (Nastavenia -> Zabezpecenie obchodu -> Nastavenie suhlasov) */
#footer .custom-footer__newsletter .consents{width:100%;flex-basis:100%;margin:10px 0 0 !important;padding:0 !important}
#footer .custom-footer__newsletter .consents p.label,
#footer .custom-footer__newsletter .consents label{font-size:12.5px !important;font-weight:400 !important;color:var(--mut) !important;margin:0 !important;line-height:1.4}
#footer .custom-footer__newsletter .consents a{color:var(--fg) !important;text-decoration:underline !important}

/* ---------- pas dopravcov a platieb + socialne siete ----------
   Banner je JEDEN orezany obrazok so vsetkymi logami v jednom rade
   (nutiva_dopravcovia_sk_3.png, 3222 x 203 px, BIELE nepriehladne pozadie).
   Biela sa schova cez mix-blend-mode: multiply — na svetlom pozadi splynie.
   POZOR: multiply funguje len na svetlom pozadi. Na tmavej paticke by logá zozral
   a obrazok by musel mat priehladne pozadie.
   Na desktope je to jeden riadok: nadpis, pas log, a vpravo Sledujte nas + ikonky. */
#footer [class*="custom-footer__banner"]{
  border-top:1px solid var(--line);padding-top:14px !important;min-width:0;
  display:flex !important;align-items:center;gap:28px;flex-wrap:wrap;
}
#footer [class*="custom-footer__banner"] .frank-acc-head{
  display:block !important;margin:0 !important;padding:0 !important;
  font-size:14px !important;font-weight:700 !important;white-space:nowrap;color:var(--fg) !important}
#footer [class*="custom-footer__banner"] .frank-acc-head::before{display:none !important}
/* logo EU presunute na uplny spodok — pouzije sa iba na mobile */
#footer .frank-eu{display:none}
/* obal akordeonu na desktope nema tvorit vlastnu vrstvu, nech je pas priamo v riadku */
#footer [class*="custom-footer__banner"] .frank-acc-body{display:contents !important}
#footer [class*="custom-footer__banner"] .banner{
  background:none !important;border:0 !important;padding:0 !important;
  display:block !important;flex:0 1 700px !important;width:auto !important;max-width:100% !important}
#footer [class*="custom-footer__banner"] .banner-wrapper{display:block !important;margin:0 !important;gap:0 !important;width:100% !important;max-width:100% !important}
#footer [class*="custom-footer__banner"] img{
  display:block !important;width:700px !important;max-width:100% !important;height:auto !important;
  aspect-ratio:auto !important;object-fit:fill !important;mix-blend-mode:multiply !important;
}
#footer [class*="custom-footer__banner"] .footer-links-icons{
  flex:0 0 auto !important;width:auto !important;max-width:none !important;margin:0 0 0 auto !important;padding:0 !important}

/* ---------- socialne ikonky (sablonovy skryty zoznam odkazov) ---------- */
#footer .footer-links-icons{display:block !important;padding:0 !important;width:auto !important;max-width:none !important}
#footer .footer-links{display:flex !important;flex-wrap:wrap;align-items:center;gap:12px;margin:0 !important;padding:0 !important;list-style:none !important}
/* popis "Sledujte nas" je text vlozeny CSS-om, v jednom riadku s ikonkami */
#footer .footer-links::before{
  content:"Sledujte nás";font-size:14px;font-weight:700;color:var(--fg);white-space:nowrap;margin:0}
#footer .footer-link{list-style:none !important;margin:0 !important;padding:0 !important}
#footer .footer-link::before{display:none !important}
#footer .footer-link a{font-size:13px !important;color:var(--mut) !important;text-decoration:none !important}
#footer .footer-link a[href*="facebook.com"],
#footer .footer-link a[href*="instagram.com"]{
  display:block !important;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:19px 19px;
  font-size:0 !important;line-height:0 !important;color:transparent !important;overflow:hidden;
}
#footer .footer-link a[href*="facebook.com"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z'/%3E%3C/svg%3E")}
#footer .footer-link a[href*="instagram.com"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.9'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='%23111' stroke='none'/%3E%3C/svg%3E")}
#footer .footer-link a[href*="facebook.com"]:hover,
#footer .footer-link a[href*="instagram.com"]:hover{border-color:#558300;background-color:#eef6e2}
/* v pase ostavaju iba FB a IG, ostatne odkazy sa skryju */
#footer .footer-links li:not(:has(a[href*="facebook.com"])):not(:has(a[href*="instagram.com"])){display:none}

/* ---------- spodny pruh ---------- */
#footer .footer-bottom{
  border-top:1px solid var(--line) !important;margin-top:44px !important;padding:20px 0 !important;
  display:flex !important;align-items:center;justify-content:flex-start !important;gap:18px;flex-wrap:wrap;
}
#footer .footer-bottom > *{flex:0 0 auto !important}
#footer .footer-bottom .copyright{order:1 !important;margin:0 auto 0 0 !important;width:auto !important;font-size:13px !important;color:var(--mut) !important}
#footer .footer-bottom #signature{order:2 !important;width:auto !important;margin:0 !important}
#footer .footer-bottom .back-to-top{order:3 !important}
/* ikonky uz nie su v spodnom pruhu, ale v riadku s dopravou — keby tam predsa zostali, skryjeme ich */
#footer .footer-bottom .footer-links-icons{display:none !important}

/* ============================================================
   MOBIL — akordeon + kompaktny rezim
   ============================================================ */
@media (max-width:768px){
  #footer{--pk:.92;padding:32px 0 0 !important;margin-top:32px !important}
  #footer .container{padding-left:16px !important;padding-right:16px !important}

  /* sablona centruje celu paticku — vratime doprava... teda dolava */
  #footer .custom-footer,#footer .custom-footer *,
  #footer .footer-bottom,#footer .footer-bottom *{text-align:left !important}

  /* poradie na mobile: newsletter, kontakt, velkoobchod, akordeon (odkazy + doprava), logo EU */
  #footer .custom-footer{
    grid-template-columns:1fr !important;
    grid-template-areas:"news" "brand" "vo" "colA" "colB" "pay" "eu" !important;
    gap:0 !important;
  }
  /* socialne ikonky ostavaju v bloku dopravy, ale POD akordeonom — nie v nom */
  #footer [class*="custom-footer__banner"] .footer-links-icons{margin:18px 0 4px !important}
  #footer .footer-links::before{
    display:block;width:100%;
    font-size:13px;letter-spacing:.03em;text-transform:uppercase;margin:0 0 12px;
  }
  #footer .footer-links{gap:12px !important}
  #footer .footer-link a[href*="facebook.com"],
  #footer .footer-link a[href*="instagram.com"]{
    width:52px !important;height:52px !important;border-radius:14px !important;
    background-size:26px 26px !important;border-color:#d8d8d2 !important;
  }
  #footer .frank-eu{
    display:block !important;grid-area:eu;height:44px;margin:18px 0 0;
    background-repeat:no-repeat;background-position:left center;background-size:contain;mix-blend-mode:multiply;
  }
  #footer .site-name::after{display:none !important}   /* povodne logo EU pri kontakte na mobile skryjeme */

  /* kontaktne riadky zarovnane dolava (sablona ich centruje) */
  #footer .site-name .contacts a,#footer .custom-footer__vo .contacts a{justify-content:flex-start !important;align-self:flex-start !important}
  #footer .custom-footer__newsletter{margin-bottom:24px !important;padding:16px !important;gap:12px}
  #footer .custom-footer__newsletter .pageElement__heading{font-size:19px !important}
  #footer .custom-footer__newsletter .newsletter-header p{display:none !important}   /* kompaktny rezim */

  #footer .site-name{margin-bottom:20px !important;gap:16px}
  /* na mobile logo nevisi nad stlpcom, vratime ho do toku (aj ked ho kompaktny rezim skryva) */
  #footer .site-name .inner-box > a{position:static !important;bottom:auto !important}
  #footer .site-name .inner-box > a{display:none !important}                          /* kompaktny rezim: logo je v hlavicke */
  #footer .site-name .contacts,#footer .custom-footer__vo .contacts{gap:12px !important}
  #footer .site-name .contacts a::before,#footer .custom-footer__vo .contacts a::before{width:32px !important;height:32px !important;flex:0 0 32px !important;background-size:15px 15px !important}
  #footer .site-name .project-phone::after{padding-left:44px !important}
  #footer .site-name .project-phone span,#footer .custom-footer__vo .project-phone span{font-size:17px !important}

  #footer .pageElement__heading,#footer .site-name strong{font-size:13px !important;margin-bottom:14px !important}

  /* Velkoobchod + Reklamacie NEJDU do akordeonu — ostavaju otvorene hned pod podporou */
  #footer .custom-footer__vo{border-top:0 !important;padding:0 !important;margin:0 0 20px !important;display:block !important}
  #footer .custom-footer__vo .frank-acc-head{pointer-events:none;padding-right:0 !important;margin:0 0 14px !important}
  #footer .custom-footer__vo .frank-acc-head::after{display:none !important}
  #footer .custom-footer__vo .frank-acc-body{max-height:none !important;overflow:visible !important;padding-top:0 !important}
  #footer .custom-footer__vo .frank-h2{margin-top:16px !important}

  /* akordeon — iba dva stlpce odkazov, riadky ako sivy pas so sipkou vpravo (vzor Grizly) */
  #footer .custom-footer__articles{border-top:0 !important;padding:0 !important;margin:0 0 8px !important;display:block !important}
  #footer .frank-acc-head{cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}
  #footer .frank-acc-head::before{display:none !important}
  #footer .custom-footer__articles .frank-acc-head{
    background:#ECECE8;border-radius:10px;margin:0 !important;
    padding:14px 44px 14px 16px !important;font-size:14px !important;
  }
  #footer .frank-acc-head::after{
    content:"";position:absolute;right:18px;top:19px;width:9px;height:9px;
    border-right:2px solid var(--fg);border-bottom:2px solid var(--fg);
    transform:rotate(45deg);transition:transform .2s ease;
  }
  #footer .frank-acc-head.is-open::after{transform:rotate(-135deg);top:23px}
  #footer .frank-acc-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
  #footer .custom-footer__articles .frank-acc-body.is-open{max-height:640px;padding:14px 16px 4px !important}

  /* doprava a platba tiez do akordeonu (vzor Grizly) */
  #footer [class*="custom-footer__banner"]{
    display:block !important;border-top:0 !important;padding:0 !important;margin:0 0 8px !important}
  #footer [class*="custom-footer__banner"] .frank-acc-head{
    display:block !important;background:#ECECE8;border-radius:10px;margin:0 !important;
    padding:14px 44px 14px 16px !important;font-size:14px !important;white-space:normal;
  }
  #footer [class*="custom-footer__banner"] .frank-acc-body{display:block !important}
  #footer [class*="custom-footer__banner"] .frank-acc-body.is-open{max-height:640px;padding:14px 0 4px !important}
  /* ---- ROZDELENIE PASU NA DVA RIADKY PO STYROCH LOGACH ----
     Osem log vedla seba sa do 390 px citatelne nezmesti. Obrazok preto rezeme
     na dve polovice a klademe ich pod seba. Cisla nizsie platia PRE KONKRETNY
     SUBOR nutiva_dopravcovia_sk_3.png (3222 x 203 px, 8 log, medzera medzi
     4. a 5. logom je na x = 1548). Ked sa obrazok vymeni, treba ich prepocitat:
       riadok 1 = 0..1548  -> pomer 1548/203, background-size 3222/1548 = 208.14 %
       riadok 2 = 1548..3222 -> pomer 1674/203, background-size 3222/1674 = 192.47 %
     Adresu obrazka doplni JS do premennej --pay-img (lisi sa na SK a CZ). */
  #footer [class*="custom-footer__banner"] .banner{width:auto !important;flex:none !important;overflow:visible !important}
  #footer [class*="custom-footer__banner"] img{display:none !important}
  #footer [class*="custom-footer__banner"] .banner-wrapper{
    display:flex !important;flex-direction:column;gap:12px;align-items:center;width:100% !important}
  #footer [class*="custom-footer__banner"] .banner-wrapper::before,
  #footer [class*="custom-footer__banner"] .banner-wrapper::after{
    content:"" !important;display:block !important;width:100%;max-width:330px;
    background-image:var(--pay-img);background-repeat:no-repeat;mix-blend-mode:multiply}
  #footer [class*="custom-footer__banner"] .banner-wrapper::before{
    aspect-ratio:1548/203;background-size:208.14% auto;background-position:0% 50%}
  #footer [class*="custom-footer__banner"] .banner-wrapper::after{
    aspect-ratio:1674/203;background-size:192.47% auto;background-position:100% 50%}

  /* spodny pruh do jedneho riadku */
  #footer .footer-bottom{padding:12px 0 !important;margin-top:24px !important;gap:6px !important;flex-direction:row !important;align-items:center !important}
  #footer .footer-bottom .copyright{font-size:11.5px !important}
  #footer .footer-bottom .podpis{font-size:11px !important}
  #footer .footer-bottom #signature{display:none}
  #footer .footer-bottom .back-to-top{margin-left:auto !important}

}