/* Custom code goes here - paste your css code below in line 10 */

a.product-flags-plist span.product-flag.new,
#product #content .product-flags .product-flag.new,
a.product-flags-plist span.product-flag.pack,
#product #content .product-flags .product-flag.pack {
color: #000;
}

/* ============================================================
   IDENTIDAD DE MARCA SOCODIMA
   Azul #003399 · Rojo #D40000 · Amarillo #FFC600 · Blanco
   ============================================================ */

/* --- Logo del header: tamaño correcto --- */
#_desktop_logo img.logo,
#_desktop_logo .logo,
.checkout #header .logo,
header .logo.img-responsive {
    max-height: 100px;
    width: auto;
    height: auto;
}

/* --- Banner de teléfonos en la barra superior (centrado, estilo tienda anterior) --- */
.header-nav .container > .row > .col-md-12 {
    position: relative;
    min-height: 44px;
}
.soco-tel-banner {
    display: inline-flex;
    gap: 24px;
    align-items: center;
    padding: 6px 20px;
    border-top: 3px solid #e30613;
    border-bottom: 3px dashed #FFC600;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.2;
    /* centrado horizontal en la barra superior */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.soco-tel-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}
.soco-tel-item .material-icons { font-size: 20px; }
.soco-tel-ventas { color: #003399; }
.soco-tel-wa { color: #1aa851; text-decoration: none; }
.soco-tel-wa .fa-whatsapp { color: #25D366; font-size: 18px; }
.soco-tel-wa:hover { color: #128c3e; }
@media (max-width: 767px) {
    .soco-tel-banner {
        position: static;
        transform: none;
        gap: 12px;
        font-size: 13px;
        padding: 5px 10px;
        flex-wrap: wrap;
    }
}

/* --- Botones principales en AZUL de marca --- */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    background-color: #003399 !important;
    border-color: #003399 !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active {
    background-color: #00257a !important;
    border-color: #00257a !important;
}

/* --- Botón AGREGAR AL CARRITO en AMARILLO (color de marca, alta visibilidad) --- */
.product-add-to-cart .add-to-cart,
#add-to-cart-or-refresh .add-to-cart,
.product-actions .add-to-cart,
.btn.add-to-cart,
button.add-to-cart {
    background-color: #FFC600 !important;
    border-color: #FFC600 !important;
    color: #003399 !important;
    font-weight: 700 !important;
}
.product-add-to-cart .add-to-cart:hover,
#add-to-cart-or-refresh .add-to-cart:hover,
.btn.add-to-cart:hover,
button.add-to-cart:hover {
    background-color: #e6b200 !important;
    border-color: #e6b200 !important;
    color: #003399 !important;
}

/* --- Precio en AZUL de marca --- */
.product-price,
.price,
.current-price span,
.product-price-and-shipping .price,
.has-discount .price {
    color: #003399 !important;
}

/* --- Ofertas / descuentos en ROJO de marca --- */
.product-flag.discount,
.product-flag.on-sale,
.product-flag.sale,
.product-flags li.product-flag.discount,
span.discount,
.discount-percentage,
.product-flag.reduction {
    background-color: #D40000 !important;
    color: #fff !important;
}

/* --- Acentos de enlaces e iconos --- */
a:hover,
a:focus {
    color: #003399;
}

/* === CARRITO ===
   La BARRA (.header) es azul con texto blanco.
   El DESPLEGABLE (cart_products / subtotals) tiene texto oscuro legible. */

/* Barra del carrito siempre azul */
.blockcart .header,
.blockcart.active .header,
.blockcart.inactive .header,
#header .cart-preview .header {
    background-color: #003399 !important;
}
/* Texto e iconos SOLO de la barra en blanco */
.blockcart .header,
.blockcart .header *,
.blockcart .header a,
.blockcart .header .shopping-cart,
.blockcart .header i,
.blockcart .header .cart_qty,
.blockcart .header .cart_text,
.blockcart .header .cart_total {
    color: #ffffff !important;
}
/* Contenido desplegable del carrito: texto OSCURO legible sobre blanco */
.blockcart .cart_products,
.blockcart .cart_products *,
.blockcart .cart-subtotals,
.blockcart .cart-subtotals *,
.blockcart .cart_block_list,
.blockcart .cart_block_list *,
.blockcart .body,
.blockcart .body * {
    color: #333333 !important;
}
/* Botones dentro del desplegable (Confirmar) en blanco sobre azul */
.blockcart .cart_products .btn,
.blockcart .body .btn,
.blockcart .btn-primary {
    color: #ffffff !important;
}

/* --- Títulos de bloque / secciones con línea de marca --- */
.featured-products .products-section-title,
.products-section-title,
h1.h1, .page-header h1 {
    border-color: #FFC600;
}

/* ============================================================
   ESTILO TIPO TIENDA ANTERIOR (barras azules + secciones)
   Fondo: se deja BLANCO (no se copia la imagen de fondo)
   ============================================================ */

/* --- Menú principal: barra AZUL con texto blanco, hover amarillo --- */
#_desktop_top_menu .top-menu,
#top-menu,
.js-top-menu .top-menu,
.menu.js-top-menu {
    background-color: #003399 !important;
}
#_desktop_top_menu .top-menu > li > a,
#top-menu > li > a,
.top-menu > li > a,
.top-menu .menu-item > a,
#_desktop_top_menu a.dropdown-item {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 600;
}
#_desktop_top_menu .top-menu > li > a:hover,
#top-menu > li > a:hover,
.top-menu > li:hover > a,
.top-menu > li.active > a {
    color: #FFC600 !important;
    background-color: #00257a !important;
}
/* Ítems del menú más compactos para que entren en una sola fila */
#_desktop_top_menu .top-menu > li > a,
#top-menu > li > a,
.top-menu > li > a {
    padding-left: 13px !important;
    padding-right: 13px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* Submenú (mega menú desplegable): fondo blanco, texto oscuro legible */
.top-menu .sub-menu,
.top-menu .popover,
#_desktop_top_menu .sub-menu {
    background-color: #ffffff !important;
}
.top-menu .sub-menu a,
#_desktop_top_menu .sub-menu a {
    color: #333333 !important;
    text-transform: none;
}
.top-menu .sub-menu a:hover {
    color: #003399 !important;
}

/* --- Bloque de categorías (izquierda): encabezado AMARILLO --- */
.block-categories .title_block,
.block-categories > .h6,
.block-categories .h3,
.block-categories > .h3,
#left-column .block-categories .title_block,
#home_categories .title_block,
.block_content .title_block.h6 {
    background-color: #FFC600 !important;
    color: #003399 !important;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 15px !important;
    margin: 0 !important;
}

/* --- Títulos de sección (PRODUCTOS DESTACADOS, etc.): azul + subrayado amarillo --- */
.products-section-title,
.index_title,
.featured-products .products-section-title,
h2.products-section-title {
    color: #003399 !important;
    border-bottom: 3px solid #FFC600 !important;
    text-transform: uppercase;
    font-weight: 700;
}

/* --- Botón de búsqueda azul (como el viejo) --- */
.search-widget button[type="submit"],
#search_widget button,
.header-search button {
    background-color: #003399 !important;
    color: #ffffff !important;
}

/* --- Asegurar fondo blanco (NO imagen de fondo) --- */
body, #wrapper, .parallax, .at_parallax {
    background-image: none !important;
    background-color: #ffffff !important;
}

/* ============================================================
   HEADER COMPLETO PEGADO (sticky) al hacer scroll
   Queda logo + buscador + usuario + carrito + menú, todo junto
   ============================================================ */
#header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
/* que los desplegables del menú queden por encima */
#header .sub-menu,
#header .popover { z-index: 1040 !important; }

/* Ocultar el carrito flotante del tema (dejamos solo el azul de arriba) */
.stickycart,
#stickycart,
.sticky-cart,
.sticky_cart,
.at-sticky-cart,
.cart_sticky,
.fixed-cart {
    display: none !important;
}

/* --- Sección "Nuestras Sucursales" (footer) --- */
.soco-sucursales {
    background: #f5f7fa;
    padding: 40px 0;
    border-top: 4px solid #FFC600;
}
.soco-suc-title {
    text-align: center;
    color: #003399;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 28px;
}
.soco-suc-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.soco-suc-card {
    flex: 1 1 340px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
}
.soco-suc-info { padding: 18px 20px; }
.soco-suc-badge {
    display: inline-block;
    background: #003399;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}
.soco-suc-card h4 {
    color: #003399;
    margin: 10px 0 8px;
    font-weight: 700;
}
.soco-suc-info p {
    margin: 4px 0;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
}
.soco-suc-info p .material-icons { color: #D40000; font-size: 20px; }
.soco-suc-map iframe { width: 100%; height: 230px; border: 0; display: block; }
@media (max-width: 768px) { .soco-suc-map iframe { height: 200px; } }

/* --- Logos de marca: GRIS por defecto, COLOR al pasar el mouse --- */
#bx_manufacturer img,
#angarmanufacturer_block img,
.angarmanufacturer img,
ul#bx_manufacturer li a img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter .35s ease, opacity .35s ease;
}
#bx_manufacturer img:hover,
#angarmanufacturer_block img:hover,
.angarmanufacturer img:hover,
ul#bx_manufacturer li a:hover img {
    filter: grayscale(0%);
    opacity: 1;
}


/* === Socodima: nombres largos de categoria en el submenu no deben desbordar === */
#_desktop_top_menu .popover.sub-menu a.dropdown-item,
#_desktop_top_menu .popover.sub-menu ul.top-menu li a,
#top-menu .sub-menu li a,
#top-menu .popover.sub-menu li a {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2 !important;
  height: auto !important;
}


/* === Socodima: footer azul de marca === */
.footer-container { background: #003399 !important; }
.footer-container .bottom-footer { background: #003399 !important; border-color: #1a4fc0 !important; color:#fff !important; }
.footer-container a, .footer-container li a, .footer-container .cms-name a { color: #dfe6ff !important; }
.footer-container a:hover, .footer-container li a:hover { color: #ffcf00 !important; }
.footer-container .h3, .footer-container h3, .footer-container .title { color:#fff !important; }


/* === Socodima: fix boton Seguir IG (no gigante) + aprovechar ancho === */
.soco-ig{max-width:100% !important;margin:34px 0 !important;padding:0 !important;}
.soco-ig .soco-ig-head{display:flex !important;align-items:center !important;flex-wrap:wrap !important;min-height:0 !important;}
.soco-ig .soco-ig-avatar,.soco-ig .soco-ig-meta{flex:0 0 auto !important;}
.soco-ig .soco-ig-follow{
  flex:0 0 auto !important; align-self:center !important; margin-left:auto !important;
  display:inline-flex !important; align-items:center !important; width:auto !important;
  max-width:170px !important; height:auto !important; min-height:0 !important;
  padding:9px 18px !important; border-radius:9px !important; white-space:nowrap !important;
  font-size:.95rem !important; line-height:1.2 !important;
}
.soco-ig .soco-ig-follow svg{width:18px !important;height:18px !important;flex:0 0 auto !important;}
.soco-ig .soco-ig-carousel{width:100% !important;}
.soco-ig .soco-ig-card{width:190px !important;}


/* === Socodima: logo mas grande + centrado vertical con el buscador === */
.header-top .row{align-items:center;}
#_desktop_logo{display:flex;align-items:center;}
#_desktop_logo h1{margin:0;display:flex;align-items:center;}


/* === Socodima: subir el logo un poco para alinear con el buscador === */
#_desktop_logo{margin-top:-9px;}