/** Shopify CDN: Minification failed

Line 502:45 Unexpected "{"

**/
.facets-container {
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
}

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

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

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

  .facets-container {
    margin-bottom: 2rem;
  }
}

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

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

.facet-filters__label {
  color: var(--color-foreground-85);
  display: block;
  margin: 0 2rem 0 0;
}

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

.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 {
  min-height: auto;
  min-width: auto;
  transition: none;
}

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

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

.mobile-facets__sort .select__select.focused,
.no-js .mobile-facets__sort .select__select:focus {
  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.focused,
.no-js .facet-filters__sort:focus {
  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);
}

.no-js .facet-filters__sort:focus:not(:focus-visible),
.no-js .mobile-facets__sort .select__select:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

.facets {
  display: block;
}

.facets__form {
  align-items: end;
  display: grid;
  gap: 2.4rem;
  grid-template-columns: auto auto;
}

.js .facets__form {
  grid-template-columns: 1fr;
}

.facets .facets__form {
  column-gap: 2.4rem;
  grid-auto-rows: auto;
  grid-template-columns: 1fr auto;
  row-gap: 1.2rem;
}

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

/* Small "Filter by" label preceding the filter pills. */
.facets__filter-by {
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: rgba(var(--color-foreground), 0.55);
  white-space: nowrap;
}

.facets__wrapper#filters-desktop {
  display: none;
}

.facets__wrapper#filters-desktop.is-active {
  display: flex;
}

.facets__heading {
  color: rgba(var(--color-foreground), 0.85);
  display: block;
  line-height: 1;
  margin: 0 0 1rem 0.5rem;
  width: auto;
}

.facets__button svg {
  height: 1.6rem;
  margin-right: 1rem;
  transform: scale(2.5);
  width: 1.6rem;
}

.facets__reset {
  margin-left: auto;
}

.facets__summary {
  color: rgba(var(--color-foreground), 1);
  display: flex;
  height: 5.2rem;
  margin: 0;
  padding: 1rem 6rem 1rem 1.6rem;
}

.facets__summary > span {
  line-height: 1.3;
}

.facets__disclosure {
  transition: border var(--duration-short) ease;
  border: var(--inputs-border-thickness) solid
    rgba(var(--color-border-1), var(--inputs-border-opacity));
  border-radius: var(--inputs-radius);
}

.facets__disclosure:focus-visible,
.facets__disclosure:hover {
  border: var(--inputs-border-thickness) solid rgba(var(--color-border-1), 1);
  box-shadow: none;
  outline: none;
}

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

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

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

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

.facets__display {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgb(var(--color-border-1));
  border-radius: var(--inputs-radius);
  left: -0.1rem;
  max-height: 55rem;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 0.5rem);
  width: 35rem;
}

.facets__header {
  background-color: rgb(var(--color-background));
  border-bottom: 0.1rem solid rgb(var(--color-border-1));
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.facets__list {
  padding: 0.5rem 2rem;
}

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

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

.facet-checkbox {
  align-items: center;
  display: flex;
  flex-grow: 1;
  padding: 1rem 0;
  position: relative;
  word-break: break-word;
}

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

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

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

.facet-checkbox .icon-checkmark {
  color: rgba(var(--color-foreground), 1);
  left: 0.4rem;
  position: absolute;
  top: 1.5rem;
  visibility: hidden;
  z-index: 5;
}

.facet-checkbox > input[type='checkbox']:checked ~ .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 ~ .icon-checkmark {
    border: none;
  }
}

.facet-checkbox--disabled {
  color: rgba(var(--color-foreground), 0.4);
}

.facets__price {
  display: flex;
  padding: 0 var(--space-s) 2rem var(--space-s);
}

@media only screen and (min-width: 750px) {
  .facets__price {
    padding: 2rem;
  }
}

.facets__price > * + * {
  margin-left: 2rem;
}

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

.facets__price .field {
  align-items: center;

  border: var(--inputs-border-thickness) solid
    rgba(var(--color-border-1), var(--inputs-border-opacity));
}

.facets__price .field .field__input {
  border: 0;
}

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

.facets__price .field__label {
  left: 1.5rem;
}

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

.facets__button-no-js {
  transform: translateY(-0.6rem);
}

.active-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.4rem;
  position: relative;
  justify-content: center;
  width: 100%;
}

@media only screen and (min-width: 750px) {
  .active-facets {
    justify-content: flex-start;
    margin-bottom: 0;
  }
}

.active-facets__button {
  background-color: rgba(var(--color-border-1), var(--inputs-border-opacity));
  color: rgb(var(--color-foreground));
  font-size: 1.1rem;
  letter-spacing: var(--letter-spacing);
  line-height: 160%;
  padding: 0.5rem 1rem 0.3rem;
  text-decoration: none;
  text-transform: uppercase;
}

.active-facets__button span {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}

.active-facets__button.active-facets__button--clear {
  background-color: transparent;
  letter-spacing: var(--letter-spacing-small);
  text-decoration: underline;
  text-transform: capitalize;
}

.active-facets__button--clear::after {
  background-color: rgba(var(--color-border-1), 1);
  bottom: 0;
  content: '';
  left: -1.5rem;
  position: absolute;
  top: 0;
  width: 0.1rem;
}

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

@media screen and (max-width: 989px) {
  .active-facets__button,
  .active-facets__button-remove {
    margin: 0;
    padding: 0.8rem 1.2rem;
  }

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

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

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  a.active-facets__button:focus-visible {
    outline: transparent solid 0.1rem;
  }
}

a.active-facets__button.focused,
.no-js a.active-facets__button:focus {
  box-shadow: none;
  outline: none;
}

a.active-facets__button:focus-visible .active-facets__button-inner {
  outline: none;
  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));
}

a.active-facets__button.focused .active-facets__button-inner,
.no-js a.active-facets__button:focus .active-facets__button-inner {
  outline: none;
  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));
}

.active-facets__button svg {
  align-self: center;
  flex-shrink: 0;
  pointer-events: none;
  width: 1.2rem;
}

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

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

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

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

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

.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 {
  background-color: var(--color-modal-overlay);
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.mobile-facets__disclosure {
  display: flex;
  justify-content: center;
}

.mobile-facets__wrapper {
  border-bottom: 0.1rem solid rgb(var(--color-border-1));
  margin-bottom: 1rem;
  margin-left: 0;
  padding-bottom: 1.4rem;
}

@media only screen and (min-width: 750px) {
  .mobile-facets__disclosure {
    justify-content: flex-start;
  }

  .mobile-facets__wrapper {
    border: 0;
    margin: 0;
    padding: 0;
  }
}

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

.mobile-facets__inner {
  background-color: rgb(var(--color-background));
  display: flex;
  flex-direction: column;
  height: 100%;
  pointer-events: all;
  transition: transform var(--duration-short) ease;
  width: 100%;
}

@media only screen and (min-width: 750px) {
  .mobile-facets__inner {
    max-width: var(--menu-drawer-width);
  }
}

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

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

.mobile-facets__header {
  background-color: rgb(var(--color-background));
  display: flex;
  padding: 4rem var(--space-s) 2rem;
  position: sticky;
  text-align: center;
  top: 0;
  z-index: 2;
}

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

.mobile-facets__info {
  padding: 0 var(--space-s);
}

.mobile-facets__heading {
  margin: 0;
  text-align: left;
}

.mobile-facets__count {
  color: inherit;
  flex-grow: 1;
  margin: 0;
  text-align: left;
}

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

.mobile-facets__open {
  align-items: center;
  display: flex;
  justify-content: center;
  letter-spacing: var(--letter-spacing);
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

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

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

.mobile-facets__open svg {
  color: rgb(var(--input-text-color));
  width: 2rem;
}

@media only screen and (min-width: 750px) {
  .mobile-facets__open-wrapper {
    width: fit-content;
  }

  .mobile-facets__open {
    background-color: rgb(var(--input-background-color));
    border: var(--inputs-border-thickness) solid rgba(var(--color-border-1), var(--inputs-border-opacity));
    border-radius: var(--inputs-radius);
    color: rgb(var(--input-text-color));
    cursor: pointer;
    height: 5.2rem;
    justify-content: flex-start;
    line-height: 160%;
    padding: 1.6rem 2.8rem;
    width: auto;
    width: fit-content;
  }

  .mobile-facets__open:hover {
    border: var(--inputs-border-thickness) solid rgb(var(--color-border-1));
  }
}

.mobile-facets__close {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity var(--duration-short) ease;
  width: 4.4rem;
  z-index: 99;
}

.mobile-facets__close svg {
  width: 3rem;
}

@media only screen and (min-width: 990px) {
  .mobile-facets__close {
    align-items: center;
    background-color: rgb(var(--color-background));
    border: 0.1rem solid rgb(var(--color-border-1));
    justify-content: center;
    position: absolute;
    right: calc(0px - var(--space-s));
    transform: translate(50%);
    z-index: 99;
  }

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

details.menu-opening .mobile-facets__close {
  color: rgb(var(--color-foreground));
  display: flex;
  opacity: 1;
  overflow: hidden;
}

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

.mobile-facets__close-button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: rgb(var(--color-foreground));
  display: flex;
  gap: 2.4rem;
  letter-spacing: inherit;
  margin-bottom: 3rem;
  margin-top: 1.5rem;
  padding: 1.2rem var(--space-s);
  text-decoration: none;
}

.no-js .mobile-facets__close-button {
  display: none;
}

.mobile-facets__close-button .icon-arrow {
  transform: rotate(180deg);
  width: 3.6rem;
}

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

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

.no-js .mobile-facets__details {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.04);
}

.mobile-facets__summary {
  margin: 0;
  padding: 1.1rem var(--space-s);
  position: relative;
  text-decoration: none;
}

.mobile-facets__summary svg {
  margin-left: auto;
  width: 2.8rem;
}

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

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

.js details[open] > .mobile-facets__submenu {
  transition: transform var(--duration-default)
      cubic-bezier(0.29, 0.63, 0.44, 1),
    visibility var(--duration-default) 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 {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  height: 1.6rem;
  left: 2.1rem;
  position: absolute;
  position: absolute;
  top: 1.2rem;
  width: 1.6rem;
  z-index: 0;
}

.mobile-facets__label {
  display: flex;
  padding: 1.5rem var(--space-s) 1.5rem var(--space-s);
  transition: background-color var(--duration-default) ease;
  width: 100%;
  word-break: break-word;
}

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

.mobile-facets__label .icon-checkmark {
  height: 0.8rem;
  left: 3.4rem;
  position: absolute;
  top: 2rem;
  visibility: hidden;
  width: 1.2rem;
}

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

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

.mobile-facets__label--disabled {
  opacity: 0.5;
}

.mobile-facets__footer {
  background-color: rgb(var(--color-background));
  bottom: 0;
  column-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 1.1rem var(--space-s);
  position: sticky;
  z-index: 2;
}

.mobile-facets__footer .button {
  flex: 1;
}

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

.mobile-facets__footer .mobile-facets__details.js-filter {
  width: 100%;
}

.mobile-facets__footer .mobile-facets__summary {
  border-bottom: 0.1rem solid rgb(var(--color-border-1));
  margin-bottom: 2rem;
  padding: 0;
  padding-bottom: 2rem;
  width: 100%;
}

.mobile-facets__footer .button--primary span {
  margin-left: 1.5rem;
}

.mobile-facets__footer .button--primary span svg {
  width: 3.6rem;
}

.mobile-facets__footer noscript .button {
  width: 100%;
}

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

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

.mobile-facets__sort .select {
  width: 100%;
}

.no-js .mobile-facets__sort .select {
  position: relative;
  right: -1rem;
}

.mobile-facets__sort .select .icon-caret {
  height: 2.4rem;
  right: 2.4rem;
}

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

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

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

.product-count__text.loading {
  visibility: hidden;
}

.product-count .loading-overlay__spinner,
.product-count-vertical .loading-overlay__spinner {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
}

.product-count__text.loading + .loading-overlay__spinner {
  display: block;
}

@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 {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
  }

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

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

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

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

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

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

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

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

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

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

  .facets-vertical .no-js .facets__button-no-js {
    margin-left: 0;
    transform: none;
  }

  .facets-vertical .no-js .facet-filters__field {
    justify-content: flex-start;
    padding-bottom: 1rem;
    padding-top: 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;
  }

  .no-js .facets-vertical .facet-filters.sorting {
    flex-direction: column;
    padding-left: 0;
  }

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

  .no-js .facets-vertical .facets-container {
    display: flex;
    flex-direction: column;
  }

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

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

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

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

  .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 {
    margin-bottom: 0;
    margin-left: -0.5rem;
    padding: 1rem;
  }

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

/* ============================================================
   Aklasu — horizontal filter pills (V3)
   ------------------------------------------------------------
   Restyles Carbon's horizontal facets into the pill row:
   quiet outlined pills, an open state (ink border + caret flip),
   a charcoal "active" fill with a count chip, and a floating
   dropdown that overlays the products (Carbon already sets
   .facets__display to position:absolute, so content never
   shifts). Colours use the theme foreground/background vars so
   the pills adapt to the section's colour scheme. Selectors
   target .facets__disclosure (horizontal only — vertical uses
   .facets__disclosure-vertical). Root is 62.5% → 1rem = 10px.
   ============================================================ */

/* Centre the pill row */
.facets__wrapper {
  justify-content: center;
}

/* Pill — soft grey fill, NO border, 8px radius, no caret */
.facets__disclosure,
.facets__disclosure:hover,
.facets__disclosure:focus-visible,
.facets__disclosure:focus-within {
  border: none;
  border-radius: 0.8rem;
  background: rgba(17, 17, 17, 0.05);
  box-shadow: none;
  outline: none;
  transition: background var(--duration-short) ease;
}
.facets__disclosure:hover {
  background: rgba(17, 17, 17, 0.09);
}
.facets__summary {
  height: auto;
  min-height: 4rem;
  padding: 0.9rem 1.6rem;
  align-items: center;
  border-radius: 0.8rem;
  letter-spacing: 0.01em;
}
.facets__summary > div {
  gap: 0.6rem;
}
/* Carets removed — the panel itself signals the dropdown */
.facets__disclosure .facets__summary .icon-caret {
  display: none;
}

/* Count chip — the active indicator. #333 (never pure black). */
.facets__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.5rem;
  border-radius: 0.4rem;
  font-size: 1.1rem;
  line-height: 1;
  background: #333;
  color: #fff;
  border-radius: 999px;
}
.facets__count--dot {
  min-width: 0.7rem;
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border-radius: 50%;
}

/* Active + closed → a touch deeper grey (no black fill) plus the
   count chip. Text stays dark — minimal black. */
.facets__disclosure.facets__disclosure--active {
  background: rgba(17, 17, 17, 0.12);
}

/* Open pill = the tab, born from the panel. Pill and panel share
   ONE frosted surface (megamenu language), no borders, no seam.
   Overrides the active grey while open (declared later). */
.facets__disclosure[open],
.facets__disclosure[open]:hover {
  position: relative;
  z-index: 50;
  background: #f3f2f0;
  border: none;
  border-radius: 0.8rem 0.8rem 0 0;
}
/* Stem under the active pill bridges the gap down to the panel, so
   pill + stem + panel read as ONE unit — while the rest of the panel
   keeps whitespace above it, clear of the inactive pills. */
.facets__disclosure[open]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0.9rem;
  background: #f3f2f0;
}
/* Panel: same flat opaque colour (no translucency — nothing bleeds
   through), dropped below the row, square top-left so it meets the
   stem flush. */
.facets__display {
  left: 0;
  top: calc(100% + 0.8rem);
  width: 30rem;
  z-index: 49;
  background: #f3f2f0;
  border: none;
  border-radius: 0 0.8rem 0.8rem 0.8rem;
  box-shadow: 0 1.4rem 3.2rem rgba(17, 17, 17, 0.14);
}

/* Remove Carbon's full-screen click-catcher pseudo so our own
   outside-click handler controls closing. */
.facets__disclosure.disclosure-has-popup[open] > .facets__summary::before {
  display: none;
}

/* Price-as-sort options (radio rows) */
.facets__list--sort {
  padding: 0.6rem 2rem 1.2rem;
}
.facet-radio {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.8rem 0;
  cursor: pointer;
}
.facet-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.facet-radio__dot {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, 0.3);
  position: relative;
}
.facet-radio input:checked + .facet-radio__dot {
  border-color: #333;
}
.facet-radio input:checked + .facet-radio__dot::after {
  content: '';
  position: absolute;
  inset: 0.35rem;
  border-radius: 50%;
  background: #333;
}

/* Breathing room at the bottom of the panel so options aren't
   crammed against the edge. */
.facets__display .facets__list {
  padding-bottom: 1.6rem;
}

/* Soften the in-panel separators — no hard black lines */
.facets__display .facets__header {
  background: transparent;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.facets__display .facet-checkbox > svg rect {
  stroke: rgba(17, 17, 17, 0.3);
}

/* Feedback while the grid re-renders after a selection */
.collection.loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ============================================================
   Desktop only — on scroll (sticky) the pill row goes charcoal
   so it stands out against the page. Kept slightly translucent
   (frosted) to match the site's glass language. Mobile uses the
   drawer, so this is scoped to ≥750px.
   ============================================================ */
@media screen and (min-width: 750px) {
  .collection-filters--sticky .facets__disclosure {
    background: rgba(255, 255, 255, 0.12);
  }
  .collection-filters--sticky .facets__disclosure:hover {
    background: rgba(255, 255, 255, 0.18);
  }
  .collection-filters--sticky .facets__disclosure.facets__disclosure--active {
    background: rgba(255, 255, 255, 0.22);
  }
  .collection-filters--sticky .facets__summary {
    color: #fff;
  }
  .collection-filters--sticky .facets__count {
    background: #fff;
    color: #2c2c2a;
  }
  /* open pill + stem + panel: frosted dark, slightly translucent */
  .collection-filters--sticky .facets__disclosure[open],
  .collection-filters--sticky .facets__disclosure[open]::after,
  .collection-filters--sticky .facets__display {
    background: rgba(44, 44, 42, 0.97);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
  }
  .collection-filters--sticky .facets__display,
  .collection-filters--sticky .facets__display .facets__selected,
  .collection-filters--sticky .facets__display .facets__reset,
  .collection-filters--sticky .facets__display label {
    color: #fff;
  }
  .collection-filters--sticky .facets__display .facets__header {
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }
  .collection-filters--sticky .facets__display .facet-checkbox > svg rect {
    stroke: rgba(255, 255, 255, 0.5);
  }
  .collection-filters--sticky .facets__display .facet-checkbox .icon-checkmark {
    color: #fff;
  }
  .collection-filters--sticky .facets__display .facet-checkbox--disabled {
    color: rgba(255, 255, 255, 0.4);
  }
  .collection-filters--sticky .facet-radio__dot {
    border-color: rgba(255, 255, 255, 0.5);
  }
  .collection-filters--sticky .facet-radio input:checked + .facet-radio__dot {
    border-color: #fff;
  }
  .collection-filters--sticky .facet-radio input:checked + .facet-radio__dot::after {
    background: #fff;
  }
}

/* ============================================================
   Floating pills on scroll (desktop) — no bar behind them. Each
   pill is its own frosted-charcoal chip with a soft shadow so it
   reads over any product image. Overrides the translucent-white
   pill fills above (same selector, declared later).
   ============================================================ */
@media screen and (min-width: 750px) {
  .collection-filters--sticky .facets__disclosure {
    background: rgba(44, 44, 42, 0.9);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
  .collection-filters--sticky .facets__disclosure:hover {
    background: rgba(44, 44, 42, 0.97);
  }
  .collection-filters--sticky .facets__disclosure.facets__disclosure--active {
    background: rgba(20, 20, 19, 0.96);
  }
}