/* Main Page Mobile Grid Override */

/* MAGAZINE SLIDER & CATALOGUE SECTION */
/* Target specific Mobile Viewport */
@media (max-width: 768px) {
    /* 1. Disable Slider / Force Grid */
    /* Assuming the slider container class is .magazine-slider or similar from context */
    /* Since I don't have the exact HTML for the slider in context, I'll target the likely containers based on 'magazine' naming */

    .magazine-section .swiper-wrapper,
    .catalogue-section .swiper-wrapper,
    .magazine-slider .swiper-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 Columns */
        gap: 10px !important;
        transform: none !important;
        /* Remove swiper transform */
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        /* Side padding */
    }

    .magazine-section .swiper-slide,
    .catalogue-section .swiper-slide,
    .magazine-slider .swiper-slide {
        width: 100% !important;
        /* Reset swiper width */
        margin: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Equal Height Images */
    .magazine-card img,
    .catalogue-card img,
    .magazine-slider img {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        /* Enforce portrait aspect ratio */
        object-fit: cover !important;
        height: auto !important;
        border-radius: 4px !important;
    }

    /* Hide Swiper Controls if present */
    .swiper-pagination,
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/* Global Product Mobile Grid: 1 Column Portrait, 2 Columns Landscape */
@media (max-width: 768px) {

    /* Portrait / Default */
    .products-grid,
    #products-grid,
    body.page-modest #products-grid.products-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* Landscape - Force 1 Column as well for consistency if requested */
@media (max-width: 768px) and (orientation: landscape) {

    .products-grid,
    #products-grid,
    body.page-modest #products-grid.products-grid {
        grid-template-columns: 1fr !important;
    }
}