/* * branding-overrides.css * Overrides que hacen que los botones y acentos del template Bosch original * respeten las variables CSS del branding (--bosch-primary, --bosch-accent). * * Se carga en el DESPUÉS de bosch/base.css y bosch/home.css para * ganar el cascade. Solo toca elementos visualmente "de marca" (botones, * links, badges principales), NUNCA colores semánticos (success/danger/info). */ /* === Botón principal del template (theme-btn, btn-style-one/two/three) === */ .theme-btn, .theme-btn.btn-style-one, .theme-btn.btn-style-two, .theme-btn.btn-style-three, .btn-style-one, .btn-style-two, .btn-primary { background: var(--bosch-primary, #E85230) !important; border-color: var(--bosch-primary, #E85230) !important; color: #fff !important; transition: background .15s ease, border-color .15s ease, transform .15s ease !important; } .theme-btn:hover, .theme-btn.btn-style-one:hover, .theme-btn.btn-style-two:hover, .theme-btn.btn-style-three:hover, .btn-style-one:hover, .btn-style-two:hover, .btn-primary:hover, .btn-primary:focus { background: var(--bosch-accent, #d04220) !important; border-color: var(--bosch-accent, #d04220) !important; color: #fff !important; } /* Botones con borde / outline → border naranja, fondo blanco */ .btn-outline-primary, .theme-btn.btn-style-three.btn-style-outline { background: transparent !important; border-color: var(--bosch-primary, #E85230) !important; color: var(--bosch-primary, #E85230) !important; } .btn-outline-primary:hover, .theme-btn.btn-style-three.btn-style-outline:hover { background: var(--bosch-primary, #E85230) !important; color: #fff !important; } /* === Links del template — texto azul Bootstrap → naranja branding === */ .text-primary { color: var(--bosch-primary, #E85230) !important; } .bg-primary { background-color: var(--bosch-primary, #E85230) !important; } .border-primary { border-color: var(--bosch-primary, #E85230) !important; } /* === Acentos del catálogo (precios, badges, hovers de cards) === */ .product-block-one .image-box .image-content-two .icon-box li a:hover, .product-block-one .lower-content h4 a:hover, .shop-block .lower-content h4 a:hover, .featured-block .text h3:hover, .brand-block:hover .image-box, .search-form-content .form-group button[type="submit"] { color: var(--bosch-primary, #E85230) !important; } .product-block-one .lower-content .theme-btn, .shop-block .lower-content .theme-btn, .product-block-one .image-box .image-content-two .icon-box li a:hover { background: var(--bosch-primary, #E85230) !important; } /* === Owl carousel dots/arrows del template === */ .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: var(--bosch-primary, #E85230) !important; } .owl-theme .owl-nav button.owl-prev:hover, .owl-theme .owl-nav button.owl-next:hover { background: var(--bosch-primary, #E85230) !important; color: #fff !important; } /* === Acentos del header del template original === */ .main-header .header-top .menu-right .info-box .text a:hover, .main-header .main-menu .navigation > li.current > a, .main-header .main-menu .navigation > li:hover > a { color: var(--bosch-primary, #E85230) !important; } /* === Inputs focus border === */ .form-control:focus, input:focus, textarea:focus, select:focus { border-color: var(--bosch-primary, #E85230) !important; box-shadow: 0 0 0 0.2rem rgba(var(--bosch-primary-rgb, 232, 82, 48), .15) !important; } /* === Scroll-to-top viejo del template — ocultarlo para que solo se use el nuevo componente React .maz-scroll-top (que tiene estilos propios) === */ .scroll-to-top { display: none !important; } /* === Badges de oferta/descuento === */ .product-block-one .image-box .badge, .shop-block .image-box .badge, .badge-primary, .badge-warning { background: var(--bosch-primary, #E85230) !important; color: #fff !important; } /* === Precios destacados === */ .product-block-one .lower-content .price, .shop-block .lower-content .price, .product-details-content .price { color: var(--bosch-primary, #E85230) !important; } /* === Sidebar y filtros del catálogo === */ .shop-sidebar .price-filter .ui-slider-range, .shop-sidebar .price-filter .ui-slider-handle, .shop-sidebar .category-widget ul li a:hover { background: var(--bosch-primary, #E85230) !important; } /* === Paginación === */ .pagination-wrapper .pagination li a:hover, .pagination-wrapper .pagination li.active a, .pagination li.active .page-link, .page-link:hover { background: var(--bosch-primary, #E85230) !important; border-color: var(--bosch-primary, #E85230) !important; color: #fff !important; }