/** Shopify CDN: Minification failed

Line 148:15 Expected ")" to end URL token
Line 149:23 Expected ")" to end URL token

**/
/* ====== SKIN Cremalleras Colima (estilo barra de ejemplo) ====== */

/* CONTENEDOR ROJO DE LA BARRA (usa el id real del wrapper de Dawn) */
#main-collection-filters.facets-wrapper.page-width {
  background: #b31c1c;            /* rojo */
  border-radius: 4px;
  padding: 16px 22px;
  position: relative;
  margin: 0 auto 26px;
}

/* Maquetación general del formulario de filtros */
#main-collection-filters .facets__form {
  display: grid;
  grid-template-columns: 1fr auto; /* filtros a la izquierda, botones a la derecha */
  gap: 14px 16px;
  align-items: start;
}

/* Columna de filtros: pills en fila con wrap */
#main-collection-filters .facets__wrapper,
#main-collection-filters .facets__disclosures {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
}

/* Cada filtro como “caja” con título arriba */
#main-collection-filters .facets__disclosure,
#main-collection-filters .facets__summary {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Label arriba (blanco, bold) */
#main-collection-filters .facets__heading,
#main-collection-filters .facets__label,
#main-collection-filters .facets__summary .facets__summary-label,
#main-collection-filters .facet-filters__label {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 6px 2px;
}

/* El “píldora/select” blanco del filtro */
#main-collection-filters .facets__summary,
#main-collection-filters .select,
#main-collection-filters .facets__summary::after {
  border-radius: 2px;
}

#main-collection-filters .facets__summary {
  display: inline-flex;
  align-items: center;
  min-width: 220px;      /* ancho tipo ejemplo; ajusta si necesitas */
  padding: 0;
}

/* Caja blanca clickeable (usa la estructura de Dawn) */
#main-collection-filters .facets__summary .facets__display-text,
#main-collection-filters .facets__summary .facets__selected,
#main-collection-filters .select .select__select,
#main-collection-filters .select {
  background: #fff;
  color: #111;
  border: 0;
  outline: 0;
  height: 42px;
  line-height: 42px;
  padding: 0 40px 0 16px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  box-shadow: 0 0 0 1px #e5e5e5 inset;
}

/* Caret negro dentro del pill blanco */
#main-collection-filters .icon-caret,
#main-collection-filters .svg-wrapper svg {
  fill: #111;
  stroke: #111;
}

/* Panel desplegado (lista de opciones) */
#main-collection-filters .facets__display {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border: 1px solid #e5e5e5;
}

/* Opciones y checkmarks bien visibles */
#main-collection-filters .facet-checkbox {
  color: #111;
}
#main-collection-filters .facet-checkbox input[type="checkbox"] { accent-color: #000; }
#main-collection-filters .facet-checkbox .icon-checkmark { stroke: #000; opacity: 1; }

/* ===== Botonera derecha (gris "Restablecer" + rojo "Buscar") ===== */
#main-collection-filters .cc-filterbar__actions {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: 140px 140px;
  gap: 0;
  align-self: stretch;
  justify-items: stretch;
}

#main-collection-filters .cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  font-weight: 700;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  color: #fff;
}

#main-collection-filters .cc-btn--reset {
  background: #3c3c3c;        /* gris oscuro del ejemplo */
  border-right: 1px solid rgba(255,255,255,.1);
}

#main-collection-filters .cc-btn--search {
  background: #d4121b;        /* rojo botón Buscar */
}

#main-collection-filters .cc-btn--search .cc-icon-search {
  width: 18px; height: 18px;
  margin-right: 8px;
  display: inline-block;
  position: relative;
}
#main-collection-filters .cc-btn--search .cc-icon-search::before {
  content: "";
  display: block;
  width: 18px; height: 18px;
  mask: url({{ 'icon-search.svg' | asset_url }}) no-repeat center / contain;
  -webkit-mask: url({{ 'icon-search.svg' | asset_url }}) no-repeat center / contain;
  background: #fff;
}

/* Contador de productos dentro de la barra (si lo usas) */
#main-collection-filters .product-count,
#main-collection-filters .product-count__text {
  color: #fff;
  opacity: .9;
}

/* Responsive */
@media (max-width: 990px) {
  #main-collection-filters .facets__form {
    grid-template-columns: 1fr;
  }
  #main-collection-filters .cc-filterbar__actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    margin-top: 4px;
  }
  #main-collection-filters .facets__summary { min-width: min(240px, 100%); }
}
/* === FIX: hacer visibles las cajas blancas de cada filtro (horizontal) === */

/* Que el contenedor de filtros sea fila con espacios */
#main-collection-filters .facets__wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:14px 16px;
  align-items:flex-end;
}

/* Cada filtro ocupa un ancho razonable */
#main-collection-filters .facets__disclosure{
  min-width:220px;        /* ajusta si quieres más/menos ancho */
}

/* El <summary> se vuelve la “caja” blanca clickeable */
#main-collection-filters .facets__summary{
  background:#fff;
  color:#111;
  border:1px solid #e5e5e5;
  border-radius:2px;
  height:42px;
  line-height:42px;
  padding:0 36px 0 14px;  /* espacio para la flechita a la derecha */
  display:inline-flex;
  align-items:center;
  box-shadow:none;
}

/* Estructura interna del <summary> (Dawn mete un <div>) */
#main-collection-filters .facets__summary > div{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}

/* Texto dentro del “pill” en negro normal */
#main-collection-filters .facets__summary .facets__summary-label{
  margin:0;
  color:#111;
  font-weight:400;
}

/* Caret dentro de la caja, a la derecha y en negro */
#main-collection-filters .facets__summary .icon-caret{
  margin-left:auto;
  fill:#111;
  stroke:#111;
  transform:translateY(1px);
}

/* Título “Filtrar:” sin márgenes extra */
#main-collection-filters .facets__heading{
  margin:0 16px 0 0;
  color:#fff;
  font-weight:700;
}
/* ====== Layout ordenado en GRID (horizontal) ====== */

/* La barra completa: filtros a la izquierda (grid) + contador a la derecha */
#main-collection-filters .facets__form{
  display:grid;
  grid-template-columns: 1fr auto;   /* izquierda: filtros | derecha: contador */
  align-items:start;
  column-gap:16px;
  row-gap:10px;
}

/* El wrapper de filtros en grid con columnas iguales */
#main-collection-filters .facets__wrapper{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr)); /* 4 columnas iguales */
  gap:14px 16px;
  align-items:stretch;
}

/* Título “Filtrar:” ocupa toda la fila superior */
#main-collection-filters .facets__heading{
  grid-column: 1 / -1;
  margin:0 0 2px 2px;
  color:#fff;
  font-weight:700;
}

/* Cada filtro ocupa 1 celda completa (evita saltos raros) */
#main-collection-filters .facets__disclosure{
  width:100%;
}

/* Píldora blanca con misma altura en todos */
#main-collection-filters .facets__summary{
  height:44px;
  line-height:44px;
  padding:0 40px 0 14px;
  display:flex;
  align-items:center;
  border:1px solid #e5e5e5;
  border-radius:4px;
  background:#fff;
}

/* Acomodo interno del summary */
#main-collection-filters .facets__summary > div{
  display:flex;
  align-items:center;
  width:100%;
}

/* Texto dentro del pill */
#main-collection-filters .facets__summary .facets__summary-label{
  color:#111; font-weight:500; margin:0;
}

/* Caret a la derecha, negro */
#main-collection-filters .facets__summary .icon-caret{
  margin-left:auto; fill:#111; stroke:#111;
}

/* Contador de productos a la derecha, centrado verticalmente */
#main-collection-filters .product-count,
#main-collection-filters .product-count__text{
  color:#fff;
  align-self:center;
  margin:0;
}

/* --------- Responsivo --------- */
/* Tablet: 3 columnas */
@media (max-width: 1200px){
  #main-collection-filters .facets__wrapper{
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
}
/* Móvil grande: 2 columnas */
@media (max-width: 900px){
  #main-collection-filters .facets__form{
    grid-template-columns: 1fr; /* contador baja debajo */
  }
  #main-collection-filters .product-count{
    justify-self:end;
  }
  #main-collection-filters .facets__wrapper{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
/* Móvil chico: 1 columna */
@media (max-width: 520px){
  #main-collection-filters .facets__wrapper{
    grid-template-columns: 1fr;
  }
}
/* ===== FIX móvil: colores legibles en el drawer ===== */
.mobile-facets__wrapper .mobile-facets__inner,
.mobile-facets__wrapper .mobile-facets__submenu {
  background: #fff; /* ya lo tienes, lo reforzamos */
  color: #111;
}

/* Encabezados y títulos */
.mobile-facets__wrapper .mobile-facets__heading,
.mobile-facets__wrapper .mobile-facets__summary > div > span,
.mobile-facets__wrapper .mobile-facets__info,
.mobile-facets__wrapper .mobile-facets__count {
  color: #111;
}

/* Flechas/carets/íconos en negro */
.mobile-facets__wrapper .mobile-facets__arrow svg,
.mobile-facets__wrapper .mobile-facets__close svg,
.mobile-facets__wrapper .mobile-facets__close-button svg {
  fill: #111;
  stroke: #111;
}

/* Opciones de lista y checkboxes */
.mobile-facets__wrapper .mobile-facets__list .facets__label,
.mobile-facets__wrapper .mobile-facets__list .facet-checkbox,
.mobile-facets__wrapper .mobile-facets__list .facet-checkbox__text,
.mobile-facets__wrapper .mobile-facets__list .facet-checkbox__text-label {
  color: #111;
}
.mobile-facets__wrapper .mobile-facets__checkbox,
.mobile-facets__wrapper input[type="checkbox"] {
  accent-color: #000;
}
.mobile-facets__wrapper .facets__image-wrapper img {
  filter: none;
}

/* Links del footer del drawer */
.mobile-facets__wrapper .mobile-facets__clear,
.mobile-facets__wrapper .mobile-facets__clear-wrapper a {
  color: #111;
}

/* Asegura contraste del resaltado (cuando Dawn añade highlight) */
.mobile-facets__wrapper .mobile-facets__highlight {
  background: #000;
}
/* =================== FIX DRAWER MÓVIL =================== */

/* 1) Quita el bloque negro al tocar/seleccionar */
.mobile-facets__wrapper .mobile-facets__highlight {
  display: none !important;       /* oculta la “franja” de highlight */
  background: transparent !important;
}

/* 2) Asegura que el cuadrito y la palomita se vean bien */
.mobile-facets__wrapper .mobile-facets__list .list-menu__item svg {
  width: 18px;
  height: 18px;
}

/* "square.svg" (caja del checkbox) justo después del highlight */
.mobile-facets__wrapper .mobile-facets__checkbox + svg {
  /* algunas versiones de Dawn tienen highlight; otras no.
     Este selector cubre ambas al no depender del span */
  stroke: #111 !important;
  fill: none !important;
  opacity: 1 !important;
  margin-right: 8px;
}

/* "icon-checkmark.svg" (palomita) por defecto oculta */
.mobile-facets__wrapper .mobile-facets__checkbox + svg + svg {
  stroke: #000 !important;
  opacity: 0;
  transition: opacity .15s ease;
}

/* Cuando está CHECKED, muestra la palomita */
.mobile-facets__wrapper .mobile-facets__checkbox:checked + svg + svg,
.mobile-facets__wrapper .mobile-facets__checkbox:checked + .mobile-facets__highlight + svg + svg {
  opacity: 1;
}

/* 3) Colores de texto y hover, sin fondos raros */
.mobile-facets__wrapper .mobile-facets__list .facets__label,
.mobile-facets__wrapper .mobile-facets__list .facet-checkbox__text,
.mobile-facets__wrapper .mobile-facets__list .facet-checkbox__text-label {
  color: #111 !important;
  background: transparent;
}

.mobile-facets__wrapper .mobile-facets__list .facets__label:hover,
.mobile-facets__wrapper .mobile-facets__list .facets__label:active,
.mobile-facets__wrapper .mobile-facets__list .facets__label:focus {
  background: #f6f6f6; /* leve highlight, no negro */
}

/* 4) Botones del footer legibles */
.mobile-facets__wrapper .mobile-facets__clear,
.mobile-facets__wrapper .mobile-facets__clear-wrapper a {
  color: #111 !important;
}