/*
Theme Name: KMELEC Child
Template: storefront 
Description: Diseño ultra-optimizado para KMELEC
Version: 6.0 (Master Final Definitivo)
*/

:root { --km-blue: #004e92; --km-orange: #f39c12; --km-dark: #1b2128; --km-light: #f8f9fa; }
        
/* ======================================================== */
/* 1. GLOBALES Y RESET                                      */
/* ======================================================== */
html, body { font-family: 'Poppins', sans-serif; background-color: var(--km-light); overflow-x: hidden !important; width: 100%; max-width: 100vw; margin: 0; padding: 0; position: relative; }

/* Ocultar elementos basura del tema padre (Storefront Shield) */
.km-shop-products .km-shop-layout { display: block !important; margin: 0 !important; padding: 0 !important; }
.km-shop-products .km-shop-sidebar { display: none !important; }
.km-shop-products .km-shop-products { width: 100% !important; float: none !important; }
header:not(#kmelec-global-header):not(.kmelec-header), footer:not(#kmelec-global-footer):not(.km-footer), header.wp-block-template-part, footer.wp-block-template-part, header#masthead, .site-header, footer#colophon, .site-footer, #secondary, aside.sidebar, .sidebar, .widget-area, .storefront-breadcrumb, .woocommerce-breadcrumb, header.woocommerce-products-header, h1.wp-block-query-title, h1.page-title, .woocommerce-products-header__title, p.woocommerce-result-count, form.woocommerce-ordering, .woocommerce-ordering, .woocommerce-result-count, h2.widgettitle, .widgettitle { display: none !important; }
.site-content, #content, .site-main, #primary, .col-full { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* ======================================================== */
/* 2. HEADER Y NAVEGACIÓN                                   */
/* ======================================================== */
.kmelec-topbar { background-color: var(--km-dark); color: #ccc; font-size: 0.85rem; padding: 8px 0; }
.kmelec-topbar i { color: var(--km-orange); }
.kmelec-header { background: #ffffff; padding: 10px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.05); position: relative; z-index: 1000; }
.kmelec-header .logo img { height: 65px; width: auto; max-width: 100%; display: block; transition: 0.3s; }
.search-container-wrapper { position: relative; width: 50%; }
.search-container { border: 2px solid var(--km-blue); border-radius: 8px; overflow: hidden; margin-bottom: 0 !important; width: 100%; display: flex; background: white; transition: 0.3s; }
.search-container:focus-within { box-shadow: 0 0 0 4px rgba(0, 78, 146, 0.1); border-color: var(--km-orange); }
.search-container input { border: none; box-shadow: none !important; outline: none; font-size: 0.95rem; flex-grow: 1; padding: 12px 18px;}
.search-container button { background: var(--km-blue); color: white; border: none; padding: 0 25px; font-weight: 600; transition: 0.3s; }
.search-container button:hover { background: var(--km-orange); }

/* Búsqueda en Vivo */
.km-live-search-results { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); z-index: 1000; display: none; max-height: 400px; overflow-y: auto; text-align: left;}
.km-search-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #f8f9fa; text-decoration: none; color: var(--km-dark); transition: 0.2s; }
.km-search-item:hover { background: #f0f4f8; }
.km-search-img { width: 45px; height: 45px; flex-shrink: 0; margin-right: 15px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #eee; }
.km-search-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.km-search-info { display: flex; flex-direction: column; justify-content: center; }
.km-search-title { font-size: 0.85rem; font-weight: 600; line-height: 1.2; margin-bottom: 4px; color: var(--km-blue);}
.km-search-price { font-size: 0.85rem; color: var(--km-orange); font-weight: 700; }

/* Iconos Header */
.header-action { color: var(--km-dark); font-size: 1.3rem; margin-left: 22px; text-decoration: none; position: relative; transition: 0.3s; }
.header-action:hover { color: var(--km-orange); transform: translateY(-2px); }
.cart-badge { position: absolute; top: -8px; right: -12px; background: var(--km-orange); color: white; border-radius: 50%; font-size: 0.7rem; padding: 3px 7px; font-weight: bold; border: 2px solid white; }

/* Navegación Desktop */
.kmelec-nav { background: var(--km-blue); display: flex; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.kmelec-nav .dropdown { position: relative; }
.kmelec-nav .nav-item-km { color: white; text-decoration: none; padding: 15px 18px; display: inline-flex; align-items: center; font-weight: 500; font-size: 0.9rem; transition: 0.3s; cursor: pointer; letter-spacing: 0.3px;}
.kmelec-nav .nav-item-km:hover { background: rgba(0,0,0,0.15); }
.kmelec-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; border-radius: 0 0 10px 10px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15); margin-top: 0; padding: 15px 0; background: #fff; z-index: 1000; min-width: 260px; }
.kmelec-nav .dropdown:hover .dropdown-menu { display: block; animation: fadeIn 0.3s ease; }
.kmelec-nav .dropdown-menu a { color: #444; padding: 10px 25px; font-size: 0.85rem; font-weight: 500; text-decoration: none; display: block; transition: 0.2s; border-bottom: 1px solid #f8f9fa;}
.kmelec-nav .dropdown-menu a:hover { background-color: #f0f4f8; color: var(--km-orange); padding-left: 32px; }
.km-mega-dropdown:hover .dropdown-menu { display: block; }
.km-mega-title { font-weight: 800; color: var(--km-blue); border-bottom: 2px solid var(--km-orange); padding-bottom: 8px; margin-bottom: 15px; font-size: 1rem; text-transform: uppercase; }
.km-mega-list { list-style: none; padding: 0; margin: 0; }
.km-mega-list a { color: #555 !important; border-bottom: none !important; font-size: 0.85rem !important; padding: 6px 0 !important; display: block; transition: 0.2s; }
.km-mega-list a:hover { color: var(--km-orange) !important; padding-left: 8px !important; background: transparent !important; }

/* Botones Pro */
.btn-scalabe-pro { background: var(--km-orange); color: white; padding: 16px 45px; font-size: 1.05rem; font-weight: 700; border-radius: 6px; text-transform: uppercase; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; border: none; letter-spacing: 0.5px; box-shadow: 0 10px 25px rgba(243,156,18,0.4); }
.btn-scalabe-pro:hover { background: #d68910; color: white; transform: translateY(-4px); box-shadow: 0 15px 35px rgba(243,156,18,0.5); }
.btn-kmelec-fluke { background: #ffc20e; color: #111; box-shadow: 0 10px 25px rgba(255,194,14,0.4); }
.btn-kmelec-fluke:hover { background: #e6b000; color: #111; box-shadow: 0 15px 35px rgba(255,194,14,0.5); }

/* ======================================================== */
/* 3. PORTADA Y COMPONENTES VISUALES                        */
/* ======================================================== */
.kmelec-carousel-wrapper { width: 100%; margin: 0; padding: 0; }
.carousel-fade .carousel-item { height: 550px; width: 100%; overflow: hidden; background-size: cover; background-position: center; position: relative; z-index: 1; }
.amprobe-slide { background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,1) 70%, rgba(241,241,241,1) 100%); }
.fluke-slide { background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,1) 100%); }
.carousel-overlay-clean { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(27,33,40,0.1) !important; z-index: 2; }
.text-box-integrated { position: relative; z-index: 5; text-shadow: none; }
.image-box-integrated { position: relative; z-index: 5; height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.integrated-product-image { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1)); }
.integrated-product-image-fluke { max-width: 140%; width: 140%; margin-left: -20%; mix-blend-mode: multiply; filter: contrast(1.05) drop-shadow(0 20px 30px rgba(0,0,0,0.1)); }
.carousel-heading-white { color: #fff; font-size: clamp(3rem, 10vw, 4.5rem); font-weight: 900; line-height: 1.05; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -1px; }
.carousel-heading-dark { color: #111; font-size: clamp(3rem, 10vw, 4.5rem); font-weight: 900; line-height: 1.05; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -2px; }
.carousel-subtext-light { color: #e1e5ee; font-size: clamp(1rem, 4vw, 1.25rem); margin-bottom: 40px; font-weight: 400; line-height: 1.6; max-width: 90%; }
.carousel-subtext-dark { color: #555; font-size: clamp(1rem, 4vw, 1.25rem); margin-bottom: 35px; font-weight: 500; line-height: 1.6; max-width: 95%; }
.km-orange-span { color: var(--km-orange); }
.fluke-yellow-span { color: #ffc20e; }

.km-trust-section { background: white; padding: 50px 0; border-bottom: 1px solid #eee; }
.km-trust-item { text-align: center; padding: 20px; transition: 0.3s; }
.km-trust-item i { font-size: 2.8rem; color: var(--km-blue); margin-bottom: 18px; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.km-trust-item:hover i { transform: scale(1.2); color: var(--km-orange); }
.km-trust-item h5 { font-weight: 800; font-size: 1.05rem; color: var(--km-dark); margin-bottom: 8px; text-transform: uppercase;}
.km-trust-item p { font-size: 0.9rem; color: #666; margin: 0; }

.km-cat-grid { background-color: var(--km-light); padding: 80px 0; }
.km-cat-card { position: relative; height: 380px; border-radius: 16px; overflow: hidden; display: block; text-decoration: none; box-shadow: 0 15px 35px rgba(0,0,0,0.1); transition: 0.5s ease; }
.km-cat-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: 0.8s ease; }
.km-cat-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(27,33,40,0.8) 0%, rgba(27,33,40,0.2) 60%); transition: 0.4s ease; }
.km-cat-card:hover .km-cat-img { transform: scale(1.1); }
.km-cat-card:hover .km-cat-overlay { background: linear-gradient(0deg, rgba(0,78,146,0.9) 0%, rgba(0,78,146,0.3) 60%); }
.km-cat-content { position: absolute; bottom: 35px; left: 35px; z-index: 5; color: white; transition: bottom 0.3s ease; }
.km-cat-card:hover .km-cat-content { bottom: 45px; }
.km-cat-content h4 { font-weight: 800; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 12px; line-height: 1.2; letter-spacing: 0.5px;}
.km-cat-link { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--km-orange); display: flex; align-items: center; gap: 10px; }

.section-title { position: relative; font-weight: 800; color: var(--km-dark); text-transform: uppercase; padding-bottom: 15px; margin-bottom: 30px; letter-spacing: 0.5px;}
.section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background-color: var(--km-orange); border-radius: 2px; }

.kmelec-tabs .nav-link { color: #555; font-weight: 600; border-radius: 30px; padding: 10px 28px; margin: 0 5px; border: 2px solid transparent; transition: 0.3s ease; cursor: pointer; }
.kmelec-tabs .nav-link:hover { color: var(--km-blue); }
.kmelec-tabs .nav-link.active { background-color: var(--km-blue); color: white; box-shadow: 0 8px 20px rgba(0,78,146,0.2); }

.km-brands-section { padding: 60px 0; border-top: 1px solid #eee; }
.km-brand-card { background: #fff; border-radius: 12px; padding: 25px; display: flex; align-items: center; justify-content: center; height: 130px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: 0.3s; }
.km-brand-card img { max-height: 65px; filter: grayscale(100%); opacity: 0.5; transition: 0.4s ease; }
.km-brand-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.km-brand-card:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }

.km-newsletter-section { background: linear-gradient(135deg, var(--km-dark) 0%, #0f1318 100%); color: white; border-radius: 24px; padding: 60px 40px; margin-bottom: -80px; position: relative; z-index: 10; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05);}
.km-newsletter-btn { border-radius: 0 8px 8px 0; background: var(--km-orange); border: none; font-weight: 700; color: white; padding: 0 35px; text-transform: uppercase; font-size: 0.9rem;}
.km-newsletter-input { border-radius: 8px 0 0 8px; padding: 15px 20px; border: none; font-size: 1rem; }
.km-newsletter-input:focus { box-shadow: none; outline: none; }

/* ======================================================== */
/* 4. FOOTER MAMASAN                                        */
/* ======================================================== */
#kmelec-global-footer { width: 100%; background: #11151a; padding: 140px 0 30px 0; font-size: 0.9rem; clear: both;}
#kmelec-global-footer, #kmelec-global-footer p, #kmelec-global-footer h4, #kmelec-global-footer span, #kmelec-global-footer a, #kmelec-global-footer i { color: #ffffff !important; }
#kmelec-global-footer a:hover { color: var(--km-orange) !important; }

/* LOGO BLANCO EN EL FOOTER */
#kmelec-global-footer .km-footer-logo img {
    max-height: 30px !important; 
    width: auto !important; 
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important; 
    transition: all 0.3s ease !important;
}

.km-footer-desc { line-height: 1.7; font-size: 0.95rem; max-width: 90%; }
.km-social-links a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; margin-right: 12px; text-decoration: none; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.km-social-links a:hover { background: var(--km-orange); border-color: var(--km-orange); transform: translateY(-5px) rotate(8deg); box-shadow: 0 10px 20px rgba(243,156,18,0.3); }
.km-footer-heading { font-weight: 800; font-size: 1rem; margin-bottom: 30px; letter-spacing: 0.5px; text-transform: uppercase; }
.km-footer-links { list-style: none; padding: 0; margin: 0; }
.km-footer-links li { margin-bottom: 16px; }
.km-footer-links a { text-decoration: none; transition: 0.3s; display: inline-block; font-weight: 500;}
.km-footer-links a:hover { transform: translateX(8px); }
.km-footer-bottom { background: #0a0c0f; padding: 30px 0; border-top: 1px solid rgba(255,255,255,0.03); margin-top: 60px;}
.km-copyright { font-size: 0.85rem;}
.km-copyright a { text-decoration: none; transition: 0.2s; margin-left: 15px;}
.km-payment-methods i { transition: 0.3s; }
.km-payment-methods i:hover { transform: scale(1.1); }

/* ======================================================== */
/* 5. TIENDA WOOCOMMERCE FORZADA (LAYOUT Y SIDEBAR)         */
/* ======================================================== */
.km-shop-layout { display: flex; gap: 30px; align-items: flex-start; }
.km-shop-sidebar { width: 25%; flex-shrink: 0; position: sticky; top: 90px; }
.km-shop-products { width: 75%; flex-grow: 1; }

.km-filter-box { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 20px; border: 1px solid #f1f1f1; }
.km-widget-title { font-size: 1.1rem; font-weight: 700; color: var(--km-dark); margin-bottom: 15px; border-bottom: 2px solid var(--km-light); padding-bottom: 10px; }

/* ======================================================== */
/* 🌟 ACORDEÓN CATEGORÍAS PREMIUM (MINIMALISTA E ICONOS)    */
/* ======================================================== */
.km-acc-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.km-acc-parent { 
    background: #ffffff !important; 
    border: 1px solid transparent !important; 
    border-radius: 8px !important; 
    margin-bottom: 8px !important; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

.km-acc-parent:hover {
    border-color: #eee !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
    transform: translateY(-2px) !important;
}

.km-acc-header { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    padding: 14px 18px !important; 
    background: transparent !important; 
    cursor: pointer !important; 
    transition: 0.3s !important; 
}

.km-acc-header a { 
    color: #444 !important; 
    text-decoration: none !important; 
    font-weight: 600 !important; 
    font-size: 0.95rem !important; 
    flex-grow: 1 !important; 
    display: flex !important; 
    align-items: center !important; 
    transition: 0.3s !important;
}

/* 🚀 FUERZA BRUTA: ICONOS Y COLORES (ANTI-FALLOS) */
/* Destruimos el icono azul viejo que trae el acordeón por defecto, pero dejamos la flecha toggle */
.km-acc-header > i:not(.km-acc-toggle) { 
    display: none !important; 
}

/* Preparamos el enlace para recibir el nuevo icono */
.km-acc-header a::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    margin-right: 12px !important;
    width: 25px !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}

/* Asignación de Iconos buscando palabras clave cortas en la URL */
.km-acc-header a[href*="medicion" i] { color: #3498db !important; }
.km-acc-header a[href*="medicion" i]::before { content: "\f0e4" !important; color: #3498db !important; }

.km-acc-header a[href*="bloqueo" i] { color: #e74c3c !important; }
.km-acc-header a[href*="bloqueo" i]::before { content: "\f023" !important; color: #e74c3c !important; }

.km-acc-header a[href*="aerosol" i] { color: #95a5a6 !important; }
.km-acc-header a[href*="aerosol" i]::before { content: "\f5a6" !important; color: #95a5a6 !important; }

.km-acc-header a[href*="ferreteria" i] { color: #795548 !important; }
.km-acc-header a[href*="ferreteria" i]::before { content: "\f7d9" !important; color: #795548 !important; }

.km-acc-header a[href*="electricas" i] { color: #e67e22 !important; }
.km-acc-header a[href*="electricas" i]::before { content: "\f0e7" !important; color: #e67e22 !important; }

.km-acc-header a[href*="ingenieria" i] { color: #27ae60 !important; }
.km-acc-header a[href*="ingenieria" i]::before { content: "\f085" !important; color: #27ae60 !important; }

/* Efecto hover */
.km-acc-parent:hover .km-acc-header a::before { transform: scale(1.2) !important; }

.km-acc-parent:hover .km-acc-header a { color: var(--km-blue) !important; }
.km-acc-toggle { color: #888 !important; transition: 0.3s !important; font-size: 0.9rem !important; }

/* Estado Abierto */
.km-acc-parent.open { border-left: 3px solid var(--km-orange) !important; border-color: #eee !important; }
.km-acc-parent.open .km-acc-header a { color: var(--km-blue) !important; font-weight: 700 !important; }
.km-acc-parent.open .km-acc-toggle { transform: rotate(180deg) !important; color: var(--km-orange) !important; }

/* Subcategorías */
.km-acc-child { display: none !important; list-style: none !important; padding: 10px 15px 15px 45px !important; margin: 0 !important; background: #fafafa !important; border-top: 1px dashed #eee !important;}
.km-acc-parent.open .km-acc-child { display: block !important; animation: fadeIn 0.3s ease !important; }
.km-acc-child li { margin-bottom: 8px !important; }
.km-acc-child li:last-child { margin-bottom: 0 !important; }
.km-acc-child a { color: #666 !important; text-decoration: none !important; font-size: 0.85rem !important; transition: 0.2s !important; display: block !important;}
.km-acc-child a:hover { color: var(--km-orange) !important; transform: translateX(4px) !important; }

/* ======================================================== */
/* 🌟 6. DISEÑO DE TARJETAS PREMIUM (CATÁLOGO Y CATEGORÍAS) */
/* ======================================================== */
.archive.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; margin: 0 !important; padding: 0 !important; }
.archive.woocommerce ul.products::before, .archive.woocommerce ul.products::after { display: none !important; }

/* Estructura de la Tarjeta */
.archive.woocommerce ul.products li.product { width: 100% !important; height: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; background: #fff !important; border-radius: 16px !important; border: 1px solid #eaeaea !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; transition: all 0.3s ease !important; padding: 0 0 20px 0 !important; position: relative !important; }
.archive.woocommerce ul.products li.product:hover { transform: translateY(-5px) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important; }
.archive.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; text-decoration: none !important; flex-grow: 1 !important; }

/* Etiqueta Oferta */
.archive.woocommerce ul.products li.product .onsale { position: absolute !important; top: 15px !important; left: 15px !important; background: var(--km-orange) !important; color: #fff !important; padding: 5px 12px !important; border-radius: 20px !important; font-size: 0.75rem !important; font-weight: 700 !important; z-index: 9 !important; line-height: 1 !important; }

/* Imagen Gris */
.archive.woocommerce ul.products li.product img { width: 100% !important; height: 220px !important; object-fit: contain !important; padding: 30px !important; background: #f4f6f8 !important; margin: 0 !important; mix-blend-mode: multiply !important; border-bottom: none !important; border-radius: 16px 16px 0 0 !important; transition: transform 0.4s ease !important; }
.archive.woocommerce ul.products li.product:hover img { transform: scale(1.05) !important; }

/* Textos de Producto */
.archive.woocommerce ul.products li.product .woocommerce-loop-product__category, .archive.woocommerce ul.products li.product .woocommerce-loop-category__title { font-size: 0.7rem !important; color: var(--km-orange) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 20px 20px 5px 20px !important; text-align: left !important; display: block !important; width: 100% !important; font-weight: 700 !important; }
.archive.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; font-weight: 600 !important; color: var(--km-dark) !important; margin: 0 20px 10px 20px !important; line-height: 1.4 !important; text-transform: none !important; text-align: left !important; width: calc(100% - 40px) !important; }
.archive.woocommerce ul.products li.product .price { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--km-orange) !important; margin: 0 20px 20px 20px !important; display: flex !important; align-items: baseline !important; gap: 10px !important; text-align: left !important; width: calc(100% - 40px) !important; }
.archive.woocommerce ul.products li.product .price del { font-size: 0.95rem !important; color: #aaa !important; font-weight: 500 !important;}
.archive.woocommerce ul.products li.product .price ins { text-decoration: none !important; }

/* Botón Oscuro */
.archive.woocommerce ul.products li.product .button { margin: auto 20px 0 20px !important; width: calc(100% - 40px) !important; background: #2d3436 !important; color: white !important; padding: 12px !important; border-radius: 8px !important; text-align: center !important; font-weight: 600 !important; text-transform: none !important; font-size: 0.95rem !important; display: block !important; transition: 0.3s !important; border: none !important; position: relative !important; z-index: 10 !important; }
.archive.woocommerce ul.products li.product .button:hover { background: #111 !important; transform: translateY(-2px) !important; }
.archive.woocommerce ul.products li.product .woocommerce-product-details__short-description, .archive.woocommerce ul.products li.product .product-short-description, .archive.woocommerce ul.products li.product > p { display: none !important; }

/* Encabezados Tienda */
.woocommerce-products-header__title.page-title { font-size: 2.2rem !important; font-weight: 800 !important; color: var(--km-dark) !important; margin-bottom: 20px !important; text-transform: uppercase !important; letter-spacing: -0.5px !important; }
.woocommerce-result-count { color: #6c757d; font-weight: 500; margin-bottom: 20px; }
.woocommerce-ordering select { padding: 8px 15px; border-radius: 6px; border: 1px solid #ddd; color: var(--km-dark); outline: none; cursor: pointer; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ======================================================== */
/* 🌟 7. PÁGINA DE PRODUCTO INDIVIDUAL PREMIUM              */
/* ======================================================== */
body.single-product div.product { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; max-width: 1250px !important; margin: 50px auto 80px auto !important; padding: 0 20px !important; align-items: flex-start !important; }
body.single-product .woocommerce-product-gallery { width: 45% !important; flex: 0 0 45% !important; float: none !important; background: #fff !important; padding: 50px !important; border-radius: 24px !important; border: 1px solid #f0f0f0 !important; margin: 0 !important; box-shadow: 0 20px 50px rgba(0,0,0,0.04) !important; position: sticky; top: 30px; box-sizing: border-box !important; }
body.single-product .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important; mix-blend-mode: multiply !important; background: transparent !important; transition: transform 0.6s ease !important; }
body.single-product .woocommerce-product-gallery:hover .woocommerce-product-gallery__image img { transform: scale(1.08) !important; }
body.single-product .flex-control-nav { margin-top: 30px !important; padding: 0 !important; display: flex !important; gap: 12px !important; justify-content: center; }
body.single-product .flex-control-nav li { width: 75px !important; background: #fff !important; border-radius: 12px !important; border: 2px solid #eaeaea !important; cursor: pointer; transition: 0.3s; }
body.single-product .flex-control-nav li:hover { border-color: #ccc !important; }
body.single-product .flex-control-nav li img.flex-active { border-color: var(--km-orange) !important; }
body.single-product .summary.entry-summary { width: 50% !important; flex: 0 0 50% !important; float: none !important; clear: none !important; margin: 0 !important; padding-top: 10px !important; box-sizing: border-box !important; }
body.single-product .product_title { font-size: 2.5rem !important; font-weight: 900 !important; color: var(--km-dark) !important; margin-bottom: 20px !important; line-height: 1.15 !important; letter-spacing: -1px !important; }
body.single-product .price { font-size: 2.4rem !important; font-weight: 900 !important; color: var(--km-blue) !important; margin-bottom: 30px !important; display: flex !important; align-items: center !important; gap: 15px !important; padding-bottom: 25px !important; border-bottom: 1px solid #eaeaea !important; }
body.single-product .price del { color: #a0a0a0 !important; font-weight: 500 !important; font-size: 1.3rem !important; opacity: 0.6; }
body.single-product .price ins { text-decoration: none !important; }
body.single-product .woocommerce-product-details__short-description { font-size: 1.05rem !important; color: #555 !important; line-height: 1.7 !important; margin-bottom: 35px !important; }
body.single-product form.cart { display: flex !important; gap: 15px !important; align-items: center !important; margin-bottom: 20px !important; }
body.single-product .quantity { display: flex !important; align-items: center !important; background: #f4f6f8 !important; border-radius: 50px !important; padding: 5px 15px !important; border: 1px solid #eaeaea !important; }
body.single-product .quantity input.qty { width: 50px !important; height: 50px !important; border: none !important; background: transparent !important; font-size: 1.3rem !important; font-weight: 800 !important; text-align: center !important; color: var(--km-dark) !important; }
body.single-product button.single_add_to_cart_button { background: linear-gradient(135deg, var(--km-orange) 0%, #d68910 100%) !important; color: white !important; height: 62px !important; border-radius: 50px !important; flex-grow: 1 !important; font-weight: 800 !important; font-size: 1.15rem !important; text-transform: uppercase !important; border: none !important; transition: 0.3s ease !important; box-shadow: 0 10px 25px rgba(243,156,18,0.3) !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; }
body.single-product button.single_add_to_cart_button:hover { transform: translateY(-3px) !important; box-shadow: 0 15px 35px rgba(243,156,18,0.4) !important; }
body.single-product button.single_add_to_cart_button::before { content: "\f07a"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 12px; font-size: 1.2rem; }
body.single-product .product_meta { display: flex !important; flex-wrap: wrap !important; gap: 15px !important; font-size: 0.85rem !important; color: #888 !important; margin-top: 30px !important; padding-top: 25px !important; border-top: 1px solid #eaeaea !important;}
body.single-product .product_meta > span { background: #f8f9fa !important; padding: 8px 16px !important; border-radius: 30px !important; border: 1px solid #eee !important; display: inline-flex !important; align-items: center !important;}
body.single-product .product_meta a { color: var(--km-dark) !important; font-weight: 700 !important; text-decoration: none !important; margin-left: 5px !important; transition: 0.2s; }
body.single-product .product_meta a:hover { color: var(--km-orange) !important; }
body.single-product .woocommerce-tabs, body.single-product .related.products { width: 100% !important; flex: 0 0 100% !important; margin-top: 40px !important; }
body.single-product .woocommerce-tabs { background: #fff; padding: 50px; border-radius: 24px; border: 1px solid #eaeaea; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }

/* ======================================================== */
/* 👤 8. MI CUENTA - DISEÑO PREMIUM Y ESPACIADO             */
/* ======================================================== */
body.woocommerce-account .site-main { padding-top: 60px !important; padding-left: 5% !important; padding-right: 5% !important; max-width: 1300px !important; margin: 0 auto !important; }
.woocommerce-account .woocommerce { display: flex !important; flex-wrap: wrap !important; gap: 40px !important; align-items: flex-start !important; }
.woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 260px !important; width: 260px !important; background: #f8f9fa !important; padding: 20px !important; border-radius: 12px !important; border: 1px solid #eaeaea !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid #eaeaea !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block !important; padding: 12px 15px !important; color: #11151a !important; font-weight: 600 !important; text-decoration: none !important; transition: 0.3s !important; border-radius: 8px !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(243, 156, 18, 0.1) !important; color: #f39c12 !important; padding-left: 20px !important; }
.woocommerce-account .woocommerce-MyAccount-content { flex: 1 !important; width: 100% !important; background: #fff !important; padding: 40px !important; border-radius: 12px !important; border: 1px solid #eaeaea !important; box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; }
.woocommerce-account .u-columns.col2-set { display: flex !important; gap: 30px !important; width: 100% !important; }
.woocommerce-account .u-columns.col2-set .col-1, .woocommerce-account .u-columns.col2-set .col-2 { flex: 1 !important; width: 100% !important; background: #f8f9fa !important; padding: 35px !important; border-radius: 12px !important; border: 1px solid #eaeaea !important; float: none !important; }
.woocommerce-account .woocommerce-Button.button, .woocommerce-account button[type="submit"] { background: #2d3436 !important; color: white !important; padding: 12px 25px !important; border-radius: 8px !important; font-weight: 600 !important; border: none !important; transition: 0.3s !important; }
.woocommerce-account .woocommerce-Button.button:hover, .woocommerce-account button[type="submit"]:hover { background: #f39c12 !important; transform: translateY(-2px) !important; }

/* ======================================================== */
/* 📱 9. RESPONSIVE GLOBAL (MÓVIL)                          */
/* ======================================================== */
@media (max-width: 991px) {
    body { padding-bottom: 80px; } 
    .kmelec-header { padding: 12px 0; position: sticky; top: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
    .kmelec-header .logo img { height: 48px; }
    .kmelec-carousel, .kmelec-carousel .carousel-item { height: 480px; }
    .carousel-overlay { background: linear-gradient(0deg, rgba(27,33,40,0.8) 0%, rgba(27,33,40,0.3) 100%) !important; }
    .carousel-heading-white, .carousel-heading-dark { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; line-height: 1.1 !important; }
    .carousel-heading-white { text-shadow: 0 4px 10px rgba(0,0,0,0.4); }
    .carousel-subtext-light, .carousel-subtext-dark { font-size: clamp(0.95rem, 4vw, 1.1rem) !important; margin-bottom: 25px !important; }
    .btn-scalabe-pro { padding: 14px 30px; font-size: 0.95rem; }
    .km-cat-card { height: 220px; }
    .km-cat-content h4 { font-size: 1.2rem; margin-bottom: 5px;}
    .km-cat-content { bottom: 20px; left: 20px; }
    .section-title { font-size: 1.6rem; text-align: center; }
    .section-title::after { left: 50%; transform: translateX(-50%); }
    .kmelec-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; justify-content: flex-start !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
    .kmelec-tabs::-webkit-scrollbar { display: none; }
    .kmelec-tabs .nav-link { white-space: nowrap; font-size: 0.9rem; padding: 8px 20px; }
    .km-newsletter-section { padding: 40px 20px; border-radius: 16px; margin-bottom: -50px;}
    #kmelec-global-footer { padding-top: 100px; text-align: center; }
    .km-social-links, .km-copyright { justify-content: center; text-align: center; }
    .km-copyright { flex-direction: column; gap: 10px; }
    .km-footer-bottom .container { flex-direction: column !important; gap: 20px; }
    
    /* Menú Inferior Móvil */
    .km-mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 -5px 25px rgba(0,0,0,0.08); z-index: 1050; display: flex; justify-content: space-around; align-items: center; padding: 12px 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0,0,0,0.05); }
    .km-mobile-bottom-nav a { text-align: center; color: #9da3af; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 25%; position: relative; }
    .km-mobile-bottom-nav a.active, .km-mobile-bottom-nav a:hover { color: var(--km-blue); transform: translateY(-2px); }
    .km-mobile-bottom-nav a.active::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--km-orange); border-radius: 10px; }
    .km-mobile-bottom-nav i { font-size: 1.4rem; transition: 0.3s; }
    .km-mobile-bottom-nav a.active i { color: var(--km-orange); }
    
    /* Logo Blanco en Menú Lateral (Offcanvas) */
    #kmOffcanvasNative .offcanvas-header img { max-height: 25px !important; width: auto !important; filter: brightness(0) invert(1) !important; -webkit-filter: brightness(0) invert(1) !important; }

    /* Tienda Móvil Offcanvas y Grilla */
    .km-shop-layout { flex-direction: column; }
    .km-shop-products { width: 100%; }
    .km-shop-sidebar { width: 320px !important; max-width: 85vw !important; background: #f8f9fa !important; position: fixed !important; margin-bottom: 0 !important; border-right: 1px solid #ddd; }
    .archive.woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .archive.woocommerce ul.products li.product img { height: 140px !important; padding: 15px !important; }
    .archive.woocommerce ul.products li.product .woocommerce-loop-product__category { font-size: 0.65rem !important; margin: 15px 15px 5px 15px !important; }
    .archive.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.85rem !important; margin: 0 15px 5px 15px !important; }
    .archive.woocommerce ul.products li.product .price { font-size: 1.2rem !important; margin: 0 15px 15px 15px !important; }
    .archive.woocommerce ul.products li.product .button { margin: auto 15px 0 15px !important; padding: 10px !important; font-size: 0.8rem !important; width: calc(100% - 30px) !important;}

    /* Producto Individual Móvil */
    body.single-product div.product { display: flex !important; flex-direction: column !important; gap: 20px !important; padding: 0 15px !important; margin-top: 20px !important; }
    body.single-product .woocommerce-product-gallery { width: 100% !important; flex: 0 0 100% !important; padding: 20px !important; border-radius: 16px !important; position: static !important; margin-bottom: 10px !important; }
    body.single-product .flex-control-nav li { width: 60px !important; }
    body.single-product .summary.entry-summary { width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }
    body.single-product .product_title { font-size: 1.6rem !important; margin-bottom: 15px !important; text-align: left !important; }
    body.single-product .price { font-size: 1.8rem !important; padding-bottom: 15px !important; margin-bottom: 20px !important; justify-content: flex-start !important; }
    body.single-product form.cart { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 15px !important; }
    body.single-product .quantity { justify-content: center !important; border-radius: 12px !important; padding: 5px !important; }
    body.single-product button.single_add_to_cart_button, body.single-product .button.single_add_to_cart_button { background: linear-gradient(135deg, var(--km-orange) 0%, #d68910 100%) !important; color: white !important; width: 100% !important; border-radius: 12px !important; height: 55px !important; font-size: 1rem !important; border: none !important; margin-top: 10px !important;}
    body.single-product .woocommerce-tabs { padding: 25px 20px !important; border-radius: 16px !important; margin-top: 30px !important; }
    
    /* Mi Cuenta Móvil */
    .woocommerce-account .woocommerce { flex-direction: column !important; gap: 20px !important; }
    .woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 100% !important; width: 100% !important; }
    .woocommerce-account .woocommerce-MyAccount-content { padding: 20px !important; }
    .woocommerce-account .u-columns.col2-set { flex-direction: column !important; }
}

/* ======================================================== */
/* ☠️ 10. ANTI-STOREFRONT: CARRITO Y CHECKOUT BLOCKS        */
/* ======================================================== */
html body .wc-block-cart__submit-button, html body .wc-block-components-checkout-place-order-button, html body .wc-block-components-button:not(.is-link), .wc-block-cart .wp-block-button__link { background-color: var(--km-orange) !important; background-image: linear-gradient(135deg, var(--km-orange) 0%, #d68910 100%) !important; color: #ffffff !important; padding: 16px 24px !important; border-radius: 12px !important; font-weight: 800 !important; text-transform: uppercase !important; font-size: 1.1rem !important; border: none !important; width: 100% !important; display: block !important; text-align: center !important; box-shadow: 0 10px 25px rgba(243,156,18,0.3) !important; transition: all 0.3s ease !important; }
html body .wc-block-cart__submit-button:hover, html body .wc-block-components-checkout-place-order-button:hover, .wc-block-cart .wp-block-button__link:hover { transform: translateY(-3px) !important; box-shadow: 0 15px 35px rgba(243,156,18,0.4) !important; }
.woocommerce-cart .cart-collaterals .cart_totals, .wc-block-components-totals-wrapper { background: #f8f9fa !important; padding: 30px !important; border-radius: 16px !important; border: 1px solid #eaeaea !important; }

/* ======================================================== */
/* 🏷️ 11. FIX MÁXIMO: PÁGINA DE MARCAS Y FILTROS COLORIDOS  */
/* ======================================================== */

/* 1. Forzar el Layout (Sidebar 25% a la izquierda / Catálogo 75% a la derecha) */
body[class*="tax-brand"] .site-main { margin: 0 !important; padding: 0 !important; }

body[class*="tax-brand"] #primary {
    width: 75% !important;
    max-width: 75% !important;
    float: right !important;
    padding-left: 30px !important;
    box-sizing: border-box !important;
}

body[class*="tax-brand"] #secondary {
    width: 25% !important;
    max-width: 25% !important;
    float: left !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Forzar Grilla de 3 columnas para aniquilar las imágenes gigantes */
body[class*="tax-brand"] ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}
body[class*="tax-brand"] ul.products::before, 
body[class*="tax-brand"] ul.products::after { 
    display: none !important; 
}

/* Tarjetas blindadas */
body[class*="tax-brand"] ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
    padding: 0 0 20px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    float: none !important;
}

body[class*="tax-brand"] ul.products li.product img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    padding: 30px !important;
    background: #f4f6f8 !important;
    border-radius: 16px 16px 0 0 !important;
    mix-blend-mode: multiply !important;
    margin: 0 !important;
}

body[class*="tax-brand"] ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; font-weight: 600 !important; color: #11151a !important; margin: 20px 20px 10px 20px !important; border-bottom: none !important; padding: 0 !important; line-height: 1.4 !important; text-align: left !important; }
body[class*="tax-brand"] ul.products li.product .price { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--km-orange) !important; margin: 0 20px 20px 20px !important; text-align: left !important; }
body[class*="tax-brand"] ul.products li.product .button { margin: auto 20px 0 20px !important; width: calc(100% - 40px) !important; background: #2d3436 !important; color: white !important; padding: 12px !important; border-radius: 8px !important; text-align: center !important; font-weight: 600 !important; font-size: 0.95rem !important; border: none !important; display: block !important; }

/* 3. Íconos Coloridos y Cajas en Filtros (Fuerza Bruta) */
#secondary .widget, .widget-area .widget {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 16px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    margin-bottom: 25px !important;
}

#secondary .widget .widget-title, .widget-area .widget .widget-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #11151a !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f8f9fa !important;
    padding-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-transform: uppercase !important;
}

/* Ícono Categorías (Carpeta Azul) */
.widget_product_categories .widget-title::before {
    content: "\f07b" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #004e92 !important;
    font-size: 1.3rem !important;
}

/* Ícono Marcas (Etiqueta Naranja) */
.widget_layered_nav .widget-title::before,
.widget_rating_filter .widget-title::before {
    content: "\f02b" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #f39c12 !important;
    font-size: 1.3rem !important;
}

/* Ícono Precio (Billete Verde) */
.widget_price_filter .widget-title::before {
    content: "\f53d" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #27ae60 !important;
    font-size: 1.3rem !important;
}

/* Links y botón de precio limpios */
#secondary .widget ul li { padding: 10px 0 !important; border-bottom: 1px solid #f8f9fa !important; }
#secondary .widget ul li a { color: #444 !important; font-weight: 600 !important; text-decoration: none !important; }
.widget_price_filter .price_slider_amount .button { background: #004e92 !important; color: white !important; border-radius: 6px !important; padding: 8px 15px !important; font-weight: 700 !important; }

/* 4. Responsive Móvil */
@media (max-width: 991px) {
    body[class*="tax-brand"] #primary { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; float: none !important; }
    body[class*="tax-brand"] #secondary { width: 100% !important; max-width: 100% !important; float: none !important; margin-bottom: 30px !important; }
    body[class*="tax-brand"] ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    body[class*="tax-brand"] ul.products li.product img { height: 140px !important; padding: 15px !important; }
}

/* ======================================================== */
/* 🛠️ 12. REESTRUCTURACIÓN DEFINITIVA: PÁGINA 404 Y VACÍAS  */
/* ======================================================== */
body.error404 .site-main, 
body.woocommerce-no-products-found .site-main {
    max-width: 1300px !important; margin: 60px auto 80px auto !important; padding: 40px 5% !important; background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 5px 30px rgba(0,0,0,0.03) !important; border: 1px solid #eaeaea !important;
}
body.error404 .page-content,
body.woocommerce-no-products-found .page-content {
    display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important;
}
body.error404 .page-content > section:first-of-type,
body.error404 .page-content .widget_search,
body.woocommerce-no-products-found .page-content .widget_search {
    width: 100% !important; max-width: 100% !important; margin-bottom: 40px !important; padding-bottom: 30px !important; border-bottom: 2px dashed #eaeaea !important;
}
body.error404 .fourohfour-columns-2,
body.woocommerce-no-products-found .fourohfour-columns-2 {
    display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important;
}
body.error404 .fourohfour-columns-2 .col-2,
body.woocommerce-no-products-found .fourohfour-columns-2 .col-2 {
    width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; order: 1 !important; float: none !important; margin: 0 !important; background: #f8f9fa !important; padding: 20px !important; border-radius: 12px !important; border: 1px solid #eaeaea !important; box-sizing: border-box !important;
}
body.error404 .fourohfour-columns-2 .col-1,
body.woocommerce-no-products-found .fourohfour-columns-2 .col-1 {
    width: calc(75% - 30px) !important; max-width: calc(75% - 30px) !important; flex: 0 0 calc(75% - 30px) !important; order: 2 !important; float: none !important; margin: 0 !important; box-sizing: border-box !important;
}
body.error404 h2, body.error404 .widget-title,
body.woocommerce-no-products-found h2, body.woocommerce-no-products-found .widget-title {
    font-size: 1.6rem !important; font-weight: 800 !important; color: #11151a !important; margin-bottom: 25px !important; border-bottom: 3px solid #f39c12 !important; display: inline-block !important; padding-bottom: 8px !important;
}

/* Grillas Secundarias */
body.error404 ul.products, body.woocommerce-no-products-found ul.products, .related.products ul.products, .upsells.products ul.products, .wp-block-product-new ul.products, .wc-block-grid__products {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin: 0 0 40px 0 !important; padding: 0 !important; width: 100% !important;
}
body.error404 ul.products::before, body.error404 ul.products::after, body.woocommerce-no-products-found ul.products::before, body.woocommerce-no-products-found ul.products::after { display: none !important; }

/* Tarjetas Secundarias */
body.error404 ul.products li.product, body.woocommerce-no-products-found ul.products li.product, .related.products ul.products li.product, .upsells.products ul.products li.product, .wp-block-product-new ul.products li.product, .wc-block-grid__product {
    width: 100% !important; max-width: 100% !important; background: #fff !important; border-radius: 16px !important; border: 1px solid #eaeaea !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; padding: 0 0 20px 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; margin: 0 !important; transition: all 0.3s ease !important; float: none !important; text-align: left !important;
}
body.error404 ul.products li.product:hover, body.woocommerce-no-products-found ul.products li.product:hover, .related.products ul.products li.product:hover {
    transform: translateY(-5px) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
}
body.error404 ul.products li.product img, body.woocommerce-no-products-found ul.products li.product img, .related.products ul.products li.product img, .wp-block-product-new ul.products li.product img {
    width: 100% !important; height: 180px !important; object-fit: contain !important; padding: 20px !important; background: #f4f6f8 !important; border-radius: 16px 16px 0 0 !important; margin: 0 !important; border-bottom: none !important; mix-blend-mode: multiply !important;
}
body.error404 ul.products li.product .woocommerce-loop-product__title, body.woocommerce-no-products-found ul.products li.product .woocommerce-loop-product__title, .related.products ul.products li.product .woocommerce-loop-product__title, .wp-block-product-new ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem !important; font-weight: 600 !important; color: #11151a !important; margin: 15px 15px 10px 15px !important; text-align: left !important; line-height: 1.3 !important; border-bottom: none !important; padding: 0 !important; text-transform: none !important;
}
body.error404 ul.products li.product .price, body.woocommerce-no-products-found ul.products li.product .price, .related.products ul.products li.product .price, .wp-block-product-new ul.products li.product .price {
    font-size: 1.3rem !important; font-weight: 800 !important; color: #f39c12 !important; margin: 0 15px 15px 15px !important; text-align: left !important; display: block !important; border-bottom: none !important;
}
body.error404 ul.products li.product .button, body.woocommerce-no-products-found ul.products li.product .button, .related.products ul.products li.product .button, .wp-block-product-new ul.products li.product .button {
    margin: auto 15px 0 15px !important; width: calc(100% - 30px) !important; background: #2d3436 !important; color: white !important; padding: 10px !important; border-radius: 8px !important; text-align: center !important; font-weight: 600 !important; font-size: 0.9rem !important; border: none !important; display: block !important; transition: 0.3s !important;
}
body.error404 ul.products li.product .button:hover, body.woocommerce-no-products-found ul.products li.product .button:hover, .related.products ul.products li.product .button:hover { background: #f39c12 !important; transform: translateY(-2px) !important; }

@media (max-width: 991px) {
    body.error404 .fourohfour-columns-2 .col-2, body.woocommerce-no-products-found .fourohfour-columns-2 .col-2 {
        width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 1 !important; margin-bottom: 30px !important;
    }
    body.error404 .fourohfour-columns-2 .col-1, body.woocommerce-no-products-found .fourohfour-columns-2 .col-1 {
        width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 2 !important;
    }
    body.error404 ul.products, body.woocommerce-no-products-found ul.products, .related.products ul.products, .upsells.products ul.products, .wp-block-product-new ul.products { 
        grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; 
    }
    body.error404 ul.products li.product img, body.woocommerce-no-products-found ul.products li.product img, .related.products ul.products li.product img, .wp-block-product-new ul.products li.product img { 
        height: 130px !important; padding: 10px !important; 
    }
}

/* ======================================================== */
/* 🧹 13. DETALLES FINALES: LÍNEAS NARANJAS Y CONTADORES   */
/* ======================================================== */
body.error404 ul.products li.product .woocommerce-loop-product__title::after,
body.error404 ul.products li.product .woocommerce-loop-product__title::before,
body.woocommerce-no-products-found ul.products li.product .woocommerce-loop-product__title::after,
body.woocommerce-no-products-found ul.products li.product .woocommerce-loop-product__title::before,
.wp-block-product-new ul.products li.product .woocommerce-loop-product__title::after,
.wp-block-product-new ul.products li.product .woocommerce-loop-product__title::before,
.related.products ul.products li.product .woocommerce-loop-product__title::after,
.related.products ul.products li.product .woocommerce-loop-product__title::before {
    display: none !important; content: none !important;
}

/* Listas del Filtro (Categorías y Marcas) */
body.error404 .widget_product_categories ul,
body.error404 .widget_layered_nav ul,
body.woocommerce-no-products-found .widget_product_categories ul,
body.woocommerce-no-products-found .widget_layered_nav ul { 
    padding: 0 !important; margin: 0 !important; list-style: none !important; 
}
body.error404 .widget_product_categories ul li,
body.error404 .widget_layered_nav ul li,
body.woocommerce-no-products-found .widget_product_categories ul li,
body.woocommerce-no-products-found .widget_layered_nav ul li { 
    border: none !important; border-bottom: 1px solid #eaeaea !important; padding: 10px 0 !important; background: transparent !important; border-radius: 0 !important;
}
body.error404 .widget_product_categories ul li a,
body.error404 .widget_layered_nav ul li a,
body.woocommerce-no-products-found .widget_product_categories ul li a,
body.woocommerce-no-products-found .widget_layered_nav ul li a { 
    color: var(--km-dark) !important; font-weight: 600 !important; text-decoration: none !important; transition: 0.3s !important; 
}
body.error404 .widget_product_categories ul li a:hover,
body.error404 .widget_layered_nav ul li a:hover,
body.woocommerce-no-products-found .widget_product_categories ul li a:hover,
body.woocommerce-no-products-found .widget_layered_nav ul li a:hover { 
    color: var(--km-orange) !important; padding-left: 5px !important; 
}

/* Arreglar los contadores de las categorías/marcas (Pastillas) */
.widget_product_categories ul li .count,
.widget_layered_nav ul li .count {
    float: right !important;
    background: #f4f6f8 !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    color: var(--km-orange) !important;
    font-weight: 800 !important;
    border: 1px solid #eaeaea !important;
}

/* ======================================================== */
/* 🌟 TARJETAS DE PRODUCTO - PORTADA (CATÁLOGO DESTACADO)   */
/* ======================================================== */

.km-product-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.km-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* Contenedor de la Imagen con fondo gris */
.km-product-img-wrap {
    position: relative;
    background: #f4f6f8;
    padding: 30px;
    text-align: center;
    border-bottom: 1px solid #eaeaea;
}
.km-product-img-wrap img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.4s ease;
}
.km-product-card:hover .km-product-img-wrap img {
    transform: scale(1.05);
}

/* Botón flotante "Agregar al carrito" que aparece al pasar el mouse */
.km-product-actions {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}
.km-product-card:hover .km-product-actions {
    opacity: 1;
    transform: translateY(0);
}
.km-btn-add {
    background: var(--km-orange);
    color: white !important;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(243,156,18,0.3);
    transition: 0.3s;
}
.km-btn-add:hover {
    background: #d68910;
    transform: scale(1.05);
    color: white !important;
}

/* Textos de la tarjeta */
.km-product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.km-category {
    font-size: 0.7rem;
    color: var(--km-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 8px;
}
.km-product-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--km-dark) !important;
    text-decoration: none !important;
    line-height: 1.4;
    margin-bottom: 15px;
    flex-grow: 1;
    transition: 0.2s;
}
.km-product-title:hover {
    color: var(--km-orange) !important;
}
.km-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--km-orange);
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.km-price del {
    font-size: 0.95rem;
    color: #aaa;
    font-weight: 500;
}
.km-price ins {
    text-decoration: none;
}

/* ======================================================== */
/* 🚀 FIX NUCLEAR: PÁGINA DE MARCAS (OXÍGENO Y ESTRUCTURA)  */
/* ======================================================== */

/* 1. Destruir la imagen gigante del medio de raíz */
body.tax-product_brand img.brand-thumbnail,
body.tax-product_brand .brand-thumbnail,
body.tax-product_brand .term-description {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* 2. Inyectar aire (Márgenes) al contenedor principal */
body.tax-product_brand .site-content {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

/* 3. Forzar el Layout: Sidebar 25% y Productos 75% */
body.tax-product_brand #secondary,
body.tax-product_brand .widget-area {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
    order: 1 !important;
    padding-right: 30px !important;
    margin: 0 !important;
    display: block !important;
}

body.tax-product_brand #primary,
body.tax-product_brand .content-area {
    width: 75% !important;
    max-width: 75% !important;
    flex: 0 0 75% !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 4. Título de la marca ordenado */
body.tax-product_brand .woocommerce-products-header__title {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #11151a !important;
    margin-bottom: 30px !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid #f39c12 !important;
    display: inline-block !important;
    padding-bottom: 10px !important;
}

/* 5. Responsive Móvil para Marcas */
@media (max-width: 991px) {
    body.tax-product_brand .site-content {
        padding: 20px 15px !important;
        flex-direction: column !important;
    }
    body.tax-product_brand #secondary, 
    body.tax-product_brand #primary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    body.tax-product_brand #secondary {
        margin-bottom: 30px !important;
    }
}

/* ======================================================== */
/* 🌬️ FIX AIRE, CENTRADO Y MÓVIL EN PÁGINA DE MARCAS        */
/* ======================================================== */
body.tax-product_brand .site-content,
body.tax-product_brand .site-main,
body.tax-product_brand .col-full {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Centrado perfecto en Escritorio */
body.tax-product_brand .km-shop-layout {
    max-width: 1300px !important;
    margin: 60px auto 80px auto !important; 
    padding: 0 5% !important;               
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important; /* Fuerza el centrado absoluto */
}

/* Optimización total para Celulares (Mobile) */
@media (max-width: 991px) {
    body.tax-product_brand .km-shop-layout {
        margin: 30px auto 50px auto !important;
        padding: 0 15px !important;
        flex-direction: column !important; /* Apila: Filtros arriba, Productos abajo */
        align-items: center !important;
    }
    
    /* Expande los contenedores al 100% de la pantalla del celular */
    body.tax-product_brand #secondary,
    body.tax-product_brand #primary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Da un respiro entre los filtros y los productos en el celular */
    body.tax-product_brand #secondary {
        margin-bottom: 25px !important; 
    }
}
/* ======================================================== */
/* 🚀 FIX DEFINITIVO: RESURRECCIÓN DEL BLOQUE DE MARCAS WOO */
/* ======================================================== */

/* 1. Anular cualquier display:none oculto */
.wp-block-woocommerce-attribute-filter {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* 2. Quitar estilos de lista nativos aburridos */
.wc-block-components-product-attribute-filter-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Diseño Premium para las tarjetas de marcas (Bloques de Woo) */
.wc-block-components-product-attribute-filter-list-item {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    padding: 10px 15px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Efecto Hover Premium */
.wc-block-components-product-attribute-filter-list-item:hover {
    border-color: var(--km-blue) !important;
    box-shadow: 0 5px 15px rgba(0, 78, 146, 0.08) !important;
    transform: translateX(4px) !important;
    background: #f8fbff !important;
}

/* Texto de la Marca y ocultar el feo checkbox cuadrado */
.wc-block-components-product-attribute-filter-list-item input[type="checkbox"] {
    display: none !important;
}

.wc-block-components-product-attribute-filter-list-item a,
.wc-block-components-product-attribute-filter-list-item label {
    color: var(--km-dark) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    flex-grow: 1 !important;
    transition: color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.wc-block-components-product-attribute-filter-list-item:hover a,
.wc-block-components-product-attribute-filter-list-item:hover label {
    color: var(--km-blue) !important;
}

/* Ícono de etiqueta (Tag) inyectado por CSS */
.wc-block-components-product-attribute-filter-list-item a::before,
.wc-block-components-product-attribute-filter-list-item label::before {
    content: "\f02b" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #ccc !important;
    margin-right: 10px !important;
    font-size: 0.9rem !important;
    transition: 0.3s ease !important;
}

.wc-block-components-product-attribute-filter-list-item:hover a::before,
.wc-block-components-product-attribute-filter-list-item:hover label::before {
    color: var(--km-orange) !important;
}

/* Pastilla (Pill) contadora de productos de WooCommerce Blocks */
.wc-block-components-product-attribute-filter-list-item__count {
    background: #f4f6f8 !important;
    color: var(--km-orange) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    border: 1px solid #eaeaea !important;
    transition: 0.3s ease !important;
    margin-left: 10px !important;
}

.wc-block-components-product-attribute-filter-list-item:hover .wc-block-components-product-attribute-filter-list-item__count {
    background: var(--km-orange) !important;
    color: #ffffff !important;
    border-color: var(--km-orange) !important;
}

/* Ocultar el botón "Filtrar" feo nativo del bloque, los clicks ahora lo activan directo */
.wc-block-components-product-attribute-filter > .wp-block-button {
    display: none !important;
}
