/* ═══════════════════════════════════════════════════════ SHOP PAGE — Premium Filter UI shop.css | Loaded via from app/views/layout/header.php ═══════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ CATEGORY MEGA BAR ══════════════════════════════════════════════════════ */ .cat-mega-bar { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 0 14px; margin-bottom: 4px; } .cat-chip { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #e2e8f0; border-radius: 24px; padding: 6px 13px; text-decoration: none; font-size: .8rem; font-weight: 600; color: #475569; background: #fff; transition: all .15s; white-space: nowrap; line-height: 1.4; } .cat-chip:hover { border-color: #4f46e5; color: #4f46e5; background: rgba(79,70,229,.06); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(79,70,229,.12); } .cat-chip--active { border-color: #4f46e5 !important; background: linear-gradient(135deg,rgba(79,70,229,.12),rgba(124,58,237,.08)); color: #4f46e5 !important; font-weight: 700; box-shadow: 0 2px 10px rgba(79,70,229,.18); } .cat-chip-count { font-size: .65rem; opacity: .72; font-weight: 700; background: rgba(0,0,0,.06); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; line-height: 1.7; } .cat-chip--active .cat-chip-count { background: rgba(79,70,229,.15); } /* ══════════════════════════════════════════════════════ TOP BRAND SCROLL BAR ══════════════════════════════════════════════════════ */ .brand-topbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px; padding: 8px 14px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .btb-filter-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 10px; background: linear-gradient(135deg,#4f46e5,#7c3aed); border: none; color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; position: relative; transition: .2s; } .btb-filter-btn:hover { background: linear-gradient(135deg,#4338ca,#6d28d9); } .btb-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #f97316; border: 1.5px solid #fff; } .btb-scroll { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 2px 0; } .btb-scroll::-webkit-scrollbar { display: none; } .btb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 999px; background: #f1f5f9; border: 1.5px solid transparent; font-size: .78rem; font-weight: 600; color: #374151; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: .15s; } .btb-chip:hover { border-color: #4f46e5; color: #4f46e5; background: rgba(79,70,229,.06); } .btb-chip.btb-active { border-color: #4f46e5; background: rgba(79,70,229,.09); color: #4f46e5; font-weight: 700; } .btb-logo { height: 14px; max-width: 44px; object-fit: contain; vertical-align: middle; } /* ══════════════════════════════════════════════════════ BRAND LOGO GRID (3 columns in sidebar) ══════════════════════════════════════════════════════ */ .brand-logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .blg-item { cursor: pointer; border: 1.5px solid rgba(0,0,0,.09); border-radius: 10px; padding: 8px 4px 7px; background: #fff; transition: all .18s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 58px; text-align: center; } .blg-item input[type="radio"] { display: none; } .blg-item:hover { border-color: #4f46e5; background: rgba(79,70,229,.04); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.12); } .blg-item.active { border-color: #4f46e5; background: rgba(79,70,229,.07); box-shadow: 0 0 0 1.5px rgba(79,70,229,.3), 0 4px 12px rgba(79,70,229,.1); } .blg-logo { max-width: 66px; max-height: 26px; object-fit: contain; } .blg-name { font-size: .64rem; font-weight: 700; color: #64748b; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; } .blg-item.active .blg-name { color: #4f46e5; } /* ══════════════════════════════════════════════════════ MEGA CATEGORY LIST (sidebar) ══════════════════════════════════════════════════════ */ .mega-cat-list { display: flex; flex-direction: column; gap: 2px; } .mcat-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; transition: .15s; border: 1.5px solid transparent; background: transparent; } .mcat-item input[type="radio"] { display: none; } .mcat-item:hover { background: rgba(79,70,229,.05); border-color: rgba(79,70,229,.15); } .mcat-item.active { background: rgba(79,70,229,.09); border-color: rgba(79,70,229,.28); } .mcat-icon { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; } .mcat-name { flex: 1; font-size: .85rem; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mcat-item.active .mcat-name { color: #4f46e5; font-weight: 700; } .mcat-arrow { font-size: 1.1rem; color: #cbd5e1; flex-shrink: 0; transition: transform .15s, color .15s; } .mcat-item:hover .mcat-arrow, .mcat-item.active .mcat-arrow { color: #4f46e5; transform: translateX(3px); } .mcat-count { font-size: .68rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 7px; min-width: 22px; text-align: center; flex-shrink: 0; } .mcat-item.active .mcat-count { background: rgba(79,70,229,.12); color: #4f46e5; } .shop-page { padding: calc(var(--h-height, 70px) + 32px) 0 80px; min-height: 100vh; background: #f8fafc; } /* ── Page header ──────────────────────────────────── */ .shop-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .shop-title { font-family:'Nunito',sans-serif; font-size:1.8rem;font-weight:900;color:#0f172a;margin-bottom:4px; } .shop-subtitle { font-size:.88rem;color:#64748b; } .shop-header-right { display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .shop-cart-btn { position:relative;display:inline-flex;align-items:center;gap:8px; padding:10px 20px;border-radius:10px; background:#fff;border:1.5px solid rgba(0,0,0,.1); font-size:.85rem;font-weight:600;color:#374151; text-decoration:none;transition:.2s; } .shop-cart-btn:hover { border-color:#4f46e5;color:#4f46e5; } .filter-toggle-btn { display:none;align-items:center;gap:8px; padding:10px 20px;border-radius:10px; background:linear-gradient(135deg,#4f46e5,#7c3aed); border:none;color:#fff;font-size:.85rem;font-weight:700;cursor:pointer; position:relative; } .filter-active-dot { position:absolute;top:6px;right:6px; width:8px;height:8px;border-radius:50%; background:#f97316;border:2px solid #fff; } /* —— Layout: full-width products (filter is modal) ————— */ .shop-wrap { width: 100%; } /* ══════════════════════════════════════════════════ FILTER PANEL ══════════════════════════════════════════════════ */ .filter-panel { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:20px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.06); position:sticky; top:calc(var(--h-height,70px) + 16px); max-height:calc(100vh - var(--h-height,70px) - 32px); overflow-y:auto; overflow-x:hidden; } .filter-panel::-webkit-scrollbar { width:4px; } .filter-panel::-webkit-scrollbar-track { background:transparent; } .filter-panel::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1);border-radius:2px; } .filter-panel-head { display:flex;align-items:center;justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid rgba(0,0,0,.06); background:linear-gradient(135deg,#1e1b4b,#312e81); } .filter-panel-title { font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900; color:#fff;margin:0; } .filter-close-btn { display:none;background:rgba(255,255,255,.15);border:none; color:#fff;font-size:1rem;width:28px;height:28px; border-radius:50%;cursor:pointer;line-height:1; } /* ── Filter section ─────────────────────────────── */ .filter-section { padding:18px 20px; border-bottom:1px solid rgba(0,0,0,.05); } .filter-section:last-child { border-bottom:none; } .filter-section-head { display:flex;align-items:center;gap:8px;margin-bottom:14px; } .filter-section-icon { font-size:1rem; } .filter-section-title { font-family:'Nunito',sans-serif; font-size:.88rem;font-weight:800;color:#374151;margin:0; text-transform:uppercase;letter-spacing:.04em; } /* ── Search ─────────────────────────────────────── */ .filter-search-wrap { display:flex;align-items:center; background:#f1f5f9;border:1.5px solid rgba(0,0,0,.08); border-radius:10px;padding:0 14px;gap:8px; transition:border-color .2s,box-shadow .2s; } .filter-search-wrap:focus-within { border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.1); background:#fff; } .filter-search-icon { color:#94a3b8;font-size:.85rem; } .filter-search-input { flex:1;border:none;background:transparent; padding:10px 0;font-size:.88rem;color:#374151; outline:none;font-family:'Inter',sans-serif; } .filter-search-input::placeholder { color:#94a3b8; } /* ── Brand chips ─────────────────────────────────── */ .brand-chips { display:flex;flex-wrap:wrap;gap:8px; } .brand-chip { cursor:pointer; border:1.5px solid rgba(0,0,0,.1); border-radius:8px; padding:7px 14px; font-size:.8rem;font-weight:600; color:#475569; background:#fff; transition:all .18s; display:inline-flex; align-items:center; white-space:nowrap; } .brand-chip input[type="radio"] { display:none; } .brand-chip:hover { border-color:#4f46e5;color:#4f46e5; background:rgba(79,70,229,.05); } .brand-chip.active { border-color:#4f46e5; background:rgba(79,70,229,.08); color:#4f46e5;font-weight:700; box-shadow:0 0 0 1px rgba(79,70,229,.25); } .brand-chip-logo { width:18px;height:14px; object-fit:contain;vertical-align:middle; margin-right:4px;border-radius:3px; flex-shrink:0; } /* ── Category chips ──────────────────────────────── */ .cat-chips { display:flex;flex-wrap:wrap;gap:8px; } .cat-chip { cursor:pointer; border:1.5px solid rgba(0,0,0,.1); border-radius:10px; padding:8px 14px; display:inline-flex;align-items:center;gap:6px; font-size:.82rem;font-weight:600;color:#475569; background:#fff; transition:all .18s; } .cat-chip input[type="radio"] { display:none; } .cat-chip-icon { font-size:1rem; } .cat-chip-name { white-space:nowrap; } .cat-chip:hover { border-color:#f97316;color:#ea580c; background:rgba(249,115,22,.05); } .cat-chip.active { border-color:#f97316; background:rgba(249,115,22,.08); color:#ea580c;font-weight:700; box-shadow:0 0 0 1px rgba(249,115,22,.25); } /* ── Price presets ───────────────────────────────── */ .price-presets { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; } .price-preset-btn { padding:6px 12px;border-radius:999px; border:1.5px solid rgba(0,0,0,.1); background:#fff;color:#475569; font-size:.75rem;font-weight:600;cursor:pointer; transition:all .18s;white-space:nowrap; font-family:'Inter',sans-serif; } .price-preset-btn:hover { border-color:#0ea5e9;color:#0284c7; background:rgba(14,165,233,.05); } .price-preset-btn.active { border-color:#0ea5e9;background:rgba(14,165,233,.1); color:#0284c7;font-weight:700; box-shadow:0 0 0 1px rgba(14,165,233,.25); } .price-inputs-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; margin-top:12px; } .price-sep { color:#94a3b8;font-weight:600;flex-shrink:0; } .price-input-wrap { display:flex;align-items:center;gap:4px; background:#f1f5f9;border:1.5px solid rgba(0,0,0,.08); border-radius:8px;padding:0 8px; transition:border-color .2s; min-width:0;overflow:hidden; } .price-input-wrap:focus-within { border-color:#4f46e5; background:#fff; } .price-input-label { font-size:.72rem;color:#94a3b8;white-space:nowrap; } .price-input { flex:1;border:none;background:transparent; padding:8px 0;font-size:.8rem;color:#374151; outline:none;font-family:'Inter',sans-serif; min-width:0; } .price-input-suffix { font-size:.72rem;color:#94a3b8;flex-shrink:0; } /* ── Slider labels & axis ───────────────────────────── */ .slider-labels { display:flex;align-items:center;justify-content:space-between; font-size:.75rem;font-weight:700;color:#4f46e5; margin-bottom:8px;gap:4px; } .slider-labels span { white-space:nowrap; } #sliderLabelSep { color:#94a3b8;font-weight:400; } .slider-axis { display:flex;justify-content:space-between; font-size:.65rem;color:#cbd5e1;margin-top:2px;padding:0 2px; } /* ── Sort chips ──────────────────────────────────── */ .sort-chips { display:flex;flex-wrap:wrap;gap:6px; } .sort-chip { cursor:pointer; border:1.5px solid rgba(0,0,0,.1); border-radius:8px; padding:7px 12px; font-size:.78rem;font-weight:600;color:#475569; background:#fff; transition:all .18s; display:inline-block; } .sort-chip input[type="radio"] { display:none; } .sort-chip:hover { border-color:#64748b;color:#374151; } .sort-chip.active { border-color:#374151;background:#374151;color:#fff; } /* ── Filter actions ──────────────────────────────── */ .filter-actions { padding:16px 20px 20px; display:flex;gap:10px; border-top:1px solid rgba(0,0,0,.06); } .filter-reset-btn { flex:1;padding:11px; border:1.5px solid rgba(239,68,68,.3); border-radius:10px; color:#ef4444;font-size:.85rem;font-weight:700; text-align:center;text-decoration:none; background:#fff;cursor:pointer; transition:.2s; } .filter-reset-btn:hover { background:rgba(239,68,68,.06);border-color:#ef4444; } .filter-apply-btn { flex:2;padding:11px; background:linear-gradient(135deg,#4f46e5,#7c3aed); border:none;border-radius:10px; color:#fff;font-size:.85rem;font-weight:700; cursor:pointer;transition:.2s; box-shadow:0 4px 14px rgba(79,70,229,.3); } .filter-apply-btn:hover { background:linear-gradient(135deg,#4338ca,#6d28d9);transform:translateY(-1px); } /* ── Mobile overlay ──────────────────────────────── */ .filter-overlay { display:none;position:fixed;inset:0; background:rgba(0,0,0,.5);z-index:200;backdrop-filter:blur(2px); } /* ══════════════════════════════════════════════════ PRODUCTS AREA ══════════════════════════════════════════════════ */ .shop-main { min-width:0; } /* Active filters bar */ .active-filters { display:flex;align-items:center;flex-wrap:wrap;gap:8px; background:#fff;border:1px solid rgba(0,0,0,.07); border-radius:12px;padding:12px 16px;margin-bottom:16px; font-size:.82rem; } .active-filters-label { color:#94a3b8;font-weight:600; } .active-filter-tag { background:rgba(79,70,229,.08);color:#4f46e5; border:1px solid rgba(79,70,229,.2); padding:3px 10px;border-radius:999px;font-weight:600;font-size:.75rem; } .active-filter-clear { margin-left:auto;color:#ef4444;font-weight:700;text-decoration:none; padding:3px 10px;border-radius:999px; border:1px solid rgba(239,68,68,.2); transition:.2s;font-size:.75rem; } .active-filter-clear:hover { background:rgba(239,68,68,.08); } /* Results bar */ .results-bar { display:flex;align-items:center;justify-content:space-between; margin-bottom:16px;flex-wrap:wrap;gap:8px; } .results-count { font-size:.85rem;color:#64748b; } .results-count strong { color:#374151; } .results-sort { display:flex;align-items:center;gap:8px; } .sort-select { padding:7px 12px;border-radius:8px; border:1.5px solid rgba(0,0,0,.1); background:#fff;font-size:.82rem;color:#374151; font-family:'Inter',sans-serif;outline:none;cursor:pointer; } .sort-select:focus { border-color:#4f46e5; } /* —— Product grid 4 cols (wide screen, no sidebar) ——— */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .product-card { background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:16px;overflow:hidden; display:flex;flex-direction:column; transition:transform .25s,box-shadow .25s,border-color .25s; position:relative; } .product-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.1); border-color:rgba(79,70,229,.2); } .product-card-badges { position:absolute;top:10px;left:10px; display:flex;flex-direction:column;gap:4px; z-index:2; } .product-badge { display:inline-block;padding:3px 8px; border-radius:6px;font-size:.68rem;font-weight:800; text-transform:uppercase;letter-spacing:.04em; } .product-badge--sale { background:#ef4444;color:#fff; } .product-badge--out { background:rgba(0,0,0,.7);color:#fff; } .product-img-wrap { display:block; aspect-ratio:1;background:#f8fafc; overflow:hidden; } .product-img-wrap img { width:100%;height:100%;object-fit:cover; transition:transform .3s; } .product-card:hover .product-img-wrap img { transform:scale(1.05); } .product-no-img { width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-size:3rem; } .product-info { padding:14px 14px 8px; flex:1; } .product-meta { font-size:.72rem;color:#94a3b8;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em; } .product-name { display:block;font-family:'Nunito',sans-serif; font-size:.9rem;font-weight:800;color:#0f172a; line-height:1.35;margin-bottom:8px; text-decoration:none; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .product-name:hover { color:#4f46e5; } .product-price-row { display:flex;align-items:baseline;gap:8px; } .product-price-final { font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:900;color:#f97316; } .product-price-old { font-size:.78rem;color:#94a3b8;text-decoration:line-through; } /* ── Action buttons ─────────────────────────────── */ .product-action { padding:0 14px 14px; } .add-cart-btn { width:100%; padding:10px; background:linear-gradient(135deg,#4f46e5,#7c3aed); border:none; border-radius:8px; color:#fff; font-size:.82rem; font-weight:700; cursor:pointer; transition:all .2s; font-family:'Inter',sans-serif; } .add-cart-btn:hover { background:linear-gradient(135deg,#4338ca,#6d28d9); transform:translateY(-1px); } .add-cart-btn--disabled { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; } /* Mua ngay — link phụ đặt dưới nút chính */ .buy-now-link { display:block; text-align:center; padding:7px 10px; font-size:.78rem; font-weight:700; color:#ea580c; background:rgba(249,115,22,.07); border:1.5px solid rgba(249,115,22,.18); border-radius:8px; text-decoration:none; transition:.2s; font-family:'Inter',sans-serif; } .buy-now-link:hover { background:rgba(249,115,22,.14); border-color:rgba(249,115,22,.4); color:#dc2626; } /* ── Pagination ─────────────────────────────────── */ .shop-pagination { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:32px; padding:24px 0; } .pg-btn { min-width:38px;height:38px; display:inline-flex;align-items:center;justify-content:center; border-radius:10px;font-size:.9rem;font-weight:700; background:#fff;border:1.5px solid rgba(0,0,0,.1); color:#374151;text-decoration:none;transition:.2s; font-family:'Nunito',sans-serif; } .pg-btn:hover { border-color:#4f46e5;color:#4f46e5;background:rgba(79,70,229,.06); } .pg-active { background:linear-gradient(135deg,#4f46e5,#7c3aed); border-color:transparent;color:#fff !important; box-shadow:0 4px 14px rgba(79,70,229,.35); } .pg-active:hover { background:linear-gradient(135deg,#4338ca,#6d28d9); } .pg-prev,.pg-next { font-size:1.1rem; padding:0 12px; } .pg-disabled { opacity:.35; pointer-events:none; background:#f1f5f9; } .pg-dots { color:#94a3b8;font-size:.9rem;display:inline-flex; align-items:center;height:38px;padding:0 4px; } /* ── Empty state ─────────────────────────────────── */ .empty-state { text-align:center;padding:80px 20px; background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.07); } .empty-icon { font-size:4rem;margin-bottom:16px; } .empty-state h3 { font-family:'Nunito',sans-serif;font-size:1.3rem;font-weight:900;color:#0f172a;margin-bottom:8px; } .empty-state p { color:#64748b;margin-bottom:24px; } /* ── Wishlist Card Button ─────────────────────────── */ .wl-card-btn { position:absolute;top:10px;right:10px;z-index:10; background:rgba(255,255,255,.9);backdrop-filter:blur(4px); border:none;border-radius:50%;width:36px;height:36px; display:flex;align-items:center;justify-content:center; font-size:1rem;cursor:pointer;transition:.2s; box-shadow:0 2px 8px rgba(0,0,0,.12); } .wl-card-btn:hover { transform:scale(1.15); background:#fff; } /* ── Compare Card Button ─────────────────────────── */ .cmp-card-btn { flex-shrink:0;width:36px;height:36px;border-radius:8px; background:rgba(79,70,229,.08);border:1.5px solid rgba(79,70,229,.2); font-size:.9rem;cursor:pointer;transition:.2s; display:flex;align-items:center;justify-content:center; } .cmp-card-btn:hover, .cmp-card-btn.cmp-active { background:rgba(79,70,229,.18);border-color:#4f46e5; } /* ── Product Rating ──────────────────────────────── */ .product-rating { display:flex;align-items:center;gap:4px;margin-bottom:6px; } .product-stars { color:#f59e0b;font-size:.82rem; } .product-rating-num { font-size:.78rem;font-weight:700;color:#f59e0b; } .product-rating-cnt { font-size:.72rem;color:#94a3b8; } /* ── Dual Range Slider ───────────────────────────── */ .dual-range-wrap { position:relative; height:36px; display:flex; align-items:center; padding:0 4px; margin-bottom:4px; } .dual-range-track { position:absolute; left:4px; right:4px; height:6px; background:#e2e8f0; border-radius:999px; z-index:0; } .dual-range-fill { position:absolute; height:100%; background:linear-gradient(90deg,#4f46e5,#7c3aed); border-radius:999px; } .dual-range-input { position:absolute; width:calc(100% - 8px); left:4px; -webkit-appearance:none; appearance:none; height:6px; background:transparent; outline:none; pointer-events:none; z-index:2; } .dual-range-input::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #4f46e5; box-shadow:0 2px 8px rgba(79,70,229,.35); cursor:pointer; pointer-events:all; transition:transform .15s, box-shadow .15s; } .dual-range-input::-webkit-slider-thumb:hover, .dual-range-input:active::-webkit-slider-thumb { transform:scale(1.2); box-shadow:0 4px 16px rgba(79,70,229,.45); } .dual-range-input::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid #4f46e5; box-shadow:0 2px 8px rgba(79,70,229,.35); cursor:pointer; pointer-events:all; } /* ── Responsive (no sidebar — modal-based filter) ──── */ @media (max-width:1200px) { .product-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:900px) { .product-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:480px) { .product-grid { grid-template-columns:1fr; } .shop-header { flex-direction:column;align-items:flex-start; } } /* ══════════════════════════════════════════════════════ FILTER MODAL OVERLAY (fm-*) ══════════════════════════════════════════════════════ */ .fm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1080; overflow-y: auto; padding: 52px 16px 20px; } .fm-overlay.fm-open { display: block; } .fm-modal { background: #fff; border-radius: 18px; width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.28); animation: fmSlideIn .22s cubic-bezier(.25,.46,.45,.94); } @keyframes fmSlideIn { from { transform:translateY(-24px); opacity:0; } to { transform:translateY(0); opacity:1; } } .fm-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fff; flex-shrink: 0; } .fm-title { font-size:1rem; font-weight:700; color:#1e293b; } .fm-close { background: none; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 5px 14px; cursor: pointer; color: #64748b; font-size: .84rem; font-weight: 600; transition: .15s; line-height: 1.5; } .fm-close:hover { background:#f8fafc; border-color:#94a3b8; } .fm-body { overflow-y: auto; max-height: calc(100vh - 200px); } .fm-body::-webkit-scrollbar { width:4px; } .fm-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; } .fm-section { padding:18px 24px; border-bottom:1px solid #f1f5f9; } .fm-section:last-child { border-bottom:none; } .fm-section-title { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#64748b; margin:0 0 14px; } /* ── Brand tiles ─────────────────────────── */ .fm-brand-grid { display:flex; flex-wrap:wrap; gap:8px; } .fm-brand-tile { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 8px 6px; cursor: pointer; width: 100px; min-width: 80px; max-width: 110px; gap: 5px; transition: all .15s; background: #fff; user-select: none; overflow: hidden; box-sizing: border-box; } .fm-brand-tile input { display:none; } .fm-brand-tile img { display: block; width: auto; height: 26px; max-width: 76px; object-fit: contain; } .fm-brand-name { font-size: .68rem; font-weight:700; color: #374151; text-align:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; padding: 0 2px; } .fm-brand-tile:hover { border-color:#4f46e5; box-shadow:0 2px 8px rgba(79,70,229,.12); transform:translateY(-1px); } .fm-brand-tile.active, .fm-brand-tile:has(input:checked) { border-color:#4f46e5; background:rgba(79,70,229,.07); box-shadow:0 0 0 2px rgba(79,70,229,.22); } .fm-brand-tile.active .fm-brand-name, .fm-brand-tile:has(input:checked) .fm-brand-name { color:#4f46e5; } /* ── Category chips ──────────────────────── */ .fm-cat-chips { display:flex; flex-wrap:wrap; gap:8px; } .fm-cat-chip { display:inline-flex; align-items:center; gap:5px; border:1.5px solid #e2e8f0; border-radius:24px; padding:7px 14px; cursor:pointer; font-size:.84rem; font-weight:600; color:#475569; background:#fff; transition:all .15s; user-select:none; } .fm-cat-chip input { display:none; } .fm-cat-chip:hover { border-color:#f97316; color:#ea580c; background:rgba(249,115,22,.05); } .fm-cat-chip.active, .fm-cat-chip:has(input:checked) { border-color:#f97316; background:rgba(249,115,22,.1); color:#ea580c; font-weight:700; } /* ── Modal footer ────────────────────────── */ .fm-footer { display:flex; gap:10px; padding:14px 24px; border-top:1px solid #f1f5f9; background:#fff; flex-shrink:0; } .fm-reset-btn { flex:1; text-align:center; padding:12px; border:1.5px solid rgba(239,68,68,.3); border-radius:10px; color:#ef4444; font-weight:700; font-size:.88rem; text-decoration:none; transition:.15s; background:#fff; cursor:pointer; font-family:'Inter',sans-serif; } .fm-reset-btn:hover { background:rgba(239,68,68,.06); border-color:#ef4444; } .fm-apply-btn { flex:2; padding:12px; background:linear-gradient(135deg,#4f46e5,#7c3aed); border:none; border-radius:10px; color:#fff; font-weight:800; font-size:.95rem; cursor:pointer; transition:.18s; box-shadow:0 4px 14px rgba(79,70,229,.3); font-family:'Inter',sans-serif; } .fm-apply-btn:hover { background:linear-gradient(135deg,#4338ca,#6d28d9); transform:translateY(-1px); } /* Mobile — bottom sheet */ @media (max-width:500px) { .fm-overlay { display:none; padding:0; align-items:flex-end; } .fm-overlay.fm-open { display:flex; } .fm-modal { border-radius:20px 20px 0 0; max-width:100%; max-height:90vh; animation:fmSlideUp .28s ease; } @keyframes fmSlideUp { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } } } /* ══════════════════════════════════════════════════════ SHOP PAGINATION ══════════════════════════════════════════════════════ */ .shop-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 32px 0 16px; padding: 16px 0; } .pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: .86rem; font-weight: 700; text-decoration: none; transition: all .18s; cursor: pointer; font-family: 'Inter', sans-serif; } .pg-btn:hover:not(.pg-disabled):not(.pg-active) { border-color: #4f46e5; color: #4f46e5; background: rgba(79,70,229,.06); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(79,70,229,.15); } .pg-active { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; border-color: #4f46e5 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(79,70,229,.4); } .pg-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } .pg-prev, .pg-next { font-size: 1.1rem; font-weight: 900; min-width: 38px; } .pg-dots { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 38px; color: #94a3b8; font-weight: 700; font-size: .9rem; letter-spacing: .05em; }