/* ════════════════════════════════════════════════════════════ AL FAROOQUE — Product Search & Filter System Desktop: one horizontal glass toolbar mounted inside nav. Mobile (≤768px): search bar + Filter button; all other controls open in a glass-morphism slide-up bottom sheet. ════════════════════════════════════════════════════════════ */ /* ── Products page: nav becomes a tall single header ──────── */ /* main.css sets body{overflow-x:hidden}, which turns into a scroll container — position:sticky children then stick to 's own (never-moving) scrollport instead of the viewport, so the nav scrolled away with the page. `clip` still cuts off horizontal overflow but does NOT create a scroll container, letting the nav stick to the real viewport scroll. Scoped to the products pages. */ body.products-page { overflow-x: clip; } body.products-page .nav { position: sticky; top: 0; height: auto; min-height: var(--nav-h, 76px); flex-wrap: wrap; align-items: center; padding-bottom: 16px; row-gap: 2px; } /* Keep the top menu row at the normal nav height */ body.products-page .nav-logo { min-height: var(--nav-h, 76px); } /* The toolbar lives inside the tall sticky .nav (z-index 500), so the mobile menu (sibling of .nav, default z-index 490) would slide in BEHIND the search/filter bar. Raise it above the nav + all page chrome (cart-fab 500, filter sheet 9100) so it overlays everything. Scoped to the products page; other pages keep their default stacking. */ body.products-page .nav-mobile { z-index: 9600; } /* Header is in normal flow now — drop the fixed-nav top clearance */ body.products-page .products-section { padding-top: 28px; } /* ── Toolbar wrapper (transparent; holds the bar + info line) ─ */ .pf-toolbar { flex: 0 0 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } /* ── Category pill row ("Collections" style) ───────────────── Replaces #pfCatSelect visually; the select stays in the DOM (hidden) so pfSyncUI()/wireSelect() don't need to change. ── */ #pfCatSelect { display: none !important; } .pf-cat-pills { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 2px 4px; } .pf-cat-pills::-webkit-scrollbar { display: none; } .pf-cat-pill { flex-shrink: 0; padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: var(--tx-3, #94a3b8); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .pf-cat-pill:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); color: var(--tx, #fff); transform: translateY(-1px); } .pf-cat-pill.active { background: linear-gradient(135deg, var(--pr, #8CA05B), var(--pr-2, #A3B873)); border-color: var(--pr-2, #A3B873); color: #fff; box-shadow: 0 4px 16px rgba(140,160,91,0.36); } :is(html.light, body.light) .pf-cat-pill { background: rgba(255,255,255,0.75); border-color: rgba(203,213,225,0.65); color: #64748b; } :is(html.light, body.light) .pf-cat-pill:hover { background: #fff; border-color: rgba(107,122,79,0.35); color: #1A1A18; } :is(html.light, body.light) .pf-cat-pill.active { background: linear-gradient(135deg, var(--pr, #6B7A4F), var(--pr-2, #7D8F5C)); border-color: var(--pr-2, #7D8F5C); color: #fff; box-shadow: 0 4px 16px rgba(107,122,79,0.28); } @media (max-width: 768px) { .pf-cat-pills { display: none; } } /* ── The single horizontal glass control bar ──────────────── */ .pf-bar { display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; box-shadow: 0 8px 28px rgba(26,26,24,0.22); padding: 9px 11px; } /* ── Shared control height ────────────────────────────────── */ .pf-search-wrap, .pf-select, .pf-price-input, .pf-reset-btn { height: 40px; } /* ── Search (largest element) ─────────────────────────────── */ .pf-search-wrap { flex: 1 1 40%; min-width: 200px; position: relative; display: flex; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 0 14px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .pf-search-wrap:focus-within { border-color: rgba(140,160,91,0.60); box-shadow: 0 0 0 3px rgba(107,122,79,0.18); } .pf-search-icon { color: rgba(148,163,184,0.60); flex-shrink: 0; display: flex; align-items: center; pointer-events: none; margin-right: 11px; } [dir="rtl"] .pf-search-icon { margin-right: 0; margin-left: 11px; } .pf-search-input { flex: 1; background: none; border: none; outline: none; color: var(--tx-1, #e2e8f0); font-family: inherit; font-size: 15px; padding: 0; min-width: 0; height: 100%; } .pf-search-input::placeholder { color: rgba(148,163,184,0.40); } .pf-search-clear { background: none; border: none; color: rgba(148,163,184,0.55); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; border-radius: 6px; transition: color 0.2s ease, background 0.2s ease; flex-shrink: 0; } .pf-search-clear:hover { color: var(--tx-1, #e2e8f0); background: rgba(255,255,255,0.07); } /* ── Mobile Filter Button (visible only on mobile via responsive) */ .pf-mobile-filter-btn { display: none; /* shown via @media (max-width: 768px) */ align-items: center; gap: 7px; background: rgba(140,160,91,0.10); border: 1px solid rgba(140,160,91,0.28); border-radius: 12px; color: #A3B873; font-family: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; height: 40px; cursor: pointer; white-space: nowrap; transition: background 0.25s ease, border-color 0.25s ease; position: relative; flex-shrink: 0; } .pf-mobile-filter-btn:hover { background: rgba(140,160,91,0.20); border-color: rgba(140,160,91,0.46); } /* Active filter count badge on the filter button */ .pf-filter-badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 999px; background: #8CA05B; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 0 4px; display: none; align-items: center; justify-content: center; } .pf-filter-badge.visible { display: flex; } [dir="rtl"] .pf-filter-badge { right: auto; left: -7px; } /* ── Select inputs ────────────────────────────────────────── */ .pf-select { flex: 0 1 136px; min-width: 108px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: var(--tx-1, #e2e8f0); font-family: inherit; font-size: 13px; padding: 0 28px 0 12px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .pf-select:focus { border-color: rgba(140,160,91,0.55); box-shadow: 0 0 0 3px rgba(107,122,79,0.15); background-color: rgba(255,255,255,0.08); } .pf-select:hover { border-color: rgba(255,255,255,0.18); background-color: rgba(255,255,255,0.07); } .pf-select option { background: #0d1117; color: #e2e8f0; } [dir="rtl"] .pf-select { padding: 0 12px 0 28px; background-position: left 10px center; } /* ── Price range (Min — Max) ──────────────────────────────── */ .pf-price-row { flex: 0 1 178px; min-width: 152px; display: flex; align-items: center; gap: 6px; } .pf-price-input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: var(--tx-1, #e2e8f0); font-family: inherit; font-size: 13px; padding: 0 9px; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; -moz-appearance: textfield; min-width: 0; width: 100%; } .pf-price-input::-webkit-outer-spin-button, .pf-price-input::-webkit-inner-spin-button { -webkit-appearance: none; } .pf-price-input:focus { border-color: rgba(140,160,91,0.55); box-shadow: 0 0 0 3px rgba(107,122,79,0.15); } .pf-price-sep { color: rgba(148,163,184,0.40); font-size: 12px; flex-shrink: 0; } /* ── Reset button ─────────────────────────────────────────── */ .pf-reset-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: rgba(148,163,184,0.70); font-family: inherit; font-size: 12px; font-weight: 600; padding: 0 13px; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; } .pf-reset-btn:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.30); color: #f87171; transform: translateY(-1px); } /* ── Login/cart buttons (inside toolbar) ───────────────────── Superseded by the global .nav-acct-btn / .nav-cart-btn icons in the main nav (present on every page, not just products.html). Kept in the DOM — auth-ui.js and the cart badge sync still target these ids — just hidden so the toolbar doesn't duplicate them. */ .pf-login-btn, .pf-cart-btn { display: none !important; } .pf-login-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 12px; color: rgba(226,232,240,0.82); font-family: inherit; font-size: 12px; font-weight: 600; padding: 0 15px; height: 40px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .pf-login-btn:hover { background: rgba(140,160,91,0.12); border-color: rgba(140,160,91,0.36); color: #A3B873; box-shadow: 0 0 14px rgba(107,122,79,0.20); } .pf-login-btn svg { flex-shrink: 0; stroke: currentColor; } /* ── Cart button (integrated into toolbar, replaces floating FAB) */ .pf-cart-btn { flex: 0 0 40px; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, var(--pr,#6B7A4F), #005c6e); border: 1px solid var(--pr-2,#7D8F5C); border-radius: 12px; color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(107,122,79,0.38); transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; flex-shrink: 0; } .pf-cart-btn svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .pf-cart-btn:hover { background: linear-gradient(135deg, var(--pr-2,#7D8F5C), var(--pr,#6B7A4F)); box-shadow: 0 6px 22px rgba(107,122,79,0.55); transform: translateY(-1px); } /* Cart badge on toolbar cart button */ .pf-cart-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--bg, #0b0f14); opacity: 0; transform: scale(0); transition: opacity 0.35s cubic-bezier(0.34,1.56,0.64,1), transform 0.35s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; } .pf-cart-badge.show { opacity: 1; transform: scale(1); } [dir="rtl"] .pf-cart-badge { right: auto; left: -5px; } /* ── Hide the floating cart FAB on the products page ─────── */ body.products-page .cart-fab { display: none !important; } /* ── Info line: result count + active chips ───────────────── */ .pf-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 18px; padding: 0 4px; } .pf-count { font-size: 12px; color: rgba(148,163,184,0.60); white-space: nowrap; flex-shrink: 0; } .pf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pf-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(107,122,79,0.14); border: 1px solid rgba(140,160,91,0.30); border-radius: 999px; color: #A3B873; font-size: 11px; font-weight: 600; padding: 3px 10px 3px 11px; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.02em; } .pf-chip:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.30); color: #f87171; } .pf-chip-x { font-size: 14px; line-height: 1; opacity: 0.70; } /* ── Empty state ──────────────────────────────────────────── */ .pf-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; gap: 14px; } .pf-empty-ico { color: rgba(148,163,184,0.25); margin-bottom: 4px; } .pf-empty-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--tx-1, #e2e8f0); } .pf-empty-sub { font-size: 14px; color: rgba(148,163,184,0.55); max-width: 280px; line-height: 1.55; } /* ════════════════════════════════════════════════════════════ MOBILE BOTTOM SHEET ════════════════════════════════════════════════════════════ */ /* Backdrop overlay */ .pf-sheet-overlay { position: fixed; inset: 0; z-index: 9100; background: rgba(26,26,24,0.52); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; display: flex; align-items: flex-end; } .pf-sheet-overlay.pf-sheet-open { opacity: 1; pointer-events: auto; } /* Sheet panel — glass morphism */ .pf-sheet { width: 100%; max-height: 92dvh; max-height: 92vh; /* fallback for older browsers */ background: rgba(11,17,32,0.94); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); border-radius: 26px 26px 0 0; border: 1px solid rgba(255,255,255,0.10); border-bottom: none; box-shadow: 0 -16px 56px rgba(26,26,24,0.55), 0 -1px 0 rgba(255,255,255,0.06); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); overflow: hidden; } .pf-sheet-overlay.pf-sheet-open .pf-sheet { transform: translateY(0); } /* Drag handle pill */ .pf-sheet-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.18); border-radius: 999px; margin: 14px auto 0; flex-shrink: 0; } /* Sheet header row */ .pf-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; } .pf-sheet-title { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--tx-1, #e2e8f0); letter-spacing: 0.01em; } .pf-sheet-close { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; color: rgba(148,163,184,0.75); font-size: 20px; line-height: 1; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .pf-sheet-close:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.30); color: #f87171; } /* Scrollable body */ .pf-sheet-body { overflow-y: auto; flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Filter group (label + input) */ .pf-sheet-group { display: flex; flex-direction: column; gap: 8px; } .pf-sheet-label { font-size: 11px; font-weight: 600; color: rgba(148,163,184,0.65); text-transform: uppercase; letter-spacing: 0.07em; } /* Full-width selects inside the sheet */ .pf-sheet-select { width: 100%; flex: none; height: 50px; font-size: 15px; min-width: 0; } /* Price row inside the sheet */ .pf-sheet-price-row { flex: none !important; width: 100% !important; min-width: 0 !important; } .pf-sheet-price-row .pf-price-input { height: 50px; font-size: 15px; } /* ── Dual price range slider ─────────────────────────────── */ .pf-price-slider-wrap { padding: 10px 2px 4px; } .pf-price-slider-track { position: relative; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); } .pf-price-slider { position: absolute; top: -8px; left: 0; right: 0; width: 100%; height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .pf-price-slider::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #8CA05B; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.30); cursor: pointer; margin-top: 1px; } .pf-price-slider::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #8CA05B; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.30); cursor: pointer; } .pf-price-slider::-webkit-slider-runnable-track, .pf-price-slider::-moz-range-track { background: none; height: 4px; } /* ── Mini pill rows (Availability / Rating) ──────────────── */ .pf-pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .pf-mini-pill { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: rgba(226,232,240,0.75); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pf-mini-pill:hover { background: rgba(255,255,255,0.08); } .pf-mini-pill.active { background: linear-gradient(135deg, #8CA05B, #A3B873); border-color: #A3B873; color: #fff; } :is(html.light, body.light) .pf-mini-pill { background: rgba(255,255,255,0.75); border-color: rgba(203,213,225,0.65); color: #64748b; } :is(html.light, body.light) .pf-mini-pill.active { background: linear-gradient(135deg, #6B7A4F, #7D8F5C); border-color: #7D8F5C; color: #fff; } /* ── Desktop "More Filters" button (mirrors .pf-mobile-filter-btn) */ .pf-more-filters-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(140,160,91,0.10); border: 1px solid rgba(140,160,91,0.28); border-radius: 12px; color: #A3B873; font-family: inherit; font-size: 12px; font-weight: 600; padding: 0 12px; height: 40px; cursor: pointer; white-space: nowrap; transition: background 0.25s ease, border-color 0.25s ease; position: relative; flex-shrink: 0; } .pf-more-filters-btn:hover { background: rgba(140,160,91,0.20); border-color: rgba(140,160,91,0.46); } :is(html.light, body.light) .pf-more-filters-btn { color: #566440; } /* Sheet footer */ .pf-sheet-footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,0.07); display: flex; gap: 10px; flex-shrink: 0; } /* Reset button inside sheet footer */ .pf-sheet-reset { flex: 0 0 auto; min-width: 110px; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.13); border-radius: 14px; color: rgba(148,163,184,0.80); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; } .pf-sheet-reset:hover { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.26); color: #f87171; } /* Apply button inside sheet footer */ .pf-sheet-apply { flex: 1; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8CA05B 0%, #6B7A4F 100%); border: none; border-radius: 14px; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.015em; } .pf-sheet-apply:hover { background: linear-gradient(135deg, #A3B873 0%, #8CA05B 100%); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(140,160,91,0.38); } .pf-sheet-apply:active { transform: none; } /* ════════════════════════════════════════════════════════════ LIGHT MODE — Premium glassmorphism filter controls ════════════════════════════════════════════════════════════ */ /* Main filter bar: frosted glass panel */ :is(html.light,body.light) .pf-bar { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-color: rgba(255,255,255,0.88); box-shadow: 0 8px 32px rgba(15,23,42,0.09), inset 0 1px 0 rgba(255,255,255,0.92); } /* Search wrapper — frosted glass */ :is(html.light,body.light) .pf-search-wrap { background-color: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(203,213,225,0.75); box-shadow: 0 1px 4px rgba(15,23,42,0.06); color: #1e293b; } :is(html.light,body.light) .pf-search-wrap:focus-within { border-color: rgba(107,122,79,0.52); box-shadow: 0 0 0 3px rgba(107,122,79,0.13), 0 1px 4px rgba(15,23,42,0.06); background-color: rgba(255,255,255,0.96); } /* Select dropdowns — no stripes, clean glass */ :is(html.light,body.light) .pf-select { background-color: rgba(255,255,255,0.88); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(203,213,225,0.75); box-shadow: 0 1px 4px rgba(15,23,42,0.06); color: #1e293b; } :is(html.light,body.light) .pf-select:hover { border-color: rgba(148,163,184,0.85); background-color: rgba(255,255,255,0.96); } :is(html.light,body.light) .pf-select:focus { border-color: rgba(107,122,79,0.52); box-shadow: 0 0 0 3px rgba(107,122,79,0.13), 0 1px 4px rgba(15,23,42,0.06); background-color: rgba(255,255,255,0.98); } :is(html.light,body.light) .pf-select option { background: #ffffff; color: #1e293b; } /* Price inputs — clean glass */ :is(html.light,body.light) .pf-price-input { background-color: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(203,213,225,0.75); box-shadow: 0 1px 4px rgba(15,23,42,0.06); color: #1e293b; } :is(html.light,body.light) .pf-price-input:hover { border-color: rgba(148,163,184,0.85); background-color: rgba(255,255,255,0.96); } :is(html.light,body.light) .pf-price-input:focus { border-color: rgba(107,122,79,0.52); box-shadow: 0 0 0 3px rgba(107,122,79,0.13), 0 1px 4px rgba(15,23,42,0.06); background-color: rgba(255,255,255,0.98); } /* Search text, placeholder, and icons — better contrast */ :is(html.light,body.light) .pf-search-input { color: #1e293b; } :is(html.light,body.light) .pf-search-input::placeholder { color: rgba(71,85,105,0.58); } :is(html.light,body.light) .pf-search-icon { color: rgba(71,85,105,0.68); } :is(html.light,body.light) .pf-search-clear { color: rgba(71,85,105,0.62); } :is(html.light,body.light) .pf-search-clear:hover { color: #1e293b; background: rgba(15,23,42,0.06); } /* Reset button */ :is(html.light,body.light) .pf-reset-btn { background-color: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(203,213,225,0.75); box-shadow: 0 1px 4px rgba(15,23,42,0.06); color: #475569; } :is(html.light,body.light) .pf-reset-btn:hover { background-color: rgba(254,242,242,0.92); border-color: rgba(239,68,68,0.30); color: #dc2626; box-shadow: 0 2px 8px rgba(239,68,68,0.10); transform: translateY(-1px); } /* Info row */ :is(html.light,body.light) .pf-count, :is(html.light,body.light) .pf-price-sep { color: rgba(71,85,105,0.78); } /* Empty state */ :is(html.light,body.light) .pf-empty-title { color: #0f172a; } :is(html.light,body.light) .pf-empty-ico { color: rgba(71,85,105,0.28); } /* Mobile filter button */ :is(html.light,body.light) .pf-mobile-filter-btn { background-color: rgba(240,249,255,0.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(107,122,79,0.30); box-shadow: 0 1px 4px rgba(15,23,42,0.06); color: #6B7A4F; } :is(html.light,body.light) .pf-mobile-filter-btn:hover { background-color: rgba(224,242,254,0.95); border-color: rgba(107,122,79,0.46); } :is(html.light,body.light) .pf-filter-badge { background: #6B7A4F; } /* Toolbar login button */ :is(html.light,body.light) .pf-login-btn { background-color: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(203,213,225,0.75); box-shadow: 0 1px 4px rgba(15,23,42,0.06); color: #334155; } :is(html.light,body.light) .pf-login-btn:hover { background-color: rgba(240,249,255,0.94); border-color: rgba(107,122,79,0.34); color: #6B7A4F; box-shadow: 0 2px 12px rgba(107,122,79,0.14); } /* Cart button */ :is(html.light,body.light) .pf-cart-btn { box-shadow: 0 4px 16px rgba(107,122,79,0.28); } :is(html.light,body.light) .pf-cart-badge { border-color: #f8fafc; } /* Mobile bottom sheet */ :is(html.light,body.light) .pf-sheet-overlay { background: rgba(15,23,42,0.42); } :is(html.light,body.light) .pf-sheet { background: rgba(248,250,252,0.97); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border-color: rgba(203,213,225,0.55); box-shadow: 0 -16px 48px rgba(15,23,42,0.12); } :is(html.light,body.light) .pf-sheet-title { color: #0f172a; } :is(html.light,body.light) .pf-sheet-handle { background: rgba(15,23,42,0.14); } :is(html.light,body.light) .pf-sheet-header, :is(html.light,body.light) .pf-sheet-footer { border-color: rgba(203,213,225,0.55); } :is(html.light,body.light) .pf-sheet-close { background-color: rgba(255,255,255,0.82); border-color: rgba(203,213,225,0.65); color: #475569; } :is(html.light,body.light) .pf-sheet-close:hover { background-color: rgba(254,242,242,0.92); border-color: rgba(239,68,68,0.28); color: #dc2626; } :is(html.light,body.light) .pf-sheet-reset { background-color: rgba(255,255,255,0.82); border-color: rgba(203,213,225,0.65); color: #475569; } :is(html.light,body.light) .pf-sheet-reset:hover { background-color: rgba(254,242,242,0.92); border-color: rgba(239,68,68,0.26); color: #dc2626; } :is(html.light,body.light) .pf-sheet-label { color: #64748b; } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ /* Tablet (769px – 1024px): wrap into two rows; search full width */ @media (max-width: 1024px) { .pf-bar { flex-wrap: wrap; } .pf-search-wrap { flex: 1 1 100%; } .pf-select { flex: 1 1 150px; } .pf-price-row { flex: 1 1 200px; } } /* Mobile (≤768px): single row — search bar + filter button only. All desktop filter controls are hidden; sheet handles them. */ @media (max-width: 768px) { body.products-page .nav { padding-bottom: 12px; } /* Force single horizontal row regardless of tablet wrap */ .pf-bar { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 8px 12px; } /* Search bar expands to fill available space */ .pf-bar .pf-search-wrap { flex: 1 1 auto; min-width: 0; } .pf-search-input { font-size: 14px; } /* Show the mobile filter button */ .pf-mobile-filter-btn { display: inline-flex; } /* Hide all desktop-only controls */ .pf-bar .pf-select, .pf-bar .pf-price-row, .pf-bar .pf-more-filters-btn, .pf-bar .pf-reset-btn { display: none; } } /* Small mobile (≤480px): hide login button text, show icon only */ @media (max-width: 480px) { .pf-login-text { display: none; } .pf-login-btn { padding: 0 10px; gap: 0; } }