/* ── Página de categoría ──────────────────────────────── */
.categoria-pagina {
    padding-block-start: var(--pcategoria-padding-top, 2rem);
    padding-block-end: var(--pcategoria-padding-bottom, 2rem);
    background-color: var(--pcategoria-pagina-fondo, transparent);
}

.categoria-pagina .container {
    max-width: var(--pcategoria-container-max-width, var(--site-container-max-width, 1200px));
}

.familias-pagina .container {
    max-width: var(--pcategoria-todas-container-max-width, var(--site-container-max-width, 1200px));
}

/* ── Título de página ─────────────────────────────────── */
.categoria-pagina__header {
    background-color: var(--pcategoria-header-fondo, transparent);
    padding-block-start: var(--pcategoria-header-padding-top, 1.5rem);
    padding-block-end: var(--pcategoria-header-padding-bottom, 1.5rem);
    margin-bottom: 2rem;
}

.categoria-pagina__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: var(--pcategoria-bc-align, flex-start);
    gap: 0.25rem;
    font-size: var(--pcategoria-bc-tam, 0.875rem);
    font-family: var(--pcategoria-bc-fuente, inherit);
    margin-bottom: 0.75rem;
}

.categoria-pagina__breadcrumb-link {
    color: var(--pcategoria-bc-link-color, inherit) !important;
    text-decoration: none !important;
    opacity: 0.8;
}
.categoria-pagina__breadcrumb-link:hover {
    color: var(--pcategoria-bc-link-hover-color, var(--pcategoria-bc-link-color, inherit)) !important;
    text-decoration: underline !important;
    opacity: 1;
}

.categoria-pagina__breadcrumb-sep {
    color: var(--pcategoria-bc-link-color, inherit);
    opacity: 0.4;
}

.categoria-pagina__breadcrumb-current {
    font-weight: 600;
    color: var(--pcategoria-bc-link-color, inherit) !important;
}

.categoria-pagina__header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.categoria-pagina__header-texto {
    width: 100%;
}

/* Imagen izquierda o derecha: fila, sin wrap para que estén siempre en la misma línea */
.categoria-pagina__header-inner--img-izquierda,
.categoria-pagina__header-inner--img-derecha {
    flex-direction: row;
    flex-wrap: nowrap;
}

/* Imagen centro: columna con imagen arriba */
.categoria-pagina__header-inner--img-centro {
    flex-direction: column;
    align-items: center;
}

.categoria-pagina__header-img {
    flex: 0 0 auto;
    width: 180px;
}

.categoria-pagina__header-img--centro {
    width: 220px;
}

.categoria-pagina__header-img img {
    width: 100%;
    height: auto;
    border-radius: var(--card-radius, 0.5rem);
    object-fit: cover;
    display: block;
}

/* El texto ocupa el espacio restante en layout lateral */
.categoria-pagina__header-inner--img-izquierda .categoria-pagina__header-texto,
.categoria-pagina__header-inner--img-derecha .categoria-pagina__header-texto {
    flex: 1 1 0;
    min-width: 0;
}

.categoria-pagina__titulo {
    font-size: var(--pcategoria-titulo-tam, 1.75rem) !important;
    color: var(--pcategoria-titulo-color, inherit) !important;
    text-align: var(--pcategoria-titulo-align, left) !important;
    font-family: var(--pcategoria-titulo-fuente, inherit) !important;
    font-weight: var(--pcategoria-titulo-peso, 700) !important;
    margin: 0 0 0.5rem;
}

.categoria-pagina__desc {
    font-size: var(--pcategoria-desc-tam, 1rem) !important;
    color: var(--pcategoria-desc-color, inherit) !important;
    text-align: var(--pcategoria-desc-align, left) !important;
    font-family: var(--pcategoria-desc-fuente, inherit) !important;
    font-weight: var(--pcategoria-desc-peso, 400) !important;
    line-height: 1.6;
    margin: 0;
    opacity: var(--pcategoria-desc-opacidad, 0.75);
}

/* Subcategorías */
.categoria-pagina__subcategorias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pcategoria-sub-gap, 1rem);
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .categoria-pagina__subcategorias--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .categoria-pagina__subcategorias--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .categoria-pagina__subcategorias--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Tarjeta de subcategoría (compartida con template_familias) */
.categoria-sub__card {
    text-decoration: none;
    color: inherit;
    display: block;
    background-color: var(--pcategoria-sub-fondo, transparent);
    border-radius: var(--pcategoria-sub-radio, 0.5rem);
    overflow: hidden;
    box-shadow: var(--pcategoria-sub-sombra, none);
    transition: box-shadow 0.2s;
}
.categoria-sub__card:hover { box-shadow: var(--pcategoria-sub-sombra-hover, var(--card-shadow-hover, 0 4px 12px rgba(0,0,0,0.15))); }

.categoria-sub__img-wrap {
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--pcategoria-sub-img-fondo, var(--card-img-bg, var(--light-color, #f1f5f9)));
    border-radius: var(--pcategoria-sub-radio, 0.5rem);
}

.categoria-sub__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.categoria-sub__card:hover .categoria-sub__img-wrap img { transform: scale(1.04); }

.categoria-sub__nombre {
    font-size: var(--pcategoria-sub-nombre-tam, 0.9375rem);
    font-weight: var(--pcategoria-sub-nombre-peso, 600);
    font-family: var(--pcategoria-sub-nombre-fuente, inherit);
    color: var(--pcategoria-sub-nombre-color, inherit);
    text-align: var(--pcategoria-sub-nombre-align, center);
    padding: 0.6rem 0.5rem;
    margin: 0;
}

/* Grid de productos */
.categoria-pagina__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pcategoria-grid-gap, 1rem);
}

@media (min-width: 640px) {
    .categoria-pagina__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .categoria-pagina__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .categoria-pagina__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Estilos de la tarjeta rediseñada (.product-card--v2) al final del archivo */

.categoria-pagina__empty {
    text-align: center;
    color: var(--pcategoria-empty-color, inherit);
    opacity: var(--pcategoria-empty-opacidad, 0.6);
    font-size: var(--pcategoria-empty-tam, 1rem);
    padding: 3rem 0;
    grid-column: 1 / -1;
}

/* ── Todas las categorías (template_familias) ─────────── */
.familias-pagina__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: var(--pcategoria-todas-bc-align, flex-start);
    gap: 0.25rem;
    font-size: var(--pcategoria-todas-bc-tam, 0.875rem);
    font-family: var(--pcategoria-todas-bc-fuente, inherit);
    margin-bottom: 1rem;
}

.familias-pagina__breadcrumb-link {
    color: var(--pcategoria-todas-bc-link-color, inherit) !important;
    text-decoration: none !important;
    opacity: 0.8;
}
.familias-pagina__breadcrumb-link:hover {
    color: var(--pcategoria-todas-bc-link-hover-color, var(--pcategoria-todas-bc-link-color, inherit)) !important;
    text-decoration: underline !important;
    opacity: 1;
}

.familias-pagina__breadcrumb-sep {
    color: var(--pcategoria-todas-bc-link-color, inherit);
    opacity: 0.4;
}

.familias-pagina__breadcrumb-current {
    font-weight: 600;
    color: var(--pcategoria-todas-bc-link-color, inherit) !important;
}

.familias-pagina {
    padding-block-start: var(--pcategoria-padding-top, 2rem);
    padding-block-end: var(--pcategoria-padding-bottom, 2rem);
    background-color: var(--pcategoria-todas-pagina-fondo, transparent);
}

/* Encabezado de "Todas las categorías" (mismo patrón que el listado) */
.familias-pagina__header {
    background-color: var(--pcategoria-todas-header-fondo, transparent);
    padding-block-start: var(--pcategoria-todas-header-padding-top, 1.5rem);
    padding-block-end: var(--pcategoria-todas-header-padding-bottom, 1.5rem);
    margin-bottom: 2rem;
}

.familias-pagina__header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.familias-pagina__header-texto {
    width: 100%;
}

/* Imagen izquierda o derecha: fila, sin wrap */
.familias-pagina__header-inner--img-izquierda,
.familias-pagina__header-inner--img-derecha {
    flex-direction: row;
    flex-wrap: nowrap;
}

/* Imagen centro: columna con imagen arriba */
.familias-pagina__header-inner--img-centro {
    flex-direction: column;
    align-items: center;
}

.familias-pagina__header-img {
    flex: 0 0 auto;
    width: 180px;
}

.familias-pagina__header-img--centro {
    width: 220px;
}

.familias-pagina__header-img img {
    width: 100%;
    height: auto;
    border-radius: var(--card-radius, 0.5rem);
    object-fit: cover;
    display: block;
}

.familias-pagina__header-inner--img-izquierda .familias-pagina__header-texto,
.familias-pagina__header-inner--img-derecha .familias-pagina__header-texto {
    flex: 1 1 0;
    min-width: 0;
}

.familias-pagina__titulo {
    font-size: var(--pcategoria-todas-titulo-tam, 1.75rem) !important;
    font-weight: var(--pcategoria-todas-titulo-peso, 700) !important;
    font-family: var(--pcategoria-todas-titulo-fuente, inherit) !important;
    color: var(--pcategoria-todas-titulo-color, inherit) !important;
    text-align: var(--pcategoria-todas-titulo-align, left) !important;
    margin: 0 0 0.5rem;
}

.familias-pagina__desc {
    font-size: var(--pcategoria-todas-desc-tam, 1rem);
    color: var(--pcategoria-todas-desc-color, inherit);
    text-align: var(--pcategoria-todas-desc-align, left);
    font-family: var(--pcategoria-todas-desc-fuente, inherit);
    font-weight: var(--pcategoria-todas-desc-peso, 400);
    line-height: 1.6;
    margin: 0;
    opacity: var(--pcategoria-todas-desc-opacidad, 0.75);
}

@media (max-width: 640px) {
    .familias-pagina__header-inner--img-izquierda,
    .familias-pagina__header-inner--img-derecha {
        flex-direction: column;
        align-items: flex-start;
    }
    .familias-pagina__header-img,
    .familias-pagina__header-img--centro {
        width: 100%;
        max-width: 220px;
    }
}

.familias-pagina__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pcategoria-todas-gap, 1rem);
}

@media (min-width: 640px) {
    .familias-pagina__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .familias-pagina__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .familias-pagina__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Tarjetas en vista "Todas" usan sus propias variables */
.familias-pagina .categoria-sub__card {
    border-radius: var(--pcategoria-todas-radio, 0.5rem);
    background-color: var(--pcategoria-todas-fondo, transparent);
    box-shadow: var(--pcategoria-todas-sombra, none);
}

.familias-pagina .categoria-sub__card:hover {
    box-shadow: var(--pcategoria-todas-sombra-hover, var(--card-shadow-hover, 0 4px 12px rgba(0,0,0,0.15)));
}

.familias-pagina .categoria-sub__img-wrap {
    background-color: var(--pcategoria-todas-img-fondo, var(--card-img-bg, var(--light-color, #f1f5f9)));
    border-radius: var(--pcategoria-todas-radio, 0.5rem) var(--pcategoria-todas-radio, 0.5rem) 0 0;
}

.familias-pagina .categoria-sub__nombre {
    font-size: var(--pcategoria-todas-nombre-tam, 0.9375rem) !important;
    font-weight: var(--pcategoria-todas-nombre-peso, 600) !important;
    font-family: var(--pcategoria-todas-nombre-fuente, inherit) !important;
    color: var(--pcategoria-todas-nombre-color, inherit) !important;
    text-align: var(--pcategoria-todas-nombre-align, center) !important;
}

.familias-pagina__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--pcategoria-empty-color, inherit);
    opacity: var(--pcategoria-empty-opacidad, 0.6);
    font-size: var(--pcategoria-empty-tam, 1rem);
    padding: 3rem 0;
}

/* ══════════════════════════════════════════════════════════
   Tarjeta de producto rediseñada (.product-card--v2)
   Totalmente parametrizable vía --pcategoria-card-*
   ══════════════════════════════════════════════════════════ */
.categoria-pagina__grid .product-card--v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--pcategoria-card-fondo, var(--bg-white, #fff));
    border: var(--pcategoria-card-borde-grosor, 1px) solid var(--pcategoria-card-borde-color, var(--border-color, #e5e7eb));
    border-radius: var(--pcategoria-card-radio, 0.75rem);
    box-shadow: var(--pcategoria-card-sombra, 0 1px 3px rgba(0,0,0,0.08));
    padding: var(--pcategoria-card-padding, 0.75rem);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.categoria-pagina__grid .product-card--v2:hover {
    box-shadow: var(--pcategoria-card-sombra-hover, 0 8px 24px rgba(0,0,0,0.14));
    transform: translateY(-4px);
}

/* Favorito */
.categoria-pagina__grid .product-card__fav {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
    width: var(--pcategoria-card-fav-circulo-tam, 2rem);
    height: var(--pcategoria-card-fav-circulo-tam, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: var(--pcategoria-card-fav-fondo, rgba(255,255,255,0.9));
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    cursor: pointer;
    font-size: var(--pcategoria-card-fav-tam, 1.25rem);
    color: var(--pcategoria-card-fav-color, rgba(0,0,0,0.3));
    transition: color 0.2s, transform 0.2s;
}
.categoria-pagina__grid .product-card__fav svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.categoria-pagina__grid .product-card__fav:hover { transform: scale(1.12); }
.categoria-pagina__grid .product-card__fav:hover,
.categoria-pagina__grid .product-card__fav.is-favorito {
    color: var(--pcategoria-card-fav-color-active, var(--color-danger, #dc3545));
}

/* Imagen */
.categoria-pagina__grid .product-card__link { display: block; text-decoration: none; }
.categoria-pagina__grid .product-card__img-wrap {
    position: relative;
    width: 100%;
    height: var(--pcategoria-card-img-alto, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pcategoria-card-img-fondo, var(--bg-white, #fff));
    border-radius: calc(var(--pcategoria-card-radio, 0.75rem) - 0.25rem);
    overflow: hidden;
}
.categoria-pagina__grid .product-card--v2.img-square .product-card__img-wrap {
    height: auto;
    aspect-ratio: 1 / 1;
}
.categoria-pagina__grid .product-card__img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.categoria-pagina__grid .product-card--v2.img-cover .product-card__img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
}
.categoria-pagina__grid .product-card--v2.img-zoom:hover .product-card__img-wrap img { transform: scale(1.06); }
.categoria-pagina__grid .product-card__img-ph {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #eaecef 10px, #eaecef 20px);
}

/* Badges */
.categoria-pagina__grid .product-card__badges {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    z-index: 2;
}
.categoria-pagina__grid .product-card__badge {
    font-size: var(--pcategoria-card-badge-tam, 0.72rem);
    font-weight: var(--pcategoria-card-badge-peso, 700);
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border-radius: var(--pcategoria-card-badge-radio, 0.375rem);
    letter-spacing: 0.02em;
}
.categoria-pagina__grid .product-card__badge--dto {
    background-color: var(--pcategoria-card-badge-dto-fondo, var(--color-danger, #dc3545));
    color: var(--pcategoria-card-badge-dto-color, #fff);
}
.categoria-pagina__grid .product-card__badge--agotado {
    background-color: var(--pcategoria-card-badge-ago-fondo, var(--dark-color, #222));
    color: var(--pcategoria-card-badge-ago-color, #fff);
}

/* Cuerpo */
.categoria-pagina__grid .product-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    flex: 1 1 auto;
}
.categoria-pagina__grid .product-card__nombre-link { text-decoration: none; }
.categoria-pagina__grid .product-card__nombre {
    margin: 0;
    color: var(--pcategoria-card-nombre-color, var(--dark-color, #222));
    font-size: var(--pcategoria-card-nombre-tam, 0.95rem);
    font-weight: var(--pcategoria-card-nombre-peso, 600);
    font-family: var(--pcategoria-card-nombre-fuente, inherit);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: var(--pcategoria-card-nombre-lineas, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Valoración (opcional) */
.categoria-pagina__grid .product-card__rating { color: var(--pcategoria-card-rating-color, #f59e0b); font-size: var(--pcategoria-card-rating-tam, 0.85rem); letter-spacing: 0.05em; }

/* Precio + stock */
.categoria-pagina__grid .product-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
}
.categoria-pagina__grid .product-card__precio-actual {
    color: var(--pcategoria-card-precio-color, var(--primary-color, #16a34a));
    font-size: var(--pcategoria-card-precio-tam, 1.15rem);
    font-weight: var(--pcategoria-card-precio-peso, 700);
}
.categoria-pagina__grid .product-card__precio-antes {
    margin-left: 0.4rem;
    color: var(--pcategoria-card-precio-antes-color, var(--text-muted, #9ca3af));
    font-size: var(--pcategoria-card-precio-antes-tam, 0.85rem);
    text-decoration: line-through;
}
.categoria-pagina__grid .product-card__stock { font-size: var(--pcategoria-card-stock-tam, 0.75rem); font-weight: var(--pcategoria-card-stock-peso, 600); white-space: nowrap; }
.categoria-pagina__grid .product-card__stock--ok  { color: var(--pcategoria-card-stock-color, var(--success-color, #16a34a)); }
.categoria-pagina__grid .product-card__stock--ago { color: var(--pcategoria-card-stock-ago-color, var(--color-danger, #dc3545)); }

/* Botón comprar */
.categoria-pagina__grid .product-card__btn {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    font-size: var(--pcategoria-card-btn-tam, 0.875rem);
    font-weight: var(--pcategoria-card-btn-peso, 600);
    border-radius: var(--pcategoria-card-btn-radio, 0.5rem);
    background-color: var(--pcategoria-card-btn-fondo, var(--primary-color, #16a34a));
    color: var(--pcategoria-card-btn-color, var(--dark-color, #222));
    transition: filter 0.2s, opacity 0.25s, transform 0.25s;
}
.categoria-pagina__grid .product-card__btn:hover { filter: brightness(0.95); }

/* Mostrar botón solo al hover: oculto por defecto, aparece al pasar el ratón */
.categoria-pagina__grid .product-card--v2.btn-hover .product-card__btn {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}
.categoria-pagina__grid .product-card--v2.btn-hover:hover .product-card__btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* En pantallas táctiles el hover no aplica: mostrar siempre el botón */
@media (hover: none) {
    .categoria-pagina__grid .product-card--v2.btn-hover .product-card__btn {
        opacity: 1; transform: none; pointer-events: auto;
    }
}

/* Estado agotado: atenúa la tarjeta */
.categoria-pagina__grid .product-card--v2.is-agotado .product-card__img-wrap img { opacity: 0.65; }

/* ── Scroll infinito: sentinel + spinner ─────────────────── */
.infinite-scroll-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 1.5rem 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.infinite-scroll-sentinel.is-loading { opacity: 1; }
.infinite-scroll-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #16a34a);
    border-radius: 50%;
    animation: infinite-scroll-spin 0.7s linear infinite;
}
@keyframes infinite-scroll-spin { to { transform: rotate(360deg); } }

/* ── Barra de resultados + ordenación ────────────────────── */
.listado-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--pcategoria-toolbar-borde-color, var(--border-color, #e5e7eb));
}
.listado-toolbar__count {
    font-size: var(--pcategoria-toolbar-texto-tam, 0.9rem);
    font-weight: 600;
    color: var(--pcategoria-toolbar-texto-color, var(--text-muted, #6b7280));
}
.listado-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.listado-toolbar__sort-label {
    font-size: var(--pcategoria-toolbar-texto-tam, 0.9rem);
    color: var(--pcategoria-toolbar-texto-color, var(--text-muted, #6b7280));
    white-space: nowrap;
}
.listado-toolbar__sort-select {
    font-size: var(--pcategoria-toolbar-texto-tam, 0.9rem);
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    border: 1px solid var(--pcategoria-toolbar-select-borde, var(--border-color, #d6d3cb));
    border-radius: var(--pcategoria-toolbar-select-radio, 0.5rem);
    background-color: var(--pcategoria-toolbar-select-fondo, var(--bg-white, #fff));
    color: var(--pcategoria-toolbar-select-color, var(--dark-color, #222));
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    transition: border-color 0.15s;
}
.listado-toolbar__sort-select:hover { border-color: var(--primary-color, #16a34a); }
.listado-toolbar__sort-select:focus {
    outline: none;
    border-color: var(--primary-color, #16a34a);
    box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}


/* Selector de cantidad + botón comprar en la tarjeta (todos los grids) */
.product-card__comprar {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}
.product-card__cantidad {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.5rem;
    overflow: hidden;
}
.product-card__cantidad .qty-btn {
    width: 2rem;
    border: 0;
    background: var(--bg-light, #f9fafb);
    color: var(--dark-color, #222);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card__cantidad .qty-btn:hover { background: var(--border-color, #e5e7eb); }
.product-card__cantidad .qty-input {
    width: 3rem;
    border: 0;
    text-align: center;
    font-size: 0.875rem;
    background: var(--bg-white, #fff);
    color: var(--dark-color, #222);
    -moz-appearance: textfield;
    appearance: textfield;
}
.product-card__cantidad .qty-input::-webkit-outer-spin-button,
.product-card__cantidad .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* El botón comprar ocupa el resto del ancho junto al selector */
.product-card__comprar .product-card__btn { flex: 1; width: auto; }

/* Modo "mostrar al hover": el bloque (selector + botón) va ABSOLUTO anclado al
   fondo de la tarjeta, así no ocupa espacio en el flujo ni descuadra/desborda el
   grid. La tarjeta tiene overflow:hidden, que lo recorta cuando está oculto. */
.product-card--v2.btn-hover .product-card__comprar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.5rem;
    background: var(--bg-white, #fff);
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: 2;
}
.product-card--v2.btn-hover:hover .product-card__comprar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* En pantallas táctiles el hover no aplica: bloque en flujo normal, siempre visible */
@media (hover: none) {
    .product-card--v2.btn-hover .product-card__comprar {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        padding: 0;
        background: transparent;
    }
}

:root {
    --pcategoria-grid-gap: 1rem;
    --pcategoria-padding-top: 0;
    --pcategoria-padding-bottom: 2rem;
    --pcategoria-container-max-width: 1200px;
    --pcategoria-empty-color: var(--secondary-color);
    --pcategoria-empty-tam: 1rem;
    --pcategoria-card-fondo: var(--bg-white);
    --pcategoria-card-borde-color: var(--border-color);
    --pcategoria-card-borde-grosor: 1px;
    --pcategoria-card-radio: 0;
    --pcategoria-card-sombra: none;
    --pcategoria-card-sombra-hover: none;
    --pcategoria-card-padding: 0;
    --pcategoria-card-img-fondo: var(--bg-white);
    --pcategoria-card-img-alto: 220px;
    --pcategoria-card-nombre-color: var(--dark-color);
    --pcategoria-card-nombre-tam: 0.75rem;
    --pcategoria-card-nombre-peso: 600;
    --pcategoria-card-nombre-lineas: 2;
    --pcategoria-card-precio-color: var(--primary-color);
    --pcategoria-card-precio-tam: 0.75rem;
    --pcategoria-card-precio-peso: 700;
    --pcategoria-card-precio-antes-color: var(--text-muted);
    --pcategoria-card-badge-dto-fondo: var(--color-danger);
    --pcategoria-card-badge-dto-color: var(--bg-white);
    --pcategoria-card-badge-ago-fondo: var(--dark-color);
    --pcategoria-card-badge-ago-color: var(--bg-white);
    --pcategoria-card-badge-radio: 0;
    --pcategoria-card-btn-fondo: var(--primary-color);
    --pcategoria-card-btn-color: var(--dark-color);
    --pcategoria-card-btn-radio: 0.5rem;
    --pcategoria-card-stock-color: var(--success-color);
    --pcategoria-card-stock-ago-color: var(--color-danger);
    --pcategoria-card-rating-color: var(--color-warning);
    --pcategoria-card-rating-tam: 0.75rem;
    --pcategoria-card-precio-antes-tam: 0.75rem;
    --pcategoria-card-badge-tam: 0.75rem;
    --pcategoria-card-badge-peso: 700;
    --pcategoria-card-stock-tam: 0.75rem;
    --pcategoria-card-stock-peso: 600;
    --pcategoria-card-btn-tam: 0.875rem;
    --pcategoria-card-btn-peso: 600;
    --pcategoria-card-fav-color: var(--secondary-color);
    --pcategoria-card-fav-color-active: var(--danger-color);
    --pcategoria-card-fav-tam: 1.5rem;
    --pcategoria-card-fav-fondo: var(--bg-white);
    --pcategoria-card-fav-circulo-tam: 2rem;
    --pcategoria-toolbar-texto-color: var(--text-muted);
    --pcategoria-toolbar-texto-tam: 0.75rem;
    --pcategoria-toolbar-borde-color: var(--border-color);
    --pcategoria-toolbar-select-fondo: var(--bg-white);
    --pcategoria-toolbar-select-color: var(--dark-color);
    --pcategoria-toolbar-select-borde: var(--border-color);
    --pcategoria-toolbar-select-radio: 0.5rem;
    --pcategoria-header-fondo: var(--light-color);
    --pcategoria-header-padding-top: 1rem;
    --pcategoria-header-padding-bottom: 2rem;
    --pcategoria-titulo-tam: 3rem;
    --pcategoria-titulo-color: var(--secondary-color);
    --pcategoria-titulo-align: left;
    --pcategoria-titulo-peso: 800;
    --pcategoria-titulo-fuente: var(--font-1);
    --pcategoria-desc-tam: 1rem;
    --pcategoria-desc-color: var(--secondary-color);
    --pcategoria-desc-align: left;
    --pcategoria-desc-peso: 400;
    --pcategoria-desc-fuente: var(--font-2);
    --pcategoria-desc-opacidad: 1;
    --pcategoria-bc-align: right;
    --pcategoria-bc-tam: 1rem;
    --pcategoria-bc-link-color: var(--secondary-color);
    --pcategoria-bc-link-hover-color: var(--secondary-color);
    --pcategoria-bc-fuente: var(--font-2);
    --pcategoria-sub-gap: 1rem;
    --pcategoria-sub-radio: 0.5rem;
    --pcategoria-sub-nombre-tam: 1rem;
    --pcategoria-sub-nombre-color: var(--secondary-color);
    --pcategoria-sub-nombre-peso: 600;
    --pcategoria-sub-nombre-fuente: var(--font-2);
    --pcategoria-sub-nombre-align: center;
    --pcategoria-sub-sombra: 0 1px 4px rgba(0,0,0,0.08);
    --pcategoria-sub-sombra-hover: 0 8px 24px rgba(0,0,0,0.2);
    --pcategoria-todas-header-fondo: var(--light-color);
    --pcategoria-todas-header-padding-top: 1rem;
    --pcategoria-todas-header-padding-bottom: 1rem;
    --pcategoria-todas-titulo-tam: 3rem;
    --pcategoria-todas-titulo-color: var(--secondary-color);
    --pcategoria-todas-titulo-align: left;
    --pcategoria-todas-titulo-peso: 800;
    --pcategoria-todas-titulo-fuente: var(--font-1);
    --pcategoria-todas-desc-tam: 1rem;
    --pcategoria-todas-desc-color: var(--secondary-color);
    --pcategoria-todas-desc-align: left;
    --pcategoria-todas-desc-peso: 400;
    --pcategoria-todas-desc-fuente: var(--font-2);
    --pcategoria-todas-desc-opacidad: 1;
    --pcategoria-todas-gap: 2rem;
    --pcategoria-todas-radio: 1rem;
    --pcategoria-todas-nombre-tam: 1.25rem;
    --pcategoria-todas-nombre-color: var(--secondary-color);
    --pcategoria-todas-nombre-peso: 600;
    --pcategoria-todas-nombre-fuente: var(--font-2);
    --pcategoria-todas-nombre-align: center;
    --pcategoria-todas-img-fondo: var(--bg-white);
    --pcategoria-todas-fondo: var(--bg-white);
    --pcategoria-todas-sombra: 0 1px 4px rgba(0,0,0,0.08);
    --pcategoria-todas-sombra-hover: 0 8px 24px rgba(0,0,0,0.2);
    --pcategoria-todas-pagina-fondo: var(--bg-white);
    --pcategoria-todas-container-max-width: 1200px;
    --pcategoria-todas-bc-align: right;
    --pcategoria-todas-bc-tam: 0.875rem;
    --pcategoria-todas-bc-link-color: var(--secondary-color);
    --pcategoria-todas-bc-link-hover-color: var(--secondary-color);
}