/**
 * Estilos optimizados para botones .btn-icon
 * ARQUITECTURA LIMPIA: Contextos separados sin conflictos
 *
 * CONTEXTOS:
 * 1. Hero Section: .btn-icon es CONTENEDOR de icono (18x18px) - hero-modern.css
 * 2. Product Cards: .btn-icon es BOTÓN COMPLETO (40x40px) - woo-product-cards-minimalist.css
 *
 * Este archivo: Estilos GLOBALES para iconos SVG generales
 */

@import url('esaico-global-variables.css');

:root {
    --btn-icon-color: var(--esaico_color_text, #1B1B1B);
    --btn-icon-hover: var(--esaico_color_primary, #0B996E);
    --btn-icon-liked: #ef4444;
    --btn-icon-liked-bg: #fee;
}

/* ========================================================================
   HERO SECTION - .btn-icon es contenedor de icono (18x18px)
   Usa stroke para iconos lineales
   IMPORTANTE: Mayor especificidad para evitar conflictos
   ======================================================================== */
.hero-section-modern .btn .btn-icon svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    color: currentColor !important;
    transition: all 0.2s ease;
}

.hero-section-modern .btn:hover .btn-icon svg {
    stroke: currentColor !important;
}

/* ========================================================================
   PRODUCT CARDS MINIMALIST - Los estilos están en woo-product-cards-minimalist.css
   body.design-minimalist .card-actions .btn-icon (40x40px botón completo)
   - Usa fill para iconos sólidos
   - Color: var(--text-primary) = #1a1a1a
   ======================================================================== */

/* ========================================================================
   NO SE REQUIEREN ESTILOS GENERALES
   Todos los contextos tienen sus estilos específicos con alta especificidad
   ======================================================================== */