/* ===== RESPONSIVE ===== */

/* ===== MOBILE BASE FIXES ===== */

/* iOS Safari: prevent auto-zoom on input focus (font-size must be >= 16px) */
@media (max-width: 767px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Remove 300ms tap delay on all interactive elements */
a, button, [role="button"], input, select, textarea, label {
    touch-action: manipulation;
}

/* Minimum touch target size (Apple HIG: 44px, Material: 48px) */
@media (max-width: 767px) {
    .burger-btn { display: none !important; }
    .mobile-drawer { display: none !important; }
    .mobile-drawer-overlay { display: none !important; }

    .header-icon-btn {
        min-height: 44px;
        padding: 8px 10px;
    }
    .header-search-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 40px;
    }
    .ci-qty-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    .ci-qty-num {
        line-height: 36px !important;
        min-width: 36px !important;
    }
    .btnc {
        height: 44px !important;
        font-size: 14px !important;
    }
    .btn0, .btn1 {
        min-height: 44px;
    }
    .rbtnc {
        width: 36px !important;
        height: 36px !important;
    }
    .faq-question {
        padding: 18px 16px;
        min-height: 44px;
    }
    .head2ch {
        min-height: 44px;
        padding: 0 12px;
    }
    .mobile-search-btn,
    .burger-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Slider swipe dots indicator on mobile */
@media (max-width: 767px) {
    .slider-dots {
        display: flex !important;
    }
}

@media (max-width: 1100px) {
    .cat-tiles-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .product { width: calc(33.33% - 10px); }
    .shop-sidebar { width: 190px; }
}

@media (max-width: 900px) {
    .stat-divider { display: none; }
    .why-card { min-width: 160px; }
    .testimonials-grid { flex-direction: column; align-items: center; }
    .testimonial-card { max-width: 100%; }
    .shop-layout { flex-direction: column; }
    .shop-sidebar { width: 100%; }
    .sidebar-links { display: flex; flex-wrap: wrap; }
    .sidebar-links li { flex: 0 0 auto; }
    .sidebar-links li a { border-right: 1px solid var(--border-light); border-bottom: none; }
    .product { width: calc(50% - 8px); }
    .cat-tiles-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    body { padding-top: 100px; }
    .header-search { max-width: 260px; }
    .product { width: calc(50% - 7px); }
    .cat-tiles-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .slide { height: 260px; }
    .slide-overlay { padding: 20px 24px; }
    .slide-overlay h2 { font-size: 22px; }
    .intr { flex-direction: column; }
    .intr div { width: 100% !important; }
    .cat-hero-icon { display: none; }
}

@media (max-width: 600px) {
    .header-search { display: none; }
    .product { width: 100%; }
    .cat-tiles-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .brands-list { gap: 6px; }
    .brand-chip { font-size: 11px; padding: 5px 10px; }
    .section-title { font-size: 18px; }
    .slider-btn { width: 32px; height: 32px; font-size: 18px; }
    .maxpage.head { padding: 0 12px; }
    .site-logo { font-size: 20px; }
    .stat-num { font-size: 18px; }
    .stat-label { font-size: 10px; }
    .shop-layout { padding: 0 12px; gap: 16px; }
    .hero-section { padding: 40px 20px 36px; }
    .hero-title { font-size: 34px; letter-spacing: -0.5px; }
    .hero-stat { padding: 0 14px; }
    .hero-stat-num { font-size: 20px; }
    .cat-cards-grid { grid-template-columns: 1fr; }
    .cat-card { height: 240px; }
    .hiw-steps { flex-direction: column; align-items: center; }
    .hiw-arrow { transform: rotate(90deg); margin: 0; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 42px; }
    .hero-section { padding: 52px 28px 44px; }
    .cat-cards-grid { gap: 12px; }
    .cat-card { height: 280px; }
    .hero-stat { padding: 0 16px; }
}

@media (max-width: 840px) {
    .cartpage1 { width: 70% !important; max-width: none !important; }
}

@media (max-width: 680px) {
    .cartpage1 { width: 80% !important; max-width: none !important; }
}

@media (max-width: 624px) {
    .cartpage1 { width: 90% !important; max-width: none !important; }
    #cimg { display: none !important; }
}

@media (max-width: 528px) {
    .cartpage1 { width: 100% !important; max-width: none !important; }
    .cartpage { padding: 0 !important; }
    .form2fa { transform: scale(.85); min-width: 360px; }
    .blur { padding: 0; }
}

@media (max-width: 1279px) {
    .maxpage { max-width: 1100px; }
}

/* ===== MOBILE FIXES (new components) ===== */

/* --- Hero section --- */
@media (max-width: 600px) {
    .hero-section { padding: 32px 16px 28px !important; }
    .hero-title { font-size: 28px !important; letter-spacing: -0.5px; }
    .hero-btns { flex-direction: column; width: 100%; gap: 10px; }
    .hero-btn-primary, .hero-btn-secondary { width: 100%; text-align: center; padding: 12px 20px; font-size: 14px; }
    .hero-stats { flex-wrap: wrap; justify-content: center; gap: 8px 0; }
    .hero-stat { padding: 0 12px; }
    .hero-stat-div { display: none; }
    .hero-promo { font-size: 11px; text-align: center; padding: 0 8px; }
}



/* --- Sort bar --- */
@media (max-width: 600px) {
    .sort-bar { gap: 6px; padding: 8px 0 12px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .sort-btn { font-size: 10px; padding: 4px 8px; flex-shrink: 0; min-height: 32px; }
    .sort-label { display: none; }
}

/* --- Shop sidebar on mobile --- */
@media (max-width: 900px) {
    .shop-sidebar { position: static; }
    #price-slider-min, #price-slider-max { height: 36px; }
}

/* --- Featured / Hot Deals --- */
@media (max-width: 600px) {
    .featured-section { padding: 24px 0; }
    .featured-inner { padding: 0 14px; }

    /* Header row */
    .deal-header { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .deal-title-wrap { gap: 8px; flex: 1; }
    .deal-flame { font-size: 22px; }
    .deal-badge-big { font-size: 12px; padding: 4px 10px; }
    .deal-title { font-size: 16px; }
    .deal-subtitle { font-size: 11px; }
    .deal-viewall { font-size: 12px; padding: 6px 14px; }

    /* Grid instead of horizontal scroll */
    .featured-scroll {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .featured-card {
        flex: none !important;
        width: 100% !important;
        border-radius: 10px;
    }

    .featured-card-img { height: 130px; }
    .featured-card-name { font-size: 11px; min-height: 28px; }
    .featured-card-price { font-size: 16px; }
    .feat-btn { font-size: 12px; padding: 8px 0; min-height: 36px; }
}

/* --- Cart / Checkout --- */
@media (max-width: 768px) {
    .co-card { margin: 10px 12px 0; padding: 18px 16px; }
    .co-card-header { gap: 8px; flex-wrap: wrap; }
    .co-card-title { font-size: 15px; }
    .co-fields { grid-template-columns: 1fr; gap: 12px; }
    .co-field-full { grid-column: 1; }
    .co-submit-row { flex-direction: column; align-items: stretch; }
    .co-place-btn { width: 100%; justify-content: center; }
    .co-delivery-methods { gap: 8px; }
    .co-dm { padding: 12px; }
    .co-dm-icon { font-size: 18px; }
    .order-summary-box { padding: 12px 14px; margin-top: 16px; }
    .osb-row { font-size: 12px; }
    .osb-total { font-size: 14px !important; }
    .cart-back-btn { margin: 10px 12px 4px; }
    .promo-row { flex-direction: column; gap: 8px; }
    .promo-apply-btn { height: 44px; width: 100%; }
    .promo-input { height: 44px; }
    /* Cart items on mobile */
    .ci-img-wrap { width: 54px; height: 54px; }
    .ci-name { font-size: 12px; }
    .ci-qty-btn { width: 28px; height: 28px; }
    .ci-qty-num { min-width: 28px; line-height: 28px; }
}

/* --- Recently Viewed --- */
@media (max-width: 600px) {
    .rv-grid { grid-template-columns: repeat(2, 1fr); }
    .rv-img-wrap { height: 90px; }
    .rv-name { font-size: 11px; }
}

/* --- Live search dropdown --- */
@media (max-width: 600px) {
    .ls-dropdown { border-radius: 10px; max-height: 300px; }
    .ls-item { padding: 8px 12px; gap: 8px; }
    .ls-img { width: 36px; height: 36px; }
    .ls-name { font-size: 12px; }
}

/* --- Hero section --- */
@media (max-width: 480px) {
    .hero-title { font-size: 28px; }
    .hero-stat-num { font-size: 18px; }
    .hero-stat-label { font-size: 9px; }
    .hero-stat-div { display: none; }
    .hero-promo { font-size: 12px; }
    .hero-btn-primary, .hero-btn-secondary { padding: 10px 18px; font-size: 13px; }
}

/* --- Category tiles --- */
@media (max-width: 480px) {
    .cat-cards-grid { grid-template-columns: 1fr; gap: 10px; }
    .cat-card { height: 200px; }
    .cat-card-title { font-size: 18px; }
}

/* --- Footer --- */
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* --- Brand logos row --- */
@media (max-width: 600px) {
    .brand-logos-row { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .brand-logo-card { min-width: 70px; padding: 10px 8px; }
    .brand-logo-card span { font-size: 10px; }
}

/* --- Product cards on shop page --- */
@media (max-width: 480px) {
    .product { width: 100%; }
    .primg { height: 160px; }
    .nameofp { font-size: 13px; }
    .btndiv { padding: 0 12px 12px; }
    .btnc { font-size: 13px; padding: 9px; }
}

/* --- Cat hero banner --- */
@media (max-width: 480px) {
    .cat-hero { padding: 24px 16px; }
    .cat-hero-title { font-size: 22px; }
    .cat-hero-sub { font-size: 12px; }
}

/* --- Header nav (head2) on mobile --- */
@media (max-width: 600px) {
    .head2ch { font-size: 12px; padding: 0 10px; }
    .head2-filter { padding: 0 8px; font-size: 11px; }
}

/* --- Why section cards --- */
@media (max-width: 600px) {
    .why-section .maxpage { flex-wrap: wrap; }
    .why-card { min-width: calc(50% - 8px); flex: 1; }
}

/* --- Fixed cart button --- */
@media (max-width: 480px) {
    .fixed-block { left: 12px; bottom: 12px; padding: 8px 14px; font-size: 13px; }
}

/* ===== MOBILE SIDEBAR REDESIGN ===== */
@media (max-width: 900px) {

    /* Sidebar container */
    .shop-sidebar {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Hide helper — beats all !important display rules */
    .shop-sidebar .sidebar-section-title.sb-hidden,
    .shop-sidebar .sidebar-links.sb-hidden {
        display: none !important;
    }

    /* Section title — card header, tappable */
    .shop-sidebar .sidebar-section-title {
        font-family: 'Rubik', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        text-transform: none !important;
        padding: 14px 16px !important;
        background: #fff !important;
        border: 1.5px solid var(--border) !important;
        border-radius: 10px !important;
        color: var(--text) !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        user-select: none !important;
        margin: 0 !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
        transition: border-color .2s, box-shadow .2s !important;
    }

    .shop-sidebar .sidebar-section-title:hover {
        border-color: var(--green) !important;
    }

    /* Arrow circle */
    .shop-sidebar .sidebar-section-title::after {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        background: var(--green-light);
        border-radius: 50%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300823b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-size: 16px;
        background-position: center;
        background-repeat: no-repeat;
        transition: transform 0.22s ease;
        flex-shrink: 0;
    }

    .shop-sidebar .sidebar-section-title.sb-collapsed::after {
        transform: rotate(-90deg);
    }

    /* Open state: title becomes card top */
    .shop-sidebar .sidebar-section-title:not(.sb-collapsed) {
        border-color: var(--green) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-color: var(--border-light) !important;
        box-shadow: none !important;
    }

    /* Card body — chips panel */
    .sidebar-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        overflow: hidden !important;
        max-height: 600px !important;
        opacity: 1 !important;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s !important;
        background: #fff !important;
        border: 1.5px solid var(--green) !important;
        border-top: none !important;
        border-bottom-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
        padding: 12px 14px 14px !important;
        margin-top: -2px !important;
        scrollbar-width: none !important;
    }

    .sidebar-links.sb-collapsed {
        max-height: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        border: none !important;
        margin-top: 0 !important;
        pointer-events: none !important;
    }

    /* Chip items */
    .sidebar-links li {
        flex: 0 0 auto !important;
    }

    .sidebar-links li a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 12px !important;
        border: 1.5px solid var(--border) !important;
        border-radius: 20px !important;
        background: var(--bg) !important;
        font-family: 'Rubik', sans-serif !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--text-mid) !important;
        white-space: nowrap !important;
        min-height: 34px !important;
        transition: border-color .15s, background .15s, color .15s !important;
        text-decoration: none !important;
    }

    .sidebar-links li a:hover,
    .sidebar-links li a.active,
    .sidebar-links li a[style*="font-weight:700"] {
        border-color: var(--green) !important;
        background: var(--green-light) !important;
        color: var(--green) !important;
        font-weight: 600 !important;
    }

    .sidebar-link-count {
        background: rgba(0,0,0,0.06) !important;
        border-radius: 10px !important;
        padding: 1px 6px !important;
        font-size: 10px !important;
        color: inherit !important;
        font-weight: 600 !important;
    }

    /* Promo box — hidden on mobile */
    .shop-sidebar > div[style*="margin:12px 16px"],
    .shop-sidebar > div[style*="margin: 12px 16px"] {
        display: none !important;
    }

    /* Reset button */
    #sidebar-reset {
        margin: 0 !important;
        width: 100% !important;
        border-radius: 8px !important;
    }
}