/* Custom Responsive CSS for Header and Layout */

/* ===== BRANDS - Desktop carousel visible, mobile grid hidden ===== */
.brands-desktop {
    display: block;
}

.brands-mobile {
    display: none;
}

/* ===== BRANDS GRID (mobile/tablet) base styles ===== */
.brands-grid-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.brand-item {
    width: 165px;
    height: 137px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.brand-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.brand-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ===== BRANDS CAROUSEL - force horizontal layout on all desktop sizes ===== */
.brands-desktop .pi-gallery .pi-gallery-item {
    float: left !important;
}

/* ===== TABLET (768px - 991px) ===== */
@media (max-width: 991px) {
    /* Show mobile grid, hide desktop carousel */
    .brands-desktop {
        display: none !important;
    }

    .brands-mobile {
        display: block !important;
    }

    /* Hide desktop menu, show mobile menu button */
    .pi-simple-menu.pi-hidden-sm {
        display: none !important;
    }

    /* Header navbar - fixed 50px for tablet */
    .pi-section-w.pi-shadow-bottom.pi-row-reducible {
        height: 50px !important;
        overflow: visible !important;
    }

    .pi-section-w .pi-section.pi-row-lg {
        height: 50px !important;
        min-height: 50px;
        padding: 0 !important;
        position: relative;
        overflow: visible !important;
        display: flex;
        align-items: center;
    }

    /* Logo sizing for tablet */
    .pi-row-block-logo a img {
        height: 40px !important;
    }

    /* Top bar adjustments */
    .pi-section-w .pi-section.pi-row-sm {
        height: auto !important;
        min-height: 30px;
        margin-top: 0 !important;
    }

    /* Phone and email in top bar - aligned left */
    .pi-row-block1.pi-row-block-txt {
        font-size: 12px;
        float: left !important;
        text-align: left;
    }

    .pi-row-block1.pi-row-block-txt strong {
        font-size: 12px;
    }

    /* Mobile menu button styling - aligned right */
    .pi-mobile-menu-toggler {
        background-color: #333 !important;
        color: #fff !important;
        border: none !important;
        padding: 8px 12px !important;
        font-size: 18px !important;
        position: absolute !important;
        right: 15px !important;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Mobile menu wrapper - open state (traditional dropdown) */
    .pi-section-menu-mobile-w.pi-menu-open {
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        z-index: 99999;
    }

    /* Mobile submenu - hidden by default, shown on toggle */
    .pi-menu-mobile ul {
        height: 0;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pi-menu-mobile ul.pi-submenu-open {
        height: auto !important;
        overflow: visible !important;
    }

    .pi-menu-mobile ul li a {
        padding-left: 40px;
    }

    /* Products menu item - flex layout for arrow */
    .pi-menu-mobile li[data-menu="products"] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .pi-menu-mobile li[data-menu="products"] > a {
        flex: 1 !important;
    }

    /* Products submenu arrow icon */
    .pi-submenu-arrow {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 50px;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        z-index: 10;
        border-left: 1px solid #2e343a;
        background: #21252b;
    }

    .pi-submenu-arrow:hover {
        background: #262b31;
        color: #609ddb;
    }

    .pi-submenu-arrow.open i {
        display: inline-block;
        transform: rotate(180deg);
    }

    /* Submenu takes full width below */
    .pi-menu-mobile li[data-menu="products"] > ul {
        width: 100%;
    }

    /* Hide search form in mobile/tablet dropdown */
    .pi-section-menu-mobile .form-inline.pi-search-form-wide {
        display: none;
    }

    /* Brands grid - tablet: centered, wrap */
    .brands-grid-inner {
        gap: 20px;
        padding: 0 30px;
    }

    .brand-item {
        width: 180px;
        height: 140px;
        padding: 15px;
    }
}

/* ===== MOBILE (max-width: 767px) ===== */
@media (max-width: 767px) {
    /* Header navbar - fixed 50px for mobile */
    .pi-section-w.pi-shadow-bottom.pi-row-reducible {
        height: 50px !important;
    }

    .pi-section-w .pi-section.pi-row-lg {
        height: 50px !important;
        min-height: 50px;
        padding: 0 !important;
    }

    /* Logo sizing for mobile */
    .pi-row-block-logo {
        margin-top: 0 !important;
    }

    .pi-row-block-logo a img {
        height: 40px !important;
        position: relative !important;
    }

    /* Top bar - stack items */
    .pi-section-w .pi-section.pi-row-sm {
        height: auto !important;
        min-height: 28px;
        margin-top: 0 !important;
        padding: 5px 0;
    }

    /* Phone block */
    .pi-row-block1.pi-row-block-txt {
        font-size: 11px;
    }

    .pi-row-block1.pi-row-block-txt strong {
        font-size: 11px;
    }

    /* Content sections - prevent horizontal overflow (exclude header) */
    .pi-section:not(.pi-row-lg) {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fixed-width containers should be fluid */
    div[style*="width: 920px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Brands grid - mobile: single column, centered */
    .brands-grid-inner {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 0 20px;
    }

    .brand-item {
        width: 200px;
        height: 140px;
        padding: 15px 25px;
    }
}

/* ===== VERY SMALL MOBILE (max-width: 479px) ===== */
@media (max-width: 479px) {
    /* Logo even smaller */
    .pi-row-block-logo a img {
        height: 45px !important;
    }

    /* Top bar social icons */
    .pi-social-icons li img {
        width: 20px;
        height: auto;
    }

    /* Phone text smaller */
    .pi-row-block1.pi-row-block-txt strong {
        font-size: 10px;
    }

    /* Brands grid - small mobile */
    .brand-item {
        width: 180px;
        height: 130px;
        padding: 12px 20px;
    }
}