/**
 * Mobile Responsive Styles for Homepage
 * Makes homepage full-width on mobile devices
 * Desktop version remains unchanged
 */

/* Mobile-only styles (max-width: 767px) */
@media (max-width: 767px) {

    /* NUCLEAR OPTION: Override ALL padding classes */
    .px-4,
    .px-3,
    .px-2,
    .px-1,
    [class*="px-"],
    [class*="padding"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Remove ALL padding and margins from body and html */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100vw !important;
    }

    /* Ultra-aggressive: Force full viewport width with position */
    .page-wrapper,
    .page-main,
    .container,
    .header__container,
    .footer__container,
    .columns,
    .column.main,
    .main-content,
    .content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Catch any remaining containers/wrappers */
    div[class*="container"],
    div[class*="wrapper"],
    section[class*="container"],
    section[class*="wrapper"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    /* Full-width sections on homepage */
    .cms-index-index .page-main,
    .cms-index-index .page-wrapper,
    .cms-index-index .container,
    .cms-index-index .columns,
    .cms-index-index .column.main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Mageplaza Banner Slider - Full Width */
    #mageplaza-bannerslider-block-before-content-1,
    .splide,
    .splide__track,
    .splide__list,
    .splide__slide {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .splide__slide img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Banner Manager - Full Width */
    .banner-manager-container,
    .banner,
    .banner-1-1col,
    .banner-2-col,
    .banner-3-col,
    .banner__item {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .banner img,
    .banner picture,
    .banner picture img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Category Slider - Full Width */
    .category-slider,
    .category-slider__container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Brand Slider - Full Width */
    .brand-slider,
    .brand-slider .category-slider__container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Product Slider - Full Width */
    .slider-page,
    .product-slider,
    .hooper-list,
    .hooper-track {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Page Titles - Add minimal padding for readability */
    .page__row-title,
    .wordpress__header-title {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Content sections with some padding for readability */
    .cms-content,
    .page-title-wrapper,
    .block-static-block {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Remove max-width constraints */
    .page-layout-1column .page-main,
    .page-layout-2columns-left .page-main,
    .page-layout-2columns-right .page-main,
    .page-layout-3columns .page-main {
        max-width: 100% !important;
    }

    /* Full-width images */
    .cms-index-index img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Header adjustments for mobile - keep some padding */
    .header__main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Footer adjustments for mobile */
    .footer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Top bar adjustments */
    .top-bar__wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Ensure sliders can scroll properly */
    .category-slider__track,
    .hooper-track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Tablet styles (768px - 1023px) - Keep some padding */
@media (min-width: 768px) and (max-width: 1023px) {

    .page-wrapper,
    .page-main,
    .container,
    .columns,
    .column.main {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .banner,
    .category-slider,
    .product-slider,
    .brand-slider {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Ensure desktop (1024px+) is not affected */
@media (min-width: 1024px) {
    /* Desktop styles remain unchanged - no overrides */
}