/**
 * Tarjeta de producto — estilos ÚNICOS (v9.37.0, dirección «ficha técnica»).
 *
 * Una sola hoja para catálogo, categorías, home, ofertas y relacionados: el
 * marcado lo pinta template-parts/producto-card.php.
 *
 * Criterio: el modelo primero y en monoespaciada (se busca por referencia),
 * el stock como número y el precio del nivel del cliente como cifra. Sin
 * sombras ni degradados: la jerarquía la hacen el tamaño y el espacio.
 *
 * La monoespaciada es la del sistema: ninguna petición extra por una fuente.
 *
 * Cubre las dos vistas del catálogo (cuadrícula y `.hik-view-list`) y el
 * teléfono, donde la lista SIGUE siendo horizontal en vez de apilarse.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */

.hik-product-card {
    --pc-sup:    #14171c;
    --pc-sup2:   #1b1f25;
    --pc-txt:    #f2f4f7;
    --pc-mut:    #b3bcc7;
    --pc-bor:    rgba(255, 255, 255, .09);
    --pc-bor2:   rgba(255, 255, 255, .18);
    --pc-acc:    #ff5069;
    --pc-ok:     #34d399;
    --pc-oksu:   rgba(52, 211, 153, .15);
    --pc-warn:   #fbbf24;
    --pc-warnsu: rgba(251, 191, 36, .15);
    --pc-gris:   rgba(156, 163, 175, .18);
    --pc-cond:   #a78bfa;   /* etiqueta de condición especial */
    --pc-plato:  #f4f5f7;
    --pc-sobreacc: #12161c;
    --pc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
    .hik-product-card {
        --pc-sup: #ffffff; --pc-sup2: #f6f7f9; --pc-txt: #12161c; --pc-mut: #4b5563;
        --pc-bor: rgba(16, 20, 26, .12); --pc-bor2: rgba(16, 20, 26, .24);
        --pc-acc: #c8102e; --pc-ok: #0f7b56; --pc-oksu: rgba(15, 123, 86, .12);
        --pc-warn: #b45309; --pc-warnsu: rgba(180, 83, 9, .12); --pc-gris: rgba(100, 110, 120, .12);
        --pc-cond: #6d28d9;
        --pc-plato: #ffffff; --pc-sobreacc: #ffffff;
    }
}

[data-color-mode="dark"] .hik-product-card {
    --pc-sup: #14171c; --pc-sup2: #1b1f25; --pc-txt: #f2f4f7; --pc-mut: #a3acb8;
    --pc-bor: rgba(255, 255, 255, .09); --pc-bor2: rgba(255, 255, 255, .18);
    --pc-acc: #ff5069; --pc-ok: #34d399; --pc-oksu: rgba(52, 211, 153, .15);
    --pc-warn: #fbbf24; --pc-warnsu: rgba(251, 191, 36, .15); --pc-gris: rgba(156, 163, 175, .18);
    --pc-cond: #a78bfa;
    --pc-plato: #f4f5f7; --pc-sobreacc: #12161c;
}

[data-color-mode="light"] .hik-product-card {
    --pc-sup: #ffffff; --pc-sup2: #f6f7f9; --pc-txt: #12161c; --pc-mut: #4b5563;
    --pc-bor: rgba(16, 20, 26, .12); --pc-bor2: rgba(16, 20, 26, .24);
    --pc-acc: #c8102e; --pc-ok: #0f7b56; --pc-oksu: rgba(15, 123, 86, .12);
    --pc-warn: #b45309; --pc-warnsu: rgba(180, 83, 9, .12); --pc-gris: rgba(100, 110, 120, .12);
    --pc-cond: #6d28d9;
    --pc-plato: #ffffff; --pc-sobreacc: #ffffff;
}

/* ── La tarjeta ──────────────────────────────────────────────────────── */

.hik-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pc-sup);
    border: 1px solid var(--pc-bor);
    border-radius: 10px;
    /* visible y no hidden (v9.39.1): el desplegable del menú de tres puntos
       tiene que poder salirse de la tarjeta. Las esquinas de la foto las
       recorta la propia foto, que ya lleva su radio y su overflow. */
    overflow: visible;
    color: var(--pc-txt);
    transition: border-color .18s ease, transform .18s ease;
}

.hik-product-card:hover { border-color: var(--pc-bor2); }
.hik-product-card--agotado { opacity: .92; }

/* ── Imagen y distintivos ────────────────────────────────────────────── */

/* Cuadrada y blanca, como antes: muchas fotos NO son PNG con transparencia,
   traen su propio fondo blanco. Por eso el plato es blanco y las dos esquinas
   de abajo van rectas: así el blanco de la foto no se ve recortado. */
.hik-product-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    flex: 0 0 auto;
}

.hik-product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
}

.hik-product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .3s ease;
}

.hik-product-card:hover .hik-product-image img { transform: scale(1.04); }
.hik-product-card--agotado .hik-product-image img { filter: grayscale(1); opacity: .6; }

.hik-product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #9aa0a6;
}

.hik-product-marcas {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    max-width: calc(100% - 92px);
}

.hik-stock-chip,
.hik-badge-hot,
.hik-badge-condicion,
.hik-badge-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    color: #fff;
    white-space: nowrap;
}

.hik-stock-chip--ok     { background: #0f7b56; }
.hik-stock-chip--bajo   { background: #b45309; }
.hik-stock-chip--pedido { background: #4b5563; }
.hik-stock-chip--nulo   { background: #4b5563; }
.hik-badge-hot          { background: #e31937; }
.hik-badge-condicion    { background: #7c3aed; }
.hik-badge-status       { background: rgba(20, 23, 28, .78); }

/* v9.46.0: etiqueta opcional (fenix_producto_card 'etiqueta'), abajo a la
   izquierda de la foto para no chocar con la pastilla de existencias ni con
   la insignia HOT. Blanco sobre #e31937 da 4,6:1 y sobre #b45309, 5,0:1. */
.hik-card-etiqueta {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.hik-card-etiqueta--vence { background: #e31937; }
.hik-card-etiqueta--dias  { background: #b45309; }

.hik-badge-hot {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 4;
}

/* ── Menú de tres puntos ─────────────────────────────────────────────── */
/* Lista y comparador salieron de encima de la foto: tapaban el producto y
   chocaban con la pastilla de existencias.
   v9.39.1: y salieron TAMBIÉN del recuadro de la foto. Colgando de ella, en
   la vista lista (miniatura de 132 px) el botón se montaba sobre el producto
   y el desplegable lo recortaba el overflow de la miniatura: el menú existía
   pero no se podía leer. Ahora cuelga del contenido, que es igual de ancho
   que la tarjeta en las dos vistas. */

.hik-card-menu {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 6;
}

.hik-card-menu__btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    /* Ya no va sobre una foto: el círculo oscuro translúcido sobraba y en
       modo claro era una mancha negra sobre la tarjeta blanca. */
    background: transparent;
    color: var(--pc-mut);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.hik-card-menu__btn svg { width: 17px; height: 17px; }
.hik-card-menu__btn:hover,
.hik-card-menu__btn[aria-expanded="true"] { background: var(--pc-sup2); color: var(--pc-txt); }
.hik-card-menu__btn:focus-visible { outline: 2px solid var(--pc-acc); outline-offset: 2px; }

.hik-card-menu__lista {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 186px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--pc-bor2);
    border-radius: 10px;
    background: var(--pc-sup);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.hik-card-menu__lista[hidden] { display: none; }

/* Los botones del menú también llevan .hik-favorite-btn / .hik-compare-btn
   porque de ahí cuelga el JS del portal, y esas clases traen de productos-style
   una posición absoluta y forma de círculo. Aquí se neutralizan: el selector
   con el contenedor pesa más.
   v9.39.2: el prefijo sube a .hik-product-card .hik-card-menu (0,4,0). El
   CSS en línea de hikFavorites (hikvision-parking-starter.php) trae reglas de
   modo claro de (0,3,0) y (0,4,0) que se imprimen DESPUÉS de esta hoja: con
   el prefijo corto, en modo claro "Guardar" salía relleno de rojo en todo
   producto ya guardado, aunque el ratón no estuviera encima. */
.hik-product-card .hik-card-menu .hik-card-menu__lista .hik-card-menu__item {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    height: auto;
    min-height: 0;
    inset: auto;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--pc-txt);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transform: none;
}

.hik-product-card .hik-card-menu .hik-card-menu__lista .hik-card-menu__item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.hik-product-card .hik-card-menu .hik-card-menu__lista .hik-card-menu__item:focus-visible { outline: 2px solid var(--pc-acc); outline-offset: -2px; }
.hik-product-card .hik-card-menu .hik-card-menu__lista .hik-card-menu__item.active { background: transparent; color: var(--pc-acc); }
.hik-product-card .hik-card-menu .hik-card-menu__lista .hik-card-menu__item.active svg { fill: currentColor; }

/* El hover es el mismo del botón «Agregar»: relleno de acento y texto encima
   (v9.39.2). Va después de .active para que también mande sobre un producto
   que ya está guardado. */
.hik-product-card .hik-card-menu .hik-card-menu__lista .hik-card-menu__item:hover,
.hik-product-card .hik-card-menu .hik-card-menu__lista .hik-card-menu__item.active:hover {
    background: var(--pc-acc);
    color: var(--pc-sobreacc);
    transform: none;
}

/* ── Contenido ───────────────────────────────────────────────────────── */

.hik-product-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px 13px;
    flex-grow: 1;
    min-width: 0;
}

/* v9.42.1: el modelo va con su botón de copiar en una fila. El hueco para
   los tres puntos, que van en esta misma línea, pasa a la fila. */
.hik-product-modelo-fila {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding-right: 32px;
}

.hik-product-modelo {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--pc-mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pc-txt);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hik-product-modelo:hover { color: var(--pc-acc); }

.hik-card-copiar {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pc-mut);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.hik-card-copiar .fx-ico { width: 21px; height: 21px; flex-basis: 21px; }
.hik-card-copiar:hover { background: var(--pc-sup2); color: var(--pc-txt); }
.hik-card-copiar:focus-visible { outline: 2px solid var(--pc-acc); outline-offset: 2px; }
.hik-card-copiar.is-copiado { color: var(--pc-ok); }

/* Aviso «Copiado» encima del botón, 1,8 s. El anuncio para lectores de
   pantalla lo hace producto-card.js en una región viva aparte. */
.hik-card-copiar::after {
    content: "Copiado";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 25;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--pc-txt);
    color: var(--pc-sup);
    font: 600 11.5px/1.2 system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease;
}

.hik-card-copiar.is-copiado::after { opacity: 1; transform: translate(-50%, 0); }

/* En táctil los iconos doodle llevan la mancha completa; en un botón tan
   pequeño pesaba demasiado. Aquí crece solo al copiar, como confirmación. */
@media (hover: none) {
    .hik-card-copiar .fx-ico .bl { transform: scale(.55); }
    .hik-card-copiar.is-copiado .fx-ico .bl { transform: scale(1); }
}

/* Teléfono: con el botón de copiar al lado, el modelo a una línea quedaba en
   ~11 caracteres («RG-RAP1200…»). Pasa a dos renglones y se ve entero. */
@media (max-width: 480px) {
    .hik-product-modelo-fila { align-items: flex-start; }
    .hik-product-modelo {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }
    .hik-card-copiar { width: 26px; height: 26px; margin-top: -3px; }
    .hik-card-copiar .fx-ico { width: 19px; height: 19px; flex-basis: 19px; }
}

.hik-product-short-desc {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.45;
    color: var(--pc-mut);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Globo con la descripción completa (v9.39.2) ─────────────────────── */
/* La tarjeta enseña dos renglones; al quedarse el ratón sobre ellos aparece
   el texto entero, como el globo de Syscom. Solo en cuadrícula y solo con
   ratón: en táctil no hay hover y el texto completo está en la ficha.
   pointer-events: none — el globo no roba el clic: si el ratón baja hacia
   el precio o «Agregar», el globo se va y el botón responde. */

.hik-product-desc { position: relative; }

.hik-desc-pop { display: none; }

@media (hover: hover) and (pointer: fine) {
    /* Arranca ENCIMA de los dos renglones (los repite completos) y no
       debajo: así gana ~45 px. En los carruseles de la home la pista tiene
       overflow y el globo más largo quedaba a 2 px de recortarse. */
    .hik-desc-pop {
        position: absolute;
        top: -9px;
        left: -6px;
        right: -6px;
        z-index: 15;
        display: block;
        padding: 12px 14px 13px;
        border: 1px solid var(--pc-bor2);
        border-radius: 10px;
        background: var(--pc-sup2);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
        color: var(--pc-txt);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        /* Al salir se va de inmediato. */
        transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
    }

    /* Al entrar espera un instante: cruzar la cuadrícula con el ratón no
       debe ir abriendo globos por el camino. */
    .hik-product-desc:hover .hik-desc-pop {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .16s ease .35s, transform .16s ease .35s, visibility 0s linear .35s;
    }

    .hik-view-list .hik-desc-pop { display: none; }
}

.hik-desc-pop__titulo {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pc-txt);
}

.hik-desc-pop__modelo {
    margin: 0 0 8px;
    font-family: var(--pc-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pc-mut);
    overflow-wrap: anywhere;
}

/* Sin nombre comercial, la referencia hace de título. */
.hik-desc-pop__modelo:first-child {
    font-size: 13px;
    color: var(--pc-txt);
}

.hik-desc-pop__texto {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pc-mut);
}

.hik-desc-pop__lista {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pc-mut);
}

.hik-desc-pop__lista li + li { margin-top: 3px; }
.hik-desc-pop__lista li::marker { color: var(--pc-acc); }

@media (prefers-reduced-motion: reduce) {
    .hik-desc-pop,
    .hik-product-desc:hover .hik-desc-pop { transform: none; transition-duration: .01ms; }
}

.hik-product-datos {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 10px;
    font-size: 12px;
}

.hik-product-datos dt { color: var(--pc-mut); }
.hik-product-datos dd { margin: 0; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hik-estado--ok     { color: var(--pc-ok); }
.hik-estado--bajo   { color: var(--pc-warn); }
.hik-estado--pedido,
.hik-estado--nulo   { color: var(--pc-mut); }

.hik-product-marca {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--pc-bor2);
}

.hik-product-marca:hover { color: var(--pc-acc); }

.hik-product-tech-badges { display: flex; flex-wrap: wrap; gap: 5px; }

/* v9.43.2: la chapa «+N» volvía a verse igual que una tecnología más; en
   9.33.1 tenía fondo propio (archive-productos.css) y se perdió al unificar. */
.hik-tech-overflow { border-style: dashed; color: var(--pc-txt); }

.hik-tech-badge-small {
    padding: 2px 7px;
    border: 1px solid var(--pc-bor);
    border-radius: 4px;
    background: var(--pc-sup2);
    color: var(--pc-mut);
    font-size: 11px;
    font-weight: 600;
}

/* ── Precio ──────────────────────────────────────────────────────────── */

.hik-product-price {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--pc-bor);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.hik-price-tier {
    flex: 0 0 100%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pc-mut);
}

.hik-price-value {
    font-family: var(--pc-mono);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pc-txt);
}

.hik-price-original {
    font-family: var(--pc-mono);
    font-size: 12px;
    color: var(--pc-mut);
    text-decoration: line-through;
}

.hik-price-iva { font-size: 12px; color: var(--pc-mut); }

.hik-price-discount-badge {
    padding: 2px 7px;
    border-radius: 4px;
    background: #e31937;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.hik-price-discount-badge--publico { background: var(--pc-gris); color: var(--pc-txt); }

.hik-btn-login-price {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--pc-acc);
    border-radius: 8px;
    color: var(--pc-acc);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: color .18s ease, border-color .18s ease;
}

.hik-btn-login-price:hover { color: var(--pc-txt); border-color: var(--pc-txt); }

.hik-condicion-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--pc-sup2);
    font-size: 11px;
}

/* v9.43.2: el morado claro (#a78bfa) daba 2,5:1 sobre el fondo claro, por
   debajo del mínimo AA de 4,5:1. Se tokeniza con un morado oscuro en claro. */
.hik-condicion-label { color: var(--pc-cond, #a78bfa); font-weight: 600; }
.hik-condicion-price { font-family: var(--pc-mono); font-size: 14px; font-weight: 600; }

/* ── Carrito y agotado ───────────────────────────────────────────────── */

.hik-cart-row { display: flex; align-items: center; gap: 8px; }

/* v9.47.0 — Cuadrícula de 5 por fila: la tarjeta baja a ~190 px y cantidad +
   «Agregar» (208 px) se salían. El renglón se mide a sí mismo (container
   query) y se compacta por pasos: botones más finos, luego sin el ícono y,
   si aun así no cabe, sin el selector de cantidad (como en el teléfono: se
   agrega de a uno y se ajusta en el carrito). Solo en cuadrícula: en la
   vista lista el renglón toma el ancho de su contenido y medirlo lo anularía. */
.hik-products-grid:not(.hik-view-list) .hik-cart-row {
    container: hik-cart-row / inline-size;
}
/* Con `.hik-cart-row` delante: estas reglas van antes que las de base de
   cada botón y, a igual peso, perderían. */
@container hik-cart-row (max-width: 207px) {
    .hik-cart-row .hik-cart-qty-mini-btn { width: 26px; }
    .hik-cart-row .hik-cart-qty-mini-input { width: 28px; }
    .hik-cart-row .hik-cart-btn { padding-left: 10px; padding-right: 10px; gap: 5px; }
}
@container hik-cart-row (max-width: 187px) {
    .hik-cart-row .hik-cart-qty-mini-btn { width: 24px; }
    .hik-cart-row .hik-cart-qty-mini-input { width: 26px; }
    .hik-cart-row .hik-cart-btn svg { display: none; }
}
@container hik-cart-row (max-width: 159px) {
    .hik-cart-row .hik-cart-qty-mini { display: none; }
}

.hik-cart-qty-mini {
    display: flex;
    align-items: center;
    border: 1px solid var(--pc-bor2);
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
}

.hik-cart-qty-mini-btn {
    width: 30px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--pc-txt);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.hik-cart-qty-mini-btn:hover { background: var(--pc-sup2); }

.hik-cart-qty-mini-input {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--pc-txt);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    -moz-appearance: textfield;
}

.hik-cart-qty-mini-input::-webkit-outer-spin-button,
.hik-cart-qty-mini-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hik-cart-btn {
    flex-grow: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 14px;
    border: 1.5px solid var(--pc-acc);
    border-radius: 8px;
    background: transparent;
    color: var(--pc-acc);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.hik-cart-btn:hover { background: var(--pc-acc); color: var(--pc-sobreacc); }
.hik-cart-btn:focus-visible { outline: 2px solid var(--pc-acc); outline-offset: 2px; }

/* Agotado: el botón de agregar se sustituye, no se deshabilita a medias. */
.hik-btn-agotado {
    width: 100%;
    min-height: 36px;
    padding: 8px 14px;
    border: 1.5px dashed var(--pc-bor2);
    border-radius: 8px;
    background: transparent;
    color: var(--pc-mut);
    font-size: 13px;
    font-weight: 700;
    cursor: not-allowed;
}

.hik-product-consultar {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: var(--pc-acc);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.hik-product-consultar:hover { border-bottom-color: currentColor; }

/* v9.37.1: oculto a pedido de Julián. El modelo y la imagen ya llevan a la
   ficha; se quita el enlace repetido. Para devolverlo: display: inline-flex. */
.hik-product-link { display: none; }

.hik-product-link--visible {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pc-mut);
    text-decoration: none;
}

.hik-product-link:hover { color: var(--pc-acc); }
.hik-product-link svg { width: 14px; height: 14px; }

/* ── Vista LISTA ─────────────────────────────────────────────────────── */

.hik-products-grid.hik-view-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hik-view-list .hik-product-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: 10px;
}

.hik-view-list .hik-product-image {
    width: 132px;
    height: auto;
    min-height: 104px;
    flex: 0 0 132px;
    aspect-ratio: auto;
    border-radius: 10px 0 0 10px;
}

.hik-view-list .hik-product-marcas {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
}

/* El menú pasa a ser la última columna de la fila, centrado: es la acción de
   la fila, como en una tabla. */
.hik-view-list .hik-card-menu {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
}

.hik-view-list .hik-product-modelo-fila { padding-right: 0; }

.hik-view-list .hik-product-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 230px 30px;
    align-items: center;
    gap: 6px 18px;
    padding: 12px 16px;
}

.hik-view-list .hik-product-modelo-fila { grid-column: 1; grid-row: 1; }
.hik-view-list .hik-product-desc { grid-column: 1; grid-row: 2; min-width: 0; }
.hik-view-list .hik-product-short-desc { -webkit-line-clamp: 1; margin: 0; }
.hik-view-list .hik-product-datos { grid-column: 2; grid-row: 1 / span 2; }
.hik-view-list .hik-product-tech-badges { display: none; }

.hik-view-list .hik-product-price {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    padding: 0;
    border: 0;
    justify-content: flex-end;
}

.hik-view-list .hik-price-tier { flex: 0 0 100%; text-align: right; }
.hik-view-list .hik-cart-row { grid-column: 3; grid-row: 2; justify-content: flex-end; }
.hik-view-list .hik-cart-btn { flex-grow: 0; }
.hik-view-list .hik-btn-agotado { width: auto; }
.hik-view-list .hik-product-link,
.hik-view-list .hik-product-consultar { display: none; }
.hik-view-list .hik-condicion-price-row { grid-column: 1 / -1; grid-row: 3; }

/* ── Teléfono ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .hik-product-image { height: 118px; }
    .hik-product-content { padding: 11px; gap: 8px; }
    .hik-product-modelo { font-size: 12.5px; }
    .hik-price-value { font-size: 18px; }
    .hik-product-tech-badges { display: none; }

    /* Botones de dedo: 44 px reales. */
    .hik-cart-btn,
    .hik-btn-agotado,
    .hik-btn-login-price { min-height: 44px; }
    .hik-cart-qty-mini-btn,
    .hik-cart-qty-mini-input { height: 44px; }

    /* El paso de cantidad no cabe a dos columnas: se agrega de a uno y se
       ajusta en el carrito. */
    .hik-product-card[data-contexto="catalogo"] .hik-cart-qty-mini,
    .hik-product-card[data-contexto="categoria"] .hik-cart-qty-mini,
    .hik-product-card[data-contexto="similares"] .hik-cart-qty-mini { display: none; }

    /* La LISTA sigue siendo horizontal, que es lo que la hace útil en el
       teléfono: antes se apilaba y quedaba igual que la cuadrícula. */
    .hik-view-list .hik-product-card { flex-direction: row; }
    .hik-view-list .hik-product-image { width: 92px; flex: 0 0 92px; min-height: 92px; }
    .hik-view-list .hik-product-content {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 6px;
        padding: 10px 12px;
    }
    /* El desplegable se ancla a la TARJETA y no al botón: a dos columnas la
       tarjeta mide ~166 px y un menú de 186 px se salía por el borde
       izquierdo de la pantalla. Con el contenedor fuera del flujo
       (display: contents) el ancla pasa a ser .hik-product-content, que mide
       lo mismo que la tarjeta, así que el menú siempre cabe. (v9.39.1) */
    .hik-card-menu,
    .hik-view-list .hik-card-menu { display: contents; }

    .hik-card-menu__btn {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 6;
    }

    .hik-card-menu__lista {
        left: 8px;
        right: 8px;
        top: 44px;
        min-width: 0;
    }

    .hik-view-list .hik-product-modelo-fila { padding-right: 32px; }

    .hik-view-list .hik-product-modelo-fila,
    .hik-view-list .hik-product-desc,
    .hik-view-list .hik-product-datos,
    .hik-view-list .hik-product-price,
    .hik-view-list .hik-cart-row { grid-column: 1; grid-row: auto; }
    .hik-view-list .hik-product-price { justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--pc-bor); }
    .hik-view-list .hik-price-tier { text-align: left; }
    .hik-view-list .hik-cart-row { justify-content: flex-start; }
    .hik-view-list .hik-cart-btn { flex-grow: 1; }
    .hik-view-list .hik-btn-agotado { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hik-product-card,
    .hik-product-card *,
    .hik-product-card:hover .hik-product-image img {
        transition-duration: .01ms !important;
        transform: none !important;
    }
}

/* ── Estado «ya está en el carrito» ──────────────────────────────────── */
/* Lo marca el JS del carrito (hikCart) añadiendo .in-cart al botón. */

.hik-cart-btn.in-cart {
    border-color: #10b981;
    color: #10b981;
}

.hik-cart-btn.in-cart:hover { background: #10b981; color: #06251b; }

[data-color-mode="light"] .hik-cart-btn.in-cart { border-color: #0f7b56; color: #0f7b56; }
[data-color-mode="light"] .hik-cart-btn.in-cart:hover { background: #0f7b56; color: #fff; }

@media (prefers-color-scheme: light) {
    .hik-cart-btn.in-cart { border-color: #0f7b56; color: #0f7b56; }
    .hik-cart-btn.in-cart:hover { background: #0f7b56; color: #fff; }
}

/* v9.43.2: faltaba devolver el verde claro cuando el usuario fuerza el modo
   oscuro desde un sistema en claro; sin esto quedaba en 3,5:1. */
[data-color-mode="dark"] .hik-cart-btn.in-cart { border-color: #10b981; color: #10b981; }
[data-color-mode="dark"] .hik-cart-btn.in-cart:hover { background: #10b981; color: #06251b; }