/*
 * Growino.cz - responsive fix pro Shoptet STEP (template-12)
 * ----------------------------------------------------------
 * Tento soubor nacist AZ ZA stavajicim /user/documents/upload/vzhled.css
 *
 * Cil:
 * - do 991 px odstranit desktopovy levy sidebar
 * - hlavni obsah roztahnout na 100 %
 * - opravit carousel, benefit bannery a homepage obsah
 * - opravit skutecnou Shoptet hlavicku (.navigation-wrapper)
 * - zabranit horizontalnimu overflow
 */

/* =========================================================
   1. BEZPECNY GLOBALNI ZAKLAD
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   2. TABLET + MOBIL - SHOPTET STEP
   Shoptet navigation_breakpoint = 991 px
   ========================================================= */

@media (max-width: 991px) {

    /* -----------------------------------------------------
       HLAVNI OPRAVA:
       Shoptet na Growino drzi sidebar + narrow content.
       Na tabletu/mobilu sidebar uplne odstranime.
       ----------------------------------------------------- */

    body.template-12.multiple-columns-body #content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.template-12.multiple-columns-body #content-wrapper > .content-wrapper-in {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.template-12.multiple-columns-body #content-wrapper .sidebar,
    body.template-12.multiple-columns-body #content-wrapper .sidebar-left {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.template-12.multiple-columns-body #content,
    body.template-12.multiple-columns-body #content.content,
    body.template-12.multiple-columns-body #content.content.narrow {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* -----------------------------------------------------
       KONTEJNERY
       Neaplikujeme 100 % na kazdy .container globalne -
       to byl jeden z problemu predchoziho CSS.
       ----------------------------------------------------- */

    body.template-12 #header > .container.navigation-wrapper,
    body.template-12 #content-wrapper,
    body.template-12 .container--bannersBenefit {
        max-width: 100% !important;
    }

    body.template-12 .container--bannersBenefit {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* -----------------------------------------------------
       HLAVICKA - skutecne tridy Shoptetu STEP
       ----------------------------------------------------- */

    body.template-12 #header {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* hlavička je na mobilu position:fixed a Shoptet pod ni nechává jen 60 px
       (pod 480 px dokonce 40 px), naše lišta má ale 64 px — obsah se musí
       odsunout o celou výšku, jinak horní okraj banneru zajede pod lištu */
    body.template-12 .overall-wrapper {
        padding-top: 64px !important;
    }

    body.template-12 #header > .navigation-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 64px !important;
        padding-left: 16px !important;
        padding-right: 8px !important;
        margin: 0 auto !important;
    }

    body.template-12 #header .site-name {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100% - 170px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.template-12 #header .site-name a {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
    }

    body.template-12 #header .site-name img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 50px !important;
        object-fit: contain !important;
    }

    /* Desktopove menu se na <=991 necha ovladat Shoptetem
       pres hamburger - nesmi zabirat misto vedle loga. */
    body.template-12 #header #navigation {
        max-width: 100% !important;
    }

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

    body.template-12 #header .navigation-buttons {
        position: static !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Skutecne ikony v HTML:
       search = a.toggle-window[data-target=search]
       login  = button.top-nav-button-login
       cart   = a.cart-count
       menu   = a[data-target=navigation]
    */
    body.template-12 #header .navigation-buttons > a,
    body.template-12 #header .navigation-buttons > button {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 56px !important;
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;   /* bez dělicích čar mezi ikonami */
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Kosik zvyraznime pouze ikonou/barvou Shoptetu,
       ne kulatym oranzovym pozadim z puvodniho CSS. */
    body.template-12 #header .navigation-buttons .cart-count {
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* -----------------------------------------------------
       CAROUSEL / HLAVNI BANNER
       ----------------------------------------------------- */

    body.template-12 .banners-row,
    body.template-12 .wide-carousel,
    body.template-12 #carousel,
    body.template-12 #carousel .carousel-inner,
    body.template-12 #carousel .item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.template-12 .banners-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.template-12 #carousel .item img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* -----------------------------------------------------
       BENEFIT BANNER - Poradime / Darky / Rychle doruceni
       Na tabletu 3 polozky vedle sebe.
       ----------------------------------------------------- */

    body.template-12 .benefitBanner.position--benefitHomepage {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        margin: 24px 0 32px !important;
        padding: 0 !important;
    }

    body.template-12 .benefitBanner__item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.template-12 .benefitBanner__picture {
        flex: 0 0 64px !important;
        width: 64px !important;
        min-width: 64px !important;
        margin: 0 14px 0 0 !important;
    }

    body.template-12 .benefitBanner__img {
        display: block !important;
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        object-fit: contain !important;
    }

    body.template-12 .benefitBanner__content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    body.template-12 .benefitBanner__title,
    body.template-12 .benefitBanner__data {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    /* -----------------------------------------------------
       HOMEPAGE - taby, uvodni text, top produkty
       ----------------------------------------------------- */

    body.template-12 .index-content-wrapper,
    body.template-12 .homepage-tabs-wrapper,
    body.template-12 .homepage-texts-wrapper,
    body.template-12 .welcome-wrapper,
    body.template-12 .welcome,
    body.template-12 .top-products-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.template-12 .homepage-texts-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.template-12 .welcome .h1 {
        font-size: clamp(32px, 5vw, 48px) !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }

    body.template-12 .shp-tabs-wrapper {
        overflow: visible !important;
    }

    body.template-12 .shp-tabs-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* -----------------------------------------------------
       PRODUKTOVE VYPISY
       Shoptet body ma columns-mobile-2, takze respektujeme
       2 produkty vedle sebe na beznem mobilu/tabletu.
       ----------------------------------------------------- */

    body.template-12 .products-block {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.template-12 .products-block > div,
    body.template-12 .products-block .product {
        min-width: 0 !important;
    }

    /* -----------------------------------------------------
       OBECNE PROTI PRETEKANI
       ----------------------------------------------------- */

    body.template-12 .row {
        max-width: 100% !important;
    }

    body.template-12 .content img,
    body.template-12 .content iframe,
    body.template-12 .content video {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================================
   3. TELEFON <= 767 px
   ========================================================= */

@media (max-width: 767px) {

    body.template-12 .overall-wrapper {
        padding-top: 58px !important;   /* = výška lišty na telefonu */
    }

    body.template-12.multiple-columns-body #content-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.template-12 #header > .navigation-wrapper {
        min-height: 58px !important;
        padding-left: 12px !important;
        padding-right: 0 !important;
    }

    body.template-12 #header .site-name {
        max-width: calc(100% - 144px) !important;
    }

    body.template-12 #header .site-name img {
        max-height: 44px !important;
    }

    body.template-12 #header .navigation-buttons {
        height: 58px !important;
    }

    body.template-12 #header .navigation-buttons > a,
    body.template-12 #header .navigation-buttons > button {
        flex-basis: 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 58px !important;
        min-height: 58px !important;
    }

    /* Na telefonu uz benefit bloky nejsou 3 tesne sloupce.
       Udelame 2 + 1, coz je citelnejsi. */
    body.template-12 .benefitBanner.position--benefitHomepage {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 16px !important;
        margin-top: 22px !important;
        margin-bottom: 30px !important;
    }

    body.template-12 .benefitBanner__picture {
        flex-basis: 54px !important;
        width: 54px !important;
        min-width: 54px !important;
        margin-right: 10px !important;
    }

    body.template-12 .benefitBanner__img {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
    }

    body.template-12 .benefitBanner__title {
        font-size: 15px !important;
        line-height: 1.18 !important;
    }

    body.template-12 .benefitBanner__data {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    body.template-12 .welcome .h1 {
        font-size: clamp(30px, 8vw, 42px) !important;
    }
}

/* =========================================================
   4. MALY TELEFON <= 520 px
   ========================================================= */

@media (max-width: 520px) {

    body.template-12 #header .site-name {
        max-width: calc(100% - 126px) !important;
    }

    body.template-12 #header .site-name img {
        max-height: 38px !important;
    }

    body.template-12 #header .navigation-buttons > a,
    body.template-12 #header .navigation-buttons > button {
        flex-basis: 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
    }

    /* Tri benefity pod sebe na malem telefonu */
    body.template-12 .benefitBanner.position--benefitHomepage {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.template-12 .benefitBanner__item {
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.template-12 .benefitBanner__picture {
        flex-basis: 62px !important;
        width: 62px !important;
        min-width: 62px !important;
    }

    body.template-12 .benefitBanner__img {
        width: 62px !important;
        height: 62px !important;
        max-width: 62px !important;
    }

    body.template-12 .benefitBanner__title {
        font-size: 16px !important;
    }

    body.template-12 .benefitBanner__data {
        font-size: 15px !important;
    }
}

/* =========================================================
   5. DESKTOP >= 992 px — hlavní obsah do 80% kontejneru
   Hlavička zůstává přes celou šířku. Obsah (#content-wrapper má
   v HTML container_resetted, takže je jinak od kraje ke kraji)
   se zúží na 80 % a vycentruje. Volné pruhy po stranách mají
   gradient shora dolů: tyrkysová #009888 -> bílá -> hnědá #2C2420 (jako patička).
   Horní menu je vycentrované mezi logem a ikonami.
   Horní menu je v Bebas Neue — font se načítá z Google Fonts
   už v hlavičce webu (spolu s DM Sans).
   ========================================================= */

@media (min-width: 992px) {

    /* gradient na .overall-wrapper, ne na body — body má u Shoptetu výšku
       jen okna (kvůli overflow-x), gradient by se skládal do pruhů.
       overall-wrapper obaluje hlavičku i obsah a končí nad patičkou. */
    body.template-12 .overall-wrapper {
        background: linear-gradient(to bottom, #009888 0%, #FFFFFF 50%, #2C2420 100%) !important;
    }

    body.template-12 #header #navigation .menu-level-1 > li > a,
    body.template-12 #header #navigation .menu-level-1 > li > a > b {
        font-family: "Bebas Neue", "Source Sans 3", sans-serif !important;
        font-size: 24px !important;
        font-weight: 400 !important;   /* Bebas má jen jeden řez, tučný by se jen uměle rozmazal */
        letter-spacing: 0.04em !important;
        line-height: 1 !important;
    }

    /* menu doprostřed lišty: nav drží šířku mezi logem a ikonami,
       seznam se centruje uvnitř. Shoptet (splitMenu) přesouvá do „Více“
       položky, které přesahují za .menu-helper — ten musí zůstat na místě,
       proto se nesahá na flex samotného #navigation. */
    /* .navigation-in je u Shoptetu absolute s obří šířkou — right:0 ji
       srovná na šířku navu. „safe center“: když se menu nevejde, zarovná
       se doleva, aby splitMenu správně spočítal, co patří do „Více“. */
    body.template-12 #header #navigation .navigation-in {
        right: 0 !important;
        width: auto !important;
        display: flex !important;
        justify-content: safe center !important;
    }
    body.template-12 #header #navigation .navigation-in > .menu-level-1 {
        flex-wrap: nowrap !important;   /* přetečení doprava, ne na 2. řádek */
    }

    /* hover v horním menu: tyrkysová #009888 (dřív oranžová) */
    body.template-12 #header .navigation-in > ul > li > a:hover,
    body.template-12 #header .navigation-in > ul > li > a:focus,
    body.template-12 #header .navigation-in > ul > li > a:focus-visible,
    body.template-12 #header .navigation-in > ul > li > a:active,
    body.template-12 #header .navigation-in > ul > li.exp > a,
    body.template-12 #header .navigation-in > ul > li > a:hover > b,
    body.template-12 #header .navigation-in > ul > li > a:focus > b,
    body.template-12 #header .navigation-in > ul > li > a:active > b,
    body.template-12 #header .navigation-in > ul > li.exp > a > b {
        color: #009888 !important;
    }
    body.template-12 #header .navigation-in > ul > li > a:visited,
    body.template-12 #header .navigation-in > ul > li > a:visited > b {
        color: var(--_color-header-text, #FFFFFF);
    }

    /* obsah lišty ve stejném 80% kontejneru jako stránka:
       logo začíná na levé hraně obsahu, poslední kolečko končí na pravé.
       Tlačítka mají kolem kolečka 20 px vzduchu, proto záporný okraj vpravo. */
    body.template-12 #header .navigation-wrapper {
        width: 80% !important;
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.template-12 #header .navigation-buttons {
        margin-right: -20px !important;
    }

    body.template-12 #content-wrapper {
        width: 80% !important;
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Menu přesně na střed stránky: vpravo je víc místa zabraného (ikony 260 px
   + skrytý „Více“ 68 px) než vlevo (logo 200 px), rozdíl 128 px se vyrovná
   odsazením zleva. Na užších displejích se odsazení plynule zmenšuje
   (menu má ~560 px), aby kvůli němu nepadaly položky do „Více“. */
@media (min-width: 1600px) {
    body.template-12 #header #navigation .navigation-in {
        padding-left: clamp(0px, calc(80vw - 1080px), 108px) !important;
    }
}

/* Lišta je jen 80 % šířky, na menších monitorech se menu zhustí,
   aby se vešlo celé (jinak položky padají do „Více“). */
@media (min-width: 1200px) and (max-width: 1599px) {
    body.template-12 #header #navigation .menu-level-1 > li > a {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    body.template-12 #header #navigation .menu-level-1 > li > a,
    body.template-12 #header #navigation .menu-level-1 > li > a > b {
        font-size: 21px !important;
    }
    body.template-12 #header #navigation .navigation-in {
        padding-left: clamp(0px, calc(80vw - 985px), 108px) !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    body.template-12 #header #navigation .menu-level-1 > li > a {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    body.template-12 #header #navigation .menu-level-1 > li > a,
    body.template-12 #header #navigation .menu-level-1 > li > a > b {
        font-size: 19px !important;
    }
}

/* =========================================================
   6. MOBILNÍ MENU (hamburger, <= 991 px) – v designu Growina (8. 10. 2026)
   Menu se rozbalí POD lištou s logem (hamburger v liště ho zavírá).
   Stránky (Blog, Návody…) = tmavá zaoblená karta s bílým Bebas Neue,
   pod ní nadpis „Kategorie“ s tlapkou a kategorie jako zaoblené řádky
   (čokoládové tučné písmo, šipka v mátovém kolečku), otevřená kategorie
   = tyrkysová pilulka, podkategorie = bílá karta s tyrkysovou linkou.
   Výjimky: VIVOSUN tyrkysová, Akční nabídka korálová.
   Stejný styl jako levé menu kategorií na PC (growino-kategorie.css).
   ========================================================= */

@media (max-width: 991px) {

    body.template-12 #navigation {
        top: 64px !important;
        height: calc(100% - 64px) !important;
        padding-top: 0 !important;   /* Shoptet tu od 480 px drží 60 px pro vlastní křížek */
        background: #F8F4EE !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25) !important;
    }

    body.template-12 #navigation .navigation-in {
        background: #F8F4EE !important;
        padding: 12px 12px 40px !important;
    }

    /* vlastní křížek menu je zbytečný — zavírá se hamburgerem v liště */
    body.template-12 #navigation .navigation-close {
        display: none !important;
    }

    body.template-12 #navigation .menu-level-1 {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.template-12 #navigation .menu-level-1 > li {
        display: block !important;
        width: 100% !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.template-12 #navigation .menu-level-1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 8px 0 16px !important;
        border-radius: 14px !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color .15s ease, color .15s ease !important;
    }

    body.template-12 #navigation .menu-level-1 > li > a > b,
    body.template-12 #navigation .menu-level-1 > li > a > span:not(.submenu-arrow) {
        padding: 12px 0 !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    /* --- stránky (Blog, Návody, Inspirace…): tmavá zaoblená karta --- */
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category) {
        margin: 0 !important;
        border-radius: 0 !important;
        background: #2C2420 !important;
    }
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category):first-child {
        padding-top: 6px !important;
        border-radius: 18px 18px 0 0 !important;
    }
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category):has(+ li.appended-category),
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category):last-child {
        padding-bottom: 6px !important;
        border-radius: 0 0 18px 18px !important;
    }
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category) > a {
        min-height: 44px !important;
        border-radius: 12px !important;
    }
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category) > a,
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category) > a > b {
        color: #FFFFFF !important;
        font-family: "Bebas Neue", "Source Sans 3", sans-serif !important;
        font-weight: 400 !important;
        font-size: 23px !important;
        letter-spacing: .05em !important;
    }
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category) > a > b {
        padding: 9px 0 !important;
    }

    /* --- nadpis „Kategorie“ s tlapkou mezi stránkami a kategoriemi --- */
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category {
        margin-top: 18px !important;
        padding-top: 42px !important;
        border-top: 0 !important;
        position: relative !important;
    }
    body.template-12 #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category::before {
        content: "Kategorie" !important;
        position: absolute !important;
        top: 0 !important;
        left: 8px !important;
        right: 8px !important;
        display: block !important;
        padding: 0 0 10px 28px !important;
        border-bottom: 2px solid #E6DCCF !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F4845F'%3E%3Cellipse cx='6' cy='9' rx='2.2' ry='2.8'/%3E%3Cellipse cx='10' cy='5.2' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.5' cy='5.2' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.5' cy='9' rx='2.2' ry='2.8'/%3E%3Cpath d='M12.2 10.5c-3.2 0-6.2 4.3-6.2 6.8 0 1.9 1.5 2.7 3.1 2.7 1.3 0 2-.6 3.1-.6s1.8.6 3.1.6c1.6 0 3.1-.8 3.1-2.7 0-2.5-3-6.8-6.2-6.8z'/%3E%3C/svg%3E") left 2px / 20px 20px no-repeat !important;
        font-family: "Bebas Neue", sans-serif !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        letter-spacing: .5px !important;
        color: #3C1F0F !important;
    }

    /* --- kategorie: zaoblené řádky, čokoládové tučné písmo --- */
    body.template-12 #navigation .menu-level-1 > li.appended-category > a,
    body.template-12 #navigation .menu-level-1 > li.appended-category > a > b {
        color: #3C1F0F !important;
        font-family: "DM Sans", sans-serif !important;
        font-weight: 700 !important;
        font-size: 16px !important;
    }
    body.template-12 #navigation .menu-level-1 > li.appended-category > a:active {
        background: #E6F4F2 !important;
    }

    /* --- výjimky: VIVOSUN tyrkysová, Akční nabídka korálová --- */
    body.template-12 #navigation .menu-level-1 > li.appended-category > a[href*="/vivosun"],
    body.template-12 #navigation .menu-level-1 > li.appended-category > a[href*="/vivosun"] > b {
        color: #009888 !important;
    }
    body.template-12 #navigation .menu-level-1 > li.appended-category > a[href*="/akcni-nabidka"],
    body.template-12 #navigation .menu-level-1 > li.appended-category > a[href*="/akcni-nabidka"] > b {
        color: #E06D47 !important;
    }

    /* --- otevřená kategorie (rozbalené podkategorie): tyrkysová pilulka --- */
    body.template-12 #navigation .menu-level-1 > li.appended-category.exp > a {
        background: #00A896 !important;
        box-shadow: 0 6px 14px rgba(0, 168, 150, .25) !important;
    }
    body.template-12 #navigation .menu-level-1 > li.appended-category.exp > a,
    body.template-12 #navigation .menu-level-1 > li.appended-category.exp > a > b {
        color: #FFFFFF !important;
    }

    /* šipka rozbalení vpravo v mátovém kolečku */
    body.template-12 #navigation .submenu-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 0 0 12px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #E6F4F2 !important;
        color: #007A6D !important;
        transition: transform .2s ease, background-color .15s ease !important;
    }
    body.template-12 #navigation .submenu-arrow::after {
        margin: 0 !important;
        color: #007A6D !important;
        font-size: 12px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
    body.template-12 #navigation .menu-level-1 > li.exp > a .submenu-arrow {
        background: rgba(255, 255, 255, .22) !important;
        transform: rotate(180deg) !important;
    }
    body.template-12 #navigation .menu-level-1 > li.exp > a .submenu-arrow::after {
        color: #FFFFFF !important;
    }

    /* --- podkategorie: bílá karta s tyrkysovou linkou vlevo --- */
    body.template-12 #navigation .menu-level-2 {
        margin: 6px 0 10px 10px !important;
        padding: 6px 0 !important;
        background: #FFFFFF !important;
        border: 0 !important;
        border-left: 3px solid #00A896 !important;
        border-radius: 0 14px 14px 0 !important;
    }
    body.template-12 #navigation .menu-level-2 > li {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    body.template-12 #navigation .menu-level-2 > li > a {
        display: block !important;
        padding: 10px 16px 10px 18px !important;
        color: #5a4a40 !important;
        font-family: "DM Sans", sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    body.template-12 #navigation .menu-level-2 > li > a > span {
        padding: 0 !important;
        color: inherit !important;
    }
    body.template-12 #navigation .menu-level-2 > li > a:active {
        color: #007A6D !important;
    }
}

@media (max-width: 767px) {
    body.template-12 #navigation {
        top: 58px !important;
        height: calc(100% - 58px) !important;
    }
}

/* =========================================================
   6b. MOBILNÍ MENU – posouvá se jen menu, ne stránka pod ním
   Na konci menu se scroll zastaví (overscroll-behavior) a stránka
   pod otevřeným menu je zamčená (Shoptet přidává body třídu
   navigation-window-visible).
   ========================================================= */

@media (max-width: 991px) {

    body.template-12 #navigation {
        position: fixed !important;
        top: 64px !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.template-12 #navigation .navigation-in {
        position: static !important;
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }

    html:has(body.navigation-window-visible),
    body.template-12.navigation-window-visible {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
}

@media (max-width: 767px) {
    body.template-12 #navigation {
        top: 58px !important;
        max-height: calc(100dvh - 58px) !important;
    }
}

/* =========================================================
   6c. MOBILNÍ LIŠTA S LOGEM VŽDY VIDĚT
   Šablona Step lištu při scrollu dolů schovává (posune ji nahoru)
   a při scrollu nahoru zase vysune. Tady ji držíme natrvalo nahoře.
   Odsazení obsahu pod lištou (64/58 px) řeší sekce 2 a 3.
   ========================================================= */

@media (max-width: 991px) {
    body.template-12 #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        translate: none !important;
        margin-top: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: none !important;
        z-index: 1000 !important;
    }
}

/* =========================================================
   6d. DROBEČKOVÁ NAVIGACE (strom kategorií) I NA MOBILU
   Šablona Step ji na mobilu schovává. Tady ji vracíme pod lištu
   s logem: Domů › Osvětlení › LED › Lumatek › produkt.
   ========================================================= */

@media (max-width: 991px) {
    body.template-12 .breadcrumbs,
    body.template-12 .breadcrumbs-wrapper,
    body.template-12 .navigation-home-icon-wrapper {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
    }

    body.template-12 .breadcrumbs {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 2px 0 !important;
        width: 100% !important;
        margin: 10px 0 12px !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #6b5f58 !important;
        text-align: left !important;
    }

    body.template-12 .breadcrumbs > span,
    body.template-12 .breadcrumbs > a {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
    }

    body.template-12 .breadcrumbs a {
        color: #3C1F0F !important;
        text-decoration: none !important;
    }
    body.template-12 .breadcrumbs a:active {
        color: #E06D47 !important;
    }

    /* oddělovače mezi úrovněmi */
    body.template-12 .breadcrumbs .navigation-bullet {
        display: inline-block !important;
        margin: 0 6px !important;
        color: #E06D47 !important;
    }

    /* poslední úroveň (aktuální kategorie / produkt) */
    body.template-12 .breadcrumbs [data-testid="breadcrumbsLastLevel"],
    body.template-12 .breadcrumbs > span:last-child {
        color: #2C2420 !important;
        font-weight: 700 !important;
    }

    /* ikonka domečku: Shoptet ji kreslí absolutně (proto „ujížděla“
       a nešlo na ni spolehlivě kliknout) – dáváme ji do řádku jako
       normální prvek s vlastní ikonou a velkou plochou pro prst */
    body.template-12 .breadcrumbs > span:first-child,
    body.template-12 .breadcrumbs #navigation-first {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.template-12 .breadcrumbs .navigation-home-icon {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: inline-flex !important;
        flex: none !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 0 0 -5px !important;
        padding: 0 !important;
        font-size: 0 !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C1F0F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
        z-index: 1 !important;
    }
    body.template-12 .breadcrumbs .navigation-home-icon::before,
    body.template-12 .breadcrumbs .navigation-home-icon::after {
        display: none !important;
        content: none !important;
    }
    body.template-12 .breadcrumbs .navigation-home-icon .sr-only {
        position: absolute !important;
    }

    /* Shoptetí vlastní domeček (kreslí ho mimo odkaz, takže na něj nešlo
       kliknout) schovat – zůstává jen náš domeček uvnitř odkazu */
    body.template-12 .breadcrumbs::before,
    body.template-12 .breadcrumbs::after,
    body.template-12 .navigation-home-icon-wrapper::before,
    body.template-12 .navigation-home-icon-wrapper::after,
    body.template-12 .breadcrumbs > span:first-child::before,
    body.template-12 .breadcrumbs > span:first-child::after,
    body.template-12 .breadcrumbs #navigation-first::before,
    body.template-12 .breadcrumbs #navigation-first::after {
        display: none !important;
        content: none !important;
    }
    body.template-12 .breadcrumbs .navigation-home-icon > *:not(.sr-only),
    body.template-12 .breadcrumbs > span:first-child > *:not(a):not(.navigation-bullet) {
        display: none !important;
    }
}

/* --- detail produktu: ve stromu jen cesta kategorií, bez názvu produktu
       (platí na mobilu i na PC). Poslední kategorie je tučně. --- */
body.template-12.type-detail .breadcrumbs > span:last-child,
body.template-12.type-detail .breadcrumbs [data-testid="breadcrumbsLastLevel"] {
    display: none !important;
}
body.template-12.type-detail .breadcrumbs > span:nth-last-child(2) .navigation-bullet {
    display: none !important;
}
body.template-12.type-detail .breadcrumbs > span:nth-last-child(2) a {
    font-weight: 700 !important;
    color: #2C2420 !important;
}

/* =========================================================
   7. KARTY PRODUKTŮ — zvýraznění rámečku po najetí myší
   Tyrkysový rámeček (#009888) + jemný stín a zvednutí.
   Jen na zařízeních s myší (na mobilu by hover „zůstal viset“).
   ========================================================= */

body.template-12 .products-block .p {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    body.template-12 .products-block .p:hover {
        border-color: #009888 !important;
        box-shadow: 0 0 0 1px #009888, 0 10px 24px rgba(44, 36, 32, .14) !important;
        transform: translateY(-3px) !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   8. STRÁNKY Z HORNÍHO MENU (Blog, Návody, Inspirace, Kontakty…)
   Jednosloupcové stránky a výpisy článků — obsah zarovnaný na střed.
   Drobečková navigace zůstává vlevo.
   ========================================================= */

body.template-12.one-column-body.type-page #content,
body.template-12.one-column-body.type-posts-listing #content {
    text-align: center !important;
}
body.template-12.one-column-body.type-page #content img,
body.template-12.one-column-body.type-posts-listing #content img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
/* odrážky u vystředěného textu ať nevisí na levém okraji */
body.template-12.one-column-body.type-page #content ul,
body.template-12.one-column-body.type-page #content ol,
body.template-12.one-column-body.type-posts-listing #content ul,
body.template-12.one-column-body.type-posts-listing #content ol {
    list-style-position: inside !important;
    padding-left: 0 !important;
}
/* formuláře a tabulky (např. kontaktní formulář) zůstávají čitelné vlevo,
   jen jako celek na středu */
body.template-12.one-column-body.type-page #content form,
body.template-12.one-column-body.type-page #content table {
    text-align: left !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* krátké stránky: pod patičkou nezůstane béžový pruh, pozadí je hnědé jako patička */
@media (min-width: 992px) {
    html,
    body.template-12 {
        background-color: #2C2420 !important;
    }
}

/* =========================================================
   9. DESKTOP - 4 PRODUKTY VEDLE SEBE
   Shoptet ma body.columns-3 a od 1200 px dava karte 33 %.
   ========================================================= */

@media (min-width: 1200px) {
    body.template-12.columns-3 .products-block > div,
    body.template-12.columns-4 .products-block > div {
        width: 25% !important;
    }
}

/* =========================================================
   10. SIDEBAR - bez boxu vyhledavani (hleda se pres lupu v liste)
   ========================================================= */

body.template-12 .sidebar .box-search {
    display: none !important;
}

/* =========================================================
   11. DESKTOP >= 1200 px - POLE HLEDANI PRIMO V LISTE
   Shoptetí okno hledání (.search-window, normálně fixed přes
   celou obrazovku) je přesunuté do lišty místo kolečka lupy.
   #content-wrapper má stejný 80% kontejner jako lišta, takže
   right: 120px = místo pro kolečka přihlášení a košíku
   (2 tlačítka po 60 px, -10 px okraj vpravo). Mezi polem
   a kolečky i mezi kolečky navzájem je stejně 20 px.
   ========================================================= */

@media (min-width: 1200px) {
    body.template-12 {
        --growino-search-w: clamp(160px, 14vw, 280px);
    }

    body.template-12 #content-wrapper {
        position: relative !important;
    }

    body.template-12 #header .navigation-buttons > [data-target="search"] {
        display: none !important;
    }

    /* kolečko 40 px v tlačítku 60 px = mezery 20 px */
    body.template-12 #header .navigation-buttons > a,
    body.template-12 #header .navigation-buttons > button {
        flex: 0 0 60px !important;
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    body.template-12 #header .navigation-buttons {
        margin-right: -10px !important;
    }

    /* místo v liště pro pole, aby se menu neschovávalo pod něj */
    body.template-12 #header .navigation-buttons {
        padding-left: calc(var(--growino-search-w) + 20px) !important;
    }

    /* menu na střed mezi logem a polem hledání */
    body.template-12 #header #navigation .navigation-in {
        padding-left: 0 !important;
    }

    body.template-12 .search-window,
    body.template-12.search-window-visible .search-window {
        position: absolute !important;
        top: -62px !important;
        right: 120px !important;
        left: auto !important;
        width: var(--growino-search-w) !important;
        height: 44px !important;
        overflow: visible !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1002 !important;
    }

    body.template-12 .search-window-in {
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    body.template-12 .search-window .toggle-window-arr,
    body.template-12 .search-window h2,
    body.template-12 .search-window h3,
    body.template-12 .search-window .recommended-products {
        display: none !important;
    }

    body.template-12 .search-window .container,
    body.template-12 .search-window .search {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.template-12 .search-window form,
    body.template-12 .search-window fieldset {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }

    body.template-12 .search-window fieldset {
        position: relative !important;
        display: flex !important;
        margin: 0 !important;
    }

    body.template-12 .search-window input.search-input {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 50px 0 18px !important;
        border: 2px solid transparent !important;
        border-radius: 22px !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
        outline: none !important;
        color: #2C2420 !important;
        font-size: 15px !important;
    }

    body.template-12 .search-window input.search-input:focus {
        border-color: #F4845F !important;
    }

    /* tlačítko = oranžové kolečko s lupou uvnitř pole */
    body.template-12 .search-window button[type="submit"] {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #F4845F !important;
        font-size: 0 !important;
        z-index: 2 !important;
    }

    body.template-12 .search-window button[type="submit"]::before,
    body.template-12 .search-window button[type="submit"]::after {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        margin: 0 !important;
        font-size: 0 !important;
    }

    body.template-12 .search-window button[type="submit"]::before {
        top: 9px !important;
        left: 9px !important;
        width: 14px !important;
        height: 14px !important;
        border: 2px solid #FFFFFF !important;
        border-radius: 50% !important;
        background: transparent !important;
    }

    body.template-12 .search-window button[type="submit"]::after {
        top: 23px !important;
        left: 21px !important;
        width: 2px !important;
        height: 7px !important;
        background: #FFFFFF !important;
        transform: rotate(-45deg) !important;
    }

    /* po najetí myší: lupa tyrkysová #009888 (jako panáček a košík) */
    body.template-12 .search-window button[type="submit"]::before,
    body.template-12 .search-window button[type="submit"]::after {
        transition: border-color .15s ease, background-color .15s ease !important;
    }
    body.template-12 .search-window button[type="submit"]:hover::before,
    body.template-12 .search-window button[type="submit"]:focus-visible::before {
        border-color: #009888 !important;
    }
    body.template-12 .search-window button[type="submit"]:hover::after,
    body.template-12 .search-window button[type="submit"]:focus-visible::after {
        background: #009888 !important;
    }

    /* našeptávač jako rozbalovací okno pod polem */
    body.template-12 .search-window .search-whisperer {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        width: 440px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        border: 1px solid #EDE6DD !important;
        border-radius: 12px !important;
        background: #FFFFFF !important;
        box-shadow: 0 12px 32px rgba(44, 36, 32, .22) !important;
        font-size: 14px !important;
    }
}

/* s polem hledání v liště je na menším monitoru méně místa pro menu */
@media (min-width: 1200px) and (max-width: 1439px) {
    body.template-12 #header #navigation .menu-level-1 > li > a {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    body.template-12 #header #navigation .menu-level-1 > li > a,
    body.template-12 #header #navigation .menu-level-1 > li > a > b {
        font-size: 20px !important;
    }
}

/* =========================================================
   12. KOCOUR (footer-custom-image-wrapper) VICE DO ROHU
   V HTML patičky má inline right:80px; bottom:20px.
   ========================================================= */

body.template-12 .footer-custom-image-wrapper {
    right: 16px !important;
    bottom: 16px !important;
}

@media (max-width: 767px) {
    body.template-12 .footer-custom-image-wrapper {
        right: 8px !important;
        bottom: 8px !important;
    }
}