/* collection.css - collection + search page chrome: facets, sort, pagination (ST-M6).
 *
 * OWNED BY ST-M6. Do not edit from another milestone.
 *
 * The product CARDS inside the grid are card.css's job (ST-M2) and the grid itself belongs to the
 * section that renders it - this file styles only the surrounding controls: the filter/facet panel,
 * the sort dropdown, the active-filter chips, the result count and the pagination.
 *
 * Consumes the layout's design tokens (--primary/--bg/--text/--maxw) and the per-section padding
 * props stamped on .nscms-section (see base.css). Served fingerprinted + immutable via
 * {{ 'collection.css' | asset_url }}.
 *
 * LAYOUT VOCABULARY, from Shopify/dawn@main sections/main-collection-product-grid.liquid: the
 * merchant's `filter_type` picks the desktop presentation - `horizontal` (facets in a row above
 * the grid, Dawn's default), `vertical` (facets in a left column beside the grid) or `drawer`
 * (facets collapsed behind one toggle). Each maps to a .col-layout--* modifier below; the markup
 * is identical in all three, so switching cannot break the page.
 *
 * The `default` layout links this file. It used to be the only one of two that did; the other,
 * `minimal`, was removed on 2026-09-21 along with the Minimal theme, so every store gets it.
 */

/* --- layout ------------------------------------------------------------------------------- */

.col-layout {
  display: block;
}

.col-results {
  min-width: 0; /* so a wide grid cannot push the facet column off-screen */
}

/* --- the facet + sort form ----------------------------------------------------------------- */

.col-facets {
  margin-bottom: 1.25rem;
}

.col-facets__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 1rem;
}

.col-facets__heading {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  align-self: center;
  opacity: 0.8;
}

.col-facets__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.col-facets__sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.col-facets__sort-label {
  font-size: 0.9rem;
  opacity: 0.8;
  white-space: nowrap;
}

.col-facets__sort-select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  max-width: 100%;
}

/* The Apply button is the no-JS submit path. It is never hidden: with JS the sort select submits
 * on change and the checkboxes still need a way to be applied without one. */
.col-facets__apply {
  font: inherit;
  cursor: pointer;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: var(--solid-button-text, #fff); /* 10-16 G2: the scheme's Solid button text; white when unset */
}

.col-facets__apply:hover {
  opacity: 0.9;
}

/* --- one facet (a <details> disclosure) ---------------------------------------------------- */

.col-facet {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: var(--bg);
}

.col-facet__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.col-facet__summary::-webkit-details-marker {
  display: none;
}

.col-facet__summary::marker {
  content: "";
}

.col-facet__summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
  opacity: 0.6;
}

.col-facet[open] > .col-facet__summary::after {
  transform: rotate(-135deg) translateY(-25%);
}

.col-facet__selected {
  font-weight: 600;
}

.col-facet__panel {
  border: 0;
  margin: 0;
  padding: 0.5rem 0.7rem 0.7rem;
  min-width: 0;
}

.col-facet__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.col-facet__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
}

.col-facet__item {
  margin: 0;
}

/* The <label> wraps its own checkbox, so it must be a ROW - the theme's global label styling
 * elsewhere in the admin is column-oriented and this is deliberately independent of it. */
.col-facet__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.col-facet__label--disabled {
  opacity: 0.45;
  cursor: default;
}

.col-facet__label--active .col-facet__text {
  font-weight: 600;
}

.col-facet__panel--price {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.col-facet__price-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.col-facet__price-field label {
  font-size: 0.75rem;
  opacity: 0.7;
}

.col-facet__price-field input {
  font: inherit;
  width: 6.5rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
}

/* --- active-filter pills + result count ---------------------------------------------------- */

.col-facets__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.col-facets__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  color: inherit;
}

.col-facets__pill:hover {
  text-decoration: none;
  border-color: currentColor;
}

.col-facets__clear {
  font-size: 0.85rem;
  text-decoration: underline;
}

.col-facets__count {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.col-empty {
  padding: 2rem 0;
  text-align: center;
}

/* --- pagination ---------------------------------------------------------------------------- */

.col-pagination {
  margin-top: 1.75rem;
}

.col-pagination__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.col-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: inherit;
}

.col-pagination__item:hover {
  text-decoration: none;
  background: rgba(0, 0, 0, 0.06);
}

.col-pagination__item--current {
  font-weight: 600;
  border: 1px solid currentColor;
  cursor: default;
}

.col-pagination__item--current:hover {
  background: transparent;
}

.col-pagination__item--gap {
  opacity: 0.5;
  cursor: default;
}

.col-pagination__item--gap:hover {
  background: transparent;
}

/* --- filter_type presentations ------------------------------------------------------------- */

/* `drawer`: every facet lives behind ONE toggle. Expressed with the same markup by hiding the
 * facet row until the shopper opens it - no separate template branch, so the three layouts cannot
 * drift. Dawn's drawer is a JS off-canvas panel with a focus trap; this is a plain disclosure. */
.col-layout--drawer .col-facets__filters {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.6rem;
}

@media (min-width: 750px) {
  /* `vertical`: facets beside the grid. */
  .col-layout--vertical {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) 1fr;
    gap: 0 2rem;
    align-items: start;
  }

  .col-layout--vertical .col-facets {
    grid-column: 1;
    grid-row: 1;
  }

  .col-layout--vertical .col-results {
    grid-column: 2;
    grid-row: 1;
  }

  .col-layout--vertical .col-facets__form {
    flex-direction: column;
    align-items: stretch;
  }

  .col-layout--vertical .col-facets__filters {
    flex-direction: column;
    align-items: stretch;
  }

  .col-layout--vertical .col-facet {
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .col-layout--vertical .col-facets__sort {
    margin-left: 0;
  }
}

@media (max-width: 749px) {
  /* On a phone every layout collapses to the same stacked form: Dawn likewise falls back to one
   * mobile presentation regardless of the desktop `filter_type`. */
  .col-facets__form {
    flex-direction: column;
    align-items: stretch;
  }

  .col-facets__sort {
    margin-left: 0;
  }

  .col-facet {
    width: 100%;
  }

  .col-facet__summary {
    justify-content: space-between;
  }
}

/* --- Basic: the vertical layout is the design's product list (311:2238) ---------------------
   Measured off the frame at 1920: a 290px filter column, 48px to the grid, the grid 1202px wide
   in four columns 20px apart with 56px between rows; over the grid a 36px toolbar and 32px of air.
   Colours are the design's own warm greys — the list reads as one quiet column of type. */
@media (min-width: 750px) {
  .col-layout--vertical {
    grid-template-columns: minmax(12rem, 18.125rem) minmax(0, 1fr);
    gap: 0 3rem;
  }
}

.col-layout--vertical .col-facets {
  margin: 0;
}

.col-layout--vertical .col-facets__filters {
  display: block;
}

/* "FILTER ........ CLEAR ALL" over a dark rule (311:1643). */
.col-facets__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid #0f0c0b;
}

.col-layout--vertical .col-facets__heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.124rem);
  text-transform: var(--caps-transform, uppercase);
  opacity: 1;
}

.col-facets__clear-all {
  font-size: 0.875rem;
  letter-spacing: var(--caps-spacing, 0.0875rem);
  text-transform: var(--caps-transform, uppercase);
  color: #595550;
}

.col-facets__clear-all:hover {
  color: #0f0c0b;
  text-decoration: none;
}

/* One group (311:1649): a 54px summary — the name in 16px medium capitals with a small caret after
   it — then its options, the whole group closed by a hairline. */
.col-layout--vertical .col-facet {
  border: 0;
  border-bottom: 1px solid #e9e8e7;
  border-radius: 0;
  background: transparent;
}

.col-layout--vertical .col-facet__summary {
  justify-content: flex-start;
  gap: 0.625rem;
  padding: 0.9375rem 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--caps-spacing, 0.092rem);
  text-transform: var(--caps-transform, uppercase);
  color: #0f0c0b;
}

.col-layout--vertical .col-facet__summary::after {
  width: 0.375rem;
  height: 0.375rem;
  opacity: 0.8;
}

.col-layout--vertical .col-facet__panel {
  padding: 0 0 1rem;
}

.col-layout--vertical .col-facet__list {
  max-height: none;
}

/* An option row (311:1657): a 14px square box, the value in the caption grey, its count pushed
   to the far right. 34px tall. */
.col-layout--vertical .col-facet__label {
  gap: 0.6875rem;
  padding: 0.4375rem 0;
  font-size: 0.875rem;
  color: #595550;
  white-space: normal;
}

.col-layout--vertical .col-facet__label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid #dcdad8;
  border-radius: 0;
  background: #fff center / 10px 10px no-repeat;
  cursor: pointer;
}

.col-layout--vertical .col-facet__label input[type="checkbox"]:checked {
  border-color: #0f0c0b;
  background-color: #0f0c0b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.col-layout--vertical .col-facet__label input[type="checkbox"]:focus-visible {
  outline: 2px solid #0f0c0b;
  outline-offset: 2px;
}

.col-layout--vertical .col-facet__label--active .col-facet__text {
  color: #0f0c0b;
  font-weight: 400;
}

.col-facet__count {
  margin-left: auto;
  color: #767069;
}

/* A COLOUR group (311:1775): an 11px colour square takes the tick box's place, the name 11px after
   it, the count at the far right — rows 34px tall like every other option. The palette is keyed off
   data-swatch — the same colours as the product page's picker (product.css) — so a merchant's value
   never reaches a CSS declaration. A colour the palette does not know gets a neutral square and is
   still named beside it.

   The checkbox is still there — hidden from sight, not from the keyboard or a screen reader — so the
   form and the no-JS path are unchanged. A chosen colour shows as a ring round its square and its
   name in black. */
.col-facet__swatch {
  flex: none;
  width: 11px;
  height: 11px;
  background: #e9e8e7;
  box-shadow: inset 0 0 0 1px rgba(128, 120, 112, 0.42); /* keeps white and ivory visible on white */
}

.col-facet__swatch[data-swatch="black"] { background: #111111; }
.col-facet__swatch[data-swatch="white"] { background: #ffffff; }
.col-facet__swatch[data-swatch="grey"],
.col-facet__swatch[data-swatch="gray"] { background: #9ca3af; }
.col-facet__swatch[data-swatch="silver"] { background: #d1d5db; }
.col-facet__swatch[data-swatch="red"],
.col-facet__swatch[data-swatch="merah"] { background: #dc2626; }
.col-facet__swatch[data-swatch="pink"] { background: #ec4899; }
.col-facet__swatch[data-swatch="orange"] { background: #f97316; }
.col-facet__swatch[data-swatch="yellow"] { background: #facc15; }
.col-facet__swatch[data-swatch="green"],
.col-facet__swatch[data-swatch="hijau"] { background: #16a34a; }
.col-facet__swatch[data-swatch="teal"] { background: #0d9488; }
.col-facet__swatch[data-swatch="blue"],
.col-facet__swatch[data-swatch="biru"] { background: #2563eb; }
.col-facet__swatch[data-swatch="navy"] { background: #1e3a8a; }
.col-facet__swatch[data-swatch="purple"] { background: #7c3aed; }
.col-facet__swatch[data-swatch="brown"] { background: #92400e; }
.col-facet__swatch[data-swatch="beige"] { background: #e7d8c0; }
.col-facet__swatch[data-swatch="cream"] { background: #f5efdc; }
.col-facet__swatch[data-swatch="gold"] { background: #d4af37; }

.col-layout--vertical .col-facet__list--swatches .col-facet__label,
.col-layout--vertical .col-facet__list--chips .col-facet__label {
  position: relative;
}

.col-layout--vertical .col-facet__list--swatches .col-facet__label input[type="checkbox"],
.col-layout--vertical .col-facet__list--chips .col-facet__label input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: none;
  opacity: 0;
  cursor: pointer;
}

.col-layout--vertical .col-facet__list--swatches .col-facet__label:has(input:checked) .col-facet__swatch,
.col-layout--vertical .col-facet__list--swatches .col-facet__label--active .col-facet__swatch {
  box-shadow: inset 0 0 0 1px rgba(128, 120, 112, 0.42), 0 0 0 2px #fff, 0 0 0 3px #0f0c0b;
}

.col-layout--vertical .col-facet__list--swatches .col-facet__label:has(input:checked) .col-facet__text {
  color: #0f0c0b;
}

.col-layout--vertical .col-facet__list--swatches .col-facet__label:has(input:focus-visible) .col-facet__text {
  outline: 2px solid #0f0c0b;
  outline-offset: 2px;
}

/* A SIZE group (311:1757): square chips five to a row, each a fifth of the column less the 6px gaps,
   32px tall, hairline border, the size in 14px caption grey — and black when chosen. More than five
   sizes wrap onto the next row in the same columns. The count is kept for assistive tech only: the
   design draws none on a chip. */
.col-layout--vertical .col-facet__list--chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding-top: 2px;
  overflow: visible; /* a scroll box would clip the focus ring */
}

.col-layout--vertical .col-facet__list--chips .col-facet__label {
  justify-content: center;
  min-width: 38px;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid #dcdad8;
  font-size: 0.875rem;
  letter-spacing: 0.055rem;
  color: #595550;
}

.col-layout--vertical .col-facet__list--chips .col-facet__label:hover {
  border-color: #767069;
}

.col-layout--vertical .col-facet__list--chips .col-facet__label:has(input:checked),
.col-layout--vertical .col-facet__list--chips .col-facet__label--active {
  border-color: #0f0c0b;
  box-shadow: inset 0 0 0 1px #0f0c0b;
  color: #0f0c0b;
}

.col-layout--vertical .col-facet__list--chips .col-facet__label:has(input:checked) .col-facet__text,
.col-layout--vertical .col-facet__list--chips .col-facet__label--active .col-facet__text {
  font-weight: 400;
}

.col-layout--vertical .col-facet__list--chips .col-facet__label:has(input:focus-visible) {
  outline: 2px solid #0f0c0b;
  outline-offset: 1px;
}

.col-layout--vertical .col-facet__list--chips .col-facet__label--disabled {
  opacity: 0.45;
  cursor: default;
}

.col-layout--vertical .col-facet__list--chips .col-facet__count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.col-layout--vertical .col-facet__panel--price {
  flex-wrap: wrap;
}

.col-layout--vertical .col-facet__price-field input {
  width: 5.9rem;
  height: 2.125rem;
  border: 1px solid #dcdad8;
  border-radius: 0;
}

/* --- the toolbar over the grid (311:1842) ------------------------------------------------ */
.col-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  min-height: 2.25rem;
  margin-bottom: 2rem;
}

.col-toolbar__count {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: var(--caps-spacing, 0.079rem);
  text-transform: var(--caps-transform, uppercase);
  color: #595550;
}

.col-toolbar__count strong {
  font-weight: 500;
  color: #0f0c0b;
}

/* "SORT: FEATURED ⌄" is one bordered box (311:1846); the real <select> sits inside it with its own
   chrome stripped, so it keeps the platform's keyboard and screen-reader behaviour. */
.col-toolbar__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid #dcdad8;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.079rem);
  text-transform: var(--caps-transform, uppercase);
  color: #0f0c0b;
  cursor: pointer;
}

.col-toolbar__sort-select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 1.25rem 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.col-toolbar__sort-select:focus-visible {
  outline: none;
}

.col-toolbar__sort:focus-within {
  border-color: #0f0c0b;
}

.col-toolbar__caret {
  position: absolute;
  right: 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
  pointer-events: none;
}

.col-layout--vertical .col-facets__active {
  margin: -1rem 0 1.5rem;
}

/* The grid under it: 56px between rows, 20px between columns. */
.col-layout--vertical .product-grid {
  row-gap: 3.5rem;
}

/* --- load more (311:2004) ----------------------------------------------------------------- */
.col-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 4rem;
}

.col-load-more__status {
  margin: 0;
  font-size: 0.65625rem;
  letter-spacing: var(--caps-spacing, 0.0853rem);
  text-transform: var(--caps-transform, uppercase);
  color: #767069;
}

.col-load-more__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 1.625rem;
  border: 1px solid #0f0c0b;
  background: #0f0c0b;
  color: #fff;
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.105rem);
  text-transform: var(--caps-transform, uppercase);
}

.col-load-more__button:hover {
  text-decoration: none;
  background: #2b2724;
}

.col-load-more__button[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* --- search page form ---------------------------------------------------------------------- */

/* The search template renders its own field, exactly as Dawn's sections/main-search.liquid does.
 * `.search` had NO rules anywhere in the bundle, so it fell back to browser-default chrome beside
 * a fully styled header — which read as a duplicated/broken control rather than a deliberate one.
 * Both surfaces that emit `form.search` (sections/main_search.liquid and the fixed
 * templates/search.liquid fallback) are styled by this one block. */

.search {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 1.25rem;
  max-width: 32rem;
}

.search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.search button {
  font: inherit;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  opacity: 0.85;
}

.search button:hover {
  opacity: 1;
}

/* The type tabs (BUILD_BRIEF_2026-10-09-B §5, snippets/search-types.liquid): pills with counts, the
   selected one filled — they were an unstyled bullet list. */
.search-types {
  margin: 0 0 1.25rem;
}

.search-types__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-types__link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border: 1px solid #d6d4d1;
  border-radius: 999px;
  color: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.search-types__link:hover {
  border-color: currentColor;
}

.search-types__link--active {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

/* The count beside the pill's name; a flex box drops the bare space between them. */
.search-types__count {
  margin-left: 0.3em;
}

/* "Pages" / "Blog posts" beside a content result's title (it sat glued to the title). */
.search-content__kind {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: var(--caps-spacing, 0.04em);
  text-transform: var(--caps-transform, uppercase);
  opacity: 0.6;
}

/* Best sellers under an empty or fruitless search (§5, snippets/search-best-sellers.liquid). */
.search-best {
  margin-top: 1.5rem;
}

.search-best__title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}

/* --- dark mode ----------------------------------------------------------------------------- */

html[data-theme="dark"] .search input[type="search"],
html[data-theme="dark"] .col-facet,
html[data-theme="dark"] .col-facets__pill,
html[data-theme="dark"] .col-facets__sort-select,
html[data-theme="dark"] .col-facet__price-field input,
html[data-theme="dark"] .col-layout--drawer .col-facets__filters {
  border-color: #334155;
}

html[data-theme="dark"] .col-pagination__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* parity_snifl_product — collection banner options (sections/collection_banner.liquid). Only a banner
   carrying these classes is touched. "Left": the words start at the left, without the banner's own
   top and bottom space (the section padding sets it). "Custom" title size: the px on computers, 80% of
   it from 750 to 1439px, the phone size below. */
.collection-banner.collection-banner--left {
  justify-items: start;
  text-align: left;
  padding: 0;
}

.collection-banner.collection-banner--sized h1 {
  font-size: var(--cb-h-m, 56px);
  line-height: 1;
}

@media (min-width: 750px) {
  .collection-banner.collection-banner--sized h1 {
    font-size: calc(var(--cb-h, 100px) * 0.8);
  }
}

@media (min-width: 1440px) {
  .collection-banner.collection-banner--sized h1 {
    font-size: var(--cb-h, 100px);
  }
}

.collection-banner.collection-banner--medium h1 {
  font-weight: 500;
}

.collection-banner.collection-banner--bold h1 {
  font-weight: 700;
}