/* Ported as-is from design/collection-page.html. Two things are
   deliberately NOT carried over, both because this page uses the theme's
   real get_header()/get_footer() instead of its own second header/footer:
     1. The "MINI SITE HEADER" block (.site-header, .brand-mark,
        .header-nav, .header-icons, .cart-count)  that markup is never
        output (see page-templates/collection.php).
     2. The site-footer rules that were embedded in a <style> tag inside
        the page's own <footer>  this theme's real footer (assets/css/site-footer.css)
        already covers the identical classes.
   The `body{...}` rule below IS kept (unlike those two)  this stylesheet
   only ever loads on the Collection template / Shop / category archives
   (see inc/enqueue.php), so it safely overrides style.css's global light
   `body` background just on those dark-themed pages, same as
   assets/css/page-product.css does for the product page.
   Everything else  values, selectors  is unchanged. */
:root{
  --bg:#0a0908; --bg-2:#100d09; --bg-3:#080706;
  --card-1:#16130e; --card-2:#0d0b08;
  --gold:#C9A236; --gold-light:#C9A236; --cream:#C9A236; --eyebrow:#C9A236; --label-gold:#C9A236; --tab-text:#cfc4ae;
  --ink-1:#f3efe7; --ink-0:#fbf8f2; --ink-2:#b7ada0; --ink-3:#a79d90; --ink-4:#8a8074; --ink-5:#6f665a; --ink-disabled:#7c7568;
  --on-gold:#000000;
  --hair:rgba(201,162,54,0.16); --hair-2:rgba(201,162,54,0.28); --hair-3:rgba(201,162,54,0.4);
  --border-cream:rgba(232,220,192,0.45);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); }

/* ============================================================
   SHARED TYPE / PRIMITIVES (mirrors hero + featured sections)
   ============================================================ */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:12.5px; font-weight:500; letter-spacing:5px; text-transform:uppercase;
  color:var(--eyebrow); margin-bottom:18px;
}
.eyebrow::before{ content:''; width:32px; height:1px; background:var(--gold); flex-shrink:0; }

a{ color:inherit; }

.btn-line{
  position:relative; display:inline-flex; align-items:center; width:fit-content;
  padding:14px 30px; border:1px solid var(--border-cream);
  font-size:11.5px; font-weight:500; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--ink-1); text-decoration:none; background:none; cursor:pointer;
  overflow:hidden; z-index:0; transition:color .35s ease, border-color .35s ease;
}
.btn-line::before{
  content:''; position:absolute; inset:0; background:#000000;
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease; z-index:-1;
}
.btn-line:hover{ color:#ffffff; border-color:#000000; }
.btn-line:hover::before{ transform:scaleX(1); }

/* ============================================================
   FEATURED CATEGORIES
   Real top-level product categories (fm_get_featured_categories() in
   inc/woocommerce-collection.php), added above the toolbar at the
   client's request to match an older design  a circular photo tile (that
   category's own WooCommerce thumbnail, or its most recent product's
   photo) plus an underlined label per category. Only rendered when the
   store actually has categories (see the PHP `if` around this markup in
   template-parts/collection-grid.php), so a catalog with none doesn't
   leave an empty heading sitting here.
   ============================================================ */
.featured-categories{ max-width:1600px; margin:0 auto; padding:16px 25px 2px; }
.featured-categories-title{
  font-family:'Playfair Display','Georgia',serif;
  font-weight:700; font-size:13px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ink-0); margin:0 0 12px; text-align:center;
}
/* Flex, not grid  a grid's auto-placement always fills an incomplete
   last row from its first column, so a lone wrapped item (e.g. "Chain")
   stayed pinned to the left under whichever column it happened to land
   in instead of centering under the row(s) above; `justify-content`
   there only centers the grid's overall track block, not each row's own
   leftover space. A centered flex row doesn't have that problem  every
   row, complete or not, centers independently. Each tile still gets a
   FIXED width (not sized to its own label, which is what caused the
   circles to drift out of column with each other in an earlier version)
   so every circle still lands in the same visual column on every row. */
.featured-categories-grid{
  display:flex; flex-wrap:wrap; justify-content:unset;
  gap:12px 16px;
}
.featured-category-tile{
  display:flex; align-items:center; justify-content: start; gap:10px; text-decoration:none;
  flex:0 0 150px;
}
.featured-category-photo{
  width:40px; height:40px; border-radius:var(--fm-radius-circle); overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-3);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.featured-category-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-category-photo svg{ width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.3; }
.featured-category-label{
  font-family:'Jost',sans-serif; font-size:11.5px; font-weight:500; letter-spacing:0.6px; text-transform:uppercase;
  color:var(--ink-0); border-bottom:1px solid var(--gold); padding-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  /* A flex child's default min-width is auto (its own content width, not
     0), which would let a long label (e.g. "Rings For Couples") push past
     the tile's fixed 150px instead of actually truncating with the
     ellipsis above. min-width:0 is what lets that ellipsis engage. */
  min-width:0;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.featured-category-tile:hover .featured-category-label{ color:var(--gold); }
/* Whichever category matches the current product_cat archive (see the
   is-active logic in template-parts/collection-grid.php)  a gold ring
   around its photo plus a bold gold label, same "you're here/this is
   picked" language as the swatch/chip selected-state rings elsewhere in
   this theme, rather than just the plain underline every tile already
   has at rest. */
.featured-category-tile.is-active .featured-category-photo{
  box-shadow:0 0 0 2px var(--gold), 0 2px 8px rgba(0,0,0,0.1);
}
.featured-category-tile.is-active .featured-category-label{
  color:var(--gold); font-weight:700;
}
@media (max-width: 620px){
  .featured-categories{ padding:14px 16px 2px; }
  .featured-categories-grid{ gap:10px 10px; }
  .featured-category-tile{ flex-basis:45%; }
  .featured-category-photo{ width:34px; height:34px; }
  .featured-category-photo svg{ width:15px; height:15px; }
  .featured-category-label{ font-size:11px; }
}

/* ============================================================
   TOOLBAR
   (the breadcrumb/title/description header section that used to sit
   above this  .collection-header et al  was removed at the user's
   request; the Featured Categories strip above, or the toolbar itself
   when a store has no categories yet, is now the first thing on the
   page.)
   ============================================================ */
.toolbar{
  max-width:1600px; margin:0 auto; padding:20px 25px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.toolbar-left{ display:flex; align-items:center; gap:18px; }
.filters-toggle{
  display:none; align-items:center; gap:10px; padding:11px 20px;
  border:1px solid var(--hair-3); background:none; color:var(--ink-1);
  font-family:'Jost',sans-serif; font-size:11.5px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase;
  cursor:pointer; transition:border-color .25s ease;
}
.filters-toggle svg{ width:14px; height:14px; stroke:var(--gold-light); fill:none; stroke-width:1.6; }
.filters-toggle:hover{ border-color:var(--gold); }
.filters-toggle .fcount{
  min-width:16px; height:16px; padding:0 4px; border-radius: var(--fm-radius-pill); background:var(--gold);
  color:var(--on-gold); font-size:9.5px; font-weight:600; display:none; align-items:center; justify-content:center;
}
.filters-toggle .fcount.show{ display:flex; }

.results-copy{ font-size:12.5px; color:var(--ink-4); letter-spacing:0.3px; }
.results-copy strong{ color:var(--ink-1); font-weight:500; }

.sort-field{ position:relative; display:flex; align-items:center; gap:12px; }
.sort-field label{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-4); }
.sort-select{
  appearance:none; -webkit-appearance:none;
  background:none; border:1px solid rgba(232,220,192,0.3); padding:11px 38px 11px 16px;
  font-family:'Jost',sans-serif; font-size:12.5px; color:var(--ink-1); cursor:pointer; min-width:190px;
}
.sort-field::after{
  content:''; position:absolute; right:16px; top:50%; width:8px; height:8px;
  border-right:1px solid var(--gold-light); border-bottom:1px solid var(--gold-light);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.sort-select:focus{ outline:none; border-color:var(--gold); }
.sort-select option{ background:#16130e; color:var(--ink-1); }

/* ============================================================
   LAYOUT: SIDEBAR + GRID
   ============================================================ */
.collection-body{
  max-width:1600px; margin:0 auto; padding:20px 25px 110px;
  display:grid; grid-template-columns:272px 1fr; gap:15px; align-items:flex-start;
}
/* Without this, the grid item wrapping .product-grid defaults to
   min-width:auto  its min-content size, which a nested auto-fill grid
   (see .product-grid below) can inflate beyond the actual space this
   1fr column has, forcing the whole row wider than the viewport (a
   horizontal scrollbar, and fewer visible columns than should fit). This
   lets it shrink to the space really available instead. */
.collection-main{ min-width:0; }

/* -------------------- SIDEBAR -------------------- */
.filter-sidebar{
  position:sticky; top:calc(var(--ph-header-h, 104px) + 16px);
  border:1px solid var(--hair); background:linear-gradient(175deg, var(--card-1) 0%, var(--card-2) 100%);
  box-shadow:0 10px 22px rgba(0,0,0,0.22);
  padding:8px 26px 26px;
}
.filter-sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 18px; border-bottom:1px solid var(--hair);
  margin-bottom:6px;
}
.filter-sidebar-head h3{
  margin:0; font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
  font-size:17px; color:var(--ink-1);
}
.clear-all{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.8px;
  color:var(--label-gold); text-decoration:underline; text-underline-offset:3px;
  transition:color .2s ease; visibility:hidden;
}
.clear-all.show{ visibility:visible; }
.clear-all:hover{ color:var(--gold-light); }

.active-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 0; border-bottom:1px solid var(--hair); margin-bottom:6px; }
.active-chips:empty{ display:none; border:none; padding:0; margin:0; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px;
  border:1px solid rgba(201,162,54,0.4); background:rgba(201,162,54,0.08);
  font-size:11px; color:var(--ink-1); letter-spacing:0.2px;
}
.chip button{
  width:15px; height:15px; border-radius: var(--fm-radius-sm); border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:13px; line-height:1;
  transition:color .2s ease;
}
.chip button:hover{ color:var(--gold-light); }

.filter-group{ border-bottom:1px solid var(--hair); padding:20px 0; }
.filter-group:last-child{ border-bottom:none; }
.filter-group-head{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  user-select:none;
}
.filter-group-title{
  font-family:'Jost',sans-serif; font-size:11.5px; font-weight:500; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--gold-light);
}
.filter-group-toggle{
  width:18px; height:18px; position:relative; flex-shrink:0;
}
.filter-group-toggle::before, .filter-group-toggle::after{
  content:''; position:absolute; background:var(--ink-4); transition:transform .3s ease, background .2s ease;
}
.filter-group-toggle::before{ left:0; top:50%; width:100%; height:1px; transform:translateY(-50%); }
.filter-group-toggle::after{ top:0; left:50%; width:1px; height:100%; transform:translateX(-50%); }
.filter-group.is-collapsed .filter-group-toggle::after{ transform:translateX(-50%) scaleY(0); }
.filter-group:hover .filter-group-toggle::before, .filter-group:hover .filter-group-toggle::after{ background:var(--gold-light); }

.filter-group-body{
  margin-top:14px; display:grid; gap:2px;
  grid-template-rows:1fr; overflow:hidden;
  transition:grid-template-rows .3s ease, opacity .25s ease, margin-top .3s ease;
}
.filter-group-body > div{ overflow:hidden; min-height:0; }
.filter-group.is-collapsed .filter-group-body{ grid-template-rows:0fr; opacity:0; margin-top:0; }

/* checkbox rows (category / availability)  the row itself is the hit
   target and hover surface (not just its text), with a soft gold wash on
   hover/checked so the list reads as a set of interactive rows rather
   than plain stacked text + tiny checkboxes. */
.check-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; font-size:13px; color:var(--ink-2);
  padding:4px 10px; margin:0 -10px; border-radius: var(--fm-radius-md);
  transition:background .2s ease, color .2s ease;
}
.check-row:hover{ background:rgba(201,162,54,0.08); }
.check-row input{ position:absolute; opacity:0; width:0; height:0; }
.check-row .box{
  width:17px; height:17px; border-radius: var(--fm-radius-sm); border:1px solid rgba(232,220,192,0.35); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.check-row .box svg{ width:10px; height:10px; stroke:var(--on-gold); fill:none; stroke-width:2.6; opacity:0; transition:opacity .15s ease, transform .15s ease; transform:scale(0.6); }
.check-row input:checked ~ .box{
  background:linear-gradient(160deg, var(--gold-light) 0%, var(--gold) 100%);
  border-color:var(--gold);
  box-shadow:0 3px 8px rgba(201,162,54,0.35);
}
.check-row input:checked ~ .box svg{ opacity:1; transform:scale(1); }
.check-row-label{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; font-family:'Jost',sans-serif; letter-spacing:0.15px; transition:color .2s ease; }
.check-row:hover .check-row-label,
.check-row:has(input:checked) .check-row-label{ color:var(--ink-0); }

/* the little emblem in front of the label  same circular-badge language
   as the homepage hero sidebar's category icons (assets/css/hero.css's
   .icon-wrap), reused here so a category carries the same mark wherever
   it shows up on the site instead of this list being plain text. */
.check-row-icon{
  width:26px; height:26px; flex-shrink:0; border-radius: var(--fm-radius-circle);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,162,54,0.4);
  transition:border-color .2s ease, background .2s ease;
}
.check-row-icon svg{ width:13px; height:13px; stroke:var(--gold-light); fill:none; stroke-width:1.3; transition:stroke .2s ease; }
.check-row:hover .check-row-icon,
.check-row:has(input:checked) .check-row-icon{ border-color:var(--gold); background:var(--gold); }
.check-row:hover .check-row-icon svg,
.check-row:has(input:checked) .check-row-icon svg{ stroke:var(--on-gold); }
.check-count{
  font-size:10.5px; color:var(--ink-4); flex-shrink:0; min-width:20px; text-align:center;
  padding:2px 7px; border-radius: var(--fm-radius-sm);
  background:rgba(232,220,192,0.05); border:1px solid rgba(232,220,192,0.1);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.check-row:hover .check-count{ background:rgba(201,162,54,0.16); border-color:rgba(201,162,54,0.3); color:var(--gold-light); }

/* price range */
.price-values{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-1); margin-bottom:14px; }
.price-values strong{ font-weight:500; color:var(--gold-light); }
.price-slider{ position:relative; height:32px; }
.price-slider .track{ position:absolute; top:50%; left:0; right:0; height:2px; background:rgba(232,220,192,0.2); transform:translateY(-50%); }
.price-slider .range{ position:absolute; top:50%; height:2px; background:var(--gold); transform:translateY(-50%); }
.price-slider input[type="range"]{
  position:absolute; top:0; left:0; width:100%; height:32px; margin:0;
  -webkit-appearance:none; appearance:none; background:none; pointer-events:none;
}
.price-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:all;
  width:16px; height:16px; border-radius: var(--fm-radius-circle); background:var(--cream); border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--gold); cursor:pointer; margin-top:0;
}
.price-slider input[type="range"]::-moz-range-thumb{
  pointer-events:all; width:16px; height:16px; border-radius: var(--fm-radius-circle); background:var(--cream);
  border:2px solid var(--bg); box-shadow:0 0 0 1px var(--gold); cursor:pointer;
}
.price-slider input[type="range"]::-webkit-slider-runnable-track{ background:transparent; }

/* Metal/Carat/Ring Size now share the exact same .check-row markup and
   style as Category (see renderCheckList() in page-collection.js)  no
   separate pill-grid rules needed here any more. */
.check-row-icon-dot{ border-color:rgba(0,0,0,0.3); }

/* Ring Size lists ~20 rows (every UK size a ring is offered in)  capping
   its height and scrolling internally keeps the sidebar from being dominated
   by one filter group. */
#group-ring-size{
  max-height:230px; overflow-y:auto; padding-right:6px; margin-right:-6px;
  scrollbar-width:thin; scrollbar-color:rgba(201,162,54,0.45) transparent;
}
#group-ring-size::-webkit-scrollbar{ width:6px; }
#group-ring-size::-webkit-scrollbar-track{ background:transparent; }
#group-ring-size::-webkit-scrollbar-thumb{ background:rgba(201,162,54,0.45); border-radius: var(--fm-radius-pill); }
#group-ring-size::-webkit-scrollbar-thumb:hover{ background:rgba(201,162,54,0.7); }

/* availability toggle */
.switch-row{ display:flex; align-items:center; justify-content:space-between; }
.switch-row .lbl{ font-size:13px; color:var(--ink-2); }
.switch{ position:relative; width:38px; height:20px; flex-shrink:0; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.switch .rail{ position:absolute; inset:0; border:1px solid rgba(232,220,192,0.35); transition:background .2s ease, border-color .2s ease; }
.switch .knob{ position:absolute; top:2px; left:2px; width:14px; height:14px; background:var(--ink-4); transition:transform .25s ease, background .2s ease; }
.switch input:checked ~ .rail{ background:rgba(201,162,54,0.25); border-color:var(--gold); }
.switch input:checked ~ .knob{ transform:translateX(18px); background:var(--cream); }

.sidebar-help{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--hair);
  font-size:12px; line-height:1.7; color:var(--ink-4);
}
.sidebar-help a{ color:var(--gold-light); text-decoration:none; border-bottom:1px solid rgba(201,162,54,0.4); }

/* -------------------- PRODUCT GRID --------------------
   The .jewel-card itself (its faceted photo frame and Quick Summary
   drawer) lives in the shared assets/css/product-card.css, enqueued
   alongside this file (see inc/enqueue.php) - same card, same file, as
   the home page's Featured Collections section. Its drawer only ever
   slides within its own card's width, so unlike the old side-flyout
   design there is no viewport-edge-flip or narrow-width fallback for
   this file to keep in sync with.

   Column count is fluid, not a fixed page-specific number: `auto-fill` +
   `minmax()` lets the grid fit as many 220px+-wide cards as the available
   width allows, so it adapts to any screen size on its own rather than
   needing a hand-picked column count per breakpoint - down to a fixed 3
   columns on tablet-ish widths and 1 on phones, where a fluid count would
   either be too cramped or make single-card rows. */
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;
}
.jewel-card.is-hidden{ display:none; }

/* empty state */
.empty-state{
  grid-column:1/-1; text-align:center; padding:90px 20px;
  border:1px dashed var(--hair-2);
}
.empty-state svg{ width:40px; height:40px; stroke:var(--ink-4); fill:none; stroke-width:1.1; margin-bottom:18px; }
.empty-state h4{ font-family:'Playfair Display', serif; font-weight:600; font-size:19px; color:var(--ink-1); margin:0 0 8px; }
.empty-state p{ font-size:13.5px; color:var(--ink-4); margin:0 0 22px; }

/* soft auto-loading  replaces the old numbered pagination. The sentinel
   itself is invisible (just a scroll trigger for the IntersectionObserver
   in page-collection.js); the status line only ever shows the "you've
   seen everything" message once state.loaded has caught up with the
   filtered count, and stays empty the rest of the time so there's no
   "Loading…" flash to manage for what's really just an instant re-slice
   of data already in memory. */
.scroll-sentinel{ height:1px; margin-top:40px; }
.scroll-status{
  text-align:center; margin:16px 0 0; font-size:12.5px; letter-spacing:0.3px;
  color:var(--ink-4); min-height:1px;
}
.scroll-status.is-end{ color:var(--ink-3); }

/* -------------------- MOBILE DRAWER -------------------- */
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(6,5,4,0.6); z-index:60;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.sidebar-overlay.is-open{ opacity:1; visibility:visible; }
.sidebar-close{
  display:none; width:30px; height:30px; border-radius: var(--fm-radius-circle); border:1px solid rgba(232,220,192,0.4);
  background:none; color:var(--ink-2); font-size:16px; cursor:pointer; align-items:center; justify-content:center;
}

/* tablet-ish widths: a fixed 3 columns reads better here than letting
   auto-fill decide  at this width auto-fill would often only manage 2
   (or an oddly cramped 3), so this is a deliberate override, not a
   fallback. */
@media (max-width:1180px){
  .product-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:920px){
  .collection-body{ grid-template-columns:1fr; }
  /* Tablet: the base 25px side gutter (set on both .toolbar and
     .collection-body above) reads as wasted space once the grid's down
     to fewer columns  10px here instead, tightened further to 5px on
     phones in the 620px block below. */
  .collection-body{ padding-left:10px; padding-right:10px; }
  .toolbar{ padding-left:10px; padding-right:10px; }
  /* A floating pill instead of sitting inline in the toolbar  scrolling
     down past the toolbar (a tall grid, easy to do) used to mean
     scrolling all the way back up just to open filters again. Fixed to
     the viewport, it's reachable from anywhere on the page. Hidden while
     the drawer itself is open (body.fm-filters-open, toggled by
     assets/js/page-collection.js) so there's never two ways to close/open
     it stacked on top of each other. */
  .filters-toggle{
    display:inline-flex;
    position:fixed;
    left:50%;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%);
    z-index:50;
    background:var(--card-1);
    border-color:var(--hair-3);
    border-radius: var(--fm-radius-md);
    box-shadow:0 10px 26px rgba(0,0,0,0.45);
  }
  body.fm-filters-open .filters-toggle{ display:none; }
  .sidebar-overlay{ display:block; }
  .filter-sidebar{
    position:fixed; top:0; left:0; height:100%; width:320px; max-width:86vw;
    z-index:70; overflow-y:auto; padding:22px 24px 40px;
    transform:translateX(-100%); transition:transform .35s ease;
    border-right:1px solid var(--hair-3); border-top:none; border-bottom:none; border-left:none;
  }
  .filter-sidebar.is-open{ transform:translateX(0); }
  .sidebar-close{ display:flex; }
}

@media (max-width:620px){
  .toolbar{ padding-top:16px; }
  /* Phones: tighter still than the 920px block's 10px  5px either side. */
  .collection-body{ padding-left:5px; padding-right:5px; }
  .toolbar{ padding-left:5px; padding-right:5px; }
  /* 2-up, not 1  matches every other product grid on the site (Featured
     Collections, cart/product related grids, Trending). */
  .product-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .toolbar{ flex-direction:column; align-items:flex-start; }
  .sort-field{ width:100%; justify-content:space-between; }
  .sort-select{ min-width:0; flex:1; }
}

/* =========================================================
   LIGHT THEME
   This page is entirely dark by design (the :root block above sets
   body{background:var(--bg)} directly, unlike the tokens.css-driven
   pages which only have a dark band or two)  redefining its own local
   custom properties here turns the whole page light in one place, the
   same way the :root block above defines it dark in one place. --cream/
   --gold/--gold-light (accent fills used as solid button/active
   backgrounds, not running text) and the gold-tinted --hair borders are
   left alone  they already read fine against a light page. Only the
   tokens actually used as BODY TEXT (--ink-*, --eyebrow, --label-gold,
   --tab-text) and the translucent --border-cream (meant to be visible on
   a dark panel) are redefined.
   ========================================================= */
html[data-theme="light"] {
  --bg: #F5EDE6; --bg-2: #ffffff; --bg-3: #F5EDE6;
  --card-1: #ffffff; --card-2: #F5EDE6;
  --eyebrow: #C9A236; --label-gold: #C9A236;
  /* Every ink tier below (and --tab-text) pinned to solid black instead
     of a lighter/darker gray per tier  see page-product.css's identical
     rewrite (same local variable system, same reasoning) for the full
     comment. --ink-5 was missing from this override entirely before,
     silently falling back to the dark theme's own warm-gray value. */
  --tab-text: #000000;
  --ink-0: #000000; --ink-1: #000000; --ink-2: #000000; --ink-3: #000000; --ink-4: #000000; --ink-5: #000000;
  --ink-disabled: #a89f92;
  --border-cream: rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .sort-select option { background: #ffffff; }
/* .check-row .box/.check-count hardcode their own cream-tinted rgba()
   borders instead of reading var(--border-cream) like the rest of this
   file  fine at low opacity against the dark theme's near-black sidebar,
   but the same faint light-on-light border all but disappears against
   this cream sidebar background, which is exactly why the filter
   checkboxes were so hard to see. Same treatment var(--border-cream)
   already gets above, just inverted to dark-on-cream at comparable
   opacities instead of leaving these three unthemed. */
html[data-theme="light"] .check-row .box{ border-color: rgba(0, 0, 0, 0.35); }
html[data-theme="light"] .check-count{
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
}