/* =============================================================================
   Catálogo de monturas  (/lentes, /lentes-de-sol, /lentes-deportivos)
   y de lentes de contacto  (/lentes-de-contacto)

   CSS EXCLUSIVO de estos catálogos. Todo vive bajo el prefijo "cat-" y no reutiliza ni
   modifica las clases legacy de style_main.scss (las comparten Accesorios, la ficha de
   producto y el resto de páginas). Solo se carga desde web/montura/catalogo.blade.php
   y web/lentesContacto/index.blade.php.

   Contenido
     1. Tokens (color, forma, espaciado) y layout por breakpoint
     2. Shell y contenedor de resultados
     3. Panel de filtros: sidebar sticky (>=768px) / drawer (<768px)
     4. Acordeones y opciones (checkbox, radio, swatches, tamaños)
     5. Probador virtual dentro del panel
     6. Barra superior: contador, ordenar, vista y chips
     7. Barra móvil y fondo del drawer
     8. Grilla de productos
     9. Tarjeta de producto (escala con container queries)
    10. Catálogo de lentes de contacto (variantes de opciones y tarjeta)
    11. Utilidades
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------------------------- */
.cat-shell {
    /* color */
    --cat-primary: var(--bs-primary, #2846f9);
    --cat-primary-hover: #1a34c9;
    --cat-primary-soft: #eef1ff;
    --cat-ink: #1f2430;
    --cat-ink-soft: #4a5062;
    --cat-muted: #7b8194;
    --cat-line: #e4e7f3;
    --cat-line-strong: #c9cee6;
    --cat-surface: #fff;
    --cat-surface-soft: #f6f7ff;
    --cat-sale: #e3192b;

    /* forma */
    --cat-r-sm: 6px;
    --cat-r-md: 10px;
    --cat-r-lg: 14px;
    --cat-r-pill: 999px;
    --cat-shadow-lift: 0 8px 24px rgb(40 70 249 / 14%);

    /* espaciado (escala) */
    --cat-s1: 0.25rem;
    --cat-s2: 0.5rem;
    --cat-s3: 0.75rem;
    --cat-s4: 1rem;
    --cat-s5: 1.5rem;
    --cat-s6: 2rem;

    /* movimiento */
    --cat-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --cat-t: 0.18s;

    /* botones (la tarjeta los redefine para que escalen con su ancho) */
    --c-btn-h: 2.75rem;
    --c-fs-btn: 0.9rem;

    /* layout: móvil (<768) */
    --cat-cols: 2;
    --cat-gutter: 12px;
    --cat-gap-x: 12px;
    --cat-gap-y: 16px;
    --cat-col-gap: 0px;
    --cat-sidebar-w: 0px;

    box-sizing: border-box;
    max-width: 1760px;
    margin-inline: auto;
    padding: 0 var(--cat-gutter) var(--cat-s6); /* en móvil la barra sticky va pegada arriba */
    color: var(--cat-ink);
    font-family: inherit;
}

/* El atributo hidden debe ganarle a los display de las clases de abajo */
.cat-shell [hidden] {
    display: none !important;
}

/* Pantallas muy angostas (<= 340px: iPhone SE 1ª gen, plegables cerrados): dos columnas de ~140px no alcanzan para
   leer el nombre y tocar los botones, así que la grilla pasa a una columna. A 360px (2 columnas de ~162px) se ve bien. */
@media (max-width: 340px) {
    .cat-shell {
        --cat-cols: 1;
    }
}

/* Tablet (768-1023): sidebar angosto, 2 columnas */
@media (min-width: 768px) {
    .cat-shell {
        --cat-cols: 2;
        --cat-gutter: 16px;
        --cat-gap-x: 16px;
        --cat-gap-y: 20px;
        --cat-col-gap: 16px;
        --cat-sidebar-w: clamp(200px, 27vw, 220px);

        padding-top: var(--cat-s5);
    }
}

/* Laptop (1024-1439): 3 columnas */
@media (min-width: 1024px) {
    .cat-shell {
        --cat-cols: 3;
        --cat-gutter: 24px;
        --cat-gap-x: 20px;
        --cat-gap-y: 28px;
        --cat-col-gap: 24px;
        --cat-sidebar-w: clamp(240px, 22vw, 260px);
    }
}

/* Escritorio grande (>=1440): 4 columnas, contenido acotado a 1760px */
@media (min-width: 1440px) {
    .cat-shell {
        --cat-cols: 4;
        --cat-gutter: 32px;
        --cat-gap-x: 24px;
        --cat-gap-y: 32px;
        --cat-col-gap: 32px;
        --cat-sidebar-w: clamp(280px, 20vw, 300px);
    }
}

.cat-shell *,
.cat-shell *::before,
.cat-shell *::after {
    box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
   2. Shell y contenedor de resultados
   ----------------------------------------------------------------------------- */
.cat-main {
    min-width: 0; /* un hijo de grid no debe ensanchar la columna */
}

/* Reserva alto para que la página no colapse mientras se (re)cargan los resultados */
.cat-results {
    position: relative;
    min-height: max(70vh, 30rem);
}

.cat-sentinel {
    width: 100%;
    height: 1px;
}

/* Con sidebar: dos columnas (>= 768px) */
@media (min-width: 768px) {
    .cat-shell {
        display: grid;
        grid-template-columns: var(--cat-sidebar-w) minmax(0, 1fr);
        column-gap: var(--cat-col-gap);
        align-items: start;
    }

    /* "Ocultar filtros": la grilla ocupa todo el ancho y gana una columna */
    .cat-shell.is-filters-hidden {
        grid-template-columns: minmax(0, 1fr);
        --cat-cols: 3;
    }
}

@media (min-width: 1024px) {
    .cat-shell.is-filters-hidden {
        --cat-cols: 4;
    }
}

@media (min-width: 1440px) {
    .cat-shell.is-filters-hidden {
        --cat-cols: 5;
    }
}

.cat-shell a {
    text-decoration: none;
}


/* -----------------------------------------------------------------------------
   3. Panel de filtros
   Un solo marcado con dos presentaciones: sidebar sticky (>= 768px) y drawer (< 768px, sección 7).
   ----------------------------------------------------------------------------- */
.cat-filters {
    min-width: 0;
    color: var(--cat-ink);
    background: var(--cat-surface);
}

.cat-filters__head,
.cat-filters__foot {
    display: none; /* solo existen en el drawer */
}

.cat-filters__scroll {
    min-height: 0;
}

@media (min-width: 768px) {
    /* pegado bajo el header (su alto lo mide catalogo-filtros.js) y con scroll propio para no empujar la página */
    .cat-filters {
        position: sticky;
        top: calc(var(--cat-header-h, 84px) + 12px);
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--cat-header-h, 84px) - 24px);
        max-height: calc(100dvh - var(--cat-header-h, 84px) - 24px);
    }

    .cat-filters__scroll {
        flex: 1 1 auto;
        padding-right: 0.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--cat-line-strong) transparent;
    }

    .cat-shell.is-filters-hidden .cat-filters {
        display: none;
    }
}

.cat-close {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cat-ink);
    cursor: pointer;
}

.cat-close:hover {
    background: var(--cat-surface-soft);
}


/* -----------------------------------------------------------------------------
   4. Acordeones y opciones
   ----------------------------------------------------------------------------- */
.cat-acc {
    border-bottom: 1px solid var(--cat-line);
}

.cat-acc--sub {
    margin-left: 0.5rem;
    border-bottom: 0;
}

.cat-acc__h {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.cat-acc__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.7rem 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--cat-ink);
    text-align: left;
    cursor: pointer;
}

.cat-acc__title {
    flex: 1 1 auto;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
}

.cat-acc--sub .cat-acc__title {
    font-size: 0.9rem;
    font-weight: 600;
}

.cat-acc__count {
    flex: none;
    min-width: 1.4em;
    padding: 0 0.45em;
    border-radius: var(--cat-r-pill);
    background: var(--cat-primary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    text-align: center;
}

.cat-acc__chev {
    flex: none;
    color: var(--cat-ink-soft);
    transition: transform 0.2s var(--cat-ease);
}

.cat-acc.is-open > .cat-acc__h .cat-acc__chev {
    transform: rotate(180deg);
}

/* abre/cierra animando la altura (grid 0fr -> 1fr); cerrado, además, visibility:hidden saca las opciones del orden de tabulación */
.cat-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
}

.cat-acc.is-open > .cat-acc__panel {
    grid-template-rows: 1fr;
    visibility: visible;
}

.cat-filters.is-ready .cat-acc__panel {
    transition: grid-template-rows 0.22s var(--cat-ease), visibility 0s linear 0.22s;
}

.cat-filters.is-ready .cat-acc.is-open > .cat-acc__panel {
    transition: grid-template-rows 0.22s var(--cat-ease), visibility 0s linear 0s;
}

.cat-acc__inner {
    min-height: 0;
    overflow: hidden;
}

.cat-acc__inner > :last-child {
    margin-bottom: 1rem;
}

.cat-acc__inner :focus-visible {
    outline-offset: -2px; /* el contenedor recorta el anillo de foco: se dibuja hacia adentro */
}

/* --- opciones tipo checkbox / radio (son <a href>) --- */
.cat-opts {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cat-opt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.25rem;
    margin-inline: -0.4rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--cat-r-sm);
    color: var(--cat-ink);
    cursor: pointer;
    transition: background-color var(--cat-t) var(--cat-ease);
}

.cat-opt:hover {
    background: var(--cat-surface-soft);
    color: var(--cat-ink);
}

.cat-opt__box {
    position: relative;
    display: block;
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid var(--cat-line-strong);
    border-radius: 4px;
    background: #fff;
    transition: background-color var(--cat-t) var(--cat-ease), border-color var(--cat-t) var(--cat-ease);
}

.cat-opt__box--radio {
    border-radius: 50%;
}

.cat-opt__box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0.3rem;
    height: 0.58rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform 0.12s var(--cat-ease);
}

.cat-opt__box--radio::after {
    top: 50%;
    width: 0.48rem;
    height: 0.48rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0);
}

.cat-opt.is-active .cat-opt__box {
    border-color: var(--cat-primary);
    background: var(--cat-primary);
}

.cat-opt.is-active .cat-opt__box::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.cat-opt.is-active .cat-opt__box--radio::after {
    transform: translate(-50%, -50%) scale(1);
}

.cat-opt__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cat-opt__name {
    font-size: 0.9rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cat-opt.is-active .cat-opt__name {
    font-weight: 600;
}

.cat-opt__sub {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--cat-muted);
}

/* --- color: swatches circulares con su nombre debajo --- */
.cat-opts--swatch {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
    gap: 0.4rem 0.25rem;
}

.cat-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.2rem;
    border-radius: var(--cat-r-md);
    color: var(--cat-ink);
    text-align: center;
    transition: background-color var(--cat-t) var(--cat-ease);
}

.cat-swatch:hover {
    background: var(--cat-surface-soft);
    color: var(--cat-ink);
}

.cat-swatch__dot {
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cat-surface-soft);
    box-shadow: 0 0 0 1px var(--cat-line-strong);
    transition: box-shadow var(--cat-t) var(--cat-ease);
}

.cat-swatch__dot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-swatch.is-active .cat-swatch__dot {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cat-primary);
}

.cat-swatch__name {
    font-size: 0.72rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.cat-swatch.is-active .cat-swatch__name {
    font-weight: 700;
    color: var(--cat-primary);
}

/* --- tamaño: ilustración de la medida + sus tres rangos --- */
.cat-size__img {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
    margin: 0.1rem 0 0.4rem;
}

/* --- "Ver más" y enlaces de ayuda --- */
.cat-more {
    display: inline-flex;
    margin-top: 0.35rem;
    padding: 0.35rem 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cat-primary);
    cursor: pointer;
}

.cat-more:hover {
    text-decoration: underline;
}

.cat-linkcta {
    display: block;
    margin-top: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cat-primary);
}

.cat-linkcta:hover {
    color: var(--cat-primary-hover);
    text-decoration: underline;
}

/* --- SALE y Favoritos --- */
.cat-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--cat-line);
}

.cat-quick__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0 0.5rem;
    border: 1.5px solid var(--cat-line-strong);
    border-radius: var(--cat-r-md);
    background: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cat-ink);
    transition: background-color var(--cat-t) var(--cat-ease), border-color var(--cat-t) var(--cat-ease), color var(--cat-t) var(--cat-ease);
}

.cat-quick__item:hover {
    border-color: var(--cat-primary);
    color: var(--cat-primary);
}

.cat-quick__item--sale {
    color: var(--cat-sale);
    letter-spacing: 0.04em;
}

.cat-quick__item--sale:hover {
    border-color: var(--cat-sale);
    color: var(--cat-sale);
}

.cat-quick__item.active {
    border-color: var(--cat-primary);
    background: var(--cat-primary-soft);
    color: var(--cat-primary);
}

.cat-quick__item--sale.active {
    border-color: var(--cat-sale);
    background: var(--cat-sale);
    color: #fff;
}

.cat-quick__item--fav.active svg {
    fill: currentColor;
}

.cat-quick .countFavoritos {
    font-weight: 400;
}

@media (max-width: 1023px), (pointer: coarse) {
    .cat-opt,
    .cat-acc__btn,
    .cat-more,
    .cat-linkcta {
        min-height: 2.75rem;
    }

    .cat-opt {
        padding-block: 0.4rem;
    }

    .cat-quick__item {
        min-height: 2.75rem;
    }
}


/* -----------------------------------------------------------------------------
   5. Probador virtual dentro del panel
   Los ids y clases que usa probadorVirtual/probadorCatalogo.blade.php se conservan; el JS alterna
   style.display entre #probadorDeFoto, #probadorSubirFoto y #probadorFotoSubida.
   ----------------------------------------------------------------------------- */
.cat-probador {
    min-height: 3.9rem; /* reserva el alto del botón: el bloque no salta cuando el JS cambia de estado */
    padding: 0 0 1rem;
}

.cat-probador__cta {
    display: block;
    line-height: 0;
}

.cat-probador__cta img {
    display: block;
    width: 100%;
    max-width: 208px;
    height: auto;
}

.cat-probador .probador-subir-foto {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: auto;
    padding: 0.6rem;
    border: 1px solid var(--cat-line);
    border-radius: var(--cat-r-md);
    background: var(--cat-surface-soft);
}

.cat-probador__models {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
}

.cat-probador .probadorListModels {
    display: flex;
    flex: 1 1 auto;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
    padding: 0.2rem 0;
    overflow-x: auto;
    list-style: none;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cat-probador .probadorListModels::-webkit-scrollbar {
    display: none;
}

.cat-probador .probadorListModels li {
    flex: none;
    margin: 0;
    cursor: pointer;
}

.cat-probador .probadorListModels li::before {
    display: none; /* sin la barrita inferior del estilo antiguo: el activo se marca con un aro */
}

.cat-probador .probadorListModels li img {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid transparent;
    border-radius: 50%;
    object-fit: cover;
    transition: border-color var(--cat-t) var(--cat-ease);
}

.cat-probador .probadorListModels li:hover img {
    border-color: var(--cat-line-strong);
}

.cat-probador .probadorListModels li.active img {
    border-color: var(--cat-primary);
}

.cat-probador .btn-scroll-modelos {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cat-primary);
    cursor: pointer;
}

.cat-probador__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cat-probador__actions .cat-btn {
    flex: 1 1 auto;
}

.cat-probador .probador-foto-subida {
    display: flex;
}

.cat-probador .probador-foto-subida .cat-btn {
    width: 100%;
}


/* -----------------------------------------------------------------------------
   6. Barra superior: contador, ordenar, vista y chips
   ----------------------------------------------------------------------------- */
.cat-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    min-height: 3.1rem;
    padding: 0 0 var(--cat-s3);
}

.cat-count {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--cat-ink-soft);
}

.cat-toolbar__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.cat-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border: 1.5px solid var(--cat-line-strong);
    border-radius: var(--cat-r-md);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.1;
    color: var(--cat-ink);
    cursor: pointer;
    transition: border-color var(--cat-t) var(--cat-ease), background-color var(--cat-t) var(--cat-ease);
}

.cat-tool:hover {
    border-color: var(--cat-primary);
}

/* --- ordenar por: botón con aspecto de select compacto + menú de links --- */
.cat-sort {
    position: relative;
}

.cat-sort__label {
    color: var(--cat-ink-soft);
}

.cat-sort__value {
    font-weight: 700;
}

.cat-sort__chev {
    flex: none;
    transition: transform 0.18s var(--cat-ease);
}

.cat-sort.is-open .cat-sort__chev {
    transform: rotate(180deg);
}

.cat-sort__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 13.5rem;
    padding: 0.35rem;
    border: 1px solid var(--cat-line);
    border-radius: var(--cat-r-md);
    background: #fff;
    box-shadow: 0 10px 30px rgb(20 30 80 / 16%);
}

.cat-sort__heading,
.cat-sort__views {
    display: none; /* solo en la hoja móvil (sección 7) */
}

.cat-sort__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--cat-r-sm);
    font-size: 0.9rem;
    color: var(--cat-ink);
}

.cat-sort__item:hover {
    background: var(--cat-surface-soft);
    color: var(--cat-ink);
}

.cat-sort__item.is-active {
    font-weight: 700;
    color: var(--cat-primary);
}

.cat-sort__item.is-active::after {
    content: "";
    flex: none;
    width: 0.32rem;
    height: 0.65rem;
    margin-right: 0.2rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- vista frontal / perfil --- */
.cat-view {
    display: inline-flex;
    overflow: hidden;
    border: 1.5px solid var(--cat-line-strong);
    border-radius: var(--cat-r-md);
}

.cat-view__item {
    display: grid;
    place-items: center;
    width: 3.1rem;
    min-height: 2.2rem;
    background: #fff;
    transition: background-color var(--cat-t) var(--cat-ease);
}

.cat-view__item + .cat-view__item {
    border-left: 1px solid var(--cat-line);
}

.cat-view__item img {
    display: block;
    width: 2rem;
    height: auto;
    opacity: 0.5;
    transition: opacity var(--cat-t) var(--cat-ease);
}

.cat-view__item:hover img {
    opacity: 0.85;
}

.cat-view__item.active {
    background: var(--cat-primary-soft);
}

.cat-view__item.active img {
    opacity: 1;
}

/* --- chips de filtros aplicados --- */
.cat-chips__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--cat-s4);
    padding: 0;
    list-style: none;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0 0.5rem 0 0.85rem;
    border: 0; /* también se usa como <button> (catálogo de lentes de contacto, sin URL) */
    border-radius: var(--cat-r-pill);
    background: var(--cat-primary-soft);
    font-family: inherit;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--cat-primary);
    transition: background-color var(--cat-t) var(--cat-ease);
}

.cat-chip:hover {
    background: #dfe5ff;
    color: var(--cat-primary-hover);
}

/* los nombres vienen de la BD en minúscula ("negro"): se muestran con la primera letra en mayúscula */
.cat-chip > span::first-letter,
.cat-swatch__name::first-letter {
    text-transform: uppercase;
}

.cat-chip svg {
    flex: none;
    padding: 0.25rem;
    box-sizing: content-box;
    border-radius: 50%;
}

.cat-chip:hover svg {
    background: rgb(40 70 249 / 14%);
}

.cat-chips__clear {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.4rem;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cat-ink);
    text-decoration: underline !important;
}

.cat-chips__clear:hover {
    color: var(--cat-primary);
}

/* tablet / móvil / pantallas táctiles: todo lo tocable mide al menos 44px */
@media (max-width: 1023px), (pointer: coarse) {
    .cat-chip,
    .cat-chips__clear,
    .cat-tool,
    .cat-close {
        min-height: 2.75rem;
    }

    .cat-close {
        min-width: 2.75rem;
    }

    .cat-view__item {
        min-height: calc(2.75rem - 3px);
    }

    .cat-sort__item {
        min-height: 2.75rem;
    }
}


/* -----------------------------------------------------------------------------
   7. Barra móvil (< 768px): "Filtrar (n)" y "Ordenar" sticky bajo el header, drawer y hoja inferior
   ----------------------------------------------------------------------------- */
.cat-mobilebar,
.cat-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .cat-mobilebar {
        position: sticky;
        top: var(--cat-header-h, 53px);
        z-index: 40;
        display: flex;
        gap: 0.5rem;
        margin: 0 calc(var(--cat-gutter) * -1) var(--cat-s3);
        padding: 0.5rem var(--cat-gutter);
        border-bottom: 1px solid var(--cat-line);
        background: #fff;
    }

    .cat-mbtn {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 2.75rem;
        padding: 0 0.75rem;
        border: 1.5px solid var(--cat-line-strong);
        border-radius: var(--cat-r-md);
        background: #fff;
        font: inherit;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.1;
        color: var(--cat-ink);
        cursor: pointer;
    }

    .cat-mbtn svg {
        flex: none;
    }

    .cat-mbtn--icon {
        flex: none;
        width: 2.75rem;
        padding: 0;
    }

    .cat-mbtn__count {
        font-weight: 700;
        color: var(--cat-primary);
    }

    /* la barra superior en móvil solo deja el contador; "Ordenar" abre la hoja desde la barra sticky */
    .cat-toolbar {
        min-height: 2.4rem;
        padding-bottom: var(--cat-s2);
    }

    .cat-toolbar__tools > :not(.cat-sort) {
        display: none;
    }

    .cat-sort {
        display: contents;
    }

    .cat-sort__btn {
        display: none;
    }

    /* --- drawer de filtros: panel lateral a pantalla completa de alto --- */
    .cat-filters {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1055;
        display: flex;
        flex-direction: column;
        width: min(92vw, 26rem);
        height: 100vh;
        height: 100dvh;
        background: #fff;
        box-shadow: 8px 0 32px rgb(0 0 0 / 22%);
        transform: translateX(-102%);
        visibility: hidden;
    }

    .cat-filters.is-ready {
        transition: transform 0.28s var(--cat-ease), visibility 0s linear 0.28s;
    }

    .cat-filters.is-open {
        transform: none;
        visibility: visible;
    }

    .cat-filters.is-ready.is-open {
        transition: transform 0.28s var(--cat-ease), visibility 0s linear 0s;
    }

    .cat-filters__head {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        padding: 0.4rem 0.75rem 0.4rem 1.1rem;
        border-bottom: 1px solid var(--cat-line);
    }

    .cat-filters__title {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--cat-ink);
    }

    .cat-filters__scroll {
        flex: 1 1 auto;
        padding: 1rem 1.1rem 0.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .cat-filters__foot {
        display: flex;
        flex: none;
        gap: 0.6rem;
        padding: 0.75rem 1.1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--cat-line);
        background: #fff;
    }

    .cat-filters__foot .cat-btn {
        flex: 1 1 0;
        min-height: 3rem;
        font-size: 1rem;
    }

    .cat-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1050;
        display: block;
        background: rgb(15 20 40 / 52%);
    }

    /* --- hoja inferior de "Ordenar y vista" --- */
    .cat-sort__menu {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1055;
        min-width: 0;
        max-height: 80vh;
        max-height: 80dvh;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        border: 0;
        border-radius: var(--cat-r-lg) var(--cat-r-lg) 0 0;
        box-shadow: 0 -10px 40px rgb(0 0 0 / 24%);
    }

    .cat-sort__heading {
        display: block;
        margin: 0.1rem 0 0.4rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--cat-ink);
    }

    .cat-sort__heading--view {
        margin-top: 1rem;
    }

    .cat-sort__item {
        min-height: 3rem;
        padding: 0 0.75rem;
        font-size: 1rem;
    }

    .cat-sort__views {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .cat-sort__item--view {
        justify-content: center;
        border: 1.5px solid var(--cat-line-strong);
    }

    .cat-sort__item--view.active {
        border-color: var(--cat-primary);
        background: var(--cat-primary-soft);
        font-weight: 700;
        color: var(--cat-primary);
    }
}

/* mientras el drawer o la hoja están abiertos no se scrollea la página de atrás */
html.cat-lock {
    overflow: hidden;
}


/* -----------------------------------------------------------------------------
   8. Grilla de productos
   Columnas explícitas por breakpoint (--cat-cols) en vez de auto-fill: auto-fill no
   puede garantizar a la vez 4 / 3 / 2 columnas en todos los anchos.
   ----------------------------------------------------------------------------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(var(--cat-cols), minmax(0, 1fr));
    gap: var(--cat-gap-y) var(--cat-gap-x);
    margin: 0;
    padding: 0;
}

.cat-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--cat-s6) var(--cat-s4);
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--cat-ink-soft);
}

.cat-empty strong {
    display: block;
    margin-bottom: var(--cat-s2);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cat-ink);
}


/* -----------------------------------------------------------------------------
   9. Tarjeta de producto
   .cat-card es un "container": las medidas internas usan unidades de contenedor (cqi)
   con clamp(), así foto, textos y botones escalan JUNTOS con el ancho de la
   tarjeta (160-375px en todos los anchos de pantalla) y nunca quedan uno gigante y
   otro diminuto. Los tokens se declaran en los hijos directos porque un container no
   puede consultarse a sí mismo.
   ----------------------------------------------------------------------------- */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    container-type: inline-size;
    container-name: cat-card;
    background: var(--cat-surface);
    border: 1px solid var(--cat-line);
    border-radius: var(--cat-r-lg);
    transition: box-shadow var(--cat-t) var(--cat-ease), border-color var(--cat-t) var(--cat-ease);
}

@media (hover: hover) {
    .cat-card:hover {
        border-color: var(--cat-line-strong);
        box-shadow: var(--cat-shadow-lift);
    }
}

.cat-card > * {
    /* respaldo fijo para navegadores sin container queries */
    --c-pad: 0.75rem;
    --c-gap: 0.4rem;
    --c-fs-title: 0.86rem;
    --c-fs-sub: 0.78rem;
    --c-fs-price: 0.95rem;
    --c-fs-small: 0.7rem;
    --c-fs-btn: 0.85rem;
    --c-btn-h: 2.6rem;
    --c-fav: 2.25rem;
    --c-inset: 0.55rem;
}

/* Los mínimos y máximos llevan además un piso en px: en pantallas de <= ~330px el sitio reduce el tamaño de fuente
   raíz (16px -> 11,4px) y sin el piso el texto de la tarjeta bajaría a ~9px. Con root de 16px el piso nunca manda. */
@supports (width: 1cqi) {
    .cat-card > * {
        --c-pad: clamp(max(0.5rem, 8px), 4.6cqi, max(0.95rem, 15px));
        --c-gap: clamp(max(0.25rem, 4px), 2.2cqi, max(0.5rem, 8px));
        --c-fs-title: clamp(max(0.78rem, 12px), 0.665rem + 1.163cqi, max(0.94rem, 14px));
        --c-fs-sub: clamp(max(0.7rem, 11px), 0.6rem + 0.95cqi, max(0.82rem, 13px));
        --c-fs-price: clamp(max(0.84rem, 13px), 0.7rem + 1.5cqi, max(1.04rem, 15px));
        --c-fs-small: clamp(max(0.64rem, 10px), 0.55rem + 0.9cqi, max(0.74rem, 11px));
        --c-fs-btn: clamp(max(0.78rem, 12px), 0.66rem + 1.2cqi, max(0.9rem, 13.5px));
        --c-btn-h: clamp(max(2.4rem, 38px), 1.2rem + 9cqi, max(2.9rem, 46px));
        --c-fav: clamp(max(2rem, 32px), 1rem + 8cqi, max(2.5rem, 40px));
        --c-inset: clamp(max(0.4rem, 6px), 3cqi, max(0.7rem, 11px));
    }
}

/* --- media: caja de proporción fija. Las fotos son 1154x404 (2,86:1): en 3:2 el marco
       ocupa todo el ancho y el aire sobrante (arriba/abajo) queda libre para badges y corazón --- */
.cat-card__media {
    position: relative;
    aspect-ratio: 8 / 5;
    border-radius: var(--cat-r-lg) var(--cat-r-lg) 0 0;
    overflow: hidden;
    background: var(--cat-surface);
}

.cat-card__link {
    position: absolute;
    inset: 0;
    display: block;
    padding: var(--c-inset);
    color: inherit;
}

.cat-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* la montura nunca se recorta ni se deforma */
    object-position: 50% 58%; /* un poco más abajo del centro: el corazón y los badges usan el aire de arriba */
}

/* Con el probador activo la foto es el rostro del usuario: conserva su proporción natural
   (el lente se superpone en % sobre .monturaDiv, así que escala con cualquier ancho) */
.cat-card__media--face {
    aspect-ratio: auto;
}

.cat-card__media--face .cat-card__link {
    position: static;
    padding: 0;
}

.cat-card__media--face .monturaDiv {
    position: relative;
    width: 100%;
}

/* --- badges (descuento, luz azul gratis, envío gratis) --- */
.cat-card__badges {
    position: absolute;
    top: var(--c-inset);
    left: var(--c-inset);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--c-inset) * 0.5);
    max-width: calc(100% - var(--c-fav) - var(--c-inset) * 2.5);
    pointer-events: none;
}

.cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.18em 0.6em;
    border-radius: var(--cat-r-pill);
    font-size: var(--c-fs-small);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--cat-primary);
    background: var(--cat-primary-soft);
}

.cat-badge img {
    width: 1.15em;
    height: 1.15em;
    object-fit: contain;
}

.cat-badge--sale {
    color: #fff;
    background: var(--cat-sale);
}

/* --- corazón de favoritos ---
   Hay DOS corazones por tarjeta a propósito (se alterna uno u otro en 1571px):
   GTM (contenedor GTM-WJS6JG7) dispara "clic_favoritos" y el evento de Meta
   "agregado-a-favoritos" por  1) la clase "listado-favorito hidden-md hidden-sm hidden-xs"
   y  2) la URL de imagen "/corazon-sin-colorear" (corazón móvil). Se conservan ambos tal
   cual, con el mismo corte de ancho de siempre, para que el tracking sea idéntico. */
.cat-card .cat-card__fav {
    position: absolute;
    top: var(--c-inset);
    right: var(--c-inset);
    z-index: 3;
    display: none !important;
    width: var(--c-fav);
    height: var(--c-fav);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 92%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 56%;
    box-shadow: 0 1px 4px rgb(20 30 80 / 18%);
    cursor: pointer;
    transform: none;
    transition: transform var(--cat-t) var(--cat-ease), box-shadow var(--cat-t) var(--cat-ease);
}

.cat-card .cat-card__fav:hover {
    transform: scale(1.08);
}

/* Corazón móvil (<1571px): <button><img></button> */
.cat-card .cat-card__fav--m {
    display: grid !important;
    place-items: center;
}

.cat-card .cat-card__fav--m img {
    width: 56%;
    height: 56%;
    object-fit: contain;
}

/* activo: el SVG "filtro-corazon-lleno" trae su propio fondo azul cuadrado; llena el círculo para verse
   como un círculo azul con el corazón blanco */
.cat-card .cat-card__fav--m.active {
    overflow: hidden;
    background-color: var(--cat-primary);
}

.cat-card .cat-card__fav--m.active img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Corazón de pantalla ancha (>=1571px): el gráfico viene de las variables legacy
   --favorito-desactivado / --favorito-activado (clase .listado-favorito) */
@media (min-width: 1571px) {
    .cat-card .cat-card__fav--wide {
        display: block !important;
    }

    .cat-card .cat-card__fav--m {
        display: none !important;
    }
}

/* Los hijos no capturan el click: el "Click Classes" de GTM lee el elemento clicado */
.cat-card .cat-card__fav--wide > * {
    pointer-events: none;
}

/* --- cuerpo --- */
.cat-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: calc(var(--c-gap) * 1.2);
    padding: var(--c-pad) var(--c-pad) 0;
}

.cat-card__title {
    display: -webkit-box;
    margin: 0;
    min-height: 2.5em; /* tarjetas angostas: 2 líneas reservadas, el nombre suele ocupar dos */
    overflow: hidden;
    font-size: var(--c-fs-title);
    font-weight: 400;
    line-height: 1.25;
    color: var(--cat-ink);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* tarjetas anchas: el nombre cabe en una línea, no se reserva la segunda */
@container cat-card (min-width: 280px) {
    .cat-card__title {
        min-height: 1.25em;
    }
}

.cat-card__title a {
    color: inherit;
    text-decoration: none;
}

.cat-card__title a:hover {
    color: var(--cat-primary);
}

.cat-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1em 0.55em;
    margin: auto 0 0; /* el precio queda alineado al fondo del cuerpo aunque el título ocupe 1 o 2 líneas */
    font-size: var(--c-fs-price);
    font-weight: 600;
    line-height: 1.2;
    color: var(--cat-ink);
}

.cat-card__price-old {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--cat-muted);
    text-decoration: line-through;
}

/* --- acciones --- */
.cat-card__actions {
    margin-top: auto;
    padding: calc(var(--c-pad) * 0.7) var(--c-pad) var(--c-pad);
}

.cat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    width: 100%;
    min-height: var(--c-btn-h);
    padding: 0 0.75em;
    border: 1.5px solid var(--cat-primary);
    border-radius: var(--cat-r-md);
    background: var(--cat-surface);
    font-family: inherit;
    font-size: var(--c-fs-btn);
    font-weight: 600;
    line-height: 1.1;
    color: var(--cat-primary);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--cat-t) var(--cat-ease), color var(--cat-t) var(--cat-ease);
}

.cat-btn:hover {
    background: var(--cat-primary-soft);
}

.cat-btn--solid {
    color: #fff;
    background: var(--cat-primary);
}

.cat-btn--solid:hover {
    background: var(--cat-primary-hover);
}

.cat-btn svg,
.cat-btn img {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    pointer-events: none; /* el click cae siempre en el <button> (GTM lee su texto) */
}

/* "Probar" (escritorio, >=1024) vs "Probármelos" (<1024, con opciones Subir foto / Probar en vivo) */
.cat-card__try {
    display: none;
}

.cat-card__try-m {
    display: grid;
    position: relative;
}

@media (min-width: 1024px) {
    .cat-card__try {
        display: flex;
    }

    .cat-card .cat-card__try-m {
        display: none !important;
    }
}

/* Panel móvil "Probármelos": dos paneles apilados en la misma celda (el botón y las dos opciones); probadorCatalogo.blade.php
   alterna .is-open en .probador-movil-actions y el panel de opciones reemplaza al botón con un giro horizontal */
.cat-card__try-m .probador-movil-panel {
    grid-area: 1 / 1;
    display: flex;
    gap: calc(var(--c-gap) * 0.8);
    width: 100%;
    transform-origin: left center;
}

.cat-card__try-m .probador-movil-panel--default {
    transform: scaleX(1);
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0.3s, visibility 0s linear 0s;
}

.cat-card__try-m .probador-movil-panel--opciones {
    transform: scaleX(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s linear 0.3s;
}

.cat-card__try-m.is-open .probador-movil-panel--default {
    transform: scaleX(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s linear 0.3s;
}

.cat-card__try-m.is-open .probador-movil-panel--opciones {
    transform: scaleX(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0.3s, visibility 0s linear 0s;
}

.cat-card__try-m .btn-probador-opcion {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-height: var(--c-btn-h);
    margin: 0;
    padding: 0 0.4em;
    border-radius: var(--cat-r-md);
    font-family: inherit;
    font-size: var(--c-fs-btn);
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
}

.cat-card__try-m .btn-probador-opcion--foto {
    border: 1.5px solid var(--cat-primary);
    background: #fff;
    color: var(--cat-primary);
}

.cat-card__try-m .btn-probador-opcion--vivo {
    border: 1.5px solid var(--cat-primary);
    background: var(--cat-primary);
    color: #fff;
}

.cat-card__try-m .btn-probador-opcion svg {
    width: 1.2em;
    height: 1.2em;
    pointer-events: none;
}

.cat-card__try-m .btn-probador-opcion span {
    pointer-events: none;
}

/* tarjetas muy angostas (2 columnas en móvil): sin íconos para que el texto no se parta en 3 líneas */
@container cat-card (max-width: 210px) {
    .cat-card__try-m .btn-probador-opcion svg {
        display: none;
    }

    .cat-card__try-m .btn-probador-opcion {
        padding: 0 0.3em;
    }
}

/* Áreas táctiles de al menos 44px en tablet/móvil y en cualquier pantalla táctil */
@media (max-width: 1023px), (pointer: coarse) {
    .cat-btn,
    .cat-card__try-m .btn-probador-opcion {
        min-height: max(44px, var(--c-btn-h));
    }

    .cat-card .cat-card__fav {
        min-width: 40px;
        min-height: 40px;
    }
}

/* pantallas táctiles: el corazón también llega a 44px (salvo en tarjetas muy angostas, donde taparía la montura) */
@media (pointer: coarse) {
    @container cat-card (min-width: 200px) {
        .cat-card .cat-card__fav {
            min-width: 44px;
            min-height: 44px;
        }
    }
}

/* --- skeleton (HTML del servidor, se reemplaza al llegar los resultados) --- */
.cat-card--skeleton {
    pointer-events: none;
}

.cat-skel {
    display: block;
    border-radius: var(--cat-r-sm);
    background: linear-gradient(90deg, #eceef8 25%, #f6f7fc 37%, #eceef8 63%);
    background-size: 400% 100%;
    animation: cat-shimmer 1.4s ease infinite;
}

.cat-card--skeleton .cat-card__media {
    border-radius: var(--cat-r-lg) var(--cat-r-lg) 0 0;
}

.cat-card--skeleton .cat-skel--title {
    height: 2.5em;
    font-size: var(--c-fs-title);
}

@container cat-card (min-width: 280px) {
    .cat-card--skeleton .cat-skel--title {
        height: 1.25em;
    }
}

.cat-card--skeleton .cat-skel--price {
    width: 45%;
    height: calc(var(--c-fs-price) * 1.2);
}

.cat-card--skeleton .cat-skel--btn {
    height: var(--c-btn-h);
    border-radius: var(--cat-r-md);
}

@keyframes cat-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}


/* -----------------------------------------------------------------------------
   10. Catálogo de lentes de contacto (/lentes-de-contacto)
   Reutiliza el shell, el panel, la barra superior, los chips y la grilla del catálogo de monturas. Solo cambian las
   opciones (checkbox nativo: estos filtros no tienen URL) y la tarjeta (foto de la caja 19:10, nombre, descripción y
   precio; toda la tarjeta es un link).
   ----------------------------------------------------------------------------- */

/* --- opciones: <label> con un <input type="checkbox"> real, oculto pero enfocable --- */
.cat-opt--input {
    position: relative;
}

.cat-opt__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.cat-opt__input:checked + .cat-opt__box {
    border-color: var(--cat-primary);
    background: var(--cat-primary);
}

.cat-opt__input:checked + .cat-opt__box::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.cat-opt__input:checked ~ .cat-opt__text .cat-opt__name {
    font-weight: 600;
}

.cat-opt__input:focus-visible + .cat-opt__box {
    outline: 2px solid var(--cat-primary);
    outline-offset: 2px;
}

/* --- enlace a "Líquidos para lentes" (lleva a otra página, no es un filtro) --- */
.cat-liquids {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    margin: 1rem 0 0.5rem;
    padding: 0 0.75rem;
    border: 1.5px solid var(--cat-line-strong);
    border-radius: var(--cat-r-md);
    background: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cat-primary);
    text-align: center;
    transition: background-color var(--cat-t) var(--cat-ease), border-color var(--cat-t) var(--cat-ease);
}

.cat-liquids:hover {
    border-color: var(--cat-primary);
    background: var(--cat-primary-soft);
    color: var(--cat-primary-hover);
}

@media (max-width: 1023px), (pointer: coarse) {
    .cat-liquids {
        min-height: 2.75rem;
    }
}

/* --- tarjeta de lente de contacto --- */
.cat-card--lc .cat-card__media {
    aspect-ratio: 1200 / 630; /* las fotos de las cajas son 1200x630 (1,9:1): la caja de imagen las llena sin recortarlas */
}

.cat-card--lc .cat-card__img {
    position: absolute;
    inset: var(--c-inset);
    width: calc(100% - var(--c-inset) * 2);
    height: calc(100% - var(--c-inset) * 2);
    object-position: center;
}

.cat-card--lc .cat-card__body {
    padding-bottom: var(--c-pad); /* sin fila de botones: el cuerpo cierra la tarjeta */
}

.cat-card--lc .cat-card__title {
    min-height: 0; /* el alto reservado lo da .cat-card__name (nombre + descripción juntos) */
    font-weight: 600;
    text-wrap: balance; /* si el nombre ocupa dos líneas, se reparten parejas (no queda una palabra sola abajo) */
    -webkit-line-clamp: 4; /* lo que distingue a un lente está al final del nombre ("Serie 2 - 10.25 A - 15.00"): no se corta a 2 líneas */
}

/* Nombre + descripción: bloque con alto reservado (nombre de 2 líneas + descripción). Así las tarjetas de una fila
   miden lo mismo y el precio queda alineado al fondo, y el aire sobrante queda entre la descripción y el precio, no
   entre el nombre y su descripción. */
.cat-card__name {
    display: flex;
    flex-direction: column;
    gap: calc(var(--c-gap) * 0.5);
    min-height: calc(var(--c-fs-title) * 2.5 + var(--c-gap) * 0.5 + var(--c-fs-sub) * 1.3);
}

/* tarjetas anchas: el nombre cabe en una línea, no se reserva la segunda (igual que .cat-card__title) */
@container cat-card (min-width: 280px) {
    .cat-card__name {
        min-height: calc(var(--c-fs-title) * 1.25 + var(--c-gap) * 0.5 + var(--c-fs-sub) * 1.3);
    }
}

.cat-card__sub {
    margin: 0;
    min-height: 1.3em;
    font-size: var(--c-fs-sub);
    line-height: 1.3;
    color: var(--cat-muted);
    text-wrap: balance; /* "Fabricación 7 a 10 días hábiles" en dos líneas no deja "hábiles" huérfano */
}

/* "stretched link": el link del nombre cubre toda la tarjeta, así que el click funciona en cualquier parte
   y el HTML sigue teniendo un único link por producto */
.cat-card__stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--cat-r-lg);
}

.cat-card__stretch:focus-visible {
    outline: 0;
}

.cat-card__stretch:focus-visible::after {
    outline: 2px solid var(--cat-primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .cat-card--lc:hover .cat-card__title a {
        color: var(--cat-primary);
    }
}

.cat-card--skeleton .cat-skel--sub {
    width: 55%;
    height: calc(var(--c-fs-sub) * 1.3);
}

/* la lista se está recargando: se atenúa y no recibe clicks hasta que llegue la nueva */
.cat-grid.is-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s var(--cat-ease);
}

/* "Reintentar" del aviso de error: el .cat-btn base ocupa todo el ancho y su alto sale de variables de la tarjeta */
.cat-empty .cat-btn {
    width: fit-content;
    min-width: 10rem;
    min-height: 2.75rem;
    margin: var(--cat-s4) auto 0; /* en su propia línea, centrado bajo el texto */
    padding: 0 1.5rem;
    font-size: 0.92rem;
}


/* -----------------------------------------------------------------------------
   11. Utilidades
   ----------------------------------------------------------------------------- */
.cat-shell :focus-visible {
    outline: 2px solid var(--cat-primary);
    outline-offset: 2px;
}

.cat-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cat-shell *,
    .cat-shell *::before,
    .cat-shell *::after {
        transition: none !important;
        animation: none !important;
    }
}