/* =====================================================
   ALANQA PRODUCTS PAGE - FINAL MOBILE RESPONSIVE
   ===================================================== */

@media screen and (max-width: 800px) {

    /* Entire page */
    .products-page-body {
        overflow-x: hidden !important;
    }


    /* =========================================
       MAIN PRODUCTS LAYOUT
       ========================================= */

    .catalog-page-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

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

        gap: 24px !important;

        margin: 0 !important;

        padding: 105px 14px 40px !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       LEFT ALL PRODUCTS SIDEBAR
       ========================================= */

    .brand-sidebar {

        /* Sabse important fix */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;

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

        height: auto !important;
        max-height: 340px !important;

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

        align-self: stretch !important;

        padding: 18px 14px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        z-index: 1 !important;
    }


    .sidebar-heading {
        position: relative !important;
        z-index: 1 !important;

        margin-bottom: 15px !important;
    }


    .sidebar-heading h3 {
        font-size: 20px !important;
    }


    /* Brand rows */
    .brand-list {
        width: 100% !important;
    }


    .brand-item {
        width: 100% !important;
    }


    /* =========================================
       RIGHT PRODUCT SECTION
       ========================================= */

    .product-display {
        position: relative !important;

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

        margin: 0 !important;

        z-index: 0 !important;
    }


    /* =========================================
       PRODUCT PAGE HEADING
       ========================================= */

    .product-page-heading {
        width: 100% !important;

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


    .small-heading {
        font-size: 10px !important;
        letter-spacing: 2px !important;

        margin-bottom: 8px !important;
    }


    .product-page-heading h1 {
        font-size: clamp(25px, 7vw, 32px) !important;
        line-height: 1.15 !important;

        margin: 0 0 10px !important;

        word-break: normal !important;
    }


    .product-page-heading p {
        font-size: 13px !important;
        line-height: 1.5 !important;

        margin: 0 !important;

        max-width: 100% !important;
    }


    /* =========================================
       PRODUCT GRID
       ========================================= */

    .product-grid-layout {
        display: grid !important;

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

        width: 100% !important;

        gap: 16px !important;

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


    /* =========================================
       PRODUCT CARD
       ========================================= */

    .prod-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: auto !important;

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

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    .prod-card h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;

        margin-bottom: 10px !important;

        overflow-wrap: anywhere !important;
    }


    .prod-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;

        overflow-wrap: anywhere !important;

        margin-bottom: 18px !important;
    }


    .brand-tag {
        font-size: 10px !important;

        padding: 5px 10px !important;

        margin-bottom: 14px !important;
    }


    .stock-status {
        font-size: 12px !important;
    }


    .product-quote-btn {
        width: 100% !important;

        box-sizing: border-box !important;

        font-size: 12px !important;
    }
}


/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media screen and (max-width: 480px) {

    .catalog-page-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 20px !important;
    }

    .brand-sidebar {
        max-height: 300px !important;
        padding: 16px 12px !important;
    }

    .prod-card {
        padding: 16px !important;
    }

    .product-page-heading h1 {
        font-size: 25px !important;
    }

    .product-page-heading p {
        font-size: 12px !important;
    }
}

/* =====================================================
   PRODUCT PAGE MOBILE TOP GAP FIX
   ===================================================== */

@media screen and (max-width: 800px) {

    body.products-page-body {
        padding-top: 0 !important;

        overflow-x: hidden !important;
    }


    .catalog-page-container {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        margin: 0 !important;

        padding:
            105px
            14px
            40px !important;

        gap: 22px !important;

        box-sizing: border-box !important;
    }


    .brand-sidebar {
        position: relative !important;

        top: auto !important;

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

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    .product-display {
        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }
}