/**
 * CARDS TECH — Glass Premium v3
 * Paleta: Navy + Azul eléctrico + Sky/Cyan — SIN violeta ni indigo.
 * Armoniza con navbar/hero (#080d1a → #3b82f6 → #0ea5e9).
 */

/* ============================================
   TOKENS — PALETA AZUL-CYAN (sin morado)
============================================ */
:root {
    /* Glass dark — premium sobre fondo blanco */
    --card-bg:              linear-gradient(145deg, rgba(11,18,33,0.92) 0%, rgba(8,13,26,0.88) 100%);
    --card-bg-img:          rgba(8, 13, 26, 0.96);
    --card-blur:            blur(24px);

    /* Bordes */
    --card-border:          rgba(255, 255, 255, 0.07);
    --card-border-hover:    rgba(59, 130, 246, 0.50);

    /* Radio */
    --card-radius:          22px;
    --card-radius-img:      22px 22px 0 0;

    /* Sombras — dark card floating on white */
    --card-shadow:
        0 4px 24px rgba(0, 0, 0, 0.22),
        0 1px 6px  rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    --card-shadow-hover:
        0 24px 52px rgba(0, 0, 0, 0.32),
        0 8px 20px  rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);

    /* Paleta accent — azul eléctrico + sky/cyan */
    --card-accent:          #3b82f6;
    --card-accent-blue:     #2563eb;
    --card-accent-sky:      #0ea5e9;
    --card-accent-dark:     #1d4ed8;

    /* Gradient principal — azul eléctrico a sky (eco navbar) */
    --card-gradient:        linear-gradient(180deg, #60a5fa 0%, #3b82f6 40%, #1d4ed8 100%);

    /* Línea gradiente navbar (top highlight en hover) */
    --card-topline:         linear-gradient(90deg,
                                transparent            0%,
                                rgba(14, 165, 233, 0.50) 20%,
                                rgba(59, 130, 246, 0.60) 50%,
                                rgba(37, 99, 235, 0.45)  80%,
                                transparent            100%);

    --card-accent-soft:     rgba(59, 130, 246, 0.08);
    --card-accent-border:   rgba(59, 130, 246, 0.22);

    /* Glow azul */
    --card-glow:
        0 8px 32px rgba(59, 130, 246, 0.45),
        0 4px 12px rgba(14, 165, 233, 0.30);

    /* Overlay oscuro sobre imagen */
    --card-overlay-btn:     rgba(255, 255, 255, 0.10);
    --card-overlay-border:  rgba(255, 255, 255, 0.18);
}

/* ============================================
   GRID
============================================ */
.products-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tech-spacing-lg);
}

/* ============================================
   CARD BASE
============================================ */
.tech-theme .product-card-tech {
    position: relative;
    /* Mismo gradiente premium que las bento-cards:
       zona imagen (arriba) = navy claro, zona info (abajo) = navy profundo
       + tinte del color de la categoría en toda la tarjeta */
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, transparent) 0%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 05%, transparent) 40%,
            transparent 65%
        ),
        linear-gradient(180deg,
            #0f1d35 0%,
            #0c1829 30%,
            #09121f 60%,
            #060b17 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--card-radius);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.45),
        0 2px 8px  rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition:
        transform      360ms cubic-bezier(0.22, 1.2, 0.36, 1),
        box-shadow     360ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color   300ms ease,
        background     300ms ease;
}

/* Barra superior con color de categoría — igual que bento-card */
.tech-theme .product-card-tech::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent                                              0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent) 30%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 90%, transparent) 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent) 70%,
        transparent                                              100%);
    opacity: 0.90;
    transition: opacity 320ms ease, left 320ms ease, right 320ms ease;
    z-index: 10;
    pointer-events: none;
}

/* Reflejo glass superior */
.tech-theme .product-card-tech::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.00) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* Doble halo — igual que bento-card */
.tech-theme .product-card-tech .card-cat-halo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 65% at 50% 100%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 28%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 50% 45% at 10% 10%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 10%, transparent) 0%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 400ms ease;
    opacity: 0.75;
}

.tech-theme .product-card-tech:hover {
    transform: translateY(-8px);
    /* Hover = fondo iluminado — misma fórmula cat-bento-card */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 38%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(ellipse 90% 90% at 50% 50%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 20%, transparent) 0%,
            transparent 70%),
        radial-gradient(ellipse 70% 70% at 50% 100%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 45%, transparent) 0%,
            transparent 65%),
        linear-gradient(180deg,
            #1a2f50 0%,
            #142338 30%,
            #0f1b2d 60%,
            #0b1525 100%
        );
    border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, transparent);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.45),
        0 10px 24px rgba(0, 0, 0, 0.30),
        /* Glow externo grande — ilumina todo el contorno */
        0 0 100px color-mix(in srgb, var(--cat-clr, #3b82f6) 48%, transparent),
        0 0 50px  color-mix(in srgb, var(--cat-clr, #3b82f6) 32%, transparent),
        /* Borde interior luminoso */
        0 0 0 2px color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, transparent),
        /* Inset glow — tinta todo el interior */
        inset 0 0 50px color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.tech-theme .product-card-tech:hover .card-cat-halo {
    opacity: 1;
    background:
        radial-gradient(ellipse 85% 70% at 50% 100%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 38%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 55% 50% at 10% 10%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 14%, transparent) 0%,
            transparent 70%);
}

.tech-theme .product-card-tech:hover::before {
    opacity: 1;
    left: 5%; right: 5%;
}

/* ============================================
   IMAGEN Y WRAPPER
============================================ */
.tech-theme .product-image-wrapper {
    position: relative;
    width: 100%;
    /* Imagen protagonista: ocupa ~62% visual de la card */
    aspect-ratio: 3 / 4;
    /* Transparente — el degradado del card-tech se ve en todo el fondo */
    background: transparent;
    overflow: hidden;
    border-radius: var(--card-radius-img);
    /* Separador sutil entre imagen e info */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

/* Overlay muy sutil sobre la imagen para que el producto destaque */
.tech-theme .product-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 75% 75% at 50% 50%,
        transparent 40%,
        rgba(6, 11, 23, 0.30) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Glow de categoría — cubre toda la imagen en hover (mix-blend: screen) */
.tech-theme .product-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 0%, transparent) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 400ms ease, background 400ms ease;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    border-radius: inherit;
}

.tech-theme .product-card-tech:hover .product-image-wrapper::after {
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 28%, transparent) 0%,
        transparent 70%);
    opacity: 1;
}

.tech-theme .product-image-wrapper img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 86%; height: 86%;
    object-fit: contain;
    transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.12));
}

.tech-theme .product-card-tech:hover .product-image-wrapper img {
    transform: translate(-50%, -50%) scale(1.09);
    filter:
        brightness(1.12)
        drop-shadow(0 6px 24px color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, transparent));
}

/* ============================================
   OVERLAY CON ACCIONES
============================================ */
.tech-theme .product-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tech-spacing-sm);
    background: linear-gradient(
        180deg,
        rgba(8, 13, 26, 0)    0%,
        rgba(8, 13, 26, 0.50) 52%,
        rgba(8, 13, 26, 0.82) 100%
    );
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 260ms ease;
    z-index: 5;
}

.tech-theme .product-card-tech:hover .product-overlay {
    opacity: 1;
    visibility: visible;
}

/* Botones overlay — dark navy glass (eco navbar) */
.tech-theme .overlay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    background: rgba(8, 13, 26, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-overlay-border);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    transform: translateY(18px);
    opacity: 0;
    transition: all 260ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

.tech-theme .product-card-tech:hover .overlay-btn {
    transform: translateY(0);
    opacity: 1;
}

.tech-theme .product-card-tech:hover .overlay-btn:nth-child(1) { transition-delay: 0.04s; }
.tech-theme .product-card-tech:hover .overlay-btn:nth-child(2) { transition-delay: 0.09s; }
.tech-theme .product-card-tech:hover .overlay-btn:nth-child(3) { transition-delay: 0.14s; }

.tech-theme .overlay-btn:hover {
    background: var(--card-gradient);
    border-color: rgba(59, 130, 246, 0.50);
    color: #ffffff;
    transform: scale(1.16);
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.55);
}

.tech-theme .overlay-btn.active {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.88) 0%,
        rgba(249, 115, 22, 0.88) 100%);
    border-color: rgba(239, 68, 68, 0.45);
}

.tech-theme .overlay-btn.active i { font-weight: 900; }

@media (max-width: 768px) {
    .tech-theme .product-overlay {
        opacity: 1;
        visibility: visible;
        background: linear-gradient(
            180deg,
            rgba(8, 13, 26, 0)    60%,
            rgba(8, 13, 26, 0.62) 100%
        );
        justify-content: flex-end;
        align-items: flex-end;
        padding: var(--tech-spacing-sm);
    }
    .tech-theme .overlay-btn {
        transform: translateY(0);
        opacity: 1;
        width: 36px; height: 36px;
        font-size: 0.875rem;
    }
}

/* ============================================
   BADGES
============================================ */
.tech-theme .product-badges {
    position: absolute;
    top: var(--tech-spacing-sm);
    left: var(--tech-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--tech-spacing-xs);
    z-index: 6;
}

.tech-theme .product-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.30rem 0.72rem;
    font-size: 0.6625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 9px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

/* NEW badge — azul eléctrico + sky */
.tech-theme .product-badge.new {
    background: linear-gradient(135deg,
        rgba(14, 165, 233, 0.92)  0%,
        rgba(59, 130, 246, 0.92)  55%,
        rgba(37, 99, 235, 0.92)   100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.40);
}

.tech-theme .product-badge.sale {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.90) 0%,
        rgba(249, 115, 22, 0.90) 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.38);
}

.tech-theme .product-badge.hot {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.92) 0%,
        rgba(251, 191, 36, 0.92) 100%);
    color: #451a03;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.38);
}

.tech-theme .product-badge.out-of-stock {
    background: rgba(100, 116, 139, 0.72);
    color: #ffffff;
}

/* ============================================
   BOTÓN FAVORITO
============================================ */
.tech-theme .product-favorite {
    position: absolute;
    top: var(--tech-spacing-sm);
    right: var(--tech-spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    background: rgba(15, 23, 42, 0.70);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255,255,255,0.50);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.80);
    transition: all 230ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    z-index: 6;
}

.tech-theme .product-card-tech:hover .product-favorite,
.tech-theme .product-card-tech:focus-within .product-favorite {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 768px) {
    .tech-theme .product-favorite { opacity: 1; transform: scale(1); }
}

.tech-theme .product-favorite:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(239, 68, 68, 0.30);
    color: #ef4444;
    transform: scale(1.18);
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.24);
}

.tech-theme .product-favorite.active {
    opacity: 1;
    transform: scale(1);
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(239, 68, 68, 0.30);
    color: #ef4444;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.24);
}

.tech-theme .product-favorite.active i { font-weight: 900; }

/* ============================================
   INFO DEL PRODUCTO
============================================ */
.product-info {
    padding: var(--tech-spacing-md);
    position: relative;
    z-index: 2;
}

/* Separador sutil antes del contenido */
.tech-theme .product-info::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.06) 50%,
        transparent 100%);
    margin-bottom: var(--tech-spacing-sm);
    border-radius: var(--tech-radius-full);
}

/* Badge de marca — glass claro sobre dark */
.tech-theme .product-brand {
    display: inline-block;
    font-size: 0.675rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: var(--tech-spacing-xs);
    padding: 0.22rem 0.70rem;
    border-radius: 7px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.30);
    color: #93c5fd;
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.tech-theme .product-card-tech:hover .product-brand {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.45);
    color: #bfdbfe;
}

/* Nombre */
.product-name {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 var(--tech-spacing-sm) 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.product-name a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}

.product-name a:hover { color: #93c5fd; }

/* Rating */
.product-rating {
    display: flex;
    align-items: center;
    gap: var(--tech-spacing-xs);
    margin-bottom: var(--tech-spacing-sm);
}

.product-rating-stars {
    display: flex;
    gap: 2px;
    color: #f59e0b;
    font-size: 0.75rem;
}

.product-rating-stars i.empty { color: rgba(255,255,255,0.18); }
.product-rating-count { font-size: 0.75rem; color: rgba(255,255,255,0.45); }

/* Especificaciones — chips glass */
.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tech-spacing-xs);
    margin-bottom: var(--tech-spacing-sm);
}

.tech-theme .product-spec {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.26rem 0.56rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 7px;
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.60);
    transition:
        background   220ms ease,
        border-color 220ms ease,
        color        220ms ease;
}

.tech-theme .product-card-tech:hover .product-spec {
    background: rgba(59, 130, 246, 0.07);
    border-color: rgba(59, 130, 246, 0.22);
    color: #1d4ed8;
}

.tech-theme .product-spec i {
    font-size: 0.60rem;
    background: var(--card-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Precios */
.product-prices {
    display: flex;
    align-items: baseline;
    gap: var(--tech-spacing-sm);
    margin-bottom: var(--tech-spacing-md);
}

/* Precio actual — gradiente azul eléctrico a sky */
.tech-theme .product-price-current {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-price-old {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.35);
    text-decoration: line-through;
}

.tech-theme .product-discount-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #059669;
    background: rgba(5, 150, 105, 0.10);
    border: 1px solid rgba(5, 150, 105, 0.20);
    border-radius: 20px;
    padding: 0.12rem 0.50rem;
}

/* Stock */
.product-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.70rem;
    font-weight: 600;
    margin-bottom: var(--tech-spacing-sm);
    padding: 0.26rem 0.62rem;
    border-radius: var(--tech-radius-full);
    border: 1px solid transparent;
}

.product-stock.in-stock {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.22);
}

.product-stock.low-stock {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.22);
}

.product-stock.out-of-stock {
    color: #f87171;
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.22);
}

/* Vendidos */
.product-sold-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.70rem;
    font-weight: 600;
    color: #c2410c;
    margin-bottom: var(--tech-spacing-sm);
    padding: 0.26rem 0.62rem;
    border-radius: var(--tech-radius-full);
    background: rgba(234, 88, 12, 0.07);
    border: 1px solid rgba(234, 88, 12, 0.20);
}

.product-sold-count i { color: #c2410c; }

/* ============================================
   BOTÓN AGREGAR AL CARRITO
   Gradient eco del navbar icon — azul eléctrico + sky
============================================ */
.tech-theme .btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tech-spacing-sm);
    width: 100%;
    padding: 0.80rem 1rem;
    /* Gradiente vertical con el color de la categoría */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, white)  0%,
        var(--cat-clr, #3b82f6)                                  45%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 75%, black)  100%
    );
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 15px;
    cursor: pointer;
    box-shadow:
        0 10px 40px -10px color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, black);
    border: none;
    position: relative;
    overflow: hidden;
    transition:
        background   300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform    300ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow   300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shimmer sweep */
.tech-theme .btn-add-cart::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.26),
        transparent);
    transition: left 0.55s ease;
}

/* Halo radial con color de categoría */
.tech-theme .btn-add-cart::after {
    content: '';
    position: absolute;
    bottom: -18px; left: 50%;
    transform: translateX(-50%);
    width: 80%; height: 36px;
    background: radial-gradient(ellipse,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 30%, transparent) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.tech-theme .btn-add-cart:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 65%, white)  0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 90%, white)  35%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, black)  100%
    );
    transform: translateY(-3px);
    box-shadow:
        0 18px 60px -10px color-mix(in srgb, var(--cat-clr, #3b82f6) 75%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2px 4px color-mix(in srgb, var(--cat-clr, #3b82f6) 40%, black);
    border-color: transparent;
}

.tech-theme .btn-add-cart:hover::before { left: 100%; }
.tech-theme .btn-add-cart:hover::after  { opacity: 1; }

.tech-theme .btn-add-cart:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cat-clr, #3b82f6) 22%, transparent);
}

.tech-theme .btn-add-cart:disabled {
    background: rgba(226, 232, 240, 0.72);
    border-color: rgba(226, 232, 240, 0.52);
    color: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tech-theme .btn-add-cart:disabled::before,
.tech-theme .btn-add-cart:disabled::after { display: none; }

.btn-add-cart i { font-size: 0.9375rem; }

/* ============================================
   VARIANTE HORIZONTAL
============================================ */
.product-card-tech.horizontal { display: flex; flex-direction: row; }

.tech-theme .product-card-tech.horizontal .product-image-wrapper {
    width: 200px;
    padding-top: 0;
    height: 200px;
    flex-shrink: 0;
    border-radius: var(--card-radius) 0 0 var(--card-radius);
    border-bottom: none;
    border-right: 1px solid rgba(59, 130, 246, 0.10);
}

.product-card-tech.horizontal .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================
   VARIANTE COMPACTA
============================================ */
.product-card-tech.compact .product-image-wrapper { padding-top: 80%; }
.product-card-tech.compact .product-info         { padding: var(--tech-spacing-sm); }
.product-card-tech.compact .product-name         { font-size: 0.875rem; min-height: auto; -webkit-line-clamp: 1; }
.product-card-tech.compact .product-prices       { margin-bottom: var(--tech-spacing-sm); }

.tech-theme .product-card-tech.compact .btn-add-cart {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 11px;
}

/* ============================================
   SKELETON LOADER
============================================ */
.product-card-skeleton {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.60);
    border-radius: var(--card-radius);
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.skeleton-image {
    width: 100%;
    padding-top: 100%;
    background: linear-gradient(90deg,
        rgba(241, 245, 249, 0.9) 25%,
        rgba(214, 222, 240, 0.95) 50%,
        rgba(241, 245, 249, 0.9) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.6s infinite;
}

.skeleton-text {
    height: 14px;
    background: linear-gradient(90deg,
        rgba(241, 245, 249, 0.9) 25%,
        rgba(214, 222, 240, 0.95) 50%,
        rgba(241, 245, 249, 0.9) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.6s infinite;
    border-radius: 7px;
    margin: var(--tech-spacing-sm);
}

.skeleton-text.short  { width: 60%; }
.skeleton-text.medium { width: 80%; }

@keyframes skeleton-loading {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
    .products-tech-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .products-tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tech-spacing-md);
    }
    .product-card-tech.horizontal { flex-direction: column; }
    .tech-theme .product-card-tech.horizontal .product-image-wrapper {
        width: 100%; height: auto; padding-top: 100%;
        border-radius: var(--card-radius-img);
        border-right: none;
        border-bottom: 1px solid rgba(59, 130, 246, 0.10);
    }
}

@media (max-width: 768px) {
    .products-tech-grid              { gap: var(--tech-spacing-sm); }
    .product-info                    { padding: var(--tech-spacing-sm); }
    .product-name                    { font-size: 0.875rem; }
    .tech-theme .product-price-current { font-size: 1.125rem; }
    .tech-theme .overlay-btn         { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
    .products-tech-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-theme .product-brand { font-size: 0.6875rem; }
    .product-name {
        font-size: 0.8125rem;
        min-height: auto;
        -webkit-line-clamp: 2;
    }
    .product-prices { flex-direction: column; gap: 0; }
    .tech-theme .btn-add-cart {
        padding: 0.625rem;
        font-size: 0.8125rem;
    }
    .btn-add-cart span { display: none; }
}

/* ============================================================
   OVERLAY PILL — pill único reemplaza los 2 círculos separados
   ============================================================ */
.tech-theme .product-overlay {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
}

.overlay-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(6, 10, 22, 0.84);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 240ms ease, transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-theme .product-card-tech:hover .overlay-pill {
    opacity: 1;
    transform: translateY(0);
}

.overlay-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 40px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.7375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease;
}

.overlay-pill-btn i { font-size: 0.8125rem; }

.overlay-pill-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.overlay-pill-sep {
    display: block;
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.11);
    flex-shrink: 0;
    margin: 0 2px;
}

.overlay-pill-btn--cart {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 78%, white) 0%,
        var(--cat-clr, #3b82f6) 100%);
    color: #ffffff;
    box-shadow: 0 2px 14px color-mix(in srgb, var(--cat-clr, #3b82f6) 38%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.overlay-pill-btn--cart:hover {
    background: linear-gradient(135deg,
        var(--cat-clr, #3b82f6) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 72%, black) 100%);
    color: #ffffff;
    box-shadow: 0 4px 22px color-mix(in srgb, var(--cat-clr, #3b82f6) 56%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Mobile: pill siempre visible, centrada en la parte inferior */
@media (max-width: 768px) {
    .tech-theme .product-overlay {
        justify-content: center;
        align-items: flex-end;
        padding: 0 8px 10px;
    }
    .overlay-pill {
        opacity: 1;
        transform: translateY(0);
    }
    .overlay-pill-btn { padding: 6px 12px; font-size: 0.6875rem; }
    .overlay-pill-btn i { font-size: 0.75rem; }
}

@media (max-width: 380px) {
    .overlay-pill-btn { padding: 6px 10px; }
    .overlay-pill-btn span { display: none; }
}

/* ============================================================
   CARD FOOTER COMPACTO — precio + botón agregar en una fila
   ============================================================ */
.clp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.clp-card-footer .product-prices {
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.clp-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 0.52rem 1.05rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 78%, white) 0%,
        var(--cat-clr, #3b82f6) 55%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 72%, black) 100%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cat-clr, #3b82f6) 32%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.clp-btn-add i { font-size: 0.8125rem; }

.clp-btn-add:hover {
    box-shadow: 0 6px 24px color-mix(in srgb, var(--cat-clr, #3b82f6) 52%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.40);
    transform: translateY(-1px);
}

.clp-btn-add:active { transform: scale(0.97); }

.clp-stock-out-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(239, 68, 68, 0.65);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .clp-btn-add span { display: none; }
    .clp-btn-add { padding: 0.52rem 0.72rem; }
}

/* ============================================================
   EMPTY RATING — 5 estrellas vacías + label "Nuevo"
   ============================================================ */
.clp-stars-empty {
    display: inline-flex;
    gap: 2px;
    color: rgba(255, 255, 255, 0.16);
    font-size: 0.70rem;
}

.clp-no-reviews-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.30);
    letter-spacing: 0.04em;
}

/* ============================================================
   REDESIGN v4 — Luxury Tech Premium
   Eliminar overlay duplicado · Imagen protagonista · CTA limpio
   ============================================================ */

/* ── Card completa clickeable vía onclick inline ── */
.tech-theme .product-card-tech { cursor: pointer; }
.tech-theme .product-info      { cursor: pointer; }

/* ── Ocultar overlay (eye + carrito flotante) — eliminado del diseño ── */
.tech-theme .product-overlay,
.tech-theme .overlay-btn {
    display: none;
}

/* ── Ocultar "Sin reseñas" — reduce ruido visual ── */
.tech-theme .product-rating--empty {
    display: none;
}

/* ── Favorito — siempre visible en mobile, más compacto ── */
.tech-theme .product-favorite {
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    font-size: 0.875rem;
    background: rgba(8, 13, 26, 0.65);
}

/* ── Nombre del producto — más compacto, mejor densidad ── */
.tech-theme .product-name {
    font-size: 0.875rem;
    min-height: 2.4em;
    margin: 0 0 6px 0;
}

/* ── Precio — más prominente ── */
.tech-theme .product-price-current {
    font-size: 1.2rem;
    letter-spacing: -0.025em;
}

/* ── Precios — reducir margen inferior ── */
.tech-theme .product-prices {
    margin-bottom: 10px;
}

/* ── CTA "Agregar al carrito" — estilo ghost premium con hover solid ── */
.tech-theme .btn-add-cart {
    padding: 0.68rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.10);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.28);
    box-shadow: none;
    transition:
        background 250ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 250ms ease,
        color 250ms ease,
        transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 250ms ease;
}

/* Línea superior luminosa del botón */
.tech-theme .btn-add-cart::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    width: auto; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(147, 197, 253, 0.55) 50%,
        transparent 100%);
    transition: left 250ms ease, right 250ms ease;
}

.tech-theme .btn-add-cart::after { display: none; }

.tech-theme .btn-add-cart:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: rgba(96, 165, 250, 0.50);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px -6px rgba(37, 99, 235, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.tech-theme .btn-add-cart:hover::before { left: 8%; right: 8%; }

.tech-theme .btn-add-cart:active { transform: translateY(0) scale(0.97); }

/* Shimmer — desactivado en el ghost style */
.tech-theme .btn-add-cart .shimmer { display: none; }

/* ── Info padding — más respiración vertical ── */
.tech-theme .product-info {
    padding: 14px 14px 16px;
}

/* ── Card hover — levantar menos agresivo para mobile ── */
@media (max-width: 768px) {
    .tech-theme .product-card-tech:hover {
        transform: translateY(-4px);
    }
    .tech-theme .product-image-wrapper img {
        width: 84%; height: 84%;
    }
    .tech-theme .product-price-current { font-size: 1.1rem; }
    .tech-theme .product-name { font-size: 0.8125rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .tech-theme .product-card-tech,
    .tech-theme .product-image-wrapper img,
    .tech-theme .btn-add-cart,
    .tech-theme .product-favorite {
        transition: none;
        animation: none;
    }
}