/* ==========================================================================
   SVĚT PRO ŽIVOT — site shell v5 (SPZ-0022, 2026-09-20)
   Posun proti v4: chladná modrozelená #355443 + tmavá horní lišta
   -> TEPLÁ OLIVOVÁ #37411F/#606A47 + TERAKOTA #B86B48 + světlá oat lišta.
   Hodnoty odečtené z pixelů SPZ_GRAPHIC_DIRECTION_FINAL_20260920.png.
   Nasazeno jako externí soubor (HTML kódy mají tvrdý limit ~8192 znaků).
   ========================================================================== */
:root{
  /* --- přepis Shoptet theme proměnných u zdroje: aby se nikde nevrátila
         modrá ani stará studená zelená (šablona je používá globálně) --- */
  --color-primary:#37411F;--color-primary-h:74;--color-primary-s:35%;--color-primary-l:19%;
  --color-primary-hover:#262D14;--color-primary-hover-h:76;--color-primary-hover-s:38%;--color-primary-hover-l:13%;
  --color-secondary:#B86B48;--color-secondary-h:19;--color-secondary-s:44%;--color-secondary-l:50%;
  --color-tertiary:#606A47;--color-tertiary-h:73;--color-tertiary-s:20%;--color-tertiary-l:35%;
  --color-tertiary-hover:#4A5336;--color-tertiary-hover-h:75;--color-tertiary-hover-s:21%;--color-tertiary-hover-l:27%;
  --color-conversion:#B86B48;--color-conversion-hover:#9E5939;

  /* --- plochy --- */
  --spz-bg:#FAF7F3;--spz-surface:#fff;--spz-cream:#F4EEE4;--spz-oat:#EAE5DC;
  --spz-peach:#EFD9C7;--spz-sage-l:#E7EADD;
  /* --- zeleň --- */
  --spz-forest:#37411F;--spz-forest-d:#262D14;--spz-olive:#606A47;--spz-olive-d:#4A5336;--spz-sage:#A9B295;
  /* --- terakota --- */
  --spz-accent:#B86B48;--spz-accent-d:#9E5939;--spz-accent-l:#CF9673;
  /* --- text --- */
  --spz-text:#2B3122;--spz-muted:#6B6F5E;--spz-border:#DFD8CB;--spz-border-s:#EAE4D9;--spz-on-dark:#EDEFE4;
  /* --- tvar --- */
  --spz-r-sm:8px;--spz-r:12px;--spz-r-lg:20px;--spz-pill:999px;
  --spz-sh:0 1px 2px rgba(43,49,34,.04),0 10px 26px rgba(43,49,34,.06);
  --spz-sh-h:0 2px 6px rgba(43,49,34,.06),0 16px 38px rgba(43,49,34,.10);
  --spz-focus:0 0 0 3px rgba(184,107,72,.34);
  --spz-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --spz-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --spz-script:'Caveat',cursive;
  --spz-wrap:1280px;
}

/* --- base --------------------------------------------------------------- */
body{color:var(--spz-text);font-family:var(--spz-sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;background:var(--spz-bg)}
h1,.h1{font-family:var(--spz-serif);color:var(--spz-forest);line-height:1.08;letter-spacing:-.012em;font-weight:600}
h2,h3,h4,.h2{font-family:var(--spz-serif);color:var(--spz-forest);line-height:1.2;letter-spacing:-.008em;font-weight:600}
a{color:var(--spz-forest);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--spz-accent)}
:focus-visible{outline:none;box-shadow:var(--spz-focus);border-radius:var(--spz-r-sm)}
img{max-width:100%}
::selection{background:rgba(184,107,72,.18)}

/* --- horní utility lišta: světlá oat, ne tmavá ------------------------- */
.top-navigation-bar{background:var(--spz-oat);color:var(--spz-forest);font-size:12.5px;
  font-family:var(--spz-sans);letter-spacing:.005em;border-bottom:1px solid rgba(55,65,31,.07)}
.top-navigation-bar .top-navigation-contacts,.top-navigation-bar .top-navigation-menu,
.top-navigation-bar .top-navigation-tools,.top-navigation-bar-menu{background:transparent}
.top-navigation-bar a,.top-navigation-bar button,.top-navigation-bar .top-nav-button,
.top-navigation-bar .top-nav-button span,.top-navigation-bar span{color:var(--spz-forest);text-decoration:none}
.top-navigation-bar a:hover,.top-navigation-bar button:hover,
.top-navigation-bar .top-nav-button:hover span{color:var(--spz-accent)}
.top-navigation-contacts a.project-phone,.top-navigation-contacts a.project-phone span{
  color:var(--spz-forest);font-weight:700}
.top-navigation-bar .dropdown-menu,.top-navigation-bar-menu .dropdown-menu{background:var(--spz-surface)}

/* --- hlavička: teplá bílá ---------------------------------------------- */
#header{background:var(--spz-bg);border-bottom:1px solid var(--spz-border-s);color:var(--spz-text)}
#header,#header a,#header button,#header .cart-price,#header span{color:var(--spz-text)}
.header-top{padding-top:14px;padding-bottom:14px}

/* --- logo: skutečný asset šablony, žádná CSS náhražka -------------------
   Kanonický soubor je /user/logos/logo_spz_v5.png nastavený v Editoru vzhledu,
   takže se vykresluje nativní <img> (a nese alt text). v4 kreslila logo přes
   ::before/::after (ikona + text "Svět pro život") — oba pseudo-prvky musí
   zůstat vypnuté, jinak by se logo zobrazilo dvakrát. */
.site-name a{display:inline-flex!important;align-items:center!important;text-decoration:none}
.site-name a::before,.site-name a::after{content:none!important;display:none!important}
.site-name img{display:block!important;height:56px;width:auto;max-width:100%}
@media(max-width:991px){.site-name img{height:46px}}
@media(max-width:520px){.site-name img{height:38px}}

/* --- vyhledávání: měkký rámeček + olivové tlačítko -------------------- */
.search .search-input,.search input[type=text]{
  height:50px;font-size:16px;font-family:var(--spz-sans);border:1.5px solid var(--spz-border);
  border-right:0;border-radius:var(--spz-r) 0 0 var(--spz-r);padding-left:18px;
  background:var(--spz-surface);color:var(--spz-text)}
.search .search-input::placeholder{color:#9AA08C}
.search .search-input:focus{border-color:var(--spz-accent);box-shadow:none;outline:none}
.search .btn{height:50px;min-width:62px;font-size:14px;font-weight:600;letter-spacing:.02em;
  border-radius:0 var(--spz-r) var(--spz-r) 0}
.btn.btn.btn-default.search-button,.search .btn.btn-default{
  background:var(--spz-olive)!important;border-color:var(--spz-olive)!important;color:#fff!important}
.btn.btn.btn-default.search-button:hover,.search .btn.btn-default:hover{
  background:var(--spz-olive-d)!important;border-color:var(--spz-olive-d)!important}

/* --- navigace: světlá lišta s olivovým textem, ne zelený pruh ---------- */
#navigation{background:var(--spz-bg);border-bottom:1px solid var(--spz-border-s)}
.navigation-in.menu,.navigation-in.menu.fitted{background:var(--spz-bg)!important}
/* POZOR na dvě věci najednou:
   (1) šablona po načtení měří šířku položek ("fitted" menu) a při přetečení
       sbalí celé desktopové menu do hamburgeru — proto se velikost písma ani
       svislý padding oproti v4 nezvětšuje (14,5px / 12px), v5 mění jen barvy;
   (2) v4 měla `flex-wrap:nowrap!important` + `flex:0 0 auto`. 13 položek je
       dohromady 2253 px, kontejner má 1178–1418 px, takže poslední tři
       (Káva a funkční nápoje / Podle cíle / Zdravá výživa) `#navigation`
       svým `overflow-x:hidden` ořízl a na desktopu byly nedostupné.
       nowrap je pryč — menu se smí zalomit a všechny položky jsou vidět.
       Vodorovný padding odkazů zmenšen z 20 na 13 px (ušetří ~180 px). */
.navigation-in>ul{display:flex;flex-wrap:wrap}
/* Šablona dává #navigation pevnou výšku 32 px a .navigation-in absolutní
   pozici, takže druhý řádek zalomeného menu se celý ořízl (ověřeno živě).
   Na desktopu proto .navigation-in vrátíme do toku a výšku necháme dopočítat.
   Jen nad 992 px — pod tím je .navigation-in mobilní off-canvas panel
   odsunutý daleko mimo viewport a ten musí #navigation dál ořezávat. */
@media(min-width:992px){
  #navigation{height:auto!important;min-height:0}
  .navigation-in.menu,.navigation-in.menu.fitted{position:static!important}
}
.navigation-in>ul>li>a{white-space:nowrap;color:var(--spz-forest)!important}
.navigation-in ul li a{font-family:var(--spz-sans);font-size:14.5px;font-weight:600;letter-spacing:.01em}
.navigation-in>ul>li>a{padding:12px 13px;position:relative}
.navigation-in>ul>li>a::after{content:"";position:absolute;left:9px;right:9px;bottom:5px;height:2px;
  border-radius:2px;background:var(--spz-accent);opacity:0;transition:opacity .16s ease}
.navigation-in>ul>li>a:hover,.navigation-in>ul>li.exp>a{background:transparent;color:var(--spz-accent)!important}
.navigation-in>ul>li>a:hover::after,.navigation-in>ul>li.exp>a::after{opacity:1}
.menu-level-2{border-top:3px solid var(--spz-accent);box-shadow:var(--spz-sh);background:var(--spz-surface);
  border-radius:0 0 var(--spz-r) var(--spz-r)}
.menu-level-2 a{color:var(--spz-text)}
.navigation-in>ul>li:has(>a[href="/zdrava-vyziva/"]){order:-1}
.navigation-in>ul>li:has(>a[href="/zdrava-vyziva/"])>a{font-weight:700}
.navigation-in>ul>li:has(>a[href="/kontakty/"]),
.navigation-in>ul>li:has(>a[href="/obchodni-podminky/"]){display:none!important}

/* --- cart badge --------------------------------------------------------- */
.btn-icon.cart-count i,.cart-count i,a.cart-count i{background:var(--spz-olive)!important;color:#fff!important}

/* --- tlačítka: CTA = terakota, sekundární = olivová -------------------- */
.btn{border-radius:var(--spz-pill);font-family:var(--spz-sans);font-weight:600;letter-spacing:.005em}
.search .btn{border-radius:0 var(--spz-r) var(--spz-r) 0}
.btn-conversion,.btn-primary{background:var(--spz-accent);border-color:var(--spz-accent)}
.btn-conversion:hover,.btn-primary:hover,.btn-conversion:focus,.btn-primary:focus{
  background:var(--spz-accent-d);border-color:var(--spz-accent-d)}
.btn-cart.btn-cart.btn-cart,.btn-conversion.btn-conversion.btn-conversion{
  background-color:var(--spz-accent)!important;background:var(--spz-accent)!important;border-color:var(--spz-accent)!important}
.btn-cart.btn-cart.btn-cart:hover,.btn-conversion.btn-conversion.btn-conversion:hover{
  background-color:var(--spz-accent-d)!important;background:var(--spz-accent-d)!important;border-color:var(--spz-accent-d)!important}
.btn-default{background:var(--spz-surface);border-color:var(--spz-border);color:var(--spz-forest)}
.btn-default:hover{border-color:var(--spz-olive);background:var(--spz-cream)}

/* --- formuláře ---------------------------------------------------------- */
.form-control,input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  min-height:48px;font-family:var(--spz-sans);font-size:16px;border:1.5px solid var(--spz-border);
  border-radius:var(--spz-r-sm)}
.form-control:focus,input:focus,textarea:focus,select:focus{border-color:var(--spz-accent);box-shadow:none;outline:none}
label{font-weight:600;color:var(--spz-forest)}
input[type=checkbox],input[type=radio]{accent-color:var(--spz-olive)}

/* --- produktová karta: hodně bílé, měkké rohy -------------------------- */
.product{border:1px solid var(--spz-border-s);border-radius:var(--spz-r);background:var(--spz-surface);
  transition:border-color .16s ease,box-shadow .16s ease;box-shadow:none}
.product:hover{border-color:var(--spz-accent-l);box-shadow:var(--spz-sh)}
.product .image,.product .p-image,.product picture{background:var(--spz-surface);border-radius:var(--spz-r-sm)}
.product .name{font-family:var(--spz-sans);font-size:15.5px;line-height:1.4;font-weight:600;color:var(--spz-text)}
.product .p-tools .btn{border-radius:var(--spz-pill)}
.price-final,.price-final strong{font-family:var(--spz-sans);color:var(--spz-forest);font-weight:700}
.flag,.flags .flag{border-radius:var(--spz-pill);font-weight:700;letter-spacing:.02em;font-size:10.5px;
  font-family:var(--spz-sans);padding-left:9px;padding-right:9px}

/* --- kategorie ---------------------------------------------------------- */
.category-perex,.subcategories{border-radius:var(--spz-r-lg)}
.subcategories li a{border-radius:var(--spz-r);border:1px solid var(--spz-border-s);background:var(--spz-surface)}
.subcategories li a:hover{border-color:var(--spz-accent-l);background:var(--spz-cream)}
.subcategories li a img{background:var(--spz-cream);border-radius:var(--spz-r-sm);color:transparent;font-size:0}
.subcategories li a img:not([src]),.subcategories li a img[src=""]{visibility:hidden;position:relative}
.subcategories li a img:not([src])::after,.subcategories li a img[src=""]::after{
  content:"";visibility:visible;position:absolute;inset:0;background:var(--spz-cream);border-radius:var(--spz-r-sm)}

/* --- levý sloupec / boxy ------------------------------------------------ */
.sidebar h4,.box h4,.sidebar .h4{font-family:var(--spz-sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--spz-muted)}

/* --- patička ------------------------------------------------------------
   ZÁMĚRNĚ bez vlastních barev. Šablona má patičku rozdělenou na tmavý blok
   a světlý copyright pruh; `#footer{color:…}` obarvilo i ten světlý pruh
   a text v něm zmizel (ověřeno živě 2026-09-20). Tmavou barvu si patička
   bere z přepsaných theme proměnných výše, takže paletu drží sama. */

/* --- lišta souhlasu s cookies -------------------------------------------
   Shoptetí widget má vlastní pevnou tmavě modrou #1A1937 mimo theme
   proměnné — jediné modré místo, které v zákaznickém UI zbylo.
   Měníme jen barvy, struktura a texty widgetu zůstávají. */
.siteCookies,.siteCookies__form{background:var(--spz-forest-d)!important;color:var(--spz-on-dark)!important}
.siteCookies__form a,.siteCookies__link{color:#fff!important}
.siteCookies__button{color:var(--spz-text)!important}

/* --- carousel overflow + nepravdivé prvky šablony ---------------------- */
.products-top-wrapper{overflow-x:hidden}
.box-onlinePayments{display:none!important}