/* ==========================================================
   NEVORANEK - sestaveny stylopis
   Generovano 2026-08-30 z tools/src/
   NEEDITOVAT - uprav prislusnou cast a spust build_css.py
   ========================================================== */

/* === 00-paleta.css =========================================== */
/* ==========================================================================
   NEVORÁNEK — BAREVNÁ PALETA
   Odvozeno z grafického návrhu od zákazníka.

   POZOR: hodnoty jsou odečtené z náhledu okem, ne vzorkované ze souboru.
   Až bude předloha v projektu, patří je ověřit a doladit.

   Tenhle soubor se sestavuje jako první, takže na proměnné níž může
   sáhnout kterákoliv další část stylopisu. Nic sám nevykresluje — jen
   pojmenovává barvy.

   Návrh stojí na třech věcech:
     - tmavé teplé hnědi místo černé (nikde není čistá #000)
     - olivová a starozlatá jako jediné akcenty
     - krémová, ne bílá, jako světlé pozadí stránky

   Vínová #9E1F1F, na které stálo dosavadní CSS, v návrhu prakticky není.
   Zůstává jen jako barva slev.
   ========================================================================== */

:root {
  /* --- tmavé plochy ---------------------------------------------------- */
  --nv-cerna:      #17140F;   /* horní lišta, spodek patičky */
  --nv-tmava:      #26221A;   /* hlavička, podklad dlaždic */
  --nv-menu:       #897D5D;   /* pruh hlavního menu — světlejší olivová,
                                 jediná světlá plocha mezi tmavými pásy */
  --nv-pas:        #3D3728;   /* pás s výhodami nad patičkou */

  /* --- akcenty --------------------------------------------------------- */
  --nv-olivova:    #8A7B4F;   /* tlačítka, aktivní položka menu */
  --nv-olivova-tm: #6E6240;   /* olivová po najetí */
  --nv-zlata:      #C4A76A;   /* nadpisy na tmavém, ikony, rámečky */
  --nv-zlata-svit: #DCC48C;   /* zlatá po najetí */

  /* --- světlé plochy --------------------------------------------------- */
  /* Krémová musí být znatelně teplá. Původní #F5F3EF mělo mezi kanály
     rozdíl jen 6 bodů, což je prakticky neutrální šedá — vedle bílých
     karet produktů to vypadalo špinavě. Tady je rozdíl 20 bodů, takže
     se to čte jako béžová, ne jako šeď. */
  --nv-krem:       #F6F1E6;   /* pozadí světlých sekcí */
  --nv-bila:       #FFFFFF;   /* karty produktů */
  --nv-linka:      #E4E1DC;   /* jemné oddělovače na světlém */

  /* --- text ------------------------------------------------------------ */
  --nv-text:       #2B261C;   /* text na světlém */
  --nv-text-tlum:  #8A8377;   /* doplňkový text, popisky */
  --nv-text-svet:  #F0EBE0;   /* text na tmavém */

  /* --- stavové --------------------------------------------------------- */
  --nv-zelena:     #5E7A3F;   /* skladem */
  --nv-cervena:    #9E1F1F;   /* sleva, výprodej */
}

/* === 01-kategorie.css ======================================== */
/* ==========================================================================
   NEVORANEK – hezčí kategorie
   Šablona: template-11 | písmo Ubuntu | odladěno na 812210.myshoptet.com
   Část sestavovaného stylopisu. Needituj tools/style.css — uprav tenhle
   soubor a spusť ./tools/deploy.sh, build proběhne sám.
   ========================================================================== */

/* Napojeno na barevné schéma e-shopu – když v editoru vzhledu změníš barvy,
   kategorie se přebarví samy. */
:root {
  --cat-line:      #e4e1dc;
  --cat-line-soft: #f0eeea;
  --cat-ink:       var(--color-primary, #2B261C);   /* tmavá #2B261C */
  --cat-on-ink:    #fff;                            /* text na tmavém pozadí */
  --cat-accent:    var(--color-secondary, #9E1F1F); /* vínová #9E1F1F */
  --cat-radius:    10px;
  --cat-shadow:    0 8px 22px rgba(43, 38, 28, .13);
}

/* --------------------------------------------------------------------------
   1) DLAŽDICE PODKATEGORIÍ  (ul.subcategories)
   Původně plovoucí sloupce col-xs-6 / col-lg-3 → rovnoměrný grid,
   všechny dlaždice v řádku stejně vysoké.
   -------------------------------------------------------------------------- */
ul.subcategories {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
  margin: 4px 0 30px !important;
  padding: 0 !important;
  list-style: none;
}

ul.subcategories > li {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

ul.subcategories > li > a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  height: 100%;
  padding: 14px 30px 14px 16px !important;
  background: #fff;
  border: 1px solid var(--cat-line) !important;
  border-radius: var(--cat-radius);
  color: var(--cat-ink);
  text-decoration: none;
  /* levý akcentní proužek řešen inset stínem → nekoliduje s ::before šipkou */
  box-shadow: inset 0 0 0 0 var(--cat-accent);
  transition: box-shadow .22s ease, border-color .22s ease,
              transform .22s ease, color .22s ease;
}

ul.subcategories > li > a:hover,
ul.subcategories > li > a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cat-accent) !important;
  box-shadow: inset 4px 0 0 0 var(--cat-accent), var(--cat-shadow);
  color: var(--cat-accent);
  text-decoration: none;
}

/* Text dlaždice.
   POZOR: šablona má na .text max-height:48px + overflow:hidden, takže delší
   názvy uřezává v půlce ("Podložky pod trofeje, ošetření" místo "…trofejí").
   Tohle to opravuje. */
ul.subcategories .text {
  flex: 1 1 auto;
  max-height: none !important;
  overflow: visible !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -.005em;
}

/* šipka vpravo je ::before šablony – jen ji rozhýbeme */
ul.subcategories > li > a::before {
  opacity: .45;
  transition: transform .22s ease, opacity .22s ease;
}
ul.subcategories > li > a:hover::before {
  transform: translateX(3px);
  opacity: 1;
}

/* --- obrázky kategorií -----------------------------------------------------
   Zatím nemá obrázek nastavený ani jedna kategorie, takže Shoptet všude kreslí
   šedou ikonu složky (folder.svg). Ta nic nesděluje → skryjeme ji.
   Jakmile v administraci obrázky nahrajete, dlaždice se automaticky přepnou
   na variantu s náhledem (pravidla níž). */
ul.subcategories .image:has(img[src*="folder.svg"]),
ul.subcategories .image:has(img[data-src*="folder.svg"]) {
  display: none !important;
}

/* Po skrytí ikony zbyde vysoký box s osamoceným textem uprostřed a dlaždice
   působí nedodělaně, proto ji snížíme.
   Kontroluje se i data-src, protože obrázky se donačítají lazy-loadingem
   a v tu chvíli je ve `src` jen prázdný placeholder. */
ul.subcategories > li > a:has(img[src*="folder.svg"]),
ul.subcategories > li > a:has(img[data-src*="folder.svg"]) {
  min-height: 54px;
  padding-left: 18px !important;
}

ul.subcategories .image {
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 !important;
  padding: 4px;
  background: var(--cat-line-soft);
  border-radius: 8px;
  overflow: hidden;
}
ul.subcategories .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  mix-blend-mode: multiply;   /* schová bílé pozadí fotek */
  transition: transform .25s ease;
}
ul.subcategories > li > a:hover .image img { transform: scale(1.07); }

/* --------------------------------------------------------------------------
   2) NADPIS A ÚVODNÍ TEXT KATEGORIE
   -------------------------------------------------------------------------- */
h1.category-title {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
}
h1.category-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  background: var(--cat-accent);
}

.category-top .description,
.category-perex {
  padding: 16px 18px;
  background: #faf9f7;
  border-left: 3px solid var(--cat-accent);
  border-radius: 0 var(--cat-radius) var(--cat-radius) 0;
  line-height: 1.6;
}
.category-top .description p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3) STROM KATEGORIÍ V LEVÉM SLOUPCI
   Úpravy vzhledu odloženy na přání zákazníka — strom běží tak, jak ho dělá
   šablona. Původní verze je v src/odlozeno/strom-kategorii.css.off,
   vrátí se zpět vložením jejího obsahu sem.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4) MOBIL
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  ul.subcategories {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  ul.subcategories > li > a {
    min-height: 58px;
    padding: 12px 22px 12px 12px !important;
  }
  ul.subcategories .text { font-size: 13.5px !important; }
}

/* === 02-ikony.css ============================================ */
/* Ikony kategorií. Generováno z exportu kategorií —
   po importu, který zakládá kategorie, přegeneruj:
       python3 tools/make_menu_css.py categories.csv > tools/src/02-ikony.css
*/

.menu-item-1252 > a::before,
.menu-item-730 > a::before,
.menu-item-1264 > a::before,
.menu-item-1243 > a::before,
.menu-item-1321 > a::before,
.menu-item-799 > a::before,
.menu-item-1363 > a::before {
  content: "";
  display: inline-block;
  width: 18px;  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  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;
}

/* Zbraně */
.menu-item-1252 > a::before {
  -webkit-mask-image: url(/user/documents/ikony/zbrane.svg);
          mask-image: url(/user/documents/ikony/zbrane.svg);
}

/* Střelivo */
.menu-item-730 > a::before {
  -webkit-mask-image: url(/user/documents/ikony/strelivo.svg);
          mask-image: url(/user/documents/ikony/strelivo.svg);
}

/* Optika a termovize */
.menu-item-1264 > a::before {
  -webkit-mask-image: url(/user/documents/ikony/optika.svg);
          mask-image: url(/user/documents/ikony/optika.svg);
}

/* Doplňky a údržba zbraní */
.menu-item-1243 > a::before {
  -webkit-mask-image: url(/user/documents/ikony/doplnky-udrzba.svg);
          mask-image: url(/user/documents/ikony/doplnky-udrzba.svg);
}

/* Oděvy a obuv */
.menu-item-1321 > a::before {
  -webkit-mask-image: url(/user/documents/ikony/odevy-obuv.svg);
          mask-image: url(/user/documents/ikony/odevy-obuv.svg);
}

/* Lovecké potřeby */
.menu-item-799 > a::before {
  -webkit-mask-image: url(/user/documents/ikony/lovecke-potreby.svg);
          mask-image: url(/user/documents/ikony/lovecke-potreby.svg);
}

/* Dárkové předměty */
.menu-item-1363 > a::before {
  -webkit-mask-image: url(/user/documents/ikony/darkove-predmety.svg);
          mask-image: url(/user/documents/ikony/darkove-predmety.svg);
}

/* ---- ikony podkategorii ---- */

/* aport — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/aport.svg);
          mask-image: url(/user/documents/ikony/aport.svg);
}
/* balik — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/balik.svg);
          mask-image: url(/user/documents/ikony/balik.svg);
}
/* batoh — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/batoh.svg);
          mask-image: url(/user/documents/ikony/batoh.svg);
}
/* bota — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/bota.svg);
          mask-image: url(/user/documents/ikony/bota.svg);
}
/* broky — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/broky.svg);
          mask-image: url(/user/documents/ikony/broky.svg);
}
/* bunda — 5x */
 {
  -webkit-mask-image: url(/user/documents/ikony/bunda.svg);
          mask-image: url(/user/documents/ikony/bunda.svg);
}
/* cisteni — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/cisteni.svg);
          mask-image: url(/user/documents/ikony/cisteni.svg);
}
/* dalekohled — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/dalekohled.svg);
          mask-image: url(/user/documents/ikony/dalekohled.svg);
}
/* diabolo — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/diabolo.svg);
          mask-image: url(/user/documents/ikony/diabolo.svg);
}
/* fotopast — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/fotopast.svg);
          mask-image: url(/user/documents/ikony/fotopast.svg);
}
/* kalhoty — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/kalhoty.svg);
          mask-image: url(/user/documents/ikony/kalhoty.svg);
}
/* klobouk — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/klobouk.svg);
          mask-image: url(/user/documents/ikony/klobouk.svg);
}
/* kolimator — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/kolimator.svg);
          mask-image: url(/user/documents/ikony/kolimator.svg);
}
/* kosile — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/kosile.svg);
          mask-image: url(/user/documents/ikony/kosile.svg);
}
/* kufr — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/kufr.svg);
          mask-image: url(/user/documents/ikony/kufr.svg);
}
/* kynologie — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/kynologie.svg);
          mask-image: url(/user/documents/ikony/kynologie.svg);
}
/* listina — 3x */
 {
  -webkit-mask-image: url(/user/documents/ikony/listina.svg);
          mask-image: url(/user/documents/ikony/listina.svg);
}
/* montaz — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/montaz.svg);
          mask-image: url(/user/documents/ikony/montaz.svg);
}
/* multitool — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/multitool.svg);
          mask-image: url(/user/documents/ikony/multitool.svg);
}
/* naboj — 3x */
 {
  -webkit-mask-image: url(/user/documents/ikony/naboj.svg);
          mask-image: url(/user/documents/ikony/naboj.svg);
}
/* noze — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/noze.svg);
          mask-image: url(/user/documents/ikony/noze.svg);
}
/* nuz-zaviraci — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/nuz-zaviraci.svg);
          mask-image: url(/user/documents/ikony/nuz-zaviraci.svg);
}
/* obojek — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/obojek.svg);
          mask-image: url(/user/documents/ikony/obojek.svg);
}
/* obranne-prostredky — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/obranne-prostredky.svg);
          mask-image: url(/user/documents/ikony/obranne-prostredky.svg);
}
/* obusek — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/obusek.svg);
          mask-image: url(/user/documents/ikony/obusek.svg);
}
/* ohen — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/ohen.svg);
          mask-image: url(/user/documents/ikony/ohen.svg);
}
/* paralyzer — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/paralyzer.svg);
          mask-image: url(/user/documents/ikony/paralyzer.svg);
}
/* past — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/past.svg);
          mask-image: url(/user/documents/ikony/past.svg);
}
/* penezenka — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/penezenka.svg);
          mask-image: url(/user/documents/ikony/penezenka.svg);
}
/* pistalka — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/pistalka.svg);
          mask-image: url(/user/documents/ikony/pistalka.svg);
}
/* polstar — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/polstar.svg);
          mask-image: url(/user/documents/ikony/polstar.svg);
}
/* popruh — 3x */
 {
  -webkit-mask-image: url(/user/documents/ikony/popruh.svg);
          mask-image: url(/user/documents/ikony/popruh.svg);
}
/* pouzdro — 3x */
 {
  -webkit-mask-image: url(/user/documents/ikony/pouzdro.svg);
          mask-image: url(/user/documents/ikony/pouzdro.svg);
}
/* pribor — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/pribor.svg);
          mask-image: url(/user/documents/ikony/pribor.svg);
}
/* puska — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/puska.svg);
          mask-image: url(/user/documents/ikony/puska.svg);
}
/* puskohled — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/puskohled.svg);
          mask-image: url(/user/documents/ikony/puskohled.svg);
}
/* ryba — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/ryba.svg);
          mask-image: url(/user/documents/ikony/ryba.svg);
}
/* sklo — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/sklo.svg);
          mask-image: url(/user/documents/ikony/sklo.svg);
}
/* soucastky — 10x */
 {
  -webkit-mask-image: url(/user/documents/ikony/soucastky.svg);
          mask-image: url(/user/documents/ikony/soucastky.svg);
}
/* stativ — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/stativ.svg);
          mask-image: url(/user/documents/ikony/stativ.svg);
}
/* svitilna — 4x */
 {
  -webkit-mask-image: url(/user/documents/ikony/svitilna.svg);
          mask-image: url(/user/documents/ikony/svitilna.svg);
}
/* terc — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/terc.svg);
          mask-image: url(/user/documents/ikony/terc.svg);
}
/* termovize — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/termovize.svg);
          mask-image: url(/user/documents/ikony/termovize.svg);
}
/* tlumic — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/tlumic.svg);
          mask-image: url(/user/documents/ikony/tlumic.svg);
}
/* trezor — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/trezor.svg);
          mask-image: url(/user/documents/ikony/trezor.svg);
}
/* tricko — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/tricko.svg);
          mask-image: url(/user/documents/ikony/tricko.svg);
}
/* trofej — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/trofej.svg);
          mask-image: url(/user/documents/ikony/trofej.svg);
}
/* vabnicka — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/vabnicka.svg);
          mask-image: url(/user/documents/ikony/vabnicka.svg);
}
/* vnadidlo — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/vnadidlo.svg);
          mask-image: url(/user/documents/ikony/vnadidlo.svg);
}
/* voditko — 2x */
 {
  -webkit-mask-image: url(/user/documents/ikony/voditko.svg);
          mask-image: url(/user/documents/ikony/voditko.svg);
}
/* zasobnik — 1x */
 {
  -webkit-mask-image: url(/user/documents/ikony/zasobnik.svg);
          mask-image: url(/user/documents/ikony/zasobnik.svg);
}

/* NENALEZENO v exportu kategorii: Pouzdra, řemeny a přeprava, Nože, Kynologie, Obranné prostředky */

/* === 03-dlazdice-uvod.css ==================================== */
/* ==========================================================================
   DLAŽDICE HLAVNÍCH KATEGORIÍ NA ÚVODNÍ STRÁNCE
   Šablona template-11 (Classic). Odladěno na 812410.myshoptet.com.

   HTML k tomuhle CSS je v tools/dlazdice.html a vkládá se JEDNOU ručně do
   Vzhled a obsah → Titulní strana → Nástroje → Zdrojový kód.
   Šablona ho vykreslí do .welcome-wrapper.

   POZOR na WYSIWYG editor: ukládá se přes něj, a ten čistí kód. Zahazuje
   prázdné inline elementy a umí sebrat atributy, které nezná. Proto je
   HTML schválně skoro holé — jedna třída na celém bloku, žádný prázdný
   element, žádný inline style. Všechny vrstvy dlaždice (fotka, tmavý
   přechod, ikona) jsou pseudoelementy, ty editor nevidí a nesáhne na ně.

   Fotky kategorií se sem netahají z administrace — Shoptet je do exportu
   nedává. Nahrávají se přes deploy.sh do /user/documents/kategorie/ a
   přiřazují se níž podle adresy kategorie. Dokud fotka není, dlaždice
   zůstane tmavá s ikonou; nerozbije se.
   ========================================================================== */

:root {
  /* Dlaždice jsou hranaté. Zaoblení si drží jen bannery přes --bn-radius,
     aby se dalo měnit každé zvlášť. */
  --dl-radius: 0;
  --dl-ink:    var(--nv-tmava, #26221A);
  /* Odsazení dlaždic od kraje okna. Roste s šířkou, ale ne donekonečna. */
  --dl-pad:    clamp(16px, 2.5vw, 40px);
  --dl-gap:    14px;
  /* Starozlatá z palety (00-paleta.css). Sdílí ji i bannery ve 04. */
  --dl-zlata:      var(--nv-zlata, #C4A76A);
  --dl-zlata-svit: var(--nv-zlata-svit, #DCC48C);
}

/* --------------------------------------------------------------------------
   1) UMÍSTĚNÍ BLOKU
   Úvodní text je v šabloně až pod bloky produktů. Dlaždice tam nikdo
   neuvidí, proto se .welcome-wrapper vytáhne nahoru — pod karusel, nad
   „Akční zboží". Dělá se to pořadím ve flexu, ne přesouváním v DOM, aby
   se do toho nemusel plést JavaScript.
   -------------------------------------------------------------------------- */
body.type-index .overall-wrapper {
  display: flex;
  flex-direction: column;
}
body.type-index .overall-wrapper > .homepage-box.before-carousel { order: 1; }
body.type-index .overall-wrapper > .homepage-box.welcome-wrapper { order: 2; }
body.type-index .overall-wrapper > .content-wrapper.container    { order: 3; }
/* hlavička a horní lišty musí zůstat nahoře */
body.type-index .overall-wrapper > .user-action,
body.type-index .overall-wrapper > .top-navigation-bar,
body.type-index .overall-wrapper > header { order: 0; }

/* Nadpis „Vítejte v našem obchodě" zůstává (je to H1, drží SEO),
   jen se zmenší a přestane křičet nad dlaždicemi. */
body.type-index .welcome-wrapper .welcome > .h1 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8377;
}

/* --- dlaždice od kraje ke kraji -------------------------------------------
   Šablona úvodní text třikrát sevře: vnější box má 19px padding, .container
   dalších 20px a uvnitř .welcome sedí <div> s max-width: 800px. Kvůli
   poslednímu se dlaždice bez zásahu nikdy nerozšíří.

   Sevření se pouští jen v tomhle boxu a jen na úvodní stránce; odsazení od
   okraje si pak řídí samy dlaždice přes --dl-pad. Nepoužívá se 100vw ani
   záporné marginy — ty na Windows počítají i šířku posuvníku a stránka pak
   ujíždí do strany. -------------------------------------------------------- */
body.type-index .content-wrapper.welcome-wrapper {
  padding-left: 0;
  padding-right: 0;
}
/* .container není zúžený max-width, ale pevnou šířkou (~84 %) a auto
   marginy — je to flex položka uvnitř .content-wrapper-in. Samotné
   max-width: none proto nestačí, musí padnout i width a margin. */
body.type-index .welcome-wrapper .container {
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
body.type-index .welcome-wrapper .welcome > div {
  max-width: none;
}

/* Text kolem dlaždic se ale roztáhnout nesmí — přes celou šířku by se
   nedal číst. Zůstává úzký a lícuje s levým okrajem dlaždic.

   Výjimka se nevypisuje jménem, ale přes prefix `nv-`: v tomhle bloku
   bydlí i bannery (.nv-bn) a případné další vlastní prvky. Kdyby se
   vyjmenovávaly jednotlivě, každý nový by se tiše zúžil na šířku textu
   a nikdo by nevěděl proč. */
body.type-index .welcome-wrapper .welcome > .h1,
body.type-index .welcome-wrapper .welcome > div > *:not([class*="nv-"]) {
  max-width: calc(820px + 2 * var(--dl-pad));
  padding-left: var(--dl-pad);
  padding-right: var(--dl-pad);
}

/* --------------------------------------------------------------------------
   2) MŘÍŽKA
   Všechny dlaždice mají stejnou šířku. Proto flexbox, ne grid: co se
   nevejde, přeteče do další řady a ta se vycentruje — díra po chybějící
   dlaždici tak zůstane rozpůlená po stranách místo aby zela vpravo.
   Dřív to řešila jedna dlaždice roztažená přes dva sloupce; tohle je
   poctivější a nezávisí to na tom, že kategorií je zrovna sedm.

   Počet v řadě řídí --dl-cols, mění se jen v @media níž. Šířka se počítá
   ručně, protože flex-basis o gapech neví.
   -------------------------------------------------------------------------- */
.nv-dl {
  --dl-cols: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dl-gap);
  margin: 0 0 34px;
  padding: 0 var(--dl-pad);
  list-style: none;
}
.nv-dl > li {
  display: flex;
  flex: 0 1 calc((100% - (var(--dl-cols) - 1) * var(--dl-gap)) / var(--dl-cols));
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nv-dl > li::before { content: none; }   /* šablona věší odrážky na li::before */

/* --------------------------------------------------------------------------
   3) DLAŽDICE
   Odkaz je jen rám. Uvnitř jsou tři vrstvy, všechny pseudoelementy:
       a::before       fotka        (z-index -2)
       a::after        tmavý přechod (z-index -1)
       a > span::before ikona nad popiskem
   Ikona s popiskem sedí uprostřed dlaždice, ne u spodní hrany.
   Tmavý přechod je tam kvůli čitelnosti bílého textu i na světlé fotce.
   Bez fotky zbyde samotný přechod → tmavá dlaždice, pořád použitelná.
   -------------------------------------------------------------------------- */
.nv-dl a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  padding: 22px 16px;
  box-sizing: border-box;    /* rámeček se musí vejít dovnitř spočítané
                                šířky, jinak by se dlaždice rozjely */
  border: 1px solid var(--dl-zlata);
  border-radius: var(--dl-radius);
  background: var(--dl-ink);
  overflow: hidden;
  color: #fff;
  text-align: center;
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.nv-dl a:hover,
.nv-dl a:focus-visible {
  color: #fff;
  text-decoration: none;
  border-color: var(--dl-zlata-svit);
  box-shadow: 0 14px 30px rgba(20,17,12,.35);
}

/* fotka — vlastní vrstva, aby se dala plynule přiblížit */
.nv-dl a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  transition: transform .45s ease;
}
.nv-dl a:hover::before { transform: scale(1.06); }

/* tmavý přechod přes fotku */
.nv-dl a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
              rgba(20,17,12,.70) 0%,
              rgba(20,17,12,.42) 50%,
              rgba(20,17,12,.25) 100%);
  transition: background .3s ease;
}
.nv-dl a:hover::after,
.nv-dl a:focus-visible::after {
  background: linear-gradient(to top,
              rgba(20,17,12,.78) 0%,
              rgba(20,17,12,.50) 50%,
              rgba(20,17,12,.32) 100%);
}

/* popisek — jediný element uvnitř odkazu, protože nese text
   a WYSIWYG editor ho tím pádem nezahodí.
   Velikost se škáluje plynule, aby se popisek při užších sloupcích lámal
   co nejmíň: měřeno na 768 px (nejužší, kde ještě běží čtyři sloupce)
   zůstává většina popisků na jednom řádku a nejdelší dva jdou na dva.
   Prostrkání je v em, takže jde dolů s písmem samo. */
.nv-dl a > span {
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* ikona nad popiskem */
.nv-dl a > span::before {
  content: "";
  display: block;
  width: clamp(34px, 2.8vw, 46px);
  height: clamp(34px, 2.8vw, 46px);
  margin: 0 auto clamp(7px, .7vw, 10px);
  /* Zlatá napevno, ne currentColor. Ikona se kreslí jako plocha
     prosvítající maskou, takže barvu bere z `background` — a kdyby se
     brala z textu, zezlátla by s ním nebo zbělela s ním. Tady mají mít
     každý svou: popisek bílý, ikona zlatá. */
  background: var(--dl-zlata, #C4A76A);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
  opacity: .92;
  transition: transform .3s ease;
}
.nv-dl a:hover > span::before {
  transform: translateY(-3px);
  background: var(--dl-zlata-svit, #DCC48C);
}

/* --------------------------------------------------------------------------
   4) FOTKY A IKONY PODLE KATEGORIE
   Adresa v selektoru musí sedět na skutečnou adresu kategorie. Po importu,
   který kategorie zakládá, se adresy mění → zkontrolovat.
   Ikony jsou tytéž soubory, co se používají v menu (tools/ikony/).
   -------------------------------------------------------------------------- */
.nv-dl a[href="/zbrane/"]::before                  { background-image: url(/user/documents/kategorie/zbrane.jpg); }
.nv-dl a[href="/strelivo/"]::before                { background-image: url(/user/documents/kategorie/strelivo.jpg); }
.nv-dl a[href="/optika-a-termovize/"]::before      { background-image: url(/user/documents/kategorie/optika.jpg); }
.nv-dl a[href="/lovecke-potreby/"]::before         { background-image: url(/user/documents/kategorie/lovecke-potreby.jpg); }
.nv-dl a[href="/doplnky-a-udrzba-zbrani/"]::before { background-image: url(/user/documents/kategorie/doplnky-udrzba.jpg); }
.nv-dl a[href="/odevy-a-obuv/"]::before            { background-image: url(/user/documents/kategorie/odevy-obuv.jpg); }
.nv-dl a[href="/darkove-predmety/"]::before        { background-image: url(/user/documents/kategorie/darkove-predmety.jpg); }

.nv-dl a[href="/zbrane/"] > span::before                  { -webkit-mask-image: url(/user/documents/ikony/zbrane.svg);           mask-image: url(/user/documents/ikony/zbrane.svg); }
.nv-dl a[href="/strelivo/"] > span::before                { -webkit-mask-image: url(/user/documents/ikony/strelivo.svg);         mask-image: url(/user/documents/ikony/strelivo.svg); }
.nv-dl a[href="/optika-a-termovize/"] > span::before      { -webkit-mask-image: url(/user/documents/ikony/optika.svg);           mask-image: url(/user/documents/ikony/optika.svg); }
.nv-dl a[href="/lovecke-potreby/"] > span::before         { -webkit-mask-image: url(/user/documents/ikony/lovecke-potreby.svg);  mask-image: url(/user/documents/ikony/lovecke-potreby.svg); }
.nv-dl a[href="/doplnky-a-udrzba-zbrani/"] > span::before { -webkit-mask-image: url(/user/documents/ikony/doplnky-udrzba.svg);   mask-image: url(/user/documents/ikony/doplnky-udrzba.svg); }
.nv-dl a[href="/odevy-a-obuv/"] > span::before            { -webkit-mask-image: url(/user/documents/ikony/odevy-obuv.svg);       mask-image: url(/user/documents/ikony/odevy-obuv.svg); }
.nv-dl a[href="/darkove-predmety/"] > span::before        { -webkit-mask-image: url(/user/documents/ikony/darkove-predmety.svg); mask-image: url(/user/documents/ikony/darkove-predmety.svg); }

/* --------------------------------------------------------------------------
   5) MOBIL
   -------------------------------------------------------------------------- */
/* Sedm dlaždic se nedělí hezky — jediný počet sloupců, který vyjde bez
   zbytku, jsou čtyři (4+3). Tři nechají 3+3+1, dva 2+2+2+1. Proto se drží
   čtyři sloupce až dolů k mobilu: měřeno na 800 px je dlaždice 180 px
   široká a nejdelší popisek („Doplňky a údržba zbraní") se láme na dva
   řádky, ostatní zůstávají na jednom. Osamocená dlaždice tak zbyde
   jen na mobilu, kde to nikoho neruší. */
@media (max-width: 1499px) { .nv-dl { --dl-cols: 4; } }

@media (max-width: 767px) {
  .nv-dl {
    --dl-cols: 2;
    --dl-gap: 10px;
  }
  .nv-dl a { min-height: 132px; padding: 16px 10px; }
  .nv-dl a > span { letter-spacing: .07em; }
}

/* === 04-bannery-uvod.css ===================================== */
/* ==========================================================================
   DVA BANNERY POD DLAŽDICEMI — SERVIS A VÝKUP
   Šablona template-11 (Classic).

   HTML je v tools/bannery.html a vkládá se do stejného místa jako dlaždice:
   Vzhled a obsah → Titulní strana → Nástroje → Zdrojový kód, hned pod
   <ul class="nv-dl">. Platí i stejná opatrnost s WYSIWYG editorem —
   žádný prázdný element, každý <span> nese text.

   Staví na proměnných z 03-dlazdice-uvod.css (--dl-pad, --dl-gap,
   --dl-ink) a na tom, že tamní CSS už rozpustilo sevření šablony.
   Zaoblení má vlastní --bn-radius, i když je teď stejné jako u dlaždic —
   ať jde měnit každé zvlášť. Bez 03 tenhle soubor nedává smysl a nesmí se nasazovat sám.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) DVOJICE
   Dva stejně široké bannery vedle sebe, na mobilu pod sebou. Lícují
   s dlaždicemi nad sebou, proto stejné --dl-pad i --dl-gap.
   -------------------------------------------------------------------------- */
.nv-bn {
  --bn-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-gap, 14px);
  margin: 0 0 40px;
  padding: 0 var(--dl-pad, 20px);
  list-style: none;
}
.nv-bn > li {
  display: flex;
  flex: 1 1 calc((100% - var(--dl-gap, 14px)) / 2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nv-bn > li::before { content: none; }

/* --------------------------------------------------------------------------
   2) BANNER
   Vrstvy jsou stejné jako u dlaždic: ::before fotka, ::after přechod.
   Přechod jde zleva doprava, ne zdola nahoru — text sedí vlevo a musí
   být čitelný, kdežto vpravo má zůstat vidět fotka.
   -------------------------------------------------------------------------- */
.nv-bn a {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 32px clamp(24px, 3vw, 44px);
  box-sizing: border-box;
  border: 1px solid var(--dl-zlata, #B89A5C);
  border-radius: var(--bn-radius);
  background: var(--dl-ink, #2B261C);
  overflow: hidden;
  color: #fff;
  text-align: left;
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.nv-bn a:hover,
.nv-bn a:focus-visible {
  color: #fff;
  text-decoration: none;
  border-color: var(--dl-zlata-svit, #D8BC7E);
  box-shadow: 0 14px 30px rgba(20,17,12,.35);
}

/* fotka — vpravo, aby ji text nepřekrýval */
.nv-bn a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: right center;
  background-size: cover;
  transition: transform .45s ease;
}
.nv-bn a:hover::before { transform: scale(1.05); }

.nv-bn a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
              rgba(20,17,12,.93) 0%,
              rgba(20,17,12,.78) 40%,
              rgba(20,17,12,.35) 100%);
  transition: background .3s ease;
}
.nv-bn a:hover::after,
.nv-bn a:focus-visible::after {
  background: linear-gradient(to right,
              rgba(20,17,12,.95) 0%,
              rgba(20,17,12,.84) 40%,
              rgba(20,17,12,.45) 100%);
}

/* --------------------------------------------------------------------------
   3) TEXT
   -------------------------------------------------------------------------- */
.nv-bn__t {
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.nv-bn__p {
  max-width: 34ch;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}

/* Vypadá to jako tlačítko, ale tlačítko to není — celý banner je jeden
   odkaz. Kdyby uvnitř bylo druhé <a>, prohlížeč by je nevnořil a rozpadlo
   by se to. Proto <span> a žádný vlastní href. */
.nv-bn__c {
  margin-top: 6px;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .25s ease, border-color .25s ease;
}
.nv-bn a:hover .nv-bn__c,
.nv-bn a:focus-visible .nv-bn__c {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.8);
}

/* --------------------------------------------------------------------------
   4) FOTKY
   Nahrávají se přes make_obrazky.py do /user/documents/bannery/.
   Bez fotky zůstane tmavý banner — funguje, jen je hluchý.
   -------------------------------------------------------------------------- */
.nv-bn a[href="/servis-zbrani/"]::before          { background-image: url(/user/documents/bannery/servis.jpg); }
.nv-bn a[href="/vykup-a-komisni-prodej/"]::before { background-image: url(/user/documents/bannery/vykupy.jpg); }

/* --------------------------------------------------------------------------
   5) MOBIL
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nv-bn > li { flex: 1 1 100%; }
  .nv-bn a { min-height: 200px; padding: 26px 22px; }
  /* na úzkém banneru je fotka vpravo skoro schovaná pod textem,
     tak se přechod otočí zdola nahoru jako u dlaždic */
  .nv-bn a::after {
    background: linear-gradient(to top,
                rgba(20,17,12,.92) 0%,
                rgba(20,17,12,.72) 55%,
                rgba(20,17,12,.40) 100%);
  }
  .nv-bn a::before { background-position: center; }
}

/* === 05-policka-produktu.css ================================= */
/* ==========================================================================
   NOVINKY A AKČNÍ ZBOŽÍ JAKO VODOROVNÁ POLIČKA
   Šablona template-11 (Classic).

   Žádné HTML se nevkládá — bloky produktů na úvodní stránce si šablona
   vykresluje sama, tohle jen mění, jak se chovají. Struktura, na kterou
   se to věší:

       .homepage-group-title           nadpis „Akční zboží"
       .products.products-block        > .product > .p …

   Zabírá to na oba bloky naráz (homepage-products-1 i -2). Kdyby měl
   jeden z nich vypadat jinak, rozliší se přes .homepage-products-2.

   POZOR na selektor: váže se na třídu homepage-products, ne na samotné
   .products-block. Tu druhou totiž nesou i výpisy produktů v kategoriích
   a ty mají zůstat svislé — jinak by se z celého e-shopu staly poličky.

   Šipky přidává modification.js — bez něj polička funguje dál, jen se
   posouvá kolečkem a prstem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) OD KRAJE KE KRAJI
   Stejná past jako u dlaždic: .content-wrapper.container není zúžený
   max-widthem, ale pevnou šířkou s auto marginy. Přidává se k tomu
   ještě 20px padding na <main class="content">.

   Odsazení od okraje si pak řídí nadpis a polička samy přes --dl-pad,
   takže lícují s dlaždicemi nad sebou.
   -------------------------------------------------------------------------- */
body.type-index .overall-wrapper > .content-wrapper.container {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
body.type-index .overall-wrapper > .content-wrapper.container main.content {
  padding-left: 0;
  padding-right: 0;
}
/* Nadpis „Akční zboží" / „Novinky" u levého okraje, podtržený.
   Šířka je fit-content — kdyby to byl blok přes celou šířku, podtržení
   by se táhlo přes celou stránku místo pod textem. */
body.type-index .homepage-group-title {
  width: fit-content;
  margin: 0 auto 20px var(--dl-pad, 20px);
  padding: 0 0 8px;
  text-align: left;
  border-bottom: 2px solid var(--nv-zlata, #C4A76A);
}

.products.products-block[class*="homepage-products"] {
  --sh-cols: 5;                 /* kolik kusů je vidět naráz */
  --sh-gap: 14px;

  display: flex;
  flex-wrap: nowrap;
  gap: var(--sh-gap);
  margin: 0 0 34px;

  /* scroll, ne auto: prohlizec pak drzi misto pro posuvnik vzdy,
     i kdyz zrovna nikdo neroluje */
  overflow-x: scroll;
  overflow-y: hidden;
  /* Aby přejetí prstem po poličce nezačalo posouvat celou stránku, až
     polička dojede na kraj. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* mandatory, ne proximity: proximity nechá poličku stát mezi kartami,
     když se prst zastaví „skoro" na místě, a na mobilu to vypadá, že
     krokování neodpovídá velikosti položek. mandatory dojede vždy na
     kartu. */
  scroll-snap-type: x mandatory;
  /* scroll-behavior: smooth se sem NEDÁVÁ. Dohromady s mandatory snapem
     se plynulé dojíždění zruší a polička skončí zpátky na nule — ověřeno
     měřením: s `auto` posun 600px projde, se `smooth` zůstane 0.
     O plynulost se stará modification.js, který ji předává rovnou
     do scrollBy() a umí ji vypnout podle prefers-reduced-motion. */
  /* Odsazení od kraje nese obal .nv-police, ne polička sama. Dokud ho měla
     polička, táhl se posuvník i pod ním, tedy až ke krajům okna. Takhle
     posuvník lícuje s kartami.

     scroll-padding tím pádem taky odpadá: polička už pod sebou žádné
     odsazení nemá, takže karta na kraji nemá kam zalézt. */
  padding: 0 0 10px;

  /* Posuvník je schválně bez `scrollbar-width` a `scrollbar-color`.
     Chrome od verze 121 tyhle standardní vlastnosti umí a jakmile jsou
     nastavené, přestane brát ohled na ::-webkit-scrollbar — a macOS pak
     kreslí překryvný posuvník, který se po chvíli schová. Přes samotné
     ::-webkit-scrollbar zůstane klasický, pořád viditelný. */
}
.products.products-block[class*="homepage-products"]::-webkit-scrollbar {
  height: 6px;
}
.products.products-block[class*="homepage-products"]::-webkit-scrollbar-track {
  /* Sekce je tmavá, takže i dráha a jezdec musí být světlé — v tmavé
     verzi nebyl posuvník vidět vůbec. */
  background: rgba(255, 255, 255, .08);
  border-radius: 3px;
}
.products.products-block[class*="homepage-products"]::-webkit-scrollbar-thumb {
  background: rgba(196, 167, 106, .45);
  border-radius: 3px;
}
.products.products-block[class*="homepage-products"]:hover::-webkit-scrollbar-thumb {
  background: rgba(196, 167, 106, .75);
}

/* Šablona řeší mřížku plovoucími sloupci a k tomu má na bloku clearfix.
   Ve flexu by se z ::after stala další položka a vpravo by zbyla mezera. */
.products.products-block[class*="homepage-products"]::before,
.products.products-block[class*="homepage-products"]::after {
  content: none;
}

.products.products-block[class*="homepage-products"] > .product {
  /* Šířka se počítá ručně, flex-basis o mezerách neví. Stejný postup
     jako u dlaždic — počet v řadě řídí --sh-cols. */
  flex: 0 0 calc((100% - (var(--sh-cols) - 1) * var(--sh-gap)) / var(--sh-cols));
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  scroll-snap-align: start;
  /* scroll-snap-stop: always se sem NEDÁVÁ. Zní to lákavě („jedno
     švihnutí = jedna karta"), ale zastropuje to i posun šipkou: klik měl
     posunout o čtyři viditelné karty a posunul o jednu. Prstem se stejně
     dojede na kartu díky mandatory snapu. */
}

@media (max-width: 1399px) { .products.products-block[class*="homepage-products"] { --sh-cols: 4; } }
@media (max-width: 1099px) { .products.products-block[class*="homepage-products"] { --sh-cols: 3; } }
@media (max-width: 767px) {
  .products.products-block[class*="homepage-products"] {
    --sh-cols: 2;
    --sh-gap: 10px;
  }
}

/* Na telefonu jedna karta přes celou šířku. Desetinné číslo není překlep:
   --sh-cols se dosazuje do výpočtu šířky, takže 1.15 znamená „jedna karta
   a kousek". Ten kousek další karty na kraji je tam schválně — je to
   jediné, co na dotykovém displeji prozradí, že se polička dá posouvat
   (šipky se na dotyku nezobrazují). */
@media (max-width: 600px) {
  .products.products-block[class*="homepage-products"] {
    --sh-cols: 1.15;
  }
}

/* --------------------------------------------------------------------------
   4) HLAVIČKA POLIČKY A ŠIPKY
   Obal kolem nadpisu a ovládání staví modification.js. Když skript
   neběží, hlavička nevznikne a nadpis zůstane, jak ho dělá šablona —
   polička se pak posouvá kolečkem a prstem.
   -------------------------------------------------------------------------- */
/* Obal poličky. Nese odsazení od kraje okna za poličku samotnou —
   kdyby ho měla polička, táhl by se pod ním i posuvník až ke krajům. */
.nv-police {
  padding: 0 var(--dl-pad, 20px);
}

.nv-police__hlava {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--dl-pad, 20px);
  margin: 0 0 20px;
}

/* Nadpis si odsazení i spodní mezeru nese sám (sekce 1) — v hlavičce by
   se odsazení zdvojilo a spodní mezera by ho navíc posunula o 20px níž
   než šipky, protože se do zarovnání flexu počítá.

   `body.type-index` v selektoru není zdobení: bez něj má pravidlo nižší
   specificitu než to v sekci 1 a prohrálo by bez ohledu na pořadí. */
body.type-index .nv-police__hlava > .homepage-group-title {
  margin: 0;
}

.nv-police__ovladani {
  display: flex;
  gap: 8px;
  flex: none;
}

.nv-police__sip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(196, 167, 106, .45);
  border-radius: 0;              /* hranaté, jako dlaždice a bannery */
  background: transparent;
  color: var(--nv-zlata, #C4A76A);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              opacity .2s ease, visibility .2s ease;
}
.nv-police__sip:hover {
  background: var(--nv-zlata, #C4A76A);
  border-color: var(--nv-zlata, #C4A76A);
  color: var(--nv-cerna, #17140F);
}
.nv-police__sip:focus-visible {
  outline: 2px solid var(--nv-zlata-svit, #DCC48C);
  outline-offset: 2px;
}
.nv-police__sip svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Na kraji poličky nemá šipka co dělat. Skrývá se přes visibility, ne
   display — jinak by dvojice tlačítek při každém skrytí poskočila.

   Třídu nastavuje modification.js. Atribut `hidden` se nepoužívá, ten si
   nese vlastní display: none z prohlížeče, které se pralo s naším
   display: flex — šipka zůstala vidět, i když ji skript skryl. */
.nv-police__sip--skryta {
  opacity: .25;
  pointer-events: none;
}

/* Když nadpis chybí, ovládání spadne do rohu poličky. */
.nv-police--bez-hlavy {
  position: relative;
}
.nv-police--bez-hlavy .nv-police__ovladani {
  position: absolute;
  top: -52px;
  right: var(--dl-pad, 20px);
}

/* --------------------------------------------------------------------------
   5) KARTA PRODUKTU
   Šablona nechává obsah karty nalepený na okraj — obrázek i text sedí
   natvrdo u hrany. Odsazení se dává kartě jako celku, ne jednotlivým
   částem, aby se obrázek i text zarovnaly na stejnou svislici.
   -------------------------------------------------------------------------- */
.products.products-block[class*="homepage-products"] > .product .p {
  box-sizing: border-box;
  padding: 14px;
}

/* Obrázek si nese vlastní spodní mezeru, která se s odsazením karty
   sčítala a text pak plaval moc nízko. */
.products.products-block[class*="homepage-products"] > .product .p > .image {
  margin-bottom: 6px;
}

/* === 06-menu.css ============================================= */
/* ==========================================================================
   PRUH HLAVNÍHO MENU podle návrhu
   Šablona template-11 (Classic). Žádné HTML, jen přebarvení a přesázení
   toho, co šablona vykresluje sama.

   CELÝ SOUBOR JE ZA @media (min-width: 768px). To není kosmetika:
   pod 768px si šablona dělá z menu vysouvací panel — <nav> je fixed,
   zaparkovaný mimo obrazovku a šířku si bere od obsahu. Jakýkoliv náš
   zásah tam škodí, i zdánlivě neškodný: `width: 100%` na vnitřním divu
   znamenalo 100 % z nulové šířky, panel po otevření zůstal nulový a text
   ležel mimo obrazovku. Ani verzálky s prostrkáním nejsou zadarmo, mění
   šířku textu a panel se podle ní sází.

   Mobilní chování menu proto necháváme celé na šabloně.
   ========================================================================== */

@media (min-width: 768px) {

  .navigation-in.menu {
    background: var(--nv-menu, #332D22) !important;
  }

  .navigation-in.menu > ul.menu-level-1 > li > a {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Na olivovém pruhu je bílá čitelnější než krémová z palety —
       kontrast 4,1 : 1 proti 3,3 : 1. */
    color: #fff !important;
    transition: background .2s ease, color .2s ease;
  }

  /* Pruh je teď sám olivový, takže najetí musí ztmavnout — světlejší
     olivová by na něm nebyla vidět. */
  .navigation-in.menu > ul.menu-level-1 > li > a:hover,
  .navigation-in.menu > ul.menu-level-1 > li > a:focus-visible {
    background: var(--nv-olivova-tm, #6E6240) !important;
    color: #fff !important;
    text-decoration: none;
  }

  /* Položka právě otevřené sekce. Shoptet ji značí různě podle typu
     stránky, proto se berou obě obvyklé varianty naráz. */
  .navigation-in.menu > ul.menu-level-1 > li.active > a,
  .navigation-in.menu > ul.menu-level-1 > li.current > a {
    background: var(--nv-tmava, #26221A) !important;
    color: #fff !important;
  }

  /* Vyzdvižené položky. V návrhu mají Servis a Výkupy olivový podklad, aby
     se odlišily od kategorií. Váže se to na adresu, ne na pozici v menu —
     pořadím položek to tedy nerozhodíš. */
  .navigation-in.menu > ul.menu-level-1 > li > a[href*="/servis-zbrani/"],
  .navigation-in.menu > ul.menu-level-1 > li > a[href*="/vykup-a-komisni-prodej/"] {
    /* Obráceně než ve vzoru: tam byl pruh tmavý a tyhle dvě položky
       olivové. Pruh je teď olivový, tak se odlišují tmavou. */
    background: var(--nv-tmava, #26221A) !important;
    color: var(--nv-zlata, #C4A76A) !important;
  }
  .navigation-in.menu > ul.menu-level-1 > li > a[href*="/servis-zbrani/"]:hover,
  .navigation-in.menu > ul.menu-level-1 > li > a[href*="/vykup-a-komisni-prodej/"]:hover {
    background: var(--nv-cerna, #17140F) !important;
    color: var(--nv-zlata-svit, #DCC48C) !important;
  }

  /* Ikony v menu podle návrhu nejsou. Vypínají se tady, ne v 02-ikony.css —
     ten soubor se generuje skriptem z exportu kategorií a ruční zásah by
     při příštím přegenerování zmizel. Ikon u podkategorií a v dlaždicích
     na úvodní stránce se to netýká, ty visí na jiných selektorech.
     Bere to i kopii menu v .menu-helper, proto obecný selektor přes třídu. */
  header nav [class^="menu-item-"] > a::before,
  header nav [class*=" menu-item-"] > a::before {
    content: none !important;
  }

  /* --------------------------------------------------------------------------
     ROZBALOVACÍ ŠIPKA
     Šablona ji kreslí znakem z ikonového fontu `shoptet`. Nahrazuje se
     vlastním kreslítkem ze dvou okrajů otočených o 45° — vyjde z toho čistý
     úhelníček dolů, který nezávisí na tom, co je v jejich fontu, a dá se
     u něj řídit tloušťka i velikost.
     -------------------------------------------------------------------------- */
  .navigation-in.menu > ul.menu-level-1 > li > a > .submenu-arrow {
    /* zlatá na olivové splývá, tady je čitelnější poloprůhledná bílá */
    color: rgba(255, 255, 255, .7);
  }
  .navigation-in.menu > ul.menu-level-1 > li > a > .submenu-arrow::after {
    content: "" !important;
    display: block;
    width: 6px;
    height: 6px;
    /* posun nahoru vyrovnává to, že se čtvereček otáčí kolem svého středu
       a optický střed úhelníčku je níž než geometrický */
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .navigation-in.menu > ul.menu-level-1 > li > a:hover > .submenu-arrow {
    color: #fff;
  }


  :root {
    --menu-vyska: 42px;
  }

  /* --- výška ------------------------------------------------------------
     Jediné místo, kde se nastavuje — odkaz i hamburger si ji berou odsud,
     takže se nedá rozejít.

     Nepočítá se z řádkování a odsazení. Šablona sype do odkazu <b>
     a <span>, které si nesou vlastní výšku (18px, ne 16), a součet pokaždé
     vyšel o pár pixelů jinak — pruh se pak ořezával, protože <nav> má
     overflow: hidden. Pevná výška odkazu a vystředění flexem to řeší
     bez aritmetiky. */
  header nav,
  header nav.visible {
    height: var(--menu-vyska) !important;
  }

  /* --- pruh přes celou šířku okna ---------------------------------------
     Stejná past jako u dlaždic a poliček: pruh drží .container
     .navigation-wrapper svojí šířkou, odsazením a marginy. <nav> má navíc
     záporné marginy, kterými si to odsazení ruší — když se odsazení
     vynuluje, musí se vynulovat i ony, jinak nav vyleze ven. */
  header .container.navigation-wrapper {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  header .container.navigation-wrapper > nav {
    /* !important je nutné — šablona si ty záporné marginy nastavuje
       pravidlem s vyšší specificitou. Bez toho nav přečuhoval o 20px
       na každou stranu a stránka se dala posouvat do boku. */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ve stejném kontejneru jako pruh menu sedí i horní řada hlavičky —
     logo, hledání, přihlášení, košík. Odsazení jsme sebrali kontejneru,
     takže o něj přišla i ona a košík u pravého kraje se ořezával.
     Vrací se jen jí, na stejnou míru jako má zbytek stránky. */
  header .container.navigation-wrapper > .header-top {
    padding-left: var(--dl-pad, 20px);
    padding-right: var(--dl-pad, 20px);
  }

  /* Šablona nechává tenhle obal široký přes 139 000 px — tak si měří, co
     se do řádku vejde. Pro rozprostření položek potřebujeme skutečnou
     šířku; obal je absolutní uvnitř <nav>, takže 100 % = šířka nav. */
  .navigation-in.menu {
    width: 100% !important;
  }

  /* --- řádek položek ----------------------------------------------------
     Odsazení od kraje lícuje s dlaždicemi a poličkami (--dl-pad), vpravo
     se k němu přidává místo na hamburger.

     Volné místo se rozdává do mezer mezi položkami, ne do jejich šířky.
     Roztahovat položky (flex-grow) byla slepá ulička: šablona si podle
     jejich šířky počítá, kolik se jich do pruhu vejde, takže širší položky
     znamenaly míň položek v pruhu, což uvolnilo místo, což je zase
     rozšířilo. Se `space-between` zůstávají naměřené šířky stejné jako bez
     našeho CSS a šablona se rozhoduje správně. */
  .navigation-in.menu > ul.menu-level-1 {
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-left: var(--dl-pad, 20px);
    /* vpravo jen na hamburger — ten sedí až u kraje, žádné --dl-pad */
    padding-right: 48px;
  }

  .navigation-in.menu > ul.menu-level-1 > li {
    flex: 0 0 auto;
  }

  /* Položky odsunuté do hamburgeru šablona nechává v řádku a jen je
     zneviditelní (visibility: hidden), takže si dál drží šířku. Při
     otevření podmenu jim ji ale sebere — a to při najetí posouvalo celé
     menu. Vyjmutím z rozvržení není co přerozdělovat. */
  .navigation-in.menu > ul.menu-level-1 > li.splitted {
    display: none !important;
  }

  /* --- odkaz ------------------------------------------------------------
     Šablona mu dává display: block, takže <b> a šipka stojí pod sebou
     a text visí u horní hrany. Flexem se srovnají vedle sebe a doprostřed. */
  .navigation-in.menu > ul.menu-level-1 > li > a {
    height: var(--menu-vyska) !important;
    padding: 0 17px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    /* Text se nesmí zalomit ani uříznout — co se nevejde, má spadnout do
       hamburgeru, o to se stará šablona sama. */
    white-space: nowrap;
  }

  /* <b> a šipka si nesou vlastní výšku, kterou odkaz zdědí — bez tohohle
     vyrostl na 67px. <b> je navíc tučné z prohlížeče, proto inherit. */
  .navigation-in.menu > ul.menu-level-1 > li > a > b,
  .navigation-in.menu > ul.menu-level-1 > li > a > .submenu-arrow {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit;
  }
  .navigation-in.menu > ul.menu-level-1 > li > a > .submenu-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    flex: none;
  }

  /* --------------------------------------------------------------------------
     ROZEVÍRACÍ NABÍDKA
     Šablona ji kreslí bílou s tmavým textem. Na tmavém e-shopu z ní byla
     světlá plachta přes celou šířku.

     Selektor bere všechny úrovně kromě první: kategorie mají i třetí
     úroveň a ta by jinak zůstala bílá.
     -------------------------------------------------------------------------- */
  /* Kabát dostává JEN druhá úroveň — ta je tím vysouvacím panelem.

     Třetí úroveň je výpis podkategorií uvnitř panelu (ten zkrácený
     výpustkou „…"), ne samostatná plovoucí nabídka. Když měla stejné
     pravidlo jako panel, vykreslil se kolem ní rámeček a stín 22/44px
     a vypadala jako orámovaný flek uvnitř nabídky. */
  .navigation-in.menu ul.menu-level-2 {
    /* Odstín se odvíjí od pruhu menu, ne od zbytku stránky: musí být
       o kus tmavší než pruh, ale pořád olivový. S tmavě hnědou splývala
       nabídka s obsahem stránky pod sebou. */
    background: var(--nv-olivova-tm, #6E6240) !important;
    /* Bez stínu. Šablona nabídku neschovává přes display: none, takže
       stín zůstával viset pod pruhem i po jejím zavření. Panel se od
       stránky oddělí i tak — má vlastní odstín a zlatou linku nahoře. */
    border-top: 1px solid rgba(196, 167, 106, .25);
    box-shadow: none !important;
  }

  /* --------------------------------------------------------------------------
     ZKRÁCENÝ VÝPIS PODKATEGORIÍ („…")
     Když se výpis třetí úrovně nevejde, přidá Shoptet za běhu
     <span class="more-items-trigger"> a schová konec textu bílým
     přechodem v ::after. Ten je napevno bílý, protože počítá s bílou
     nabídkou — na naší olivové z něj byl světlý šmouh.

     Přechod se ladí na barvu KARTY, na které leží — ne panelu pod ní.
     Hodnota je natvrdo, protože v gradientu potřebujeme tutéž barvu
     jednou průhlednou. Musí souhlasit s pozadím .menu-level-2 > li
     (#756A4A) a s jeho hover variantou (#847955). Když se změní jedno,
     musí se změnit i druhé — jinak se pod „…" objeví barevný flek.

     Pozor: v zrcadle dílny tenhle prvek neuvidíš. Vzniká až skriptem
     Shoptetu, který se ve staženém zrcadle nespustí. -------------------- */
  .navigation-in.menu .more-items-trigger {
    /* Bílé pozadí je na tom prvku napevno ze šablony — patří k témuž
       předpokladu bílé nabídky jako ten zakrývací přechod. Dokud tady
       platilo plošné pravidlo „vše uvnitř nabídky průhledné", bylo
       schované za ním; po jeho odebrání vylezlo. */
    background: transparent !important;
    color: var(--nv-zlata, #C4A76A) !important;
  }
  .navigation-in.menu .more-items-trigger::after {
    background-image: linear-gradient(90deg,
                      rgba(117, 106, 74, 0) 0%,
                      rgba(117, 106, 74, .9) 45%,
                      rgb(117, 106, 74) 100%) !important;
  }
  .navigation-in.menu ul.menu-level-2 > li:hover .more-items-trigger::after {
    background-image: linear-gradient(90deg,
                      rgba(132, 121, 85, 0) 0%,
                      rgba(132, 121, 85, .9) 45%,
                      rgb(132, 121, 85) 100%) !important;
  }

  /* Třetí a hlubší úrovně jsou součástí panelu, ne vlastní plocha. */
  .navigation-in.menu ul[class*="menu-level-"]:not(.menu-level-1):not(.menu-level-2) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* --------------------------------------------------------------------------
     POLOŽKY NABÍDKY JAKO KARTY
     Šablona skládá položku z <a class="menu-image"> s obrázkem a <div>
     s názvem, celé v <li>, které už je flex. Stačí to tedy obléknout,
     ne přeskládat.

     Obrázek dostává světlou dlaždici se zaoblením. Není to jen ozdoba:
     obrázky kategorií jsou čárové ikony s ČERNOU linkou a na tmavé
     nabídce mizely. Dřív jsme je přebarvovali filtrem na bílou siluetu —
     se světlou dlaždicí je to zbytečné a hlavně to nerozbije případné
     fotky, které by tam zákazník nahrál místo ikon.
     -------------------------------------------------------------------------- */
  .navigation-in.menu ul.menu-level-2 {
    padding: 16px var(--dl-pad, 20px) !important;
    gap: 10px;
  }

  .navigation-in.menu ul.menu-level-2 > li {
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    /* Neprůhledná barva, ne bílá s alfou. Zakrývací přechod u „…" se
       musí trefit do barvy pozadí přesně — s poloprůhlednou vrstvou by
       se to muselo dopočítávat a při každé změně znovu. */
    background: #756A4A !important;
    transition: background .2s ease, border-color .2s ease;
  }
  .navigation-in.menu ul.menu-level-2 > li:hover {
    background: #847955 !important;
    border-color: rgba(196, 167, 106, .55);
  }

  /* dlaždice obrázku — tmavá, aby na ní zlatá ikona vynikla.
     Stejná dvojice jako u dlaždic kategorií na úvodní stránce. */
  .navigation-in.menu ul.menu-level-2 > li > a.menu-image {
    flex: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 9px !important;
    border-radius: 10px;
    background: rgba(23, 20, 15, .45) !important;
  }
  .navigation-in.menu ul.menu-level-2 > li > a.menu-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Obarvená ikona. Adresu obrázku dodá do --nv-ikona modification.js,
     tady se z ní udělá maska prosvícená zlatou — barva tak sedí přesně,
     na rozdíl od skládaných CSS filtrů.

     Původní <img> se jen zneviditelní, z dokumentu nemizí (čtečky).
     Když skript neběží, proměnná nevznikne, třída se nepřidá a zobrazí
     se původní obrázek. */
  .navigation-in.menu ul.menu-level-2 > li > a.menu-image.nv-ikona {
    position: relative;
  }
  .navigation-in.menu ul.menu-level-2 > li > a.menu-image.nv-ikona img {
    visibility: hidden;
  }
  .navigation-in.menu ul.menu-level-2 > li > a.menu-image.nv-ikona::after {
    content: "";
    position: absolute;
    inset: 9px;
    background: var(--nv-zlata, #C4A76A);
    -webkit-mask: var(--nv-ikona) center / contain no-repeat;
            mask: var(--nv-ikona) center / contain no-repeat;
    transition: background .2s ease;
  }
  .navigation-in.menu ul.menu-level-2 > li:hover > a.menu-image.nv-ikona::after {
    background: var(--nv-zlata-svit, #DCC48C);
  }

  /* název a případný výpis podkategorií vedle dlaždice */
  .navigation-in.menu ul.menu-level-2 > li > div {
    flex: 1 1 auto;
    min-width: 0;
    display: block !important;
  }
  .navigation-in.menu ul.menu-level-2 > li > div > a {
    font-weight: 600;
    color: var(--nv-text-svet, #F0EBE0) !important;
  }

  /* šipka vpravo, stejné kreslítko jako u rozbalovací šipky v pruhu */
  .navigation-in.menu ul.menu-level-2 > li::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-right: 1.5px solid rgba(240, 235, 224, .45);
    border-bottom: 1.5px solid rgba(240, 235, 224, .45);
    transform: rotate(-45deg);
    transition: border-color .2s ease, transform .2s ease;
  }
  .navigation-in.menu ul.menu-level-2 > li:hover::after {
    border-color: var(--nv-zlata, #C4A76A);
    transform: rotate(-45deg) translate(1px, -1px);
  }
  .navigation-in.menu ul[class*="menu-level-"]:not(.menu-level-1) a {
    color: rgba(240, 235, 224, .82) !important;
  }
  .navigation-in.menu ul[class*="menu-level-"]:not(.menu-level-1) a:hover,
  .navigation-in.menu ul[class*="menu-level-"]:not(.menu-level-1) a:focus-visible {
    color: var(--nv-zlata, #C4A76A) !important;
    background: transparent !important;
  }

  /* Položka, jejíž nabídka je zrovna rozevřená. Dostává stejný odstín
     jako nabídka pod ní, takže na sebe navazují jako záložka a její list.
     Šablona jí dávala bílý podklad — ze stejného důvodu, jen k bílé. */
  .navigation-in.menu > ul.menu-level-1 > li.exp > a {
    background: var(--nv-olivova-tm, #6E6240) !important;
    color: #fff !important;
  }
  .navigation-in.menu > ul.menu-level-1 > li.exp > a > .submenu-arrow {
    color: var(--nv-zlata, #C4A76A);
  }

  /* --- hamburger --------------------------------------------------------
     Šablona ho nechává 32 × 32 px, takže po zvýšení pruhu zůstal viset
     uprostřed. Roztahuje se na celou výšku a odlišuje se zlatavým
     podkladem — je to jiný druh ovládání než položky menu.

     `top` se schválně nepřepisuje: šablona ho má na 98px a počítá se od
     jiného předka, než by člověk čekal — `top: 0` hamburger vystřelilo
     o 98px nad pruh. Pruh roste dolů, takže původní hodnota platí dál.
     Vodorovně sedí na pravém kraji okna, bez odsazení — pruh je tmavý
     přes celou šířku, takže hamburger na jeho konci působí jako součást
     pruhu, ne jako odstavená ikona. */
  .menu-helper {
    right: 0 !important;
    height: var(--menu-vyska) !important;
    width: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* Na olivovém pruhu by se zlatavý nádech ztratil, tak se hamburger
       odlišuje tmavou — stejně jako Servis a Výkupy. */
    background: rgba(23, 20, 15, .22) !important;
    transition: background .2s ease;
  }
  .menu-helper::after {
    color: #fff !important;
    font-size: 19px !important;
  }
  .menu-helper:hover {
    background: var(--nv-tmava, #26221A) !important;
  }
  .menu-helper:hover::after {
    color: var(--nv-zlata, #C4A76A) !important;
  }

}

/* === 07-sekce.css ============================================ */
/* ==========================================================================
   BARVY SEKCÍ ÚVODNÍ STRÁNKY podle návrhu
   Šablona template-11 (Classic).

   Návrh střídá tmavé a světlé pásy. Tmavý je horní blok — karusel,
   dlaždice kategorií a bannery Servis/Výkup. Světlý je spodek —
   produktové poličky. Patička se vrací do nejtmavšího odstínu.

   Sekce se poznají podle obalů, které šablona kreslí na úvodní stránce:

       .homepage-box.before-carousel   karusel
       .homepage-box.welcome-wrapper   úvodní text = dlaždice a bannery
       .content-wrapper.container      produktové bloky

   Všechno je scoupnuté na body.type-index — na ostatních stránkách
   zůstávají barvy tak, jak je dělá šablona.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) PLÁTNO PROHLÍŽEČE
   Když se stránka přetáhne za horní nebo dolní okraj (rubber-band na
   Macu a na dotyku), nevykreslí se obsah stránky, ale plátno prohlížeče.
   To bere barvu z <html> — a dokud je bílá, bliknou nahoře i dole bílé
   pruhy, i když je celá stránka tmavá.

   Není to scoupnuté na úvodní stránku: nahoře se přetažením odkryje
   prostor nad hlavičkou a dole pod patičkou, a ty jsou tmavé všude.
   -------------------------------------------------------------------------- */
html {
  background-color: var(--nv-cerna, #17140F);
}

/* Pojistka pro zbytek e-shopu.

   Barvy nastavené v administraci se propisují i do pozadí <body>, takže
   po jejich ztmavení zůstaly kategorie a podstránky tmavé — ale texty
   výpisů si drží tmavou barvu ze šablony a byly nečitelné.

   Tmavý vzhled máme navržený jen pro úvodní stránku. Všude jinde se proto
   vrací světlý podklad. Plátna prohlížeče se to netýká, přetažené okraje
   zůstávají tmavé i tady. */
body:not(.type-index) {
  background-color: var(--nv-krem, #F6F1E6);
}

/* --------------------------------------------------------------------------
   1) TMAVÝ BLOK — dlaždice a bannery
   Šablona sem dává světle šedou #f6f6f6. V návrhu dlaždice plavou na
   tmavém podkladu, ne na světlém.
   -------------------------------------------------------------------------- */
body.type-index .content-wrapper.homepage-box.welcome-wrapper {
  background: var(--nv-cerna, #17140F) !important;
  padding-top: 34px;
  padding-bottom: 4px;
}

/* Nadpis „Vítejte v našem obchodě" a úvodní text teď leží na tmavém,
   takže musí zesvětlat. Nadpis zůstává H1 kvůli SEO. */
body.type-index .welcome-wrapper .welcome > .h1 {
  color: var(--nv-zlata, #C4A76A) !important;
}
body.type-index .welcome-wrapper .welcome,
body.type-index .welcome-wrapper .welcome p {
  color: rgba(240, 235, 224, .72);
}
/* Odkazy ve VLASTNÍM textu úvodní stránky, ne v našich blocích.

   Dřív to bylo psané jako a:not([class*="nv-"]) — jenže odkazy v dlaždicích
   a bannerech žádnou třídu nemají (třídy nesou až <span>y uvnitř), takže
   výjimka na ně nesedla a obarvila je na zlato. S ní zezlátly i ikony,
   protože ty se kreslí přes background: currentColor.

   Zúžením na odstavce je to jednoznačné: naše bloky jsou <ul>, ne <p>. */
body.type-index .welcome-wrapper .welcome p a {
  color: var(--nv-zlata, #C4A76A);
}

/* --------------------------------------------------------------------------
   1a) MEZERY MEZI SEKCEMI
   Když měly sekce bílé pozadí, nebylo mezerami mezi nimi co prozradit.
   S barevnými pásy z nich jsou pruhy pozadí stránky mezi bloky.

   Dvě příčiny: tmavý blok si nese svislé marginy 38px, a mezi ním
   a poličkami stojí obal #content-wrapper, který si bere 68px na výšku,
   i když je na úvodní stránce prázdný (nadpis stránky v něm teď není).

   Ruší se jen odsazení, nic se neskrývá — kdyby se do obalu obsah vrátil,
   vykreslí se dál. A platí to pouze na úvodní stránce; na kategoriích
   a detailu produktu je v tomhle obalu skutečný obsah včetně H1.
   -------------------------------------------------------------------------- */
body.type-index .overall-wrapper > .content-wrapper.homepage-box.welcome-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}
body.type-index #content-wrapper.content-wrapper {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   1b) ODDĚLOVACÍ ČÁRY SEKCÍ
   Šablona lemuje každý blok úvodní stránky šedou linkou #dadada. Na bílé
   je nenápadná, na tmavém podkladu z ní je světlý pruh přes celou šířku.

   Nemažou se úplně — na rozhraní tmavého a světlého pásu se hodí. Jen
   ztmavnou do zlatavého nádechu, stejného, jaký má proužek v patičce.
   -------------------------------------------------------------------------- */
body.type-index .content-wrapper.homepage-box {
  border-top-color: rgba(196, 167, 106, .12);
  border-bottom-color: rgba(196, 167, 106, .12);
}

/* --------------------------------------------------------------------------
   2) POLIČKY PRODUKTŮ
   Stejná tmavá jako zbytek úvodní stránky — celý vršek je tak jeden
   souvislý tmavý blok a bílé karty produktů na něm vyniknou.
   -------------------------------------------------------------------------- */
body.type-index .overall-wrapper > .content-wrapper.container {
  background: var(--nv-cerna, #17140F);
  /* Nahoře míň než dole: nad poličkami už je odsazení tmavého bloku
     a nadpis si nese vlastní mezeru pod sebou, takže se to sčítalo. */
  padding-top: 22px;
  padding-bottom: 46px;
}

/* Nadpis poličky. Podtržení má 05-policka-produktu.css, tady jen barva —
   na tmavém podkladu musí být světlý. */
body.type-index .homepage-group-title {
  color: var(--nv-text-svet, #F0EBE0);
}

/* Karty produktů zůstávají bílé, ať se od krémového podkladu oddělí. */
body.type-index .products.products-block > .product .p {
  background: var(--nv-bila, #FFFFFF);
}

/* --------------------------------------------------------------------------
   3) KARUSEL
   Ať mezi hlavičkou a tmavým blokem dlaždic nezůstane světlý proužek.
   -------------------------------------------------------------------------- */
body.type-index .content-wrapper.homepage-box.before-carousel {
  background: var(--nv-cerna, #17140F);
}

/* --------------------------------------------------------------------------
   3b) HLAVIČKA A HORNÍ LIŠTA
   Jediná světlá plocha, která na tmavé stránce zbývala. V návrhu je horní
   lišta nejtmavší a hlavička o odstín světlejší.

   Není to scoupnuté na body.type-index — hlavička má vypadat stejně na
   všech stránkách, jinak by při prokliku problikla do bílé.
   -------------------------------------------------------------------------- */
.top-navigation-bar {
  background: var(--nv-cerna, #17140F);
  color: rgba(240, 235, 224, .68);
  border-bottom: 1px solid rgba(196, 167, 106, .12);
}
/* Uvnitř lišty mají tři bloky vlastní bílé pozadí — kontakty, odkazy
   a skrytá kopie odkazů pro přetečení. Barva lišty se na ně nedědí,
   takže na tmavém pruhu svítily jako bílé obdélníky. */
.top-navigation-bar .top-navigation-contacts,
.top-navigation-bar .top-navigation-menu,
.top-navigation-bar .top-navigation-bar-menu-helper,
.top-navigation-bar .top-navigation-tools {
  background: transparent;
}

/* Rozbalovací nabídka z lišty se ale otevírá nad obsahem stránky —
   ta musí zůstat neprůhledná, jinak se pod ní čte text. */
.top-navigation-bar .top-navigation-bar-menu-helper ul,
.top-navigation-bar .top-navigation-menu ul ul {
  background: var(--nv-cerna, #17140F);
  border: 1px solid rgba(196, 167, 106, .16);
}

.top-navigation-bar a {
  color: rgba(240, 235, 224, .68);
}
.top-navigation-bar a:hover {
  color: var(--nv-zlata, #C4A76A);
}

/* !important je nutné — šablona barví hlavičku podle přepínače
   „světlá/tmavá hlavička" v administraci pravidlem na <html>, které má
   vyšší specificitu. Bez toho zůstala bílá. */
header {
  background: var(--nv-tmava, #26221A) !important;
}
header .header-top,
header .header-top a {
  color: var(--nv-text-svet, #F0EBE0);
}
header .header-top a:hover {
  color: var(--nv-zlata, #C4A76A);
}

/* Košík a přihlášení jsou tlačítka (.btn), a to má v šabloně vlastní
   barvu textu s vyšší specificitou — na tmavé hlavičce zůstala tmavá
   a košík skoro nebyl vidět. Ikony jsou znaky z ikonového fontu na
   ::before, ty se musí přebarvit zvlášť. */
header .header-top .btn,
header .header-top .btn::before,
header .header-top .navigation-buttons a,
header .header-top .navigation-buttons a::before,
header .header-top .navigation-buttons .cart-price,
header .header-top .user-action a,
header .header-top .user-action a::before {
  color: var(--nv-text-svet, #F0EBE0) !important;
}

header .header-top .btn:hover,
header .header-top .btn:hover::before,
header .header-top .navigation-buttons a:hover,
header .header-top .navigation-buttons a:hover::before,
header .header-top .user-action a:hover,
header .header-top .user-action a:hover::before {
  color: var(--nv-zlata, #C4A76A) !important;
}

/* Pole hledání zůstává světlé — v návrhu je to jediný světlý prvek
   hlavičky a je to tak správně, tmavý input na tmavém pozadí by zanikl. */
header .search input,
header .search .form-control {
  background: var(--nv-krem, #F5F3EF);
  color: var(--nv-text, #2B261C);
  border-color: transparent;
}
header .search input::placeholder {
  color: var(--nv-text-tlum, #8A8377);
}

/* --------------------------------------------------------------------------
   4) PATIČKA
   Nejtmavší odstín palety, text zesvětlá.
   -------------------------------------------------------------------------- */
footer.footer {
  background: var(--nv-cerna, #17140F);
  color: rgba(240, 235, 224, .72);
}
footer.footer a {
  color: rgba(240, 235, 224, .82);
}
footer.footer a:hover {
  color: var(--nv-zlata, #C4A76A);
}
footer.footer .h4,
footer.footer h4,
footer.footer strong {
  color: var(--nv-zlata, #C4A76A);
}

/* Spodní proužek s copyrightem a „Vytvořil Shoptet" má vlastní bílé
   pozadí, barva patičky se na něj nedědí. Na tmavé patičce svítil. */
footer.footer .footer-bottom {
  /* !important — proužek má i třídu .container a to pravidlo šablony
     bílé pozadí drží. */
  background: transparent !important;
  border-top: 1px solid rgba(196, 167, 106, .12);
  color: rgba(240, 235, 224, .5);
}
footer.footer .footer-bottom a {
  color: rgba(240, 235, 224, .6);
}
footer.footer .footer-bottom a:hover {
  color: var(--nv-zlata, #C4A76A);
}