/* ============================================
   RESPONSIVE CSS - Multi-Device Compatibility
   ============================================ */

/* Base: Prevent horizontal overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

* {
    box-sizing: border-box;
}

/* Ensure all containers respect viewport */
.container, .container-fluid {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Responsive Images */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================
   HERO SLIDES - Responsive
   ============================================ */
/* Desktop - Keep original size */
#hero-slider-container,
.hero-slider-responsive {
    width: 780px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}

#hero-slider-container .carousel-inner,
.hero-carousel-inner {
    width: 780px;
    height: 300px;
}

#hero-slider-container .carousel-inner .carousel-item,
.hero-carousel-item {
    width: 780px;
    height: 300px;
}

#hero-slider-container .carousel-inner img,
.hero-slide-image {
    width: 780px;
    height: 300px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* Tablet - Responsive */
@media (max-width: 768px) {
    #hero-slider-container,
    .hero-slider-responsive {
        width: 100% !important;
        max-width: 100% !important;
        height: 250px !important;
    }
    
    #hero-slider-container .carousel-inner,
    .hero-carousel-inner {
        width: 100% !important;
        height: 250px !important;
    }
    
    #hero-slider-container .carousel-inner .carousel-item,
    .hero-carousel-item {
        width: 100% !important;
        height: 250px !important;
    }
    
    #hero-slider-container .carousel-inner img,
    .hero-slide-image {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important;
    }
}

/* Mobile - Responsive */
@media (max-width: 576px) {
    #hero-slider-container,
    .hero-slider-responsive {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important;
    }
    
    #hero-slider-container .carousel-inner,
    .hero-carousel-inner {
        width: 100% !important;
        height: 200px !important;
    }
    
    #hero-slider-container .carousel-inner .carousel-item,
    .hero-carousel-item {
        width: 100% !important;
        height: 200px !important;
    }
    
    #hero-slider-container .carousel-inner img,
    .hero-slide-image {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
}

/* ============================================
   PRODUCT NEWS SECTION - Responsive
   ============================================ */
.product-news-container {
    width: 100% !important;
    height: 300px !important;
    margin: 0 auto !important;
    overflow: hidden;
}

/* ============================================
   BANNERS - Responsive
   ============================================ */
.banner-image-responsive {
    width: 500px !important;
    height: 200px !important;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* ============================================
   CATEGORY ITEMS - Responsive
   ============================================ */
.category-item {
    max-width: 100% !important;
    width: 100% !important;
}

.category-img {
    width: 100% !important;
    max-width: 300px !important;
}

.category-img img {
    width: 100% !important;
    height: auto !important;
}

/* ============================================
   PRODUCT CARDS - Responsive
   ============================================ */
.product-card {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
}

.product-card img {
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    object-fit: cover;
}

/* Category page product cards */
.category-page .product-card {
    max-width: 300px;
}

.category-page .product-image {
    width: 100%;
    max-width: 300px;
}

/* ============================================
   HEADER - Responsive
   ============================================ */
.header__top__left,
.header__top__right {
    font-size: 14px;
}

.header__top__left img {
    max-width: 100%;
    height: auto;
}

/* Fix Bootstrap column typos */
.col.lg-3,
.col.lg-4,
.col.lg-8 {
    padding: 0 15px;
}

/* Search form responsive */
.input-group {
    flex-wrap: nowrap;
}

.input-group .form-control {
    min-width: 0;
}

.input-group .form-select {
    min-width: 120px;
}

/* ============================================
   FOOTER - Responsive
   ============================================ */
.quick-links-list {
    font-size: 14px;
}

.footer-column {
    margin-bottom: 20px;
}

/* Newsletter form responsive */
#newsletterForm .form-control {
    width: 100%;
}

/* Order tracking form responsive */
.order-tracking-form .form-control {
    width: 100%;
}

/* ============================================
   MEDIA QUERIES
   ============================================ */

/* Large Desktops (1200px and up) */
@media (min-width: 1200px) {
    #hero-slider-container {
        width: 780px !important;
        height: 300px !important;
    }
    
    #hero-slider-container .carousel-inner {
        width: 780px !important;
        height: 300px !important;
    }
    
    #hero-slider-container .carousel-inner img {
        width: 780px !important;
        height: 300px !important;
    }
    
    .product-news-container {
        height: 300px !important;
    }
    
    .banner-image-responsive {
        width: 500px !important;
        height: 200px !important;
    }
}

/* Desktops (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #hero-slider-container {
        width: 780px !important;
        height: 300px !important;
    }
    
    #hero-slider-container .carousel-inner {
        width: 780px !important;
        height: 300px !important;
    }
    
    #hero-slider-container .carousel-inner img {
        width: 780px !important;
        height: 300px !important;
    }
    
    .product-news-container {
        height: 300px !important;
    }
    
    .banner-image-responsive {
        width: 500px !important;
        height: 200px !important;
    }
}

/* Tablets (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #hero-slider-container {
        max-width: 100%;
    }
    
    .product-news-container {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .banner-image-responsive {
        width: 500px !important;
        height: 200px !important;
        max-width: 100%;
    }
    
    .category-item {
        max-width: 300px;
        margin: 10px auto;
    }
    
    .header__top__left,
    .header__top__right {
        font-size: 12px;
    }
}

/* Small Tablets and Large Phones (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    #hero-slider-container {
        max-width: 100%;
        min-height: 250px;
    }
    
    #hero-slider-container .carousel-inner img {
        min-height: 250px;
    }
    
    .product-news-container {
        max-width: 100%;
        margin-bottom: 20px;
        height: 300px;
    }
    
    .banner-image-responsive {
        width: 100% !important;
        max-width: 500px !important;
        height: auto !important;
        aspect-ratio: 2.5 / 1;
    }
    
    .category-item {
        max-width: 280px;
        margin: 10px auto;
    }
    
    .header__top__left,
    .header__top__right {
        font-size: 11px;
    }
    
    .header__top__left img {
        width: 100px !important;
        height: auto !important;
    }
}

/* Mobile Phones (up to 575px) */
@media (max-width: 575px) {
    #hero-slider-container {
        max-width: 100%;
        min-height: 200px;
    }
    
    #hero-slider-container .carousel-inner img {
        min-height: 200px;
    }
    
    .product-news-container {
        max-width: 100%;
        margin-bottom: 20px;
        height: 280px;
    }
    
    .banner-image-responsive {
        width: 100% !important;
        max-width: 500px !important;
        height: auto !important;
        aspect-ratio: 2.5 / 1;
    }
    
    .category-item {
        max-width: 100%;
        margin: 10px 0;
    }
    
    .category-img {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .header__top__left,
    .header__top__right {
        font-size: 10px;
        padding: 5px 0;
    }
    
    .header__top__left img {
        width: 80px !important;
        height: auto !important;
    }
    
    .header__top__left a,
    .header__top__right a {
        font-size: 10px;
        padding: 2px;
    }
    
    /* Stack footer columns on mobile */
    .footer-column {
        margin-bottom: 20px;
    }
    
    /* Adjust product cards */
    .product-card {
        margin-bottom: 15px;
    }
    
    /* Hide carousel controls on very small screens */
    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
}

/* Extra Small Phones (up to 375px) */
@media (max-width: 375px) {
    #hero-slider-container {
        min-height: 180px;
    }
    
    #hero-slider-container .carousel-inner img {
        min-height: 180px;
    }
    
    .product-news-container {
        height: 250px;
    }
    
    .banner-image-responsive {
        width: 100% !important;
        max-width: 500px !important;
        height: auto !important;
        aspect-ratio: 2.5 / 1;
    }
    
    .header__top__left,
    .header__top__right {
        font-size: 9px;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    #hero-slider-container {
        min-height: 200px;
    }
    
    #hero-slider-container .carousel-inner img {
        min-height: 200px;
    }
}