/* =============================================================
   category-style.css
   Vlastni styly stranky kategorie — grid subkategorii dle Figma designu.
   Element 1: .category-top > .subcategories.with-image (8/4/3 sloupce).
   Dokumentace: category/CATEGORY-DOKUMENTACE.md
   ============================================================= */


.category-top > .subcategories.with-image {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    flex-wrap: unset;
    overflow: visible !important;
    overscroll-behavior: auto;
    padding-bottom: 0;
    margin-top: 20px;
    margin-bottom: 32px;
}

.category-top > .subcategories.with-image > li {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    flex: unset;
    border-radius: 3px;
    overflow: hidden;
}

.category-top > .subcategories.with-image > li > a {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    padding: 0;
    overflow: hidden;
    text-align: center;
    transition: outline-color 0.2s;
    border-radius: 3px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: 1px solid transparent;
    outline-offset: -1px;
}

.category-top > .subcategories.with-image > li > a:hover {
    outline-color: #252729;
    box-shadow: none !important;
}

.category-top > .subcategories.with-image > li > a:hover .text {
    color: #252729;
    text-decoration: underline !important;
    text-decoration-color: #252729 !important;
}

.category-top > .subcategories.with-image > li > a .image {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
}

.category-top > .subcategories.with-image > li > a .image img,
.category-top > .subcategories.with-image > li > a .image img.big {
    /* !important prebija:
       - inline aspect-ratio:unset z legacy doppler2507.js (~122)
       - .big variantu (doppler-all.css:1088 — width/height/max-width/max-height:84px),
         tridu .big pridava doppler2507.js (~82) pro body.id-803 (Slunecniky) */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: cover;
    display: block;
}

.category-top > .subcategories.with-image > li > a .text {
    margin: 0;
    padding: 12px;
    min-height: calc(14px * 1.15 * 2 + 12px * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    color: #000;
}


@media (max-width: 1199px) {
    .category-top > .subcategories.with-image {
        grid-template-columns: repeat(4, 1fr);
    }
}


@media (max-width: 767px) {
    .category-top > .subcategories.with-image {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 0 !important;
    }

    .category-top > .subcategories.with-image > li > a .text {
        padding: 9px 8px;
        min-height: calc(14px * 1.15 * 2 + 9px * 2);
    }

    /* ===========================================================
       MOBILE FIX — img.big nezarovnany na 100% sirku containeru
       -----------------------------------------------------------
       Shoptet legacy style.css (CDN) ma:
         @media (max-width: 767px) {
             .subcategories.with-image li a .image:has(img.big),
             .subcategories.with-image li a .image img.big {
                 width: 84px; max-width: 84px;
                 height: 84px; max-height: 84px;
             }
         }
       Specificita (0,4,3) bez !important.

       Plus css/doppler-all.css:783 (global, ne media):
         .subcategories.with-image li a .image { width: 60px; height: 59px }
         (0,4,3)
       A radek 460 v @media max-width:767:
         .subcategories li .image { width: 91px; height: 91px } (0,3,2)

       VYSLEDEK: img na mobilu je sevreny do 84×84 px, .image rodic
       muze byt jeste mensi. Vypada to jako miniatura zarovnana
       vlevo, ne full-width grid card.

       FIX: silnejsi override s body.type-category scope (+1 class,
       +1 element) + !important pro definitivni preraz.
       Specificita teto override:
         body.type-category .category-top > .subcategories.with-image
         > li > a .image:has(img.big)
         = body + 5 classes + 2 elements + :has = (0,6,2)+1pseudo
         = (0,7,2) — bije legacy (0,4,3) i (0,3,2) vsechny.

       Cilime jak .image rodic (aby aspect-ratio 1:1 platilo) tak
       img child (aby vyplnil 100% rodice).
       =========================================================== */
    body.type-category .category-top > .subcategories.with-image > li > a .image,
    body.type-category .category-top > .subcategories.with-image > li > a .image:has(img.big) {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
    }

    body.type-category .category-top > .subcategories.with-image > li > a .image img,
    body.type-category .category-top > .subcategories.with-image > li > a .image img.big {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        aspect-ratio: unset !important;
        object-fit: cover !important;
    }
}


/* =============================================================
   Custom banner kategorie (.roi-cat-banner)
   HTML klient vklada do popisku kategorie (Shoptet admin).
   Sablona: category/category-banner.html
   JS presouva banner pod h1 stranky kategorie (viz category-script.js).
   Desktop a mobil verze fotky resi <picture> + <source media>.
   ============================================================= */

.roi-cat-banner {
    width: 100%;
    margin: 20px 0;
    display: block;
    line-height: 0;
}

/* Legacy doppler-all.css:327-329 dela z .category-top flex column
   a nastavuje .category-title{order:1} + .subcategories{order:2}.
   Bez tohoto pravidla by banner (default order:0) vyskocil nad h1. */
.category-top > .roi-cat-banner {
    order: 1;
}

/* 2026-05-16: Pokud kategorie ma .category-perex (novy hlavni banner novy
   vzhled "Slunecniky pro kazdou terasu" atd.), umistit ho PRED subkategorie.
   Cilovy poradi v .category-top:
     1. h1 (.category-title) — order 1 (legacy)
     2. .category-perex      — order 2 (nove)
     3. .subcategories.with-image — order 3 (preskakuje z legacy order 2) */
.category-top > .category-perex {
    order: 2;
}

.category-top > .subcategories.with-image {
    order: 3;
}

/* Pokud banner sousedi se .subcategories.with-image, nepridavat spodni margin
   (subkategorie maji vlastni margin-top a tlacily by se moc dolu) */
.roi-cat-banner:has(+ .subcategories.with-image) {
    margin-bottom: 0;
}

.roi-cat-banner a,
.roi-cat-banner picture {
    display: block;
    width: 100%;
}

.roi-cat-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

@media (max-width: 767px) {
    .roi-cat-banner {
        margin: 0 0 20px !important;
    }
}


/* =============================================================
   Produkt karty v gridu (.products-block .p > a)
   Shoptet base style.css ma na linku obalujici karet padding: 0 16px.
   Pridavame padding-bottom 12px pro mensi mezeru pod fotkou ke spodnimu obsahu. */

.type-category .products-block .p > a {
    padding-bottom: 12px;
}


/* =============================================================
   Homepage — banner kategorii (.footer-banner)
   Stejny vizualni styl jako .subcategories.with-image: fotka edge-to-edge,
   text dole, hover s tmavym outlinem + underline.
   ============================================================= */

.footer-banner > a {
    padding: 0 !important;
    height: auto;
    align-content: flex-start;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: outline-color 0.2s ease;
    text-decoration: none !important;
}

.footer-banner > a:hover {
    outline-color: #252729;
}

.footer-banner > a:hover .extended-banner-title {
    color: #252729;
    text-decoration: underline !important;
    text-decoration-color: #252729 !important;
}

.footer-banner .extended-banner-title {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    color: #000;
    text-align: center !important;
    padding: 0 12px 12px 12px !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

@media (min-width: 768px) {
    .footer-banner img {
        height: 180px !important;
        width: 100% !important;
        object-fit: cover;
    }
}

@media (max-width: 991px) {
    .footer-banner .extended-banner-texts {
        width: 100% !important;
        text-align: center;
        height: 60px;
        padding-top: 12px;
    }

    .footer-banner .extended-banner-title {
        padding: 0 !important;
    }
}

@media (max-width: 767px) {
    .footer-banner img {
        height: 200px !important;
        width: 100% !important;
        object-fit: cover;
    }

    .content-wrapper.container .row {
        margin-left: 0;
        margin-right: 0;
    }

    .content-wrapper.container .row > div {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px;
    }
}


/* =============================================================
   Filtrace v kategorii (.advanced-filters-wrapper)
   ============================================================= */

.type-category .advanced-filters-wrapper {
    padding-bottom: 20px;
}


/* =============================================================
   2026-05-16: zrusit padding na .p-tools v product card grid.
   ============================================================= */
.products-block > div .p .p-bottom > div .p-tools {
    padding: 0 !important;
}

/* Mobile (.columns-mobile-2) — vertikalni padding na product card itemu */
.columns-mobile-2 .products-block > div {
    padding-top: 10px;
    padding-bottom: 10px;
}