/* GW Collection Grid
   Built from Figma 29:5939 (desktop 1440 x 2041.148) / 29:5475 (mobile 390 x 1934.222).

   Mobile-first: the base rules ARE the mobile frame; the >=1025px block is the
   desktop frame. Every colour is a scoped custom property whose var() fallback
   is the Figma literal, so a blank setting keeps the design.

   Radius is 0 on every pill, card and image in both frames. The ONE exception
   is pagination, where Figma draws the ACTIVE cell at 0 and the inactive cells
   at 8 — reproduced literally (see the section file's header note).
*/

.gw-collection-grid {
  background: var(--gw-cg-bg, #ffffff);
}

.gw-collection-grid *,
.gw-collection-grid *::before,
.gw-collection-grid *::after {
  box-sizing: border-box;
}

/* assets/theme.min.css gives EVERY li a margin-bottom:4.5px, and a flex or grid
   parent adds it to its own height. It does not show on the li's own box, so it
   reads as a mystery 4.5px: the category row measured 99.5 against the frame's
   95, the grid row pitch 410.54 against 406.037, and the pagination 100.5
   against 96. Every list in this section is layout, never prose. */
.gw-collection-grid li {
  margin: 0;
}

.gw-collection-grid__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 16px;
}

/* ---------- category pill row ----------
   Figma draws mobile content 656 wide and CLIPS it at the 390 frame edge, not
   at the 358 content box — "Limited edition" is cut mid-word right at the
   screen edge, the cue that more categories scroll in, and "Decor &
   Accessories" never appears. Shipping a scroller instead: identical at rest,
   reachable in use.
   The scroller bleeds through __inner's 16px gutter on both sides (margin -16,
   width left auto so the margins widen it) and pads itself back in, so the cut
   lands on the screen edge as drawn. Clipped at the content box instead, the
   cut sat 16px short of the edge, and at 360 wide the 4th pill fell entirely
   outside the box — the row read as complete. */
.gw-collection-grid__cats {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 28px 16px;
  margin: 0 -16px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.gw-collection-grid__cats::-webkit-scrollbar {
  display: none;
}

/* The mobile frame's root declares gap:40 between the category row and the
   results block (row ends y143, Frame 155 starts y183). Desktop stacks them
   flush — its results bar sits at y95, immediately after the 95-tall row. */
.gw-collection-grid__cats {
  margin-bottom: 40px;
}

/* Figma draws the pill at a flat 39 with the 1px stroke INSIDE it (8 + 23 text
   + 8 = 39). In CSS a border adds to an auto-height inline-flex, which lands it
   at 41.5 — so the height is pinned and the vertical padding dropped, leaving
   align-items:center to do the same job. Horizontal padding is untouched. */
.gw-collection-grid__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 0 16px;
  border: 1px solid var(--gw-cg-border, #cecece);
  border-radius: 0;
  background: none;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gw-cg-text, #242424);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}

.gw-collection-grid__cat--active {
  border-color: var(--gw-cg-active, #4a3b1f);
  color: var(--gw-cg-active, #4a3b1f);
}

/* ---------- results + controls bar ----------
   The filter/sort UI inside .gw-collection-grid__filters is the THEME'S own
   markup from snippets/main-collection-filtering-sorting.liquid. Everything
   below restyles it to the frames; none of it is a rebuild. Selectors are
   scoped under .gw-collection-grid so no other template that renders that
   snippet is touched. */
/* The mobile frame lays the controls out as three lines: the results count on
   its own full-width row, then Filters and Sort sharing a 2-up row
   (173 + 12 + 173 = 358), then the applied-facet chips. Their markup nests the
   Filters trigger two levels down, so both wrappers go `display:contents` (see
   the mobile block) and the bar lays the real controls out directly, ordered.

   row-gap is 0 ON PURPOSE. The chips row is always in the markup and 0 tall
   until a facet is applied, so a row-gap would pad the bar by 24 whenever it is
   empty. The 24 rides on the count's own margin; the chips carry their own. */
.gw-collection-grid__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  /* mobile frame authors 24 between the controls row and the first card row */
  margin-bottom: 24px;
}

.gw-collection-grid__count {
  order: 1;
  flex: 1 0 100%;
  margin: 0 0 24px;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gw-cg-count, #252626);
  white-space: nowrap;
}

/* Mobile: dissolved so the Filters trigger, the chips and our sort pill become
   direct children of the bar and can be ordered into the frame's three lines.
   The element stays in the DOM, so `.collection-wrapper`'s 49 --filter-*
   variables still inherit from it. Desktop puts the box back. */
/* Double-scoped ON PURPOSE. This element also carries the theme's
   `.collection-wrapper`, which declares `display:flex` at the SAME specificity
   from a <style> the snippet renders inside the section — i.e. after this
   file's <link>. A single-class rule here loses the tie on source order and
   the trigger silently stays nested. */
.gw-collection-grid .gw-collection-grid__filters {
  display: contents;
}

/* ---------- sort pill, BOTH breakpoints ----------
   Mobile: the right half of the frame's 2-up controls row, 173 x 40, padding
   8/16, label and value at x16, a 16px chevron hard right. Desktop: the same
   pill at 34 tall, flush with the grid's right edge. It replaces the theme's
   sort UI at every width — theirs is hidden further down — and sorts nothing
   itself; <gw-collection-sort> hands the value to their own #SortBydesktop.

   position:relative is structural: the <select> is stretched across the whole
   box below, which is what makes the entire pill the click target. */
.gw-collection-grid__msort {
  order: 3;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--gw-cg-border, #cecece);
  border-radius: 0;
  background: none;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gw-cg-text, #242424);
  white-space: nowrap;
  /* the whole pill is the control — gw-collection-sort.js forwards a click
     anywhere in it to the select */
  cursor: pointer;
}

/* Painted UNDER the select and deliberately inert: every pointer event belongs
   to the select stretched over them, so no part of the pill is dead. */
.gw-collection-grid__msort-label,
.gw-collection-grid__msort-value {
  margin: 0;
  font: inherit;
  color: inherit;
  pointer-events: none;
}

.gw-collection-grid__msort-label {
  flex: none;
}

/* The value shrinks before the label does, and ellipsises rather than pushing
   the chevron out — Shopify's own labels run to "Alphabetically, A-Z" while the
   frame draws a 3-character "A-Z". */
.gw-collection-grid__msort-value {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* THE SELECT IS THE PILL. Stretched across the whole box at opacity 0, so a
   click on the border, the padding, the label, the value or the chevron all
   land on the control itself. This is why the value above is ours to draw. */
.gw-collection-grid__msort-select {
  position: absolute;
  /* Offset and sized past the padding box ON PURPOSE. An absolutely positioned
     child is laid out against the PADDING box, which stops inside the pill's
     1px border and leaves that border strip as the one dead edge on the
     control. The explicit size is needed because a <select> resolves `width`
     from its own intrinsic box rather than stretching between left and right. */
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  /* theme.min.css carries `input, select, textarea { max-width: 100% }`, and
     100% here is the padding box — which clamps the width above straight back
     to the dead-border case. */
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Keyboard users get the focus ring the transparent select cannot show. */
.gw-collection-grid__msort:focus-within {
  outline: 2px solid var(--gw-cg-active, #4a3b1f);
  outline-offset: 2px;
}

/* Pushed hard right, as the frame draws it (icon x141 in a 173 pill = 16 of
   right padding). */
.gw-collection-grid__msort .gw-collection-grid__icon--chev {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  pointer-events: none;
}

/* The theme's own sort control, hidden at EVERY width — this pill replaces it.
   Hidden, never removed: component-filtering.js binds its sort listeners behind
   `if (this.sortByDesktop && this.sortByMobile)`, so deleting either select
   from the DOM would silently kill sorting altogether. Hiding it also clears
   the duplicate sort (and its "SORT BY" heading) from the mobile drawer, which
   is redundant now that the pill sits beside the Filters trigger. */
.gw-collection-grid .collection-filters__item.sorting {
  display: none !important;
}

.gw-collection-grid__msort .gw-collection-grid__icon--chev svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* Their markup renders the active-facet chips TWICE — one set for the desktop
   row, one for the mobile drawer — and both were visible at once. Show only the
   set belonging to the current breakpoint. */
.gw-collection-grid .active-facets-desktop {
  display: none;
}

/* Their loading label is a .hidden span inside each chip; it was rendering as
   literal "loading..." text next to every facet name. */
.gw-collection-grid .active-facets__button--loading-icon.hidden,
.gw-collection-grid .active-facets__button .hidden {
  display: none !important;
}

/* Active-facet chips — the theme's, squared off. */
.gw-collection-grid .active-facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.gw-collection-grid .active-facets__button {
  border-radius: 0;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 14px;
  line-height: normal;
}

/* ---------- the grid ---------- */
.gw-collection-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gw-collection-grid__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.gw-collection-grid__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.gw-collection-grid__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--gw-cg-image-bg, #e7e7e7);
  border-radius: 0;
  overflow: hidden;
}

.gw-collection-grid__media img,
.gw-collection-grid__media svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.gw-collection-grid__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.gw-collection-grid__price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gw-cg-text, #242424);
  white-space: nowrap;
}

/* Figma draws a 92px "Product Name" and declares nowrap. Real titles are
   longer, so the title truncates instead of shoving the price off the card. */
.gw-collection-grid__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-collection-grid__price {
  flex: none;
}

/* ---------- stars ----------
   theme-icon's star at 17.04 already matches this design's 17.037 exactly, so
   no star asset ships. Figma pitch is 18.740739 on a 17.037 glyph -> 1.704 gap. */
.gw-collection-grid__stars {
  display: flex;
  align-items: center;
  gap: 1.704px;
  color: var(--gw-cg-star, #c8a96a);
  line-height: 0;
}

.gw-collection-grid__stars svg {
  display: block;
}

/* ---------- pagination ---------- */
.gw-collection-grid__pagination {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 24px 0;
  /* The mobile root authors gap:40 between the results block and the
     pagination. With the pagination's own 24 of padding that is the frame's 64
     from the last card's bottom to the top of the "1" cell. */
  margin: 40px 0 0;
  list-style: none;
}

.gw-collection-grid__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  font-family: var(--gw-cg-numeral-font, "Jost", sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: var(--gw-cg-page-text, #111111);
  /* Figma: inactive cells carry radius 8 while the active one carries 0. */
  border-radius: 8px;
}

.gw-collection-grid__page--current {
  background: var(--gw-cg-page-active-bg, #111111);
  color: var(--gw-cg-page-active-text, #ffffff);
  border-radius: 0;
}

.gw-collection-grid__page--nav {
  border-radius: 0;
  background: var(--gw-cg-bg, #ffffff);
}

.gw-collection-grid__page--ellipsis {
  pointer-events: none;
}

/* ---------- empty / placeholder ----------
   Neither is drawn in the design; both are required for a working filter. */
.gw-collection-grid__empty,
.gw-collection-grid__placeholder {
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 18px;
  line-height: normal;
  color: var(--gw-cg-text, #242424);
  padding: 24px 0;
}

.gw-collection-grid__clear {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ================= mobile controls =================
   At <=1025 their own CSS makes `collection-filtering-form` position:fixed —
   the form IS the off-canvas drawer, and the sort select lives inside it. The
   frame draws Filters and Sort as a 2-up row, which cannot be reproduced by CSS
   alone without lifting the sort out of the drawer, i.e. changing their markup.
   Their pattern is kept and restyled instead: one full-width Filters trigger
   that opens a drawer holding both the facets and the sort. See the note in the
   section file. The !important flags are scoped to .gw-collection-grid and are
   there because .btn pins height and font-size from theme.min.css. */
@media screen and (max-width: 1024px) {
  /* THREE wrappers sit between the bar and the trigger, not two: our
     `__filters`, the snippet's own `classes:` div (`__filters-inner`), and
     `.collection-filters`. All three dissolve, or the trigger is not a flex
     item of the bar and its order/flex are silently inert. `.collection-filters`
     has two other children — the drawer form and the drawer overlay — and both
     are position:fixed, so neither joins the row. */
  .gw-collection-grid .gw-collection-grid__filters-inner,
  .gw-collection-grid .collection-filters {
    display: contents;
  }

  /* Left half of the frame's 2-up row: 173 x 40 beside the sort pill. */
  .gw-collection-grid .mobile-facets__open {
    order: 2;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    width: auto;
    height: 40px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 16px !important;
    margin: 0;
    overflow: visible !important;
    border: 1px solid var(--gw-cg-border, #cecece) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: var(--header-font-stack, "EB Garamond", serif) !important;
    /* 0, not 14 — this zeroes the theme's own "Filter/Sort" text node. The
       frame's label is drawn by ::before below, because the button is THEIR
       markup and its string comes from a locale key shared with every other
       template that renders the snippet. The original text stays in the
       accessibility tree, where it still describes the drawer correctly. */
    font-size: 0 !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--gw-cg-text, #242424) !important;
    white-space: nowrap;
  }

  .gw-collection-grid .mobile-facets__open::before {
    content: "Filters";
    font-size: 14px;
    line-height: normal;
  }

  /* The frame's 24 x 24 sliders glyph. A mask rather than an inline SVG,
     because this is the theme's button — the file paints itself with
     currentColor, and a mask keeps that behaviour from the outside. */
  .gw-collection-grid .mobile-facets__open::after {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--gw-cg-sliders) center / contain no-repeat;
    mask: var(--gw-cg-sliders) center / contain no-repeat;
  }

  .gw-collection-grid .mobile-facets__open svg {
    width: 24px !important;
    height: 24px !important;
    flex: none;
  }

  /* Third line of the bar: the applied-facet chips, full width under the two
     pills. 0 tall until a facet is applied, which is why the bar carries no
     row-gap — the chips supply their own spacing via .active-facets > *. */
  .gw-collection-grid .collection-filters > .container {
    order: 4;
    flex: 1 0 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
}

/* ================= desktop ================= */
@media screen and (min-width: 1025px) {
  /* ================= theme filter/sort restyling — DESKTOP ONLY =================
     Every rule below repaints the theme's own facet markup into the desktop
     frame. It is scoped to this breakpoint ON PURPOSE: below 1025 the SAME
     markup is the off-canvas drawer, and the frames draw no open state for it
     (design spec OPEN QUESTION 10). Applied at every width these rules gutted
     that drawer — they stripped its SORT BY / FILTER BY headings and its
     padding, forced the hidden `.facets__form-inner.desktop` row back into it
     as a row of overflowing pills, and pinned its full-width accordion rows to
     the inline pill's 34/40px box. The drawer is the theme's; leave it alone. */

  /* Strip the theme's own chrome that the frames do not draw. The sort label is
     NOT stripped — it carries the translated "Sort by" string, which is the
     frame's "Sort By:" prefix. */
  .gw-collection-grid .facets__heading {
    display: none !important;
  }

  .gw-collection-grid .collection-filters,
  .gw-collection-grid .facets,
  .gw-collection-grid .facets__form,
  .gw-collection-grid .gw-collection-grid__filters-inner {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
  }

  /* Work WITH their CSS grid rather than forcing flex over it. Theirs is
     `grid-template-columns: 1fr 2fr` with `grid-template-rows: auto auto` and the
     children explicitly placed; re-columning it to `auto 1fr` lets the pill row
     size to its content and the sort sit hard right, while the active-facet chips
     keep their own second row. Forcing flex put the chips in the row as a third
     sibling, which ate the free space and made `margin-left:auto` resolve to 0. */
  .gw-collection-grid .facets__form-inner.desktop {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    /* No row gap: the chips row is present but empty until a facet is applied,
       and a gap there would pad the bar to 52 against the frame's 34. The spacing
       rides on the chips themselves, so it only exists when they do. */
    row-gap: 0;
    width: 100%;
  }

  .gw-collection-grid .facets__form-inner.desktop .facets__wrapper {
    grid-column: 1;
    grid-row: 1;
  }

  .gw-collection-grid .facets__form-inner.desktop .collection-filters__item.sorting {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .gw-collection-grid .facets__form-inner.desktop .active-facets-desktop {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Margin on the children, not the container, so an empty chips row is 0 tall. */
  .gw-collection-grid .active-facets > * {
    margin-top: 16px;
  }

  .gw-collection-grid .facets__wrapper {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* theirs is `flex: 0 1 auto` + wrap, which squeezed three pills onto two
       rows; the row must size to its pills and never shrink */
    flex: 0 0 auto;
    gap: 12px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Every facet pill and the sort control share one box, so a missing border on
     one of them is not possible. */
  .gw-collection-grid .facets__summary,
  .gw-collection-grid .collection-filters__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    height: 40px;
    min-height: 0;
    padding: 0 12px 0 16px;
    margin: 0;
    border: 1px solid var(--gw-cg-border, #cecece);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--header-font-stack, "EB Garamond", serif);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    color: var(--gw-cg-text, #242424);
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
  }

  .gw-collection-grid .facets__summary::-webkit-details-marker,
  .gw-collection-grid .facets__summary::marker {
    display: none;
    content: "";
  }

  /* Their <details> draws its OWN 1px rgba(36,36,36,.25) ring around the summary,
     which sat 1px outside ours and read as a thick, doubled border (92.6x36
     wrapping a 90.6x34 pill). The pill owns the only border. */
  .gw-collection-grid .facets__disclosure {
    position: relative;
    margin: 0;
    flex: none;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .gw-collection-grid .facets__summary .inline-icon--wrapper,
  .gw-collection-grid .facets__summary .dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    line-height: normal;
  }

  /* Theirs is position:absolute, so the label ran underneath it — "Availability"
     and "Chain color" both collided with the chevron. Put it back in flow and let
     the flex row place it. */
  .gw-collection-grid .facets__summary .icon-caret,
  .gw-collection-grid .collection-filters__item.sorting .icon-caret,
  .gw-collection-grid .collection-filters__item.sorting .select > svg {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 14px !important;
    height: 14px !important;
    /* min-width beats width: theirs pins the glyph at 16 and the frames draw 14 */
    min-width: 14px !important;
    min-height: 14px !important;
    /* theirs also carries margin: 0 12px, which added 12px before the chevron on
       top of the 8px flex gap and another 12px after it — 24px of slack that made
       the pill look loose and the chevron detached from its label */
    margin: 0 !important;
    flex: none;
    color: currentColor;
  }

  /* The theme shows a count bubble; the frames do not. Kept only when it carries
     a number, so an applied facet is still legible. */
  .gw-collection-grid .count-bubble:empty {
    display: none;
  }

  /* The dropdown panel — the frames draw no open state, so this is the theme's
     own panel squared off and given a complete 1px border on all four sides. */
  .gw-collection-grid .facets__display {
    overflow: visible;
    position: absolute;
    z-index: 6;
    top: calc(100% - 1px);
    left: 0;
    width: max-content;
    min-width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid var(--gw-cg-border, #cecece);
    border-radius: 0;
    background: var(--gw-cg-bg, #ffffff);
    box-shadow: none;
  }

  .gw-collection-grid .facets__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: auto;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gw-cg-border, #cecece);
    font-family: var(--header-font-stack, "EB Garamond", serif);
    font-size: 14px;
    line-height: normal;
    color: var(--gw-cg-text, #242424);
  }

  .gw-collection-grid .facets__list {
    margin: 0;
    padding: 8px 0;
    list-style: none;
  }

  .gw-collection-grid .facets__item {
    margin: 0;
    padding: 0;
    height: auto;
  }

  .gw-collection-grid .facet-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    font-family: var(--header-font-stack, "EB Garamond", serif);
    font-size: 14px;
    line-height: normal;
    color: var(--gw-cg-text, #242424);
  }

  /* The padding was landing on the container AND on each field, and the fields
     could not shrink, so the two inputs overflowed the 320px panel and it grew a
     horizontal scrollbar. Container pads; fields share the remaining width. */
  .gw-collection-grid .facets__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    width: auto;
    height: auto;
  }

  .gw-collection-grid .facets__price .field--price {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
  }

  .gw-collection-grid .facets__price .field__input {
    box-sizing: border-box;
    height: 34px;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 8px;
    border: 1px solid var(--gw-cg-border, #cecece);
    border-radius: 0;
    font-family: var(--header-font-stack, "EB Garamond", serif);
    font-size: 14px;
    line-height: normal;
  }

  .gw-collection-grid .facets__price .field__label {
    position: static;
    height: auto;
    margin: 0;
    font-family: var(--header-font-stack, "EB Garamond", serif);
    font-size: 14px;
    line-height: normal;
    color: var(--gw-cg-text, #242424);
  }

  /* Sort: a native <select>, so only one thing can ever be open at a time. */
  /* Sort: a native <select>, so only one thing can ever be open at a time.
     The frame draws it as one pill reading "Sort By:  A-Z" — the theme's own
     label supplies the prefix and the select supplies the value, so the BORDER
     belongs on the field that wraps both, not on the select. */
  .gw-collection-grid .collection-filters__item.sorting {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .gw-collection-grid .collection-filters__label {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    font-family: var(--header-font-stack, "EB Garamond", serif);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    color: var(--gw-cg-text, #242424);
    white-space: nowrap;
    /* locale ships "Sort by"; the frame draws "Sort By:" */
    text-transform: capitalize;
  }

  .gw-collection-grid .collection-filters__label::after {
    content: ":";
  }

  /* The select and its chevron, stripped bare — the field owns the box. */
  .gw-collection-grid .collection-filters__item.sorting .select {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  /* A native <select> reserves the width of its WIDEST option, so the pill sized
     itself to "Alphabetically, A-Z" (207.6 measured) while displaying "Featured".
     `field-sizing: content` sizes it to the SELECTED option instead, which is how
     the frame draws it — a pill that hugs its value. max-width clamps the few
     verbose Shopify labels, and is also the fallback where field-sizing is not
     supported yet (Safari, Firefox), where the value ellipsises instead.

     The frame's 121 pill cannot be reached exactly: it draws the value as "A-Z",
     while Shopify's own label for that option is "Alphabetically, A-Z". */
  .gw-collection-grid .collection-filters__sort {
    width: auto;
    min-width: 0;
    max-width: 96px;
    field-sizing: content;
    text-overflow: ellipsis;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--header-font-stack, "EB Garamond", serif);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    color: var(--gw-cg-text, #242424);
    cursor: pointer;
  }
  /* 1440 frame: 64 inset each side -> content 1312.
     Bottom is 136, not 64: the frame stacks 48 of padding on the white card
     (29:5940), 64 on the outer frame (29:5939), and 24 of slack left by the
     card's explicit height 1945.148 against content ending at 1873.148. */
  .gw-collection-grid__inner {
    padding: 32px 64px 136px;
  }

  .gw-collection-grid__cats {
    gap: 32px;
    justify-content: center;
    overflow-x: visible;
    /* no scroller here, so no gutter bleed: back inside the 1312 box */
    padding: 28px 0;
    /* desktop draws the results bar flush under the 95-tall row */
    margin: 0;
  }

  /* Desktop: count, then the theme's inline facet row, then sort pushed flush
     right. Figma has the count 96 wide at x0 and the facets starting at x112 —
     96 + the 16px gap = 112 exactly. The mobile wrap/order layout is undone
     here: one nowrap row, and the two dissolved wrappers get their boxes back. */
  .gw-collection-grid__bar {
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 0;
  }

  .gw-collection-grid__count {
    order: 0;
    flex: none;
    width: auto;
    margin: 0;
  }

  /* Double-scoped for the same reason as the base rule. `flex`, not `block`:
     that is what `.collection-wrapper` was already computing here before the
     mobile row existed, and desktop measured exact against the frame with it. */
  .gw-collection-grid .gw-collection-grid__filters {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Same pill as mobile, at the frame's desktop box: 34 tall, padding 8/8/16/12,
     a 14px chevron, hugging its content and pushed flush with the grid's right
     edge by __filters growing beside it. */
  .gw-collection-grid__msort {
    order: 0;
    flex: none;
    height: 34px;
    padding: 0 12px 0 16px;
  }

  .gw-collection-grid__msort .gw-collection-grid__icon--chev {
    width: 14px;
    height: 14px;
  }

  /* Desktop: 32, matching the grid's own gutter. The frame draws 66 here, but
     that is free space from centring a fixed-height grid container, not an
     authored value — the same call as the header's 58.5px breadcrumb gap. */
  .gw-collection-grid__bar {
    margin-bottom: 32px;
  }

  .gw-collection-grid .active-facets-desktop {
    display: flex;
  }

  .gw-collection-grid .active-facets-mobile {
    display: none;
  }

  /* The frames draw these at 34 on desktop and 40 on mobile, and the desktop
     pill is `items-center justify-center` with gap 8 — NOT space-between, which
     pushed the chevron to the edge and left dead air after the label. */
  .gw-collection-grid .facets__summary,
  .gw-collection-grid .collection-filters__field {
    height: 34px;
    justify-content: center;
  }

  /* Theirs flex-grows to fill the summary, which left ~26px of slack and
     pushed the chevron away from its label. Hug the content so the pill sizes
     to label + 8 + chevron, as the frame draws it. */
  .gw-collection-grid .facets__summary .inline-icon--wrapper,
  .gw-collection-grid .facets__summary .dropdown-icon {
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
  }

  /* 1312 - (3 x 32) = 1216 / 4 = 304, the frame's exact card width.
     padding-bottom is the grid container's own (29:5941), which with the
     pagination's padding-top 64 is the frame's 88 from the last row to "1". */
  .gw-collection-grid__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 24px;
  }

  .gw-collection-grid__card,
  .gw-collection-grid__link {
    gap: 16px;
  }

  /* Desktop image is 304 x 312, very slightly portrait — not square like mobile. */
  .gw-collection-grid__media {
    aspect-ratio: 304 / 312;
  }

  /* Desktop takes its 88 from the grid's padding-bottom above, so the mobile
     root gap is dropped here. */
  .gw-collection-grid__pagination {
    padding: 64px 0 0;
    margin-top: 0;
  }

}