/**
 * ═══════════════════════════════════════════════════════════════════════
 *  palette-accents.css
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Overrides que hacen que el color seleccionado en `shop_settings.color_header`
 * se vea en muchos más elementos del theme, para que el cambio sea evidente
 * a nivel visual.
 *
 * Debe cargarse DESPUÉS de style.css y ANTES del <style> local de la vista,
 * para poder ser sobreescrito por hojas de vista específicas si es necesario.
 *
 * TODO al agregar un theme nuevo: mantener este pattern usando las CSS vars:
 *   --c-accent   → color principal
 *   --c-accent-d → hover/active (más oscuro)
 *   --c-accent-l → fondos suaves
 */

/* ═══════════════════════════════════════════════════════════════════════
 *  TOP BAR (cintillo superior, la barra oscura sobre el header)
 * ═══════════════════════════════════════════════════════════════════════
 * Antes: fondo negro/tinta con un badge naranja. Ahora: fondo del color principal.
 */
.topbar {
    background: var(--c-accent) !important;
    color: #fff !important;
}
.topbar a { color: #fff !important; }
.topbar a:hover { opacity: 0.85; color: #fff !important; }
.topbar .topbar-promo { color: rgba(255,255,255,0.95) !important; }
.topbar .topbar-promo .badge {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    backdrop-filter: blur(4px);
}
.topbar-links a::after {
    background: rgba(255,255,255,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  HEADER — línea inferior de acento
 * ═══════════════════════════════════════════════════════════════════════
 * Sutil pero visible: una línea del color en el borde inferior del header
 */
.header {
    border-bottom: 3px solid var(--c-accent) !important;
}

/* Íconos del header (cart, search, user, wishlist) al hover */
.header-action:hover {
    color: var(--c-accent) !important;
    background: var(--c-accent-l) !important;
}
.header-action-count {
    background: var(--c-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  SECTION TITLES — subrayado decorativo del color
 * ═══════════════════════════════════════════════════════════════════════
 */
.section-title {
    position: relative;
    padding-bottom: 10px;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 4px;
    background: var(--c-accent);
    border-radius: 100px;
}

/* Ver todo link → color primario */
.section-link {
    color: var(--c-accent) !important;
    font-weight: 700;
}
.section-link:hover {
    color: var(--c-accent-d) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  HERO SLIDER — dots del color
 * ═══════════════════════════════════════════════════════════════════════
 */
.hero-dot.is-active {
    background: var(--c-accent) !important;
    width: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  CATEGORIES — iconos y hover
 * ═══════════════════════════════════════════════════════════════════════
 */
.cat-card:hover {
    border-color: var(--c-accent) !important;
    background: var(--c-accent-l) !important;
}
.cat-card:hover .cat-card-title {
    color: var(--c-accent) !important;
}
.cat-card-icon {
    color: var(--c-accent);
}

/* Flechas del carrusel al hover */
.cat-carousel-arrow:hover {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-color: var(--c-accent) !important;
}
.cat-nav-btn:hover:not(:disabled) {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-color: var(--c-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  PRODUCT CARDS — al hover
 * ═══════════════════════════════════════════════════════════════════════
 */
.pcard:hover {
    border-color: var(--c-accent) !important;
    box-shadow: 0 8px 24px var(--c-accent-l) !important;
}
.pcard-name a:hover {
    color: var(--c-accent) !important;
}
.pcard-price {
    color: var(--c-accent) !important;
}

/* Botón Agregar del pcard */
.pcard-add {
    background: var(--c-accent) !important;
}
.pcard-add:hover:not(:disabled) {
    background: var(--c-accent-d) !important;
}
.pcard-quote:hover {
    color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  FOOTER — línea superior + links del color
 * ═══════════════════════════════════════════════════════════════════════
 */
.footer {
    border-top: 4px solid var(--c-accent) !important;
}
.footer-title {
    position: relative;
    padding-bottom: 8px;
}
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    background: var(--c-accent);
    border-radius: 100px;
}
.footer-list a:hover {
    color: var(--c-accent) !important;
}
.footer-social a:hover {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-color: var(--c-accent) !important;
}
.footer-newsletter-btn {
    background: var(--c-accent) !important;
}
.footer-newsletter-btn:hover {
    background: var(--c-accent-d) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  BUTTONS globales
 * ═══════════════════════════════════════════════════════════════════════
 */
.btn-primary,
.btn.btn-primary {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--c-accent-d) !important;
    border-color: var(--c-accent-d) !important;
}
.btn-outline {
    color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
}
.btn-outline:hover {
    background: var(--c-accent) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  FORMS globales — focus del color
 * ═══════════════════════════════════════════════════════════════════════
 */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px var(--c-accent-l) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  LINKS globales
 * ═══════════════════════════════════════════════════════════════════════
 */
a { color: var(--c-accent); }
a:hover { color: var(--c-accent-d); }

/* ═══════════════════════════════════════════════════════════════════════
 *  BREADCRUMBS
 * ═══════════════════════════════════════════════════════════════════════
 */
.breadcrumb a:hover {
    color: var(--c-accent) !important;
}
.breadcrumb-item.is-current {
    color: var(--c-accent) !important;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  CART DRAWER — accents
 * ═══════════════════════════════════════════════════════════════════════
 */
.cart-drawer-total-value {
    color: var(--c-accent) !important;
}
.cart-drawer-checkout-btn {
    background: var(--c-accent) !important;
}
.cart-drawer-checkout-btn:hover {
    background: var(--c-accent-d) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  BADGES varios que usaban color específico → ahora respetan tema
 * ═══════════════════════════════════════════════════════════════════════
 * Solo si NO tenían color propio (badge-sale, badge-low mantienen su rol)
 */
.badge-hot,
.badge-highlight {
    background: var(--c-accent) !important;
    color: #fff !important;
}