/* =============================================================================
   KAPS comm — sloučené vlastní styly pro Shoptet
   -----------------------------------------------------------------------------
   Nahrazuje SEDM samostatných JS souborů, které nedělaly nic jiného, než že
   vkládaly <style>. Tím zmizí 7 HTTP requestů na každé načtení a záblesk
   neostylovaného obsahu (styl teď platí od prvního vykreslení, ne až po JS).

   NAHRAZUJE, po nasazení odstranit ze šablony:
     · custom-product-grid.js          → sekce 1
     · product-card-buttons-fix.js     → sekce 2   (JS část s SVG ikonou ZŮSTÁVÁ)
     · change-akce-color.js            → sekce 3   (JS část ZAHODIT — padá, viz níže)
     · mobile-logo-padding.js          → sekce 4
     · product-image-size-fix.js       → sekce 5
     · remove-homepage-dividers.js     → sekce 6   (ZÚŽENO, viz komentář)
     · mobile-menu-adjust.js           → sekce 7   (JS část s přesunem drobečků ZŮSTÁVÁ)
     · custom_product_grid.css         → smazat, je to starší duplicita sekce 1

   NOVÉ: sekce 8 (oprava vodorovného posouvání) a sekce 9 (styly vyhledávání).

   Kam to patří: Vzhled a obsah → Editor → vlastní CSS.
   ============================================================================= */


/* =============================================================================
   1) Mřížka produktů — homepage 5 sloupců, kategorie a hledání 4
   ============================================================================= */
@media (min-width: 1200px) {

  /* zrušit výchozí rámečky šablony */
  .products .product:nth-child(3n),
  .products .product:nth-child(3n+1),
  .products .product:nth-child(n+4) {
    border: initial;
  }

  .products .product {
    border-right: 1px solid #e5e5e5 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    border-left: none !important;
    border-top: none !important;
    box-sizing: border-box;
  }

  /* homepage — 5 v řadě */
  body.type-index .products .product {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
  body.type-index .products .product:nth-child(5n+1) { border-left: 1px solid #e5e5e5 !important; }
  body.type-index .products .product:nth-child(-n+5) { border-top: 1px solid #e5e5e5 !important; }

  /* kategorie a vyhledávání — 4 v řadě */
  body.type-category .products .product,
  body.type-search .products .product {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  body.type-category .products .product:nth-child(4n+1),
  body.type-search .products .product:nth-child(4n+1) { border-left: 1px solid #e5e5e5 !important; }
  body.type-category .products .product:nth-child(-n+4),
  body.type-search .products .product:nth-child(-n+4) { border-top: 1px solid #e5e5e5 !important; }
}


/* =============================================================================
   2) Karta produktu — cena vlevo, tlačítko vpravo, popis na nový řádek
   ============================================================================= */
@media (min-width: 992px) {

  .product .p-bottom [data-micro="offer"],
  .product .p-bottom > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 5px;
  }

  .product .p-bottom .prices {
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 1 auto !important;
    width: auto !important;
    text-align: left !important;
  }

  .product .p-bottom .p-tools {
    order: 2;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    display: block !important;
  }

  /* popis až pod cenu a tlačítko, přes celou šířku */
  .product .p-bottom .p-desc {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: block !important;
  }

  .product .p-bottom .p-tools form {
    margin: 0 !important;
    display: block !important;
    width: auto !important;
  }

  .product .p-bottom .p-tools .btn {
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    float: none !important;
    height: auto !important;
  }
}

/* platí na všech šířkách */
.product .p-bottom .p-tools .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
}

/* skrýt ikonu ze šablony — vlastní SVG vkládá product-card-buttons-fix.js */
.product .p-bottom .p-tools .btn::before,
.product .p-bottom .p-tools .btn::after,
.product .p-bottom .p-tools .btn span::before,
.product .p-bottom .p-tools .btn span::after {
  content: none !important;
  display: none !important;
}


/* =============================================================================
   3) Zvýraznění položky AKCE v menu
   -----------------------------------------------------------------------------
   JS část původního change-akce-color.js ZAHODIT: volala
   observer.observe(document.body) ještě než body existovalo, takže při každém
   načtení stránky házela TypeError do konzole. Tohle CSS ji plně nahrazuje.
   ============================================================================= */
#navigation a[href="/akce/"]:not(:hover),
#navigation a[href$="/akce/"]:not(:hover),
#navigation a[href="/akce-a-slevy/"]:not(:hover),
#navigation a[href$="/akce-a-slevy/"]:not(:hover),
.menu a[href="/akce/"]:not(:hover),
.menu a[href$="/akce/"]:not(:hover),
.navigation-in a[href="/akce/"]:not(:hover),
.navigation-in a[href$="/akce/"]:not(:hover),
nav a[href="/akce/"]:not(:hover),
nav a[href$="/akce/"]:not(:hover) {
  background-color: #cc004c !important;
  color: #ffffff !important;
}


/* =============================================================================
   4) Logo na mobilu — srovnat do výšky hlavičky
   ============================================================================= */
@media (max-width: 768px) {
  .site-name {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    box-sizing: border-box !important;
  }
  .site-name img {
    max-height: 40px !important;
    width: auto !important;
  }
}


/* =============================================================================
   5) Jednotná velikost obrázků ve výpisu produktů
   -----------------------------------------------------------------------------
   Po aktualizaci Shoptetu se obrázky vykreslovaly různě velké podle poměru
   stran zdroje. Pevný poměr 423:318 + object-fit: contain to srovná.
   ============================================================================= */
.products .product .p > a.image {
  display: block !important;
  aspect-ratio: 423 / 318 !important;
  overflow: hidden !important;
  position: relative !important;
}

.products .product .p > a.image > svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  visibility: hidden !important;
}

.products .product .p > a.image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}


/* =============================================================================
   6) Homepage bez oddělovačů a stínů
   -----------------------------------------------------------------------------
   ⚠️ ZÚŽENO OPROTI PŮVODNÍMU SKRIPTU. remove-homepage-dividers.js měl
   `hr { display: none !important }` bez omezení, takže skrýval VŠECHNY
   vodorovné linky na celém webu — i v popisech produktů. Až vznikne blog,
   zmizely by i oddělovače v článcích. Teď to platí jen na homepage.
   ============================================================================= */
body.type-index .homepage-box,
body.type-index .content-wrapper,
body.type-index .middle-banners-wrapper {
  border: none !important;
  box-shadow: none !important;
}

body.type-index .homepage-box::before,
body.type-index .homepage-box::after,
body.type-index .content-wrapper::before,
body.type-index .content-wrapper::after {
  display: none !important;
  border: none !important;
}

body.type-index #content hr {
  display: none !important;
}


/* =============================================================================
   7) Drobečková navigace na mobilu
   -----------------------------------------------------------------------------
   JS část mobile-menu-adjust.js ZŮSTÁVÁ — přesouvá .breadcrumbs před <h1>
   a přidává třídu .mobile-breadcrumbs-visible, na kterou se váže tohle CSS.
   ============================================================================= */
@media (max-width: 768px) {
  .breadcrumbs.mobile-breadcrumbs-visible {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    /* Přes celou šířku okna bez ohledu na padding rodiče.
       Původní `-15px` / `100% + 30px` (převzaté z mobile-menu-adjust.js) počítalo
       s paddingem 15 px, ale rodič má na mobilu 10 px — drobečky pak byly 400 px
       široké v 390px okně a celá stránka se posouvala do strany.
       Změřeno 24. 8. 2026 při 390 px: scrollWidth 395 → 390. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-bottom: 20px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.2;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .breadcrumbs.mobile-breadcrumbs-visible::before { display: none !important; }
  .breadcrumbs.mobile-breadcrumbs-visible::-webkit-scrollbar { display: none; }

  .breadcrumbs.mobile-breadcrumbs-visible > span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .breadcrumbs.mobile-breadcrumbs-visible a,
  .breadcrumbs.mobile-breadcrumbs-visible span[itemprop="name"] {
    color: #003366;
    text-decoration: underline;
    font-weight: 500;
  }
  .breadcrumbs.mobile-breadcrumbs-visible a:hover { color: #000; }

  /* ikona domečku — vlastní, klikatelná, bez šedého pozadí šablony */
  .breadcrumbs.mobile-breadcrumbs-visible .navigation-home-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    margin-right: 4px;
    padding-left: 0 !important;
    background: transparent !important;
    min-width: 30px;
    min-height: 30px;
    border: none !important;
  }

  .breadcrumbs.mobile-breadcrumbs-visible .navigation-home-icon::before {
    content: "\e91f";              /* domeček z fontu Shoptetu */
    font-family: "shoptet";
    font-size: 19px;
    color: #003366;
    line-height: 1;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
  }

  .breadcrumbs.mobile-breadcrumbs-visible .navigation-home-icon svg,
  .breadcrumbs.mobile-breadcrumbs-visible .navigation-home-icon img { display: none !important; }

  /* oddělovač: lomítko schovat, nahradit šipkou */
  .breadcrumbs.mobile-breadcrumbs-visible .navigation-bullet {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    color: #999;
    text-decoration: none !important;
    font-size: 0 !important;
  }
  .breadcrumbs.mobile-breadcrumbs-visible .navigation-bullet::after {
    content: '\203A';
    font-size: 18px;
    line-height: 1;
  }

  .breadcrumbs.mobile-breadcrumbs-visible span.current,
  .breadcrumbs.mobile-breadcrumbs-visible span[data-testid="breadcrumbsLastLevel"] {
    font-weight: 700;
    color: #333;
    text-decoration: none;
  }
}


/* =============================================================================
   8) NOVÉ — oprava vodorovného posouvání na desktopu
   -----------------------------------------------------------------------------
   side-banners-v2.js se zapíná od 1025 px, ale obsah 1370 px + dva bannery
   po 150 px potřebují 1670 px. Na 1440 px (nejběžnější desktop) proto levý
   banner vyčnívá na left:-115px a pravý na right:1555px → stránka je o 115 px
   širší než okno a jde posouvat do strany. Změřeno 20. 8. 2026.

   Tohle to řeší bez zásahu do JS: pod 1670 px se bannery prostě nezobrazí.
   ============================================================================= */
@media (max-width: 1669px) {
  .custom-branding-container { display: none !important; }
}


/* =============================================================================
   9) NOVÉ — styly pro záchrannou síť vyhledávání (kaps-search.js)
   ============================================================================= */
.kaps-search-note,
.kaps-search-suggest {
  font-size: 14px;
  line-height: 1.5;
  color: #12202e;
  background: #e6f2fb;
  border: 1px solid rgba(3, 135, 209, .34);
  border-radius: 8px;
  padding: 10px 14px;
}

/* v panelu našeptávače sedí poznámka rovnou nahoře, horní mezeru nepotřebuje */
.kaps-search-note { margin: 0 0 8px; font-size: 13px; }

/* na /vyhledavani/ box zaujme místo hlášky „Produkty nebyly nalezeny" a tu si vezme
   dovnitř jako první řádek (viz kaps-search.js). Proto nahoře žádný margin.
   Změřeno 24. 8. 2026 při 1440 px: box 1035 × 68 px, vidět bez scrollování. */
.kaps-search-suggest { margin: 0 0 24px; }

/* Shoptetí <h4> přesunutá dovnitř boxu — srazit na velikost prvního řádku sdělení.
   Původně 16 px / weight 400 / margin-bottom 19 px. */
.kaps-search-suggest .search-products-heading {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: inherit !important;
}

.kaps-search-suggest a {
  color: #025f94;
  font-weight: 700;
  text-decoration: underline;
}

/* Výsledky vykreslené přímo na /vyhledavani/ (po Enteru).
   Shoptet stejné značkování styluje jen uvnitř dropdownu, takže v těle stránky
   si ho musíme nastylovat sami. */
.kaps-search-results .search-whisperer-products {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.kaps-search-results .search-whisperer-products li {
  border-top: 1px solid rgba(3, 135, 209, .22);
}
.kaps-search-results .search-whisperer-products li:first-child { border-top: 0; }

.kaps-search-results .search-whisperer-products a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  color: inherit;
  text-decoration: none;
}
.kaps-search-results .search-whisperer-products a:hover .p-name { text-decoration: underline; }

.kaps-search-results .search-whisperer-image {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 4px;
}
.kaps-search-results .search-whisperer-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.kaps-search-results .p-info { flex: 1 1 auto; min-width: 0; }
.kaps-search-results .p-name { display: block; font-weight: 600; line-height: 1.35; }

.kaps-search-results .price-final {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kaps-search-more { margin-top: 12px; font-size: 14px; }

/* Výsledky z vlastního indexu v našeptávači. Značkování kopíruje Shoptet, takže
   většina stylu platí sama; dobarvit stačí řádek s kategorií, který Shoptet nemá
   (na jeho místě má dostupnost — tu z indexu neznáme a netvrdíme ji). */
.search-whisperer-products .kaps-idx-cat {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: #6a7a89;
  margin-top: 2px;
}


/* =============================================================================
   10) Stránka „Kamenná prodejna" (/prodejna/)
   -----------------------------------------------------------------------------
   Obsah stránky je v prodejna-page.html, vkládá se do Shoptet stránky přes
   zdrojový kód. Vše je pod .kaps-prodejna, aby to nikde jinde nezasahovalo.
   Barvy podle šablony: konverzní #0089D0, doplňková zelená #0DB14B.
   ============================================================================= */

.kaps-prodejna { --kp-modra: #0089D0; --kp-zelena: #0DB14B; --kp-tmava: #12202e; --kp-seda: #6a7a89; }

.kaps-prodejna h2 { font-size: 28px; line-height: 1.2; margin: 0 0 14px; }
.kaps-prodejna h3 { font-size: 22px; line-height: 1.25; margin: 0 0 18px; }
.kaps-prodejna h4 { font-size: 17px; line-height: 1.3; margin: 0 0 6px; }
.kaps-prodejna section { margin-bottom: 44px; }

/* ---- úvodní blok ----
   Fotka jde přes celou šířku. Ve dvou sloupcích vedle textu byla při obsahovém
   sloupci 800 px vysoká jen 232 px proti 509 px textu — vznášela se uprostřed
   s 277 px prázdna nad a pod. Text se místo toho dělí na dva sloupce pod ní. */
.kaps-hero { display: block; }
.kaps-hero__text { margin-top: 26px; }

.kaps-hero__sloupce { display: grid; gap: 10px 34px; }
@media (min-width: 760px) {
  .kaps-hero__sloupce { grid-template-columns: 1fr 1fr; align-items: start; }
}

.kaps-perex { font-size: 17px; line-height: 1.6; }

.kaps-fakta { list-style: none; margin: 18px 0; padding: 0; }
.kaps-fakta li {
  padding: 7px 0 7px 26px;
  border-bottom: 1px solid #e9eef2;
  position: relative;
}
.kaps-fakta li:last-child { border-bottom: 0; }
.kaps-fakta li::before {
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--kp-zelena);
}

.kaps-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.kaps-btn {
  display: inline-block; padding: 11px 22px; border-radius: 4px;
  background: var(--kp-modra); color: #fff !important;
  font-weight: 700; text-decoration: none !important; line-height: 1.2;
}
.kaps-btn:hover { background: var(--kp-zelena); }
.kaps-btn--ghost { background: transparent; color: var(--kp-modra) !important; box-shadow: inset 0 0 0 2px var(--kp-modra); }
.kaps-btn--ghost:hover { background: var(--kp-modra); color: #fff !important; box-shadow: none; }

/* ---- fotky ---- */
.kaps-hero__foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px;
}

.kaps-foto { margin: 0; }
.kaps-foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 8px;
}

/* klikací fotka — lupa v rohu, ať je vidět, že jde zvětšit.
   Odkaz funguje i bez JS: bez colorboxu se obrázek prostě otevře. */
.kaps-prodejna a[data-kaps-lightbox] {
  display: block; position: relative; overflow: hidden;
  border-radius: 8px; cursor: zoom-in;
  text-decoration: none !important;
}
.kaps-prodejna a[data-kaps-lightbox] img { transition: transform .35s ease; }
.kaps-prodejna a[data-kaps-lightbox]::after {
  content: ""; position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(18, 32, 46, .62) center / 17px 17px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.6 15.6 21 21M10.5 7.6v5.8M7.6 10.5h5.8'/%3E%3C/svg%3E");
  opacity: .9; transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.kaps-prodejna a[data-kaps-lightbox]:hover img { transform: scale(1.035); }
.kaps-prodejna a[data-kaps-lightbox]:hover::after { opacity: 1; transform: scale(1.08); }
.kaps-prodejna a[data-kaps-lightbox]:focus-visible { outline: 3px solid var(--kp-modra); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kaps-prodejna a[data-kaps-lightbox] img,
  .kaps-prodejna a[data-kaps-lightbox]::after { transition: none; }
  .kaps-prodejna a[data-kaps-lightbox]:hover img { transform: none; }
}

/* popisek pod fotkou v lightboxu — colorbox ho bere z title */
#cboxTitle { font-size: 14px !important; }
.kaps-foto figcaption {
  margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--kp-seda);
}

/* ---- odznak „otevřeno / zavřeno" ---- */
.kaps-stav {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 4px; padding: 7px 14px 7px 12px;
  border-radius: 999px; font-size: 14px; font-weight: 700;
}
.kaps-stav::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.kaps-stav--otevreno { background: #e7f6ed; color: #0a7a3a; }
.kaps-stav--otevreno::before { background: var(--kp-zelena); }
.kaps-stav--zavreno  { background: #f2f4f6; color: #5a6772; }
.kaps-stav--zavreno::before  { background: #97a3ae; }

/* ---- proč se stavit ---- */
.kaps-duvody__mrizka { display: grid; gap: 20px; }
@media (min-width: 700px)  { .kaps-duvody__mrizka { grid-template-columns: 1fr 1fr; } }
.kaps-duvod {
  padding: 18px 20px; border-radius: 8px;
  background: #f7fafc; border-left: 3px solid var(--kp-modra);
}
.kaps-duvod p { margin: 0; }

/* ---- galerie ---- */
.kaps-galerie__mrizka { display: grid; gap: 18px; }
@media (min-width: 700px) { .kaps-galerie__mrizka { grid-template-columns: repeat(3, 1fr); } }

/* ---- sortiment na prodejně ---- */
.kaps-sortiment__seznam {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 10px;
}
@media (min-width: 620px)  { .kaps-sortiment__seznam { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .kaps-sortiment__seznam { grid-template-columns: repeat(4, 1fr); } }
.kaps-sortiment__seznam a {
  display: block; padding: 11px 14px;
  background: #f4f7f9; border-radius: 6px;
  color: var(--kp-tmava) !important; text-decoration: none !important;
  font-size: 14px; line-height: 1.3;
}
.kaps-sortiment__seznam a:hover { background: var(--kp-modra); color: #fff !important; }

/* ---- otevírací doba a kontakt ---- */
.kaps-info { display: grid; gap: 28px; }
@media (min-width: 700px) { .kaps-info { grid-template-columns: 1fr 1fr; } }

.kaps-doba { width: 100%; border-collapse: collapse; }
.kaps-doba th, .kaps-doba td { padding: 9px 4px; border-bottom: 1px solid #e9eef2; text-align: left; }
.kaps-doba td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kaps-doba th { font-weight: 400; color: var(--kp-tmava); }

/* dnešek — dopisuje kaps-localbusiness.js, ne server */
.kaps-doba tr.kaps-doba--dnes th,
.kaps-doba tr.kaps-doba--dnes td { background: #eef7fd; font-weight: 700; color: var(--kp-tmava); }
.kaps-doba tr.kaps-doba--dnes th::after { content: " — dnes"; color: var(--kp-modra); font-weight: 700; }
.kaps-doba--zavreno th, .kaps-doba--zavreno td { color: var(--kp-seda); font-weight: 400; }

.kaps-fakta--male { margin: 14px 0; font-size: 14px; }
.kaps-fakta--male li { padding-top: 5px; padding-bottom: 5px; }

.kaps-adresa { font-size: 17px; line-height: 1.6; }
.kaps-ico { font-size: 13px; color: var(--kp-seda); }


/* =============================================================================
   11) Navigace — stránky v bočním sloupci, vstupní body v horní liště
   -----------------------------------------------------------------------------
   Blok stránek vkládá kaps-navigace.js — Shoptet do bočního sloupce sám dává
   jen kategorie, stránky v něm nejsou vůbec.

   Na 1366 px se do vodorovné lišty vešlo 7 z 19 položek; devět kategorií bylo
   schovaných pod ☰, mezi nimi „Papíry, tonery a etikety" a „Kalendáře a diáře".
   NN/g: schování navigace snižuje objevitelnost skoro na polovinu a na desktopu
   škodí víc než na mobilu. Baymard: strop je ~10 kategorií první úrovně.
   Mironet i Rohlík mají v liště nula kategorií, Alza lištu nemá vůbec.
   ============================================================================= */

/* ---- stránky v bočním sloupci ---- */
.kaps-box-stranky {
  margin-top: -8px;
  padding-top: 14px;
  border-top: 1px solid #e3e9ee;
}

.kaps-str { list-style: none; margin: 0; padding: 0; }

.kaps-str a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  color: #12202e !important;
  text-decoration: none !important;
  font-size: 14px; line-height: 1.35;
  border-radius: 5px;
}
.kaps-str a:hover,
.kaps-str a:focus-visible { background: #eef7fd; color: #0089D0 !important; }

.kaps-str__ikona { flex: 0 0 20px; color: #0089D0; }
.kaps-str a:hover .kaps-str__ikona { color: #0089D0; }

/* zvýraznit stránku, na které zrovna jsem */
body.type-page .kaps-str a[aria-current="page"] { background: #eef7fd; font-weight: 700; }

/* ---- vodorovná lišta: vstupní body místo useknutých kategorií ----
   Běžné kategorie se schovají JEN tam, kde je vedle boční sloupec, který
   je všechny ukazuje. Třídu `kaps-ma-bocni-menu` dává tělu kaps-navigace.js
   podle skutečně vykresleného sloupce, ne podle @media — na mobilu sloupec
   neexistuje a hamburger otevírá právě tuhle lištu, takže tam musí zůstat
   kompletní. V košíku sloupec taky není a lišta zůstává celá.

   Co v liště zůstane, se řídí seznamem VYBRANE v kaps-navigace.js. */
body.kaps-ma-bocni-menu .navigation-in > ul > li.kaps-menu-bezna {
  display: none !important;
}

/* ---- tenký horní pruh — zeštíhlit a sjednotit ----
   Telefon a e-mail zůstávají: u velkoobchodu je to reálný konverzní prvek,
   firmy a školy často radši zavolají. Jen ať to nekřičí. */
.top-navigation-bar { font-size: 12.5px; }
.top-navigation-bar .top-navigation-contacts strong { font-weight: 600; }
.top-navigation-bar-menu a,
.top-navigation-contacts a { letter-spacing: 0; }


/* =============================================================================
   12) Hlavička — sjednocené ikony a účet
   -----------------------------------------------------------------------------
   Naměřeno 26. 8. 2026: ikony pocházely ze tří míst a podle toho vypadaly.

     Hledat · Menu · Košík   font `shoptet`, 30 px, #0089D0   (šablona)
     Oblíbené (srdce)        font `oblibene`, 22 px, #E91B7D  (doplněk dkLab)
     Přihlášení              vůbec ne ikona, jen text v horním pruhu

   Druhá iterace 26. 8.: proti alza.cz to působilo humpolácky — ikony moc
   velké a slepené k sobě. Zmenšeno na 21–22 px, mezera 14 px a mezi skupiny
   vloženy oddělovače (účet │ oblíbené │ košík), jak to má Alza.

   Srdce je z cizího doplňku — vyměnit ho nejde, ale barvu, velikost i svislé
   zarovnání ano (mělo `top: 3px`, proto sedělo o 3 px níž než košík).

   Ikonu účtu šablona MÁ (glyf U+E922, otevírá přihlašovací okno), jen ji
   nikde nezobrazuje — leží skrytá v `.responsive-tools`. Přesouvá ji
   kaps-navigace.js, tady se jen odkryje a nastyluje.

   ⚠️ VŠE JE POD `body.kaps-desktop-hlavicka`. Tu třídu dává skript jen tehdy,
      když je mobilní lišta `.responsive-tools` schovaná — tedy když šablona
      sama vykresluje desktopovou hlavičku. Mobilní hlavička má jiné
      uspořádání a tyhle styly by se v ní rozsypaly (ověřeno na 375 px).
   ============================================================================= */

body.kaps-desktop-hlavicka .navigation-buttons {
  display: flex;
  align-items: center;
  gap: 14px;                 /* Alza má ikony drobné a vzdušné, ne slepené */
}
body.kaps-desktop-hlavicka .navigation-buttons > div { display: flex; align-items: center; }

/* ---- oddělovače: účet │ oblíbené │ košík ----
   Původně to byly vložené <span>y, jenže Shoptet si po načtení překreslí
   košík a uzel před ním tím zmizel — z dvou oddělovačů zbyl jeden.
   Jako CSS okraj na samotných prvcích to překreslení přežije. */
body.kaps-desktop-hlavicka .navigation-buttons > .kaps-objednavky,
body.kaps-desktop-hlavicka .navigation-buttons > .cart-count {
  border-left: 1px solid #d8e0e6;
  padding-left: 14px;
}
/* kdyby ikona objednávek chyběla, ať oddělovač nese aspoň srdce */
body.kaps-desktop-hlavicka .navigation-buttons > .kaps-objednavky + div { border-left: 0; padding-left: 0; }
body.kaps-desktop-hlavicka .navigation-buttons > a.kaps-ucet + div {
  border-left: 1px solid #d8e0e6;
  padding-left: 14px;
}
/* košík je `.btn` a šablona mu ruší rámeček — bez !important se k němu
   pravidlo nedostane (ověřeno: `border-left-style: none`) */
body.kaps-desktop-hlavicka .navigation-buttons > .cart-count {
  border-left: 1px solid #d8e0e6 !important;
  padding-left: 14px !important;
}

/* ---- Oblíbené (doplněk dkLab) ---- */
body.kaps-desktop-hlavicka .dkLabFavHeaderIconBtn {
  display: flex !important;
  align-items: center;
  height: 22px !important;
  top: 0 !important;
  color: #0089D0 !important;
}
body.kaps-desktop-hlavicka .dkLabFavHeaderIconBtn::before {
  font-size: 21px !important;      /* jiný font než šablona, 21 px sedí opticky na 22 px */
  line-height: 1 !important;
  color: #0089D0 !important;
}

/* ---- Účet ---- */
body.kaps-desktop-hlavicka a.kaps-ucet {
  display: flex !important;
  align-items: center;
  gap: 7px;
  width: auto !important;
  height: 22px;
  color: #0089D0 !important;
  text-decoration: none !important;
}
body.kaps-desktop-hlavicka a.kaps-ucet::before { font-size: 22px !important; line-height: 1 !important; }
body.kaps-desktop-hlavicka a.kaps-ucet:hover { color: #0DB14B !important; }
body.kaps-desktop-hlavicka .kaps-ucet__text { font-size: 14px; white-space: nowrap; }

/* ---- Objednávky ----
   Dvě věci, na které si šablona počkala:
   1) Odkazům v téhle skupině dává ::before s glyfem U+E914 ve fontu `shoptet`
      — což je ikona „Menu". Vedle schránky pak svítil burger navíc.
   2) SVG uvnitř zmáčkla na 3 px šířky, takže z ikony byly tři pruhy.
   Obojí se musí vynutit. */
body.kaps-desktop-hlavicka a.kaps-objednavky {
  display: flex;
  align-items: center;
  height: 22px;
  color: #0089D0;
  text-decoration: none !important;
}
body.kaps-desktop-hlavicka a.kaps-objednavky::before {
  content: none !important;
  display: none !important;
}
body.kaps-desktop-hlavicka a.kaps-objednavky svg {
  /* 26 px, ne 21 — kresba vyplňuje jen ~65 % viewBoxu, takže při stejném
     rozměru jako srdce vypadala výrazně menší. Sladěno okem proti srdci. */
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px;
  fill: none !important;
  stroke: currentColor !important;
}
body.kaps-desktop-hlavicka a.kaps-objednavky:hover { color: #0DB14B; }

/* ---- Košík ---- */
body.kaps-desktop-hlavicka .cart-count { height: 22px !important; font-size: 14px !important; }
body.kaps-desktop-hlavicka .cart-count::before { font-size: 22px !important; line-height: 1 !important; }

/* přihlášení je teď ikonou ve skupině, v tenkém pruhu by bylo podruhé */
body.kaps-desktop-hlavicka .top-navigation-tools .top-nav-button { display: none !important; }


/* =============================================================================
   13) Proti probliknutí staré hlavičky (FOUC)
   -----------------------------------------------------------------------------
   Všechna naše pravidla visí na třídě, kterou přidává až kaps-navigace.js.
   Do té doby prohlížeč vykresluje Shoptetí původní stav — na zlomek vteřiny
   probliklo staré „Přihlášení" v tenkém pruhu, velké ikony a plná lišta
   kategorií.

   Třídu `kaps-pripravuje` dává <html> maličký skript v záhlaví šablony, tedy
   PŘED prvním vykreslením. Skript ji po přeskládání zase sundá.

   Schováváme přes `visibility`, ne `display` — místo zůstane zabrané, takže
   se stránka po odkrytí nikam neposune.

   ⚠️ Skript v šabloně má i pojistku: třídu sundá po 2 s sám, i kdyby
      kaps-navigace.js vůbec nedoběhl. Bez ní by hlavička zůstala neviditelná.
   ============================================================================= */
html.kaps-pripravuje .navigation-buttons,
html.kaps-pripravuje .responsive-tools,
html.kaps-pripravuje .navigation-in > ul,
html.kaps-pripravuje .top-navigation-tools .top-nav-button {
  visibility: hidden !important;
}

/* ⚠️ `.responsive-tools` (lupa, hamburger) sem přibylo 26. 8. Bez toho lupa
   probliknutím skočila: vykreslila se na Shoptetí výchozí pozici — zhruba
   tam, kde teď sedí srdce — a teprve pak popojela doprava na své místo.

   Nejde to obejít dřívějším během skriptu. Servírované HTML má
   `<body class="desktop">` a na `mobile` ho přepíná až JavaScript Shoptetu,
   takže při prvním vykreslení nesedí ani jeho vlastní hlavička. */

/* =============================================================================
   14) Mobilní hlavička
   -----------------------------------------------------------------------------
   Proč: zákazníci hlásili, že na mobilu nemohli najít přihlášení. Shoptet ho
   v hlavičce má, ale dává mu `display:none` — jediným vstupem tak zbyla
   poslední položka burger menu. Odkaz jen odkrýváme, nic nového nevytváříme,
   takže funguje i panel, který na něm visí (přes celou obrazovku, ověřeno).

   Řada ikon v mobilní hlavičce NENÍ tok. Všechno je absolutně umístěné vůči
   `#header`, proto se pozicuje přes `right:` a ne pořadím v DOM.

     zprava:  10 burger · 50 košík · 115 lupa · 148 srdce · 190 účet
              · 230 objednávky
   Volno vlevo od 230 je až k logu (logo končí na 40 px), místa je dost.

   ⚠️ `body.kaps-mobil-hlavicka` nasazuje kaps-navigace.js podle toho, jestli
      šablona `.responsive-tools` skutečně vykresluje. NEPŘEPISOVAT na @media —
      na desktopu je ten samý odkaz přesunutý do `.navigation-buttons` a
      breakpoint bychom hádali. Proto se tu na rodiče neodkazujeme.

   ⚠️ Šedý kruh za hamburgerem je `background` jeho vlastního `::before`,
      ne pozadí odkazu. Hledal jsem ho na špatném prvku.
   ============================================================================= */

/* přihlášení: odkrýt a posadit do řady */

/* popisek „Přihlásit" patří jen do desktopové hlavičky */
body.kaps-mobil-hlavicka a[data-target="login"] .kaps-ucet__text {
  display: none !important;
}
/* Náhradní ikona pro přihlášeného. Kresbu jí dodá kaps-navigace.js
   ze stejné sady jako ostatním — nic z fontu šablony. */

/* objednávky — vkládá je kaps-navigace.js */

/* šablona věší na odkazy v hlavičce glyf hamburgeru — přebít, jinak
   se místo objednávek zobrazí ☰ (stejná past jako na desktopu) */
body.kaps-mobil-hlavicka a.kaps-objednavky::before {
  content: none !important;
  display: none !important;
}
/* Velikost řeší společné pravidlo pro `.kaps-ikona` (24 px). Dřív tu bylo
   26 px, protože stará kresba vyplňovala plátno jen ze dvou třetin —
   po překreslení do společné sady to dělalo objednávky větší než zbytek. */

/* -----------------------------------------------------------------------------
   Jedna sada, jedna tloušťka tahu
   -----------------------------------------------------------------------------
   Glyfy fontů se tu už nepoužívají. Byly ze tří zdrojů (font šablony, font
   doplňku oblíbených, naše SVG), takže měly různou tloušťku tahu a různě
   posazenou kresbu v řádku — řada působila jako zig zag i po srovnání boxů.
   Tloušťku tahu fontu změnit nejde, proto celou sadu kreslí kaps-navigace.js
   jako SVG na společném plátně 24×24 s tahem 1,6.

   ⚠️ `content: none` se dává jen těmto konkrétním prvkům. Plošné vypnutí
      `::before` v hlavičce by sundalo i odznaky počtu u košíku a oblíbených.
   --------------------------------------------------------------------------- */
body.kaps-mobil-hlavicka a[data-target="login"]::before,
body.kaps-mobil-hlavicka a.kaps-ucet-nahrada::before,
body.kaps-mobil-hlavicka .dkLabFavHeaderIconBtn::before,
body.kaps-mobil-hlavicka .responsive-tools a[data-target="search"]::before,
body.kaps-mobil-hlavicka .responsive-tools a[data-target="navigation"]::before,
body.kaps-mobil-hlavicka .navigation-buttons .cart-count::before {
  content: none !important;
  display: none !important;
}
body.kaps-mobil-hlavicka svg.kaps-ikona {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
}
body.kaps-mobil-hlavicka .navigation-buttons > a,
body.kaps-mobil-hlavicka .navigation-buttons > div,
body.kaps-mobil-hlavicka .responsive-tools > a,
body.kaps-mobil-hlavicka .dkLabFavHeaderIconBtn {
  color: #0089D0 !important;
}

/* ⚠️ Košíku se šířka odvozovala od obsahu. Glyf měl 30 px, naše SVG má 24,
   takže se dotykový cíl zúžil z 52 na 25 px — méně než polovina ostatních.
   Šířka se proto předepisuje napevno, stejně jako u zbytku řady.
   (Vypadalo to jako překrývání jiným prvkem; nebylo. Rozhodlo až změření
   samotného boxu.) */

/* Přihlášení zvednuté na první místo v burger menu.
   Třída sedí na CELÉM `ul.navigationActions` — Shoptet drží přihlášení
   v samostatném seznamu, ne mezi kategoriemi. */
body.kaps-mobil-hlavicka .navigation-in > ul.kaps-menu-prihlaseni > li > a {
  font-weight: 600;
}
body.kaps-mobil-hlavicka .navigation-in > ul.kaps-menu-prihlaseni {
  border-bottom: 1px solid #d8e0e6;
}

/* -----------------------------------------------------------------------------
   Jedna osa a oddělovače
   -----------------------------------------------------------------------------
   Ikony šablony měly každá jinou výšku boxu (srdce 30 px na y=11, košík 24 px
   na y=11, zbytek 40 px na y=5), takže řada působila jako zig zag. Srovnáváme
   všechny na stejný box 40 px se středem na 25 px.

   ⚠️ Srdce sedí v bezejmenném `div`u, a ten `div` je ten POZICOVANÝ prvek.
      Když se absolutní pozice dá srdci, počítá se od toho `div`u a srdce
      odletí mimo hlavičku (naměřeno x=39, y=-35). Pozicuje se tedy `div`
      a srdce se uvnitř nechá v toku. Odznak počtu jde se srdcem.
   --------------------------------------------------------------------------- */

body.kaps-mobil-hlavicka .navigation-buttons .dkLabFavHeaderIconBtn {
  position: relative !important;
  top: 0 !important;
}




/* =============================================================================
   15) Mřížka mobilní hlavičky
   -----------------------------------------------------------------------------
   Do téhle verze si každou ikonu pozicovala šablona po svém a my jen dorovnávali
   výšku. Důsledek: rozestupy nebyly stejné (srdce a lupa se dokonce o 7 px
   PŘEKRÝVALY, takže lupa ukusovala z terče srdce) a mezera k oddělovači byla
   jiná než mezi ikonami.

   Řada se proto celá pozicuje tady, na pravidelné mřížce odsazené zprava.
   Box je vždy 40×40, mezera mezi ikonami 2 px, mezera kolem oddělovače 16 px.

     zprava:  8 ☰ · 50 košík ─┤ 106 lupa · 148 srdce · 190 objednávky ─┤ 246 účet

   ⚠️ DVA různé počátky. `.navigation-buttons` visí v `#header`, jehož vrchol je
      na 50 px → `top: -45px`. `.responsive-tools` visí v `.top-navigation-bar`
      s vrcholem na 0 → `top: 5px`. Obojí dá y = 5. Nesjednocovat naslepo.
   ============================================================================= */
body.kaps-mobil-hlavicka a[data-target="login"],
body.kaps-mobil-hlavicka a.kaps-ucet-nahrada,
body.kaps-mobil-hlavicka a.kaps-objednavky,
body.kaps-mobil-hlavicka .navigation-buttons > div,
body.kaps-mobil-hlavicka .navigation-buttons .cart-count,
body.kaps-mobil-hlavicka .responsive-tools a[data-target="search"],
body.kaps-mobil-hlavicka .responsive-tools a[data-target="navigation"] {
  position: absolute !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0089D0 !important;
  z-index: 3;
  /* ⚠️ Šablona má na těch odkazech `transition: all .3s`. Naše přepozicování
     se pak NEAPLIKUJE, ale ODJEDE — lupa se po odkrytí ještě třetinu vteřiny
     plazila zleva doprava (naměřeno 17 mezipoloh, `left` po desetinách).
     Přechod tedy necháváme jen pro barvu. */
  transition: color .15s, transform .3s !important;
}

/* -----------------------------------------------------------------------------
   Zajet spolu s hlavičkou při scrollu dolů
   -----------------------------------------------------------------------------
   Shoptet skrývá mobilní hlavičku tak, že pod třídou `scrolled-down` na `<html>`
   dá SVÝM ikonám `translateY(-80px)`. O našich neví, takže zůstávaly viset nad
   obsahem stránky — mizel jen košík.

   ⚠️ Nestačí spoléhat na posun lišty. `.top-navigation-bar` se posouvá jen
      o vlastní výšku a ta je 10 px, protože naše absolutní pozicování vyndalo
      lupu a hamburger z toku a lišta se smrskla. Ikony jsou 40 px vysoké,
      takže z posunu o 11 px trčí.

   ⚠️ Proto se v přechodu výše povoluje `transform` — jinak by zajížděly skokem.
      `left`/`right` v přechodu zůstat NESMÍ, viz komentář tamtéž.
   --------------------------------------------------------------------------- */
html.scrolled-down body.kaps-mobil-hlavicka a[data-target="login"],
html.scrolled-down body.kaps-mobil-hlavicka a.kaps-ucet-nahrada,
html.scrolled-down body.kaps-mobil-hlavicka a.kaps-objednavky,
html.scrolled-down body.kaps-mobil-hlavicka .navigation-buttons > div,
html.scrolled-down body.kaps-mobil-hlavicka .responsive-tools a[data-target="search"],
html.scrolled-down body.kaps-mobil-hlavicka .responsive-tools a[data-target="navigation"] {
  transform: translateY(-80px) !important;
}

/* ⚠️ `!important` je tu kvůli srdci — doplněk dkLab mu dává vlastní −60 px
   a bez toho zajíždělo o 20 px míň než zbytek. */

/* ⚠️ Lupa a hamburger sedí v `.top-navigation-bar`, kterou Shoptet sám
   posouvá o −11 px. Bez kompenzace by ujely o 91 px místo 80 a řada by se
   při zajíždění roztrhla na dvě skupiny. Naměřeno: ostatní y=−75, tyhle
   y=−86. */
html.scrolled-down body.kaps-mobil-hlavicka .responsive-tools a[data-target="search"],
html.scrolled-down body.kaps-mobil-hlavicka .responsive-tools a[data-target="navigation"] {
  transform: translateY(-69px) !important;
}

/* počátek v `#header` (vrchol na 50 px) */
body.kaps-mobil-hlavicka a[data-target="login"],
body.kaps-mobil-hlavicka a.kaps-ucet-nahrada,
body.kaps-mobil-hlavicka a.kaps-objednavky,
body.kaps-mobil-hlavicka .navigation-buttons > div,
body.kaps-mobil-hlavicka .navigation-buttons .cart-count {
  top: -45px !important;
}
/* počátek v `.top-navigation-bar` (vrchol na 0) */
body.kaps-mobil-hlavicka .responsive-tools a[data-target="search"],
body.kaps-mobil-hlavicka .responsive-tools a[data-target="navigation"] {
  top: 5px !important;
}

body.kaps-mobil-hlavicka .responsive-tools a[data-target="navigation"] { right: 8px !important; }
body.kaps-mobil-hlavicka .navigation-buttons .cart-count               { right: 50px !important; }
body.kaps-mobil-hlavicka .responsive-tools a[data-target="search"]     { right: 106px !important; }
body.kaps-mobil-hlavicka .navigation-buttons > div                     { right: 148px !important; }
body.kaps-mobil-hlavicka a.kaps-objednavky                             { right: 190px !important; }
body.kaps-mobil-hlavicka a[data-target="login"],
body.kaps-mobil-hlavicka a.kaps-ucet-nahrada                           { right: 246px !important; }

/* Oddělovače uprostřed šestnáctipixelové mezery, tedy 8 px od obou sousedů.
   Kreslí je `::before`, které stejně vypínáme kvůli glyfu fontu — vkládaný
   `<span>` by po překreslení košíku zmizel. */
body.kaps-mobil-hlavicka a.kaps-objednavky::before,
body.kaps-mobil-hlavicka .navigation-buttons .cart-count::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -8px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: #d8e0e6;
  font-size: 0 !important;
}

/* Kresba nesmí brát klik. Vnitřek ikon je `fill: none`, takže tapnutí musí
   spadnout na odkaz pod ní — takhle je to jednoznačné na každém prohlížeči. */
body.kaps-mobil-hlavicka svg.kaps-ikona {
  pointer-events: none !important;
}