/* ==========================================================================
   Tiger Nuts s.r.o. — moderní vzhled
   Vlastní CSS nad Shoptet šablonou "template-10"

   KAM TO PATŘÍ:
   Administrace → Vzhled a obsah → Editor vzhledu → "Vlastní CSS styly"
   (u některých verzí "HTML kódy a CSS styly"). Vložit CELÝ obsah a uložit.

   Nic v šabloně se tím nepřepisuje — je to čistě vizuální vrstva navíc.
   Kdykoliv ji smažete a web je zpátky v původním stavu.

   Ověřeno na: úvodní straně, výpisu kategorie, detailu produktu,
   obsahové stránce (Kontakty) a prázdném košíku.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENY — jediné místo, kde se mění barvy celého webu
   ========================================================================== */

:root {
  /* Značková paleta: teplá, přírodní, "bio potravina" místo černobílé */
  --tn-cream:      #FBF8F2;   /* pozadí stránky — teplá bílá místo #ffffff */
  --tn-sand:       #F2E8D8;   /* světlé plochy, oddělovací sekce            */
  --tn-ink:        #2B2119;   /* hlavní text — tmavá "espresso" místo #000  */
  --tn-muted:      #6E5F4F;   /* sekundární text, popisky                   */
  --tn-amber:      #C06A16;   /* AKCENT — tygří oranžová (tlačítka, odkazy) */
  --tn-amber-dark: #9B5310;   /* akcent hover                               */
  --tn-olive:      #5E7C3C;   /* "Skladem", BIO, pozitivní stavy            */
  --tn-line:       rgba(43, 33, 25, 0.12);
  --tn-line-soft:  rgba(43, 33, 25, 0.06);

  /* Tvary a stíny */
  --tn-radius:     16px;
  --tn-radius-sm:  10px;
  --tn-shadow:     0 1px 2px rgba(43, 33, 25, .05), 0 10px 30px -18px rgba(43, 33, 25, .35);
  --tn-shadow-lg:  0 2px 4px rgba(43, 33, 25, .05), 0 24px 48px -24px rgba(43, 33, 25, .40);

  /* Rozměry */
  --tn-bar-h:      76px;      /* výška fixní horní lišty (původně 141px!)   */
  --tn-max:        1320px;    /* šířka obsahu (původně jen 952px)           */
  --tn-gutter:     24px;

  /* Přepis systémových proměnných Shoptetu.
     POZOR: --color-primary používá Shoptet i pro pozadí hlavičky, ne jen pro
     tlačítka. Kdyby se sem dala oranžová, zoranžoví celá hlavička. Proto tu
     zůstává tmavá a oranžový akcent se řídí konkrétními pravidly níž. */
  --color-primary:         #2B2119;
  --color-primary-hover:   #C06A16;
  --color-secondary:       #2B2119;
  --color-secondary-hover: #C06A16;
  --color-tertiary:        #5E7C3C;
  --color-tertiary-hover:  #4C6631;
}


/* ==========================================================================
   2. ZÁKLAD — typografie a pozadí
   -------------------------------------------------------------------------
   Roboto Slab je slabserif — krásný na nadpisy, ale ve 14px na dlouhý text
   se špatně čte. Necháváme ho na nadpisy, běžný text dostane systémový
   bezpatkový font (žádné stahování navíc = žádné zpomalení webu).
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tn-bar-h) + 16px);   /* kvůli fixní liště */
}

body {
  background-color: var(--tn-cream);
  color: var(--tn-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.welcome .h1,
#content h1, #content h2, #content h3 {
  font-family: "Roboto Slab", Georgia, serif;
  color: var(--tn-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: 1.8em;
  margin-bottom: .5em;
  text-wrap: balance;
}

h1, .h1, .welcome .h1 { font-size: clamp(30px, 3.4vw, 44px); }
h2, .h2 { font-size: clamp(24px, 2.4vw, 32px); }
h3, .h3 { font-size: clamp(19px, 1.6vw, 22px); }

p { margin: 0 0 1.1em; }

a {
  color: var(--tn-amber);
  text-decoration-color: rgba(192, 106, 22, .35);
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover { color: var(--tn-amber-dark); text-decoration-color: currentColor; }

/* Viditelný focus pro klávesnici — přístupnost i lepší UX */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tn-amber);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: rgba(192, 106, 22, .22); }


/* ==========================================================================
   3. ŠÍŘKA OBSAHU
   -------------------------------------------------------------------------
   Původně: obsah 952 px na monitoru 1280 px → 330 px prázdna po stranách.
   ========================================================================== */

.container,
#content-wrapper.container,
.navigation-wrapper.container,
.benefitBanner.container {
  width: 100% !important;
  max-width: var(--tn-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--tn-gutter) !important;
}


/* ==========================================================================
   4. HORNÍ LIŠTA — hlavní oprava
   -------------------------------------------------------------------------
   Problém: .header-navigation je v této šabloně TRVALE position:fixed,
   průhledná, 141 px vysoká, s bílým textem 14 px. Nad tmavou hero fotkou
   to funguje, ale jakmile odscrollujete na bílý obsah, bílé menu zmizí.
   Řešení: kompaktní lišta s krémovým podkladem, rozostřením a tmavým
   textem — čitelná nad fotkou i nad bílým obsahem.
   ========================================================================== */

#header {
  background-color: var(--tn-ink) !important;   /* podklad pod hero fotkou */
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  padding-top: var(--tn-bar-h) !important;
  position: relative;
  isolation: isolate;
}

/* Ztmavovací gradient, aby byl text v hero vždy čitelný bez ohledu na fotku */
#header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
              rgba(26, 18, 10, .45) 0%,
              rgba(26, 18, 10, .18) 45%,
              rgba(26, 18, 10, .62) 100%);
  pointer-events: none;
}

#header .navigation-wrapper { position: relative; z-index: 1; }

/* --- samotná fixní lišta ------------------------------------------------- */
#header .header-navigation {
  height: var(--tn-bar-h);
  background: rgba(251, 248, 242, .86);           /* fallback              */
  background: color-mix(in srgb, var(--tn-cream) 86%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--tn-line);
  box-shadow: 0 8px 28px -22px rgba(43, 33, 25, .6);
  transition: height .22s ease, box-shadow .22s ease;
}

/* Vnitřní obal lišty → jednořádkové rozvržení: logo | menu | ikony */
#header .header-navigation > div {
  width: 100%;
  max-width: var(--tn-max);
  margin-inline: auto;
  padding-inline: var(--tn-gutter) !important;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* --- logo ---------------------------------------------------------------- */
/* Logo je navzdory názvu souboru ("...cerne...") ve skutečnosti BÍLÉ —
   průměrná barva neprůhledných pixelů je rgb(252,252,252). Na krémové liště
   by tedy skoro zmizelo. brightness(0) obarví všechny neprůhledné pixely na
   černou a průhlednost nechá být; opacity ho jemně sladí s teplou paletou.
   (Kdybyste někdy chtěli lištu naopak tmavou, stačí místo toho napsat
   filter: brightness(0) invert(1) — logo bude bílé.) */
#header .site-name {
  order: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
#header .site-name a { display: block; line-height: 0; }
#header .site-name img {
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(0);
  opacity: .92;
  transition: transform .2s ease, opacity .2s ease;
}
#header .site-name a:hover img { transform: scale(1.04); opacity: 1; }

/* --- hlavní menu --------------------------------------------------------- */
/* DŮLEŽITÉ: rozvržení menu se mění jen na desktopu.
   Pod 992 px má Shoptet vlastní výsuvné (off-canvas) mobilní menu — kdyby se
   mu tady přepsalo `position` nebo `display`, přestane se schovávat a položky
   se rozsypou přes celou stránku. Proto je to celé v min-width dotazu. */
@media (min-width: 992px) {
  #header nav#navigation {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    position: static;
    overflow: visible !important;
  }

  /* Shoptet má na menu skript "menu-helper", který měří, co se do lišty
     vejde, a přetékající položky schová do rozbalovátka "Více". Měří to tak,
     že <ul> roztáhne na ~140 000 px a položkám, které se nevejdou, přidá
     třídu .splitted (ta je schová přes visibility:hidden).

     Náš flexbox mu ten výpočet shodí — skript pak usoudí, že se nevejde NIC,
     označí .splitted všechny a menu z lišty úplně zmizí.

     Nemá smysl s tím skriptem bojovat: všech 7 položek se do 1320px lišty
     pohodlně vejde (zabírají ~780 px), takže se jeho výsledek jen neutralizuje
     — šířka zpátky na 100 %, položky viditelné, rozbalovátko "Více" pryč.

     POZOR: kdyby do menu přibyly další položky a přestaly se vejít,
     nezabalí se samy do "Více" — vytekly by z lišty. Při rozšiřování menu
     to překontrolujte, případně tenhle blok smažte (menu se pak vrátí
     do dvou řádků, jak to dělá šablona sama). */
  /* .navigation-in je v šabloně `position: absolute; top: 0` a #navigation má
     kvůli tomu nulovou výšku. Menu se pak přilepí k hornímu okraji lišty —
     střed textu vyjde na 20 px, zatímco logo i ikony mají střed na 38 px,
     takže menu sedí o 18 px výš než zbytek lišty. Vrácením do normálního
     toku ho flexová lišta svisle vycentruje ke zbytku. */
  #header nav#navigation {
    display: flex;
    align-items: center;
  }
  #header #navigation .navigation-in {
    position: static !important;
    width: 100% !important;
    background: none;
    border: 0;
  }

  #header #navigation .menu-level-1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    height: auto;
    width: 100% !important;
    max-width: none !important;
  }

  #header #navigation .menu-level-1 > li.splitted {
    visibility: visible !important;
    position: static !important;
  }

  #header .menu-helper { display: none !important; }

  /* Hamburger je na desktopu zbytečný (menu se vejde celé) — jinak by po
     sobě nechával v liště prázdné místo. Na mobilu zůstává. */
  #header .navigation-buttons > a[data-target="navigation"] { display: none !important; }
}

#header #navigation .menu-level-1 > li { position: relative; }

/* Tady se řeší "menu je malé": 14px → 15.5px, tučnější, s vlastním hit boxem */
#header #navigation .menu-level-1 > li > a {
  display: block;
  padding: 10px 14px !important;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 15.5px !important;
  line-height: 1.2 !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tn-ink) !important;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
#header #navigation .menu-level-1 > li > a b { font-weight: inherit; }

#header #navigation .menu-level-1 > li > a:hover,
#header #navigation .menu-level-1 > li > a:focus-visible {
  background: rgba(192, 106, 22, .10);
  color: var(--tn-amber-dark) !important;
}

/* Aktivní položka — POZOR: Shoptet dává třídu `active` na <a>, ne na <li>.
   Pravidlo cílené na `li.active` proto nikdy nesedne a zvýraznění stránky,
   na které zrovna jste, se vůbec neukáže. */
#header #navigation .menu-level-1 > li > a.active,
#header #navigation .menu-level-1 > li.active > a {
  background: var(--tn-amber) !important;
  color: #fff !important;
}
#header #navigation .menu-level-1 > li > a.active:hover,
#header #navigation .menu-level-1 > li.active > a:hover {
  background: var(--tn-amber-dark) !important;
  color: #fff !important;
}

/* Případné podmenu (kdyby se v budoucnu přidalo) */
#header #navigation .menu-level-2 {
  background: var(--tn-cream);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow-lg);
  padding: 8px;
  margin-top: 6px;
  overflow: hidden;
}
#header #navigation .menu-level-2 a {
  border-radius: var(--tn-radius-sm);
  padding: 9px 14px;
  color: var(--tn-ink);
  font-size: 15px;
}
#header #navigation .menu-level-2 a:hover {
  background: var(--tn-sand);
  color: var(--tn-amber-dark);
}

/* Přetékající položky ("Více") */
#header .menu-helper > span {
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--tn-ink);
  cursor: pointer;
}
#header .menu-helper > span:hover { background: rgba(192, 106, 22, .10); }
#header .menu-helper ul {
  background: var(--tn-cream);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow-lg);
  padding: 8px;
}

/* --- ikony vpravo (hledání / účet / košík / hamburger) ------------------- */
#header .navigation-buttons {
  order: 4;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important;
  height: auto !important;
  position: static !important;
  margin: 0 !important;
}

#header .navigation-buttons > a,
#header .navigation-buttons > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tn-ink) !important;
  font-size: 19px;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
#header .navigation-buttons > a::before,
#header .navigation-buttons > button::before {
  color: inherit;
  font-size: 19px;
}
#header .navigation-buttons > a:hover,
#header .navigation-buttons > button:hover {
  background: rgba(192, 106, 22, .12);
  color: var(--tn-amber-dark) !important;
  transform: translateY(-1px);
}

/* Košík — akcentovaný, ať je vidět, že je to nákupní web */
#header .navigation-buttons .cart-count {
  background: var(--tn-amber);
  color: #fff !important;
}
#header .navigation-buttons .cart-count:hover {
  background: var(--tn-amber-dark);
  color: #fff !important;
}
/* Počet kusů. Shoptet si pozici řídí sám a bez !important by odznak zůstal
   uvnitř kolečka a překrýval ikonu vozíku — proto natvrdo do rohu. */
#header .navigation-buttons .cart-count { overflow: visible; }
#header .navigation-buttons .cart-count i {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--tn-ink) !important;
  color: #fff !important;
  border: 2px solid var(--tn-cream);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}


/* ==========================================================================
   5. HERO / ZÁHLAVÍ STRÁNKY
   -------------------------------------------------------------------------
   Na úvodní straně je v .header-title slogan → plnohodnotný hero.
   Na podstránkách je tam název stránky ("Kontakty") → kompaktní pruh.
   ========================================================================== */

#header .header-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  padding: 48px 0 !important;
}

#header .header-title span {
  display: block;
  max-width: 20ch;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(20, 12, 5, .55);
  text-wrap: balance;
}

body.type-index #header .header-title { min-height: 400px; }
body:not(.type-index) #header .header-title {
  min-height: 120px;
  padding: 32px 0 !important;
}
body:not(.type-index) #header .header-title span { font-size: clamp(20px, 2.2vw, 28px); }

/* Na detailu produktu .header-title vůbec neexistuje. Shoptet tam ale nechává
   `padding-bottom: 24px`, takže pod lištou zůstane 24px proužek hero fotky,
   který vypadá jako omyl. Tady se sjednotí na čistou lištu.
   Dvě samostatná pravidla schválně: to s :has() odchytí i další typy stránek
   bez záhlaví, a kdyby prohlížeč :has() neuměl, zahodí jen tenhle jeden
   řádek a pravidlo nad ním pořád platí. */
body.type-detail #header { padding-bottom: 0 !important; }
#header:not(:has(.header-title)) { padding-bottom: 0 !important; }

/* Drobečková navigace */
.breadcrumbs,
#breadcrumbs {
  font-size: 13.5px;
  color: var(--tn-muted);
  padding: 16px 0 0;
}
.breadcrumbs a { color: var(--tn-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--tn-amber); }


/* ==========================================================================
   6. HORNÍ BANNERY (kategorie na úvodní straně)
   ========================================================================== */

/* Shoptet má na těchto blocích starý "clearfix" (::before/::after s
   display:table). V CSS gridu se z těch pseudoelementů stanou dvě neviditelné
   dlaždice, které rozhodí mřížku o jeden sloupec. Musí pryč. */
.banners-top::before,  .banners-top::after,
.benefitBanner::before, .benefitBanner::after {
  content: none !important;
  display: none !important;
}

.banners-top {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  max-width: var(--tn-max);
  margin: 40px auto 8px !important;
  padding-inline: var(--tn-gutter);
  float: none !important;
}

.banners-top .banner-wrapper {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-radius: var(--tn-radius);
  overflow: hidden;
  background: var(--tn-sand);
  box-shadow: var(--tn-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.banners-top .banner-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--tn-shadow-lg);
}

.banners-top .banner-wrapper > a {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;      /* stejná bílá jako pozadí fotek → posun není vidět */
}
.banners-top .banner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.banners-top .banner-wrapper:hover img { transform: scale(1.06); }

/* --- srovnání popisků na bannerech --------------------------------------
   Popisky ("Naturální produkty", "Slané pochoutky", …) nejsou HTML text —
   jsou vypálené přímo v obrázcích a v každém souboru leží v jiné výšce:

     Naturální produkty      spodek textu na 95,6 % výšky
     Slané pochoutky                        92,4 %
     Másla a krémy                          94,2 %
     Olej z tygřích ořechů                  96,2 %

   Rozdíl 3,8 % výšky = ~12 px při dlaždici 305 px. CSS s textem uvnitř
   obrázku hýbat neumí, takže se posouvá celý obrázek tak, aby popisky
   skončily ve stejné rovině (na 95,5 % výšky dlaždice). Odřízne se jen
   prázdné pozadí pod textem.

   Cílí se přes název souboru, ne pořadím — přehození bannerů v administraci
   tedy nic nerozbije. Když se ale některý obrázek VYMĚNÍ, je potřeba jeho
   hodnotu doměřit znovu, případně řádek smazat (pak se chová jako dřív).

   Trvalé řešení: vyexportovat všechny čtyři obrázky s popiskem ve stejné
   výšce — nebo z nich text úplně vypustit a vyplnit ho v administraci
   (Marketing → Bannery → text banneru), pak se zarovná sám. */
.banners-top .banner-wrapper img[src*="natur"]   { top: 1.9%; }
.banners-top .banner-wrapper img[src*="slan__"]  { top: 3.1%; }
.banners-top .banner-wrapper img[src*="m__sla"]  { top: 2.6%; }
.banners-top .banner-wrapper img[src*="olej"]    { top: 0.2%; }

/* Kdyby se popisky doplnily jako text banneru v administraci, tohle je
   rovnou zobrazí jako zarovnaný pruh pod fotkou (dnes je span prázdný). */
.banners-top .extended-banner-texts:not(:empty) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92) 45%);
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--tn-ink);
  text-align: center;
}


/* ==========================================================================
   7. PÁS VÝHOD (benefitBanner)
   -------------------------------------------------------------------------
   Je na úvodní straně (8 položek) i na detailu produktu (4 položky).
   ========================================================================== */

.benefitBanner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 40px auto !important;
  padding-block: 0 !important;
}

.benefitBanner__item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: auto !important;
  margin: 0 !important;
  padding: 16px !important;
  background: #fff;
  border: 1px solid var(--tn-line-soft);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.benefitBanner__item:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 106, 22, .35);
}

.benefitBanner__picture {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tn-sand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefitBanner__img { width: 100%; height: 100%; object-fit: cover; }

.benefitBanner__title {
  display: block;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tn-ink);
  line-height: 1.25;
  margin-bottom: 2px;
}
.benefitBanner__data { font-size: 13.5px; line-height: 1.45; color: var(--tn-muted); }


/* ==========================================================================
   8. OBSAH — čitelnost dlouhých textů
   ========================================================================== */

#content-wrapper {
  background: transparent !important;
  padding-top: 24px !important;
  padding-bottom: 64px !important;
}

#content .welcome,
#content .welcome-wrapper {
  font-size: 17px;
  line-height: 1.7;
  color: #3B2F24;
}

/* Optimální délka řádku — přes 90 znaků se text čte výrazně hůř */
#content .welcome p,
#content .welcome li,
#content .content-inner > p,
#content .content-inner > div > p {
  max-width: 72ch;
}

#content .welcome .h1 {
  margin-top: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tn-line);
}

/* Nadpisy 3. úrovně (jednotlivé živiny) dostanou barevný akcent */
#content .welcome h3 {
  position: relative;
  padding-left: 16px;
  font-size: 19px;
  margin-top: 2em;
}
#content .welcome h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 999px;
  background: var(--tn-amber);
}

#content .welcome strong { color: var(--tn-ink); font-weight: 650; }

#content .welcome img,
#content .content-inner img {
  max-width: 100%;
  height: auto;
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow);
}

/* Prázdné odstavce z editoru nedělají obří mezery */
#content .welcome p:empty { display: none; }


/* ==========================================================================
   9. TLAČÍTKA
   ========================================================================== */

.btn,
button.btn,
a.btn,
input[type="submit"].btn {
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .005em;
  border-width: 1px;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-sm { padding: 8px 18px !important; font-size: 14px !important; }

.btn-primary,
.btn-conversion,
.add-to-cart-button {
  background-color: var(--tn-amber) !important;
  border-color: var(--tn-amber) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-conversion:hover,
.add-to-cart-button:hover {
  background-color: var(--tn-amber-dark) !important;
  border-color: var(--tn-amber-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(155, 83, 16, .8);
}

.btn-secondary,
.btn-default {
  background-color: transparent !important;
  border-color: var(--tn-ink) !important;
  color: var(--tn-ink) !important;
}
.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--tn-ink) !important;
  color: #fff !important;
}

.btn:active { transform: translateY(0); }


/* ==========================================================================
   10. FORMULÁŘE
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.form-control {
  background: #fff;
  border: 1px solid var(--tn-line) !important;
  border-radius: var(--tn-radius-sm) !important;
  padding: 11px 14px !important;
  font-size: 15px;
  color: var(--tn-ink);
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--tn-amber) !important;
  box-shadow: 0 0 0 3px rgba(192, 106, 22, .16) !important;
}
::placeholder { color: #A0917F; }


/* ==========================================================================
   11. PRODUKTOVÉ KARTY
   -------------------------------------------------------------------------
   Pozor na dvě různé varianty výpisu, každá má JINÉ třídy:
     .products-block  = hlavní mřížka   → odkaz .p-image, název .p-name
     .products-inline = úzký pás "TOP"  → odkaz .image,   název .name

   POZOR — CO SE TU ZÁMĚRNĚ NEDĚLÁ:
   Šablona má .p-bottom (popis + dostupnost + tlačítko "Detail") schované
   přes opacity:0 / height:0 a odkrývá ho až na hover; podobně je na hover
   navázaný .p-code ("Kód: 50"), který je position:absolute nad kartou.
   Celá ta mechanika je v CSS Shoptetu. První verze tohohle souboru ji
   přebíjela (aby bylo "Skladem" vidět i na dotyku) a rozbila tím hover —
   obsah přetékal a ořezával se. Karty proto nechávají rozvržení i hover
   šabloně a mění se jen vzhled: pozadí, rámeček, poměr obrázku, typografie.

   Kdybyste chtěli "Skladem" viditelné i bez najetí myší, není to úkol pro
   CSS — dá se to zapnout v nastavení výpisu produktů v administraci.
   ========================================================================== */

.products .product {
  padding: 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.products .product > .p {
  padding: 14px !important;
  background: #fff;
  border: 1px solid var(--tn-line-soft);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.products .product > .p:hover {
  transform: translateY(-4px);
  box-shadow: var(--tn-shadow-lg);
  border-color: rgba(192, 106, 22, .3);
}

/* --- obrázek v hlavní mřížce -------------------------------------------
   Zdroj je 423×318 px (poměr 4:3). Proto 4/3 a `contain` — se čtvercovým
   rámem a `cover` by se obalům produktů uřízl vršek a spodek.
   Bílé pozadí, ne pískové: produktové fotky mají bílé pozadí, takže barevný
   podklad by kolem nich vykreslil viditelný rámeček. */
.products-block .product .p-image {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--tn-radius-sm);
  overflow: hidden;
  background: #fff;
  margin-bottom: 14px;
}
.products-block .product .p-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.products .product > .p:hover .p-image img { transform: scale(1.05); }

/* --- obrázek v úzkém pásu (miniatury 100×100, nesmí se zvětšovat) ------- */
.products-inline .product .image {
  display: block;
  border-radius: var(--tn-radius-sm);
  overflow: hidden;
  background: #fff;
  margin-bottom: 12px;
}
.products-inline .product .image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Název — vždy přesně 2 řádky, aby cena začínala u všech ve stejné výšce */
.products .product .name,
.products .product .p-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;               /* 2 řádky × line-height 1.35 */
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tn-ink);
  text-decoration: none;
}
.products .product .name span,
.products .product .p-name span { font: inherit; color: inherit; }
.products .product .name:hover,
.products .product .p-name:hover { color: var(--tn-amber-dark); }

.products .product .prices { margin: 8px 0 0; }
.products .product .price-final,
.products .product .price-final strong {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--tn-ink);
  letter-spacing: -0.02em;
}
.products .product .price-final small {
  font-size: 12px;
  font-weight: 500;
  color: var(--tn-muted);
  letter-spacing: 0;
}
.price-standard,
.products .product .price-standard {
  color: #A0917F;
  text-decoration: line-through;
  font-size: 13px;
}

/* Spodní blok (popis, dostupnost, tlačítko) se odkrývá na hover — řídí si to
   šablona, tady se mění jen barvy a velikost písma, ne rozvržení. */
.products .product .p-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tn-muted);
}

/* "Skladem" jako zelený štítek.
   Barva je v HTML zapsaná inline (style="color:#3c840f"), proto !important. */
.products .product .availability > span[style],
.products .product .availability .show-tooltip,
.availability > span[style] {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(94, 124, 60, .12);
  color: var(--tn-olive) !important;
  font-size: 12.5px;
  font-weight: 600;
}
.products .product .availability > strong[style] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tn-muted) !important;
  font-weight: 400;
}
.products .product .availability-amount { color: var(--tn-muted); font-size: 12.5px; }
.products .product .p-code { color: #9A8B79; font-size: 12px; }
.products .product .ratings-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 13px;
}

/* .p-tools se odkrývá spolu s .p-bottom na hover — jen odsazení, nic víc.
   Žádné opacity/height/visibility, to je věc šablony. */
.products .product .p-tools { padding-top: 12px; }

/* Štítky Novinka / Akce / Tip */
.flag,
.extra-flags .flag {
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -6px rgba(43, 33, 25, .5);
}
.flag-new       { background: var(--tn-olive) !important; color: #fff !important; }
.flag-action,
.flag-discount  { background: var(--tn-amber) !important; color: #fff !important; }
.flag-tip       { background: var(--tn-ink) !important;   color: #fff !important; }


/* ==========================================================================
   12. VÝPIS KATEGORIE — řazení a stránkování
   ========================================================================== */

.category-header {
  background: #fff;
  border: 1px solid var(--tn-line-soft);
  border-radius: var(--tn-radius);
  padding: 12px 16px;
  margin-bottom: 24px;
  box-shadow: var(--tn-shadow);
}

.listSorting__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.listSorting__control {
  border: 1px solid var(--tn-line) !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 14px !important;
  font-weight: 500;
  color: var(--tn-muted) !important;
  transition: all .18s ease;
}
.listSorting__control:hover {
  border-color: var(--tn-amber) !important;
  color: var(--tn-amber-dark) !important;
}
.listSorting__control--current {
  background: var(--tn-ink) !important;
  border-color: var(--tn-ink) !important;
  color: #fff !important;
}

.pagination a,
.pagination span {
  border-radius: var(--tn-radius-sm) !important;
  border-color: var(--tn-line) !important;
  min-width: 40px;
}
.pagination .active a,
.pagination a:hover {
  background: var(--tn-amber) !important;
  border-color: var(--tn-amber) !important;
  color: #fff !important;
}


/* ==========================================================================
   13. DETAIL PRODUKTU
   ========================================================================== */

.p-detail .p-image-wrapper {
  border-radius: var(--tn-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tn-line-soft);
}
.p-detail .p-image-wrapper img { border-radius: 0; }

.p-detail .p-short-description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--tn-muted);
  margin-bottom: 18px;
}

/* Cena */
.p-detail .p-final-price-wrapper .price-final,
.p-detail .p-final-price-wrapper .price-final-holder {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--tn-ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.p-detail .price-measure,
.p-detail .price-additional { font-size: 13.5px; color: var(--tn-muted); }

/* Dostupnost — barva je inline (background-color:#3c840f), tvar doděláme */
.p-detail .availability-label {
  display: inline-block;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
}

/* Výběr varianty */
.p-detail .variant-list { margin: 18px 0; }
.p-detail .variant-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tn-muted);
}
.p-detail .variant-list select.form-control {
  width: 100%;
  max-width: 420px;
  font-size: 15px;
}

/* Množství + do košíku */
.p-detail .add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;      /* množství se samo srovná na výšku tlačítka */
  gap: 12px;
  margin: 20px 0;
}
/* Pozor na stavbu tohohle prvku: .increase a .decrease jsou v Shoptetu
   `position: absolute`, takže `overflow: hidden` by je uřízlo. Výška se
   nastavuje na obalu a děti ji jen dědí (height:100%), aby pole s množstvím
   bylo přesně tak vysoké jako tlačítko "Do košíku" (jinak je o 16 px nižší). */
.p-detail .quantity {
  display: inline-flex;
  align-items: center;
  align-self: stretch;       /* dorovná se na výšku tlačítka "Do košíku" */
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--tn-line);
  border-radius: 999px;
  background: #fff;
  overflow: visible;
}
.p-detail .quantity > label {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
}
.p-detail .quantity input.amount {
  height: 100%;
  width: 56px;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  padding: 0 4px !important;
  font-weight: 600;
  background: transparent;
  box-shadow: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
.p-detail .quantity input.amount::-webkit-outer-spin-button,
.p-detail .quantity input.amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.p-detail .increase,
.p-detail .decrease {
  width: 40px;
  height: 100% !important;
  top: 0 !important;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tn-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.p-detail .increase:hover,
.p-detail .decrease:hover { background: rgba(192, 106, 22, .12); color: var(--tn-amber-dark); }

.p-detail .add-to-cart-button {
  padding: 15px 36px !important;
  font-size: 16px !important;
}

/* Záložky Popis / Diskuze */
.p-detail-tabs.shp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0 0 0 0;
  border-bottom: 1px solid var(--tn-line);
}
.p-detail-tabs .shp-tab { margin: 0; border: 0; }
.p-detail-tabs .shp-tab-link {
  display: block;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--tn-radius-sm) var(--tn-radius-sm) 0 0;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--tn-muted);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.p-detail-tabs .shp-tab-link:hover { background: rgba(192, 106, 22, .08); color: var(--tn-amber-dark); }
.p-detail-tabs .shp-tab.active .shp-tab-link {
  color: var(--tn-ink);
  background: #fff;
  box-shadow: inset 0 -3px 0 var(--tn-amber);
}
.p-detail-tabs-wrapper .tab-pane { padding-top: 24px; }

/* Tabulka parametrů */
.detail-parameters {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
}
.detail-parameters th,
.detail-parameters td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--tn-line-soft);
  text-align: left;
  vertical-align: top;
}
.detail-parameters th {
  color: var(--tn-muted);
  font-weight: 500;
  white-space: nowrap;
  width: 1%;
}
.detail-parameters td { color: var(--tn-ink); }
.detail-parameters tr:last-child th,
.detail-parameters tr:last-child td { border-bottom: 0; }


/* ==========================================================================
   14. KOŠÍK A OBJEDNÁVKA
   -------------------------------------------------------------------------
   POZNÁMKA: košík byl při přípravě prázdný, takže plný košík a jednotlivé
   kroky objednávky se nedaly ověřit. Pravidla níž jsou psaná na běžné třídy
   Shoptetu a jsou záměrně opatrná (jen barvy, rámečky a rádiusy — nic, co by
   měnilo rozvržení). Po nasazení projděte jednu zkušební objednávku.
   ========================================================================== */

.cart-inner .cart-heading { margin-top: 0; }

.cart-table,
.co-box,
#checkoutSidebar,
.cart-summary,
.cart-content {
  background: #fff;
  border: 1px solid var(--tn-line-soft);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow);
}
.cart-table th {
  background: var(--tn-sand);
  color: var(--tn-ink);
  font-weight: 600;
  border: 0;
}
.cart-table td { border-color: var(--tn-line-soft); }

/* --- vyskakovací okno košíku v hlavičce ---------------------------------
   Shoptet tenhle panel stylizuje přes #cart-widget, tedy přes ID. Selektor
   .popup-widget (0,1,0) na něj proto nedosáhne ani s !important — musí se
   cílit taky přes ID, jinak zůstane bílý hranatý blok.

   `overflow: hidden` je schválně až na vnitřním .popup-widget-inner: na
   samotném okně by uřízlo špičku šipky, která ukazuje na ikonu košíku. */
#cart-widget.popup-widget,
#login.popup-widget,
.user-action .popup-widget {
  border: 1px solid var(--tn-line) !important;
  border-radius: var(--tn-radius) !important;
  box-shadow: var(--tn-shadow-lg) !important;
  background: #fff !important;
}
#cart-widget .popup-widget-inner {
  border-radius: var(--tn-radius);
  overflow: hidden;
}

/* Panel dědil z <body> 16px/26,4px — na kompaktní okénko je to moc */
#cart-widget { font-size: 14px; line-height: 1.45; }

#cart-widget .cart-widget-product {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--tn-line-soft);
  font-size: 14px;
  line-height: 1.45;
}
#cart-widget .cart-widget-products-inner .cart-widget-product:last-child { border-bottom: 0; }

#cart-widget .cart-widget-product-image { width: 64px; }
#cart-widget .cart-widget-product-image img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--tn-line-soft);
  border-radius: var(--tn-radius-sm);
}

#cart-widget .cart-widget-product-amount { width: 92px; padding: 0 10px !important; }
#cart-widget .quantity {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 22px;
  border: 1px solid var(--tn-line);
  border-radius: 999px;
  background: #fff;
  overflow: visible;
}
#cart-widget .quantity > label { display: flex; align-items: center; height: 100%; margin: 0; }
#cart-widget .quantity input.amount {
  height: 100%;
  width: 34px;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  box-shadow: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
#cart-widget .quantity input.amount::-webkit-outer-spin-button,
#cart-widget .quantity input.amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#cart-widget .increase,
#cart-widget .decrease {
  height: 100% !important;
  width: 22px;
  top: 0 !important;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tn-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

#cart-widget .cart-widget-product-name { padding-right: 8px !important; }
#cart-widget .cart-widget-product-name strong { display: block; font-weight: 600; }
#cart-widget .cart-widget-product-name strong a {
  display: block;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--tn-ink);
  text-decoration: none;
}
#cart-widget .cart-widget-product-name strong a:hover { color: var(--tn-amber-dark); }
#cart-widget .cart-widget-product-variant {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tn-muted);
}
/* cena položky — je to prostý <span> bez třídy hned za názvem */
#cart-widget .cart-widget-product-name > span {
  display: inline-block;
  margin-top: 6px;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tn-ink);
}

/* Křížek pro odebrání — původně tučné 24px "✕", teď decentní kolečko */
#cart-widget .cart-widget-product-delete { width: 40px; text-align: right; }
#cart-widget .remove-item {
  position: relative;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tn-muted);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
#cart-widget .remove-item::before,
#cart-widget .remove-item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
#cart-widget .remove-item::before { transform: translate(-50%, -50%) rotate(45deg); }
#cart-widget .remove-item::after  { transform: translate(-50%, -50%) rotate(-45deg); }
#cart-widget .remove-item:hover { background: rgba(176, 42, 42, .10); color: #B02A2A; }

#cart-widget .cart-widget-button {
  padding: 14px !important;
  background: var(--tn-cream);
  border-top: 1px solid var(--tn-line-soft);
  text-align: center;
}
#cart-widget .cart-widget-button .btn {
  width: 100%;
  background-color: var(--tn-amber) !important;
  border-color: var(--tn-amber) !important;
  color: #fff !important;
  border-radius: 999px !important;
}


/* ==========================================================================
   15. PATIČKA
   -------------------------------------------------------------------------
   Dnes je to tenký bílý proužek, který splývá se stránkou. Tmavý blok
   uzavře stránku a opticky ji "postaví na nohy".
   ========================================================================== */

#footer.footer {
  background: var(--tn-ink) !important;
  color: rgba(255, 255, 255, .72);
  margin-top: 64px;
  border-top: 4px solid var(--tn-amber);
}

#footer .footer-section { border: 0 !important; }

#footer .footer-bottom {
  padding: 28px 0 !important;
  background: transparent !important;
}

#footer .footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}

#footer,
#footer .copyright,
#footer .copyright strong { color: rgba(255, 255, 255, .72) !important; }
#footer .copyright strong { color: #fff !important; font-weight: 600; }

#footer a { color: rgba(255, 255, 255, .85) !important; text-decoration: none; }
#footer a:hover { color: var(--tn-amber) !important; text-decoration: underline; }

#footer #signature { opacity: .55; }
#footer #signature img { filter: brightness(0) invert(1); }

/* Nadpisy sloupců v patičce (až se do administrace doplní obsah) */
#footer h3, #footer h4, #footer .footer-heading {
  color: #fff !important;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 16px;
  letter-spacing: .01em;
  margin-bottom: 12px;
}


/* ==========================================================================
   16. COOKIE LIŠTA
   ========================================================================== */

.siteCookies {
  --cookies-notice-background: #2B2119;
  border-radius: var(--tn-radius) !important;
  box-shadow: var(--tn-shadow-lg) !important;
  margin: 16px !important;
  overflow: hidden;
}
.siteCookies__button {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 11px 24px !important;
}
.siteCookies__buttonWrap .siteCookies__button:last-child {
  background: var(--tn-amber) !important;
  border-color: var(--tn-amber) !important;
  color: #fff !important;
}


/* ==========================================================================
   17. RESPONZIVITA
   ========================================================================== */

@media (max-width: 1199px) {
  /* Menu se při 992–1199 px musí vejít na jeden řádek vedle loga a ikon */
  #header #navigation .menu-level-1 > li > a {
    font-size: 14.5px !important;
    padding: 10px 10px !important;
  }
}

@media (max-width: 991px) {
  :root { --tn-bar-h: 62px; --tn-gutter: 16px; }

  /* Výsuvné mobilní menu si celé řídí Shoptet. Nesahá se mu tedy na
     `position`, `display` ani na rozvržení — mění se JEN barvy a velikosti,
     jinak by menu zůstalo natrvalo rozbalené přes celou stránku. */
  #header #navigation .navigation-in {
    background: var(--tn-cream);
    padding-top: 12px;
  }
  #header #navigation .menu-level-1 > li > a {
    padding: 14px 16px !important;
    font-size: 17px !important;
    border-radius: var(--tn-radius-sm);
    border-bottom: 1px solid var(--tn-line-soft);
  }
  #header #navigation .menu-level-1 > li > a.active {
    background: var(--tn-amber) !important;
    color: #fff !important;
  }

  #header .site-name img { max-height: 40px !important; }

  .banners-top { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .benefitBanner { grid-template-columns: repeat(2, 1fr); }

  body.type-index #header .header-title { min-height: 300px; }

  body { font-size: 16px; }
  #content .welcome { font-size: 16px; }

  .p-detail .p-image-wrapper { margin-bottom: 20px; }
}

@media (max-width: 575px) {
  :root { --tn-radius: 14px; }

  .banners-top { grid-template-columns: 1fr 1fr; }
  .benefitBanner { grid-template-columns: 1fr; }

  body.type-index #header .header-title { min-height: 240px; padding: 32px 0 !important; }

  .products .product { padding: 6px !important; }
  .products .product > .p { padding: 10px !important; }
  .products .product .name,
  .products .product .p-name { font-size: 15px; }

  .p-detail .add-to-cart { gap: 10px; }
  .p-detail .add-to-cart-button { flex: 1 1 100%; }

  #footer .footer-bottom .container { flex-direction: column; text-align: center; }
}


/* ==========================================================================
   18. OHLED NA UŽIVATELE, KTEŘÍ NECHTĚJÍ ANIMACE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}