/**
 * tienda.css — piel "showroom" de la tienda. Es el diseño oficial.
 *
 * Convive con el anterior (fillters.php + cardProducts.php), que sigue
 * disponible en ?piel=clasica: esta hoja solo pinta lo que cuelga de .tnd, así
 * que las dos pieles no se pisan.
 *
 * Criterio de color: el naranja de marca se reserva para lo que de verdad es
 * una oferta y para la accion sobre la que se esta pasando el mouse. Repetido
 * en cada tarjeta, en cada titulo y en cada contador dejaba de significar algo.
 *
 * Los nombres de clase de los ganchos de JS (.products-column, .btn-add-cart,
 * [data-favorite-btn], .product-image-minimal, .store-products-content,
 * .store-skeleton-wrapper, los id f-*) no se tocan: el carrito, los favoritos,
 * el copiado de codigo, el esqueleto y filter.js siguen funcionando igual.
 */

/* ══════════════════════════════════════════════════════════
   Tokens
   ══════════════════════════════════════════════════════════ */

/*
 * El panel y el boton del telefono viven fuera de .tnd (cuelgan del body para
 * poder ir fijos), asi que necesitan los mismos tokens o se quedan sin color.
 */
.tnd,
.tnd-movil-panel,
.tnd-movil-btn,
.tnd-grilla--suelta,
.tnd-esqueleto--suelta {
    /* Fondo blanco, igual que las tarjetas: el borde es el que separa */
    --tnd-fondo:   #ffffff;
    --tnd-panel:   #ffffff;
    --tnd-marco:   #f4f6f8;   /* tinte suave de chips, hover y esqueleto */
    /* Las fotos de producto vienen con fondo blanco solido: cualquier gris
       detras se veia como un recuadro alrededor de la imagen */
    --tnd-foto-fondo: #ffffff;
    --tnd-borde:   #e5e7eb;
    --tnd-borde-2: #d8dde4;
    --tnd-texto:   #1f2937;
    --tnd-suave:   #4b5563;
    /* El gris de los datos secundarios no baja de aqui: mas claro deja de leerse */
    --tnd-tenue:   #6b7280;
    /* Naranja solido para lo que lleva texto blanco encima */
    --tnd-naranja: #c2410c;
    --tnd-radio:   18px;
    --tnd-radio-s: 12px;
    --tnd-sombra:  0 1px 2px rgba(16, 24, 40, .04);
    --tnd-sombra-alta: 0 18px 40px -18px rgba(16, 24, 40, .28);
}

html.dark .tnd,
html.dark .tnd-movil-panel,
html.dark .tnd-movil-btn,
html.dark .tnd-grilla--suelta,
html.dark .tnd-esqueleto--suelta {
    --tnd-fondo:   #0f172a;
    --tnd-panel:   #1f2937;
    --tnd-marco:   #172033;
    /* En oscuro el area de la foto se funde con la tarjeta */
    --tnd-foto-fondo: #1f2937;
    --tnd-borde:   #374151;
    --tnd-borde-2: #4b5563;
    --tnd-texto:   #f3f4f6;
    --tnd-suave:   #d1d5db;
    --tnd-tenue:   #b6bdc8;
    --tnd-naranja: #c2410c;
    --tnd-sombra:  0 1px 2px rgba(0, 0, 0, .3);
    --tnd-sombra-alta: 0 18px 40px -18px rgba(0, 0, 0, .7);
}

/* ══════════════════════════════════════════════════════════
   Estructura
   ══════════════════════════════════════════════════════════ */

.tnd {
    background: var(--tnd-fondo);
    padding: 1.5rem 0 3rem;
    color: var(--tnd-texto);
}

/* container-90 pinta fondo propio en oscuro: aqui manda el de la tienda */
.tnd .tnd-ancho { background: transparent !important; }

.tnd-layout {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* ══════════════════════════════════════════════════════════
   Cabecera de categoria
   ══════════════════════════════════════════════════════════ */

.tnd-cabecera {
    margin-bottom: 1.25rem;
}

.tnd-miga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
    font-size: .8rem;
    color: var(--tnd-tenue);
}

.tnd-miga a {
    color: var(--tnd-suave);
    text-decoration: none;
}

.tnd-miga a:hover { color: var(--color-primary); }

.tnd-titulo {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.1;
    color: var(--tnd-texto);
}

.tnd-bajada {
    margin: .5rem 0 0;
    max-width: 68ch;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--tnd-suave);
}

/* ══════════════════════════════════════════════════════════
   Panel de filtros (escritorio y movil comparten piezas)
   ══════════════════════════════════════════════════════════ */

/* El panel se queda donde esta y se va con la pagina al bajar.

   Antes era sticky y acompanaba el scroll: en una tienda con la grilla al lado,
   una columna que persigue al lector distrae mas de lo que ayuda. Los filtros se
   usan al llegar, no a mitad del listado, y para volver a ellos esta la barra de
   arriba con los chips de lo que hay aplicado.

   align-self: start se queda: sin el, la celda de la reja estira el panel hasta
   el alto de la fila y queda una caja vacia larguisima. */
.tnd-lateral {
    align-self: start;
}

.tnd-panel {
    display: flex;
    flex-direction: column;
    /* Sin tope de alto: el panel ya no persigue el scroll, asi que no hay motivo
       para recortarlo a la pantalla ni para darle scroll propio. El unico que se
       queda es el de la lista de marcas (.tnd-lista), que con 69 marcas si hace
       falta. */
    background: var(--tnd-panel);
    border: 1px solid var(--tnd-borde);
    border-radius: var(--tnd-radio);
    box-shadow: var(--tnd-sombra);
    overflow: hidden;
}

.tnd-panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--tnd-borde);
}

.tnd-panel__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--tnd-texto);
}

.tnd-panel__titulo svg { color: var(--tnd-tenue); }

.tnd-marcador {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}

.tnd-limpiar {
    border: 0;
    background: none;
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tnd-suave);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s ease;
}

.tnd-limpiar:hover { color: var(--color-primary); }

.tnd-panel__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .4rem 1.1rem 1.1rem;
}

/* Barra de scroll discreta dentro del panel */
.tnd-panel__cuerpo::-webkit-scrollbar { width: 8px; }
.tnd-panel__cuerpo::-webkit-scrollbar-thumb {
    background: var(--tnd-borde-2);
    border-radius: 99px;
}

.tnd-grupo {
    padding: 1rem 0;
    border-bottom: 1px solid var(--tnd-borde);
}

.tnd-grupo:last-child { border-bottom: 0; padding-bottom: .4rem; }

.tnd-grupo__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .65rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--tnd-tenue);
}

.tnd-grupo__cuenta {
    font-size: .7rem;
    font-weight: 700;
    color: var(--tnd-tenue);
}

/* ── Campos ── */

.tnd-campo {
    position: relative;
    display: block;
}

.tnd-campo svg {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tnd-tenue);
    pointer-events: none;
}

.tnd-campo input,
.tnd-select select {
    width: 100%;
    padding: .6rem .8rem .6rem 2.1rem;
    border: 1px solid var(--tnd-borde-2);
    border-radius: 10px;
    background: var(--tnd-panel);
    color: var(--tnd-texto);
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tnd-campo input::placeholder { color: var(--tnd-tenue); }

.tnd-campo input:focus,
.tnd-select select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .14);
}

.tnd-select {
    position: relative;
    display: block;
}

.tnd-select select {
    padding-left: .8rem;
    padding-right: 2.2rem;
    appearance: none;
    cursor: pointer;
}

.tnd-select svg {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tnd-tenue);
    pointer-events: none;
}

.tnd-campo + .tnd-campo,
.tnd-select + .tnd-campo,
.tnd-campo + .tnd-lista,
.tnd-select + .tnd-lista { margin-top: .5rem; }

/* ── Casillas ── */

.tnd-lista {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    max-height: 250px;
    overflow-y: auto;
    margin: 0 -.35rem;
    padding: 0 .35rem;
}

.tnd-lista::-webkit-scrollbar { width: 6px; }
.tnd-lista::-webkit-scrollbar-thumb { background: var(--tnd-borde-2); border-radius: 99px; }

.tnd-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem .45rem;
    border-radius: 9px;
    font-size: .86rem;
    color: var(--tnd-texto);
    cursor: pointer;
    transition: background-color .15s ease;
}

.tnd-check:hover { background: var(--tnd-marco); }

.tnd-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tnd-check__caja {
    position: relative;
    flex: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--tnd-borde-2);
    border-radius: 5px;
    background: var(--tnd-panel);
    transition: background-color .15s ease, border-color .15s ease;
}

.tnd-check__caja::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}

.tnd-check input:checked + .tnd-check__caja {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.tnd-check input:checked + .tnd-check__caja::after { transform: rotate(45deg) scale(1); }

.tnd-check input:focus-visible + .tnd-check__caja {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .25);
}

.tnd-check__texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnd-check__cuenta {
    flex: none;
    font-size: .74rem;
    font-weight: 600;
    color: var(--tnd-tenue);
}

.tnd-vacio {
    margin: .3rem 0;
    font-size: .82rem;
    color: var(--tnd-tenue);
}

/* Etiquetas de estado dentro de los filtros */
.tnd-pildora {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .3px;
}

.tnd-pildora--oferta {
    background: rgba(var(--color-primary-rgb), .14);
    color: #9a3412;
}

html.dark .tnd-pildora--oferta { color: #fdba74; }

.tnd-pildora--nuevo {
    background: rgba(var(--color-secondary-rgb), .12);
    color: #1e40af;
}

html.dark .tnd-pildora--nuevo { color: #93c5fd; }

/* Controles que filter.js necesita pero esta piel no muestra */
.tnd-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   Barra de herramientas
   ══════════════════════════════════════════════════════════ */

.tnd-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    background: var(--tnd-panel);
    border: 1px solid var(--tnd-borde);
    border-radius: 14px;
    box-shadow: var(--tnd-sombra);
}

.tnd-barra__cuenta {
    font-size: .88rem;
    color: var(--tnd-suave);
}

.tnd-barra__cuenta strong {
    color: var(--tnd-texto);
    font-weight: 800;
}

.tnd-barra__fin {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-left: auto;
}

.tnd-orden {
    position: relative;
    display: flex;
    align-items: center;
}

.tnd-orden select {
    padding: .5rem 2rem .5rem .8rem;
    border: 1px solid var(--tnd-borde-2);
    border-radius: 10px;
    background: var(--tnd-panel);
    color: var(--tnd-texto);
    font-size: .84rem;
    font-family: inherit;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.tnd-orden select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .14);
}

.tnd-orden svg {
    position: absolute;
    right: .65rem;
    color: var(--tnd-tenue);
    pointer-events: none;
}

/* Grupo de botones: densidad y vista */
.tnd-grupo-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--tnd-borde-2);
    border-radius: 10px;
    background: var(--tnd-marco);
}

.tnd-grupo-btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--tnd-tenue);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.tnd-grupo-btn button:hover { color: var(--tnd-texto); }

.tnd-grupo-btn button.es-activo {
    background: var(--tnd-panel);
    color: var(--color-primary);
    box-shadow: var(--tnd-sombra);
}

/* ── Chips de filtros activos ── */

.tnd-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    width: 100%;
}

.tnd-chips:empty { display: none; }

.tnd-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem .3rem .7rem;
    border: 1px solid var(--tnd-borde-2);
    border-radius: 999px;
    background: var(--tnd-marco);
    color: var(--tnd-texto);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.tnd-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tnd-chip svg { opacity: .55; }
.tnd-chip:hover svg { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   Grilla
   ══════════════════════════════════════════════════════════ */

.tnd-grilla {
    display: grid;
    grid-template-columns: repeat(var(--tnd-columnas, 4), minmax(0, 1fr));
    gap: 1rem;
}

/* ══════════════════════════════════════════════════════════
   Tarjeta
   ══════════════════════════════════════════════════════════ */

.tnd-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tnd-panel);
    border: 1px solid var(--tnd-borde);
    border-radius: var(--tnd-radio);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tnd-tarjeta:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--tnd-sombra-alta);
}

.tnd-tarjeta__enlace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-decoration: none;
    color: inherit;
}

/* ── Foto ── */

.tnd-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--tnd-foto-fondo);
    overflow: hidden;
}

.tnd-foto img.product-image-minimal {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10%;
    transition: transform .35s ease;
}

.tnd-tarjeta:hover .tnd-foto img.product-image-minimal { transform: scale(1.05); }

/* ── Etiquetas ── */

.tnd-etiquetas {
    position: absolute;
    top: .6rem;
    left: .6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    z-index: 2;
}

/*
 * Pildora rellena. Color fijo en los dos temas: la etiqueta se apoya sobre la
 * foto del producto, no sobre la tarjeta, y la foto es blanca tambien en modo
 * oscuro.
 */
.tnd-etiqueta {
    padding: .22rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* Naranja solo aqui: es la unica etiqueta que significa dinero.
   El valor por defecto es para cuando la etiqueta se usa fuera de .tnd,
   como en la ficha de producto: --tnd-naranja vive en .tnd, no en :root, y
   sin el respaldo la pildora salia transparente. */
.tnd-etiqueta--oferta {
    background: var(--tnd-naranja, #c2410c);
    color: #fff;
}

/* Azul claro con letras azules, la misma pareja que la pildora "Nuevo" del
   panel de filtros */
.tnd-etiqueta--nuevo {
    background: #dbeafe;
    color: #1e40af;
}

html.dark .tnd-etiqueta--nuevo { background: #dbeafe; color: #1e40af; }

.tnd-etiqueta--versiones {
    background: rgba(31, 41, 55, .78);
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Favorito ── */

.tnd-tarjeta .favorite-btn-card {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--tnd-borde);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--tnd-suave);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

html.dark .tnd-tarjeta .favorite-btn-card {
    background: rgba(31, 41, 55, .92);
    border-color: var(--tnd-borde-2);
}

.tnd-tarjeta .favorite-btn-card:hover {
    color: var(--color-error);
    transform: scale(1.08);
}

.tnd-tarjeta .favorite-btn-card.is-favorite,
.tnd-tarjeta .favorite-btn-card.active { color: var(--color-error); }

/* ── Datos ── */

.tnd-datos {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem .95rem 0;
}

/*
 * Marca a la izquierda y codigo pegado a la derecha, cada uno recortandose si
 * no cabe. Juntos y sin tope, una marca larga con un codigo largo (KENDAL
 * 0415160104N45I) dejaba la fila desbalanceada y empujaba el icono de copiar.
 */
.tnd-marca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    min-height: 1.1em;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--tnd-tenue);
}

.tnd-marca > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El codigo pesa menos que la marca: es un dato de apoyo, no el titular */
.tnd-codigo {
    display: inline-flex;
    align-items: center;
    /* El codigo manda sobre la marca al repartir el espacio: es el dato que la
       gente compara y dicta en el meson. La marca se recorta antes. */
    flex: 0 0 auto;
    min-width: 0;
    max-width: 70%;
    gap: .25rem;
    border: 0;
    padding: 0;
    background: none;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    color: var(--tnd-tenue);
    cursor: pointer;
    transition: color .15s ease;
}

.tnd-codigo .code-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnd-codigo svg { flex: none; }

/*
 * .product-code-minimal arrastra de home-minimal.css un fondo gris con borde
 * naranja al pasar el mouse, y en oscuro un gris apagado que no llega al minimo
 * de contraste. Aqui se reemplaza por una pastilla naranja muy suave con letras
 * naranja quemado. El padding esta siempre puesto (solo el fondo aparece al
 * pasar), para que la fila no de un salto.
 *
 * El selector repite las dos clases (.tnd-codigo.product-code-minimal) en vez
 * de colgar de .tnd: la tarjeta tambien se usa fuera de la tienda, donde no hay
 * ningun .tnd arriba, y ahi el chip volvia al gris de home-minimal.css. Las dos
 * clases igualan el peso de .dark .product-code-minimal y html.dark lo supera,
 * asi que ya no depende del orden en que carguen las hojas.
 */
.tnd-codigo.product-code-minimal {
    padding: 3px 7px;
    border: 0 !important;
    border-radius: 7px;
    background: transparent !important;
    color: var(--tnd-tenue) !important;
}

html.dark .tnd-codigo.product-code-minimal { color: var(--tnd-tenue) !important; }

.tnd-codigo.product-code-minimal:hover {
    background: rgba(var(--color-primary-rgb), .12) !important;
    color: #9a3412 !important;
}

html.dark .tnd-codigo.product-code-minimal:hover {
    background: rgba(var(--color-primary-rgb), .18) !important;
    color: #fdba74 !important;
}

/* Confirmacion de copiado: verde, el mismo que usa el resto del sitio */
.tnd-codigo.product-code-minimal.copied {
    background: var(--color-success-muted) !important;
    color: var(--color-success-dark) !important;
}

html.dark .tnd-codigo.product-code-minimal.copied { color: var(--color-success) !important; }

.tnd-codigo svg { opacity: .7; }

/* El nombre es lo que la persona vino a buscar: manda en la tarjeta */
.tnd-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: 2.5em;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tnd-texto);
}

.tnd-tarjeta:hover .tnd-nombre { color: var(--color-primary); }

/* ── Precio ── */

.tnd-precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
    padding: .55rem .95rem .2rem;
}

.tnd-precio__ahora {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--tnd-texto);
}

/* Solo cuando hay rebaja real el precio se pone naranja */
.tnd-precio--oferta .tnd-precio__ahora { color: #c2410c; }
html.dark .tnd-precio--oferta .tnd-precio__ahora { color: #fb923c; }

.tnd-precio__antes {
    font-size: .8rem;
    color: var(--tnd-tenue);
    text-decoration: line-through;
}

.tnd-precio__pedido {
    font-size: .88rem;
    font-weight: 700;
    color: var(--tnd-suave);
}

/* ── Accion ── */

.tnd-accion {
    padding: .7rem .95rem .95rem;
}

.tnd-tarjeta .btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--tnd-borde-2);
    border-radius: 10px;
    background: var(--tnd-panel);
    color: var(--tnd-texto);
    font-size: .85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.tnd-tarjeta .btn-add-cart:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.tnd-tarjeta .btn-add-cart:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════
   Vista lista
   ══════════════════════════════════════════════════════════ */

.tnd-grilla.es-lista {
    grid-template-columns: 1fr;
    gap: .7rem;
}

.es-lista .tnd-tarjeta { flex-direction: row; }

.es-lista .tnd-tarjeta__enlace {
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

/* Alto minimo: con la foto suelta la fila quedaba en 88px y el producto no se veia */
.es-lista .tnd-tarjeta { min-height: 132px; }

.es-lista .tnd-foto {
    flex: none;
    width: 168px;
    aspect-ratio: auto;
}

.es-lista .tnd-datos {
    justify-content: center;
    padding: 1rem 1.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.es-lista .tnd-nombre {
    -webkit-line-clamp: 2;
    min-height: 0;
    font-size: 1.02rem;
}

.es-lista .tnd-precio {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .15rem;
    margin: 0;
    padding: 1rem 1.1rem;
    text-align: right;
}

.es-lista .tnd-accion {
    display: flex;
    align-items: center;
    padding: 1rem 1.1rem 1rem 0;
}

.es-lista .tnd-tarjeta .btn-add-cart { width: auto; padding: .6rem 1.2rem; }

.es-lista .tnd-tarjeta:hover { transform: none; }

/* ══════════════════════════════════════════════════════════
   Sin resultados
   ══════════════════════════════════════════════════════════ */

.tnd-sin-resultados {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 4rem 1.5rem;
    background: var(--tnd-panel);
    border: 1px dashed var(--tnd-borde-2);
    border-radius: var(--tnd-radio);
    text-align: center;
}

.tnd-sin-resultados svg { color: var(--tnd-tenue); margin-bottom: .5rem; }

.tnd-sin-resultados h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tnd-texto);
}

.tnd-sin-resultados p {
    margin: 0;
    font-size: .9rem;
    color: var(--tnd-suave);
}

.tnd-sin-resultados button {
    margin-top: .6rem;
    padding: .6rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: var(--tnd-naranja);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.tnd-sin-resultados button:hover { background: var(--color-primary-dark); }

/* ══════════════════════════════════════════════════════════
   Movil: boton flotante y panel
   ══════════════════════════════════════════════════════════ */

.tnd-movil-btn {
    position: fixed;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    z-index: 900;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55);
    cursor: pointer;
}

html.dark .tnd-movil-btn { background: var(--color-primary); }

.tnd-movil-btn .tnd-marcador { background: var(--color-primary); }
html.dark .tnd-movil-btn .tnd-marcador { background: #fff; color: var(--color-primary); }

.tnd-movil-panel {
    position: fixed;
    inset: 0 0 0 auto;
    /* En iOS un fijo se ancla al viewport chico: al esconderse la barra de
       Safari queda una franja abajo por la que se ve la pagina, y el pie del
       panel se va fuera de pantalla. `dvh` sigue al viewport de verdad. */
    height: 100dvh;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    width: min(88vw, 380px);
    background: var(--tnd-panel);
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .5);
    transform: translateX(100%);
    transition: transform .3s ease;
}

.tnd-movil-panel.open { transform: translateX(0); }

.tnd-movil-panel .tnd-panel {
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.tnd-movil-fondo {
    position: fixed;
    inset: 0;
    height: 100dvh;
    z-index: 1050;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.tnd-movil-fondo.open { opacity: 1; visibility: visible; }

.tnd-movil-pie {
    display: flex;
    gap: .6rem;
    padding: .9rem 1.1rem;
    border-top: 1px solid var(--tnd-borde);
    background: var(--tnd-panel);
}

.tnd-movil-pie button {
    flex: 1 1 0;
    padding: .7rem 1rem;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.tnd-movil-pie .tnd-btn-suave {
    border: 1px solid var(--tnd-borde-2);
    background: var(--tnd-panel);
    color: var(--tnd-texto);
}

.tnd-movil-pie .tnd-btn-fuerte {
    border: 0;
    background: var(--tnd-naranja);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════
   Paginacion (reutiliza el componente, con piel propia)
   ══════════════════════════════════════════════════════════ */

.tnd .pgn-wrap {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tnd-borde);
}

.tnd .pgn-context,
.tnd .pgn-context-sep { color: var(--tnd-suave) !important; }
.tnd .pgn-context strong { color: var(--tnd-texto) !important; }

.tnd .pgn-btn,
.tnd .pgn-num {
    border-color: var(--tnd-borde-2) !important;
    background: var(--tnd-panel) !important;
    color: var(--tnd-texto) !important;
}

.tnd .pgn-btn:hover:not(.pgn-disabled),
.tnd .pgn-num:hover:not(.pgn-active) {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Naranja de marca: es el numero de la pagina en la que estas */
.tnd .pgn-num.pgn-active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   Esqueleto (misma estructura que la grilla nueva)
   ══════════════════════════════════════════════════════════ */

.tnd-esqueleto {
    display: grid;
    grid-template-columns: repeat(var(--tnd-columnas, 4), minmax(0, 1fr));
    gap: 1rem;
}

.tnd-esq-tarjeta {
    background: var(--tnd-panel);
    border: 1px solid var(--tnd-borde);
    border-radius: var(--tnd-radio);
    overflow: hidden;
}

.tnd-esq-foto { aspect-ratio: 1 / 1; background: var(--tnd-marco); }

.tnd-esq-linea {
    height: 10px;
    margin: .75rem .95rem;
    border-radius: 99px;
    background: var(--tnd-marco);
}

.tnd-esq-linea--corta { width: 40%; }
.tnd-esq-linea--alta { height: 16px; width: 55%; }

.tnd-esqueleto .tnd-esq-tarjeta,
.tnd-esq-foto,
.tnd-esq-linea {
    animation: tnd-latido 1.4s ease-in-out infinite;
}

@keyframes tnd-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* ══════════════════════════════════════════════════════════
   Pantallas
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .tnd-grilla,
    .tnd-esqueleto { --tnd-columnas: 4; }
}

@media (max-width: 1150px) {
    .tnd-grilla:not(.es-lista),
    .tnd-esqueleto { --tnd-columnas: 3 !important; }
}

@media (max-width: 900px) {
    .tnd-layout { grid-template-columns: 1fr; }
    .tnd-lateral { display: none; }
    .tnd-movil-btn { display: flex; }
    .tnd-grilla:not(.es-lista),
    .tnd-esqueleto { --tnd-columnas: 2 !important; }
    .tnd-productos { padding-bottom: 5rem; }
}

@media (max-width: 640px) {
    .tnd { padding-top: 1rem; }

    .tnd-grilla { gap: .7rem; }
    .tnd-esqueleto { gap: .7rem; }

    .tnd-barra {
        gap: .5rem;
        padding: .6rem .7rem;
    }

    .tnd-barra__cuenta { font-size: .82rem; }
    .tnd-orden select { font-size: .8rem; padding: .45rem 1.8rem .45rem .6rem; }

    /* La densidad no se ofrece en telefono: manda el ancho */
    .tnd-densidad { display: none; }

    .tnd-datos { padding: .7rem .75rem 0; }
    .tnd-precio { padding: .45rem .75rem .2rem; }
    .tnd-accion { padding: .6rem .75rem .75rem; }
    .tnd-nombre { font-size: .88rem; }
    .tnd-precio__ahora { font-size: 1.02rem; }

    /* En lista, el telefono apila foto y datos */
    .es-lista .tnd-foto { width: 110px; }
    .es-lista .tnd-precio { padding: .7rem .75rem; }
    .es-lista .tnd-accion { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tnd-tarjeta,
    .tnd-tarjeta:hover,
    .tnd-foto img.product-image-minimal,
    .tnd-tarjeta:hover .tnd-foto img.product-image-minimal {
        transform: none;
        transition: none;
    }
    .tnd-esqueleto .tnd-esq-tarjeta,
    .tnd-esq-foto,
    .tnd-esq-linea { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   Listas que pinta filter.js

   Las marcas y las subcategorias las dibuja public/js/filter.js con su propia
   estructura (.flt-check-*), compartida con el diseño anterior. No se toca ese
   archivo: se le da aqui el aspecto de esta piel.

   Cada regla se repite para .tnd-movil-panel porque el panel del telefono
   cuelga del <body>, fuera de .tnd: sin esa copia sus casillas de marcas y
   subcategorias salian sin estilo, distintas a las de Estado.
   ══════════════════════════════════════════════════════════ */

.tnd .flt-check-label,
.tnd-movil-panel .flt-check-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem .45rem;
    border-radius: 9px;
    font-size: .86rem;
    color: var(--tnd-texto);
    cursor: pointer;
    transition: background-color .15s ease;
}

.tnd .flt-check-label:hover,
.tnd-movil-panel .flt-check-label:hover { background: var(--tnd-marco); }

.tnd .flt-check-input,
.tnd-movil-panel .flt-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tnd .flt-check-box,
.tnd-movil-panel .flt-check-box {
    position: relative;
    flex: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--tnd-borde-2);
    border-radius: 5px;
    background: var(--tnd-panel);
    transition: background-color .15s ease, border-color .15s ease;
}

.tnd .flt-check-box::after,
.tnd-movil-panel .flt-check-box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}

.tnd .flt-check-input:checked + .flt-check-box,
.tnd-movil-panel .flt-check-input:checked + .flt-check-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.tnd .flt-check-input:checked + .flt-check-box::after,
.tnd-movil-panel .flt-check-input:checked + .flt-check-box::after { transform: rotate(45deg) scale(1); }

.tnd .flt-check-input:focus-visible + .flt-check-box,
.tnd-movil-panel .flt-check-input:focus-visible + .flt-check-box {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .25);
}

.tnd .flt-check-text,
.tnd-movil-panel .flt-check-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnd .flt-brand-count,
.tnd-movil-panel .flt-brand-count {
    flex: none;
    font-size: .74rem;
    font-weight: 600;
    color: var(--tnd-tenue);
}

.tnd .flt-subcat-empty,
.tnd-movil-panel .flt-subcat-empty {
    margin: .3rem 0;
    font-size: .82rem;
    color: var(--tnd-tenue);
}

/* ══════════════════════════════════════════════════════════
   Cabecera

   Una franja baja: a la izquierda el titulo y la bajada (recortada a dos
   lineas, el texto entero sigue en el HTML para el buscador) y a la derecha las
   cifras de lo que se esta viendo. filter.js la reemplaza entera en cada
   filtrado, asi que los numeros se actualizan solos.
   ══════════════════════════════════════════════════════════ */

.tnd-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .7rem 2rem;
    margin-bottom: 1rem;
    padding: 0 0 .8rem;
    border-bottom: 1px solid var(--tnd-borde);
}

.tnd-cabecera__texto {
    flex: 1 1 380px;
    min-width: 0;
}

.tnd-cabecera__rubro {
    display: block;
    margin-bottom: .25rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--tnd-tenue);
}

.tnd-cabecera__titulo {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.6px;
    line-height: 1.15;
    color: var(--tnd-texto);
}

.tnd-cabecera__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: .35rem 0 0;
    max-width: 78ch;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--tnd-suave);
}

/* ── Cifras ── */

.tnd-cabecera__cifras {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tnd-cabecera__cifras li {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-size: .8rem;
    color: var(--tnd-suave);
    white-space: nowrap;
}

.tnd-cabecera__cifras strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--tnd-texto);
    font-variant-numeric: tabular-nums;
}

/* La primera cifra es la que manda: cuantos productos hay a la vista.
   Naranja quemado y no --color-primary: a 16px en negrita, el naranja de marca
   sobre blanco se queda en 2,8:1. */
.tnd-cabecera__cifras li:first-child strong { color: #c2410c; }
html.dark .tnd-cabecera__cifras li:first-child strong { color: #fb923c; }

/* Entrega inmediata en verde y con forma de chip: es lo que decide la compra */
.tnd-cabecera__cifras li.es-chip {
    padding: .22rem .7rem .22rem .6rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, .13);
    color: #047857;
    font-weight: 600;
}

.tnd-cabecera__cifras li.es-chip strong {
    font-size: .95rem;
    color: inherit;
}

.tnd-cabecera__cifras li.es-chip svg { flex: none; }

html.dark .tnd-cabecera__cifras li.es-chip {
    background: rgba(16, 185, 129, .18);
    color: #6ee7b7;
}

@media (max-width: 760px) {
    .tnd-cabecera {
        align-items: flex-start;
        gap: .7rem;
        padding-bottom: .85rem;
    }

    .tnd-cabecera__desc {
        -webkit-line-clamp: 3;
        font-size: .84rem;
    }

    .tnd-cabecera__cifras { gap: .3rem 1rem; }
    .tnd-cabecera__cifras strong { font-size: 1rem; }
    .tnd-cabecera__cifras li { font-size: .76rem; }
}

/* ══════════════════════════════════════════════════════════
   Enlaces dentro de la tarjeta

   La foto y el nombre son los dos enlaces al producto; el favorito, el codigo
   y "Agregar" quedan fuera de ellos para no anidar botones dentro de un <a>.
   ══════════════════════════════════════════════════════════ */

.tnd-foto__enlace {
    display: block;
    width: 100%;
    height: 100%;
}

.tnd-nombre-enlace {
    text-decoration: none;
    color: inherit;
}

.tnd-nombre-enlace:hover .tnd-nombre { color: var(--color-primary); }

/* Miniaturas de la galeria: el CSS base vive en home-minimal.css y se muestra
   al pasar el mouse por .product-card-minimal, clase que esta tarjeta no usa.
   Los selectores cuelgan de .tnd-tarjeta y no de .tnd porque la tarjeta
   tambien se usa fuera de la tienda. */
.tnd-tarjeta:hover .card-thumbs {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

html.dark .tnd-tarjeta .card-thumbs { background: rgba(23, 32, 51, .85); }

html.dark .tnd-tarjeta .favorite-btn-card svg { color: inherit; }

/* ══════════════════════════════════════════════════════════
   Esqueleto de pagina

   Clases propias para no chocar con las de la tienda real: son dos copias de
   la misma forma viviendo a la vez en el documento.
   ══════════════════════════════════════════════════════════ */

.tnd-esq-layout {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.tnd-esq-panel {
    padding-bottom: .6rem;
    background: var(--tnd-panel);
    border: 1px solid var(--tnd-borde);
    border-radius: var(--tnd-radio);
    box-shadow: var(--tnd-sombra);
    overflow: hidden;
}

.tnd-esq-panel__cabeza {
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--tnd-borde);
}

.tnd-esq-grupo {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--tnd-borde);
}

.tnd-esq-grupo:last-child { border-bottom: 0; }

.tnd-esq-barra {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    background: var(--tnd-panel);
    border: 1px solid var(--tnd-borde);
    border-radius: 14px;
    box-shadow: var(--tnd-sombra);
}

@media (max-width: 900px) {
    .tnd-esq-layout { grid-template-columns: 1fr; }
    .tnd-esq-lateral { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Grillas de fuera de la tienda

   La misma tarjeta, en el inicio y donde haga falta. Van aparte porque alli
   no hay panel lateral al lado y cabe una columna mas que en la tienda.

   Los cortes son 6, 3 y 2: los mismos que tenia el inicio con Tailwind
   (grid-cols-2 sm:grid-cols-3 lg:grid-cols-6) y los unicos que dividen los 6
   productos que se muestran. Con 5 o 4 columnas la ultima fila queda coja.

   Los selectores repiten la clase para empatar en peso con
   .tnd-grilla:not(.es-lista) de arriba, que usa !important; como van despues,
   ganan por orden.
   ══════════════════════════════════════════════════════════ */

.tnd-grilla.tnd-grilla--suelta,
.tnd-esqueleto.tnd-esqueleto--suelta { --tnd-columnas: 6; }

@media (max-width: 1023px) {
    .tnd-grilla.tnd-grilla--suelta,
    .tnd-esqueleto.tnd-esqueleto--suelta { --tnd-columnas: 3 !important; }
}

@media (max-width: 639px) {
    .tnd-grilla.tnd-grilla--suelta,
    .tnd-esqueleto.tnd-esqueleto--suelta { --tnd-columnas: 2 !important; gap: .7rem; }
}