/* ============================================================================
   BUSQUEDA — FILTROS. Template "Búsqueda — filtros" del design system
   (templates/search-filters/: SearchFilters, FacetGroup, PriceFacet).

   Reemplaza a los filtros viejos de /search, que salian de site.css y
   site-mobile.css: acordeones de Bootstrap con .card + .checkbox-list, la
   barra ".btns-footer-filtros" fija abajo y el slider de noUiSlider.

   POR QUE NO SE TOCA site.css. Esas reglas las comparten las otras cuatro
   pantallas con filtros (Categoria, Marca, los listados de _ProductListingPage
   y Mis Preferidos), que siguen con el markup viejo. Este archivo lo carga
   SOLO la vista de busqueda del tema y estiliza clases dm-* nuevas, asi que
   no puede romperlas. Cuando esas pantallas migren, heredan esto tal cual.

   La hoja mobile y la sidebar son EL MISMO NODO. El <aside> de los filtros se
   dibuja como columna de 268px de 1024 para arriba y como hoja inferior por
   debajo. Un solo DOM significa un solo estado: lo que se marca en la hoja ya
   esta marcado si la ventana se agranda, y no hay dos juegos de checkbox que
   sincronizar (que es lo que hacia el markup viejo con #filtros-mobile).
   ============================================================================ */

/* ---------- Pagina ---------- */

.dm-resultados {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-3);
    padding: var(--dm-space-4) 0;
}

.dm-resultados__crumbs {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-medium);
    color: var(--dm-text-muted);
}

.dm-resultados__crumbs a {
    color: var(--dm-text-muted);
    text-decoration: none;
}

.dm-resultados__crumbs a:hover {
    color: var(--dm-brand-strong);
}

.dm-resultados__crumbs-actual {
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-semibold);
}

.dm-resultados__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dm-space-3);
    flex-wrap: wrap;
}

.dm-resultados__heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.dm-resultados__title {
    margin: 0;
    font-size: var(--dm-text-2xl);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
    letter-spacing: -.01em;
}

.dm-resultados__count {
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-medium);
    color: var(--dm-text-muted);
    white-space: nowrap;
}

.dm-resultados__tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Boton "Mostrar filtros (N)" del escritorio: aparece solo cuando la columna
   esta oculta. El estado va como clase .filtros-ocultos en la RAIZ .dm-resultados y
   no en .dm-resultados__cols, porque el boton vive en la cabecera, que es hermana
   ANTERIOR de las columnas y CSS no sabe mirar para atras. */
.dm-resultados__toggle {
    display: none;
    align-items: center;
    gap: var(--dm-space-2);
    min-height: 44px;
    padding: 0 var(--dm-space-3);
    border: 1px solid var(--dm-brand);
    background: var(--dm-brand-soft);
    border-radius: var(--dm-radius-pill);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-brand-strong);
    cursor: pointer;
    white-space: nowrap;
}

.dm-resultados__toggle:hover {
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
}

.dm-resultados.filtros-ocultos .dm-resultados__toggle {
    display: flex;
}

/* Ordenar por: la etiqueta y el <select> nativo adentro de una pastilla. El
   select se queda nativo a proposito — en telefono el sistema lo dibuja como
   rueda y eso es mejor que cualquier lista propia. */
.dm-sort {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--dm-border-input);
    border-radius: var(--dm-radius-pill);
    background: var(--dm-surface);
}

.dm-sort:focus-within {
    border-color: var(--dm-brand);
}

.dm-sort__label {
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-medium);
    color: var(--dm-text-muted);
    white-space: nowrap;
}

.dm-sort__select {
    border: none;
    background: none;
    outline: none;
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
    cursor: pointer;
}

.dm-resultados__cols {
    display: flex;
    align-items: flex-start;
    gap: var(--dm-space-4);
}

.dm-resultados__results {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- Chips de lo que YA esta aplicado ---------- */

/* Ojo con la semantica: estos chips son los filtros que el servidor aplico en
   esta pagina, no lo que hay marcado en el panel. Por eso quitar uno navega en
   el acto, mientras que marcar una opcion adentro del panel solo arma el
   borrador y espera al boton Aplicar. */
.dm-resultados__chips {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    flex-wrap: wrap;
    background: var(--dm-surface);
    border-radius: var(--dm-radius-card);
    box-shadow: var(--dm-shadow-sm);
    padding: 12px 14px;
}

.dm-resultados__chips-label {
    font-size: var(--dm-text-sm);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-muted);
    white-space: nowrap;
}

.dm-filtro-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 var(--dm-space-2) 0 12px;
    border: 1px solid var(--dm-brand);
    background: var(--dm-brand-soft);
    border-radius: var(--dm-radius-pill);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-brand-strong);
    cursor: pointer;
    white-space: nowrap;
}

.dm-filtro-chip:hover {
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
}

.dm-filtro-chip__x {
    flex: none;
    width: 14px;
    height: 14px;
}

.dm-resultados__chips-clear {
    margin-left: auto;
    border: none;
    background: none;
    padding: 0 4px;
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-muted);
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.dm-resultados__chips-clear:hover {
    color: var(--dm-danger);
}

/* ---------- El panel de filtros ---------- */

/* min-width: 0 NO ES DECORATIVO. Un item flex arranca con min-width:auto, o sea
   que no baja del ancho MINIMO de su contenido, y adentro hay etiquetas con
   white-space: nowrap ("Hamburguesas, Medallones y Milanesas"). Sin esto la
   columna ignoraba los 268px de la base y se estiraba a ~520px, empujando la
   grilla de productos. Con esto la etiqueta larga corta con puntos suspensivos,
   que es lo que el template dibuja. */
.dm-filters {
    flex: 0 0 268px;
    min-width: 0;
    position: sticky;
    top: var(--dm-space-4);
    max-height: calc(100vh - 2 * var(--dm-space-4));
    display: flex;
    flex-direction: column;
    background: var(--dm-surface);
    border-radius: var(--dm-radius-card);
    box-shadow: var(--dm-shadow-card);
}

/* Solo aplica en escritorio: de 1023 para abajo la hoja se abre y se cierra
   con .is-open y este estado no la toca. */
@media (min-width: 1024px) {
    .dm-resultados.filtros-ocultos .dm-filters {
        display: none;
    }
}

.dm-filters__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* margin: 0 obligatorio: site.css declara "header { margin-bottom: 2.5rem }"
       para todo el sitio y esta cabecera es un <header>. Mismo caso que
       .dm-cart-panel__head y .dm-summary__head. */
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid var(--dm-border);
}

.dm-filters__title {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
}

.dm-filters__title svg {
    color: var(--dm-brand-strong);
}

.dm-filters__clear {
    border: none;
    background: none;
    padding: 0;
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-brand-strong);
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.dm-filters__hide {
    border: none;
    background: none;
    padding: 0;
    font-family: var(--dm-font);
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-medium);
    color: var(--dm-text-muted);
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

/* El cuerpo scrollea y la cabecera y el pie quedan quietos, para que el boton
   Aplicar este siempre a la vista aunque la lista de marcas sea larga. */
.dm-filters__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--dm-border) transparent;
}

.dm-filters__body::-webkit-scrollbar {
    width: 8px;
}

.dm-filters__body::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 4px;
}

.dm-filters__foot {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--dm-border);
}

.dm-filters__apply {
    flex: 1;
    min-height: 46px;
    border: none;
    border-radius: var(--dm-radius-cta);
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-bold);
    cursor: pointer;
    white-space: nowrap;
}

.dm-filters__apply:hover {
    background: var(--dm-brand-strong);
}

/* (Aca vivia el estado apagado del boton, con el texto "Filtros aplicados" cuando
   el borrador coincidia con lo aplicado. Ya no hay borrador: los filtros aplican en
   cada seleccion y este boton solo cierra la hoja, asi que nunca esta apagado.) */

/* ESTADO "APLICANDO". Con el boton Aplicar la pantalla tenia una senal clara de que
   faltaba un paso; ahora el toque dispara la recarga y esa recarga tarda. Sin nada
   que lo acuse, el panel parece muerto y el usuario vuelve a tocar.

   Se apaga y se bloquea el panel ENTERO, no solo el control tocado: lo que viene es
   una pagina nueva, asi que cualquier otra cosa que se toque en el medio se pierde
   igual (el JS ademas ignora la segunda navegacion). El pointer-events: none y el
   cursor son la mitad util; la opacidad es la que se ve.

   La barra de arriba es lo unico que se mueve: la senal de "esta cargando" en una
   pantalla que por lo demas se congela. */
.dm-resultados.is-aplicando .dm-filters {
    opacity: .55;
    pointer-events: none;
    cursor: progress;
}

.dm-resultados.is-aplicando .dm-filters::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--dm-brand), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: dm-aplicando 1.1s linear infinite;
}

@keyframes dm-aplicando {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

/* Quien pidio menos animacion igual tiene que ver que algo esta pasando: se queda
   la barra, quieta y entera. */
@media (prefers-reduced-motion: reduce) {
    .dm-resultados.is-aplicando .dm-filters::after {
        animation: none;
        background: var(--dm-brand);
    }
}

.dm-filters__reset {
    flex: 0 0 34%;
    min-height: 46px;
    border: 1px solid var(--dm-border-strong);
    background: var(--dm-surface);
    border-radius: var(--dm-radius-cta);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
    cursor: pointer;
    white-space: nowrap;
}

.dm-filters__reset:hover {
    border-color: var(--dm-brand);
    color: var(--dm-brand-strong);
}

/* ---------- Un grupo de filtro (FacetGroup / PriceFacet) ---------- */

.dm-facet {
    border-bottom: 1px solid var(--dm-border);
}

.dm-facet:last-child {
    border-bottom: none;
}

.dm-facet__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--dm-font);
    text-align: left;
}

.dm-facet__head:hover .dm-facet__titulo {
    color: var(--dm-brand-strong);
}

.dm-facet__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-facet__titulo {
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-bold);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--dm-text-strong);
}

/* La pista ("12 marcas") y el resumen ("Zibelman, Paty") ocupan el mismo
   renglon: cuando hay algo marcado gana el resumen. El JS alterna el texto y
   la clase; sin nada marcado queda gris, con algo marcado queda naranja. */
.dm-facet__pista {
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-medium);
    color: var(--dm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-facet__pista.is-active {
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-semibold);
}

.dm-facet__badge {
    flex: none;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-bold);
    display: none;
    align-items: center;
    justify-content: center;
}

.dm-facet__badge.is-visible {
    display: flex;
}

.dm-facet__chevron {
    flex: none;
    color: var(--dm-text-muted);
    transition: transform var(--dm-transition-fast);
}

.dm-facet.is-open .dm-facet__chevron {
    transform: rotate(180deg);
}

.dm-facet__body {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 14px;
}

.dm-facet.is-open .dm-facet__body {
    display: flex;
}

.dm-facet__search {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    height: 40px;
    margin-bottom: var(--dm-space-2);
    padding: 0 12px;
    background: var(--dm-surface-alt);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-pill);
}

.dm-facet__search:focus-within {
    border-color: var(--dm-brand);
    background: var(--dm-surface);
}

.dm-facet__search svg {
    flex: none;
    color: var(--dm-text-muted);
}

.dm-facet__search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    color: var(--dm-text-strong);
}

/* Una opcion. Es un <label> con el <input type=checkbox> real adentro: el
   cuadrito es un <span> pintado y el input queda escondido pero vivo, asi
   siguen andando el teclado, el foco y los lectores de pantalla. */
.dm-facet__op {
    /* position: relative para que el <input> escondido de adentro se ancle a su
       propia fila: si se posiciona contra un ancestro lejano, al llegar con el
       teclado el navegador scrollea a otro lado. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--dm-radius-sm);
    cursor: pointer;
    font-family: var(--dm-font);
}

.dm-facet__op:hover {
    background: var(--dm-surface-alt);
}

.dm-facet__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dm-facet__box {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--dm-surface);
    border: 1.5px solid var(--dm-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.dm-facet__label {
    flex: 1;
    min-width: 0;
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-medium);
    color: var(--dm-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-facet__count {
    flex: none;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
    font-variant-numeric: tabular-nums;
}

.dm-facet__input:checked ~ .dm-facet__box {
    background: var(--dm-brand);
    border-color: var(--dm-brand-strong);
    color: #fff;
}

.dm-facet__input:checked ~ .dm-facet__label {
    font-weight: var(--dm-weight-bold);
}

.dm-facet__input:checked ~ .dm-facet__count {
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-semibold);
}

.dm-facet__op:has(.dm-facet__input:checked) {
    background: var(--dm-brand-soft);
}

/* Respaldo para navegadores sin :has() — el JS tambien pone la clase. */
.dm-facet__op.is-checked {
    background: var(--dm-brand-soft);
}

.dm-facet__input:focus-visible ~ .dm-facet__box {
    outline: 2px solid var(--dm-brand);
    outline-offset: 2px;
}

/* Subcategorias: sangria y un peso menos, como el estado "hija" del template. */
.dm-facet__op--hija {
    min-height: 38px;
    margin-left: 16px;
}

.dm-facet__op--hija .dm-facet__box {
    width: 18px;
    height: 18px;
    border-color: var(--dm-border);
}

.dm-facet__op--hija .dm-facet__label {
    font-size: var(--dm-text-sm);
    color: var(--dm-text);
}

.dm-facet__op.is-oculta {
    display: none;
}

.dm-facet__more {
    align-self: flex-start;
    margin-top: 6px;
    padding: 6px 0;
    border: none;
    background: none;
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-brand-strong);
    cursor: pointer;
    text-decoration: underline;
}

.dm-facet__empty {
    display: none;
    padding: var(--dm-space-2) 10px;
    font-size: var(--dm-text-base);
    color: var(--dm-text-muted);
}

/* ---------- Precio ---------- */

.dm-facet-precio {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 16px;
}

.dm-facet-precio__ranges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-space-2);
}

.dm-facet-precio__range {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--dm-border-strong);
    background: var(--dm-surface);
    color: var(--dm-text-strong);
    border-radius: var(--dm-radius-pill);
    font-family: var(--dm-font);
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.dm-facet-precio__range:hover {
    border-color: var(--dm-brand);
    color: var(--dm-brand-strong);
}

.dm-facet-precio__range.is-active {
    border-color: var(--dm-brand-strong);
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
}

.dm-facet-precio__inputs {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.dm-facet-precio__field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}

.dm-facet-precio__field-label {
    font-size: var(--dm-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dm-text-muted);
    font-weight: var(--dm-weight-bold);
}

.dm-facet-precio__box {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--dm-border-input);
    border-radius: var(--dm-radius-sm);
    background: var(--dm-surface);
}

.dm-facet-precio__box:focus-within {
    border-color: var(--dm-brand);
}

.dm-facet-precio__peso {
    font-size: var(--dm-text-base);
    color: var(--dm-text-muted);
}

.dm-facet-precio__box input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--dm-text-strong);
}

.dm-facet-precio__sep {
    padding-bottom: 13px;
    color: var(--dm-text-faint);
}

/* EL SLIDER ES UN <input type=range> NATIVO Y NO noUiSlider. La libreria solo
   se cargaba por esta pantalla (dos archivos, wNumb + nouislider, css y js) y
   lo unico que aportaba era el segundo puntero. Con los campos Desde/Hasta
   arriba ese puntero sobra: el rango se escribe. */
.dm-facet-precio__slider {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm-facet-precio__slider input[type="range"] {
    width: 100%;
    height: 28px;
    accent-color: var(--dm-brand);
    cursor: pointer;
}

.dm-facet-precio__ends {
    display: flex;
    justify-content: space-between;
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
    font-weight: var(--dm-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* ---------- Barra de filtrar/ordenar y hojas (telefono y tablet) ---------- */

.dm-resultados__mobilebar {
    display: none;
    gap: var(--dm-space-2);
}

.dm-resultados__mobilebar button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-space-2);
    min-height: 46px;
    border-radius: var(--dm-radius-pill);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-bold);
    cursor: pointer;
    white-space: nowrap;
}

.dm-resultados__filtrar {
    border: 1px solid var(--dm-brand);
    background: var(--dm-brand-soft);
    color: var(--dm-brand-strong);
}

.dm-resultados__ordenar {
    border: 1px solid var(--dm-border-strong);
    background: var(--dm-surface);
    color: var(--dm-text-strong);
}

.dm-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgb(0 0 0 / 45%);
}

.dm-scrim.is-open {
    display: block;
}

/* Hoja de ordenar. La de filtros es el mismo <aside>, ver el bloque de abajo. */
.dm-sortsheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1041;
    flex-direction: column;
    background: var(--dm-surface);
    border-radius: 20px 20px 0 0;
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px rgb(0 0 0 / 22%);
}

.dm-sortsheet.is-open {
    display: flex;
}

.dm-sortsheet__title {
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
    padding-bottom: var(--dm-space-2);
}

.dm-sortsheet__op {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 12px 0 40px;
    border: none;
    border-radius: var(--dm-radius-sm);
    background: none;
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    color: var(--dm-text);
    cursor: pointer;
    text-align: left;
}

.dm-sortsheet__op:hover {
    background: var(--dm-surface-alt);
}

.dm-sortsheet__op.is-active {
    padding-left: 12px;
    background: var(--dm-brand-soft);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-brand-strong);
}

.dm-sortsheet__check {
    flex: none;
    display: none;
}

.dm-sortsheet__op.is-active .dm-sortsheet__check {
    display: block;
}

.dm-filters__grabber {
    display: none;
}

/* ---------- De 1024 para abajo ---------- */

/* El corte va en 1023 y no en 767 a proposito: de 768 a 1023 el sitio ya sirve
   la hoja mobile (shell oscuro, tab bar abajo), y una columna de 268px al
   costado en una tablet deja los productos en dos por fila. */
@media (max-width: 1023px) {
    .dm-resultados {
        gap: var(--dm-space-2);
        padding: var(--dm-space-3) 0;
    }

    .dm-resultados__crumbs {
        display: none;
    }

    .dm-resultados__title {
        font-size: var(--dm-text-xl);
    }

    .dm-resultados__head {
        align-items: baseline;
    }

    /* El "Ordenar por" de escritorio se va: en su lugar quedan los dos botones
       de la barra, que es lo que dibuja el template. */
    .dm-resultados__tools {
        display: none;
    }

    .dm-resultados__mobilebar {
        display: flex;
    }

    .dm-resultados__cols {
        display: block;
    }

    .dm-resultados__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        background: none;
        box-shadow: none;
        padding: 0 0 var(--dm-space-1);
        scrollbar-width: none;
    }

    .dm-resultados__chips::-webkit-scrollbar {
        display: none;
    }

    .dm-resultados__chips-label {
        display: none;
    }

    .dm-filtro-chip {
        flex: none;
        min-height: 36px;
    }

    .dm-resultados__chips-clear {
        flex: none;
        margin-left: 0;
        min-height: 36px;
        padding: 0 14px;
        border: 1px dashed var(--dm-border-strong);
        border-radius: var(--dm-radius-pill);
        text-decoration: none;
    }

    /* EL PANEL PASA A HOJA INFERIOR. Mismo nodo, otra caja: fija abajo, con
       tope de 88vh para que siempre se vea el fondo de la pantalla atras y se
       entienda que es una hoja y no una pagina nueva. */
    .dm-filters {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 1041;
        flex: none;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgb(0 0 0 / 22%);
    }

    .dm-filters.is-open {
        display: flex;
    }

    .dm-filters__grabber {
        display: block;
        width: 44px;
        height: 4px;
        margin: 7px auto 0;
        border-radius: 2px;
        background: var(--dm-border-strong);
    }

    .dm-filters__hide {
        display: none;
    }

    .dm-filters__close {
        flex: none;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: var(--dm-surface-alt);
        border-radius: 50%;
        cursor: pointer;
        color: var(--dm-text-strong);
    }

    .dm-filters__foot {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);
    }

    .dm-filters__apply,
    .dm-filters__reset {
        min-height: 50px;
    }
}

@media (min-width: 1024px) {
    .dm-filters__close {
        display: none;
    }

    /* El pie es de la hoja de telefono. En escritorio el panel es una columna fija:
       no hay hoja que cerrar con "Ver resultados", y "Limpiar" repetiria el
       "Limpiar todo" que ya esta en la cabecera y que aparece solo cuando hay algo
       marcado. Desde que los filtros aplican en cada seleccion, el pie no tiene
       ninguna accion propia que ofrecer aca. */
    .dm-filters__foot {
        display: none;
    }
}


/* ============================================================================
 * 6. Estado vacio de la busqueda
 *
 * La card del cartel ("No hay productos que coincidan...") es vieja y sigue
 * viniendo de site.css: aca solo se agrega lo que NO tenia, que es una salida.
 * Hasta ahora el cliente quedaba en una pantalla sin nada para tocar salvo el
 * buscador — y si lo que lo dejo sin resultados fue un filtro, ni siquiera sabia
 * que alcanzaba con sacarlo.
 * ========================================================================== */

.dm-vacio__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-space-2);
    margin-top: var(--dm-space-3);
}

/* Es <a> en un caso y <button> en el otro —link cuando hay a donde ir, boton
   cuando hay que preguntarle a la historia del navegador— asi que la clase tiene
   que dejarlos identicos: los dos nacen con cajas distintas. */
.dm-vacio__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px de alto util: es el minimo comodo de toque y esta pensado para leerse
       de grande, como el resto de los CTA del sitio. */
    min-height: 44px;
    padding: 0 var(--dm-space-4);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-cta);
    background: var(--dm-surface);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--dm-transition-fast);
}

.dm-vacio__btn:hover {
    border-color: var(--dm-brand);
    color: var(--dm-brand-strong);
    text-decoration: none;
}

.dm-vacio__btn--primario {
    border-color: var(--dm-brand);
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
}

.dm-vacio__btn--primario:hover {
    background: var(--dm-brand-strong);
    border-color: var(--dm-brand-strong);
    color: var(--dm-text-on-brand);
}

/* EN TELEFONO LOS DOS BOTONES APILADOS Y A TODO EL ANCHO.

   Medido lo que hay adentro de la card: 171px de contenido a 320 y 211 a 360, contra
   los 222 que piden los dos botones compartiendo renglon ("Volver" 95 + gap 8 + "Ir
   al inicio" 119). No entran. De 430 para arriba si entrarian, pero apilados y a todo
   el ancho es mejor en telefono igual: quedan los dos del mismo tamanio y cae el
   pulgar sin apuntar.

   EL CORTE VA EN 479.98 Y NO EN UN ENTERO. Con escala de pantalla fraccionaria
   (Windows al 125%) un ancho entero puede caer entre "max-width: 479px" y
   "min-width: 480px" y quedarse sin ninguna de las dos reglas: es el mismo agujero de
   1px que tiene el tema en 1023/1024 y que se midio en esta pantalla a 575 exactos,
   donde esta regla no llegaba a aplicarse. */
@media (max-width: 479.98px) {
    .dm-vacio__acciones {
        flex-direction: column;
    }

    .dm-vacio__btn {
        width: 100%;
    }
}

/* El "ver todas" de la vitrina de abajo. Los estilos estaban inline en la vista
   (color, tamanio, mayusculas) con un hex a mano; pasan a token. */
.dm-vacio__vertodas {
    display: inline-block;
    margin-bottom: var(--dm-space-2);
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    text-transform: uppercase;
    color: var(--dm-brand-strong);
}

/* El titulo de la vitrina lleva la busqueda del cliente adentro, que puede ser
   largo: que corte y no empuje. Declara text-align porque el tema tiene
   "p { text-align: right }" global y este bloque vive entre <p> heredados. */
.dm-vacio__sugeridos {
    width: 100%;
    text-align: left;
}

.dm-vacio__sugeridos h4 {
    overflow-wrap: anywhere;
}