/*
 * Tema visla — hoja de FORMA. Solo overrides sobre clases de _base y features.
 * Colores: siempre tokens (var(--color-*), color-mix(in oklch, ...)). Nunca hex.
 * Se carga después del @stack('styles') del layout, por eso gana a los estilos inline de _base.
 */

/* ── Feature hero-search: card con borde dorado superior, inputs con foco dorado ── */
.hero-card { border-top: 3px solid var(--color-secondary); box-shadow: 0 20px 60px color-mix(in oklch, var(--foreground) 35%, transparent); }
.hero-patente-form:focus-within { border-color: var(--color-secondary); }
.hero-patente-input { background: transparent; font-weight: 700; letter-spacing: .1em; }
.hero-manual-input:focus { border-color: var(--color-secondary); }
.hero-submit-btn:hover { opacity: .88; transform: none; }
.hero-quick-links { padding-top: .9rem; border-top: 1px solid var(--border-color); }
.hero-quick-btn {
    color: var(--color-primary);
    background: color-mix(in oklch, var(--color-primary) 7%, #fff);
    border-color: color-mix(in oklch, var(--color-primary) 15%, #fff);
}
.hero-quick-btn:hover { background: var(--color-primary); color: var(--on-primary); border-color: var(--color-primary); }

/* ── Páginas internas heredadas de _base (category, search-results, product-detail) ── */
.cat-hero-overlay { background: linear-gradient(to right, color-mix(in oklch, var(--color-primary) 90%, #000) 0%, color-mix(in oklch, var(--color-primary) 60%, transparent) 60%, transparent 100%); }
.filter-select:focus { border-color: var(--color-secondary); }
.filter-link-btn:hover { border-color: var(--color-secondary); color: var(--color-primary); }
.pagination a:hover { border-color: var(--color-secondary); color: var(--color-primary); }
.pagination .active { background: var(--color-secondary); color: var(--on-secondary); border-color: var(--color-secondary); }
.search-header h1 { color: var(--color-primary); font-weight: 800; letter-spacing: -.02em; }
.search-form input:focus { border-color: var(--color-secondary); }
.empty-state h2 { color: var(--color-primary); font-weight: 700; }

/* Botón primario de _base en visla: dorado con texto oscuro */
.btn-secondary, .btn-add-cart { background: var(--color-secondary); color: var(--on-secondary); border-color: var(--color-secondary); }

/* Galería: miniatura activa dorada */
.gallery-thumb.active { border-color: var(--color-secondary); }

/* ── Feature footer-trust: íconos un poco más compactos, 4 columnas en desktop ── */
.ft-trust-icon { width: 40px; height: 40px; border-radius: .6rem; }
.ft-trust-inner { gap: .75rem; padding: 1.25rem 1rem; }