/* ==========================================================================
   Tema 2026 - Overlay visual de la tienda (azul/verde, minimalista tech)
   Se carga DESPUES de styles_ecommerce.css: solo sobreescribe apariencia,
   no toca estructura HTML ni logica (Vue/JS) existente.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
    --biz-primary: #1e3a8a;
    --biz-primary-dark: #14265c;
    --biz-primary-light: #3b5bdb;
    --biz-accent: #10b981;
    --biz-accent-dark: #0c8f66;
    --biz-urgent: #f97316;
    --biz-danger: #dc2626;
    --biz-bg: #f5f7fb;
    --biz-card: #ffffff;
    --biz-text: #1a2233;
    --biz-text-muted: #6b7280;
    --biz-border: #e5e9f2;
    --biz-radius: 14px;
    --biz-radius-sm: 8px;
    --biz-shadow: 0 2px 10px rgba(20, 38, 92, 0.06);
    --biz-shadow-hover: 0 12px 28px rgba(20, 38, 92, 0.14);
}

/* ---------- Base / tipografia ---------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--biz-text);
    background-color: var(--biz-bg);
}

h1, h2, h3, h4, h5, h6,
.title-category,
.product-title, .product-title-ecommerce,
.logo, .paction, .btn, button {
    font-family: 'Poppins', 'Inter', sans-serif;
}

a { transition: color .2s ease, background-color .2s ease; }

.title-category {
    position: relative;
    font-weight: 600;
    color: var(--biz-primary);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.title-category::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 3px;
    background: linear-gradient(90deg, var(--biz-primary), var(--biz-accent));
    border-radius: 3px;
}

/* ---------- Header ---------- */
.header {
    background-color: #ffffff;
    box-shadow: 0 1px 0 var(--biz-border);
}
.header-middle { background-color: #ffffff; }

.header-contact i.fa-whatsapp { color: var(--biz-accent); }
.header-contact a strong { color: var(--biz-primary); }

.search_input {
    background-color: var(--biz-bg) !important;
    border: 1px solid var(--biz-border) !important;
}
.search_input:focus {
    border-color: var(--biz-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12) !important;
}

.header .dropdown-toggle {
    background-color: var(--biz-primary) !important;
    color: #fff !important;
}
.dropdown-toggle .cart-count {
    color: #fff !important;
}
div.cart-dropdown svg, div.cart-dropdown i { color: #fff; }

.header-menu a:hover, .header-menu a:focus {
    color: var(--biz-primary) !important;
    background-color: var(--biz-bg) !important;
}

.header-bottom.sticky-header {
    background-color: var(--biz-primary-dark);
}
.main-nav a { color: #fff; }
.main-nav a:hover { color: #d1fadf; }

/* ---------- Grid / cards de producto ---------- */
.product.product-style {
    background-color: var(--biz-card);
    border-radius: var(--biz-radius);
    border: 1px solid var(--biz-border) !important;
    box-shadow: var(--biz-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    padding: 0 !important;
    margin: 8px 4px !important;
}
.product.product-style:hover {
    transform: translateY(-4px);
    box-shadow: var(--biz-shadow-hover);
}
.product-image-container {
    background-color: #fbfcfe;
    border-radius: var(--biz-radius) var(--biz-radius) 0 0;
    padding: 6px;
}
.btn-quickview {
    background-color: var(--biz-primary) !important;
    border-color: var(--biz-primary) !important;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
}
.product-details-ecommerce {
    padding: 12px 14px 16px;
}

/* Badges (etiquetas sobre la imagen) */
.product-label {
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px !important;
    letter-spacing: .02em;
    padding: 4px 10px !important;
    border: none !important;
}
.label-hot {
    background-color: var(--biz-primary) !important;
    color: #fff !important;
}
.label-sale {
    background-color: var(--biz-accent) !important;
    color: #fff !important;
}
.product-danger, .product-danger.product-label {
    background-color: var(--biz-danger) !important;
    color: #fff !important;
}
.product-urgent, .product-urgent.product-label {
    background-color: var(--biz-urgent) !important;
    color: #fff !important;
    animation: biz-pulse 1.8s ease-in-out infinite;
}
@keyframes biz-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .35); }
    50% { box-shadow: 0 0 0 5px rgba(249, 115, 22, 0); }
}

/* Ratings */
.product-ratings .ratings::before,
.rating .ratings::before { color: #f5b301; }
.ratings-container { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.rating-count, .rating-link { color: var(--biz-text-muted) !important; font-size: 12px; }
.rating-link:hover { color: var(--biz-primary) !important; }

/* Precio */
.product-price-ecommerce, .product-price {
    color: var(--biz-accent-dark) !important;
    font-weight: 700 !important;
    font-size: 1.05em;
}
.old-price {
    color: var(--biz-text-muted) !important;
    text-decoration: line-through;
    font-size: .85em;
    margin-right: 6px;
}
.product-promo-countdown {
    color: var(--biz-urgent) !important;
    font-weight: 600;
}
.product-urgent-alert {
    color: var(--biz-urgent) !important;
    background: rgba(249, 115, 22, .08);
    border-radius: var(--biz-radius-sm);
    padding: 6px 10px;
    display: inline-block;
}
.product-stock span, .alert-stock {
    color: var(--biz-accent-dark) !important;
    font-weight: 600;
}
.alert-sin-stock {
    color: var(--biz-danger) !important;
    font-weight: 600;
}

/* Boton agregar al carrito */
.paction.add-cart {
    background-color: var(--biz-primary) !important;
    color: #fff !important;
    border-radius: 30px !important;
    border: none !important;
    font-weight: 600;
    transition: background-color .2s ease, transform .15s ease;
}
.paction.add-cart:hover {
    background-color: var(--biz-accent) !important;
    transform: translateY(-1px);
}
.product-action { margin-top: 8px; }

/* ---------- Pagina de producto ---------- */
.product-single-details .product-title {
    color: var(--biz-primary-dark);
    font-weight: 700;
}
.price-box .product-price {
    font-size: 1.6em;
}
.product-category span { color: var(--biz-primary); font-weight: 600; }

.nav-tabs .nav-link.active {
    color: var(--biz-primary) !important;
    border-bottom: 2px solid var(--biz-primary) !important;
}
.nav-tabs .nav-link { color: var(--biz-text-muted); }

.related-products-container {
    border-top: 1px solid var(--biz-border);
    padding-top: 24px;
    margin-top: 24px;
}

/* ---------- Carrito / cupon ---------- */
.cart-summary {
    background-color: var(--biz-card);
    border: 1px solid var(--biz-border);
    border-radius: var(--biz-radius);
    padding: 16px;
    box-shadow: var(--biz-shadow);
}
.cart-summary h3 {
    font-size: 15px;
    color: var(--biz-primary-dark);
    font-weight: 600;
    margin-bottom: 10px;
}
.cart-summary .btn-outline-secondary {
    border-color: var(--biz-primary);
    color: var(--biz-primary);
    border-radius: 20px;
}
.cart-summary .btn-outline-secondary:hover {
    background-color: var(--biz-primary);
    color: #fff;
}
.cart-summary .alert-success {
    background-color: rgba(16, 185, 129, .1);
    border-color: var(--biz-accent);
    color: var(--biz-accent-dark);
    border-radius: var(--biz-radius-sm);
}

/* ---------- Footer ---------- */
.footer {
    background-color: var(--biz-primary-dark) !important;
}
.footer a { color: #cbd5e1 !important; }
.footer a:hover { color: #fff !important; }
.footer h3, .footer h4 { color: #fff !important; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .product.product-style { margin: 6px 2px !important; }
    .product-details-ecommerce { padding: 10px 10px 12px; }
}