/* ============================================================
   CATEGORY PAGE - MOBILE OPTIMIZATION
   ============================================================ */

@media (max-width: 767.98px) {

    /* ========================================================
       1. PODKATEGÓRIE - COLLAPSIBLE
       ======================================================== */

    body#category #subcategories {
        margin-top: 8px;
        margin-bottom: 12px;
    }

    body#category.mv-category-js
    #subcategories
    .subcategory-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        margin: 0;
        padding: 10px 12px;

        border: 1px solid #e2e2e2;
        border-radius: 4px;

        background: #ffffff;

        box-sizing: border-box;

        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;

        cursor: pointer;

        user-select: none;
        -webkit-user-select: none;
    }

    body#category.mv-category-js
    #subcategories
    .subcategory-heading::after {
        content: "expand_more";

        flex: 0 0 auto;

        margin-left: 10px;

        font-family: "Material Icons";
        font-size: 22px;
        line-height: 1;

        transition: transform 0.2s ease;
    }

    body#category.mv-category-js
    #subcategories.mv-subcategories-open
    .subcategory-heading::after {
        transform: rotate(180deg);
    }

    body#category.mv-category-js
    #subcategories
    ul.clearfix {
        display: none !important;
    }

    body#category.mv-category-js
    #subcategories.mv-subcategories-open
    ul.clearfix {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        width: 100%;

        margin: 8px 0 0 0 !important;
        padding: 0 !important;

        list-style: none;

        box-sizing: border-box;
    }

    body#category
    #subcategories
    ul.clearfix
    > li {
        float: none !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid #e8e8e8;
        border-radius: 4px;

        background: #ffffff;

        overflow: hidden;
    }

    body#category
    #subcategories
    ul.clearfix
    > li
    > a {
        display: block;

        width: 100%;
        height: 100%;

        padding: 6px;

        box-sizing: border-box;

        text-decoration: none;
    }

    body#category
    #subcategories
    .subcategory-image {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 90px;

        margin: 0;
        padding: 0;
    }

    body#category
    #subcategories
    .subcategory-image
    img {
        display: block;

        width: auto;
        height: auto;

        max-width: 100%;
        max-height: 90px;

        margin: auto;

        object-fit: contain;
    }

    body#category
    #subcategories
    h5 {
        margin: 5px 2px 3px 2px;

        font-size: 12px;
        line-height: 1.25;
        font-weight: 500;

        text-align: center;
    }


    /* ========================================================
       2. FILTROVAT + SEŘADIT PODLE V JEDNOM RIADKU
       ======================================================== */

    body#category
    #products
    > div:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;

        column-gap: 8px;
        row-gap: 5px;

        width: 100%;

        margin-bottom: 10px;
    }

    body#category
    #js-product-list-top {
        display: contents !important;
    }

    body#category
    #js-product-list-top
    > .col-md-6:not(.total-products) {
        display: contents !important;
    }

    body#category
    #js-product-list-top
    .sort-by-row {
        display: contents !important;
    }


    /* --------------------------------------------------------
       Filtrovat
       -------------------------------------------------------- */

    body#category
    #products
    > div:first-child
    > .feds_offcanvas_tri {
        order: 10;

        flex: 1 1 0;

        display: flex !important;
        align-items: center;
        justify-content: center;

        min-width: 0;
        min-height: 42px;

        margin: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        box-sizing: border-box;

        white-space: nowrap;
    }

    body#category
    #products
    > div:first-child
    > .feds_offcanvas_tri
    i {
        margin-right: 6px;
    }


    /* --------------------------------------------------------
       Seřadit podle
       -------------------------------------------------------- */

    body#category
    #js-product-list-top
    .products-sort-order {
        order: 11;

        flex: 1 1 0;

        float: none !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0;

        margin: 0 !important;
        padding: 0 !important;
    }

    body#category
    #js-product-list-top
    .products-sort-order
    .select-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 42px;

        margin: 0;
        padding: 0 10px;

        border: 1px solid #d8d8d8;
        border-radius: 3px;

        background: #ffffff;

        box-sizing: border-box;

        font-size: 12px;
        line-height: 1.2;

        white-space: nowrap;
    }

    body#category
    #js-product-list-top
    .products-sort-order
    .select-title
    .material-icons {
        flex: 0 0 auto;

        margin-left: 5px;

        font-size: 20px;
    }

    body#category
    #js-product-list-top
    .products-sort-order
    .dropdown-menu {
        width: 100%;
        min-width: 100% !important;
    }

    body#category
    #js-product-list-top
    .filter-button {
        display: none !important;
    }

    body#category
    #js-product-list-top
    .total-products {
        display: none !important;
    }


    /* --------------------------------------------------------
       Počet zobrazených produktov
       -------------------------------------------------------- */

    body#category
    #js-product-list-top
    .showing {
        order: 20;

        flex: 0 0 100%;

        width: 100% !important;

        margin: 2px 0 0 0 !important;
        padding: 0 !important;

        color: #555555 !important;

        font-size: 12px !important;
        line-height: 1.3;

        text-align: center !important;
    }

    body#category
    #products
    .grid_switcher {
        display: none !important;
    }


    /* ========================================================
       3. ZOZNAM PRODUKTOV
       ======================================================== */

    body#category
    #js-product-list
    .products {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body#category
    #js-product-list
    .product-miniature {
        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 4px !important;

        box-sizing: border-box;
    }


    /* ========================================================
       4. PRODUKTOVÁ KARTA - FLAT DESIGN

       Bez rámika, radiusu a tieňa.

       Produkty oddeľuje výraznejšia zelená čiara, aby bolo
       jednoznačné, že cena / košík / skladovosť patria
       k produktu NAD čiarou.
       ======================================================== */

    body#category
    .product-miniature
    .thumbnail-container {
        position: relative;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding:
            14px 6px 16px 6px !important;

        border: 0 !important;
        border-radius: 0 !important;

        border-bottom:
            2px solid #26b04d !important;

        background: #ffffff;

        box-shadow: none !important;

        box-sizing: border-box;

        overflow: visible;
    }


    /*
     * Za posledným produktom už deliacu čiaru nepotrebujeme.
     */

    body#category
    #js-product-list
    .products
    > .product-miniature:last-child
    .thumbnail-container {
        border-bottom: 0 !important;
    }

    body#category
    .product-miniature
    .product-left,

    body#category
    .product-miniature
    .product-right {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ========================================================
       5. NÁZOV + OBRÁZOK
       ======================================================== */

    body#category
    .product-miniature
    .product-image-container {
        position: relative !important;

        width: 100%;

        height: auto !important;
        min-height: 0 !important;

        margin: 0;
        padding: 0;
    }

    body#category
    .product-miniature
    a.product-thumbnail {
        position: static !important;

        display: flex !important;

        flex-direction:
            column-reverse !important;

        align-items: stretch;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        text-decoration: none;
    }


    /* --------------------------------------------------------
       Názov produktu
       -------------------------------------------------------- */

    body#category
    .product-miniature
    .product-title {
        position: static !important;

        display:
            -webkit-box !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        max-height:
            3.75em !important;

        margin:
            0 0 8px 0 !important;

        padding:
            0 2px !important;

        box-sizing: border-box;

        overflow: hidden;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            3;

        color: #222222;

        font-size:
            15px !important;

        line-height:
            1.25 !important;

        font-weight:
            600 !important;

        text-align: center;
    }


    /* --------------------------------------------------------
       Obrázok produktu
       -------------------------------------------------------- */

    body#category
    .product-miniature
    a.product-thumbnail
    > img {
        display: block;

        flex: 0 0 auto;

        width: 100% !important;

        height:
            clamp(
                220px,
                68vw,
                280px
            ) !important;

        max-width:
            100% !important;

        max-height:
            none !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        object-fit: contain;
    }


    /* ========================================================
       6. PRODUKTOVÉ ŠTÍTKY
       ======================================================== */

    body#category
    .product-miniature
    .product-flags-plist {
        position: absolute !important;

        top: auto !important;

        left: 5px !important;
        right: 5px !important;
        bottom: 5px !important;

        z-index: 5;

        display: flex !important;
        align-items: center;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box;

        pointer-events: none;
    }

    body#category
    .product-miniature
    .product-flags-plist:empty {
        display: none !important;
    }

    body#category
    .product-miniature
    .product-flags-plist
    .product-flag {
        position: static !important;

        display:
            inline-flex !important;

        align-items: center;
        justify-content: center;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            4px 6px !important;

        box-sizing: border-box;

        font-size:
            11px !important;

        line-height:
            1.1 !important;

        font-weight: 600;

        white-space: nowrap;
    }

    body#category
    .product-miniature
    .product-flags-plist
    .product-flag.discount {
        order: 10;

        margin-right:
            auto !important;

        margin-left:
            0 !important;
    }

    body#category
    .product-miniature
    .product-flags-plist
    .product-flag.discount-percentage {
        order: 20;

        margin-left:
            auto !important;

        margin-right:
            0 !important;
    }

    body#category
    .product-miniature
    .product-flags-plist
    .product-flag:not(.discount):not(.discount-percentage) {
        order: 5;

        margin-right:
            5px !important;
    }

    body#category
    .product-miniature
    .quick-view {
        display: none !important;
    }


    /* ========================================================
       7. KÓD + ZNAČKA + HODNOTENIE
       ======================================================== */

    body#category
    .product-miniature
    .product-description {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: center;

        column-gap: 8px;
        row-gap: 5px;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding:
            8px 2px 0 2px !important;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       Kód vľavo
       -------------------------------------------------------- */

    body#category
    .product-miniature
    .product-description
    .pl_reference {
        grid-column: 1;
        grid-row: 1;

        justify-self: start;

        display:
            inline-flex !important;

        align-items: center;

        width:
            max-content !important;

        max-width:
            none !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 11.5px;
        line-height: 1.25;

        white-space: nowrap;
    }


    /* --------------------------------------------------------
       Hodnota kódu - odsadenie od "Kód:"
       -------------------------------------------------------- */

    body#category
    .product-miniature
    .product-description
    .pl_reference
    > span {
        margin-left: 5px !important;
    }


    /* --------------------------------------------------------
       Značka v strede
       -------------------------------------------------------- */

    body#category
    .product-miniature
    .product-description
    .pl_manufacturer {
        grid-column: 2;
        grid-row: 1;

        justify-self: center;

        display:
            inline-flex !important;

        align-items: center;

        width:
            max-content !important;

        max-width:
            none !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 11.5px;
        line-height: 1.25;

        white-space: nowrap;
    }


    /* --------------------------------------------------------
       Hodnota značky - odsadenie od "Značka:"
       -------------------------------------------------------- */

    body#category
    .product-miniature
    .product-description
    .pl_manufacturer
    > a {
        margin-left: 5px !important;
    }


    /* --------------------------------------------------------
       Hodnotenie vpravo
       -------------------------------------------------------- */

    body#category
    .product-miniature
    .product-description
    .comments_note {
        grid-column: 3;
        grid-row: 1;

        justify-self: end;

        display:
            inline-flex !important;

        align-items: center;

        width:
            max-content !important;

        max-width:
            none !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap;
    }

    body#category
    .product-miniature
    .comments_note
    .star_content {
        display:
            inline-flex !important;

        align-items: center;

        float: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body#category
    .product-miniature
    .comments_note
    .star {
        float: none !important;
    }

    body#category
    .product-miniature
    .comments_note
    .nb-comments {
        margin-left: 3px;

        font-size: 11px;
        line-height: 1.2;
    }


    /* ========================================================
       8. FALLBACK PRI NEDOSTATKU MIESTA
       ======================================================== */

    body#category
    .product-miniature
    .product-description.mv-meta-wrap {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        row-gap: 5px;
    }

    body#category
    .product-miniature
    .product-description.mv-meta-wrap
    .pl_reference {
        grid-column: 1;
        grid-row: 1;

        justify-self: start;
    }

    body#category
    .product-miniature
    .product-description.mv-meta-wrap
    .pl_manufacturer {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;
    }

    body#category
    .product-miniature
    .product-description.mv-meta-wrap
    .comments_note {
        grid-column:
            1 / -1;

        grid-row: 2;

        justify-self: center;
    }


    /* ========================================================
       9. KRÁTKY POPIS - MAX. 4 RIADKY
       ======================================================== */

    body#category
    .product-miniature
    .product-description
    .product-desc {
        grid-column:
            1 / -1;

        grid-row: 2;

        display:
            -webkit-box !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            4px 0 0 0 !important;

        padding:
            0 !important;

        overflow: hidden;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            4;

        max-height:
            5.4em;

        color: #555555;

        font-size: 12px;
        line-height: 1.35;

        text-align: left;
    }

    body#category
    .product-miniature
    .product-description.mv-meta-wrap
    .product-desc {
        grid-row: 3;
    }


    /* ========================================================
       10. CENA VĽAVO + KOŠÍK V STREDE + SKLAD VPRAVO
       ======================================================== */

    body#category
    .product-miniature
    .product-bottom {
        position: static !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            44px
            minmax(0, 1fr);

        align-items: center;

        column-gap: 10px;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            10px 0 0 0 !important;

        padding:
            10px 2px 0 2px !important;

        border-top:
            1px solid #eeeeee;

        box-sizing: border-box;

        overflow: visible;
    }


    /* ========================================================
       11. CENA - VĽAVO
       ======================================================== */

    body#category
    .product-miniature
    .product-price-and-shipping {
        grid-column: 1;

        justify-self: start;
        align-self: center;

        display: flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        justify-content: center;

        width: auto !important;
        min-width: 0;

        margin: 0 !important;
        padding: 0 !important;

        text-align:
            left !important;

        white-space:
            nowrap;
    }

    body#category
    .product-miniature
    .product-price-and-shipping
    .price {
        display: block;

        margin: 0 !important;
        padding: 0 !important;

        font-size:
            16px !important;

        line-height:
            1.1 !important;

        font-weight:
            700 !important;

        white-space: nowrap;
    }

    body#category
    .product-miniature
    .product-price-and-shipping
    .regular-price {
        display:
            block !important;

        margin:
            3px 0 0 0 !important;

        padding:
            0 !important;

        color: #999999;

        font-size:
            10.5px !important;

        line-height:
            1.05 !important;

        font-weight:
            400 !important;

        white-space: nowrap;
    }


    /* ========================================================
       12. KOŠÍK - 44 × 44 PX
       ======================================================== */

    body#category
    .product-miniature
    .button-container {
        grid-column: 2;

        justify-self: center;
        align-self: center;

        display:
            flex !important;

        align-items: center;
        justify-content: center;

        width:
            44px !important;

        height:
            44px !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }

    body#category
    .product-miniature
    .button-container
    form {
        display: flex;

        align-items: center;
        justify-content: center;

        width:
            44px !important;

        height:
            44px !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }

    body#category
    .product-miniature
    .button-container
    .add-to-cart {
        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            44px !important;

        min-width:
            44px !important;

        max-width:
            44px !important;

        height:
            44px !important;

        min-height:
            44px !important;

        max-height:
            44px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border-radius:
            50% !important;

        box-sizing:
            border-box !important;

        font-size:
            0 !important;

        line-height:
            1 !important;

        text-align:
            center !important;

        white-space:
            nowrap;

        overflow:
            hidden;

        cursor:
            pointer;
    }


    /* --------------------------------------------------------
       Ikona košíka
       -------------------------------------------------------- */

    body#category
    .product-miniature
    .button-container
    .add-to-cart
    .material-icons {
        position:
            static !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            22px !important;

        height:
            22px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        font-size:
            22px !important;

        line-height:
            22px !important;

        text-align:
            center !important;

        vertical-align:
            middle !important;

        transform:
            none !important;
    }

    body#category
    .product-miniature
    .button-container
    .add-to-cart
    span:not(.material-icons) {
        display:
            inline-block;

        width:
            0 !important;

        height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            hidden;

        font-size:
            0 !important;

        line-height:
            0 !important;
    }

    body#category
    .product-miniature
    .button-container
    .lnk_view {
        display:
            none !important;
    }


    /* ========================================================
       13. SKLADOVOSŤ - VPRAVO
       ======================================================== */

    body#category
    .product-miniature
    .availability {
        grid-column: 3;

        justify-self: end;
        align-self: center;

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            flex-end;

        width:
            auto !important;

        min-width: 0;

        margin:
            0 !important;

        padding:
            0 !important;

        text-align:
            right;

        white-space:
            nowrap;
    }

    body#category
    .product-miniature
    .pl-availability {
        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            flex-end;

        margin:
            0 !important;

        padding:
            0 !important;

        font-size:
            11px !important;

        line-height:
            1.1;

        font-weight:
            600;

        white-space:
            nowrap;
    }

    body#category
    .product-miniature
    .pl-availability
    .material-icons {
        flex:
            0 0 auto;

        margin:
            0 3px 0 0 !important;

        padding:
            0 !important;

        font-size:
            15px !important;

        line-height:
            1 !important;
    }

}