/* * V3 "Ivory & Navy" - catalog listing page rules * Filter sidebar (Metal pills, Category pills grouped), toolbar (search, * count, sort), listing grid, mobile off-canvas filter drawer. * Loaded only on category listing pages, on top of core.css. * * Deliberately does NOT load home.css or product.css: * - home.css's @media(min-width:901px) .v3-scroll-rail override is * unscoped and would corrupt any rail-shaped element on this page. * - product.css's classes (.v3-pdp-breadcrumb, .v3-pdp-modal-*, the * text-input skin) are page-scoped by name only, not by file scope, * so this file copies the ones this page needs, verbatim, under the * same class names (see comments below) so markup can stay identical * to product/show.php's breadcrumb without a real cross-file share. */ /* --- breadcrumb (copied verbatim from product.css, same class names) --- */ .v3-pdp-breadcrumb { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 24px 0 8px; } .v3-pdp-breadcrumb a { color: var(--ink-soft); text-decoration: none; } .v3-pdp-breadcrumb a:hover { color: var(--accent); } .v3-pdp-breadcrumb .v3-pdp-current { color: var(--ink); } .v3-pdp-breadcrumb .v3-pdp-sep { margin: 0 6px; opacity: .5; } /* Breadcrumb above already spaces the page top - core.css's own margin-top:48px on the banner would double it up. Same fix as home.css's .v3-home-topbanner override. */ .v3-listing-topbanner .v3-banner-slot { margin-top: 0; } /* .v3-btn family moved to core.css (shared with home/cart/future pages) */ /* ============================================================ LAYOUT - sidebar + main ============================================================ */ /* padding-top/-bottom only, NOT the padding shorthand - this element also carries .v3-inner (24px side gutter), and a shorthand here would zero left/right since this rule loads after core.css and wins the cascade at equal specificity. */ .v3-listing-layout { display: grid; grid-template-columns: 256px 1fr; gap: 40px; padding-top: 32px; padding-bottom: 72px; align-items: start; } /* ============================================================ FILTER SIDEBAR ============================================================ */ .v3-listing-filters { position: sticky; top: 88px; } /* Desktop only (the <=900px drawer below is position:fixed and scrolls itself): cap the sticky sidebar to the visible area and scroll it independently. Uncapped, a filter list taller than the viewport had its lower half stuck off-screen until the product grid itself reached the top/bottom end and the sticky was released. */ @media (min-width: 901px) { .v3-listing-filters { max-height: calc(100vh - 88px - 24px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; } } .v3-listing-filters-head { display: none; } .v3-listing-filters-backdrop { display: none; } .v3-filter-group { padding: 18px 0; border-bottom: 1px solid var(--line); } .v3-filter-group:first-child { padding-top: 0; } .v3-filter-group:last-child { border-bottom: none; padding-bottom: 0; } .v3-filter-title { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; } .v3-filter-opts { display: flex; flex-wrap: wrap; gap: 8px; } .v3-filter-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-family: Manrope, sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1; cursor: pointer; border: 1.5px solid var(--line); border-radius: 999px; background: var(--plate); color: var(--ink-soft); text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease; user-select: none; } .v3-filter-pill:hover { border-color: var(--accent); color: var(--ink); } .v3-filter-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .v3-filter-pill:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; } .v3-filter-count { font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--panel); border-radius: 999px; padding: 1px 7px; min-width: 17px; text-align: center; } /* checked (Metal) / .is-active (Category link) share one selected look - navy fill, not the gold the reference uses: gold is reserved for prices only in this token system (core.css's own rule), navy is structure/selection, same as the header's active nav state. */ .v3-filter-pill:has(input:checked), .v3-filter-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; } .v3-filter-pill:has(input:checked) .v3-filter-count { background: var(--accent-text); color: var(--accent); } /* ============================================================ TOOLBAR - search / count / sort ============================================================ */ .v3-listing-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .v3-listing-filter-toggle { display: none; align-items: center; gap: 8px; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .v3-listing-filter-toggle:hover { border-color: var(--accent); color: var(--accent); } .v3-listing-search { flex: 1 1 220px; min-width: 160px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: Manrope, sans-serif; font-size: 14px; } .v3-listing-search::placeholder { color: var(--ink-soft); } .v3-listing-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .v3-listing-count { font-size: 13px; color: var(--ink-soft); white-space: nowrap; } .v3-listing-count b { color: var(--ink); font-weight: 700; } .v3-listing-sort { padding: 10px 34px 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: Manrope, sans-serif; font-size: 13.5px; cursor: pointer; appearance: auto; } .v3-listing-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ============================================================ GRID - same responsive formula as home.css's .v3-uniform-grid-5, copied under a listing-scoped name so this page needs no home.css. ============================================================ */ .v3-listing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } @media (max-width: 900px) { .v3-listing-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .v3-listing-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } .v3-listing-item.is-hidden-by-filter { display: none; } .v3-listing-empty, .v3-listing-no-matches { text-align: center; padding: 64px 0; color: var(--ink-soft); } .v3-listing-empty h2 { font-size: 22px; color: var(--ink); margin-bottom: 8px; } .v3-listing-no-matches { font-size: 14px; } /* ============================================================ MOBILE - off-canvas filter drawer, same shape as product.css's .v3-pdp-modal-backdrop pattern, rebuilt locally (product.js's pdpOpenModal/pdpCloseModal aren't loaded on this page). ============================================================ */ @media (max-width: 900px) { .v3-listing-layout { grid-template-columns: 1fr; gap: 24px; } .v3-listing-filter-toggle { display: inline-flex; } /* Toolbar reflow: flex-wrap wraps 4 mismatched-width items into a ragged 3rd row (Sort stranded alone next to leftover empty space). A named grid pins every control to an intentional cell instead - full-width Search up top (the highest-value control), Filters/ Count/Sort sharing one tidy row underneath. */ .v3-listing-toolbar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "search search search" "filter count sort"; gap: 10px 12px; margin-bottom: 20px; } .v3-listing-search { grid-area: search; } .v3-listing-filter-toggle { grid-area: filter; } .v3-listing-count { grid-area: count; text-align: center; overflow: hidden; text-overflow: ellipsis; } /* A native