/* ============================================
   MOBILE & TABLET OVERFLOW FIX
   Prevents horizontal scroll on all screen sizes
   ============================================ */

/* ---- GLOBAL OVERFLOW PREVENTION ---- */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

*,
*::before,
*::after {
    max-width: 100vw;
}

/* Ensure all sections and containers stay within viewport - MOBILE/TABLET ONLY */
@media (max-width: 1024px) {

    section,
    .container,
    footer,
    main,
    nav,
    article,
    aside {
        max-width: 100% !important;
        /* Remove overflow-x: hidden from here as it clips specific shadows/elements */
    }
}

/* Header must allow overflow for dropdowns */
header {
    overflow: visible !important;
}

/* Reset container overflow for dropdown menus (they need visible) */
.login-dropdown-wrapper,
.search-autocomplete {
    overflow: visible !important;
}

/* ---- GOODNESS PROMISE SECTION FIX ---- */
@media (max-width: 768px) {
    .goodness-promise-section {
        padding: 40px 0 !important;
        overflow: hidden !important;
    }

    /* Hide decorative circle that overflows right side */
    .goodness-promise-section::before {
        display: none !important;
    }

    .goodness-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 0 !important;
    }

    .goodness-content {
        padding: 0 !important;
    }

    .goodness-content h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .goodness-content .main-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    .promise-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .promise-card {
        padding: 12px !important;
        border-radius: 12px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .card-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto !important;
    }

    .card-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .card-text strong {
        font-size: 13px !important;
    }

    .card-text span {
        font-size: 11px !important;
    }

    .goodness-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-shop,
    .btn-learn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Video section fix */
    .goodness-video-wrapper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .video-frame {
        border-radius: 16px !important;
        max-width: 100% !important;
    }

    .video-frame iframe {
        border-radius: 16px !important;
    }

    .video-badge {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 12px !important;
        justify-content: center !important;
    }
}

/* ---- WHY CHOOSE US SECTION FIX ---- */
@media (max-width: 768px) {
    .why-choose-section {
        overflow: hidden !important;
    }

    .why-choose-section::before,
    .why-choose-section::after {
        display: none !important;
    }

    .why-cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }
}

/* ---- PRODUCT SECTIONS FIX ---- */
@media (max-width: 768px) {

    .product-section,
    .best-sellers-section,
    .new-launches-section {
        overflow: hidden !important;
        padding: 20px 0 !important;
    }

    /* Products in 2-column grid on mobile */
    .products-row,
    .products-row.horizontal-scroll-snap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 12px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        flex-wrap: wrap !important;
    }

    .products-row .product-card,
    .products-row.horizontal-scroll-snap .product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* FIX: Make images larger on mobile */
    .product-image-wrapper {
        padding: 8px !important;
        /* Reduced from 20px */
        aspect-ratio: 1/1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .product-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* FIX: Compact product info for 2-column */
    .product-info {
        padding: 10px !important;
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        min-height: unset !important;
        height: 34px !important;
        /* Fixed height for 2 lines */
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .product-price {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    /* FIX: Compact Add to Cart button */
    .add-to-cart-btn,
    .buy-now-btn,
    .quick-add-btn {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        min-height: unset !important;
        margin-top: auto !important;
    }

    .product-rating,
    .product-usp {
        display: none !important;
        /* Hide secondary info on mobile grid to save space */
    }
}

/* ---- HERO / BANNER FIX ---- */
@media (max-width: 768px) {

    .hero-slider-section,
    .hero-slider-container,
    .hero-slides,
    .hero-slider,
    .hero-banner {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .hero-slide img {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ---- CATEGORIES SECTION FIX ---- */
@media (max-width: 768px) {

    .concern-section,
    .categories-section {
        overflow: hidden !important;
        padding: 10px 0 !important;
        /* Reduced from 30px */
    }

    .concern-flex-wrapper {
        padding: 5px 0 !important;
        /* Reduced from 10px */
    }

    .categories-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ---- REVIEWS / TESTIMONIALS SECTION FIX (PREMIUM MOBILE UI) ---- */
@media (max-width: 991px) {

    #mobile-reviews-section,
    .testimonials-section,
    .reviews-section {
        overflow: hidden !important;
        padding: 40px 0 !important;
        background: linear-gradient(180deg, #1B4332 0%, #081C15 100%) !important;
        position: relative !important;
    }

    #mobile-reviews-section::before,
    .testimonials-section::before,
    .reviews-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66-3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-4c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm64-32c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM39 20c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-28 5c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm82 17c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-53 3c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-23 48c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm50 2c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm23-10c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM94 25c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-75 67c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-7 20c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm86-10c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM28 62c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm7-33c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm51 10c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM15 48c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    .slider-viewport {
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .testimonials-slider {
        display: flex !important;
        gap: 20px !important;
        padding: 20px 0 !important;
        will-change: transform !important;
    }

    .review-card {
        flex: 0 0 85% !important;
        /* Focused centered look with peeking sides */
        max-width: 85% !important;
        background: #FDFDFD !important;
        border-radius: 28px !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: transform 0.3s ease !important;
    }

    .review-card-inner {
        padding: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .review-image-container {
        width: 100% !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #f0f0f0 !important;
        background: #fbfbfb !important;
    }

    .review-image {
        width: 100% !important;
        height: auto !important;
        max-height: 380px !important;
        object-fit: cover !important;
        display: block !important;
        image-rendering: auto !important;
    }

    .testimonial-stars {
        color: #FFD700 !important;
        font-size: 14px !important;
        display: flex !important;
        gap: 2px !important;
    }

    .testimonial-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #2D3748 !important;
        font-weight: 500 !important;
        margin: 4px 0 !important;
    }

    .testimonial-author {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 10px !important;
        padding-top: 15px !important;
        border-top: 1.5px dashed #edf2f7 !important;
    }

    .author-avatar {
        width: 44px !important;
        height: 44px !important;
        background: linear-gradient(135deg, #2D6A4F 0%, #1B4332 100%) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: white !important;
        box-shadow: 0 4px 10px rgba(45, 106, 79, 0.2) !important;
    }

    .author-info strong {
        font-size: 14px !important;
        color: #1A202C !important;
        display: block !important;
        margin-bottom: 2px !important;
    }

    .author-info span {
        font-size: 12px !important;
        color: #38A169 !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .review-dots {
        margin-top: 25px !important;
        gap: 10px !important;
    }

    .review-dot {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    .review-dot.active {
        width: 30px !important;
        background: #FBC531 !important;
        border-radius: 10px !important;
    }

    /* Hide nav arrows on mobile if they don't look good */
    .slider-nav {
        display: none !important;
    }
}


/* ---- STATS / TRUST SECTION FIX ---- */
@media (max-width: 768px) {

    .stats-section-moved,
    .stats-counter-section-moved,
    .stats-section {
        padding: 20px 0 !important;
        /* Reduced from 40px */
        background: #ffffff !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Hide the green background / pattern from stats */
    .stats-section::before,
    .stats-section::after {
        display: none !important;
    }

    .stat-item {
        border-color: rgba(0, 0, 0, 0.05) !important;
    }

    .stat-item h3,
    .stat-item .stat-number {
        color: #2D5016 !important;
        /* Dark Green */
        font-weight: 800 !important;
        font-size: 28px !important;
        /* Reduced from 36px */
        margin-bottom: 5px !important;
    }

    .stat-item p,
    .stat-item .stat-label {
        color: #4a5568 !important;
        /* Visible Grey */
        font-weight: 600 !important;
        font-size: 11px !important;
        /* Reduced from 13px */
        letter-spacing: 0.5px !important;
    }

    .stats-grid {
        gap: 10px !important;
        /* Reduced from 15px */
    }
}

/* ---- FOOTER FIX ---- */
@media (max-width: 768px) {

    footer,
    .footer,
    .site-footer {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ---- DECORATIVE PSEUDO-ELEMENTS HIDE ON MOBILE ---- */
@media (max-width: 768px) {

    /* Kill all decorative overflows from pseudo-elements */
    .goodness-promise-section::before,
    .goodness-promise-section::after,
    /* Removed reviews/testimonials from here so they keep their new styles */
    .stats-section::before,
    .stats-section::after,
    /* Force remove any fades/masks that might cause "white fade" or "blur" */
    #mobile-reviews-section::after,
    .testimonials-section::after,
    .reviews-section::after,
    .slider-container::before,
    .slider-container::after,
    .slider-viewport::before,
    .slider-viewport::after {
        background: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        display: none !important;
        backdrop-filter: none !important;
        filter: none !important;
    }
}

/* ---- FORMS & MODALS FIX ---- */
@media (max-width: 768px) {

    .login-modal,
    .pincode-popup-modal {
        max-width: 95vw !important;
        margin: 0 auto !important;
    }
}

/* ============================================
   TABLET FIXES (768px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    section,
    .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden !important;
    }

    /* Constrain overly wide elements on tablet/large mobile */
    .cart-layout {
        max-width: 900px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr 280px !important;
        /* Balanced sidebar */
        gap: 20px !important;
    }

    .order-summary {
        position: sticky !important;
        top: 20px !important;
        height: min-content !important;
    }

    /* Decorative pseudo-elements - constrain on tablet */
    .goodness-promise-section::before {
        right: -50px !important;
        width: 250px !important;
        height: 250px !important;
    }

    .goodness-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .promise-cards {
        grid-template-columns: 1fr 1fr !important;
    }

    .products-row,
    .products-row.horizontal-scroll-snap {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        padding: 0 20px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .products-row .product-card,
    .products-row.horizontal-scroll-snap .product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .review-card {
        min-width: 300px !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- VERY SMALL SCREENS (320px) ---- */
@media (max-width: 360px) {

    .promise-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .promise-card {
        padding: 10px 8px !important;
    }

    .card-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .card-text strong {
        font-size: 12px !important;
    }

    .card-text span {
        font-size: 10px !important;
    }

    .goodness-content h2 {
        font-size: 20px !important;
    }

    /* Product cards fit grid on very small screens */
    .products-row .product-card,
    .products-row.horizontal-scroll-snap .product-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ---- LOGIN PAGE FIXES (UNIVERSAL) ---- */
/* Hide center logo in login page - moved outside media query to cover all devices */
.login-page-header img,
.login-page-wrapper .login-page-header img,
.login-page-container .login-page-header img {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide header logo specifically on login page to avoid redundancy */
.login-page-wrapper~#header-placeholder .brand-logo,
.login-page-container~#header-placeholder .brand-logo {
    display: none !important;
}