/* ============================================================
   PRODUCT PAGE - MOBILE OPTIMIZATION
   ============================================================ */

@media (max-width: 767.98px) {


    /* ========================================================
       1. MOBILNÉ PORADIE PRODUKTU

       1. názov
       2. kód vľavo + značka vpravo
       3. hodnotenie
       4. obrázky
       5. nákupná časť
       6. krátky popis
       ======================================================== */

    body#product .product_container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }


    body#product .product_container > .product_right {
        display: contents !important;
    }


    /* ========================================================
       2. NÁZOV PRODUKTU
       ======================================================== */

    body#product
    .product_container
    > .product_right
    > .product_name {
        order: 10;

        flex: 0 0 100%;
        width: 100%;

        margin-top: 0;
        margin-bottom: 7px;

        padding-left: 15px;
        padding-right: 15px;

        box-sizing: border-box;

        font-size: 19px !important;
        line-height: 1.10 !important;
    }


    /* ========================================================
       3. KÓD VĽAVO + ZNAČKA VPRAVO
       ======================================================== */

    body#product
    .product_container
    > .product_right
    > .product-reference_top {
        order: 11;

        flex: 0 0 auto !important;
        width: auto !important;

        margin-top: 0 !important;
        margin-right: 0;
        margin-bottom: 2px !important;

        padding-top: 0 !important;
        padding-left: 15px;
        padding-right: 0;
        padding-bottom: 0 !important;

        box-sizing: border-box;

        line-height: 1.2;
    }


    body#product
    .product_container
    > .product_right
    > #product_manufacturer {
        order: 12;

        flex: 0 0 auto !important;
        width: auto !important;

        margin-top: 0 !important;
        margin-left: auto;
        margin-right: 0;
        margin-bottom: 2px !important;

        padding-top: 0 !important;
        padding-left: 0;
        padding-right: 15px;
        padding-bottom: 0 !important;

        box-sizing: border-box;

        line-height: 1.2;
        text-align: right;
    }


    /* ========================================================
       4. HODNOTENIE PRODUKTU
       ======================================================== */

    body#product
    .product_container
    > .product_right
    > .product-comments-additional-info {
        order: 13;

        flex: 0 0 100%;
        width: 100%;

        margin-top: 0 !important;
        margin-bottom: 7px !important;

        padding-top: 0 !important;
        padding-left: 15px;
        padding-right: 15px;

        box-sizing: border-box;
    }


    body#product
    .product_container
    > .product_right
    > .product-comments-additional-info
    .comments-note {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

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


    body#product
    .product_container
    > .product_right
    > .product-comments-additional-info
    .link-comment {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* ========================================================
       5. OBRÁZKOVÁ ČASŤ
       ======================================================== */

    body#product
    .product_container
    > .product_left {
        order: 20;

        flex: 0 0 100%;

        float: none !important;

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

        margin-top: 0;
        margin-bottom: 5px;

        box-sizing: border-box;
    }


    /* ========================================================
       6. PRODUCT INFORMATION
       ======================================================== */

    body#product
    .product_container
    > .product_right
    > .product-information {
        order: 30;

        flex: 0 0 100%;
        width: 100%;

        padding-left: 15px;
        padding-right: 15px;

        box-sizing: border-box;
    }


    /* ========================================================
       7. KOMPAKTNÁ PRODUKTOVÁ GALÉRIA
       ======================================================== */

    body#product .product_left #content {
        margin-top: 0;
        margin-bottom: 0;

        padding-bottom: 0;
    }


    body#product
    .product_left
    .images-container {
        margin-top: 0;
        margin-bottom: 0;
    }


    /* --------------------------------------------------------
       Hlavný obrázok
       -------------------------------------------------------- */

    body#product
    .product_left
    .images-container
    .product-cover {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        height: clamp(
            200px,
            58vw,
            230px
        );

        margin: 0;
        padding: 0;

        overflow: hidden;
    }


    body#product
    .product_left
    .images-container
    .product-cover
    .js-qv-product-cover {
        display: block;

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

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

        margin: 0 auto;

        object-fit: contain;
    }


    /* ========================================================
       8. THUMBNAILS
       ======================================================== */

    body#product
    .product_left
    #thumb_box {
        margin-top: 7px;
        margin-bottom: 5px;
    }


    body#product
    .product_left
    #thumb_box
    .product-images {
        margin-bottom: 0;
    }


    body#product
    .product_left
    #thumb_box
    .thumb-container {
        margin-right: 6px;
        margin-bottom: 0;
    }


    body#product
    .product_left
    #thumb_box
    .thumb-container
    .thumb {
        width: 56px !important;
        height: 56px !important;

        max-width: 56px !important;
        max-height: 56px !important;

        padding: 2px;

        object-fit: contain;
    }


    body#product
    .product_left
    .scroll-box-arrows {
        margin-top: 0;
        margin-bottom: 0;
    }


    /* ========================================================
       9. SKRYTIE IKON POD GALÉRIOU
       ======================================================== */

    body#product
    #ticons_displayAfterProductThumbs {
        display: none !important;
    }


    /* ========================================================
       10. NÁKUPNÁ ČASŤ PRED KRÁTKYM POPISOM
       ======================================================== */

    body#product .product-information {
        display: flex;
        flex-direction: column;
    }


    body#product
    .product-information
    > .product-actions {
        order: 10;
    }


    body#product
    .product-information
    > .product_desc {
        order: 20;

        margin-top: 8px;
        margin-bottom: 10px;
    }


    /* ========================================================
       11. CENA
       ======================================================== */

    body#product
    .product-actions
    .product-prices {
        margin-top: 6px;
        margin-bottom: 6px;
    }


    body#product
    .product-actions
    .product-prices
    .product-price {
        margin-bottom: 2px;
    }


    body#product
    .product-actions
    .current-price {
        margin-bottom: 0;
    }


    body#product
    .product-actions
    .current-price
    .price {
        font-size: 22px;
        line-height: 1.25;

        font-weight: 700;
    }


    body#product
    .product-actions
    .current-price
    .price-tax-label {
        font-size: 10px;
    }


    body#product
    .product-actions
    .product-price-tax-excl {
        margin-top: 2px;
        margin-bottom: 5px;
    }


    /* ========================================================
       12. SKLADOVOSŤ
       ======================================================== */

    body#product
    .product-add-to-cart
    #product-availability {
        display: block;

        margin-top: 2px;
        margin-bottom: 7px;
    }


    /* ========================================================
       13. MNOŽSTVO + ADD TO CART
       ======================================================== */

    body#product
    .product-add-to-cart
    .product-quantity {
        margin-top: 0;
        margin-bottom: 0;
    }


    /* ========================================================
       14. TRUST STRIP
       ======================================================== */

    body#product
    .product-actions
    .product-trust-strip {
        margin-top: 12px !important;
        margin-bottom: 10px !important;

        padding-top: 12px !important;

        gap: 8px !important;
    }


    /* ========================================================
       15. PRODUCT IMAGE MODAL
       ======================================================== */

    body#product
    #product-modal.js-product-images-modal {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    /* --------------------------------------------------------
       Okno modalu
       -------------------------------------------------------- */

    body#product
    #product-modal.js-product-images-modal
    .modal-dialog {
        width:
            calc(100vw - 20px) !important;

        max-width:
            calc(100vw - 20px) !important;

        margin:
            10px auto !important;
    }


    /* --------------------------------------------------------
       Obsah modalu
       -------------------------------------------------------- */

    body#product
    #product-modal.js-product-images-modal
    .modal-content {
        position: relative;

        width: 100% !important;

        max-height:
            calc(100dvh - 20px);

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

        border-radius: 2px;

        overflow: hidden;

        background: #ffffff;
    }


    /* --------------------------------------------------------
       Modal body
       -------------------------------------------------------- */

    body#product
    #product-modal.js-product-images-modal
    .modal-body {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        max-height:
            calc(100dvh - 20px);

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

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ========================================================
       16. HLAVNÝ OBRÁZOK V MODALE
       ======================================================== */

    body#product
    #product-modal.js-product-images-modal
    .modal-body
    > figure {
        flex: 1 1 auto;

        display: flex !important;

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

        width: 100% !important;

        min-width: 0;
        min-height: 0;

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

        overflow: hidden;

        touch-action: pan-y;
    }


    body#product
    #product-modal.js-product-images-modal
    .js-modal-product-cover {
        display: block !important;

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

        max-width: 100% !important;

        max-height:
            calc(
                100dvh - 100px
            ) !important;

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

        object-fit: contain;

        user-select: none;

        -webkit-user-select: none;
        -webkit-user-drag: none;

        touch-action: pan-y;
    }


    /* ========================================================
       17. KRÁTKY POPIS V MODALE SKRYŤ
       ======================================================== */

    body#product
    #product-modal.js-product-images-modal
    .image-caption {
        display: none !important;
    }


    body#product
    #product-modal.js-product-images-modal
    #product-description-short {
        display: none !important;
    }


    /* ========================================================
       18. MODAL THUMBNAILS
       ======================================================== */

    body#product
    #product-modal.js-product-images-modal
    .js-thumbnails {
        flex: 0 0 auto;

        width: 100% !important;

        margin:
            8px 0 0 0 !important;

        padding:
            7px 0 0 0 !important;

        border-top:
            1px solid #e3e3e3;

        box-sizing: border-box;
    }


    body#product
    #product-modal.js-product-images-modal
    .js-modal-mask {
        width: 100% !important;

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

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    body#product
    #product-modal.js-product-images-modal
    .js-modal-mask::-webkit-scrollbar {
        display: none;
    }


    body#product
    #product-modal.js-product-images-modal
    .js-modal-product-images {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: max-content !important;

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

        list-style: none;
    }


    body#product
    #product-modal.js-product-images-modal
    .js-modal-product-images
    .thumb-container {
        flex: 0 0 auto;

        margin:
            0 6px 0 0 !important;

        padding: 0 !important;
    }


    body#product
    #product-modal.js-product-images-modal
    .js-modal-thumb {
        display: block;

        width: 54px !important;
        height: 54px !important;

        max-width: 54px !important;
        max-height: 54px !important;

        margin: 0 !important;

        padding:
            2px !important;

        object-fit: contain;

        box-sizing: border-box;
    }

}