/** Shopify CDN: Minification failed

Line 1627:19 Unexpected "-"

**/
.facets-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  padding-top: 1rem;
}

.active-facets-mobile {
  margin-bottom: 0.5rem;
}

.mobile-facets__list {
  overflow-y: auto;
}

@media screen and (min-width: 750px) {
  .facets-container > * + * {
    margin-top: 0;
  }

  .facets__form .product-count {
    grid-column-start: 3;
    align-self: flex-start;
  }
}

@media screen and (max-width: 989px) {
  .facets-container {
    grid-template-columns: auto minmax(0, max-content);
    column-gap: 2rem;
  }
}

.facet-filters {
  align-items: flex-start;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  padding-left: 2.5rem;
}

@media screen and (min-width: 990px) {
  .facet-filters {
    padding-left: 3rem;
  }
}

.facet-filters__label {
  display: block;
  color: rgba(var(--color-foreground), 0.85);
  font-size: 1.4rem;
  margin: 0 2rem 0 0;
}

.facet-filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  cursor: pointer;
  height: 4.5rem;
  padding: 0 1.5rem;
  min-width: 25rem;
  margin-top: 2.4rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.55);
}

.facet-filters__summary::after {
  position: static;
}

.facet-filters__field {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.facet-filters__field .select {
  width: auto;
}

.facet-filters__field .select:after,
.facet-filters__field .select:before,
.mobile-facets__sort .select:after,
.mobile-facets__sort .select:before {
  content: none;
}

.facet-filters__field .select__select,
.mobile-facets__sort .select__select {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.select .icon-caret {
  width: 10px;
}

.facet-filters button {
  margin-left: 2.5rem;
}

.facet-filters__sort {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: 1.4rem;
  height: auto;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  margin: 0;
  padding-left: 0;
  padding-right: 1.75rem;
}

.facet-filters__sort + .icon-caret {
  right: 0;
}

@media screen and (forced-colors: active) {
  .facet-filters__sort {
    border: none;
  }
}

.facet-filters__sort,
.facet-filters__sort:hover {
  box-shadow: none;
  filter: none;
  transition: none;
}

.mobile-facets__sort .select__select:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.mobile-facets__sort .select__select.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.facet-filters__sort:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.facet-filters__sort.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.facets {
  display: block;
  grid-column-start: span 2;
}

.facets__form {
  display: grid;
  gap: 0 3.5rem;
  grid-template-columns: 1fr max-content max-content;
  margin-bottom: 0.5rem;
}

.facets__wrapper {
  align-items: center;
  align-self: flex-start;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
}

.facets__heading {
  display: block;
  color: rgba(var(--color-foreground), 0.85);
  font-size: 1.4rem;
  margin: -1.5rem 2rem 0 0;
}

.facets__reset {
  margin-left: auto;
}

.facets__disclosure {
  margin-right: 3.5rem;
}

.facets__summary {
  color: rgba(var(--color-foreground), 0.75);
  font-size: 1.4rem;
  padding: 0 1.75rem 0 0;
  margin-bottom: 1.5rem;
}

.facets__summary .svg-wrapper {
  height: auto;
  width: auto;
}

.facets__disclosure fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

.facets__disclosure[open] .facets__summary,
.facets__summary:hover {
  color: rgb(var(--color-foreground));
}

.facets__disclosure[open] .facets__display,
.facets__disclosure-vertical[open] .facets__display-vertical {
  animation: animateMenuOpen var(--duration-default) ease;
}

.facets__summary span:first-of-type {
  transition: text-decoration var(--duration-short) ease;
}

.facets__summary:hover .facets__summary-label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.facets__and-helptext {
  color: rgba(var(--color-foreground), 0.5);
  font-size: calc(var(--font-heading-scale) * 1.2rem);
  line-height: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  .facets__and-helptext {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
    line-height: calc(var(--font-heading-scale) * 1.3rem);
  }
}

.facets__disclosure .facets__and-helptext,
.facets__disclosure-vertical .facets__and-helptext {
  display: none;
}

.facets__disclosure[open] .facets__and-helptext,
.facets__disclosure-vertical[open] .facets__and-helptext {
  display: block;
}

.disclosure-has-popup[open] > .facets__summary::before {
  z-index: 2;
}

.facets__summary > span {
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.facets__summary .icon-caret {
  right: 0;
}

.facets__display {
  border-width: var(--popup-border-width);
  border-style: solid;
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-radius: var(--popup-corner-radius);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  background-color: rgb(var(--color-background));
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1.2rem;
  width: 35rem;
  max-height: 55rem;
  overflow-y: auto;
}

.facets__header {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  position: sticky;
  top: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
}

.facets__header facet-remove {
  align-self: center;
}

.facets__list {
  padding: 0.5rem 2rem;
}

.facets-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
  padding: 2rem 2.4rem;
}

.facets-layout-list--swatch {
  --swatch-input--size: 2.4rem;
}

.facets-layout-grid.facets-layout-grid {
  gap: 1rem;
}

.facets-layout-grid.facets__list--vertical {
  padding: 1rem 0;
}

.facets__item {
  display: flex;
  align-items: center;
}

/* Hover/focus state */
.facets-layout-list .facets__label:hover .facet-checkbox__text-label,
.facets-layout-list input:focus ~ .facet-checkbox__text-label {
  text-decoration: underline;
}

.facets-layout-grid > * {
  align-items: flex-start;
}

.facets-layout-grid .facets__label {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
  font-size: 1.3rem;
}

/* Image filter specific styles */
.facets-layout-grid .facets__image-wrapper {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0.4rem;
}

.facets__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Default state */
.facets-layout-grid--image .facets__label {
  outline-style: solid;
  outline-color: transparent;
  transition-property: outline-color, outline-width, box-shadow;
  transition-duration: var(--duration-short);
  transition-timing-function: ease;
}

.facets-layout-grid--image .facet-checkbox__text {
  padding: 0.4rem;
}

/* Active state */
.facets-layout-grid--image .facets__label.active {
  outline-color: rgb(var(--color-foreground));
  outline-width: 0.1rem;
}

/* Hover state */
.facets-layout-grid--image .facets__label:hover {
  outline-color: rgba(var(--color-foreground), 0.4);
  outline-width: 0.2rem;
}

/* Focus visible */
.facets-layout-grid--image .facets__label:has(:focus-visible) {
  outline-color: rgba(var(--color-foreground), 0.5);
  outline-width: 0.2rem;
  box-shadow: 0px 0px 3px 1px rgba(var(--color-foreground), 0.25);
}

/* Focused state */
.facets-layout-grid--image .facets__label.active:has(:focus-visible) {
  outline-color: rgb(var(--color-foreground));
  outline-width: 0.1rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.7rem 0.1rem rgba(var(--color-foreground), 0.25);
}

/* Disabled state */
.facets-layout-grid--image .facets__label.disabled {
  /* Note: disabled gets its transparency set by a parent, so no need to set an alpha here. Also, we move the outline to the child when disabled */
  outline: none;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
  outline: 0.1rem solid rgb(var(--color-foreground));
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* 100% * square root of 2, this is not a magic number, it is math! */
  width: 141.4%;
  height: 0.1rem;
  background-color: rgb(var(--color-foreground));
  transform: rotate(-45deg);
  transform-origin: left;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  margin: 0;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line line {
  stroke: rgb(var(--color-foreground));
  stroke-width: 1;
}

/* End of image filter specific styles */

.list-menu__item label,
.list-menu__item input[type='checkbox'] {
  cursor: pointer;
}

.facet-checkbox {
  padding: 1rem 2rem 1rem 0;
  flex-grow: 1;
  position: relative;
  font-size: 1.4rem;
  display: flex;
  word-break: break-word;
}

/* Hover, active, and focus states */
.facets__label:hover,
.facets__label.active,
.facets__label:has(:focus-visible) {
  color: rgba(var(--color-foreground), 1);
}

/* Disabled state */
.facets-layout .facets__label.disabled {
  pointer-events: none;
}

.facets-layout:not(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled {
  opacity: 0.4;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
  opacity: 0.2;
}

:is(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled .facet-checkbox__text {
  opacity: 0.4;
}

/* End disabled state */

.facets-layout-list--text input[type='checkbox'] {
  position: absolute;
  opacity: 1;
  width: 1.6rem;
  height: 1.6rem;
  top: 0.7rem;
  left: -0.4rem;
  z-index: -1;
  appearance: none;
  -webkit-appearance: none;
}

.facets-layout-grid input[type='checkbox'],
.facets-layout-list--swatch input[type='checkbox'] {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.facets-layout-list--swatch .facets__label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.swatch-input-wrapper {
  display: flex;
}

.facet-checkbox > svg,
.facet-checkbox > .svg-wrapper {
  background-color: rgb(var(--color-background));
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.facet-checkbox .svg-wrapper {
  visibility: hidden;
  position: absolute;
  left: 0.3rem;
  z-index: 5;
  top: 1.4rem;
  width: 1.1rem;
  height: 0.7rem;
}

.facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
  visibility: visible;
}

@media screen and (forced-colors: active) {
  .facet-checkbox > svg {
    background-color: inherit;
    border: 0.1rem solid rgb(var(--color-background));
  }

  .facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
    border: none;
  }
}

.facets__price {
  display: flex;
  padding: 2rem;
}

.facets__price .field + .field-currency {
  margin-left: 2rem;
}

.facets__price .field {
  align-items: center;
}

.facets__price .field-currency {
  align-self: center;
  margin-right: 0.6rem;
}

.facets__price .field__label {
  left: 1.5rem;
}

button.facets__button {
  min-height: 0;
  margin: 0 0 0 0.5rem;
  box-shadow: none;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.active-facets {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -0.5rem;
}

.active-facets__button {
  display: block;
  margin-right: 1.5rem;
  margin-top: 1.5rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  text-decoration: none;
}

span.active-facets__button-inner {
  color: rgb(var(--color-foreground));
  box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
  border-radius: 2.6rem;
  font-size: 1rem;
  min-height: 0;
  min-width: 0;
  padding: 0.25rem 1.25rem;
  display: flex;
  align-items: center;
}

span.active-facets__button-inner:before,
span.active-facets__button-inner:after {
  display: none;
}

.active-facets__button-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

.active-facets__button-wrapper * {
  font-size: 1rem;
}

@media screen and (min-width: 990px) {
  .active-facets__button {
    margin-right: 1.5rem;
  }

  .active-facets__button-wrapper *,
  span.active-facets__button-inner {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 989px) {
  .active-facets {
    margin: 0 -1.2rem -1.2rem;
  }

  .active-facets__button,
  .active-facets__button-remove {
    margin: 0;
    padding: 1.2rem;
  }

  span.active-facets__button-inner {
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
  }

  .active-facets__button-wrapper {
    padding-top: 0;
    margin-left: 1.2rem;
  }
}

.active-facets__button:hover .active-facets__button-inner {
  box-shadow: 0 0 0 0.2rem rgb(var(--color-foreground));
}

.active-facets__button--light .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
}

.active-facets__button--light:hover .active-facets__button-inner {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.4);
}

a.active-facets__button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  a.active-facets__button:focus-visible {
    outline: transparent solid 1px;
  }
}
a.active-facets__button.focused {
  outline: none;
  box-shadow: none;
}

a.active-facets__button:focus-visible .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
    0 0 0 0.4rem rgb(var(--color-foreground));
  outline: none;
}

a.active-facets__button.focused .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
    0 0 0 0.4rem rgb(var(--color-foreground));
  outline: none;
}

.active-facets__button .svg-wrapper {
  align-self: center;
  flex-shrink: 0;
  margin-left: 0.6rem;
  margin-right: -0.2rem;
  pointer-events: none;
  width: 1.2rem;
}

@media all and (min-width: 990px) {
  .active-facets__button .svg-wrapper {
    margin-right: -0.4rem;
    margin-top: 0.1rem;
    width: 1.2rem;
  }
}

.active-facets facet-remove:only-child {
  display: none;
}

.facets-vertical .active-facets .active-facets-vertical-filter:only-child > facet-remove {
  display: none;
}

.facets-vertical .active-facets-vertical-filter {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.facets-vertical .active-facets-vertical-filter .active-facets__button-wrapper {
  padding-top: 0;
  display: flex;
  align-items: flex-start;
}

.facets-vertical .active-facets__button {
  margin-top: 0;
}

.active-facets__button.disabled,
.mobile-facets__clear.disabled {
  pointer-events: none;
}

.mobile-facets__clear-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

.mobile-facets {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(var(--color-foreground), 0.5);
  pointer-events: none;
}

.mobile-facets__disclosure {
  display: flex;
}

.mobile-facets__wrapper {
  margin-left: 0;
  display: flex;
}

.mobile-facets__wrapper .disclosure-has-popup[open] > summary::before {
  height: 100vh;
  z-index: 3;
}

.mobile-facets__inner {
  background-color: rgb(var(--color-background));
  width: calc(100% - 5rem);
  margin-left: auto;
  height: 100%;
  overflow-y: auto;
  pointer-events: all;
  transition: transform var(--duration-default) ease;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  border-style: solid;
  border-width: 0 0 0 var(--drawer-border-width);
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

.menu-opening .mobile-facets__inner {
  transform: translateX(0);
}

.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
  transform: translateX(105vw);
}

.mobile-facets__header {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding: 1rem 2.5rem;
  text-align: center;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 2;
}

.mobile-facets__header-inner {
  flex-grow: 1;
  position: relative;
}

.mobile-facets__info {
  padding: 0 2.6rem;
}

.mobile-facets__heading {
  font-size: calc(var(--font-heading-scale) * 1.4rem);
  margin: 0;
}

.mobile-facets__count {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.3rem;
  margin: 0;
  flex-grow: 1;
}

.mobile-facets__open-wrapper {
  display: inline-block;
}

.mobile-facets__open {
  text-align: left;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  color: rgba(var(--color-link), var(--alpha-link));
}

.mobile-facets__open:hover {
  color: rgb(var(--color-link));
}

.mobile-facets__open:hover line,
.mobile-facets__open:hover circle {
  stroke: rgb(var(--color-link));
}

.mobile-facets__open-label {
  transition: text-decoration var(--duration-short) ease;
}

.mobile-facets__open:hover .mobile-facets__open-label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.mobile-facets__open > * + * {
  margin-left: 1rem;
}

.mobile-facets__open .svg-wrapper {
  width: 2rem;
}

.mobile-facets__open line,
.mobile-facets__open circle {
  stroke: rgba(var(--color-link), var(--alpha-link));
}

.mobile-facets__close {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0.7rem;
  right: 1rem;
  width: 4.4rem;
  height: 4.4rem;
  z-index: 101;
  opacity: 0;
  transition: opacity var(--duration-short) ease;
}

.mobile-facets__close .svg-wrapper {
  width: 2.2rem;
}

details.menu-opening .mobile-facets__close {
  display: flex;
  opacity: 1;
}

details.menu-opening .mobile-facets__close .svg-wrapper {
  margin: 0;
}

.mobile-facets__close-button {
  align-items: center;
  background-color: transparent;
  font-size: 1.4rem;
  font: inherit;
  letter-spacing: inherit;
  margin-top: 1.5rem;
  padding: 1.2rem 2.6rem;
  text-decoration: none;

  display: grid;
  grid-template-columns: min-content 1fr;
  text-align: start;
}

.mobile-facets__close-button > .facets__and-helptext {
  grid-column-start: 2;
}

.mobile-facets__close-button .icon-arrow {
  transform: rotate(180deg);
  margin-right: 1rem;
}

.mobile-facets__main {
  padding: 2.7rem 0 0;
  position: relative;
  z-index: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-facets__details[open] .icon-caret {
  transform: rotate(180deg);
}

.mobile-facets__highlight {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  background-color: rgba(var(--color-foreground), 0.04);
  opacity: 0;
  visibility: hidden;
}

.mobile-facets__checkbox:checked + .mobile-facets__highlight {
  opacity: 1;
  visibility: visible;
}

.mobile-facets__summary {
  padding: 1.3rem 2.5rem;
}

.mobile-facets__summary .svg-wrapper {
  margin-left: auto;
}

.mobile-facets__summary > div {
  display: flex;
  align-items: center;
}

.js .mobile-facets__submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 3;
  transform: translateX(100%);
  visibility: hidden;
  display: flex;
  flex-direction: column;
}

.js details[open] > .mobile-facets__submenu {
  transition: transform 0.4s cubic-bezier(0.29, 0.63, 0.44, 1), visibility 0.4s cubic-bezier(0.29, 0.63, 0.44, 1);
}

.js details[open].menu-opening > .mobile-facets__submenu {
  transform: translateX(0);
  visibility: visible;
}

.js .menu-drawer__submenu .mobile-facets__submenu {
  overflow-y: auto;
}

.js .mobile-facets .submenu-open {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

.mobile-facets__item {
  position: relative;
}

input.mobile-facets__checkbox {
  border: 0;
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: 2.1rem;
  top: 1.2rem;
  z-index: 0;
  appearance: none;
  -webkit-appearance: none;
}

.mobile-facets__label {
  padding: 1.5rem 2rem 1.5rem 2.5rem;
  width: 100%;
  transition: background-color 0.2s ease;
  word-break: break-word;
  display: flex;
}

.mobile-facets__label > svg {
  background-color: rgb(var(--color-background));
  position: relative;
  z-index: 2;
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.mobile-facets__label .icon-checkmark {
  position: absolute;
  top: 1.9rem;
  left: 2.8rem;
  visibility: hidden;
  width: 11px;
  height: 9px;
}

.mobile-facets__label > input[type='checkbox']:checked ~ .icon-checkmark {
  visibility: visible;
}

.mobile-facets__arrow,
.mobile-facets__summary .icon-caret {
  margin-left: auto;
  display: block;
}

.mobile-facets__footer {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding: 2rem;
  bottom: 0;
  position: sticky;
  display: flex;
  z-index: 2;
  margin-top: auto;
  background-color: rgb(var(--color-background));
  background: var(--gradient-background);
}

.mobile-facets__footer > * + * {
  margin-left: 1rem;
}

.mobile-facets__footer > * {
  width: 50%;
}

.mobile-facets__sort {
  display: flex;
  justify-content: space-between;
}

.mobile-facets__sort label {
  flex-shrink: 0;
}

.mobile-facets__sort .select {
  width: auto;
}

.mobile-facets__sort .select .icon-caret {
  right: 0;
}

.mobile-facets__sort .select__select {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 1.5rem;
}

.product-count {
  align-self: center;
  position: relative;
  text-align: right;
}

.product-count__text {
  font-size: 1.4rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  margin: 0;
}

#ProductCountDesktop.loading,
#ProductCount.loading {
  visibility: hidden;
}

.product-count .loading__spinner,
.product-count-vertical .loading__spinner {
  position: absolute;
  padding-top: 0.6rem;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
}

@media screen and (min-width: 750px) {
  .facets-vertical {
    display: flex;
  }

  .facets-wrap-vertical {
    border: none;
    padding-left: 0;
  }

  .facets__form-vertical {
    display: flex;
    flex-direction: column;
    width: 26rem;
  }

  .facets__disclosure-vertical {
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.1);
    margin-right: 0;
  }

  .facets-vertical .facets__summary {
    padding-top: 1.5rem;
    margin-bottom: 0;
    padding-bottom: 1.5rem;
  }

  .facets__heading--vertical {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
  }

  .facets__header-vertical {
    padding: 1.5rem 2rem 1.5rem 0;
    font-size: 1.4rem;
  }

  .facets__display-vertical {
    padding-bottom: 1.5rem;
  }

  .facets-vertical .facets-wrapper {
    padding-right: 3rem;
  }

  .facets-vertical .facets-wrapper--no-filters {
    display: none;
  }

  .facets-vertical .product-grid-container {
    width: 100%;
  }

  .facets-vertical-form {
    display: flex;
    justify-content: flex-end;
  }

  .product-count-vertical {
    margin-left: 3.5rem;
    position: relative;
  }

  .facets-vertical .active-facets__button-wrapper {
    margin-bottom: 2rem;
  }

  .facets-vertical .facets__price {
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  .facets-vertical .facets__price .field:last-of-type {
    margin-left: 1rem;
  }

  .facets-vertical .active-facets__button {
    margin-bottom: 1.5rem;
  }

  .facets-vertical .facet-checkbox input[type='checkbox'] {
    z-index: 0;
  }

  .facets-vertical .active-facets facet-remove:last-of-type {
    margin-bottom: 1rem;
  }

  .facets-vertical .active-facets {
    margin: 0;
    align-items: flex-start;
  }

  .facets__disclosure-vertical[open] .facets__summary .icon-caret {
    transform: rotate(180deg);
  }

  .facets-container-drawer {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 0;
  }

  .facets-container-drawer .mobile-facets__wrapper {
    margin-right: 2rem;
    flex-grow: 1;
  }

  .facets-container-drawer .product-count {
    margin: 0 0 0.5rem 3.5rem;
  }

  .facets-container-drawer .facets-pill {
    width: 100%;
  }

  .facets-container-drawer .facets__form {
    display: block;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .facets-vertical .active-facets__button {
    padding: 1rem;
    margin-bottom: 0;
    margin-left: -0.5rem;
  }

  .facets-vertical .active-facets__button-remove {
    padding: 0 1rem 1rem;
  }
}

/* ============ Brand drawer shell (fork stripped Dawn's off-canvas panel) ============ */
/* The fork's .mobile-facets / .mobile-facets__inner rules reference Dawn color-scheme vars
   that don't exist here (--color-background, --color-foreground, --color-shadow, --drawer-*,
   --duration-default), so those declarations are invalid — leaving the panel transparent,
   shadowless, un-transitioned, and shoved right by margin-left:auto. These rules restore a
   concrete LEFT-side off-canvas panel, scoped to .facets-container-drawer (drawer mode only). */
.facets-container-drawer .mobile-facets__inner {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 380px;
  max-width: 86vw;
  margin: 0;
  padding: var(--space-5) var(--space-5) 0;
  background: var(--paper);
  border: 0;
  box-shadow: 0 0 40px rgba(108, 89, 73, 0.12);
  z-index: 100;
  overflow-y: auto;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* closed = off-canvas LEFT. Must outrank Dawn's generic
   `.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner { translateX(105vw) }`
   (0,4,0) which otherwise slides the panel off the RIGHT. Scoping under .js + drawer (0,5,0)
   wins and preserves the no-js fallback (panel visible when scripting is off). */
.js .facets-container-drawer .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
  transform: translateX(-100%);
}

/* open — MenuDrawer (global.js) toggles .menu-opening on the <details> ancestor */
.facets-container-drawer .menu-opening .mobile-facets__inner {
  transform: translateX(0);
}

/* backdrop — ::before on the .menu-opening <details>; panel (z-index:100) sits above it */
.facets-container-drawer .menu-opening::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(108, 89, 73, 0.28);
  z-index: 99;
}

/* ============ Same shell, generalized to horizontal/vertical mobile drawer ============
   The block above only fires for .facets-container-drawer (custom-rainbows). The
   horizontal/vertical collections' mobile "Filter and sort" drawer shares the exact
   same broken stock .mobile-facets__inner markup (undefined --color-* vars, no
   position, no scrim content) and never got the fix. Rather than editing
   snippets/facets.liquid to add .facets-container-drawer everywhere, or widening the
   existing drawer-scoped selectors (which would touch working, tested rules), this
   adds a second, deliberately less-specific copy of the same shell scoped to
   "collection-component" instead. Specificity is lower than every ".facets-container-drawer
   .mobile-facets__inner" rule above (that always has 2+ classes; these have 1 class +
   1 element), so the existing drawer keeps full control of its own panel unchanged —
   these rules only "show through" for elements that don't match .facets-container-drawer,
   i.e. the horizontal/vertical case. They still outrank the broken stock rules (1 class
   vs. 1 class + 1 element). Same LEFT-side slide, same brand tokens, same scrim. */
collection-component .mobile-facets__inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  max-width: 86vw;
  margin: 0;
  padding: var(--space-5) var(--space-5) 0;
  background: var(--paper);
  border: 0;
  box-shadow: 0 0 40px rgba(108, 89, 73, 0.12);
  z-index: 100;
  overflow-y: auto;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* z-index:100 here matches custom-rainbows' own panel z-index exactly (an
   earlier pass briefly raised this to 201 as part of a bleed-through fix
   attempt, then reverted once the header-hide rule below turned out to be
   the actual, sufficient fix -- see the ".site-header-section" rule further
   down). Safe to edit this shared rule directly regardless: custom-rainbows'
   own ".facets-container-drawer .mobile-facets__inner" rule (2 classes)
   also explicitly sets z-index:100 at higher specificity than this rule (1
   class + 1 element), so it keeps its own value unaffected either way. */
/* Removed "bottom: 0" above (was forcing full-height via top:0+bottom:0 with
   no explicit height -- a fixed element with both set implicitly fills the
   gap between them). Doesn't affect custom-rainbows: its own
   ".facets-container-drawer .mobile-facets__inner" rule (2 classes) still
   sets its own bottom:0 at higher specificity than this rule (1 class + 1
   element) regardless of what this rule contains, so the drawer keeps its
   full-height behavior unchanged. For horizontal/vertical, height/max-height/
   border-radius are new properties nothing here previously set, so -- same
   leak risk as the polish rules below -- they're scoped via
   :not(.facets-container-drawer) rather than left on the line above. */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__inner {
  height: auto;
  max-height: 100vh;
  border-bottom-right-radius: 16px;
}
collection-component .js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
  transform: translateX(-100%);
}
collection-component .menu-opening .mobile-facets__inner {
  transform: translateX(0);
}
/* z-index:99 here matches custom-rainbows' own scrim z-index exactly.
   .site-header / its sticky wrapper are ALSO z-index:100 (sections/header.liquid
   ~213-229) -- same as the panel above -- which is what originally let header
   icons (hamburger, then cart) bleed through and collide with the drawer's
   own close (x) button in the same top-right corner. An earlier pass tried
   raising this scrim to 200 (and the panel to 201) to paint over the header
   numerically; that was reverted once it became clear the header's sticky
   positioning establishes its OWN stacking context (see the
   ".site-header-section" rule further down for the full explanation), making
   numeric z-index comparisons against it unreliable regardless of how high
   they go. The actual, sufficient fix is that rule -- hiding the whole
   header wrapper outright while the drawer is open -- so this scrim is back
   to its original value and no longer needs to out-rank the header at all.
   Safe to edit this shared rule directly regardless: drawer's own
   ".facets-container-drawer .menu-opening::before" rule (2 classes) keeps
   its own z-index:99 unaffected either way (paired with its own panel at
   100, internally consistent, untouched). */
collection-component .menu-opening::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(108, 89, 73, 0.28);
  z-index: 99;
}
/* The close (x) button lives in <summary>, a SIBLING of the panel
   (.mobile-facets__inner), not a descendant -- both are independently
   position:fixed, so their stacking is decided purely by z-index, not DOM
   nesting. Stock .mobile-facets__close is z-index:101, which already sits
   correctly above this panel(100)/scrim(99) pair with no override needed
   (an earlier pass added an explicit z-index:202 override to clear a
   briefly-raised panel(201); that override was removed once the panel
   reverted to 100, since stock's 101 is sufficient again on its own). */
/* This close button now lives inside .mobile-facets__header (see
   snippets/facets.liquid), not the fixed-position <summary> context stock
   uses -- a genuinely different element in markup for filter_type !=
   'drawer', reusing the .mobile-facets__close class name so the existing
   open/closed visibility toggle (".mobile-facets__close { display:none }"
   base + "details.menu-opening .mobile-facets__close { display:flex }",
   both unscoped/untouched) still applies correctly regardless of where in
   the <details> subtree the element sits. Everything below overrides stock's
   fixed-corner positioning (position:fixed; top:0.7rem; right:1rem; 4.4rem
   square) with normal flex-row-child behavior: it's the last child of
   .mobile-facets__header, whose first child (.mobile-facets__header-inner)
   has flex-grow:1 (stock), so this button is pushed to the row's right
   edge -- the SAME 24px content padding as the header itself -- with no
   fixed/absolute math needed. align-items:flex-start on .mobile-facets__header
   (above) lines it up with the top of header-inner, where the title sits.
   Deliberately NOT setting "display" here: the existing toggle (base
   display:none / details.menu-opening display:flex, both untouched) must
   stay in control of visibility -- align-items/justify-content below are
   inert while display:none and take effect automatically once the toggle
   sets display:flex. */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__close {
  position: static;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink, #6C5949);
}
/* Visible x glyph, sized independently of the 44px tap target above. */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__close .svg-wrapper {
  width: 22px;
  height: 22px;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__close .svg-wrapper svg {
  width: 22px;
  height: 22px;
}

/* ============================================================
   LILINMOMO brand drawer polish
   Token note: --font-heading does NOT exist in tokens.css — the display-font
   token is --font-display. Used that below (literal font kept as fallback only).
   ============================================================ */

/* --- Drawer header --- */
.facets-container-drawer .mobile-facets__header,
.facets-container-drawer .mobile-facets__heading {
  font-family: var(--font-display, "Cormorant Garamond", serif);
}
.facets-container-drawer .mobile-facets__count {
  color: var(--ink, #6C5949);
  font-size: 0.95rem;
}

/* --- Facet accordion rows (summary triangles -> branded rows) --- */
.facets-container-drawer .mobile-facets__summary,
.facets-container-drawer summary.mobile-facets__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 1rem) 0;
  border-bottom: 1px solid rgba(108, 89, 73, 0.14);
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 1.35rem;
  color: var(--ink, #6C5949);
  cursor: pointer;
  list-style: none;
}
.facets-container-drawer .mobile-facets__summary::-webkit-details-marker { display: none; }

/* --- Checkbox value rows --- */
.facets-container-drawer .mobile-facets__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  color: var(--ink, #6C5949);
  font-family: var(--font-body, "Nunito Sans", sans-serif);
  font-size: 0.98rem;
  cursor: pointer;
}

/* --- COLOR SWATCHES: replace checkbox with a round color chip ---
   Scope strictly to labels in the Color facet via data-filter-label. --- */
.facets-container-drawer .mobile-facets__label[data-filter-label="Color"] .mobile-facets__highlight,
.facets-container-drawer .mobile-facets__label[data-filter-label="Color"] svg {
  display: none; /* hide the default square+check for color rows */
}
.facets-container-drawer .mobile-facets__label[data-filter-label="Color"]::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: 0 0 22px;
  box-shadow: inset 0 0 0 1px rgba(108, 89, 73, 0.25);
  background: var(--swatch, #ccc);
}
/* selected state ring */
.facets-container-drawer .mobile-facets__label[data-filter-label="Color"].active::before,
.facets-container-drawer .mobile-facets__checkbox:checked + * ~ .mobile-facets__label[data-filter-label="Color"]::before {
  box-shadow: inset 0 0 0 1px rgba(108,89,73,0.25), 0 0 0 2px var(--ink, #6C5949);
}

/* Per-color swatch values (from vinyl_colors.json hex_preview) */
.facets-container-drawer .mobile-facets__label[data-filter-value="Gold"]::before { --swatch: #C9A961; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Silver"]::before { --swatch: #B8B8B8; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Copper"]::before { --swatch: #A57555; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Black"]::before { --swatch: #1A1A1A; }
.facets-container-drawer .mobile-facets__label[data-filter-value="White"]::before { --swatch: #FFFFFF; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Persimmon"]::before { --swatch: #E85829; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Apricot"]::before { --swatch: #F4B084; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Signal Yellow"]::before { --swatch: #F0B428; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Yellow"]::before { --swatch: #F7D419; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Antique Lace"]::before { --swatch: #F1E8D0; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Dahlia Red"]::before { --swatch: #B83A4F; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Red"]::before { --swatch: #C8232A; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Wisteria"]::before { --swatch: #BAB6CC; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Lilac"]::before { --swatch: #C490C0; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Lavender"]::before { --swatch: #9885C5; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Lime Green"]::before { --swatch: #6BAA42; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Key Lime Pie"]::before { --swatch: #B8E098; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Carnation Pink"]::before { --swatch: #E8569A; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Soft Pink"]::before { --swatch: #F2C5CB; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Eggplant"]::before { --swatch: #5E4956; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Marsh Green"]::before { --swatch: #9CA463; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Dark Green"]::before { --swatch: #144338; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Powder Blue"]::before { --swatch: #B8D4E3; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Beach House"]::before { --swatch: #A8D8C8; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Geyser Blue"]::before { --swatch: #5FB8D8; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Grey"]::before { --swatch: #B8B6B5; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Brown"]::before { --swatch: #4A332A; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Light Brown"]::before { --swatch: #A0815C; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Navy"]::before { --swatch: #232D5A; }
.facets-container-drawer .mobile-facets__label[data-filter-value="Turquoise"]::before { --swatch: #1A8FA4; }

/* --- Sort dropdown: fix right clipping, brand it --- */
.facets-container-drawer .mobile-facets__sort,
.facets-container-drawer .facet-filters__field {
  width: 100%;
  box-sizing: border-box;
  padding-right: var(--space-5, 1.5rem);
}
.facets-container-drawer select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Footer buttons (Clear / Apply) --- */
.facets-container-drawer .mobile-facets__footer {
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  gap: 0.75rem;
}
.facets-container-drawer .mobile-facets__footer .button,
.facets-container-drawer .mobile-facets__footer .mobile-facets__apply,
.facets-container-drawer .no-js-hidden.button {
  background: var(--ink, #6C5949);
  color: var(--paper, #F9F4EA);
  border-radius: 999px;
}

/* --- Drawer header tightening --- */
.facets-container-drawer .mobile-facets__header-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: var(--space-5, 1.5rem) var(--space-5, 1.5rem) var(--space-4, 1rem);
}
.facets-container-drawer .mobile-facets__heading {
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0;
}
.facets-container-drawer .mobile-facets__count {
  margin: 0;
}

/* --- Soft brand focus ring (replaces broken Dawn focus-inset box) --- */
.facets-container-drawer .mobile-facets__summary:focus,
.facets-container-drawer .mobile-facets__summary.focus-inset:focus {
  outline: none;
  box-shadow: none;
}
.facets-container-drawer .mobile-facets__summary:focus-visible {
  outline: 2px solid var(--ink, #6C5949);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Reset default UA button border on drawer close button --- */
.facets-container-drawer .mobile-facets__close-button {
  border: 0;
  background: transparent;
  color: var(--ink, #6C5949);
}
.facets-container-drawer .mobile-facets__close-button:focus-visible {
  outline: 2px solid var(--ink, #6C5949);
  outline-offset: 2px;
}

/* ============================================================
   Horizontal/vertical mobile drawer — same brand polish as the
   .facets-container-drawer block above, but for filter_type == 'horizontal'
   or 'vertical'. IMPORTANT: several properties below (header text-align/
   padding/border-bottom, heading color, arrow/caret color, footer background/
   border-top, the Clear-link, footer-button border/font-family) are NOT set
   by any .facets-container-drawer rule anywhere in this file -- meaning pure
   specificity-racing (as used for the panel shell above) would leave a real
   gap and these properties would leak into custom-rainbows too, since
   nothing there contests them. So instead of scoping via "collection-component"
   alone, every selector here is explicitly anchored to
   ".facets-container:not(.facets-container-drawer)" -- the outer wrapper div
   that only carries "facets-container-drawer" when filter_type == 'drawer'
   (snippets/facets.liquid ~line 34). This guarantees zero bleed-through
   regardless of which properties the drawer's own rules do or don't already
   override, rather than relying on case-by-case specificity checks.
   Layout mechanics (.mobile-facets__inner display:flex/flex-direction:column,
   .mobile-facets__main flex-grow:1 + overflow-y:auto, .mobile-facets__footer
   margin-top:auto + position:sticky bottom:0) are stock Dawn and already
   intact/unbroken -- untouched here. This block is purely visual: undefined
   --color-*/--gradient-background tokens replaced with real brand tokens,
   centered header -> left-aligned, accordion rows branded, Apply button
   turned into a pill.
   Token note: --font-heading does not exist in tokens.css (same gap already
   flagged in the drawer-polish section above) -- used --font-display. */

/* --- Header: left-aligned, tighter horizontal padding, hairline bottom border --- */
/* display:flex is already stock; adding align-items so the close button
   (now a real sibling of .mobile-facets__header-inner, moved out of the
   fixed-position <summary> context -- see snippets/facets.liquid) lines up
   with the top of the header-inner block, where the "Filter and sort"
   title sits (it's header-inner's first line). */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__header {
  text-align: left;
  padding: 16px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #6C5949) 12%, transparent);
  align-items: flex-start;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__heading {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  color: var(--ink, #6C5949);
  font-size: 1.3rem;
  margin: 0;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__count {
  color: var(--muted, #9A8F80);
  font-size: 0.85rem;
  margin: 4px 0 0;
}
/* Defensive: confirm the restored .small-hide utility hides the stray
   desktop-only "Filter" label inside this drawer (it's mobile-only by
   construction -- .medium-hide.large-up-hide on the wrapper -- so
   .small-hide should already win at <750px). Scope-hidden here too so this
   doesn't regress if that utility rule ever changes. Harmless for the
   drawer too (hiding an already-unused label), so no :not() needed here. */
collection-component .mobile-facets__heading.small-hide {
  display: none;
}

/* --- Filter rows: Color / Price (real <summary>) + Sort by (plain div,
   same class) all share .mobile-facets__summary -- one rule covers all three. --- */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #6C5949) 10%, transparent);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink, #6C5949);
  cursor: pointer;
  list-style: none;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__summary::-webkit-details-marker {
  display: none;
}
/* The label+arrow live in an inner, otherwise-unstyled <div> inside
   .mobile-facets__summary (stock already makes it flex via
   ".mobile-facets__summary > div { display:flex; align-items:center }"), so
   justify-content:space-between on the OUTER summary (set above) has no
   sibling to space apart -- that's why the chevron was hugging the label
   instead of sitting at the row's right edge. Target the actual flex row. */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__summary > div {
  width: 100%;
  justify-content: space-between;
}
/* icon-arrow.svg points right (->); rotate 90deg to read as a downward
   chevron (v) instead of replacing the icon. */
/* Color/Price chevron: a rotated icon-arrow.svg reads as a heavy downward
   ARROW (down), not a light disclosure chevron. Hide the SVG and draw a
   proper chevron with CSS borders instead (two sides of a square, rotated
   45deg -- the standard lightweight "v" technique). */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__arrow {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__arrow svg {
  display: none;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__arrow::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted, #9A8F80);
  border-bottom: 1.5px solid var(--muted, #9A8F80);
  transform: rotate(45deg);
}

/* Sort by: remove native <select> chrome, brand the text. Borderless -- the
   enclosing .mobile-facets__summary row above already supplies the hairline
   divider. Left-alignment: stock's label/select margin+padding (0.5rem /
   1.5rem) offset both the "Sort by" label and the select's own text
   slightly inward from where Color/Price's label sits -- zeroed so both
   line up on the same left content-padding edge.
   gap:12px on the row itself guarantees a minimum "Sort by:" <-> value
   separation regardless of how justify-content:space-between (stock,
   unchanged) ends up distributing the remaining space -- a native <select>
   sizes its own box to its widest <option>, not just the current value, so
   the visible gap between the label and the visible text can shrink to
   near-zero depending on option lengths even with space-between active.
   gap doesn't affect the chevron (an ::after pseudo-element positioned
   absolutely within .select, not itself a flex item of this row), so the
   right-aligned chevron is unaffected. */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__sort {
  gap: 12px;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__sort label {
  margin: 0;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__sort .select__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--ink, #6C5949);
  font-family: var(--font-body);
  border: none;
  margin-left: 0;
  padding-left: 0;
}
/* Stray "‹" left-caret: the shared arrow rule above used to also match
   ".mobile-facets__summary .icon-caret" (Sort's own icon-caret.svg, nested
   inside .select) and rotated it 90deg on TOP of its own already-downward
   orientation -- turning "v" into a sideways "‹". appearance:none only
   strips the <select>'s native browser chrome; it never touches this
   sibling SVG, which is why it survived as a leftover. Hide that SVG and
   draw the same chevron used for Color/Price instead, for a consistent
   look across all three rows. */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__sort .select {
  position: relative;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__sort .select .icon-caret {
  display: none;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__sort .select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--muted, #9A8F80);
  border-bottom: 1.5px solid var(--muted, #9A8F80);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Close-button/hamburger overlap: stock only handles the CLOSE-icon side of
   the toggle (details.menu-opening .mobile-facets__close { display:flex } —
   see ~line 892) but never hides .mobile-facets__open (the filter-icon +
   "Filter and sort" trigger) once open. No rule anywhere fixed this for
   either drawer type -- fixing it here for horizontal/vertical only, per
   scope; custom-rainbows likely has the identical gap, flagged separately. */
collection-component .facets-container:not(.facets-container-drawer) details.menu-opening .mobile-facets__open {
  display: none;
}

/* Per-icon hiding (hamburger, then cart) turned out not to be robust: raising
   the scrim's numeric z-index to 200 wasn't enough, because the header's
   sticky positioning lives on the SECTION WRAPPER, not the inner <header> --
   confirmed via sections/header.liquid's schema ("class": "site-header-section",
   line ~450) and its own CSS comment ("Sticky must live on the section
   WRAPPER (a direct <body> child), not the inner <header>"). That wrapper is
   ".site-header-section" -- position:sticky + z-index:100
   (".site-header-section:has(.site-header--sticky)", header.liquid ~225)
   establishes its OWN stacking context, so numeric z-index comparisons
   against elements outside that context aren't reliable; a sticky element
   with a z-index can still paint above things nominally "higher" in a
   different context. That numeric raise (scrim to 200, panel to 201, close
   button to 202) was reverted afterward once this rule below proved
   sufficient on its own -- the panel/scrim/close-button z-index values are
   back to their original 100/99/101 (matching custom-rainbows exactly; see
   those rules above). Robust fix: hide the whole wrapper instead of chasing
   icons one at a time -- nothing inside it (logo, nav, search, account,
   cart, hamburger) can bleed through if the wrapper itself never renders.
   This supersedes the earlier per-hamburger rule (folded in, not kept
   alongside it -- keeping both would just be dead weight since hiding the
   ancestor already hides that descendant).
   Reappearance on close: :has() is a live/reactive selector, re-evaluated
   continuously as the <details>'s class list changes -- when
   global.js's closeMenuDrawer() removes .menu-opening, this selector's
   condition goes false on its own and .site-header-section reverts to its
   normal (unset) display with no extra JS or CSS needed.
   Layout shift behind the scrim: none perceptible -- the opaque scrim
   (position:fixed; inset:0) covers the full viewport regardless of the
   header's presence, and global.js's openMenuDrawer() already adds
   overflow-hidden-mobile to <body> while the drawer is open, so no
   scroll-position jump is visible either. Scoped to horizontal/vertical
   only, matching this task's scope -- custom-rainbows likely has the
   identical issue, left alone. */
body:has(collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__disclosure.menu-opening) .site-header-section {
  display: none;
}

/* --- Footer: Remove all (text link) + Apply (brand pill).
   The margin-top:24px "void" workaround from the previous pass is no longer
   needed now that .mobile-facets__inner is height:auto (content-sized)
   instead of forced to 100vh -- .mobile-facets__main's flex-grow:1 has no
   leftover space to fill once the panel itself only stands as tall as its
   content, so the footer already sits naturally right after the last row
   with just its own padding. position:sticky bottom:0 (stock, untouched)
   still tracks the bottom on the rare case content is long enough to scroll. */
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__footer {
  background: var(--paper, #F9F4EA);
  border-top: 1px solid color-mix(in srgb, var(--ink, #6C5949) 12%, transparent);
  padding: 12px 24px 16px;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__clear {
  color: var(--ink, #6C5949);
  font-size: 0.85rem;
  text-decoration: underline;
}
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__footer .button,
collection-component .facets-container:not(.facets-container-drawer) .mobile-facets__footer .button--primary {
  background: var(--ink, #6C5949);
  color: var(--paper, #F9F4EA);
  border-radius: var(--radius-pill, 999px);
  border: 0;
  font-family: var(--font-body);
}

collection-component .collection-toolbar__search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 340px;
  margin: 0 12px;
  position: relative;
}
collection-component .collection-toolbar__search .search {
  width: 100%;
}
collection-component .collection-toolbar__search .field {
  position: relative;
  display: flex;
  align-items: center;
}
collection-component .collection-toolbar__search .search__input {
  width: 100%;
  border: 1px solid rgba(108, 89, 73, 0.32);
  border-radius: 999px;
  background: var(--paper);
  padding: 10px 42px 10px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
  min-height: 0;
}
collection-component .collection-toolbar__search .field__label { display: none; }
collection-component .collection-toolbar__search .search__button,
collection-component .collection-toolbar__search .reset__button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
collection-component .collection-toolbar__search .search__button svg,
collection-component .collection-toolbar__search .reset__button svg {
  width: 16px;
  height: 16px;
}

collection-component .facets-wrapper .facets-container {
  display: flex;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  flex: 1 1 auto;
  width: 100%;
  flex-wrap: nowrap;
}
collection-component .facets-wrapper .facets-container > .facets__form,
collection-component .facets-wrapper .facets-container > .facet-filters-form {
  display: flex;
  align-items: center;
}
collection-component .facets-wrapper .facets-container > .facets.facets-vertical-sort {
  margin-left: auto;
}

/* Active-facets chips: take no space when empty; mobile variant never renders in desktop toolbar.
   Note: the horizontal .active-facets-desktop always renders a "Clear all" <facet-remove>
   (facets.liquid:420), so :has(facet-remove) is always true — test for the per-filter chip
   link (.active-facets__button) instead, which only exists when filters are active. */
collection-component .facets-container .active-facets-mobile {
  display: none;
}
collection-component .facets-container .active-facets-desktop:not(:has(.active-facets__button)) {
  display: none;
}

collection-component .collection-toolbar__search predictive-search,
collection-component .collection-toolbar__search form,
collection-component .collection-toolbar__search .field,
collection-component .collection-toolbar__search input.search__input {
  width: 100%;
}

collection-component .facets-wrapper.page-width {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 var(--content-pad) 16px;
}
collection-component .facets-wrapper.page-width > .facets-container { flex: 1 1 auto; }
collection-component .facets-wrapper.page-width > .collection-toolbar__search { flex: 1 1 260px; max-width: 340px; }
collection-component .facets-wrapper.page-width > .facets.facets-vertical-sort,
collection-component .facets-wrapper.page-width > form,
collection-component .facets-wrapper.page-width > .product-count { margin-left: 0; }

/* --- Color facet (desktop/horizontal toolbar): checkboxes -> brand pills ---
   Live-DOM check found this filter actually renders through the TEXT branch,
   not swatch: ul.facets-layout-list--text > li.facets__item >
   label.facet-checkbox (snippets/facets.liquid ~286-319). Retargeted from
   --swatch below. .facet-checkbox is a class this branch's <label> carries
   only in the desktop toolbar path — the mobile/drawer branch uses
   .mobile-facets__label instead, so these rules can't reach the
   custom-rainbows drawer palette (~line 1337+).
   No dot in text mode — pills are label-only for now. The decorative
   square.svg + checkmark .svg-wrapper the text branch renders
   (facets.liquid ~311-315) are hidden below; the underlying
   <input type="checkbox"> is already visually inert via stock Dawn's
   .facets-layout-list--text input[type='checkbox'] rule (position:absolute;
   z-index:-1; appearance:none — see ~line 479), so it stays in the a11y tree
   and toggles via the native <label for> click target; no template edit
   was needed.
   NOTE: .facets-layout-list--text is a presentation-level class, not
   Color-specific — any other text-presentation filter in the horizontal
   toolbar (e.g. a Size or Material list) will also render as a pill here.
   The desktop text-branch <label> carries no data-filter-label attribute to
   scope against without a template change (unlike the mobile branch, which
   has one) — flag if Color-only scoping turns out to be required. */
collection-component .facets-layout-list--text.facets__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
collection-component .facets-layout-list--text .facets__item {
  display: block;
}
collection-component .facets-layout-list--text .facet-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 0;
  padding: 6px 14px 6px 8px;
  background: var(--paper-tint, #FBF7EE);
  border: 1px solid color-mix(in srgb, var(--ink, #6C5949) 15%, transparent);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink, #6C5949);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
collection-component .facets-layout-list--text .facet-checkbox > svg,
collection-component .facets-layout-list--text .facet-checkbox > .svg-wrapper {
  display: none;
}
collection-component .facets-layout-list--text .facet-checkbox:hover {
  background: var(--paper, #F9F4EA);
  border-color: var(--brand-champagne, #D9C19A);
}
collection-component .facets-layout-list--text .facet-checkbox:has(input:checked) {
  background: var(--ink, #6C5949);
  color: var(--paper, #F9F4EA);
  border-color: var(--ink, #6C5949);
}

/* Bug fix 1: selected-pill text was invisible. Cause: template-collection.css
   has "collection-component .facets__display, collection-component
   .facets__display * { color: #6C5949; }" (~line 593) — a universal selector
   that sets color DIRECTLY on .facet-checkbox__text and
   .facet-checkbox__text-label. A direct rule on a descendant always wins over
   inherited color from an ancestor, so the :has(input:checked) color on
   .facet-checkbox above never reached the text nodes. Override the same
   descendants explicitly instead of relying on inheritance. */
collection-component .facets-layout-list--text .facet-checkbox:has(input:checked) .facet-checkbox__text,
collection-component .facets-layout-list--text .facet-checkbox:has(input:checked) .facet-checkbox__text-label {
  color: var(--paper, #F9F4EA);
}

/* Bug fix 3: hover/focus underline on the pill label text.
   Stock rule (~line 328): ".facets-layout-list .facets__label:hover
   .facet-checkbox__text-label, .facets-layout-list input:focus ~
   .facet-checkbox__text-label { text-decoration: underline; }" — .facet-checkbox
   carries both .facets-layout-list's sibling class .facets__label and sits
   inside a .facets-layout-list(--text) list, so it's in scope. Suppress in
   both trigger states; pills shouldn't underline on hover/focus. */
collection-component .facets-layout-list--text .facet-checkbox:hover .facet-checkbox__text-label,
collection-component .facets-layout-list--text .facet-checkbox input:focus ~ .facet-checkbox__text-label {
  text-decoration: none;
}

/* Bug fix 2 (revised): active-facet chip ("Color: Beach House x") needs to
   render in normal flow, directly below the toolbar, not absolutely
   positioned (that pushed it off-canvas — no positioned ancestor gave it a
   sane containing block to lay out against).
   Cause, unchanged from the first pass: stock Dawn's base ".active-facets"
   rule (~line 574) sets "width: 100%; grid-column: 1 / -1; grid-row: 2" —
   built for the vertical sidebar's CSS-grid layout. In the horizontal
   toolbar, .active-facets-desktop is a direct flex item of .facets-container
   (facet-filters-form and its <form> are both display:contents, flattening
   their children into the toolbar's flex row — see ~line 1524).
   Fix: keep it a real flex item (in-flow), but force it onto its own line
   with flex-basis:100% + a high order, which requires the container to
   allow wrapping. .facets-container is normally nowrap because there's
   nothing to wrap — .active-facets-desktop is display:none whenever no
   filter is active — so enabling wrap here has zero visible effect on the
   toolbar's single-row layout until a chip actually exists. Once it wraps,
   it starts flush at the container's left edge (default justify-content:
   flex-start, unchanged), lining up with .facets__wrapper — the first
   flex item, where the Color/Price buttons start — and being in normal flow
   it pushes the product grid down, which is the intended behavior. */
collection-component .facets-wrapper .facets-container {
  flex-wrap: wrap;
}
/* Real culprit for the above-chip gap: stock ".facets__summary" (~line 199)
   sets "margin-bottom: 1.5rem" (never overridden) on the Color/Price/Sort
   <summary> triggers. That inflates .facets__wrapper's own rendered height
   (its flex-row line includes each <details>'s margin), pushing the wrapped
   chip line further down. It was invisible while the toolbar was nowrap with
   no second line to reveal it. */
collection-component .facets-wrapper .facets__summary {
  margin-bottom: 0;
}
collection-component .facets-container .active-facets-desktop {
  order: 99;
  flex: 1 1 100%;
  width: auto;
  grid-column: auto;
  grid-row: auto;
  margin: 4px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Active-facet chip: same brand-pill language as the Color facet pills. */
collection-component .facets-container .active-facets-desktop .active-facets__button-inner {
  background: var(--paper-tint, #FBF7EE);
  color: var(--ink, #6C5949);
  border: 1px solid color-mix(in srgb, var(--ink, #6C5949) 15%, transparent);
  border-radius: var(--radius-pill, 999px);
  box-shadow: none;
  padding: 6px 10px 6px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
collection-component .facets-container .active-facets-desktop .active-facets__button:hover .active-facets__button-inner {
  background: var(--paper, #F9F4EA);
  border-color: var(--brand-champagne, #D9C19A);
  box-shadow: none;
}
collection-component .facets-container .active-facets-desktop a.active-facets__button:focus-visible .active-facets__button-inner,
collection-component .facets-container .active-facets-desktop a.active-facets__button.focused .active-facets__button-inner {
  box-shadow: 0 0 0 2px var(--paper, #F9F4EA), 0 0 0 4px var(--ink, #6C5949);
  outline: none;
}

/* Price facet (desktop/horizontal toolbar): explicit Apply affordance.
   Dawn's desktop price_range branch (snippets/facets.liquid ~343-379) has no
   submit button at all -- only the mobile/drawer footer does
   (.mobile-facets__footer, "products.facets.apply"). Nothing was suppressed
   to reveal here; this is a genuinely new button, added only for
   filter_type == 'horizontal'. It reuses the existing auto-submit mechanism
   (facets.js's debounced 'input' listener on the form) rather than adding a
   new submit path -- clicking it just closes the <details> disclosure, same
   idiom Dawn's own mobile Apply buttons use, trusting that typing into the
   From/To fields already queued the update. */
/* Price facet dropdown panel too tall: stock ".facets__price" (~line 544)
   sets padding:2rem (~34-37px in this fork's inflated root font-size),
   creating a large void between the header and the From/To inputs.
   .facets__price is shared by BOTH the desktop and mobile <price-range>
   markup (identical class in both branches), so scope through
   .facets__display -- a class the ternary at ~line 360 only emits for
   filter_type == 'horizontal' (vertical/drawer get .facets__display-vertical
   instead) -- to hit the desktop toolbar's panel only. */
collection-component .facets__display .facets__price {
  padding: 8px 16px 16px;
}
/* Oversized From/To inputs (measured 111px x 80px). No explicit height
   anywhere -- the 80px comes from base.css's ".field__input" stacking
   min-height:44px with padding:var(--space-3) var(--space-4) (~25-28px
   vertical, this fork's inflated root font-size), which already exceeds the
   44px floor. Force an explicit height instead of fighting the padding math,
   and set an explicit width (base.css only sets width:100%, no fixed size --
   111px was the browser's shrink-to-fit intrinsic default). Also tighten the
   From/To internal gap (.field + .field-currency margin-left:2rem, ~34-37px). */
collection-component .facets__display .facets__price .field__input {
  height: 44px;
  min-height: 0;
  width: 90px;
  padding: 0 12px;
}
collection-component .facets__display .facets__price .field + .field-currency {
  margin-left: 12px;
}
/* The "highest price/Reset" header row was adding another ~27.6px below
   itself (stock ".facets__header" padding:1.5rem 2rem, ~line 283) on top of
   price-range's own padding-top, stacking to ~44px total. ".facets__header"
   is shared markup -- the Color/list filter's "N selected/Reset" row uses
   the exact same class (snippets/facets.liquid ~207), inside the same
   .facets__display wrapper -- so a bare override would've also shrunk
   Color's header. Scope to the .facets__display that actually contains a
   .facets__price (only the price facet's panel does) via :has(). */
collection-component .facets__display:has(.facets__price) .facets__header {
  padding-bottom: 8px;
}
collection-component .facets__price-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 12px 16px 16px 16px;
  padding: 8px 20px;
  background: var(--ink, #6C5949);
  color: var(--paper, #F9F4EA);
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease;
}
collection-component .facets__price-apply:hover {
  transform: scale(1.03);
}

/* Color facet pills (desktop text branch): color-swatch dots.
   Fresh name -> hex map built from docs/vinyl_colors.json (all 30
   canonical_name / hex_preview pairs) -- intentionally NOT reusing the
   drawer's map at ~line 1370+, which is missing Antique Lace, Copper,
   Dahlia Red, and others. data-filter-value on the desktop <label> was added
   in snippets/facets.liquid to mirror the mobile branch's existing attribute
   (same value: value.value, escaped) so the same map keys work for both.
   The shared dot-shape rule below only matches the 30 known
   [data-filter-value="..."] names -- any other facet value (Color values not
   in vinyl_colors.json, or any other text-presentation filter entirely) gets
   no ::before at all, since no selector here targets it. That's deliberate:
   a generic ".facet-checkbox::before" fallback would render an empty
   transparent dot instead of no dot. Desktop text branch only; the mobile
   drawer's map (~line 1370+) is untouched. */
collection-component .facets-layout-list--text .facet-checkbox:is(
  [data-filter-value="Gold"],
  [data-filter-value="Silver"],
  [data-filter-value="Copper"],
  [data-filter-value="Black"],
  [data-filter-value="White"],
  [data-filter-value="Persimmon"],
  [data-filter-value="Apricot"],
  [data-filter-value="Signal Yellow"],
  [data-filter-value="Yellow"],
  [data-filter-value="Antique Lace"],
  [data-filter-value="Dahlia Red"],
  [data-filter-value="Red"],
  [data-filter-value="Wisteria"],
  [data-filter-value="Lilac"],
  [data-filter-value="Lavender"],
  [data-filter-value="Lime Green"],
  [data-filter-value="Key Lime Pie"],
  [data-filter-value="Carnation Pink"],
  [data-filter-value="Soft Pink"],
  [data-filter-value="Eggplant"],
  [data-filter-value="Marsh Green"],
  [data-filter-value="Dark Green"],
  [data-filter-value="Powder Blue"],
  [data-filter-value="Beach House"],
  [data-filter-value="Geyser Blue"],
  [data-filter-value="Grey"],
  [data-filter-value="Brown"],
  [data-filter-value="Light Brown"],
  [data-filter-value="Navy"],
  [data-filter-value="Turquoise"]
)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 2px var(--paper, #F9F4EA);
  margin-right: 6px;
  flex-shrink: 0;
}
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Gold"]::before { --dot: #C9A961; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Silver"]::before { --dot: #B8B8B8; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Copper"]::before { --dot: #A57555; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Black"]::before { --dot: #1A1A1A; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="White"]::before { --dot: #FFFFFF; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Persimmon"]::before { --dot: #E85829; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Apricot"]::before { --dot: #F4B084; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Signal Yellow"]::before { --dot: #F0B428; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Yellow"]::before { --dot: #F7D419; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Antique Lace"]::before { --dot: #F1E8D0; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Dahlia Red"]::before { --dot: #B83A4F; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Red"]::before { --dot: #C8232A; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Wisteria"]::before { --dot: #BAB6CC; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Lilac"]::before { --dot: #C490C0; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Lavender"]::before { --dot: #9885C5; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Lime Green"]::before { --dot: #6BAA42; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Key Lime Pie"]::before { --dot: #B8E098; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Carnation Pink"]::before { --dot: #E8569A; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Soft Pink"]::before { --dot: #F2C5CB; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Eggplant"]::before { --dot: #5E4956; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Marsh Green"]::before { --dot: #9CA463; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Dark Green"]::before { --dot: #144338; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Powder Blue"]::before { --dot: #B8D4E3; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Beach House"]::before { --dot: #A8D8C8; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Geyser Blue"]::before { --dot: #5FB8D8; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Grey"]::before { --dot: #B8B6B5; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Brown"]::before { --dot: #4A332A; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Light Brown"]::before { --dot: #A0815C; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Navy"]::before { --dot: #232D5A; }
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Turquoise"]::before { --dot: #1A8FA4; }

/* White and Antique Lace need a faint border to stay visible against the
   paper-tint pill background (both are near-white/cream). */
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="White"]::before,
collection-component .facets-layout-list--text .facet-checkbox[data-filter-value="Antique Lace"]::before {
  border: 1px solid color-mix(in srgb, var(--ink, #6C5949) 15%, transparent);
}

/* "Clear all" link was rendering near-heading size. Cause: stock
   ".active-facets__button-wrapper *" (~line 616) sets font-size:1rem, bumped
   to 1.4rem at min-width:990px (~line 625-628) -- roughly 24-26px in this
   fork's inflated root font-size. Its wrapper also had padding-top:1.5rem
   (~line 609-613), pushing the link out of vertical alignment with the
   chips. Shrink to match the pill label size and drop the offsetting padding
   so it sits inline with the chips. Kept as a plain text link (no pill),
   per spec. */
collection-component .facets-container .active-facets-desktop .active-facets__button-wrapper {
  padding-top: 0;
}
/* Real cause of the chip/"Remove all" baseline mismatch: stock
   ".active-facets__button" (~line 583) sets margin-top:1.5rem on each chip
   anchor -- never overridden. That pushes every chip down relative to
   "Remove all" (whose wrapper padding-top is already zeroed above), even
   with align-items:center on .active-facets-desktop, since align-items only
   centers each item's own margin-box within the line -- it can't undo an
   asymmetric margin on one item relative to its siblings. */
collection-component .facets-container .active-facets-desktop .active-facets__button {
  margin-top: 0;
}
collection-component .facets-container .active-facets-desktop .active-facets__button-remove {
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--ink, #6C5949);
}
/* The visible "Clear all" text is a bare <span> nested inside the anchor,
   with its own effective font-size (25.76px) beating the font-size set on
   the <a> above. Target it directly. .active-facets-desktop in the chain
   keeps this off .active-facets-mobile. */
collection-component .active-facets-desktop .active-facets__button-remove span {
  font-size: 0.85rem;
}