.shop-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}
@media (min-width: 1024px) {
    .shop-layout {
        grid-template-columns: 260px 1fr;
        gap: var(--space-5);
    }
}

.shop-sidebar {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    padding: var(--space-3);
    position: sticky;
    top: 96px;
}
.shop-sidebar__group {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-sidebar__group legend {
    margin-bottom: 8px;
}
.shop-sidebar__check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 0;
}
.shop-sidebar__check input:checked + span {
    color: var(--color-gold);
}

.shop-main {
    min-width: 0;
}
.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-soft);
}
.shop-toolbar__sort {
    display: flex;
    align-items: center;
    /* En movil la barra ocupa el ancho entero y el desplegable se reparte lo
       que quede: un <select> no encoge por debajo de su opcion mas larga
       ("Precio: de menor a mayor") a menos que se le diga que si. */
    width: 100%;
    gap: 8px;
}
.shop-toolbar__sort .select { flex: 1 1 auto; }
@media (min-width: 480px) {
    .shop-toolbar__sort { width: auto; }
    .shop-toolbar__sort .select { flex: none; }
}
.shop-toolbar__sort .select {
    width: auto;
    /* Los 220 px fijos mas la etiqueta "Ordenar por" pedian 315 en una
       pantalla de 320, y el desplegable se salia por la derecha. En movil se
       le deja encoger; a partir de 480 recupera su ancho comodo. */
    min-width: 0;
    max-width: 100%;
}
@media (min-width: 480px) {
    .shop-toolbar__sort .select { min-width: 220px; }
}

.product-grid { margin-bottom: var(--space-5); }

/* ── Que todas las tarjetas de una fila midan lo mismo ────────────────────
   Medido en el navegador, antes de esto: en la primera fila las tarjetas
   median 485, 436 y 462 px —hasta 49 px de diferencia— y el precio caía a 385,
   362 y 362 px del borde. O sea que al recorrer la rejilla, el precio de cada
   producto estaba a una altura distinta y no había forma de compararlos de un
   vistazo, que es exactamente para lo que sirve una rejilla.

   La causa no era la tarjeta: era su ENVOLTORIO. Cada una va dentro de un
   `<div class="reveal">` para la animación de entrada. Ese div es el hijo de
   la rejilla y sí se estira a la altura de la fila; la tarjeta de dentro se
   quedaba con su altura natural, la que le pidiera su título de una, dos o
   tres líneas.

   Con esto el envoltorio deja de estorbar: la tarjeta ocupa todo su alto y,
   como el precio ya lleva `margin-top:auto`, cae solo al mismo sitio en todas.
   ───────────────────────────────────────────────────────────────────────── */
.product-grid > * {
    display: flex;
    min-width: 0;
}

.product-grid > * > .card-product,
.product-grid > .card-product {
    flex: 1 1 auto;
    min-width: 0;
}

/* Y el precio, a la misma altura en todas.
   -------------------------------------------------------------------------
   Ya con las tarjetas igualadas quedaba un baile de hasta 54 px. La culpa era
   de las etiquetas de disponibilidad: unas tarjetas llevan «Hoy en tienda»,
   otras «Stock bajo · 10», otras las dos y otras ninguna, y como iban sueltas
   bajo el precio, cada combinación empujaba distinto.

   Ahora tienen su propia fila de alto fijo —una línea, siempre—, así que el
   precio cae en la misma horizontal en toda la rejilla. Que es lo que permite
   recorrer una página de catálogo comparando precios sin ir persiguiéndolos.

   `nowrap` a propósito: si las dos etiquetas no cupieran, es preferible que la
   segunda se recorte a que la fila crezca y vuelva a descuadrar todo. */
.card-product__flags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-height: 26px;
    margin-top: 6px;
}

/* Tres por fila cuando hay barra de filtros al lado, no cuatro.
   -------------------------------------------------------------------------
   El contenido de la página llega a 1 024 px como mucho; quitando los 260 de
   la barra de filtros y los 48 del hueco quedan unos 716 para las tarjetas.
   Repartidos entre CUATRO salen a 161 px: la foto del producto se queda en un
   sello y el nombre baja a cuatro líneas. Entre TRES salen a 222 px, que es
   una tarjeta de verdad.

   Vale la pena decirlo claro: se ven nueve productos por pantalla en vez de
   doce, y se ven. Esto es consecuencia directa de ensanchar los márgenes; si
   algún día se quiere volver a cuatro, hay que devolver ancho a la página.

   Solo donde hay barra lateral: `.shop-layout` es /tienda y `.catalog` son
   las categorías. El buscador y las marcas no llevan filtros al lado, tienen
   el ancho entero y ahí las cuatro columnas siguen saliendo a 238 px. */
@media (min-width: 1024px) {
    .shop-layout .product-grid,
    .catalog .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Cuatro por fila a partir de 1 360 px, devolviendo ancho a la pagina.
   -------------------------------------------------------------------------
   Lo de arriba sigue siendo cierto: a 1 200 px de pagina no caben cuatro
   tarjetas dignas al lado de los filtros. La salida no es apretarlas, es la
   que ya apuntaba el comentario anterior: devolver ancho.

   En el catalogo —y solo ahi— la pagina se ensancha a 1 440 y el aire lateral
   baja de 72 a 40. El area de tarjetas pasa de 716 a 1 052 px, y entre CUATRO
   salen a 245: mas anchas que las 233 de antes con tres, o que las 223 que
   quedaban en un monitor de 1 920. O sea, cuatro productos por fila sin que
   la tarjeta encoja ni un pixel; el ancho sale del margen muerto, no de la foto.

   Por debajo de 1 360 no hay ancho que devolver y se mantienen las tres.

   Se ensancha la pagina ENTERA (`.page-catalog .container`), no solo la
   rejilla: si solo se ensanchara la rejilla, el hero y los bloques de texto
   de arriba y abajo quedarian con los bordes descuadrados respecto al
   listado, que es peor que la ganancia. */
@media (min-width: 1360px) {
    .page-catalog .container {
        --container-max: 1440px;
        --container-pad: 40px;
    }
    .shop-layout .product-grid,
    .catalog .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.pagination__item,
.pagination__prev,
.pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition:
        border-color var(--transition-base),
        color var(--transition-base),
        background-color var(--transition-base);
}
/* Las páginas ya visitadas salían en el azul/morado del navegador mientras
   las demás iban en gris: la fila de números parecía tener dos categorías que
   no significan nada para quien navega un catálogo. */
.pagination__item:visited,
.pagination__prev:visited,
.pagination__next:visited { color: var(--color-text-muted); }
.pagination__item.is-active:visited,
.pagination__item[aria-current="page"]:visited { color: #ffffff; }

.pagination__item:hover,
.pagination__prev:hover,
.pagination__next:hover {
    border-color: var(--color-amber);
    color: var(--color-amber);
    background: var(--color-amber-soft);
}
/* Página actual. Declaración ÚNICA: estaba también en footer.css, que se
   carga después, así que el color lo decidía el orden de los <link> y no una
   persona. Se pinta con el verde de la casa, no con --color-gold, que en esta
   paleta es un verde grisáceo apagado y no se lee como "estás aquí". */
.pagination__item.is-active,
.pagination__item[aria-current="page"] {
    background: var(--color-brand);
    color: #ffffff;
    border-color: var(--color-brand);
    font-weight: 700;
    pointer-events: none;  /* ya estás en esa página, no tiene sentido clicarla */
}
.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 44px;
    color: var(--color-text-dim);
}

/* === SHOP SIDEBAR: collapsible en móvil (sticky en desktop) ============= */
.shop-sidebar {
    padding: 0;
    background: transparent;
    border: 0;
    position: static;
    top: auto;
}
@media (min-width: 1024px) {
    .shop-sidebar {
        background: var(--color-bg-soft);
        border: 1px solid var(--color-border);
        padding: var(--space-3);
        position: sticky;
        top: 96px;
    }
}
.shop-sidebar__collapse {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    padding: 0;
}
@media (min-width: 1024px) {
    .shop-sidebar__collapse {
        background: transparent;
        border: 0;
        padding: 0;
    }
}
.shop-sidebar__toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.82rem;
    color: var(--color-text);
    user-select: none;
    -webkit-tap-highlight-color: rgba(226, 190, 101, 0.15);
}
.shop-sidebar__toggle::-webkit-details-marker { display: none; }
.shop-sidebar__toggle svg { color: var(--color-gold); }
.shop-sidebar__toggle::after {
    content: "▾";
    margin-left: auto;
    color: var(--color-gold);
    transition: transform var(--dur-fast) ease;
}
.shop-sidebar__collapse[open] .shop-sidebar__toggle::after { transform: rotate(180deg); }
.shop-sidebar__count {
    background: var(--color-gold);
    color: var(--color-bg);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}
.shop-sidebar__form {
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
/* Desktop: summary oculto + details always open */
@media (min-width: 1024px) {
    .shop-sidebar__toggle { display: none; }
    .shop-sidebar__collapse { display: block; }
    .shop-sidebar__collapse > *:not(summary) { display: block !important; }
    .shop-sidebar__form {
        padding: 0;
        border-top: 0;
    }
    .shop-sidebar__heading { display: block; }
}
/* Mobile: ocultar el heading duplicado (el summary ya dice "Filtros") */
@media (max-width: 1023px) {
    .shop-sidebar__heading { display: none; }
}