/** Shopify CDN: Minification failed

Line 1747:0 Unexpected "}"

**/
.facets-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  padding-top: 8px;
  padding-bottom:  8px;
  padding-left:16px;

}

/* BUG encontrado y corregido, en tres rondas -revertido a la
   posición ORIGINAL (pre-tarea) por pedido explícito, confirmado sin
   poder verificar el resultado exacto contra el sitio en vivo-:

   Ronda 1: se probó anclar .facets-container (position:absolute) a
   .facets-wrapper (position:relative). El right:16px quedaba
   consistente, pero el "top" (148/152/12em, ver los @media más abajo)
   medido desde .facets-wrapper resultó estar mal pensado: .facets-
   wrapper es grid-row:1, la MISMA fila que la grid de productos, así
   que su borde superior cae mucho más abajo que donde debía verse el
   botón -el botón aparecía a media altura, junto a las primeras
   tarjetas-.

   Ronda 2: se cambió el "top" a 0 (alineado con el borde superior de
   esa fila, como en la referencia BAGGU) en vez de mover el ancla.
   Pedido explícito, después de ver el resultado: NO, el botón debía
   quedarse en su posición ORIGINAL -antes de esta tarea, más arriba,
   cerca del header- y era el DRAWER el que debía acompañarlo ahí, no
   al revés.

   Ronda 3 (esta): se revierte position:relative de .facets-wrapper
   por completo. Sin ningún ancestro position:relative en el medio
   -tal como estaba antes de esta tarea-, .facets-container
   (position:absolute) vuelve a calcular top/right contra el
   containing block inicial (la raíz del documento), con los mismos
   148px/152px/12em de siempre: la posición ORIGINAL, sin adivinar
   nada nuevo. El salto de posición al abrir/cerrar (el motivo original
   de probar con position:relative) ya estaba resuelto por otro lado
   -.facets-container ya no cambia de position:absolute a sticky al
   abrir el panel, ver el <details> sticky más abajo-, así que
   anclarlo a un ancestro intermedio nunca hacía falta para eso. */
.collection-filters-layout .facets-wrapper {
  /* BUG encontrado y corregido, confirmado con reproducciones
     aisladas: como grid item, .facets-wrapper DEBERÍA estirarse solo
     al ancho completo de su columna (justify-items:stretch es el
     default de CSS Grid) -pero en la práctica no lo hacía: su único
     contenido normal-flow es .facets-container, que es position:
     absolute y por lo tanto no cuenta para el ancho intrínseco de
     .facets-wrapper, y el motor terminaba encogiéndolo a 0 en vez de
     estirarlo. width:100% + box-sizing:border-box (no content-box, el
     default: así el padding de .page-width, ver assets/base.css, se
     resta del 100% en vez de sumarse) fuerza el ancho completo sin
     depender de que el motor de grid decida estirarlo solo -sigue
     haciendo falta independientemente de qué ancestro use .facets-
     container para posicionarse: esto es sobre el ancho de la COLUMNA
     de la grid, no sobre .facets-container-. */
  width: 100%;
  box-sizing: border-box;
}

@media screen and (min-width: 750px) {
  .facets-container {
    position: absolute;
    right: 16px;
    top: 148px;
  }
}
@media screen and (min-width: 850px) {
  .facets-container {
    top: 152px;
  }
}
@media screen and (min-width: 1380px) {
  .facets-container {
    top: 12em;
  }
}

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

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

@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: 8px;
  margin-top:4px;
}

.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: 16px;
  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;
}

.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;
      gap: 8px;
  /*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: #482922;
  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;
  
}

.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;*/
  }
}
    .active-facets__button-remove span {
        margin: 0;
        text-decoration: none;
        color: #482922;
    }
@media screen and (max-width: 989px) {
  .active-facets {
    margin: 4px 0 0;
  }

  .active-facets__button-remove span  {
    margin: 0;
       text-decoration: none;
        color: #482922;
  }  
  .underlined-link, span

 { text-decoration: none;}

  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:none;
}

.active-facets__button--light:hover .active-facets__button-inner {
  box-shadow: none;
}

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: 16px;*/
  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;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* 100dvh en vez de 100vh: en móvil, 100vh incluye el área que tapan
     las barras de navegador que aparecen/desaparecen al hacer scroll,
     dejando parte del panel fuera de la pantalla visible real. dvh se
     ajusta a la altura visible actual. */
  height: 100dvh;
  z-index: 100;
  pointer-events: none;
}

/* Este filtro NO bloquea el scroll del body en ningún ancho -ni en
   móvil (el panel empuja el contenido hacia abajo, "push down" como
   en BAGGU, no es un overlay que necesite bloquear nada) ni en
   desktop (el panel es una columna/panel más de la página). MenuDrawer
   (assets/global.js) sigue poniendo la clase "overflow-hidden-mobile"
   en <body> al abrir -es genérico, para cualquier <menu-drawer>, no
   se toca-, pero esta es la ÚNICA <menu-drawer data-breakpoint=
   "mobile"> del tema, así que esa clase es exclusiva de este drawer
   de filtros: los dos bloques @media más abajo en este archivo
   (desktop y móvil) sobreescriben "overflow:auto !important" sin
   condición, así esa clase queda sin efecto acá independientemente
   del ancho. */

.mobile-facets__disclosure {
  display: flex;
  /* flex-direction:column (no el row por defecto): en desktop
     .mobile-facets pasa a position:fixed cuando está abierto -sale
     del flujo flex, la dirección no le afecta-, pero en móvil (más
     abajo, push-down) .mobile-facets queda en flujo normal como
     segundo ítem flex junto al <summary> -sin esto, quedaban lado a
     lado en una fila en vez de uno debajo del otro. */
  flex-direction: column;
}

.mobile-facets__wrapper {
  margin-left: 0;
  display: flex;
      flex-direction: row;
    justify-content: flex-end;
}

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

.mobile-facets__inner {
  background-color: #F6F4EE;;
  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;
  padding: 16px;
  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%;
 
  display: flex;
  align-items: center;
color: #482922;
line-height: calc(1 + 0.2 / var(--font-body-scale));
    text-transform: uppercase;
    display: inline-block;
    padding: 5px 13px;
    border: 2px solid #482922;
    border-radius: 55px;}

.mobile-facets__open:hover {
 
    background-color: #482922;
    color: #b63718;
}


.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: 16px;
  margin-right: 16px;
}

.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: none;
  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;
  background-color:transparent;
  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;
}

.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 > * {
 
}

.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;
    /* justify-content:end empuja el contenido (el botón "Filtrar y
       ordenar") hacia el borde derecho de la caja de .facets-
       container, sin importar cuánto cambie su ancho al abrir el
       panel -junto con height:100% de acá abajo, esto es lo que evita
       que el botón cambie de posición al abrir/cerrar (ver el
       comentario grande en el bloque de min-width:750px, más abajo,
       sobre por qué .facets-container en sí NUNCA cambia de position
       ni de right). BUG encontrado y corregido: estas dos propiedades
       vivían antes en la regla BASE de .facets-container (arriba en
       este archivo, display:grid) asumiendo que ese era el display
       real -no lo es: ESTA clase, .facets-container-drawer, siempre
       gana (misma especificidad, pero está después en la hoja), así
       que .facets-container es flex en la práctica, nunca grid, para
       el tipo de filtro "drawer" -el único que usa esta tienda-. */
    justify-content: end;
  }

  .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;
  }
}


/* Right Drawer Styles
   Antes esta clase se llamaba "--left-drawer" pero SIEMPRE se
   comportó como un drawer que entra desde la derecha -acá abajo,
   margin-left:auto (empuja el panel al borde derecho)-. El nombre
   contradecía el comportamiento real, lo que invitaba a bugs al
   tocar esta clase pensando que hacía lo contrario. Se renombra a
   "--right-drawer" en todo el tema (este archivo, snippets/
   facets.liquid y sections/main-collection-product-grid.liquid) para
   que el nombre coincida con lo que realmente hace.

   Este bloque (y el de más abajo) es el valor por defecto/de
   respaldo: en la práctica, tanto en desktop como en móvil (ver los
   dos @media más abajo en este archivo) el panel termina con
   transform:none -en desktop es position:fixed, en móvil es
   contenido normal en flujo ("push down")-, y mientras el <details>
   no está [open] el propio navegador ya oculta todo su contenido con
   display:none, sin que importe qué transform tenga declarado. Este
   valor solo se ve en un fallback real (ej. un navegador sin soporte
   de :has()) -pedido explícito: que se mueva de arriba a abajo
   (translateY), no de izquierda a derecha (translateX). */
.mobile-facets__inner--right-drawer {
  width: min(100%, 420px);
  margin-left: auto;
  margin-right: 0;
  transform: translateY(-100%);
  /* Sin borde ni sombra en el borde del panel -pedido del cliente,
     editado directo en Shopify-. */
  /*border-left: 1px solid rgba(var(--color-foreground), 0.1);*/
  border-right: none;
  /*box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);*/
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-opening .mobile-facets__inner--right-drawer {
  transform: translateY(0);
}

.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner--right-drawer {
  transform: translateY(-100%);
}

/* Respaldo adicional, atado directo al atributo NATIVO [open] del
   <details> -sin depender de que la clase .menu-opening de MenuDrawer
   (assets/global.js) llegue a aplicarse a tiempo-. En la práctica los
   dos @media de más abajo (con :has(), ver el comentario grande antes
   del bloque de escritorio) ya cubren desktop y móvil por completo
   con transform:none !important, así que esta regla casi nunca es la
   que decide; queda como última red de seguridad. */
.mobile-facets__disclosure[open] .mobile-facets__inner--right-drawer {
  transform: translateY(0) !important;
}

/* Header */
.mobile-facets__header {
  border-bottom: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background-color: #F6F4EE;
  z-index: 10;
}

.mobile-facets__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-facets__heading {
  font-size: 1.8rem;
  font-family:degular;
  word-spacing: .16em !important;
    -spacing: .12em!important;
  font-weight: 500;
  text-transform:uppercase;
  margin: 0;
  color: ;
    color:#482922
}

.mobile-facets__close-drawer {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  fill:#F6F4EE;
}



.mobile-facets__close-drawer .svg-wrapper {
  width: 1.5rem;
  height: 1.5rem;
}

/* Main Content */
.mobile-facets__main--right-drawer {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  gap:6px;
}

/* Filter Details */


.mobile-facets__details--right-drawer:last-of-type {
  border-bottom: none;
}

.mobile-facets__summary--right-drawer {
  padding: 0 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5rem;
  font-weight: 500;
  color: #482922;
  transition: background-color 0.2s ease;
  list-style: none;
}

.mobile-facets__summary--right-drawer::-webkit-details-marker {
  display: none;
}



.mobile-facets__summary-text {
  flex: 1;
  font-family: degular;
  text-transform: uppercase;
  font-size: 26px;
  word-spacing: .09em ;
    letter-spacing: .08em ;
  line-height: 1;
  font-weight:500;
}

.mobile-facets__arrow {
  transition: transform 0.3s ease;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-facets__details--right-drawer[open] .mobile-facets__arrow {
  transform: rotate(180deg);
}

/* Content that expands downward */
.mobile-facets__content--right-drawer {
  padding: 0 16px;
  padding-top:8px;
  padding-bottom:20px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
    padding-top: 0;
    padding-bottom: 2rem;
  }
}

/* Filter List */
.mobile-facets__list--right-drawer {
  margin: 0;
  padding: 0;
}

.mobile-facets__item--right-drawer {
  margin-bottom: 0px;
}

.mobile-facets__label--right-drawer {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  cursor: pointer;
font-size: 14px;
  font-weight: 500px;
  font-family: degular-mono;
  color: #482922;
  transition: color 0.2s ease;
  border-radius: 0.5rem;
line-height:0.8;
}

.mobile-facets__label--right-drawer:hover {
  font-weight: 600px;
}

.mobile-facets__label--right-drawer.active {
  color: #B63718;
  
}

/* Custom Checkbox */
.mobile-facets__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mobile-facets__checkbox-custom {
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid rgba(var(--color-foreground), 0.3);
  border-radius: 0.3rem;
  margin-right: 1.2rem;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mobile-facets__checkbox:checked + .mobile-facets__checkbox-custom {
  background-color: #F6F4EE;
  border-color: transparent;
}

.mobile-facets__checkbox:checked + .mobile-facets__checkbox-custom::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.2rem;
  width: 0.6rem;
  height: 1rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mobile-facets__label-text {
  flex: 1;
  line-height: 0;
}

/* Sort Section */
.mobile-facets__sort-section--right-drawer {
  padding: 16px;
  padding-top:30px;
}

.mobile-facets__sort-label {
  display: block;
  font-family: degular;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #482922;
  word-spacing: .09em;
    letter-spacing: .08em;
    line-height: 1;
      text-transform: uppercase;

}

.mobile-facets__sort-select {
  width: 100%;
  padding: 1.2rem;
  border: 1px solid #482922;
  border-radius: 55rem;
  font-size: 1.4rem;
  background-color: #F6F4EE;
  color: #482922;
  font-family:degular;
  text-transform:uppercase;
}

path{
  fill:#F6F4EE;
  padding-right:16px;
}
/* Footer: siempre visible, aunque el contenido de arriba
   (.mobile-facets__main, con su propio overflow-y:auto) tenga mucho
   alto -.mobile-facets__inner es flex-column con altura fija
   (100% del panel, que a su vez es 100dvh), así el footer con
   margin-top:auto ya quedaba pegado abajo sin superponerse al
   contenido; se agrega position:sticky como refuerzo. Dos columnas
   -Eliminar todos / Aplicar- en vez de apiladas verticalmente, para
   que ambas quepan siempre sin depender de cuánto mida el texto. */
.mobile-facets__footer--right-drawer {
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
  padding: 16px;
  padding-bottom: 40px;
  background-color: #F6F4EE;
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  z-index: 2;
}
@media screen and (max-width: 750px) {.mobile-facets__footer--right-drawer {padding-bottom: 16px;}

}
.mobile-facets__clear-wrapper {
  text-align: center;
}

/* BUG: color:#F6F4EE (crema) sobre un footer con
   background-color:#F6F4EE (el mismo crema) -texto invisible, mismo
   color que el fondo-. "Eliminar todos" es la acción secundaria que
   debe quedar siempre visible junto a "Aplicar" (ver footer arriba);
   se cambia al marrón oscuro que ya usa el resto del texto del panel
   (.mobile-facets__heading, .mobile-facets__label--right-drawer, etc). */
.mobile-facets__clear {
  color: #482922;
  font-family:degular;
  font-size: 1.2rem;

  transition: color 0.2s ease;
}

.mobile-facets__clear:hover {
  
  text-decoration: underline;
}

.mobile-facets__apply-button {
  width: 100%;
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* Overlay 
.mobile-facets__wrapper .disclosure-has-popup[open] > summary::before {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);*/
}

/* Hide default close button */
.mobile-facets__close {
  display: none;
}

/* Responsive */
@media screen and (min-width: 750px) {
  .mobile-facets__inner--right-drawer {
    width: 600px;
  }

  .mobile-facets__heading {
    font-size: 2rem;
  }

  .mobile-facets__summary--right-drawer {
    font-size: 1.6rem;
  }
}

/* Ensure proper z-index */
.mobile-facets {
  z-index: 100;
}

.mobile-facets__inner--right-drawer {
  z-index: 101;
}

/* Price range specific styles */
.mobile-facets__info {
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.7);
  margin-bottom: 1.5rem;
}

.facets__price {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.facets__price .field {
  flex: 1;
}

.facets__price input {
  width: 100%;
  padding: 1rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 0.5rem;
  font-size: 1.4rem;
}


.button {
    background-color: transparent;
    text-transform: uppercase;
    font-family: degular;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    letter-spacing: 0.1rem;
    line-height: 0;
    min-height: 3.5rem;
  color: #B63718;
      position: relative;
    cursor: pointer;
    overflow: hidden;
  transition: color 0.3s, border-color 0.3s; 
  border-color: blue;
}
/*.button:hover {
    background-color: #B63718;
    
  color: #482922;
}*/
/* Pseudo-elemento para el fondo animado */
.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* El fondo comienza fuera del botón (a la izquierda) */
    width: 100%;
    height: 100%;
    background-color: #b63718; /* Color de fondo que aparecerá */
    transition: left 0.4s ease-in-out; /* Efecto de movimiento suave */
}

/* Efecto de hover */
.button:hover {
    color:  #482922; /* Cambia el color del texto cuando haces hover */
    border-color: #b63718; /* Cambia el borde cuando haces hover */
    
}

/* Mueve el fondo de izquierda a derecha al hacer hover */
.button:hover::before {
    left: 0; /* El fondo se mueve de izquierda a derecha */
}

/* Regresa el fondo a la posición inicial (fuera del botón, a la izquierda) cuando el mouse deja de estar encima */
.button:not(:hover)::before {
    left: -100%; /* Vuelve a la izquierda fuera del botón cuando el mouse se aleja */
}

/* Spinner (oculto por defecto) */
.loading__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

/* Mostrar el spinner cuando el estado de "cargando" está activo */
.button.loading .loading__spinner {
    visibility: visible;
}
.mobile-facets__plus-icon{
  font-family:degular;
  font-size:35px;
  font-weight:200;
  line-height:0;
}

/* ==========================================================================
   Filtros de escritorio (>=750px): panel como columna real del layout
   (patrón BAGGU), en vez de superponerse a la grid.
   ==========================================================================

   Reemplaza por completo el mecanismo anterior (v8/v9): un panel con
   position:absolute posicionado a mano sobre .facets-container, más un
   script (antes assets/collection-filters-desktop.js) que media en
   píxeles el ancho real de una tarjeta cerrada y fuerza ese ancho con
   .style.setProperty(...,'important') cada vez que cambia el tamaño de
   ventana -fràgil: cualquier remedición mal sincronizada (con el panel
   ya abierto, con la ventana redimensionándose) dejaba a la grid con
   un ancho viejo o al panel superpuesto sobre la última columna,
   exactamente el bug reportado ("el drawer tapa la grid").

   Mecanismo nuevo: display:grid en el contenedor .collection-filters-layout,
   con grid-template-columns que reserva una columna real para el panel
   solo cuando está abierto -sin medir nada en JS, el motor de layout del
   navegador hace el cálculo-.

   Todo el estado se lee directo del atributo NATIVO [open] del
   <details class="mobile-facets__disclosure"> vía el selector
   :has(.mobile-facets__disclosure[open]) -la misma fuente de verdad que
   ya usa MenuDrawer (assets/global.js) para abrir/cerrar, con su manejo
   ya probado de Escape, foco y bloqueo de scroll-, sin ningún atributo
   ni clase intermedia que sincronizar por JS. Antes existía un atributo
   [data-filters-open] que un script (assets/collection-filters-desktop.js)
   mantenía espejado al [open] real: un punto de falla innecesario -si
   ese script no llegaba a correr (error de red, orden de carga, o
   simplemente el nombre del archivo hacía pensar que era "solo para
   desktop" y alguien lo desactivaba) todo este mecanismo se caía en
   silencio sin ningún aviso. :has() hace exactamente lo mismo con CSS
   puro, sin JS de por medio para esto -collection-filters-desktop.js
   ya no se incluye en sections/main-collection-product-grid.liquid-. */
@media screen and (min-width: 750px) {
  /* :not(.facets-vertical) -este mecanismo es para filter_type "drawer"
     (el único usado hoy en las plantillas de colección de la tienda,
     ver templates/collection*.json: "filter_type":"drawer" en las
     tres). filter_type "vertical" agrega la clase .facets-vertical a
     este mismo contenedor y ya trae su propio layout de sidebar
     (.facets__form-vertical, más abajo en este archivo, sin tocar);
     no hace falta que compita con un display:grid nuevo acá. */
  .collection-filters-layout:not(.facets-vertical) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 32px;
  }

  /* Ancho FIJO (no clamp con vw: eso daba un panel que cambiaba de
     tamaño con la ventana en vez de tener un ancho consistente con el
     resto de la grid) y columna reservada a la DERECHA -no a la
     izquierda-: el botón "Filtrar y ordenar" (.facets-container) está
     en position:absolute; right:16px -arriba a la derecha, sin
     tocar-, así que la grid deja el espacio del lado en el que está
     el botón que abre el panel. .facets-wrapper (el <aside>, primero
     en el DOM) se ubica explícitamente en la columna 2 con
     grid-column, y product-grid-container en la columna 1, sin
     reordenar el HTML -el orden de tabulación por teclado sigue el
     DOM, no el layout visual-. Esta columna reservada es solo para
     abrir espacio en la grid: el panel en sí NO vive dentro de ella
     (ver más abajo, position:fixed). */
  .collection-filters-layout:not(.facets-vertical):has(.mobile-facets__disclosure[open]) {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .collection-filters-layout:not(.facets-vertical):has(.mobile-facets__disclosure[open]) > .facets-wrapper {
    grid-column: 2;
    grid-row: 1;
  }

  .collection-filters-layout:not(.facets-vertical):has(.mobile-facets__disclosure[open]) > .product-grid-container {
    grid-column: 1;
    grid-row: 1;
  }

  .collection-filters-layout .facets-wrapper {
    min-width: 0;
  }

  /* BUG corregido: la versión anterior de este mecanismo hacía sticky
     a .facets-container mismo, cambiando su position de absolute
     (cerrado) a sticky (abierto). Eso resolvía el sticky, pero el
     BOTÓN se movía de sitio -pedido explícito: que NO cambie de
     posición al abrir/cerrar-, porque absolute y sticky calculan la
     posición horizontal de forma distinta cuando el ancho del
     contenedor cambia entre los dos estados.

     Fix: .facets-container NUNCA cambia de position -sigue siempre
     absolute; top/right, tal cual desde antes de esta tarea, ver el
     bloque al principio de este archivo, sin tocar en ningún estado-.
     El sticky se pone en su lugar directamente en .mobile-facets__
     disclosure (el <details>), un nivel más abajo, y TAMBIÉN sin
     condición de abierto/cerrado -así tampoco hay ningún cambio de
     estado que produzca un salto-.

     ¿Por qué no en .mobile-facets (el <form>), como en el intento de
     la ronda anterior? Se probó, y falló por un motivo distinto al
     original: <details> tiene un comportamiento propio del navegador
     que IGNORA flex-grow / grid 1fr en su contenido para repartirle
     la altura sobrante -confirmado con una reproducción aislada
     mínima: un <div> corriente sí crece con flex:1 dentro de un flex
     column, un <details> con el mismo CSS no-. Por eso el sticky tiene
     que ir en el <details> MISMO -su propia caja sí recibe altura real
     normalmente, por align-items:stretch desde menu-drawer, sin pasar
     por ese comportamiento especial- y no en nada que esté DENTRO de
     su contenido.

     Con el botón siempre en el mismo punto (.facets-container: mismo
     top/right sin importar el estado) y el <details> pegándose solo
     cuando hay margen real para hacerlo (el panel abierto, con
     .facets-wrapper estirado a la altura de la grid), no hace falta
     ningún :has() acá: es sticky siempre, pero con el panel cerrado
     .facets-wrapper no se estira -no hay columna de 340px reservada-
     así que no hay margen para pegarse y se comporta, en la práctica,
     exactamente igual que antes (estático, sin ningún salto). */
  .mobile-facets__disclosure {
    position: sticky;
    /* BUG encontrado y corregido: este top usaba el mismo 148px que
       .facets-container -pensado, erróneamente, para medir contra un
       ancestro que ya no existe (ver el comentario grande al
       principio de este archivo)-. Ahora que .facets-container mide
       desde el borde superior de la fila de la grid (top:0), este
       valor pasa a tener un trabajo distinto y más simple: cuánto
       espacio dejar libre arriba mientras el panel está pegado
       (sticky) al hacer scroll, para que no quede tapado detrás del
       header fijo (position:fixed, z-index:999, sin tocar). Por eso
       usa var(--header-total-height) -la altura real del header,
       misma variable que ya usa custom_css de templates/collection*
       .json con este mismo propósito- en vez de un número fijo. */
    top: calc(var(--header-total-height, 55px) + 16px);
    /* align-items:stretch es el default de flex, y .mobile-facets__
       disclosure ya es display:flex;flex-direction:column (regla base,
       sin tocar, para el push-down de móvil). Sin anularlo acá, el
       <summary> (el botón) se estira para igualar el ancho del drawer
       -340px, ver más abajo- en vez de quedarse con su ancho de
       contenido: otra forma de que el botón "cambiara" -esta vez de
       ancho, no de posición- al abrir el panel. flex-end (no
       flex-start) dentro de un flex column afecta el eje cruzado
       (horizontal): cada hijo toma su propio ancho de contenido -en
       vez de igualarse al más ancho- pegado al lado DERECHO, para que
       el botón quede alineado con el borde derecho del drawer -y por
       lo tanto en el mismo punto físico donde estaba con el panel
       cerrado- en vez de pegado a la izquierda. */
    align-items: flex-end;
    /* BUG encontrado y corregido, confirmado con una reproducción
       aislada mínima: un elemento position:sticky que ADEMÁS es un
       flex item con align-self:stretch (el default, heredado de
       align-items:stretch en menu-drawer, el padre -necesario para
       que ESTE mismo elemento reciba altura real, ver la regla de
       .facets-container-drawer más arriba-) simplemente NO SE PEGA:
       el navegador calcula su tamaño "estirado" y su posición "sticky"
       en pasadas que se pisan entre sí, y en la práctica el resultado
       es que se comporta como si fuera position:relative -se mueve
       con el scroll en vez de quedarse fijo-. align-self:flex-start
       saca a ESTE elemento (no a menu-drawer, que sigue estirándose
       normal) de ese estiramiento: toma su propio alto de contenido,
       y con eso sí funciona el sticky -verificado con la misma
       reproducción, con y sin esta línea-. */
    align-self: flex-start;
  }

  /* BUG encontrado y corregido, confirmado con una reproducción
     aislada: align-items:flex-start (arriba) no bastaba por sí solo.
     <summary> es un flex item con width:auto dentro de un flex column;
     cuando su hermano (facet-filters-form, con el drawer de 340px
     adentro) se vuelve parte del cálculo de ancho intrínseco de
     <details>, el ancho "auto" de <summary> terminaba contaminado por
     ese 340px -por la combinación con .mobile-facets__open, más abajo
     en este archivo, que tiene un width:100% ya presente antes de esta
     tarea-, cambiando de ancho al abrir el panel aunque el TEXTO del
     botón sea siempre el mismo. width:max-content fuerza el ancho de
     <summary> a depender solo de su propio contenido, sin importar
     qué tan ancho sea su hermano; flex-shrink:0 evita que se comprima
     si en algún momento falta espacio. */
  .mobile-facets__open-wrapper {
    width: max-content;
    flex-shrink: 0;
  }

  /* BUG encontrado y corregido: .facets-container tiene TAMBIÉN la
     clase .facets-container-drawer (ver snippets/facets.liquid,
     "{% if filter_type == 'drawer' %} facets-container-drawer{%
     endif %}"), y esa clase -su propia regla, más abajo en este
     archivo, sin relación con el mecanismo de esta tarea- pone
     display:flex;flex-flow:row wrap;align-items:center, que GANA
     sobre el display:grid de la regla base de .facets-container -por
     orden en la hoja de estilos, misma especificidad-. O sea:
     .facets-container en la práctica SIEMPRE fue flex acá, nunca
     grid; grid-template-rows no tenía ningún efecto. align-items:
     center es lo que de verdad impedía que menu-drawer (el padre
     DIRECTO de .mobile-facets__disclosure, y por lo tanto su
     "containing block" para el sticky de arriba) se estirara a la
     altura real de .facets-container -ya 100%, ver height:100% acá
     mismo abajo-: se quedaba centrado con su alto natural (~280px, el
     del <details>) en vez de ocupar los 1800+px disponibles, así que
     el <details> sticky no tenía margen real donde viajar. align-
     items:stretch (la propiedad correcta para flex, no grid-template-
     rows) lo arregla. Solo con el panel abierto -filter_type "drawer",
     el único con este mecanismo, ver :not(.facets-vertical) más
     arriba-, para no afectar otros layouts.

     height:100% vive ACÁ, no en la regla base de .facets-container-
     drawer -donde vivía antes-, para que solo aplique con el panel
     abierto -si no, .facets-container SIEMPRE tendría esa altura, y
     con align-items:center (la regla base, sin :has(), sigue activa
     cuando está cerrado) el botón terminaría centrado a mitad de esa
     altura en vez de con la de su propio contenido-.

     .facets-container es position:absolute SIN ningún ancestro
     position:relative en el medio (revertido, ver el comentario
     grande sobre .facets-wrapper más arriba), así que este height:100%
     resuelve contra el containing block inicial -aproximadamente la
     altura del viewport, no la altura real de la grid completa-. Da
     menos margen del que daría "toda la grid", pero sigue siendo
     margen real (no 0): suficiente para que el <details> sticky de
     abajo se pegue y viaje al menos un viewport de alto antes de
     despegarse -aceptado como mejor alternativa disponible a atar
     .facets-container a un ancestro intermedio, que fue lo que rompió
     la posición del botón (ver el comentario grande de arriba)-. */
  .collection-filters-layout:not(.facets-vertical):has(.mobile-facets__disclosure[open]) .facets-container {
    align-items: stretch;
    height: 100%;
  }

  /* Ancho del drawer (340px, igual a la columna reservada de la grid)
     puesto directo acá, en el <form> -el pedido explícito era "lo que
     se tiene que alinear con la grid es el drawer del filtro", no
     .facets-container (que sigue con su ancho de siempre, ajustado
     solo al botón vía justify-content:end arriba). .mobile-facets (el
     <form>) trae por defecto position:fixed;inset:0 -el overlay de
     pantalla completa de respaldo, ver la regla base de .mobile-facets
     al principio de este archivo-; acá vuelve a ser contenido normal,
     con su alto natural, en vez de seguir intentando cubrir toda la
     pantalla. */
  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets {
    position: static;
    inset: auto;
    width: 340px;
    height: auto;
    z-index: auto;
    pointer-events: auto;
  }

  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__inner--right-drawer {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    transform: none !important;
    position: static;
    /* Sin borde ni sombra -pedido del cliente, editado directo en
       Shopify-.
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border: 0.1rem solid rgba(var(--color-foreground), 0.08);
    border-radius: var(--popup-corner-radius, 0);*/
  }

  /* Ya no es un overlay de pantalla completa: el backdrop invisible de
     Dawn (.disclosure-has-popup[open] > summary::before, en
     assets/base.css, sin tocar) dejaba de tener sentido tapando toda
     la grid -los clicks en las tarjetas (quick add incluido) nunca
     llegaban a la card, llegaban al backdrop-. Se neutraliza solo acá
     (este disclosure, con el panel abierto, en desktop); el resto de
     los disclosures del tema (menú, carrito) no se tocan. */
  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__disclosure[open] > summary::before {
    display: none;
  }

  /* El bloqueo de scroll del body (arriba, body.overflow-hidden-mobile)
     es correcto en móvil -el panel tapa toda la pantalla- pero ya no
     tiene sentido en desktop, donde el panel es una columna más del
     layout y el resto de la página (incluida la grid, al lado) debe
     seguir siendo navegable con scroll normal. */
  body:has(.mobile-facets__disclosure[open]) {
    overflow: auto !important;
  }
}

/* ==========================================================================
   Filtros en móvil (<750px): "push down", como en BAGGU.
   ==========================================================================

   Pedido explícito: en móvil el panel NO tapa la pantalla con un
   overlay -que es como había quedado antes, el drawer nativo de Dawn-,
   sino que empuja el resto de la página hacia abajo, como cualquier
   otro contenido que se expande en el flujo normal del documento.

   Nota para el futuro: una versión anterior de este mismo patrón
   (acordeón/push-down) se probó e implementó varias veces en esta
   tarea y se abandonó por bugs repetidos, confirmados en dispositivo
   real, con el mismo objetivo -pérdida de cascada CSS, bloqueo de
   scroll que no se liberaba, backdrop invisible tapando la página,
   grid confinada-. En ese momento coexistían TRES fuentes de verdad
   compitiendo por el mismo drawer (component-facets.css, custom_css
   por-plantilla en templates/collection*.json, y un override global
   en config/settings_data.json) y la implementación intentaba
   confinar el panel con altura de viewport + scroll interno propio,
   la combinación exacta que producía esos bugs. Esta vez:
   - Ya no hay fuentes de verdad compitiendo (consolidado esta sesión).
   - El panel NO tiene su propia altura de viewport ni scroll interno
     acá: es contenido normal, sin nada que "confinar" ni "bloquear".
     Si esto vuelve a fallar en un dispositivo real, el primer
     sospechoso NO es este bloque sino algo nuevo pisándolo por fuera
     -revisar primero templates/collection*.json y
     config/settings_data.json por si volvió a aparecer un override
     duplicado, antes de tocar este CSS-.
   - Una primera versión de ESTE MISMO intento (ya en esta ronda)
     dependía de un atributo [data-filters-open] que un script externo
     (assets/collection-filters-desktop.js) sincronizaba con [open].
     El panel "no abría" en móvil -reportado después de subir esa
     versión-, consistente con que ese script no llegara a correr (su
     nombre de archivo sugiere "solo desktop", fácil de desactivar por
     error creyendo que no afecta a móvil). Se eliminó esa dependencia
     por completo: todo el bloque de abajo usa :has(.mobile-facets__
     disclosure[open]) en vez de [data-filters-open], CSS puro, sin
     ningún script de por medio para esto. */
@media screen and (max-width: 749px) {
  /* .mobile-facets__disclosure es un ítem flex de .mobile-facets__wrapper
     (display:flex; flex-direction:row; justify-content:flex-end;
     Dawn, sin tocar -alinea el botón "Filtrar y ordenar" a la
     derecha-). Un ítem flex en el eje principal (horizontal, acá) se
     ajusta a su contenido salvo que se le fije un ancho: sin esto, el
     panel abierto (adentro) terminaba tan angosto como el contenido
     más ancho entre el botón y el panel -no ocupaba el ancho
     completo, un push-down angosto en vez de a todo el ancho-. */
  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__disclosure {
    width: 100%;
  }

  /* Apertura suave del push-down (pedido explícito: "más smooth").
     Por defecto el navegador hace display:none/block instantáneo en
     el contenido de un <details> según [open] -sin transición
     posible, un salto seco-. Acá se anula ese comportamiento nativo
     (display:grid siempre, tanto abierto como cerrado) y se controla
     la revelación con la técnica grid-template-rows: 0fr → 1fr, que sí
     se puede animar y -a diferencia de max-height- anima hasta la
     altura REAL del contenido sin necesidad de adivinar ningún tope.

     BUG corregido: la versión anterior usaba max-height con un tope
     fijo (1400px) en vez de esta técnica. Con muchas categorías de
     filtro abiertas a la vez (o con muchos valores/swatches), el
     contenido real podía superar ese tope: el "overflow:hidden" del
     max-height recortaba el resto en seco, dejando el panel cortado a
     ras del footer -exactamente el "se sobrepone al footer" reportado-
     en vez de reservar el espacio real que necesita. grid-template-
     rows no tiene ese límite: crece lo que haga falta.

     visibility (con transition-delay solo al cerrar) evita que el
     contenido siga siendo alcanzable por teclado/lector de pantalla
     mientras está colapsado. facet-filters-form es un custom element
     sin display propio (inline por defecto): hace falta display:grid
     para que la fila 0fr/1fr tenga efecto en él. El hijo directo
     (.mobile-facets, la <form>) necesita min-height:0 y overflow:hidden
     -ver la regla de .mobile-facets un poco más abajo- para que la
     fila pueda colapsar a 0 real en vez de quedarse con la altura de
     su contenido. */
  .collection-filters-layout .mobile-facets__disclosure > facet-filters-form {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.25s ease,
      visibility 0s linear 0.4s;
  }

  .collection-filters-layout .mobile-facets__disclosure[open] > facet-filters-form {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition:
      grid-template-rows 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.3s ease 0.05s,
      visibility 0s linear 0s;
  }

  /* min-height:0 + overflow:hidden: imprescindibles para que la fila
     0fr de arriba pueda colapsar de verdad -sin min-height:0, un grid
     item nunca se encoge por debajo de la altura de su contenido,
     tope o no tope-. Se aplican siempre a este ancho (no solo con el
     panel abierto) para que la animación de CIERRE también funcione. */
  .mobile-facets__disclosure .mobile-facets {
    overflow: hidden;
    min-height: 0;
  }

  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    z-index: auto;
    pointer-events: auto;
  }

  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__inner--right-drawer {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    transform: none !important;
    position: static;
    box-shadow: none;
    border: none;
    /*border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);*/
  }

  /* Header y footer del panel traen position:sticky por defecto -para
     el overlay de pantalla completa, donde tiene sentido que floten
     mientras el usuario scrollea DENTRO del panel-. En push-down no
     hay "dentro del panel" que scrollear por separado: es la página
     entera la que scrollea, así que sticky acá terminaría flotando el
     header/footer sobre la grid de productos de más abajo apenas se
     pasa de largo. Se resetean a static -contenido normal, sin
     comportamiento especial-. */
  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__header,
  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__footer--right-drawer {
    position: static;
  }

  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__main {
    overflow-y: visible;
  }

  /* Ya no es overlay: el backdrop invisible de Dawn no debe tapar la
     página -mismo motivo que en desktop, ver el bloque de arriba-. */
  .collection-filters-layout:has(.mobile-facets__disclosure[open]) .mobile-facets__disclosure[open] > summary::before {
    display: none;
  }

  /* Sin overlay, el body ya no necesita quedar sin scroll -la página
     entera, incluido el panel recién abierto, se navega con scroll
     normal-. */
  body:has(.mobile-facets__disclosure[open]) {
    overflow: auto !important;
  }
}