.products-page { background: var(--paper-2); }
.products-header { background: rgba(255,255,255,.9); }
.range-hero { max-width: var(--wrap-wide); margin: 0 auto; padding: clamp(30px, 4vw, 48px) 22px 20px; }
.range-hero > div { max-width: 920px; }
.range-hero h1 { max-width: none; font-family: var(--font); font-size: clamp(40px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.028em; }
.range-lead { max-width: 58ch; margin-top: 14px; color: var(--ink-2); font-size: clamp(17px,1.7vw,21px); line-height: 1.45; }
.collection-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; max-width: var(--wrap-wide); margin: 0 auto; padding: 12px 22px 28px; }
.collection-tile { position:relative; min-height:116px; padding:0; overflow:hidden; color:#fff; text-align:left; background:var(--ink); border:1px solid var(--line-soft); border-radius:var(--radius); transition:border-color .2s var(--ease),transform .2s var(--ease); }
.collection-tile img { width:100%; height:116px; object-fit:cover; opacity:.7; }.tile-copy { position:absolute; right:15px; bottom:13px; left:15px; text-shadow:0 1px 12px rgba(0,0,0,.75); }.tile-copy span,.tile-copy small { display:block; }.tile-copy span { font-size:17px; font-weight:600; letter-spacing:-.02em; }.tile-copy small { margin-top:3px; color:rgba(255,255,255,.9); font-size:12px; line-height:1.35; }
.collection-tile:hover,.collection-tile.is-active { border-color:var(--blue); transform:translateY(-2px); }
.range-workspace { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; max-width:var(--wrap-wide); margin:0 auto; padding: 0 22px 100px; align-items:start; }
.filter-rail { position:sticky; top:calc(var(--header-h) + 18px); padding:18px; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); }
.filter-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }.filter-heading h2 { font-size:19px; }.clear-filters { padding:0; color:var(--blue); background:none; border:0; font-size:13px; }
.filter-rail label { display:grid; gap:7px; padding:15px 0; border-top:1px solid var(--line-soft); color:var(--ink-2); font-size:13px; font-weight:600; }.filter-rail select,.filter-rail input { width:100%; min-height:40px; padding:0 10px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; font-size:14px; }
.filter-close,.filter-apply,.filter-toggle,.filter-backdrop { display:none; }
.catalogue-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:44px; margin:0 0 6px; color:var(--ink-2); font-size:14px; }.catalogue-toolbar p { margin:0; }.catalogue-toolbar strong { color:var(--ink); }.results-summary { min-width:0; }.active-filters { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }.active-filters:empty { display:none; }.active-filters button { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 9px; color:var(--ink-2); background:var(--paper); border:1px solid var(--line-soft); border-radius:980px; font-size:12px; }.active-filters button span { color:var(--blue); font-size:16px; line-height:1; }.catalogue-actions { display:flex; align-items:center; gap:10px; }.sort-control { display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:13px; white-space:nowrap; }.sort-control select { min-height:38px; padding:0 30px 0 10px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; }.catalogue-note { margin:0 0 16px; color:var(--ink-3); font-size:12px; text-align:right; }
.product-centre-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.product-card { display:flex; flex-direction:column; overflow:hidden; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); transition:border-color .2s var(--ease),transform .2s var(--ease); }.product-card:hover,.product-card:focus-within { border-color:var(--line); transform:translateY(-2px); }.product-card img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-2); }.product-card-body { display:flex; flex:1; flex-direction:column; padding:15px; }.product-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }.product-model { margin:0; font-size:18px; font-weight:600; }.collection-label { padding:4px 8px; color:var(--blue); background:var(--blue-soft); border-radius:980px; font-size:10px; font-weight:600; }.product-spec { display:grid; gap:4px; margin:8px 0 0; color:var(--ink-2); font-size:13px; }.product-spec strong { color:var(--ink); font-weight:500; }.product-spec span { min-height:38px; }.product-card-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }.product-price { margin:0; color:var(--ink-3); font-size:10px; }.product-price strong { display:block; margin-top:2px; color:var(--ink); font-size:15px; }.add-to-inquiry { min-height:38px; padding:0 12px; color:var(--blue); background:transparent; border:1px solid currentColor; border-radius:10px; font-size:12px; white-space:nowrap; }.add-to-inquiry:hover,.add-to-inquiry.is-selected { color:#fff; background:var(--blue); }.add-to-inquiry:focus-visible { outline:3px solid rgba(0,113,227,.28); outline-offset:2px; }.load-more { display:flex; align-items:center; justify-content:center; gap:8px; width:min(320px,100%); min-height:46px; margin:26px auto 0; color:var(--blue); background:var(--paper); border:1px solid var(--line); border-radius:980px; font-size:14px; }.load-more small { color:var(--ink-3); }.empty-state { padding:70px 22px; text-align:center; background:var(--paper); border-radius:var(--radius); }.empty-state p { max-width:46ch; margin:12px auto 22px; color:var(--ink-2); }
.inquiry-drawer { position:fixed; z-index:70; top:calc(var(--header-h) + 14px); right:18px; display:none; width:min(360px,calc(100vw - 36px)); max-height:calc(100vh - var(--header-h) - 28px); padding:22px; overflow:auto; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:0 24px 60px rgba(0,0,0,.16); }.inquiry-drawer.is-open { display:block; }.drawer-heading { display:flex; justify-content:space-between; gap:16px; }.drawer-heading h2 { font-size:24px; }.drawer-heading .eyebrow { margin-bottom:5px; }.drawer-close { padding:0; color:var(--ink-2); background:none; border:0; align-self:flex-start; font-size:13px; }.drawer-intro,.drawer-empty { margin:16px 0; color:var(--ink-2); font-size:14px; }.inquiry-items { display:grid; gap:10px; }.inquiry-item { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line-soft); }.inquiry-item strong,.inquiry-item small { display:block; }.inquiry-item small { color:var(--ink-2); font-size:12px; }.remove-model { padding:0; color:var(--blue); background:none; border:0; font-size:13px; }.inquiry-drawer .button { width:100%; min-height:44px; margin-top:18px; font-size:15px; }.inquiry-drawer .text-button { width:100%; justify-content:center; margin-top:10px; font-size:14px; }
@media (min-width:1320px) { .product-centre-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:980px) { .collection-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }.range-workspace { grid-template-columns:1fr; }.filter-rail { position:fixed; z-index:82; right:12px; bottom:12px; left:12px; top:auto; display:none; max-height:calc(100vh - 24px); padding:20px; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.24); }.filter-rail.is-open { display:block; }.filter-rail label { padding:14px 0; }.filter-heading { position:sticky; z-index:1; top:-20px; margin:0; padding:4px 0 14px; background:var(--paper); }.filter-heading > div { display:flex; gap:14px; }.filter-close { display:inline-flex; padding:0; color:var(--ink); background:none; border:0; font-size:13px; }.filter-apply { display:flex; width:100%; margin-top:14px; }.filter-toggle { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 12px; color:var(--blue); background:var(--paper); border:1px solid var(--line); border-radius:10px; }.filter-count { display:inline-grid; min-width:19px; height:19px; place-items:center; color:#fff; background:var(--blue); border-radius:50%; font-size:11px; }.filter-backdrop { position:fixed; z-index:81; inset:0; display:block; background:rgba(0,0,0,.32); }.filter-backdrop[hidden] { display:none; }.filters-open { overflow:hidden; }.product-centre-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .products-header .brand-copy small { display:none; }.products-header .brand-copy strong { display:block; max-width:66px; font-size:12px; line-height:1.15; }.products-header .brand { gap:6px; }.products-header > .nav-cta { display:inline-flex; gap:4px; margin:0; padding:9px 14px; border-radius:980px; box-shadow:0 8px 22px rgba(0,113,227,.18); white-space:nowrap; }.range-hero { padding-top:38px; padding-bottom:14px; }.range-hero h1 { font-size:36px; }.range-lead { font-size:16px; }.collection-strip { display:flex; gap:10px; overflow:auto; padding-top:8px; padding-bottom:22px; scroll-snap-type:x proximity; }.collection-tile { flex:0 0 180px; min-height:108px; scroll-snap-align:start; }.collection-tile img { height:108px; }.tile-copy span { font-size:16px; }.tile-copy small { font-size:11px; }.catalogue-toolbar { align-items:flex-start; margin-bottom:8px; }.catalogue-actions { align-items:stretch; }.sort-control { display:grid; gap:3px; }.sort-control > span { font-size:11px; }.sort-control select { max-width:148px; }.catalogue-note { margin-bottom:12px; text-align:left; }.product-centre-grid { grid-template-columns:1fr; gap:12px; }.product-card { display:grid; grid-template-columns:42% minmax(0,1fr); }.product-card img { height:100%; min-height:190px; aspect-ratio:auto; }.product-card-body { padding:14px; }.product-model { font-size:17px; }.collection-label { display:inline-flex; }.product-spec span { min-height:0; }.product-card-footer { display:block; }.product-price { margin-bottom:10px; }.add-to-inquiry { width:100%; }.inquiry-drawer { right:18px; left:18px; width:auto; } }
@media (max-width:390px) { .sort-control > span { display:none; }.sort-control select { max-width:136px; } }