/* =============================================================
   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);
    }
}


/* =============================================================
   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;
}

/* 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;
}