/* ============================================
   FLIPKART MOBILE HOMEPAGE STYLING
   Exact replication of m.flipkart.com mobile view
   Desktop view is NOT affected - mobile only
   ============================================ */

@media (max-width: 768px) {
    /* ============================================
       PRODUCT GRID LAYOUT - 3 COLUMNS
       ULTRA HIGH SPECIFICITY - OVERRIDES EVERYTHING
       ============================================ */

    /* Target ALL possible product grid variations */
    html body.homepage .products-grid,
    body.homepage .products-grid,
    html body.homepage main .products-grid,
    body.homepage main .products-grid,
    html body.homepage .featured-section .products-grid,
    body.homepage .featured-section .products-grid,
    html body.homepage .products-section .products-grid,
    body.homepage .products-section .products-grid,
    html body.homepage section .products-grid,
    body.homepage section .products-grid,
    html body.homepage div .products-grid,
    body.homepage div .products-grid,
    .homepage .products-grid,
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* Force 2 columns */
        gap: 0 !important;
        /* ZERO GAP */
        padding: 0 !important;
        /* ZERO PADDING */
        margin-bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ============================================
       PRODUCT CARD STYLING - COMPACT
       ============================================ */

    html body.homepage .product-card,
    body.homepage .product-card,
    .homepage .product-card,
    .product-card {
        background: #FFFFFF !important;
        border: 1px solid #f0f0f0 !important;
        /* Lighter border */
        border-radius: 0 !important;
        /* Square corners */
        box-shadow: none !important;
        overflow: hidden !important;
        transition: none !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ... (hover styles remain same) ... */

    html body.homepage .product-card:hover,
    body.homepage .product-card:hover,
    html body.homepage .product-card:active,
    body.homepage .product-card:active {
        box-shadow: none !important;
        transform: none !important;
        border-color: #E0E0E0 !important;
    }

    /* ============================================
       PRODUCT IMAGE DISPLAY
       ============================================ */

    body.homepage .product-image {
        aspect-ratio: 4 / 5 !important;
        height: auto !important;
        padding: 12px 12px 0 12px !important;
        /* Top padding for image */
        background: #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* ... (img styles) ... */

    body.homepage .product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    /* ============================================
       PRODUCT INFO & TEXT
       ============================================ */

    body.homepage .product-info {
        padding: 8px 12px 12px 12px !important;
        /* Better padding */
        background: #FFFFFF !important;
    }

    body.homepage .product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        color: #212121 !important;
        font-weight: 400 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 4px !important;
        height: 52px !important;
        /* Fixed height for 3 lines */
        max-height: 52px !important;
    }

    /* ============================================
       PRICING & OFFERS - FLIPKART STYLE
       ============================================ */

    body.homepage .price-section {
        margin-bottom: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    /* Original price - strikethrough, shown first */
    body.homepage .price-original {
        font-size: 10px !important;
        color: #878787 !important;
        text-decoration: line-through !important;
        order: 1 !important;
        line-height: 1.2 !important;
    }

    /* Current price - bold, shown second */
    body.homepage .price-current {
        font-size: 14px !important;
        color: #212121 !important;
        font-weight: 700 !important;
        order: 2 !important;
        line-height: 1.2 !important;
    }

    /* Discount badge - green, shown third */
    body.homepage .discount-badge {
        font-size: 10px !important;
        color: #388E3C !important;
        font-weight: 600 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        order: 3 !important;
        display: none !important;
        /* Hide discount badge, not shown in Flipkart */
    }

    /* "Buy at" price styling - blue, prominent */
    body.homepage .product-buy-price,
    body.homepage .buy-price {
        font-size: 12px !important;
        color: #2874F0 !important;
        font-weight: 600 !important;
        margin-top: 2px !important;
        order: 4 !important;
    }

    /* ============================================
       RATING BADGE - TOP LEFT OF IMAGE
       ============================================ */

    body.homepage .product-rating {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        font-size: 10px !important;
        padding: 2px 5px !important;
        background: #388E3C !important;
        color: white !important;
        border-radius: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        z-index: 1 !important;
        font-weight: 600 !important;
    }

    body.homepage .product-rating i {
        font-size: 8px !important;
    }

    /* Hide full-width rating banner (old style) */
    /* Hide full-width rating banner (old style) */
    html body.homepage .product-card .rating-banner,
    body.homepage .product-card .rating-banner,
    html body.homepage .rating-banner,
    body.homepage .rating-banner,
    .rating-banner {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* ============================================
       SECTION HEADERS WITH VIEW ALL BUTTON
       ============================================ */

    body.homepage .section-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 8px !important;
        margin-bottom: 8px !important;
        background: linear-gradient(to bottom, #E8F0FE 0%, #FFFFFF 100%) !important;
    }

    body.homepage .section-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #212121 !important;
        margin: 0 !important;
    }

    body.homepage .view-all-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #2874F0 !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    body.homepage .view-all-btn i {
        font-size: 14px !important;
    }

    /* ============================================
       PRODUCT SECTIONS SPACING
       ============================================ */

    /* Reset container spacing inside sections */
    body.homepage .container,
    body.homepage .featured-section .container,
    body.homepage .products-section .container,
    body.homepage .section-wrapper .container {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Minimal divider between sections */
    body.homepage .featured-section,
    body.homepage .products-section,
    body.homepage .section-wrapper {
        margin-bottom: 0 !important;
        /* No white space */
        padding: 0 !important;
        background: #F1F3F6 !important;
        /* Grey divider color */
        padding-bottom: 4px !important;
        /* Height of the divider */
        margin-top: 0 !important;
    }

    body.homepage .banner-section {
        margin-bottom: 4px !important;
        padding: 0 !important;
        background: #F1F3F6 !important;
        padding-bottom: 4px !important;
    }

    body.homepage .banner-container {
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    body.homepage .banner-container img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* ============================================
       PRODUCT RATING BADGE
       ============================================ */

    body.homepage .product-rating {
        font-size: 11px !important;
        padding: 4px 8px !important;
        background: #388E3C !important;
        color: white !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    body.homepage .product-rating i {
        font-size: 10px !important;
    }

    /* ============================================
       REMOVE DESKTOP EFFECTS
       ============================================ */

    body.homepage .product-card::before,
    body.homepage .product-card::after {
        display: none !important;
    }

    body.homepage .product-card:hover::before,
    body.homepage .product-card:hover::after {
        display: none !important;
    }

    /* ============================================
       CATEGORY ICONS (if present)
       ============================================ */

    body.homepage .homepage-categories-nav {
        display: none !important;
    }

    body.homepage .homepage-categories-container {
        padding: 0 8px !important;
        gap: 12px !important;
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.homepage .homepage-categories-container::-webkit-scrollbar {
        display: none !important;
    }

    body.homepage .homepage-category-item {
        min-width: 70px !important;
        max-width: 70px !important;
        flex-shrink: 0 !important;
        text-align: center !important;
        padding: 8px 4px !important;
    }

    body.homepage .homepage-category-icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 6px auto !important;
        border-radius: 12px !important;
        background: #F8F8F8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.homepage .homepage-category-icon-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    body.homepage .homepage-category-name {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #212121 !important;
        line-height: 1.2 !important;
        margin-top: 4px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ============================================
       EDGE-TO-EDGE SECTIONS
       ============================================ */

    body.homepage .edge-to-edge {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.homepage .edge-to-edge .products-grid {
        padding: 0 8px !important;
    }
}

/* ============================================
   SMALL MOBILE ADJUSTMENTS (480px and below)
   ============================================ */

@media (max-width: 480px) {
    body.homepage .products-grid {
        gap: 8px !important;
        padding: 0 6px !important;
    }

    body.homepage .product-image {
        padding: 10px !important;
    }

    body.homepage .product-info {
        padding: 10px !important;
    }

    body.homepage .product-title {
        font-size: 12px !important;
    }

    body.homepage .section-header {
        padding: 10px 6px !important;
    }

    body.homepage .section-title {
        font-size: 15px !important;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (360px and below)
   ============================================ */

@media (max-width: 360px) {
    body.homepage .products-grid {
        gap: 6px !important;
        padding: 0 4px !important;
    }

    body.homepage .product-image {
        padding: 8px !important;
    }

    body.homepage .product-info {
        padding: 8px !important;
    }

    body.homepage .product-title {
        font-size: 11px !important;
    }

    body.homepage .price-current {
        font-size: 13px !important;
    }

    body.homepage .section-title {
        font-size: 14px !important;
    }

    body.homepage .view-all-btn {
        width: 28px !important;
        height: 28px !important;
    }

    body.homepage .promo-image {
        width: 80px !important;
        height: 80px !important;
        flex-shrink: 0 !important;
    }

    body.homepage .promo-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* ============================================
       HERO SLIDER / PROMOTIONAL BANNERS - MOBILE
       ============================================ */

    body.homepage .hero-slider {
        padding: 0 8px !important;
        margin-bottom: 12px !important;
        height: auto !important;
    }

    body.homepage .hero-slide {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    body.homepage .hero-slide img {
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Hide hero slider navigation arrows on mobile */
    body.homepage .hero-slider .hero-arrow-prev,
    body.homepage .hero-slider .hero-arrow-next {
        display: none !important;
    }

    /* ============================================
       CATEGORY ICONS - COLORFUL BACKGROUNDS
       ============================================ */

    body.homepage .homepage-category-item:nth-child(1) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    }

    body.homepage .homepage-category-item:nth-child(2) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%) !important;
    }

    body.homepage .homepage-category-item:nth-child(3) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #4FC3F7 0%, #2196F3 100%) !important;
    }

    body.homepage .homepage-category-item:nth-child(4) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%) !important;
    }

    body.homepage .homepage-category-item:nth-child(5) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%) !important;
    }

    body.homepage .homepage-category-item:nth-child(6) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #BA68C8 0%, #9C27B0 100%) !important;
    }

    body.homepage .homepage-category-item:nth-child(7) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #F06292 0%, #E91E63 100%) !important;
    }

    body.homepage .homepage-category-item:nth-child(8) .homepage-category-icon-wrapper {
        background: linear-gradient(135deg, #4DD0E1 0%, #00BCD4 100%) !important;
    }

    /* ============================================
       PRODUCT CAROUSEL - HORIZONTAL SCROLL
       ============================================ */

    body.homepage .product-carousel-scroll {
        display: flex !important;
        background: #FFFFFF !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
    }

    body.homepage .product-carousel-scroll::-webkit-scrollbar {
        display: none !important;
    }

    body.homepage .product-carousel-scroll>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
        scroll-snap-align: start;
        display: flex !important;
    }

    body.homepage .product-carousel-scroll .product-card {
        min-width: auto !important;
        max-width: none !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: 1px solid #f0f0f0 !important;
        border-right: none !important;
        /* Avoid double borders */
        margin: 0 !important;
    }

    body.homepage .product-carousel-scroll>div:last-child .product-card {
        border-right: 1px solid #f0f0f0 !important;
    }

    /* Hide carousel arrows on mobile */
    body.homepage .carousel-btn {
        display: none !important;
    }

    /* ============================================
       HIDE FOOTER SECTIONS ON MOBILE
       ============================================ */

    body.homepage .seo-footer-section,
    body.homepage .footer,
    body.homepage footer {
        display: none !important;
    }
}