/* 
 * Global Responsive Stylesheet
 * Contains media queries from Large Desktops down to Small Mobile Devices
 */

/* ==========================================================================
   XXL Devices (Larger desktops, 1400px and up)
   ========================================================================== */
@media (min-width: 1400px) {
    /* Add XXL specific styles here */
}

/* ==========================================================================
   XL Devices (Large desktops, 1200px and up)
   ========================================================================== */
@media (max-width: 1399.98px) {
    /* Add XL specific styles here */
}

/* ==========================================================================
   LG Devices (Desktops, 992px and up)
   ========================================================================== */
@media (max-width: 1199.98px) {
    /* Add LG specific styles here */
}

/* ==========================================================================
   MD Devices (Tablets, 768px and up)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Common adjustments for tablets and below */
}

/* ==========================================================================
   SM Devices (Landscape phones, 576px and up)
   ========================================================================== */
@media (max-width: 767.98px) {


    /* Carousel adjustments for mobile */
    .product-carousel,
    .tribe-carousel,
    .festive-carousel,
    .savings-carousel,
    .limited-deals-carousel {
        gap: 10px;
        padding-bottom: 1rem;
    }

    /* Arrow button adjustments to avoid overflow */
    .tribe-prev,
    .festive-prev,
    .limited-prev,
    .related-prev {
        left: 5px !important;
    }

    .tribe-next,
    .festive-next,
    .limited-next,
    .related-next {
        right: 5px !important;
    }
}

/* ==========================================================================
   XS Devices (Portrait phones, less than 576px)
   ========================================================================== */
@media (max-width: 575.98px) {

    /* Container padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Product Cards */
    .product-card {
        min-width: 160px;
    }

    .product-card .product-title {
        font-size: 0.9rem;
    }

    .product-card .price-main {
        font-size: 1rem;
    }

    /* Form Elements */
    input,
    select,
    button {
        font-size: 16px;
        /* Prevents iOS zooming on focus */
    }

    .navbar-logo-2 {
        height: 100px;
        top: -10px;
    }

    .navbar-logo {
        height: 100px;
        top: -10px;
    }

    .hero-slider {
        height: 110px;
    }

    .section-title {
        font-size: 18px;
    }

    .category-pill {
        padding: 5px 10px;
        font-size: 14px;
    }

    .product-image {
        height: 150px;
    }

    .product-price {
        font-size: 14px;
    }

    .ads-banner-box {
        height: 100px;
    }

    .ads-banner-section {
        margin: 10px 0;
    }

    .limited-deals-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .banner-grid-section {
        margin: 20px 0;
    }

    .festive-card {
        width: 226px;
        height: 337px;
    }

    .festive-section {
        margin: 20px 0;
    }

    .newsletter-images {
        justify-content: center;
    }

    .price-section {
        display: block !important;
    }

    .add-cart-btn {
        font-size: 9px;
    }

    .banner-products-carousel {
        margin-left: 0px;
    }

    .collection-title {
        font-size: 18px;
        margin-top: 10px;
    }

    .add-cart-btn-small {
        font-size: 12px;
    }

    .collection-banner {
        height: 125px;
    }

    .saving-item {
        flex: 0 0 60px;
        padding: 10px;
    }

    .savings-scroll {
        justify-content: center;
    }

    .product-price-row {
        display: grid;
        align-items: center;
    }

    .banner-box {
        height: 170px;
    }

    .gallery-main {
        width: 300px;
        height: 300px;
    }
}

/* ==========================================================================
   XXS Devices (Very small phones, less than 375px)
   ========================================================================== */
@media (max-width: 374.98px) {
    .product-card {
        min-width: 140px;
    }
}