/* ============================================================
   CATÁLOGO — archivo de productos (archive-hik_producto.php)
   Extraído del bloque style inline de la plantilla en v9.24.8: antes se
   imprimía al FINAL del template (34 KB tras ~350 KB de markup) y en
   redes lentas el catálogo se pintaba sin estilos hasta que llegaba.
   Ahora se encola en <head> desde enqueue_assets() (render-blocking
   + cacheable). Puro CSS: no usa PHP.
   ============================================================ */

/* --- Productos similares (bloque que vivía dentro del loop) --- */
.hik-similar-products {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.hik-similar-header {
    margin-bottom: 1.5rem;
}
.hik-similar-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.hik-similar-suggestion {
    font-weight: 400;
    font-size: 1rem;
    opacity: 0.8;
}
.hik-similar-subtitle {
    margin: 0;
    opacity: 0.7;
    font-size: 0.9rem;
}

/* v9.40.2: el bloque vive DENTRO de #hik-products-grid (el filtro AJAX
   reemplaza ese contenedor y así se lo lleva al volver a haber resultados).
   Sin ocupar la fila entera caía en UNA celda de la cuadrícula, y en vista
   lista —donde el contenedor es flex— el tamaño mínimo de sus columnas
   inflaba la página a 2.700 px con scroll lateral. */
.hik-products-grid > .hik-similar-products {
    grid-column: 1 / -1;
    min-width: 0;
}

.hik-products-grid.hik-similar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .hik-products-grid.hik-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En vista lista los similares también van en filas, como el resto. */
.hik-view-list .hik-products-grid.hik-similar-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ===========================================
   ARCHIVE PRODUCTOS - STYLES
   =========================================== */

/* v9.37.1: el catálogo aprovecha el ancho. Antes 95 % más 1,5rem de padding
   dejaba una franja muerta a cada lado en pantallas grandes. */
.hik-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}
/* Breadcrumb */
.hik-breadcrumb {
    padding: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.hik-breadcrumb a {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    text-decoration: none;
    transition: color 0.3s ease;
}
.hik-breadcrumb a:hover {
    color: var(--hik-primary, #E31937);
}
.hik-breadcrumb-sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}
.hik-breadcrumb-current {
    color: var(--text-primary, #fff);
}
/* Hero Section */
.hik-archive-hero {
    padding: 2rem 0 3rem;
    padding-top: 100px; /* clear fixed navbar */
    background: linear-gradient(180deg, rgba(227, 25, 55, 0.05) 0%, transparent 100%);
}
.hik-archive-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.hik-archive-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 1rem 0;
}
.hik-archive-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    margin: 0 0 1.5rem 0;
}
.hik-archive-count-badge {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background: rgba(227, 25, 55, 0.1);
    color: var(--hik-primary, #E31937);
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
}
/* Search Sticky Bar */
.hik-search-sticky {
    position: sticky;
    top: 60px; /* below fixed navbar */
    z-index: 100;
    background: var(--bg-primary, #0f0f0f);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    padding: 12px 0;
    transition: box-shadow 0.3s ease;
}
.hik-search-sticky.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.hik-search-sticky-inner {
    max-width: 95%;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.hik-search-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.hik-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    pointer-events: none;
}
.hik-search-input {
    width: 100%;
    padding: 1rem 3.5rem 1rem 3.5rem;
    background: var(--bg-card, rgba(255, 255, 255, 0.05));
    border: 2px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 50px;
    color: var(--text-primary, #fff);
    font-size: 1rem;
    transition: all 0.3s ease;
}
.hik-search-input::placeholder {
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}
.hik-search-input:focus {
    outline: none;
    border-color: var(--hik-primary, #E31937);
    background: var(--bg-card, rgba(255, 255, 255, 0.08));
}
.hik-search-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    transition: all 0.3s ease;
}
.hik-search-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary, #fff);
}
.hik-search-indicator {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}
.hik-search-indicator strong {
    color: var(--hik-primary, #E31937);
}
/* Main Layout */
.hik-main-section {
    padding: 2rem 0 4rem;
}
.hik-filter-toggle {
    display: none;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: var(--bg-card, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    transition: all 0.3s ease;
}
.hik-filter-toggle:hover {
    border-color: var(--hik-primary, #E31937);
}
.hik-filter-count {
    background: var(--hik-primary, #E31937);
    color: #fff;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}
.hik-main-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* Sidebar */
.hik-sidebar {
    position: sticky;
    top: 2rem;
}
.hik-sidebar-overlay {
    display: none;
}
.hik-sidebar-content {
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 1.5rem;
}
.hik-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.hik-sidebar-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
}
.hik-sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.3s ease;
}
.hik-sidebar-close:hover {
    color: var(--hik-primary, #E31937);
}
/* Filter Groups */
.hik-filter-group {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}
.hik-filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.hik-filter-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Category Filter */
.hik-filter-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.hik-cat-item {
    position: relative;
}
.hik-cat-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    background: none;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    width: calc(100% - 28px);
    transition: color 0.3s ease;
}
.hik-cat-toggle:hover {
    color: var(--text-primary, #fff);
}
.hik-cat-arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.hik-cat-item.open > .hik-cat-toggle .hik-cat-arrow {
    transform: rotate(90deg);
}
.hik-cat-dot {
    width: 6px;
    height: 6px;
    background: var(--hik-primary, #E31937);
    border-radius: 50%;
    flex-shrink: 0;
}
.hik-cat-toggle span:nth-child(2) {
    flex: 1;
}
.hik-cat-count {
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    font-size: 0.75rem;
}
.hik-cat-checkbox {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.hik-cat-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--hik-primary, #E31937);
}
.hik-cat-children {
    display: none;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}
.hik-cat-item.open > .hik-cat-children {
    display: block;
}
.hik-cat-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    cursor: pointer;
    transition: color 0.3s ease;
}
.hik-cat-label:hover {
    color: var(--text-primary, #fff);
}
.hik-cat-label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--hik-primary, #E31937);
}
/* Brand Filter (v9.41.0): lista con casilla, mismas filas que las categorías.
   Son ~50 marcas: la lista tiene alto máximo y su propio scroll para no
   empujar Disponibilidad y Especiales fuera de la vista. */
.hik-filter-marcas {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    margin-right: -6px;
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.hik-marca-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
.hik-marca-item:hover {
    color: var(--text-primary, #fff);
}
.hik-marca-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hik-marca-item input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--hik-primary, #E31937);
}
.hikvision-parking-page[data-color-mode="light"] .hik-marca-item {
    color: #6b7280; /* el mismo gris que las filas de categoría */
}
.hikvision-parking-page[data-color-mode="light"] .hik-marca-item:hover {
    color: #1d1d1f;
}
/* Technology Filter */
.hik-filter-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hik-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hik-tech-pill input[type="checkbox"] {
    display: none;
}
.hik-tech-pill:hover {
    border-color: var(--hik-primary, #E31937);
    color: var(--text-primary, #fff);
}
.hik-tech-pill.active {
    background: var(--hik-primary, #E31937);
    border-color: var(--hik-primary, #E31937);
    color: #fff;
}
.hik-tech-count {
    opacity: 0.7;
    font-size: 0.75rem;
}
/* Availability Filter */
.hik-filter-availability {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hik-availability-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
.hik-availability-option:hover {
    color: var(--text-primary, #fff);
}
.hik-availability-option input[type="radio"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--hik-primary, #E31937);
}
/* Clear Filters Button */
.hik-clear-filters {
    width: 100%;
    padding: 0.875rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hik-clear-filters:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}
/* Active Filters */
.hik-active-filters {
    margin-bottom: 1.5rem;
}
.hik-active-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
}
.hik-active-filters-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.hik-active-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}
.hik-active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(227, 25, 55, 0.1);
    border: 1px solid rgba(227, 25, 55, 0.2);
    border-radius: 20px;
    color: var(--hik-primary, #E31937);
    font-size: 0.8rem;
    font-weight: 500;
}
.hik-remove-filter {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.hik-remove-filter:hover {
    opacity: 1;
}
.hik-clear-all-link {
    background: none;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}
.hik-clear-all-link:hover {
    color: var(--hik-primary, #E31937);
}
/* Filter Bar */
.hik-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    margin-bottom: 2rem;
}
.hik-filter-bar-left {
    font-size: 0.9rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.hik-filter-bar-left strong {
    color: var(--text-primary, #fff);
}
.hik-filter-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.hik-filter-bar-right label {
    font-size: 0.9rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
#hik-sort-select {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
#hik-sort-select:focus {
    outline: none;
    border-color: var(--hik-primary, #E31937);
}
/* Products Grid */
.hik-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
/* Inline status badge (inside bottom-row) — hidden in grid {
    position: static;
    display: none;
}
/* View Toggle */
.hik-view-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    padding: 0.2rem;
}
.hik-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    cursor: pointer;
    transition: all 0.2s ease;
}
.hik-view-btn:hover {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.05);
}
.hik-view-btn.active {
    background: var(--hik-primary, #E31937);
    color: #fff;
}
/* Special Filters (HOT,
Descuento,
Promocion) */
.hik-filter-specials {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hik-special-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
.hik-special-filter:hover {
    color: var(--text-primary, #fff);
}
.hik-special-filter input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--hik-primary, #E31937);
}
.hik-special-filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hik-special-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hik-special-dot--hot {
    background: #E31937;
    box-shadow: 0 0 6px rgba(227, 25, 55, 0.6);
}
.hik-special-dot--descuento {
    background: #10b981;
}
.hik-special-dot--promo {
    background: #f59e0b;
}
/* List: show inline status badge {
    display: inline-block;
}
/* List view: show inline actions {
    display: flex;
    gap: 0.75rem;
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
/* No Products */
.hik-no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}
.hik-no-products h3 {
    font-size: 1.25rem;
    color: var(--text-primary, #fff);
    margin: 1rem 0 0.5rem 0;
}
.hik-no-products p {
    margin: 0;
}
/* Pagination */
.hik-pagination-wrapper {
    margin-top: 3rem;
}
.hik-load-more {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2rem;
    padding: 1rem 2rem;
    background: var(--hik-primary, #E31937);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hik-load-more:hover {
    background: #c01530;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(227, 25, 55, 0.3);
}
.hik-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.hik-pagination {
    display: flex;
    justify-content: center;
}
.hik-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
}
.hik-pagination li a,
.hik-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 1rem;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.hik-pagination li a:hover {
    border-color: var(--hik-primary, #E31937);
    color: var(--hik-primary, #E31937);
}
.hik-pagination li span.current {
    background: var(--hik-primary, #E31937);
    border-color: var(--hik-primary, #E31937);
    color: #fff;
}
/* CTA Section */
.hik-cta-section {
    padding: 4rem 0;
}
.hik-cta-box {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.1) 0%, rgba(227, 25, 55, 0.05) 100%);
    border: 1px solid rgba(227, 25, 55, 0.2);
    border-radius: 20px;
}
.hik-cta-box h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 1rem 0;
}
.hik-cta-box p {
    font-size: 1.1rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    margin: 0 0 2rem 0;
}
.hik-btn-whatsapp-large {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 3rem;
    background: #25D366;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.hik-btn-whatsapp-large:hover {
    background: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
}
/* Loading State */
.hik-loading {
    opacity: 0.6;
    pointer-events: none;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 1280px) {
    .hik-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1024px) {
.hik-main-layout {
        grid-template-columns: 240px 1fr;
        gap: 2rem;
    }
.hik-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
.hik-archive-title {
        font-size: 2rem;
    }
.hik-filter-toggle {
        display: flex;
    }
.hik-main-layout {
        grid-template-columns: 1fr;
    }
.hik-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s ease;
    }
.hik-sidebar.active {
        left: 0;
    }
.hik-sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
.hik-sidebar.active .hik-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
.hik-sidebar-content {
        position: relative;
        width: 320px;
        max-width: 85%;
        height: 100%;
        overflow-y: auto;
        margin: 0;
        border-radius: 0;
        z-index: 10;
    }
.hik-sidebar-close {
        display: block;
    }
.hik-filter-bar {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
.hik-filter-bar-right {
        width: 100%;
    }
.hik-filter-bar-right label {
        display: none;
    }
#hik-sort-select {
        flex: 1;
    }
.hik-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
.hik-search-sticky-inner {
        padding: 0 1rem;
    }
.hik-cta-box {
        padding: 2rem 1rem;
    }
.hik-cta-box h2 {
        font-size: 1.5rem;
    }
}
@media (max-width: 480px) {
/* v9.37.0: dos por fila también en el teléfono. Con una sola columna la
   tarjeta quedaba enorme y obligaba a scrollear un producto por pantalla. */
.hik-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .625rem;
    }
}
/* Light Mode */
.hikvision-parking-page[data-color-mode="light"] .hik-search-sticky {
    background: #fff;
    border-bottom-color: #e5e7eb;
}
.hikvision-parking-page[data-color-mode="light"] .hik-search-sticky.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.hikvision-parking-page[data-color-mode="light"] .hik-archive-hero {
    background: linear-gradient(180deg, rgba(227, 25, 55, 0.03) 0%, transparent 100%);
}
.hikvision-parking-page[data-color-mode="light"] .hik-archive-title,
.hikvision-parking-page[data-color-mode="light"] .hik-sidebar-header h3,
.hikvision-parking-page[data-color-mode="light"] .hik-filter-title,
.hikvision-parking-page[data-color-mode="light"] .hik-no-products h3,
.hikvision-parking-page[data-color-mode="light"] .hik-cta-box h2,
.hikvision-parking-page[data-color-mode="light"] .hik-filter-bar-left strong,
.hikvision-parking-page[data-color-mode="light"] .hik-breadcrumb-current {
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="light"] .hik-archive-subtitle,
.hikvision-parking-page[data-color-mode="light"] .hik-product-desc,
.hikvision-parking-page[data-color-mode="light"] .hik-cta-box p,
.hikvision-parking-page[data-color-mode="light"] .hik-filter-bar-left {
    color: #6b7280;
}
.hikvision-parking-page[data-color-mode="light"] .hik-search-input,
.hikvision-parking-page[data-color-mode="light"] .hik-sidebar-content,
.hikvision-parking-page[data-color-mode="light"] .hik-filter-bar,
.hikvision-parking-page[data-color-mode="light"] .hik-filter-toggle,
.hikvision-parking-page[data-color-mode="light"] .hik-active-filters-wrapper,
.hikvision-parking-page[data-color-mode="light"] .hik-pagination li a,
.hikvision-parking-page[data-color-mode="light"] .hik-pagination li span {
    background: #f8f9fa;
    border-color: #e5e7eb;
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="light"] .hik-search-input:focus {
    background: #fff;
}
.hikvision-parking-page[data-color-mode="light"] #hik-sort-select {
    background: #fff;
    border-color: #d1d5db;
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="light"] .hik-cat-toggle,
.hikvision-parking-page[data-color-mode="light"] .hik-cat-label,
.hikvision-parking-page[data-color-mode="light"] .hik-tech-pill,
.hikvision-parking-page[data-color-mode="light"] .hik-availability-option {
    color: #6b7280;
}
.hikvision-parking-page[data-color-mode="light"] .hik-cat-toggle:hover,
.hikvision-parking-page[data-color-mode="light"] .hik-cat-label:hover,
.hikvision-parking-page[data-color-mode="light"] .hik-availability-option:hover {
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="light"] .hik-tech-pill {
    background: #fff;
    border-color: #e5e7eb;
}
.hikvision-parking-page[data-color-mode="light"] .hik-cta-box {
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.08) 0%, rgba(227, 25, 55, 0.03) 100%);
}
.hikvision-parking-page[data-color-mode="light"] .hik-view-toggle {
    background: #f1f5f9;
    border-color: #e5e7eb;
}
.hikvision-parking-page[data-color-mode="light"] .hik-view-btn {
    color: #9ca3af;
}
.hikvision-parking-page[data-color-mode="light"] .hik-view-btn:hover {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.05);
}
.hikvision-parking-page[data-color-mode="light"] .hik-special-filter {
    color: #6b7280;
}
.hikvision-parking-page[data-color-mode="light"] .hik-special-filter:hover {
    color: #1d1d1f;
}
/* Auto mode */
@media (prefers-color-scheme: light) {
.hikvision-parking-page[data-color-mode="auto"] .hik-search-sticky {
    background: #fff;
    border-bottom-color: #e5e7eb;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-search-sticky.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.hikvision-parking-page[data-color-mode="auto"] .hik-archive-hero {
    background: linear-gradient(180deg, rgba(227, 25, 55, 0.03) 0%, transparent 100%);
}
.hikvision-parking-page[data-color-mode="auto"] .hik-breadcrumb-current {
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-filter-bar-left {
    color: #6b7280;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-pagination li span {
    background: #f8f9fa;
    border-color: #e5e7eb;
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-search-input:focus {
    background: #fff;
}
.hikvision-parking-page[data-color-mode="auto"] #hik-sort-select {
    background: #fff;
    border-color: #d1d5db;
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-availability-option {
    color: #6b7280;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-availability-option:hover {
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-tech-pill {
    background: #fff;
    border-color: #e5e7eb;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-cta-box {
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.08) 0%, rgba(227, 25, 55, 0.03) 100%);
}
.hikvision-parking-page[data-color-mode="auto"] .hik-product-short-desc {
    color: #6b7280;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-view-toggle {
    background: #f1f5f9;
    border-color: #e5e7eb;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-view-btn {
    color: #9ca3af;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-view-btn:hover {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.05);
}
.hikvision-parking-page[data-color-mode="auto"] .hik-special-filter {
    color: #6b7280;
}
.hikvision-parking-page[data-color-mode="auto"] .hik-special-filter:hover {
    color: #1d1d1f;
}
}
/* v9.28.0: facetas — ítems de filtro sin productos en el resultado actual */
.hik-facet-empty { display: none !important; }
/* v9.29.0: subcategorías del término en la cabecera (páginas /categoria/,
/tecnologia/,
/marca/) */
.hik-scope-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hik-scope-subcat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .85rem; text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); transition: background .15s ease, border-color .15s ease; }
.hik-scope-subcat:hover,
.hik-scope-subcat:focus-visible { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.hik-scope-subcat span { font-size: .75rem; opacity: .7; }
[data-color-mode="light"] .hik-scope-subcat { border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.04); }
[data-color-mode="light"] .hik-scope-subcat:hover { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.3); }

/* ==========================================================================
   v9.47.0 — Catálogo con el fondo del inicio y 5 productos por fila
   En modo claro el fondo pasa al gris del inicio (#f2f3f5, --h-bg de home.css)
   y las superficies (filtros, barra de orden) quedan blancas como las
   tarjetas, igual que en el inicio. El oscuro no cambia.
   La cuadrícula cuenta columnas por el ANCHO REAL de su zona (container
   query), no por el de la pantalla: con o sin la barra de filtros al lado,
   5 en escritorio ancho, 4 y 3 al achicar, 2 en el teléfono.
   ========================================================================== */
/* starlink-style.css pinta el envoltorio claro con background: #fff directo
   (no con la variable), así que se fijan las dos cosas. */
.hikvision-parking-page[data-color-mode="light"] {
    --bg-dark: #f2f3f5;
    background-color: #f2f3f5;
}
@media (prefers-color-scheme: light) {
    .hikvision-parking-page[data-color-mode="auto"] {
        --bg-dark: #f2f3f5;
        background-color: #f2f3f5;
    }
}
.hikvision-parking-page[data-color-mode="light"] :is(.hik-sidebar-content, .hik-filter-bar) {
    background: #fff;
}
@media (prefers-color-scheme: light) {
    .hikvision-parking-page[data-color-mode="auto"] :is(.hik-sidebar-content, .hik-filter-bar) {
        background: #fff;
    }
}

.hik-content-area {
    container: hik-catalogo / inline-size;
    min-width: 0;
}
.hik-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container hik-catalogo (min-width: 600px) {
    .hik-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container hik-catalogo (min-width: 840px) {
    .hik-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container hik-catalogo (min-width: 1020px) {
    .hik-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Navegadores sin container queries (Safari < 16): por ancho de pantalla. */
@supports not (container-type: inline-size) {
    @media (min-width: 769px) {
        .hik-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 1281px) {
        .hik-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
}