/*!*************************************************************************************************************************!*\
  !*** css ../.config/yarn/global/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./src/header/style.css ***!
  \*************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap);
/*!*****************************************************************************************************************************!*\
  !*** css ../.config/yarn/global/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./src/header/style.css (1) ***!
  \*****************************************************************************************************************************/
/* ==========================================================================
   Semíkov — Shoptet template-11 override
   Design tokeny vytažené ze semikov.cz, viz podklady/brand/DESIGN.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokeny
   Shoptet vystavuje :root sadu (--color-primary/secondary/tertiary vč. -hover
   a HSL trojic -h/-s/-l, ze kterých skládá odstíny přes hsl()) + --template-font.
   HSL trojice se MUSÍ přepsat taky, jinak zůstanou části UI v defaultní barvě.

   POZOR: role tokenů se liší podle šablony. Tenhle shop jede na Samba
   (template-14), kde je význam jiný než v template-11 — změřeno v main-14.less:
     --color-primary   = plocha  (#header, .navigation-in background)   default bílá
     --color-secondary = akcent  (a, .btn-default bg, .site-name, hover) default modrá
     --color-tertiary  = plocha 2 (--colors-surface-secondary, boxy)    default #f9f9f9
   Při změně šablony je nutné mapování přeměřit, ne přenést naslepo.

   Barvy jde nastavit i v adminu (Vzhled > Barvy); držíme je v kódu, aby dev
   náhled seděl bez zásahu do adminu.
   -------------------------------------------------------------------------- */
:root {
  /* plocha — Semíkov krémová */
  --color-primary: #f8eeda;
  --color-primary-h: 40; --color-primary-s: 68%; --color-primary-l: 91%;
  --color-primary-hover: #f3e2c0;
  --color-primary-hover-h: 40; --color-primary-hover-s: 68%; --color-primary-hover-l: 85%;

  /* akcent — Semíkov zelená (.c-primary na semikov.cz) */
  --color-secondary: #668e28;
  --color-secondary-h: 84; --color-secondary-s: 56%; --color-secondary-l: 36%;
  --color-secondary-hover: #49661d;
  --color-secondary-hover-h: 84; --color-secondary-hover-s: 56%; --color-secondary-hover-l: 26%;

  /* sekundární plocha — béžová */
  --color-tertiary: #efe9dd;
  --color-tertiary-h: 40; --color-tertiary-s: 36%; --color-tertiary-l: 90%;
  /* POZOR: --color-tertiary-hover NENÍ hover odstín plochy. Samba jím barví
     POPŘEDÍ ikon v hlavičce (.navigation-buttons a). Default dvojice je
     #F9F9F9 (98% světlá) / #161616 (9% tmavá) — plocha + popředí, ne odstíny.
     Musí tedy být čitelná tmavá barva, jinak ikony zmizí do krémového pozadí. */
  --color-tertiary-hover: #55423d;
  --color-tertiary-hover-h: 13; --color-tertiary-hover-s: 16%; --color-tertiary-hover-l: 29%;

  --color-header-background: #f8eeda;
  --template-font: 'Quicksand';
  --template-headings-font: 'Quicksand';

  /* formulářové prvky: Semíkov má 15px i na .btn a select (theme/style.css). */
  --form-controls-border-radius: 15px;

  /* vlastní tokeny, které Shoptet nemá */
  --sk-green: #668e28;
  --sk-brown: #713e0e;
  --sk-green-dark: #00521b;  /* nadpisy */
  --sk-cream: #f8eeda;
  --sk-offwhite: #fffdf6;
  --sk-footer: #5e420b;
  --sk-text: #55423d;
  --sk-danger: #9c2818;
  --sk-font: 'Quicksand', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Typografie a plochy
   Semíkov jede na základu 18px, Quicksand, text v teplé hnědé.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sk-font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--sk-text);
  background-color: var(--sk-cream);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sk-font);
  font-weight: 700;
  color: var(--sk-green-dark);
}

h1, .h1 { font-size: 2.22rem; }
h2, .h2 { font-size: 1.78rem; }
h3, .h3 { font-size: 1.33rem; }

/* semikov.cz má odkazy v textové hnědé, ne zelené (theme/style.css: a{color:#55423d}).
   Samba je defaultně barví akcentem (--color-secondary); zelená na krémové dává
   jen 3.3:1, hnědá 8.2:1. Zelená zůstává akcentem tlačítek a ikon. */
a { color: var(--sk-text); }
a:hover, a:focus { color: var(--sk-green); }

/* Boxy a obsahové plochy zůstávají světlé, ať se krém nepere s fotkami */
.content-wrapper,
.products .product,
.homepage-box,
.box { background-color: var(--sk-offwhite); }

/* --------------------------------------------------------------------------
   3. Hlavička — jeden řádek: logo vlevo | menu | ikony vpravo

   semikov.cz má vše v jednom řádku, Samba to má na dva pruhy: .header-top
   (logo na střed + ikony) a .header-bottom s navigací.

   script.js přesouvá CELÝ .header-bottom-wrapper (nav + .menu-helper
   pohromadě) do .header-top-wrapper mezi logo a ikony a přidá #header třídu
   .sk-header-inline. Vnitřek navigace zůstává nedotčený, takže Shoptetí
   splitMenu() dál funguje: co přeteče za .menu-helper, dostane .splitted
   a schová se do "Další". Proto tu ZÁMĚRNĚ nepřepisujeme .navigation-in
   ani ul.menu-level-1 — .navigation-in{position:absolute;width:9999em}
   je měřicí pás, na kterém ta logika stojí.

   Vázáno na třídu, ne na media query: CSS media query a JS matchMedia se
   můžou o šířku scrollbaru lišit. Když se rozešly, CSS skrylo spodní pruh,
   ale JS navigaci nepřesunul a hlavička zůstala bez menu (1010 px).

   Logo je nahrané v administraci (Editor vzhledu > option[logo_image]
   ukazuje na /user/documents/template/img/logo.png), takže ho vykresluje
   Shoptet sám.
   -------------------------------------------------------------------------- */
#header { background-color: var(--color-header-background); }

/* Samba kreslí pod logem šedou linku — na krémové ruší */
#header .site-name { border-bottom: none; }

/* Podpis pod logem, jako měl semikov.cz ("Pro školy a školky").
   Logo je <img>, takže popisek přidáváme pseudoelementem na odkaz. */
#header .site-name a {
  display: inline-block;
  text-align: left;
  /* Samba dava odkazu na mobilu display:flex - popisek by se z bloku stal
     flex polozkou vedle loga a v uzkem miste se zalomil na dva radky.
     Sloupcovy smer ho drzi pod logem at uz odkaz konci jako flex nebo blok. */
  flex-direction: column;
  align-items: flex-start;
}
#header .site-name a::after {
  content: 'E-shop';
  display: block;
  white-space: nowrap;
  margin-top: 2px;
  font-family: var(--sk-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--sk-brown);
}
/* Pod 768 px ma hlavicka pevnych 60 px a .site-name z toho po paddingu zbyva
   28 px - na logo i popisek pod nim to nestaci a popisek se orizne.
   Na mobilu ho proto nezobrazujeme, logo samo nese nazev. */
@media (max-width: 767px) {
  #header .site-name a::after { display: none; }
}

/* Samba drží .site-name svislý padding 16 px, ale hlavička má na mobilu jen
   60 px: 16 + logo 44 + 16 = 76 px se do ní nevejde, obsah přeteče a logo se
   přilepí k dolní hraně (nejvíc vidět ve fixní liště při rolování nahoru).
   8 + 44 + 8 = 60 sedí přesně. */
@media (max-width: 767px) {
  /* Samba to má na (1,3,0) — `#header .site-name` by neprošlo. */
  #header .header-top .header-top-wrapper .site-name,
  #header .header-top .header-top-wrapper h1.site-name {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Strop loga platí VŽDY, ne jen v jednořádkovém režimu: Samba od 992 px ruší
   vlastní strop (.site-name a img { max-height: auto }), takže by se logo
   vykreslilo v původních 530x202 a rozbilo hlavičku i v jejím vlastním
   dvouřádkovém rozvržení. */
#header .header-top .header-top-wrapper .site-name a img {
  max-height: 44px;      /* Sambin dvouřádkový režim má .header-top vysoký 60 px */
  max-width: none;
  width: auto;
  height: auto;
}
/* v jednořádkovém režimu je hlavička vyšší, logo může být větší */
#header.sk-header-inline .header-top .header-top-wrapper .site-name a img {
  max-height: 64px;
}

/* Grid, ne flex: u flexu pruh s navigací nedorostl do volného místa a ikony
   se nedržely u pravého okraje (měřeno na 1920 px: pruh 613 px, 678 px místa
   zůstalo nevyužitých). Grid se třemi sloupci je deterministický.
   .user-action je skrytý kontejner popupů — dostane vlastní řádek přes celou
   šířku, jinak by zabral prostřední sloupec. */
/* Samba drží #header .header-top { height: 60px } a pouští ho na auto až od
   992 px. V jednořádkovém režimu je hlavička vyšší, takže výšku uvolníme sami —
   bez toho z ní logo přetékalo a lišta se ořezávala (nahlášeno na 889 px). */
#header.sk-header-inline .header-top { height: auto; }

/* Vyšší lišta — semikov.cz má hlavičku vzdušnější než Sambiných 60 px.
   Zápisem `padding: 14px 0` by se vynuloval vodorovný padding .containeru
   a logo by se přilepilo k okraji stránky — proto jen svislé strany. */
#header.sk-header-inline .header-top .header-top-wrapper {
  padding-top: 14px;
  padding-bottom: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  height: auto;
}
#header.sk-header-inline .header-top .header-top-wrapper > div { width: auto; }

/* prázdný levý sloupec, kterým Samba držela logo na středu */
#header.sk-header-inline .header-top .header-top-wrapper .navigation-tools { display: none; }

#header.sk-header-inline .header-top .header-top-wrapper .site-name {
  grid-column: 1;
  width: auto;
  max-width: none;
  text-align: left;
  padding: 8px 0;
}
/* v jednořádkovém režimu je hlavička vyšší, logo může být větší */
#header.sk-header-inline .header-top .header-top-wrapper .site-name a img {
  max-height: 64px;
}

/* Přesunutý navigační pruh = prostřední sloupec.
   Specificita: Samba má #header .header-top .header-top-wrapper > div
   {flex-grow:0; width:33.333%} = (1,2,1), proto třída i v posledním kroku. */
#header.sk-header-inline .header-top .header-top-wrapper > div.header-bottom-wrapper {
  grid-column: 2;
  min-width: 0;
  width: auto;
  position: relative;
}

#header.sk-header-inline .header-top .header-top-wrapper .navigation-buttons {
  grid-column: 3;
  width: auto;
}

#header.sk-header-inline .header-top .header-top-wrapper > .user-action {
  grid-column: 1 / -1;
}

/* původní spodní pruh je po přesunu prázdný */
#header.sk-header-inline .header-bottom { display: none; }

/* --------------------------------------------------------------------------
   4. Navigace
   -------------------------------------------------------------------------- */
/* Průhledný pás dává smysl jen v jednořádkové hlavičce na desktopu. Na mobilu
   je #navigation vysunovací panel přes celou obrazovku a bez pozadí přes něj
   prosvítala stránka (a vypadal jako nefunkční). */
#header.sk-header-inline #navigation .navigation-in { background-color: transparent; }
/* Sambin vysunovací panel je bílý; položky v něm jsou taky bílé karty, takže
   splývaly. Krémová je drží čitelné a sedí k hlavičce. */
@media (max-width: 767px) {
  #navigation .navigation-in { background-color: var(--sk-cream); }
}

/* Typografie menu 1:1 podle semikov.cz — .main-navigation { font-size: 22px;
   font-weight: 600 } a bez vlastní font-family, takže dědí Quicksand z body.
   Samba navíc dává verzálky (.navigation-in>ul>li>a{text-transform:uppercase}),
   starý web je nemá — shazujeme. */
#navigation .menu-level-1 > li > a,
/* text položky je uvnitř <b> a Samba má b{font-weight:400}, což váhu na <a>
   přebíjelo — proto se musí nastavit i na tom <b> */
#navigation .menu-level-1 > li > a b {
  font-family: var(--sk-font);
  font-weight: 600;
  /* 18px podle nového webu LUTcare (semikov.cz měl 22px) */
  font-size: 18px;
  /* line-height tu ZÁMĚRNĚ nepřepisujeme: Samba dává .navigation-in strip
     pevných 46 px s overflow:hidden a položka s vyšším řádkováním z něj
     vyleze — hover pozadí se pak ořízne zespodu a vypadá useknuté.
     Vyšší lištu dělá padding na .header-top-wrapper, ne řádkování. */
  text-transform: none;
  letter-spacing: 0;
  color: var(--sk-brown);   /* semikov.cz: .main-navigation li { color: #713E0E } */
}
#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li.active > a { color: var(--sk-green); }

#navigation .menu-level-2 { background-color: var(--sk-cream); }

/* Podmenu ukotvené pod svou položkou.
   Samba ho staví jako celoširoký panel: .menu-level-2 { position:absolute;
   left:0; width:100% }, a protože <li> je position:static, počítá se to vůči
   .navigation-in — což je ten 9999em široký měřicí pás. V původní celoširoké
   liště to vypadá jako mega-menu, v našem užším sloupci panel ulétne mimo
   položku (měřeno: položka na 384 px, panel na 208 px a široký 1149 px).
   Stačí udělat z <li> pozicovaný kontext; splitMenu() to neovlivní. */
#header.sk-header-inline #navigation ul.menu-level-1 > li { position: relative; }
#header.sk-header-inline #navigation ul.menu-level-2 {
  left: 0;
  width: auto;
  min-width: 340px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(85, 66, 61, .15);
}
/* Položka podmenu je flex řádek: náhled (a.menu-image, pevných 132 px) + text.
   V Sambině celoširokém panelu se jich vedle sebe vejde víc, u nás byla <li>
   široká jen 74 px a obsah z ní přetékal přes sousední položku. */
#header.sk-header-inline #navigation ul.menu-level-2 > li {
  width: 100%;
  display: flex;
  align-items: center;
}

/* Kategorie mají fotky na bílém pozadí, které na krémové svítí jako obdélník.
   mix-blend-mode: multiply nechá bílou splynout s podkladem — bez zásahu do
   souborů, takže to platí i pro obrázky nahrané později v administraci. */
#navigation .menu-level-2 .menu-image img { mix-blend-mode: multiply; }

/* Hero na titulce: nadpis, perex, pod tím scéna se Semíkem.
   Starý web má tuhle část na krémovém pozadí (body #f8eeda), Shoptet ji dává
   na světlou plochu obsahu — dorovnáváme. */
.in-index .welcome-wrapper {
  background-color: var(--sk-cream);
}
.sk-hero-lead {
  max-width: 640px;
  margin: 0 auto 8px;
  text-align: center;
  font-size: 20px;              /* .f-20 na semikov.cz */
  font-weight: 600;
  line-height: 1.6;
  color: var(--sk-text);
}

/* Ilustrace Semíka u "Naše prostory" mají v původní šabloně pevné vysunutí
   mimo kartu (left:-178px, right:-190px). Na Shoptetu je obsahový sloupec užší,
   takže vylezly z okna a dělaly vodorovný přetok (92 px na 1280).
   Pod 1400 px je proto schováváme — jsou dekorativní. Řešit to přes
   overflow:hidden nechceme, uřízlo by to i rozbalené podmenu. */
@media (max-width: 1399px) {
  .sk-content .signpost__semikLeft,
  .sk-content .signpost__semikRight,
  .sk-content .signpost__semikLeftHand,
  .sk-content .signpost__semikRightHand { display: none; }
}
.sk-content .signpost__box .signpost__semikLeft  { left:  calc(-1 * min(178px, var(--sk-side, 0px))); }
.sk-content .signpost__box .signpost__semikRight { right: calc(-1 * min(190px, var(--sk-side, 0px))); }
.sk-content .signpost__box .signpost__semikLeftHand  { left:  calc(-1 * min(64px, var(--sk-side, 0px))); }
.sk-content .signpost__box .signpost__semikRightHand { right: calc(-1 * min(40px, var(--sk-side, 0px))); }

/* Svislý rytmus titulky.
   Měřeno: hero -> produkty 40 px, produkty -> sekce 80 px, mezi zelenou
   sekcí a partnery 0 px, k tomu zděděné padding-bottom: 144 px. Sjednocujeme
   na jednu proměnnou; 144 px zůstává jen tam, kde do spodního odsazení
   zasahuje vlnitý předěl (::after), jinak by překryl text. */
:root { --sk-gap: 80px; }
@media (max-width: 767px) { :root { --sk-gap: 48px; } }

#content .homepage-products-heading,
#content .homepage-group-title { margin-top: var(--sk-gap); }

.sk-content > .sk-hp-section { margin-top: var(--sk-gap); }
.sk-content > .sk-hp-section:first-child { margin-top: 0; }

/* sekce bez vlnitého předělu dole nepotřebují 144px odsazení */
.sk-content > .sk-hp-section.bottom:not(.bottomGray):not(.bottomWhite) {
  padding-bottom: var(--sk-gap);
}

/* Rozcestník kategorií pod perexem na titulce. */
.sk-hero-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 24px auto 0;
  max-width: 900px;
}
.sk-hero-cats a {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 15px;          /* stejné jako .btn na semikov.cz */
  background-color: var(--sk-green);
  color: #fff;
  font-family: var(--sk-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.sk-hero-cats a:hover,
.sk-hero-cats a:focus {
  background-color: #49661d;
  color: #fff;
}

/* Blok článků na titulce.
   Samba ho staví jako překryv: .text je position:absolute přes obrázek a karta
   má pevnou výšku s overflow:hidden. U článků bez náhledu (7 z 12 jich nemá)
   pak text visí v prázdnu a ořezává se. Děláme z toho klasickou kartu —
   obrázek nahoře, text pod ním — což sedí ke zbytku webu. */
#content .homepage-blog-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 992px) {
  #content .homepage-blog-wrapper { grid-template-columns: repeat(3, 1fr); }
}
#content .homepage-blog-wrapper .homepage-group-title {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 8px;
}
#content .homepage-blog-wrapper .news-item {
  display: block;
  width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
  height: auto;
  overflow: visible;
  background-color: var(--sk-offwhite);
  border-radius: 8px;
}
#content .homepage-blog-wrapper .news-item > a {
  display: block;
  height: auto;
  overflow: hidden;
  border-radius: 8px;
}
#content .homepage-blog-wrapper .news-item .image {
  display: block;
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
}
#content .homepage-blog-wrapper .news-item .image img {
  width: 100%;
  height: 190px;
  max-height: none;
  object-fit: cover;
  display: block;
}
/* Text zpátky do toku, ať se karta natáhne podle obsahu.
   Samba u karty s obrázkem kreslí tmavý překryv se světlým písmem (počítá
   s tím, že text leží na fotce) — v klasické kartě je to nečitelné, takže
   pozadí i barvy srovnáváme se zbytkem webu. */
#content .homepage-blog-wrapper .news-item > a > .text,
#content .homepage-blog-wrapper .news-item .text {
  position: static;
  height: auto;
  overflow: visible;
  padding: 16px;
  display: block;
  background: var(--sk-offwhite);
  background-image: none;
  color: var(--sk-text);
}
#content .homepage-blog-wrapper .news-item .text .description,
#content .homepage-blog-wrapper .news-item .text .read-article,
#content .homepage-blog-wrapper .news-item .text .read-article i { color: var(--sk-text); }
#content .homepage-blog-wrapper .news-item .title {
  font-weight: 700;
  color: var(--sk-green-dark);
  display: block;
  margin-bottom: 8px;
}
#content .homepage-blog-wrapper .news-item .description {
  overflow: visible;
  height: auto;
  color: var(--sk-text);
}

/* Pozn.: zkoušel jsem sekce prolomit přes celou šířku okna (jako na starém
   webu). Přes 100vw to dělalo vodorovný přetok (vw počítá i scrollbar), přes
   měřený odsazený bleed se to rozjelo ještě víc (zelená sekce 1871 px při okně
   1600). Necháváme sekce v obsahovém sloupci — vizuálně to drží a nic nepřetéká. */

/* Barvy vln mezi sekcemi.
   Vlna je pseudoelement, jehož background-color vyplňuje plochu NAD tvarem,
   takže musí odpovídat barvě předchozí sekce. Zelená sekce si z původního
   webu nese třídu topGray (#f9edd9), jenže tam nad ní byla šedá sekce —
   u nás je bílá, takže mezi nimi svítil krémový proužek. Pod zelenou je
   rovnou pozadí stránky. */
/* .topGray/.bottomGray v selektoru kvůli specificitě — původní pravidlo má
   stejnou váhu a v bundlu je dřív, takže by jinak vyhrálo. */
.sk-content .sk-hp-section.section--green.top.topGray::before,
.sk-content .sk-hp-section.section--green.top::before { background-color: var(--sk-offwhite); }
.sk-content .sk-hp-section.section--green.bottom.bottomGray::after,
.sk-content .sk-hp-section.section--green.bottom::after { background-color: var(--sk-offwhite); }

/* Nadpisy v přeneseném obsahu.
   Stará šablona měla u velkých nadpisů řádkování menší než velikost písma
   (h2: 80px font, 38px line-height). Na starém webu se nikdy nezalomily, takže
   to nevadilo; v užším sloupci Shoptetu se řádky překrývaly. */
.sk-content h1, .sk-content h2, .sk-content h3,
.sk-content .h1, .sk-content .h2, .sk-content .h3 {
  line-height: 1.15;
}

/* Galerie v přeneseném obsahu.
   Starý web ji měl jako Glide.js slider; ta knihovna na Shoptetu není, takže
   migrace fotky vytáhla ven do prosté mřížky (viz tools/migrate.py). */
.sk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.sk-gallery h3 {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  text-align: center;
}
.sk-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* --------------------------------------------------------------------------
   5. Tlačítka a formuláře
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--sk-font);
  font-weight: 700;
  border-radius: 15px;    /* doloženo: .btn v theme/style.css semikov.cz */
}

/* Barvy tlačítek vážeme na vlastní --sk-* tokeny, ne na --color-primary/secondary:
   ty mění význam podle šablony (v Sambě je primary plocha, ne akcent). */

/* hlavní CTA — do košíku, objednat */
.btn.btn-primary,
.btn.btn-conversion {
  background-color: var(--sk-green);
  border-color: var(--sk-green);
  color: #fff;
}
.btn.btn-primary:hover,
.btn.btn-conversion:hover,
.btn.btn-primary:focus,
.btn.btn-conversion:focus {
  background-color: #49661d;
  border-color: #49661d;
  color: #fff;
}

/* sekundární akce — hnědá */
.btn.btn-default {
  background-color: var(--sk-brown);
  border-color: var(--sk-brown);
  color: #fff;
}
.btn.btn-default:hover,
.btn.btn-default:focus {
  background-color: #442508;
  border-color: #442508;
  color: #fff;
}

.form-control { font-family: var(--sk-font); }
.form-control:focus { border-color: var(--sk-green); }

/* validace — Semíkov používá cihlovou */
.has-error .form-control, .error-message { border-color: var(--sk-danger); color: var(--sk-danger); }

/* Newsletter nad patičkou je duplicita — stejný formulář je i v patičce. */
.footer-newsletter-full-width { display: none; }

/* --------------------------------------------------------------------------
   Stránka kategorie
   Samba tu vykresluje produkty kompaktně: .product > .p je řádek s náhledem
   70x70 vlevo a textem vpravo, dlaždice má 81 px na výšku. Vedle karet na
   titulce to působí jako jiný web, tak z toho děláme stejné karty.
   -------------------------------------------------------------------------- */

/* Typografie: nadpis kategorie měl 22px s řádkováním 56px, což je nepoměr;
   nadpisy bloků 17.8/38. Srovnáváme na velikosti a řádkování zbytku webu. */
#content h1 {
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 16px;
}
#content .products-top-wrapper .homepage-group-title,
#content .homepage-group-title {
  font-size: 24px;
  line-height: 1.2;
}

/* Dlaždice podkategorií: Shoptet je kreslí jako bílé obdélníky s šedým
   rámečkem. Dáváme jim krémové pozadí, zaoblení 15px jako .btn a hnědý text. */
#content .subcategories { gap: 12px; flex-wrap: wrap; }
#content .subcategories a {
  background-color: var(--sk-cream);
  border: none;
  border-radius: 15px;
  color: var(--sk-brown);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 32px 8px 8px;
  transition: background-color 150ms ease;
}
#content .subcategories a:hover,
#content .subcategories a:focus {
  background-color: var(--sk-green);
  color: #fff;
}
/* Samba dlaždicím vnucuje procentní rozdeleni: .image{width:40px} a
   .text{width:calc(100% - 40px)}. Pri delsim nazvu se pak obrazek scvrkne.
   Davame obrazku pevnou stopu a text nechavame rust - dlazdice roste s nim. */
#content .subcategories li { flex: 0 0 auto; width: max-content; }
#content .subcategories li a {
  width: auto;
  max-width: none;
  padding: 5px 32px 5px 8px;
  gap: 10px;
}
#content .subcategories li a .image {
  flex: 0 0 56px;
  width: 56px;
  max-width: none;
}
#content .subcategories li a .image img {
  width: auto;
  max-width: 100%;
  max-height: 40px;
}
#content .subcategories li a .text {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  max-height: none;
  padding-left: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* drobečková navigace měla bílý pruh, obsah je krémový */
.breadcrumbs,
#breadcrumbs,
.navigation-in-breadcrumbs { background-color: var(--sk-offwhite); }

/* Mřížka jen pro výpis kategorie. Bez .products-page by pravidlo chytlo
   i .products-block uvnitř .product-slider na homepage - to je track
   slideru (display:flex) a grid z nej udelal osmiradkovou tabulku. */
#content .products-page.products-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 992px) {
  #content .products-page.products-block { grid-template-columns: repeat(4, 1fr); }
}
#content .products-page.products-block > .product {
  width: 100%;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
  background-color: var(--sk-offwhite);
  border-radius: 15px;
  overflow: hidden;
}
#content .products-page.products-block > .product > .p {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
}
#content .products-page.products-block > .product .image {
  width: 100%;
  height: 200px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#content .products-page.products-block > .product .image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 200px;
  object-fit: contain;
}
#content .products-page.products-block > .product .p-in { width: 100%; }
#content .products-page.products-block > .product .name,
#content .products-page.products-block > .product .p-in-in a {
  color: var(--sk-green-dark);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Patička
   -------------------------------------------------------------------------- */
#footer.footer {
  background-color: var(--sk-footer);
  color: var(--sk-cream);
}
/* pozn.: v template-11 bylo nutné shodit i #footer > .container (Shoptet ho barví
   na bílo a překryl pozadí patičky). V Sambě ten element neexistuje. */
#footer.footer a { color: var(--sk-cream); }
#footer.footer a:hover { color: #fff; }

/* Typografie patičky 1:1 podle referenčního webu (změřeno na
   hura.mynanook.cz/lutcare): nadpisy 18px/700, řádkování 27px, odsazení 9px,
   běžný text 14px/21px, patička odsazená 54px. Samba má nadpisy 20px zeleně
   s bílou čárkou pod nimi a text 18px — proto působila roztahaně. */
#footer.footer {
  padding-top: 54px;
  padding-bottom: 54px;
}
#footer .footer-rows,
#footer .footer-rows p,
#footer .footer-rows li,
#footer .footer-rows a,
#footer .footer-rows span,
#footer .footer-rows label,
#footer .footer-rows input {
  font-size: 14px;
  line-height: 21px;
}
/* Nad prvním nadpisem se sčítalo 126 px (54 patička + 32 sloupec + 40 nadpis).
   Sloupcům i nadpisu proto horní odsazení nulujeme. */
#footer .footer-rows [class*="custom-footer__"] { padding-top: 0; }

#footer .pageElement__heading {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Úvodní věta u newsletteru je zbytečná — formulář mluví sám za sebe. */
#footer .newsletter-header p { display: none; }

/* Ikony sociálních sítí: bílé kolečko s hnědým vnitřkem jako v referenci.
   Samba kreslí glyf světlý, takže na bílém kolečku zanikal. */
#footer .social-icon {
  background-color: #fff;
  color: var(--sk-footer);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
#footer .social-icon,
#footer .social-icon::before,
#footer .social-icon i,
#footer .social-icon svg { color: var(--sk-footer); fill: var(--sk-footer); }
#footer .social-icon:hover { background-color: var(--sk-cream); }
#footer .pageElement__heading::after { display: none; }

/* Spodní lišta s copyrightem byla bílá a od hnědé patičky se odrážela. */
#footer .footer-bottom-full-width,
#footer .footer-bottom {
  background-color: var(--sk-footer);
}
#footer .footer-bottom,
#footer .footer-bottom a,
#footer .footer-bottom span {
  color: var(--sk-cream);
}
#footer .footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   ponytail: vynecháno zatím
   - vlnité předěly sekcí (podklady/brand/pozadi/*.png) — hlavní vizuální podpis
     Semíkova, ale potřebují rozhodnout, kam na Shoptet stránce patří, a webpack
     copy plugin, aby se PNG dostaly do dist/. Přidat, až bude schválený layout.
   - maskot Semík (podklady/brand/ilustrace/) — stejný důvod.
   - stylování produktového detailu a košíku — na prázdném shopu není co ladit,
     až budou nahrané produkty.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. Detail produktu — spinbox a akční ikony

   Samba je kreslí systémově: spinbox má šedý rámeček (#919191) a ostré rohy
   8px, ikony jsou holé odkazy. Vedle zeleného tlačítka s rádiusem 15px to
   působilo cize, tak je srovnáváme do stejného jazyka — krémová plocha,
   rádius 15px jako .btn, hnědý text a zelený hover.
   -------------------------------------------------------------------------- */
#content .quantity {
  width: 120px;
  padding: 0 36px;
  background-color: var(--sk-offwhite);
  border: 1px solid rgba(113, 62, 14, .2);
  border-radius: 15px;
  overflow: hidden;
}
#content .quantity > label {
  /* Samba tlacitka pozicuje absolutne a misto pro ne drzi paddingem
     (0 24px). Kdyz jim zmenime sirku, musi se posunout i ten padding,
     jinak cislo nesedi na stredu. */
  display: block;
  width: 100%;
}
#content .quantity .amount {
  width: 100%;
  background-color: transparent;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--sk-brown);
}
#content .quantity .decrease,
#content .quantity .increase {
  width: 36px;
  background-color: var(--sk-cream);
  border: none;
  border-radius: 0;
  color: var(--sk-brown);
  transition: background-color 150ms ease, color 150ms ease;
}
#content .quantity .decrease:hover,
#content .quantity .increase:hover {
  background-color: var(--sk-green);
  color: #fff;
}
#content .quantity .decrease__sign,
#content .quantity .increase__sign { color: inherit; }

/* Ikony Tisk / Zeptat se / Sdílet - jen přebarvit, žádný podklad. */
#content .link-icons .link-icon {
  color: var(--sk-brown);
  font-weight: 600;
  transition: color 150ms ease;
}
#content .link-icons .link-icon:hover,
#content .link-icons .link-icon:focus-visible { color: var(--sk-green); }

/* --------------------------------------------------------------------------
   8. Kontakty — podle hura.mynanook.cz/lutcare/kontakt/

   Formulář vkládá Shoptet shortcodem #FORM[code=contact]# (obsah stránky),
   tady ho jen převlékáme do reference: bílá pole s rádiusem 15px na béžové
   kartě, zelené tlačítko vpravo.
   -------------------------------------------------------------------------- */

/* Reference nemá nad "Kontaktní informace" ještě jeden nadpis stránky. */
article.pageArticleDetail:has(.sk-contacts) > header { display: none; }

.sk-contacts { max-width: 1116px; margin: 40px auto 0; }
.sk-contacts p { margin: 0 0 2px; }
.sk-contacts a { color: var(--sk-brown); text-decoration: underline; }
.sk-contacts a:hover { color: var(--sk-green); }
.sk-contacts__title {
  margin: 0 0 24px;
  color: var(--sk-green);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.sk-contacts__role,
.sk-contacts__name { font-weight: 700; color: var(--sk-brown); }
.sk-contacts__general { margin-bottom: 24px; }
.sk-contacts__legal { margin-bottom: 40px; }
.sk-contacts__people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 767px) {
  .sk-contacts__people { grid-template-columns: repeat(2, 1fr); }
  .sk-contacts__title { font-size: 32px; }
}

/* Karta s formulářem 1:1 podle reference: zelený pás s roztrženými okraji,
   na něm béžová karta, jejíž horní a dolní "čepička" je obrázek (proto ten
   organický tvar, ne border-radius), a dva listy v rozích. */
.sk-contact-form {
  position: relative;
  margin-top: 120px;
  padding: 36px 0 144px;
  background-color: #a4bc72;
}
.sk-contact-form::before,
.sk-contact-form::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.sk-contact-form::before {
  top: -79px;
  background-image: url(/user/documents/template/img/green_top.webp);
}
.sk-contact-form::after {
  /* trhlina leží uvnitř pásu, ne pod ním — jinak by překryla horní okraj
     patičky a její obsah by se přilepil k trhlině */
  bottom: 0;
  /* Obrázek je nahoře zelený a dole průhledný, barvu pod ním dodává
     pseudoelement. Sedí rovnou na patičce, takže dole pokračuje její hnědá —
     s krémovou tam zbýval nesmyslný proužek mezi trhlinou a patičkou. */
  background-color: var(--sk-footer);
  background-image: url(/user/documents/template/img/green_bottom.webp);
}

.sk-contact-form__box {
  position: relative;
  max-width: 1116px;
  margin: 0 auto;
  /* bez flow-root by margin karty (163/133 px na čepičky) propadl ven a listy
     v rozích by se kotvily k nesprávné výšce */
  display: flow-root;
}
/* listy v rozích */
.sk-contact-form__box::before,
.sk-contact-form__box::after {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.sk-contact-form__box::before {
  top: -30px;
  left: -70px;
  width: 186px;
  height: 263px;
  background-image: url(/user/documents/template/img/cf_contact-form-tl.webp);
}
.sk-contact-form__box::after {
  right: -70px;
  bottom: -40px;
  width: 180px;
  height: 248px;
  background-image: url(/user/documents/template/img/cf_contact-form-br.webp);
}

.sk-contact-form__card {
  position: relative;
  margin: 163px 0 133px;
  padding: 0 50px;
  background-color: #efe9dd;
}
.sk-contact-form__card::before,
.sk-contact-form__card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.sk-contact-form__card::before {
  top: -162px;
  height: 163px;
  background-image: url(/user/documents/template/img/cf_bg_top.webp);
}
.sk-contact-form__card::after {
  bottom: -132px;
  height: 133px;
  background-image: url(/user/documents/template/img/cf_bg_bottom.webp);
}

.sk-contact-form__title {
  margin: 0 0 24px;
  color: var(--sk-green);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
/* reference nad formulářem žádný lead nemá */
.sk-contact-form__card > p { display: none; }

/* Jméno a e-mail vedle sebe, zpráva přes celou šířku — jako v referenci. */
/* v referenci je formulář užší než karta (785 px v 1116) a na střed */
#formContact { width: 100%; max-width: 785px; margin: 0 auto; }
#formContact fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 0;
  padding: 0;
  border: none;
}
#formContact .form-group { margin: 0; }
#formContact .form-group:has(textarea),
#formContact .consents,
#formContact .submit-wrapper { grid-column: 1 / -1; }
#formContact .form-control-wrapper { max-width: none; }
#formContact .form-control {
  width: 100%;
  max-width: none;   /* Samba pole zastropuje na 440 px */
  height: 45px;
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #ebf2f5;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 500;
  color: var(--sk-text);
}
#formContact textarea.form-control { height: 153px; resize: vertical; }
#formContact .form-control::placeholder { color: #000; opacity: 1; }
#formContact .form-control:focus {
  border-color: var(--sk-green);
  outline: none;
}
/* popisky nahrazujeme placeholderem (dělá script.js) */
#formContact label { display: none; }
#formContact .consents {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 34px;
}
#formContact .consents input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--sk-green);
}
#formContact .sk-consent-missing { outline: 2px solid var(--sk-danger); outline-offset: 2px; }
#formContact .sk-consent-text { display: block; margin: 0; font-size: 16px; color: var(--sk-brown); }
#formContact .sk-consent-text a { color: inherit; text-decoration: underline; }
#formContact .submit-wrapper { text-align: right; }
#formContact .btn {
  padding: 18px 36px;
  font-size: 19px;
  font-weight: 600;
  border-radius: 15px;
}
/* listy jsou dekorace a vylézají 70 px z boku — v užším okně by dělaly přetok */
@media (max-width: 1279px) {
  .sk-contact-form__box::before,
  .sk-contact-form__box::after { display: none; }
}
@media (max-width: 767px) {
  .sk-contact-form__card { margin: 90px 0 70px; padding: 0 20px; }
  .sk-contact-form__card::before { top: -89px; height: 90px; }
  .sk-contact-form__card::after { bottom: -69px; height: 70px; }
  .sk-contact-form__box::before, .sk-contact-form__box::after { display: none; }
  .sk-contact-form__title { font-size: 32px; }
  /* v referenci je formulář užší než karta (785 px v 1116) a na střed */
#formContact { width: 100%; max-width: 785px; margin: 0 auto; }
#formContact fieldset { grid-template-columns: 1fr; }
}

/* Textové stránky (kontakty, podmínky, ochrana údajů) jedou na krémové jako
   reference, ne na světlé ploše obsahu. Barvu maluje #content-wrapper,
   ne body (ten je krémový odjakživa). */
body:has(article.pageArticleDetail) #content-wrapper,
body:has(article.pageArticleDetail) .breadcrumbs,
body:has(article.pageArticleDetail) .navigation-in-breadcrumbs {
  background-color: var(--sk-cream);
}

/* --------------------------------------------------------------------------
   9. Textové stránky (obchodní podmínky, ochrana údajů, …)

   Shoptet je sází přes celou šířku obsahu — 1393 px, ~180 znaků na řádek.
   Zužujeme na čitelnou míru a děláme z toho typografickou stránku.
   Kontakty mají vlastní rozvržení, ty vynecháváme.
   -------------------------------------------------------------------------- */
body:not(.in-kontakty) article.pageArticleDetail {
  max-width: 760px;      /* ~75 znaků na řádek při 18px */
  margin: 0 auto;
  padding-bottom: 40px;
}
body:not(.in-kontakty) article.pageArticleDetail > header h1 {
  margin-bottom: 40px;
  text-align: center;
}
body:not(.in-kontakty) article.pageArticleDetail p {
  margin: 0 0 16px;
  line-height: 1.75;
}
body:not(.in-kontakty) article.pageArticleDetail ul,
body:not(.in-kontakty) article.pageArticleDetail ol {
  margin: 0 0 16px;
  padding-left: 24px;
  line-height: 1.75;
}
body:not(.in-kontakty) article.pageArticleDetail li { margin-bottom: 8px; }

/* Shoptetí výchozí texty mají velikosti napsané inline (`font-size: 12pt`
   pro text, `14pt` pro názvy sekcí). Inline styl se z tabulky stylů jinak
   než `!important` přebít nedá — tady je to jediná cesta.
   12pt = 16px, což je pod naším základem; 14pt povyšujeme na plnohodnotný
   mezinadpis, protože v obsahu žádné <h2> nejsou. */
body:not(.in-kontakty) article.pageArticleDetail [style*="12pt"] {
  font-size: 18px !important;
}
body:not(.in-kontakty) article.pageArticleDetail [style*="14pt"] {
  display: block;
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sk-green-dark);
}
body:not(.in-kontakty) article.pageArticleDetail p:has([style*="14pt"]) {
  margin-top: 48px;
  margin-bottom: 16px;
}

/* Fotka Semíka v boxu "Potřebujete pomoc?" (košík) má v Shoptetu zapečené bílé
   pozadí a na béžové ploše z ní byl bílý obdélník. V administraci se ta fotka
   nedá vyměnit — pole "Fotografie obchodníka" jen zobrazuje skryté
   input[name=image] s cestou do /user/merchant/, kam nemáme ani přes SFTP
   přístup. Podkládáme proto vlastní verzi s průhledným pozadím. */
.contact-box img[src*="semik_mav"] {
  content: url(/user/documents/template/img/semik_mav.png);
  /* Samba obrázek pozicuje absolutně s pevnou výškou 152 px do boxu, který je
     vysoký 100 px — Semík z něj proto vždycky vylezl. Zmenšujeme ho a boxu
     dáváme výšku, aby se do ní vešel. */
  height: 120px;
  width: auto;
  top: auto;
  bottom: 0;
}
.contact-box:has(img[src*="semik_mav"]) {
  min-height: 136px;
  padding-left: 84px;   /* 60 px obrázek + odstup, místo Sambiných 120 px */
}

/* --------------------------------------------------------------------------
   10. Ověření věku 18+ (alkohol)
   -------------------------------------------------------------------------- */
body.sk-age-open { overflow: hidden; }
.sk-age {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(30, 22, 10, .6);
}
.sk-age__card {
  max-width: 480px;
  width: 100%;
  padding: 40px;
  background-color: var(--sk-cream);
  border-radius: 24px;
  text-align: center;
}
.sk-age__title {
  margin: 0 0 12px;
  color: var(--sk-green-dark);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.sk-age__text { margin: 0 0 28px; color: var(--sk-text); }
.sk-age__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sk-age__yes {
  padding: 14px 32px;
  background-color: var(--sk-green);
  border: 1px solid var(--sk-green);
  color: #fff;
  font-size: 18px;
}
.sk-age__yes:hover { background-color: var(--sk-green-dark); border-color: var(--sk-green-dark); color: #fff; }
/* tlačítko dostává focus hned po otevření, výchozí modrý prstenec prohlížeče
   by v krémové kartě křičel */
.sk-age__yes:focus { outline: none; }
.sk-age__yes:focus-visible { outline: 2px solid var(--sk-brown); outline-offset: 3px; }
.sk-age__no {
  padding: 6px;
  background: none;
  border: none;
  color: var(--sk-brown);
  font-family: inherit;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}
.sk-age__no:hover { color: var(--sk-green); }

/* --------------------------------------------------------------------------
   11. Stránka 404

   Samba barví nadpis `--color-primary`, což je u nás krémová plocha — na
   krémovém pozadí byl nadpis neviditelný. Šedou ikonu zákazu (ikonový font
   v h2::after) nahrazujeme Semíkem.
   -------------------------------------------------------------------------- */
.empty-content-404 h1 {
  color: var(--sk-brown);
  font-size: 44px;
  line-height: 1.2;
}
.empty-content-404 h2 {
  margin-bottom: 8px;
  color: var(--sk-green-dark);
  font-size: 24px;
}
.empty-content-404 p { color: var(--sk-text); }
.empty-content-404 h2::after {
  content: '';
  display: block;
  width: 160px;
  height: 260px;          /* contain drží poměr 222x605, vyjde 95x260 */
  margin: 24px auto 8px;
  background-image: url(/user/documents/template/img/semik_404.webp);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/*!*************************************************************************************************************************!*\
  !*** css ../.config/yarn/global/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./src/header/icons.css ***!
  \*************************************************************************************************************************/
/* ==========================================================================
   Ikony v hlavičce — náhrada Shoptetího ikonového fontu
   Samba je kreslí glyfy (.icon-search:before { content: "\e920" }, font shoptet)
   tenkou linkou. semikov.cz má vlastní ikony jako plné robustní tvary
   (podklady/brand/ikony/facebook.svg, instagram.svg) — tomu je přizpůsobujeme.

   mask-image, ne background-image: maska bere barvu z background-color, takže
   ikony dědí currentColor a samy respektují hover na zelenou, který má Samba
   na .navigation-buttons a:hover. Žádná duplicitní logika barev.

   Zdrojová SVG: podklady/brand/ikony/{search,user,cart}.svg
   POZOR na dvě věci v data URI:
     - '#' musí být %23, jinak ho prohlížeč utne jako fragment (proto fill="black")
     - SVG musí mít width/height, ne jen viewBox, jinak je maska nulové velikosti
   ========================================================================== */

#header .icon-search,
#header .icon-login,
#header .icon-cart {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}

/* glyf fontu pryč, jinak by prosvítal pod maskou */
#header .icon-search::before,
#header .icon-login::before,
#header .icon-cart::before { content: none; }

#header .icon-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2213.5%22 cy=%2213.5%22 r=%228.5%22/%3E%3Cpath d=%22M20 20l7 7%22/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%224%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2213.5%22 cy=%2213.5%22 r=%228.5%22/%3E%3Cpath d=%22M20 20l7 7%22/%3E%3C/g%3E%3C/svg%3E");
}
#header .icon-login {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg fill=%22black%22%3E%3Ccircle cx=%2216%22 cy=%2210.5%22 r=%226%22/%3E%3Cpath d=%22M16 19c-6.1 0-11 4.4-11 9.8 0 .7.6 1.2 1.3 1.2h19.4c.7 0 1.3-.5 1.3-1.2C27 23.4 22.1 19 16 19z%22/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg fill=%22black%22%3E%3Ccircle cx=%2216%22 cy=%2210.5%22 r=%226%22/%3E%3Cpath d=%22M16 19c-6.1 0-11 4.4-11 9.8 0 .7.6 1.2 1.3 1.2h19.4c.7 0 1.3-.5 1.3-1.2C27 23.4 22.1 19 16 19z%22/%3E%3C/g%3E%3C/svg%3E");
}
#header .icon-cart {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg fill=%22black%22%3E%3Cpath d=%22M2.8 3.5a1.9 1.9 0 0 0 0 3.8h2.4l1 4.2 2.9 11.3c.2.9 1 1.5 1.9 1.5h13.4c.9 0 1.7-.6 1.9-1.5l2.6-10.4a1.9 1.9 0 0 0-1.9-2.4H9.6l-.9-3.7A2.6 2.6 0 0 0 6.2 3.5z%22/%3E%3Ccircle cx=%2212.5%22 cy=%2228%22 r=%222.8%22/%3E%3Ccircle cx=%2223.5%22 cy=%2228%22 r=%222.8%22/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg fill=%22black%22%3E%3Cpath d=%22M2.8 3.5a1.9 1.9 0 0 0 0 3.8h2.4l1 4.2 2.9 11.3c.2.9 1 1.5 1.9 1.5h13.4c.9 0 1.7-.6 1.9-1.5l2.6-10.4a1.9 1.9 0 0 0-1.9-2.4H9.6l-.9-3.7A2.6 2.6 0 0 0 6.2 3.5z%22/%3E%3Ccircle cx=%2212.5%22 cy=%2228%22 r=%222.8%22/%3E%3Ccircle cx=%2223.5%22 cy=%2228%22 r=%222.8%22/%3E%3C/g%3E%3C/svg%3E");
}

/*!************************************************************************************************************************!*\
  !*** css ../.config/yarn/global/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./src/header/hero.css ***!
  \************************************************************************************************************************/
/* ==========================================================================
   Hero se Semíkem — přenesené z hpIntro na semikov.cz
   Chování 1:1 podle theme/style.css: na hover se Semík přepne na usmívajícího
   a oba listy se narovnají z ±12deg na 0. Čistě CSS, žádné JS.

   Obrázky leží na Shoptet SFTP (nahrává je ./deploy.sh --assets ze static/img/),
   takže stejné CSS funguje v devu i na ostrém shopu. Zdrojová PNG jsou
   v podklady/brand/ilustrace/, WebP se z nich generuje do static/img/.
   ========================================================================== */

/* Pozn.: velikosti jsou v px, ne rem — rem se počítá od <html>, které má
   Shoptet na 10px, kdežto starý web na 18px (nadpis by vyšel 33px místo 60px).

   .welcome-wrapper = Shoptetí uvítací blok (h1 + text), zůstává editovatelný
   v adminu. Přebarvujeme ho na hpIntro a scénu vkládáme pod něj. */
.in-index .welcome-wrapper {
  text-align: center;
  padding: 70px 16px 0;   /* shorthand s 0 by sebral bocni okraj - text se lepil na hranu */
}
.in-index .welcome .h1,
.in-index .welcome h1 {
  color: var(--sk-green);
  text-transform: uppercase;
  font-size: 60px;
  line-height: 60px;
}
@media screen and (max-width: 1200px) {
  .in-index .welcome .h1, .in-index .welcome h1 { font-size: 50px; line-height: 50px; }
}
@media screen and (max-width: 900px) {
  .in-index .welcome .h1, .in-index .welcome h1 { font-size: 45px; line-height: 45px; }
}
.in-index .welcome p {
  max-width: 600px;
  margin: 25px auto;
  font-weight: 600;
  color: var(--sk-text);
}

/* scéna */
.sk-hero__jungle {
  position: relative;
  margin-top: 40px;
  background-image: url(/user/documents/template/img/jungle_overlay.webp);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  user-select: none;
  /* Listy jsou otocene o 12 stupnu, takze jejich bounding box je sirsi nez
     element (na 390px viewportu 454px) a delal horizontalni overflow.
     `clip` misto `hidden` - hidden by z elementu udelal scroll kontejner. */
  overflow: clip;
}

.sk-hero__semik,
.sk-hero__leaf {
  display: block;
  width: 539px;
  max-width: 100%;
  aspect-ratio: 539 / 485;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

.sk-hero__semik {
  margin: 0 auto;
  background-image: url(/user/documents/template/img/jungle_semik_default.webp);
}
.sk-hero__jungle:hover .sk-hero__semik {
  background-image: url(/user/documents/template/img/jungle_semik_smile.webp);
}

/* Dělící vlna pod scénou.
   Bez ní scéna končí ostrým řezem. Stará šablona kreslila předěly přes
   .section.top:before s obrázkem pozadí; tady stačí jedno pseudoelementové
   překrytí — white_top.png je nahoře průhledný a dole přechází do #fffdf6,
   tedy do barvy následující sekce. */
.sk-hero__jungle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Poměr stran obrázku je 1728x188; v plné výšce ale vlna překrývala moc
     zeleně, tak ji držíme nižší (obrázek se svisle stlačí, tvar zůstane). */
  aspect-ratio: 1728 / 80;
  background-image: url(/user/documents/obsah/white_top.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  pointer-events: none;
}

/* listy leží na stejném plátně 539x485, takže stačí je překrýt a otočit */
.sk-hero__leaf {
  position: absolute;
  bottom: 8px;
  transform-origin: center bottom;
  transition: transform 300ms ease;
}
.sk-hero__leaf--l {
  left: 50%;
  transform: translate(-50%, 0) rotate(12deg);
  background-image: url(/user/documents/template/img/leaf_left.webp);
}
.sk-hero__leaf--r {
  right: 50%;
  transform: translate(50%, 0) rotate(-12deg);
  background-image: url(/user/documents/template/img/leaf_right.webp);
}
.sk-hero__jungle:hover .sk-hero__leaf--l { transform: translate(-50%, 0) rotate(0); }
.sk-hero__jungle:hover .sk-hero__leaf--r { transform: translate(50%, 0) rotate(0); }

@media (prefers-reduced-motion: reduce) {
  .sk-hero__leaf { transition: none; }
}

/*!***************************************************************************************************************************!*\
  !*** css ../.config/yarn/global/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./src/header/content.css ***!
  \***************************************************************************************************************************/
/* ==========================================================================
   Styly přeneseného obsahu — vytaženo z podklady/theme/style.css
   Generuje tools/contentcss.py. Neupravovat ručně.

   Obsah ze starého webu si nese třídy původní šablony (defaultIntro,
   defaultGrid, single-video__*, postGrid...). Bez těchto pravidel se
   vykreslí jako holý sloupec bez mřížky a odsazení.

   Vše je zanořené pod .sk-content, protože názvy jako .container, .btn
   nebo .col se kryjí se Shoptetí šablonou a globálně by ji rozbily.
   ========================================================================== */

.sk-content .h1 { font-size: 46px; }
@media screen and (max-width: 1200px) {
.sk-content .h1 { font-size: 40px; }
}
@media screen and (max-width: 900px) {
.sk-content .h1 { font-size: 35px; }
}
.sk-content .h2 { font-size: 44px; font-weight: 700; }
@media screen and (max-width: 1024px) {
.sk-content .h2 { font-size: 38px; }
}
@media screen and (max-width: 768px) {
.sk-content .h2 { font-size: 32px; }
}
.sk-content .h3 { font-size: 32px; font-weight: 700; }
@media screen and (max-width: 1024px) {
.sk-content .h3 { font-size: 28px; }
}
@media screen and (max-width: 768px) {
.sk-content .h3 { font-size: 24px; }
}
.sk-content .text-center { text-align: center; }
.sk-content .align-items-center { align-items: center; }
.sk-content .mx-auto { margin: 0 auto; }
.sk-content .mb-2 { margin-bottom: 72px !important; }
.sk-content .mb-4 { margin-bottom: 72px !important; }
.sk-content .mt-1 { margin-top: 18px !important; }
.sk-content .mt-2 { margin-top: 36px !important; }
.sk-content .mt-4 { margin-top: 72px !important; }
.sk-content .mr-1 { margin-right: 18px !important; }
.sk-content .f-bold { font-weight: 800; }
.sk-content .f-20 { font-size: 20px; }
.sk-content .c-primary { color: #668E28; }
.sk-content .c-secondary { color: #713E0E; }
.sk-content .c-tertiary { color: #00521B; }
.sk-content .container { max-width: 1430px; width: 100%; margin: 0 auto; position: relative; padding: 0 15px; }
.sk-content .container.small { max-width: 1130px; }
.sk-content .section { position: relative; padding: 36px 0; }
@media screen and (max-width: 768px) {
.sk-content .section { padding: 18px 0; }
.sk-content .section:not(.bottom):has(+ .top) { padding-bottom: 40px; }
}
.sk-content .section.p-0 { padding: 0px; }
.sk-content .section.top { margin-top: 80px; }
.sk-content .section.top.shiftTop { margin-top: -5px; }
.sk-content .section.top:before { content: ''; display: block; background-repeat: repeat-x; background-position: center top; background-size: contain; position: absolute; top: -80px; left: 0; width: 100%; height: 80px; }
@media screen and (max-width: 1024px) {
.sk-content .section.top:before { background-size: cover; }
}
.sk-content .section.bottom { padding-bottom: 144px; }
@media screen and (max-width: 768px) {
.sk-content .section.bottom { padding-bottom: 90px; }
}
.sk-content .section.bottom:after { content: ''; display: block; background-repeat: repeat-x; background-position: center bottom; background-size: contain; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; }
@media screen and (max-width: 1024px) {
.sk-content .section.bottom:after { background-size: cover; }
}
.sk-content .section--green { background-color: #A4BC72; }
.sk-content .section--green.top.topWhite:before { background-color: #fffdf6; }
.sk-content .section--green.top.topGray:before { background-color: #f9edd9; }
.sk-content .section--green.top:before { background-image: url(/user/documents/obsah/green_top.png); }
.sk-content .section--green.bottom.bottomGray:after { background-color: #f9edd9; }
.sk-content .section--green.bottom.bottomWhite:after { background-color: #fffdf6; }
.sk-content .section--green.bottom:after { background-image: url(/user/documents/obsah/green_bottom.png); }
.sk-content .section--white { background-color: #fffdf6; }
.sk-content .section--white.top:before { background-image: url(/user/documents/obsah/white_top.png); }
.sk-content .section--white.topGreen:before { background-color: #fffdf6; background-image: url(/user/documents/obsah/green_bottom.png); }
.sk-content .section--white.bottomGray:after { background-color: #fffdf6; background-image: url(/user/documents/obsah/gray_top.png); background-position: center top; }
.sk-content .section--gray { background-color: #f9edd9; }
.sk-content .section--gray.top:before { background-image: url(/user/documents/obsah/gray_top.png); }
.sk-content .section--gray.top.topWhite:before { background-color: #fffdf6; }
.sk-content .section--gray.bottom:after { background-image: url(/user/documents/obsah/gray_bottom.png); }
.sk-content .event_grid .event-row .btn { margin-left: 66px; flex-shrink: 0; }
@media screen and (max-width: 480px) {
.sk-content .event_grid .event-row .btn { margin: 5px auto 25px; display: inline-block; }
}
.sk-content .entry-content #ee-single-page-checkout-dv .ee-asterisk, .sk-content .entry-content #ee-single-page-checkout-dv .ee-input-error, .sk-content .entry-content #ee-single-page-checkout-dv .ee-required-text { color: #af1134 !important; }
.sk-content .hpPartners { padding: 60px 0; text-align: center; }
@media screen and (max-width: 768px) {
.sk-content .hpPartners { padding: 0 0 40px 0; }
}
.sk-content .hpPartners h2 { color: #367436; font-weight: bold; font-size: 36px; }
.sk-content .hpPartners__list { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.sk-content .hpPartners__list img { margin: 15px; max-width: 200px; max-height: 150px; }
.sk-content .signpost { padding: 25px 0; }
@media screen and (min-width: 767px) {
.sk-content .signpost { padding: 65px 0; }
}
.sk-content .signpost__box { position: relative; max-width: 1116px; margin: 25px auto; }
.sk-content .signpost__grid { background-image: url(/user/documents/obsah/bg_top.jpg), url(/user/documents/obsah/bg_bottom.jpg); background-repeat: no-repeat, no-repeat; background-size: 100%, 100%; background-position: center top, center bottom; background-color: #efe9dd; padding: 10px 15px; z-index: 10; position: relative; }
@media screen and (min-width: 767px) {
.sk-content .signpost__grid { display: flex; justify-content: center; gap: 25px; padding: 50px; }
}
.sk-content .signpost__grid.light { background-image: url(/user/documents/obsah/bg_top_light.jpg), url(/user/documents/obsah/bg_bottom_light.jpg); background-color: #fffbf4; }
.sk-content .signpost__grid > div { padding: 30px; margin: 25px 0; }
@media screen and (min-width: 767px) {
.sk-content .signpost__grid > div + div { border-left: 1px solid #668E28; }
}
@media screen and (max-width: 768px) {
.sk-content .signpost__grid > div + div { border-top: 1px solid #668E28; }
}
.sk-content .signpost__grid > div p { margin: 18px 0 27px; }
.sk-content .signpost__semikLeft { position: absolute; left: -178px; bottom: 40px; z-index: 9; }
.sk-content .signpost__semikLeftHand { position: absolute; left: -64px; bottom: 90px; z-index: 11; }
.sk-content .signpost__semikRight { position: absolute; right: -190px; bottom: 45px; z-index: 9; }
.sk-content .signpost__semikRightHand { position: absolute; right: -40px; bottom: 109px; z-index: 11; }
.sk-content .whoIsSemik { padding: 10px 0; color: #fff; }
@media screen and (min-width: 767px) {
.sk-content .whoIsSemik { display: flex; align-items: flex-end; padding: 10px 0 40px 0; }
}
.sk-content .whoIsSemik .h2 { color: #fff; font-size: 40px; }
@media screen and (min-width: 767px) {
.sk-content .whoIsSemik .h2 { font-size: 80px; }
}
.sk-content .whoIsSemik p { margin: 18px 0; }
@media screen and (min-width: 767px) {
.sk-content .whoIsSemik__content { margin-left: -50px; margin-right: -50px; margin-bottom: 120px; }
}
.sk-content .whoIsSemik__left { position: relative; text-align: center; width: 402px; flex: 1 0 auto; align-items: flex-end; justify-content: center; background-image: url(/user/documents/obsah/pot_bg.png); background-position: center bottom; background-size: contain; background-repeat: no-repeat; }
@media screen and (max-width: 768px) {
.sk-content .whoIsSemik__left { display: none; }
}
.sk-content .whoIsSemik__left .parallax-item { margin: 0 auto; }
.sk-content .whoIsSemik__right { position: relative; text-align: center; flex: 1 0 auto; align-items: flex-end; justify-content: center; background-image: url(/user/documents/obsah/semik_flower_bg.png); background-position: center bottom; background-size: contain; background-repeat: no-repeat; }
@media screen and (max-width: 768px) {
.sk-content .whoIsSemik__right { margin: 0 auto; }
}
@media screen and (min-width: 767px) {
.sk-content .whoIsSemik__right { width: 429px; height: 100%; }
}
.sk-content .whoIsSemik__right .parallax-item { margin: 0 auto; }
.sk-content .contact-form { padding: 65px 0; }
@media screen and (max-width: 768px) {
.sk-content .contact-form { padding: 15px 0; }
}
.sk-content .contact-form__box { position: relative; max-width: 1116px; margin: 0px auto; }
.sk-content .contact-form__frame { background-repeat: no-repeat, no-repeat; background-size: 100%, 100%; background-position: center top, center bottom; z-index: 10; position: relative; min-height: 300px; }
@media screen and (max-width: 768px) {
.sk-content .contact-form__frame { padding: 40px 0 60px; }
}
.sk-content .contact-form__frame:before, .sk-content .contact-form__frame:after { content: ''; display: block; width: 100%; position: relative; left: 0; }
.sk-content .contact-form__frame:before { background-image: url(/user/documents/obsah/bg_top.png); background-repeat: no-repeat; background-size: 100%; background-position: center bottom; height: 163px; top: 1px; }
@media screen and (max-width: 768px) {
.sk-content .contact-form__frame:before { height: 100px; }
}
.sk-content .contact-form__frame:after { background-image: url(/user/documents/obsah/bg_bottom.png); background-repeat: no-repeat; background-size: 100%; background-position: center top; height: 133px; top: 99.9%; }
@media screen and (max-width: 768px) {
.sk-content .contact-form__frame:after { height: 80px; }
}
.sk-content .contact-form__form { background-color: #efe9dd; padding: 0 50px; }
.sk-content .contact-form__form > div { max-width: 785px; margin: 0 auto; }
.sk-content .contact-form__tl { position: absolute; top: -58px; left: -76px; width: 186px; height: 263px; background-image: url(/user/documents/obsah/contact-form-tl.png); background-size: cover; background-position: center center; z-index: 4; }
@media screen and (max-width: 1024px) {
.sk-content .contact-form__tl { display: none; }
}
.sk-content .contact-form__br { position: absolute; right: -94px; bottom: -100px; width: 180px; height: 248px; background-image: url(/user/documents/obsah/contact-form-br.png); background-size: cover; background-position: center center; z-index: 4; }
@media screen and (max-width: 1024px) {
.sk-content .contact-form__br { display: none; }
}
.sk-content .videoSection .defaultGrid { padding: 20px 0; }
@media screen and (min-width: 768px) {
.sk-content .videoSection .defaultGrid { padding: 60px 0; }
}
.sk-content .workshopContent__item + .workshopContent__item { margin-top: 36px; }
@media screen and (min-width: 767px) {
.sk-content .workshopContent__item { display: grid; grid-template-rows: auto; grid-template-columns: 200px auto; column-gap: 35px; justify-items: center; justify-content: start; }
}
.sk-content .workshopContent ul { margin-left: 20px; padding-left: 0; }
@media screen and (min-width: 767px) {
.sk-content .workshopInfo { display: grid; grid-template-rows: auto; grid-template-columns: 350px auto; column-gap: 35px; }
}
@media screen and (max-width: 768px) {
.sk-content .workshopInfo img { max-height: 200px; width: auto; margin: 0 auto; display: block; }
}
.sk-content .post { margin: 0; }
.sk-content .entry-content { margin: 18px 0 0; }
.sk-content .postList .post-loop-single { align-items: center; padding: 32px 0; }
@media screen and (min-width: 767px) {
.sk-content .postList .post-loop-single { display: flex; gap: 60px; padding: 64px 0; }
}
.sk-content .postList .post-loop-single .post-image, .sk-content .postList .post-loop-single .post-content { flex: 1 1 50%; }
.sk-content .postList .post-loop-single .post-image img { border-radius: 15px; }
.sk-content .postList .post-loop-single .entry-content { margin-bottom: 32px; }
.sk-content .postList .post-loop-single:nth-child(even) { flex-direction: row-reverse; }
.sk-content .postList.reverse .post-loop-single:nth-child(even) { flex-direction: row; }
.sk-content .postList.reverse .post-loop-single:nth-child(odd) { flex-direction: row-reverse; }
.sk-content .postGrid { display: grid; grid-template-rows: auto; grid-template-columns: 1fr; column-gap: 54px; row-gap: 32px; }
@media screen and (max-width: 1024px) {
.sk-content .postGrid { column-gap: 60px; }
}
@media screen and (min-width: 767px) {
.sk-content .postGrid { grid-template-columns: repeat(3, 1fr); }
}
.sk-content .postGrid .post-loop-single .entry-content { margin-bottom: 32px; }
.sk-content .postGrid .post-image img { border-radius: 15px; }
.sk-content .single article.post, .sk-content .single article.projects { padding: 0 0 84px; }
.sk-content .defaultIntro { padding: 0px 0; display: flex; justify-content: space-between; gap: 24px; }
@media screen and (max-width: 768px) {
.sk-content .defaultIntro { flex-direction: column-reverse; }
}
.sk-content .defaultIntro__content { flex: 1 1 58%; max-width: 548px; }
.sk-content .defaultIntro__img { flex: 0 1 42%; }
@media screen and (max-width: 768px) {
.sk-content .defaultIntro__img img { max-height: 200px; width: auto; }
}
.sk-content .defaultIntro .h1 { line-height: 1.05; margin-bottom: 18px; }
@media screen and (min-width: 767px) {
.sk-content .defaultGrid { display: flex; flex-wrap: wrap; gap: 64px; }
.sk-content .defaultGrid > div { flex: 1 1; }
}
@media screen and (max-width: 1024px) {
.sk-content .defaultGrid { gap: 32px; }
}
.sk-content .defaultGrid.reverse { flex-direction: row-reverse; }
.sk-content .defaultGrid + .defaultGrid { margin-top: 32px; }
@media screen and (min-width: 1024px) {
.sk-content .defaultGrid + .defaultGrid { margin-top: 64px; }
}
.sk-content .avatar-box { display: flex; align-items: center; flex-direction: column; }
.sk-content .entry-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }
.sk-content .single-video { position: relative; padding: 10px 0; }
.sk-content .single-video__container { max-width: 860px; position: relative; }
.sk-content .single-video__mask { background: #fff; -webkit-mask-image: url(/user/documents/obsah/post-gallery-svg.svg); mask-image: url(/user/documents/obsah/post-gallery-svg.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-size: contain; padding-top: 60.5355%; width: 100%; position: relative; z-index: 5; }
.sk-content .single-video__frame { width: 100%; height: 100%; top: 0; left: 0; -webkit-mask-image: url(/user/documents/obsah/post-gallery-svg.svg); mask-image: url(/user/documents/obsah/post-gallery-svg.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-size: contain; position: absolute; }
.sk-content .single-video__frame video { height: 100%; width: 100%; object-fit: cover; }
.sk-content .wpcf7 p { margin: 0; }
.sk-content .wpcf7 hr { background-color: #fff; }
.sk-content .wpcf7 .black { font-weight: 900; }
.sk-content .wpcf7 label { display: flex; font-size: 12px; margin-bottom: 8px; }
.sk-content .wpcf7 .gdprRow { text-align: end; padding: 0; display: flex; flex-direction: column; align-items: center; }
.sk-content .wpcf7 .gdprRow .consent { font-size: 14px; letter-spacing: 1px; margin-bottom: 16px; }
.sk-content .wpcf7 .gdprRow label { display: grid; grid-template-columns: 50px auto; align-items: center; }
.sk-content .wpcf7 .gdprRow .wpcf7-list-item { margin: 0 auto; }
.sk-content .wpcf7 .gdprRow input { width: inherit; width: 31px; height: 31px; border-radius: 0; border: 0; }
.sk-content .wpcf7 .formGroup + .formGroup { margin-top: 48px; }
@media screen and (min-width: 490px) {
.sk-content .wpcf7 .formRow { display: grid; flex-grow: 1; justify-content: space-between; grid-template-columns: 1fr; }
.sk-content .wpcf7 .formRow.two { grid-template-rows: auto; grid-template-columns: 1fr 1fr; row-gap: 16px; column-gap: 16px; }
}
@media screen and (max-width: 489px) {
.sk-content .wpcf7 .formRow .col + .col, .sk-content .wpcf7 .formRow + .formRow { margin-top: 16px; }
}
.sk-content .wpcf7 .formRow--short { max-width: 250px; }
.sk-content .wpcf7 .formRow--end { justify-items: end; }
.sk-content .wpcf7 .formRow + .formRow { margin-top: 16px; }
.sk-content .wpcf7 input, .sk-content .wpcf7 textarea { width: 100%; }
.sk-content .wpcf7 input::placeholder, .sk-content .wpcf7 textarea::placeholder { color: #000; opacity: 1; }
.sk-content .wpcf7 input::-ms-input-placeholder, .sk-content .wpcf7 textarea::-ms-input-placeholder { color: #000; }
.sk-content .wpcf7 .wpcf7-field-group { padding: 16px 0; }
.sk-content .wpcf7 .wpcf7-submit { cursor: pointer; display: flex; padding: 18px 36px; }
@media screen and (max-width: 479px) {
.sk-content .wpcf7 .wpcf7-submit { margin-top: 18px; }
}
.sk-content .wpcf7 .wpcf7-submit .wpcf7-spinner { margin: 0 15px 0 0; width: 1em; height: 1em; display: none; background: #000; }
.sk-content .wpcf7 .wpcf7-submit .wpcf7-spinner:before { left: 2px; top: 2px; }
.sk-content .wpcf7 .wpcf7-submit + .wpcf7-spinner { width: 0; height: 0; display: none !important; }
.sk-content .wpcf7 .wpcf7-response-output { margin: 0 !important; font-size: 16px; }
.sk-content .wpcf7 form.invalid .wpcf7-response-output, .sk-content .wpcf7 form.unaccepted .wpcf7-response-output, .sk-content .wpcf7 form.payment-required .wpcf7-response-output { background-color: #fff; border-color: #fff; color: #9C2818; }
.sk-content .wpcf7 form.sent .wpcf7-response-output { color: #713E0E; font-size: 18px; border: 0; }
.sk-content .wpcf7 .wpcf7-not-valid-tip { background: transparent; border: 0; height: 100%; display: block; padding: 5px; font-size: 14px; color: #9C2818; }
.sk-content .wpcf7 .wpcf7-form-control-wrap { position: initial; }
.sk-content .wpcf7 .wpcf7-spinner { display: block; margin: 16px auto 0; }
.sk-content .wpcf7-form.submitting .wpcf7-spinner { display: block; }
.sk-content .btn { display: inline-block; font-size: 20px; text-decoration: none; cursor: pointer; font-weight: 600; border: 0; background: #EAE5DA; color: #713E0E; padding: 9px 40px 8px; border-radius: 15px; align-items: center; }
@media screen and (max-width: 990px) {
.sk-content .btn { font-size: 17px; padding: 9px 18px 9px; }
}
.sk-content .btn-primary { box-shadow: 0; border: 1px solid #668E28; background: #668E28; color: #fff; }
.sk-content .btn-primary:hover, .sk-content .btn-primary:hover a { color: #668E28; background: #fff; border-color: #668E28; }
.sk-content .btn-primary:focus { background: #668E28; color: #fff; }
.sk-content .btn-primary.reverse, .sk-content .reverse.wp-block-button__link, .sk-content .woocommerce-cart .reverse.wc-block-components-button.wp-element-button, .sk-content .woocommerce-checkout .reverse.wc-block-components-button.wp-element-button, .sk-content .woocommerce-checkout .reverse#place_order, .sk-content .woocommerce-checkout a.reverse[href*="fakturoid"] { border: 1px solid #668E28; background: transparent; color: #668E28; }
.sk-content .btn-primary.reverse:hover, .sk-content .reverse.wp-block-button__link:hover, .sk-content .woocommerce-cart .reverse.wc-block-components-button.wp-element-button:hover, .sk-content .woocommerce-checkout .reverse.wc-block-components-button.wp-element-button:hover, .sk-content .woocommerce-checkout .reverse#place_order:hover, .sk-content .woocommerce-checkout a.reverse:hover[href*="fakturoid"], .sk-content .btn-primary.reverse:hover a, .sk-content .reverse.wp-block-button__link:hover a, .sk-content .woocommerce-cart .reverse.wc-block-components-button.wp-element-button:hover a, .sk-content .woocommerce-checkout .reverse.wc-block-components-button.wp-element-button:hover a, .sk-content .woocommerce-checkout .reverse#place_order:hover a, .sk-content .woocommerce-checkout a.reverse:hover[href*="fakturoid"] a { color: #fff; background: #668E28; background-color: #668E28; }
.sk-content .btn-primary.reverse:focus, .sk-content .reverse.wp-block-button__link:focus, .sk-content .woocommerce-cart .reverse.wc-block-components-button.wp-element-button:focus, .sk-content .woocommerce-checkout .reverse.wc-block-components-button.wp-element-button:focus, .sk-content .woocommerce-checkout .reverse#place_order:focus, .sk-content .woocommerce-checkout a.reverse:focus[href*="fakturoid"] { background: #668E28; color: #fff; }
.sk-content div.mep_event_list a.btn-primary { border: 1px solid #668E28; background: #668E28; color: #fff; }
.sk-content div.mep_event_list a.btn-primary:hover, .sk-content div.mep_event_list a.btn-primary:hover a { color: #668E28; background: #fff; border-color: #668E28; }
.sk-content .wp-block-columns .wp-block-column .mep_event_list .mep_list_event_details { padding: 24px 34px; }