/* Products Page Styles */
.products-section { padding-top: 40px; }

/* Type Filter Tabs */
.type-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.type-tab {
    padding: 8px 14px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600;
    background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--text-secondary);
    cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.type-tab:hover { border-color: var(--primary); color: var(--text-primary); }
.type-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 10px rgba(13,148,136,0.3); }

/* Product Card Image */
.product-card-real-img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-surface); transition: transform 0.4s ease; }
.product-card:hover .product-card-real-img { transform: scale(1.08); }

/* Layout */
.products-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }

/* ============================
   FILTER SIDEBAR
   ============================ */
.filter-sidebar {
    position: sticky;
    top: 90px;
    padding: 24px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.filter-sidebar::-webkit-scrollbar { width: 4px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }
.filter-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filter-header h3 { font-size: 1.2rem; }
.filter-group { margin-bottom: 24px; }
.filter-group > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.checkbox-group, .radio-group { display: flex; flex-direction: column; gap: 8px; }
.checkbox-item, .radio-item {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 0.9rem; color: var(--text-secondary);
    padding: 6px 10px; border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.checkbox-item:hover, .radio-item:hover { background: var(--bg-glass); }
.checkbox-item input, .radio-item input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* Toggle Switch */
.toggle-label { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 8px 0; }
.toggle-label input { display: none; }
.toggle-switch {
    width: 44px; height: 24px; background: var(--bg-surface-light);
    border-radius: 12px; position: relative; transition: background var(--transition);
    flex-shrink: 0;
}
.toggle-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--text-muted); transition: all var(--transition);
}
.toggle-label input:checked + .toggle-switch { background: var(--primary); }
.toggle-label input:checked + .toggle-switch::after { left: 23px; background: #fff; }

/* Toolbar */
.products-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; padding: 12px 0;
    border-bottom: 1px solid var(--border-glass);
}
.result-count { font-size: 0.9rem; color: var(--text-secondary); }
.toolbar-right { display: flex; gap: 10px; align-items: center; }
.toolbar-right select { padding: 8px 30px 8px 12px; font-size: 0.85rem; background-color: var(--bg-surface); }
#mobileFilterBtn { display: none; }

/* ============================
   CATEGORY SECTIONS
   ============================ */
.cat-section {
    margin-bottom: 48px;
    animation: fadeUp 0.4s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.cat-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border-glass);
}
.cat-section-title { display: flex; align-items: center; gap: 14px; }
.cat-icon {
    width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cat-name { font-size: 1.25rem; font-weight: 700; margin: 0 0 2px 0; }
.cat-count { font-size: 0.8rem; color: var(--text-muted); }
.cat-view-all {
    font-size: 0.85rem; font-weight: 600; color: var(--primary);
    background: none; border: 1px solid var(--primary);
    border-radius: 20px; padding: 6px 16px; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.cat-view-all:hover { background: var(--primary); color: #fff; }

/* Products inner grid */
.products-grid-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Load More Button */
.load-more-wrap { text-align: center; margin-top: 24px; }
.btn-load-more {
    padding: 12px 36px; border-radius: 30px;
    background: transparent; border: 2px solid var(--primary);
    color: var(--primary); font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: all 0.25s;
}
.btn-load-more:hover { background: var(--primary); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,148,136,0.25); }

/* Product Card */
.product-card {
    background: var(--gradient-card); border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: all var(--transition);
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(13,148,136,0.15); border-color: rgba(13,148,136,0.3); }
.product-card-img { height: 180px; position: relative; overflow: hidden; cursor: pointer; }
.product-card-img .product-img-placeholder { height: 100%; }
.product-card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 10; }
.product-card-badges .badge { padding: 4px 10px; font-size: 0.68rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.5px; border: none; }
.product-card-badges .badge-success { background: #10b981 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); }
.product-card-badges .badge-accent { background: #f97316 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4); }
.product-card-quick { position: absolute; top: 8px; right: 8px; z-index: 1; }
.product-card-body { padding: 14px; }
.product-card-brand { font-size: 0.7rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.product-card-body h3 { font-size: 0.92rem; margin-bottom: 6px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-body .star-rating { margin-bottom: 8px; font-size: 0.75rem; }
.product-card-price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.product-card-actions { display: flex; gap: 6px; }
.product-card-actions .btn { flex: 1; font-size: 0.78rem; padding: 8px 6px; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Quick View Modal */
.qv-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.qv-details .badge { margin-bottom: 12px; }
.qv-price { margin: 12px 0; }
.qv-details p { font-size: 0.9rem; margin-bottom: 12px; }
.qv-specs-table { width: 100%; font-size: 0.85rem; }
.qv-specs-table td { padding: 6px 0; border-bottom: 1px solid var(--border-glass); }
.qv-specs-table td:first-child { color: var(--text-muted); width: 40%; }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state .btn { margin-top: 20px; }

/* Flat section (when category filter is active) */
.cat-section-flat { animation: fadeUp 0.3s ease; }

/* ============================
   RESPONSIVE — TABLET
   ============================ */
@media (max-width: 1024px) {
    .products-grid-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ============================
   RESPONSIVE — MOBILE
   ============================ */
@media (max-width: 768px) {
    .products-layout { grid-template-columns: 1fr; }

    /* Filter sidebar slides in from left — FULL HEIGHT with proper scroll */
    .filter-sidebar {
        position: fixed;
        top: 0; left: -105%;
        width: 85vw; max-width: 320px;
        height: 100dvh;           /* dynamic viewport height on mobile */
        z-index: 1500;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: left 0.3s ease;
        border-radius: 0;
        background: var(--bg-surface);
        padding: 20px 16px 40px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    }
    .filter-sidebar.active { left: 0; }
    #mobileFilterBtn { display: inline-flex; }

    /* 2-column Flipkart-style grid on mobile */
    .products-grid-inner { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Compact card on mobile */
    .product-card-img { height: 150px; }
    .product-card-body { padding: 10px; }
    .product-card-body h3 { font-size: 0.82rem; }
    .product-card-brand { font-size: 0.65rem; }
    .product-card-body .star-rating { font-size: 0.7rem; margin-bottom: 6px; }
    .product-card-price { gap: 2px; margin-bottom: 8px; }
    .price-current { font-size: 1rem; }
    .price-original { font-size: 0.72rem; }
    .product-card-actions { gap: 4px; }
    .product-card-actions .btn { font-size: 0.72rem; padding: 7px 4px; }

    /* Category section header on mobile */
    .cat-section-header { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .cat-name { font-size: 1.05rem; }
    .cat-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; }

    /* Quick view modal */
    .qv-layout { grid-template-columns: 1fr; }

    /* Make sure overlay covers filter */
    .products-section { position: relative; }
}

@media (max-width: 400px) {
    /* Very small phones: keep 2 columns but shrink a bit more */
    .products-grid-inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card-img { height: 130px; }
}