/* ============================================================
   SUNLITE STORE – GLOBAL MOBILE RESPONSIVENESS FIXES
   ============================================================ */

/* --- Global overflow protection --- */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
@media (max-width: 767px) {
    .category-page-header {
        padding: 25px 20px !important;
        border-radius: 16px !important;
        margin-bottom: 20px !important;
    }
    .category-page-title {
        font-size: 24px !important;
        letter-spacing: -0.3px !important;
    }
    .category-subtitle {
        font-size: 14px !important;
        margin-top: 6px !important;
    }
    .subcategory-heading {
        font-size: 18px !important;
        margin-top: 20px !important;
        margin-bottom: 15px !important;
    }
    /* Offer countdown timer */
    .category-offer-banner {
        padding: 18px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .cat-countdown {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* Category product image padding — tight in 2-col mobile grid */
@media (max-width: 575px) {
    .modern-img-wrap {
        padding: 15px !important;
    }
    .modern-img-wrap img {
        height: 130px !important;
    }
    .modern-card-body {
        padding: 12px !important;
    }
    .modern-title {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    .modern-price-sell {
        font-size: 16px !important;
    }
    .modern-price-mrp {
        font-size: 11px !important;
    }
    .modern-cart-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
    }
}

/* Disable hover lift on touch devices */
@media (max-width: 767px) {
    .modern-product-card:hover {
        transform: none !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
        border-color: var(--border-soft, #e2e8f0) !important;
    }
    .modern-product-card:hover .modern-img-wrap img {
        transform: none !important;
    }
}

/* ============================================================
   SHOP PAGE — FILTER SIDEBAR MOBILE TOGGLE
   ============================================================ */
@media (max-width: 991px) {
    .sidebar-filter {
        display: none;
        margin-bottom: 20px;
    }
    .sidebar-filter.filter-open {
        display: block;
    }
    /* Mobile filter toggle button */
    .btn-mobile-filter-toggle {
        display: flex !important;
    }
}
@media (min-width: 992px) {
    .btn-mobile-filter-toggle {
        display: none !important;
    }
    .sidebar-filter {
        display: block !important;
    }
}

/* Shop page bottom controls bar */
@media (max-width: 767px) {
    .shop-bottom-controls {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .custom-pagination {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px;
    }
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
@media (max-width: 575px) {
    .stepper {
        gap: 20px !important;
        padding: 0 5px !important;
    }
    .step-circle {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
    .step-text {
        font-size: 11px !important;
    }
    .checkout-card {
        padding: 20px 15px !important;
    }
    .checkout-section {
        padding: 25px 0 50px 0 !important;
    }
    .summary-box {
        position: static !important;
    }
    .summary-total {
        font-size: 18px !important;
    }
}

/* ============================================================
   CART PAGE
   ============================================================ */
@media (max-width: 767px) {
    .cart-actions {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .ui-box {
        padding: 20px 15px !important;
        border-radius: 8px !important;
    }
    .trust-icons-wrapper {
        gap: 15px !important;
        padding: 20px 10px 5px !important;
    }
    .trust-item {
        font-size: 12px !important;
    }
    .trust-item i {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
@media (max-width: 767px) {
    .product-title {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    .price-current {
        font-size: 22px !important;
    }
    .tab-box {
        padding: 20px 15px !important;
    }
    /* Make tabs horizontally scrollable on mobile */
    .custom-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding: 0 15px !important;
        gap: 0 !important;
        display: flex !important;
    }
    .custom-tabs::-webkit-scrollbar {
        display: none;
    }
    .custom-tabs .nav-link {
        flex-shrink: 0 !important;
    }
    .fbt-wrapper {
        padding: 15px !important;
    }
    .tabs-section {
        margin-bottom: 30px !important;
    }
    .trust-row {
        padding: 12px 15px !important;
    }
    /* Action buttons: stack on narrow screens */
    .qty-row {
        flex-wrap: wrap !important;
    }
    .btn-b2b {
        min-width: 0 !important;
    }
}

/* ============================================================
   HOMEPAGE
   ============================================================ */
@media (max-width: 767px) {
    /* Features banner */
    .features-banner {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 15px !important;
    }
    /* Counter section header */
    .counter-section-header {
        margin-bottom: 20px !important;
    }
    /* Promo card in footer pre-section */
    .modern-promo-card {
        min-height: 280px !important;
    }
    /* Popular category search buttons wrap */
    .button-group {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .category-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 767px) {
    .premium-list-section {
        padding: 25px 0 !important;
    }
    .list-column-header {
        font-size: 15px !important;
        margin-bottom: 15px !important;
    }
    .footer-links-wrapper {
        padding: 35px 0 15px 0 !important;
    }
    .footer-title {
        font-size: 14px !important;
        margin-bottom: 18px !important;
    }
    .payment-icons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        margin-top: 15px !important;
    }
    .payment-icons img {
        margin-left: 0 !important;
    }
    .footer-bottom > .container > .d-md-flex {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* Compare bar stacking on mobile */
@media (max-width: 575px) {
    #compare-bar .container {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
}

/* Scroll-to-top button on very small screens */
@media (max-width: 575px) {
    .custom-scroll-top {
        bottom: 15px !important;
        right: 15px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   ACCOUNT PAGES (ORDERS / PROFILE / DASHBOARD)
   ============================================================ */
@media (max-width: 480px) {
    .account-sidebar {
        padding: 20px 15px !important;
    }
    .account-sidebar a {
        flex: 1 1 calc(50% - 8px) !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .account-sidebar a i {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }
}

/* ============================================================
   SEARCH RESULT PAGE
   ============================================================ */
@media (max-width: 767px) {
    .search-zero-result {
        padding: 40px 15px !important;
        margin: 15px auto !important;
    }
    .search-zero-result .zero-icon {
        font-size: 45px !important;
    }
    .search-zero-result h3 {
        font-size: 18px !important;
    }
    .search-zero-result .tip-list {
        padding: 12px 16px !important;
    }
}

/* ============================================================
   GENERAL UTILITY FIXES
   ============================================================ */
/* Tables that can cause overflow (e.g., order detail, product specs) */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Exception: don't apply to explicitly stacked tables */
    .table-responsive table {
        display: table;
        overflow-x: visible;
        white-space: normal;
    }
}

/* ============================================================
   VIEW ORDER PAGE
   ============================================================ */
@media (max-width: 767px) {
    .order-header {
        padding: 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .order-header h2 { font-size: 18px !important; }
    .order-body { padding: 20px !important; }
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 25px !important;
    }
    .items-table th, .items-table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    .order-container {
        border-radius: 12px !important;
    }
}

/* ============================================================
   DASHBOARD PAGE
   ============================================================ */
@media (max-width: 992px) {
    .dashboard-container {
        flex-direction: column !important;
    }
    .dashboard-container .account-sidebar {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 20px 15px !important;
    }
}

/* ============================================================
   LOGIN / REGISTER PAGES
   ============================================================ */
@media (max-width: 575px) {
    .login-card {
        padding: 30px 20px !important;
        border-radius: 16px !important;
    }
    .login-wrapper {
        padding: 30px 15px !important;
        align-items: flex-start !important;
    }
    /* Register page */
    .register-card {
        padding: 30px 20px !important;
        border-radius: 16px !important;
    }
    .register-wrapper {
        padding: 30px 15px !important;
    }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
@media (max-width: 992px) {
    .profile-container {
        flex-direction: column !important;
    }
    .profile-container .account-sidebar {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ============================================================
   WISH LIST PAGE
   ============================================================ */
@media (max-width: 575px) {
    .wishlist-product-img {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
@media (max-width: 767px) {
    .search-page-title {
        font-size: 22px !important;
    }
    .search-page-header {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
    .search-keyword-text {
        font-size: 14px !important;
    }
}

/* ============================================================
   HOMEPAGE — NAV TABS (Featured / Top Rated / On Sale)
   ============================================================ */
@media (max-width: 575px) {
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 1px solid #dee2e6 !important;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}