/* ============================================================================ PRODUCTS PAGE — catalogue shell ---------------------------------------------------------------------------- Loaded by : products.html Depends on: base/tokens.css, components/product-card.css, components/modal.css Scripted by: js/catalogue.js Page chrome only — the cards and dialogs themselves live in components/product-card.css and components/modal.css. ============================================================================ */ /* ── Page header ────────────────────────────────────────────────────────── */ .prod-hero{ padding-top:60px;padding-bottom:60px; background:var(--light);border-bottom:1px solid var(--border); } .prod-hero-inner{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);} .prod-hero h1{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:800;color:var(--text-dark);margin-bottom:0.6rem;} .prod-hero p{font-size:1rem;color:var(--text-mid);max-width:520px;} /* ── Category filter bar ────────────────────────────────────────────────── */ /* Sticks below the fixed navbar, hence top:var(--navbar-h). */ .filter-wrap{ background:var(--white);border-bottom:1px solid var(--border); padding:1.2rem var(--gutter); position:sticky;top:var(--navbar-h);z-index:100; } .filter-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-wrap:wrap;gap:0.5rem;} /* .fb = filter button. js/catalogue.js reads its data-filter attribute. */ .fb{ display:inline-flex;align-items:center;gap:6px; padding:7px 18px;border-radius:4px;border:1px solid var(--border); background:var(--white);color:var(--text-mid);font-size:0.82rem; font-weight:600;cursor:pointer;transition:all 0.25s; font-family:'Inter',sans-serif; } .fb:hover{border-color:var(--navy);color:var(--navy);} .fb.active{background:var(--navy);color:var(--white);border-color:var(--navy);} /* ── Catalogue body ─────────────────────────────────────────────────────── */ .prod-body{background:var(--light);padding:60px var(--gutter);} /* One block per category; js/catalogue.js shows and hides these by data-cat. */ .cat-block{max-width:var(--content-max);margin:0 auto 4.5rem;} /* Applied by js/catalogue.js when a filter excludes this category. */ .cat-block.is-hidden{display:none;} .cat-hdr{margin-bottom:1.8rem;padding-bottom:1.2rem;border-bottom:2px solid var(--border);} .cat-hdr h2{font-size:1.4rem;font-weight:800;color:var(--text-dark);} .cat-hdr p{ font-size:0.82rem;color:var(--text-light);margin-top:3px; text-transform:uppercase;letter-spacing:1px;font-weight:500; } /* ── Bracket tabs (inside the EM lock bracket modal) ────────────────────── */ /* Moved here from an inline