/* ============================================================
   mobil.css — tabule-nabytek.cz / TANA school (Shoptet Classic 11)
   ------------------------------------------------------------
   MOBILNÍ KOREKTURY. Vše v @media (max-width: 767px) → platí jen
   na telefonech. DESKTOP je schválený klientem → NEŠAHÁME.
   - Ideálně načítat v hlavičce AŽ ZA customi.css (aby přebíjelo);
     kde je potřeba, cílíme vyšší specificitou, ať to funguje i tak.
   - Vypnutí/zapnutí = zakomentovat/odkomentovat <link> v hlavičce.
   ============================================================ */
@media (max-width: 767px) {

  /* ==========================================================
     POŘADÍ SEKCÍ — ROOT-CAUSE FIX (carousely nahoře, nadpisy dole)
     ----------------------------------------------------------
     #content (customi.css) je flex sloupec a řadí děti přes `order`.
     Produkty mají dostat order:4/8, jenže pravidla cílí na MRTVÁ ID
     (#products-1 / #products-11), reálné bloky jsou #products-18/22 →
     dostanou order:0 → VYSKOČÍ nad banner i nad své nadpisy.
     Přirozené DOM pořadí je přitom správné, takže flex-řazení tady
     na mobilu vypneme. Desktop nešaháme.
     ========================================================== */
  body.type-index #content {display: block !important;}

  /* ==========================================================
     HEADER (mobil) — vzdušnější
     ----------------------------------------------------------
     Shoptet „ums_mobile_header_v1": #header je fixed (top:50px) a logo
     .site-name je absolute vytažené nahoru (top:-50px) do 50px pásu.
     Logo img má ~50px box → vyplní celý pás → dotýká se horní hrany
     i spodní (obsah/banner). Fix: zmenšíme logo → vycentruje se v 50px
     linku = mezera nahoře i dole; + malá mezera mezi header a obsah.
     (Fixed/absolute pozicování NESAHÁME → scroll chování zůstává.)
     ========================================================== */
  #header .site-name img,
  #header .site-name a img {
    max-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: auto !important;
  }
  /* Hamburger (kruh) — z šedé na brand zelenou.
     Shoptet ho barví přes `--_color-header-mobile-nav-bg` na ::before.
     Cílíme oba možné kontejnery (responsive-tools i navigation-buttons). */
  .responsive-tools > a[data-target="navigation"]::before,
  .responsive-tools > a[data-target="navigation"]:hover::before,
  .navigation-buttons > a[data-target="navigation"]::before,
  .navigation-buttons > a[data-target="navigation"]:hover::before {
    background-color: #39554c !important;
    color: #fff !important;
  }

  /* mezera mezi (fixed) headerem a obsahem — banner není nalepený */
  body.type-index .overall-wrapper {padding-top: 60px !important;}

  /* ==========================================================
     MOBILNÍ MENU (drawer) — kompaktnější + čistší
     ----------------------------------------------------------
     Shoptet dává textu položky `padding:1.25rem 0` (20px nahoře i dole)
     → řádky přes 56px = extrémně vysoké. Zmenšíme na 12px (řádky ~40px)
     + moderní styl: jemné oddělovače, tmavší brand text, šipka vpravo,
     decentní tap stav. (Mobilní menu je Shoptet default, vertical-menu.css
     je jen ≥992 → sem nezasahuje.)
     ========================================================== */
  /* nižší řádky (svislý padding textu 20px → 12px) */
  #navigation .navigation-in > ul > li > a > b,
  #navigation .navigation-in > ul > li > a > span {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* položka: čistý padding, brand text, šipka odsunutá doprava */
  #navigation .navigation-in > ul > li > a {
    justify-content: space-between !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    transition: background-color .15s ease !important;
  }
  /* VŠECHEN text v menu ČERNÝ ve všech stavech (Shoptet mobilní menu je
     "inverted" = bílý text → otevřená kategorie mizela na světlém pozadí).
     Cílíme přímo na <b> (vysoká specificita) → přebije i otevřený stav.
     Hierarchii řešíme JEN řezem, ne barvou. */
  #navigation .navigation-in > ul > li > a,
  #navigation .navigation-in > ul > li > a > b,
  #navigation .navigation-in > ul > li > a > span:not(.submenu-arrow) {
    color: #1f1f1f !important;
  }
  #navigation .navigation-in > ul > li > a > b {font-weight: 600 !important;}
  /* podkategorie (menu-level-2): taky černé, ale NORMÁLNÍ řez (hierarchie) */
  #navigation .navigation-in ul.menu-level-2 a,
  #navigation .navigation-in ul.menu-level-2 a b,
  #navigation .navigation-in ul.menu-level-2 a span {
    color: #1f1f1f !important;
    font-weight: 400 !important;
  }
  /* jemné oddělovače, pryč s bočními bordery */
  #navigation .navigation-in > ul > li {
    border-top: 1px solid #ededed !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  #navigation .navigation-in > ul > li:first-child {border-top: 0 !important;}
  /* tap/hover: decentní světle zelenošedé pozadí + brand text
     (přebíjí Shoptetí divný posun paddingu na hoveru) */
  #navigation .navigation-in > ul > li > a:hover,
  #navigation .navigation-in > ul > li > a:active {
    background-color: #f4f7f6 !important;
    color: #1f1f1f !important;   /* text zůstává černý, feedback dělá pozadí */
    margin: 0 !important;
    padding: 0 14px !important;
  }
  /* šipka podkategorie — decentní šedá, kompaktní (Shoptet měl 2em) */
  #navigation .submenu-arrow {
    padding-left: 8px !important;
    padding-right: 2px !important;
    color: #9aa5a1 !important;
    font-size: 11px !important;
  }

  /* ==========================================================
     DETAIL PRODUKTU
     ----------------------------------------------------------
     Padding 14px DOKOLA (vyvážené) — jen mobil, jen detail produktu.
     POZOR (load order): customi.css má `body.type-product .p-detail-inner
     {padding:14px 28px 28px !important}` (desktop) a načítá se AŽ ZA
     mobil.css → se stejným selektorem by customi tenhle mobilní padding
     PŘEBILO (v devtools byl přeškrtnutý). Proto html-prefix = vyšší
     specificita → vyhraje bez ohledu na pořadí <link>ů.
     ========================================================== */
  html body.type-product .p-detail-inner {padding: 14px !important;}

  /* Vyvážení svislých rozestupů (změřeno): galerie→cena byla jen 10px
     (cena nalepená na galerii), zbytek detailu ~19px. Dorovnáme, ať má
     cena vyvážený prostor nahoře i dole. */
  html body.type-product .p-info-wrapper {margin-top: 12px !important;}
  /* Dlouhý popis: Shoptet mu dává `padding: 0 20px` → text byl zaražený
     o 20px jinam než cena/konfigurátor. Srovnáme na stejnou osu (14px). */
  html body.type-product .description-inner {padding-left: 0 !important; padding-right: 0 !important;}

  body.type-product .p-detail .add-to-cart .add-to-cart-button {
    flex: 1 1 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ==========================================================
     HOMEPAGE — HLAVNÍ BANNER (menší ovládací šipky)
     ========================================================== */
  body.type-index .banners-row .carousel-control {width: 56px !important;}
  body.type-index .banners-row .carousel-control::before {
    width: 34px !important; height: 34px !important; line-height: 34px !important;
    font-size: 15px !important; background-size: 34px 34px !important;
    /* base má margin-top:-25px (počítané pro 50px kruh) → u 34px kruhu
       byl posunutý o 8px nahoru; -17px = přesné vycentrování */
    margin-top: -17px !important;
  }
  /* Šipky víc ke krajům, ať nelezou do textu banneru (base: left/right 20px) */
  body.type-index .banners-row .carousel-control.left::before {left: 6px !important;}
  body.type-index .banners-row .carousel-control.right::before {right: 6px !important;}

  /* ==========================================================
     HOMEPAGE — DLAŽDICE KATEGORIÍ (mobil = à la Alza, 2 ve řádku)
     ----------------------------------------------------------
     Malé dlaždice: ikona vlevo + název, 2 ve řádku. Popis, PILULKY
     i tlačítko jen SKRYTÉ přes display:none → text zůstává v HTML
     (SEO netknuté; podkategorie jsou navíc linkované z menu). Celá
     dlaždice klikatelná na kategorii (stretched-link h2 a::after).
     ========================================================== */
  /* 2 ve řádku + VŠECHNY DLAŽDICE STEJNĚ VYSOKÉ.
     Kontejner z flexu na grid: `grid-auto-rows: 1fr` srovná všechny řádky
     na nejvyšší (samo se přizpůsobí, žádné magické px). `:has()` cílí jen
     kontejner s kategoriemi, ne ten s USP ikonami. */
  body.type-index .kn_container:has(.kn_child2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
  }
  body.type-index .kn_child2 {
    position: relative !important;
    width: auto !important;          /* šířku řídí grid */
    max-width: none !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    text-align: left !important;
    gap: 11px !important;
    padding: 12px !important;
    margin: 0 !important;            /* mezery řeší grid gap */
    /* ZVÝRAZNĚNÍ: jemný zelený podmaz (brand) — stejný princip jako
       dlaždice podkategorií, ale zeleně místo oranžově (odlišení) */
    background: #eef5f1 !important;
    border: 1px solid #d5e6de !important;
  }
  /* hover: jen tmavší odstín, BEZ zdvihu a stínu (jako u podkategorií) */
  body.type-index .kn_child2:hover {
    background: #e3efea !important;
    border-color: #c6dcd2 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* ikona malá vlevo (zatím ze stávajících obrázků; jde vyměnit v adminu) */
  body.type-index .cat_img {flex: 0 0 40px !important; align-self: center !important;}
  body.type-index .cat_img img {
    max-width: 40px !important;
    max-height: 38px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    /* bílé pozadí ikony prolnout do podmazu (stejný trik jako podkategorie) */
    mix-blend-mode: multiply !important;
  }
  /* jen název */
  body.type-index .cat_text {align-items: flex-start !important;}
  body.type-index .cat_text h2 {font-size: 13px !important; line-height: 1.25 !important; margin: 0 !important;}
  /* popis, PILULKY i tlačítko skryté (vše zůstává v HTML → SEO OK) */
  body.type-index .cat_text > p:first-of-type,
  body.type-index .kn_child2 ul,
  body.type-index .cat_text p:last-child {display: none !important;}
  /* celá dlaždice klikatelná na kategorii (pilulky pryč → nekoliduje) */
  body.type-index .kn_child2 .cat_text h2 a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    z-index: 1 !important;
  }

  /* ==========================================================
     KATEGORIE — PODKATEGORIE 2 VE ŘÁDKU (mobil, šetření místa)
     ----------------------------------------------------------
     Oranžové dlaždice podkategorií (customi.css „DLAŽDICE PODKATEGORIÍ",
     body.type-category) jsou pod 460px 1 ve řádku → přepneme na 2.
     html-prefix = vyšší specificita → přebije customi (jeho @460px
     pravidlo flex-basis:100%) i při opačném pořadí <link>ů.
     ========================================================== */
  html body.type-category ul.subcategories.with-image > li {
    flex-basis: calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
  }
  /* Shoptet ořezává název: `.subcategories li a .text {max-height:38/48px;
     overflow:hidden}` → 3-řádkové názvy se sekaly. Zrušíme ořez + malinko
     menší písmo (víc názvů na 2 řádky). Dlaždice pak přirozeně doroste. */
  html body.type-category ul.subcategories.with-image .text {
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  /* ==========================================================
     PRODUKTOVÉ KARTY — NÁZEV na 3 řádky (mobil)
     ----------------------------------------------------------
     Shoptet dává `.name` `height:45px` (2 ř./16px) + na mobilu
     `line-clamp:2` → delší (3-řádkový) název se sekne v půlce 3. řádku.
     Zrušíme fixní výšku, povolíme čisté 3 řádky; min-height drží
     ceny/tlačítka zarovnané napříč řádkem. Platí na homepage carousel
     i v kategorii (všechny karty).
     ========================================================== */
  html body.columns-mobile-2 .products-block .p .name {
    height: auto !important;
    min-height: 60px !important;
    max-height: none !important;
    -webkit-line-clamp: 3 !important;
  }
  /* Krátký popis (.p-desc): stejný problém — customi `height/min-height:90px`
     + Shoptet `max-height:76px`, oboje tvrdý ořez (block, ne line-clamp) →
     poslední řádek se sekne v půlce. Dáme čistý line-clamp na 3 řádky
     (celé), min-height drží zarovnání. (!important přebije customi vyšší
     specificitou i Shoptetí max-height.) */
  html body.columns-mobile-2 .products-block .p-desc {
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }

  /* ==========================================================
     HOMEPAGE — CAROUSEL PRODUKTŮ (mobil = 2 karty + scroll indikátor)
     ----------------------------------------------------------
     Počet karet (2) řídí homepage-carousel.js (cardsPerView < 768 → 2).
     Šipky + fade po krajích na mobilu pryč; místo nich je pod carouselem
     "scroll indikátor" (.hp-scrollbar), kterému JS hýbe palcem podle
     scrollu → jasný signál, že jde scrollovat.
     Vyšší specificita / html-prefix = přebije customi.css i při opačném
     pořadí <link>ů.
     ========================================================== */
  /* šipky pryč (na dotyku se swipuje) */
  body.type-index .products-block .hp-arrow {display: none !important;}
  /* fade po krajích pryč */
  html body.type-index .products-block.hp-ready::before,
  html body.type-index .products-block.hp-ready::after {display: none !important;}

  /* scroll indikátor pod carouselem (JS ho vytvoří s inline display:none
     → desktop skrytý; tady ho !importantem zobrazíme) */
  body.type-index .products-block .hp-scrollbar {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;     /* jistota k height:2px */
    width: 70% !important;                 /* široká chic linka */
    min-width: 200px !important;
    max-width: 360px !important;
    height: 2px !important;                /* nízká/tenká */
    /* POZOR: Shoptet dává `.products-block > div {padding:20px; border}`
       a .hp-scrollbar JE přímý div potomek → bez resetu je vysoká ~40px! */
    padding: 0 !important;
    border: 0 !important;
    margin: 6px auto 0 !important;
    background: rgba(0, 0, 0, 0.10) !important;  /* jemný track */
    border-radius: 999px !important;       /* pill */
    overflow: hidden !important;
  }
  body.type-index .products-block .hp-scrollbar-thumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: #39554c !important;
    border-radius: 999px !important;
  }
  /* málo produktů (není co scrollovat) → indikátor schovat */
  body.type-index .products-block.hp-at-start.hp-at-end .hp-scrollbar {display: none !important;}

  /* nadpis blíž ke carouselu (Shoptet dává 2. nadpisu až 57px shora) */
  body.type-index .homepage-group-title {margin-top: 24px !important; margin-bottom: 8px !important;}

  /* ==========================================================
     PATIČKA (mobil) — světlá & čistá
     ----------------------------------------------------------
     Desktop má vlastní SVĚTLOU patičku (vertical-menu.css, ale jen
     ≥992px) → na mobilu zůstává Shoptetí TMAVÁ default. Tady ji
     zesvětlíme: hodně světle šedé pozadí, tmavé (černé) texty,
     vycentrované a vzdušnější. Stejné elementy jako desktop verze.
     ========================================================== */
  /* pozadí světle šedé + jemný oddělovač nahoře */
  #footer,
  #footer > .container,
  #footer .custom-footer,
  #footer .footer-bottom {background: #f5f5f5 !important; border-top: 0 !important;}
  #footer {border-top: 1px solid #e6e6e6 !important;}

  /* nadpisy tmavé/tučné */
  #footer h3, #footer h4, #footer .pageElement__heading {
    color: #1a1a1a !important; font-weight: 700 !important;
  }
  /* běžné texty tmavé */
  #footer, #footer p, #footer span, #footer li, #footer .contact-box {color: #262626 !important;}
  /* odkazy tmavé, hover brand oranžová */
  #footer a, #footer ul a, #footer .contact-box a {color: #262626 !important;}
  #footer a:hover, #footer ul a:hover, #footer .contact-box a:hover {color: #ff9933 !important;}
  /* kontaktní ikonky (obálka/telefon) */
  #footer .contact-box ul li > span::before {color: #262626 !important;}
  #footer .contact-box ul li:hover > span::before {color: #ff9933 !important;}
  /* copyright + „Vytvořil Shoptet" jemně šedé (sekundární info) */
  #footer .copyright, #footer [data-testid="textCopyright"],
  #footer .footer-bottom, #footer .footer-bottom a {color: #8c8c8c !important;}

  /* zarovnání na střed + čistší rytmus */
  #footer .custom-footer,
  #footer .custom-footer__articles,
  #footer .custom-footer__contact,
  #footer .footer-bottom {text-align: center !important;}
  #footer .custom-footer__articles ul {list-style: none !important; padding-left: 0 !important; margin-left: 0 !important;}
  #footer .custom-footer__articles ul li {margin-bottom: 5px !important;}
  /* kontakt: blok vycentrovaný, ale ikony+text uvnitř zarovnané vlevo (ikony v ose) */
  #footer .contact-box ul {display: inline-block !important; text-align: left !important; padding-left: 0 !important;}

}