/* Theme Name: Bloxic Child Theme URI: https://festivalesdelsur.com Description: Tema hijo de Bloxic para Festivales del Sur. Aquí van los overrides que deben sobrevivir a las actualizaciones del tema padre. Author: HEXER Template: bloxic Version: 1.0.3 Text Domain: bloxic-child */ /* ============================================================ SIN AZUL EN TODA LA WEB — convención de hover negro <-> rojo Dos librerías traen azul por defecto y pueden asomar en cualquier página, sobre todo al pasar el ratón: 1. Bootstrap (lo carga el tema padre): a:hover usa --bs-link-hover-color (#0a58ca, azul oscuro) y el tema no lo corrige, así que cualquier enlace sin color de hover propio se volvería azul. 2. Elementor Pro: los widgets de WooCommerce (Mi cuenta, Carrito, Finalizar compra, Añadir al carrito, Resumen de compra) usan variables cuyo valor por defecto es #5bc0de. En vez de añadir reglas nuevas —que pisarían hovers ya correctos del tema— se redefinen aquí LAS PROPIAS VARIABLES. Así el azul deja de existir como opción y todo lo que ya funciona se mantiene igual. Convención: lo que está en rojo pasa a negro al pasar el ratón, y lo que está en negro pasa a rojo. ============================================================ */ :root { /* --- Bootstrap --- */ --bs-link-color: var(--main-color, #ed1d24); --bs-link-hover-color: var(--black-color, #000); /* --- Elementor Pro / widgets de WooCommerce --- */ /* Enlaces: rojo -> negro */ --links-normal-color: var(--main-color, #ed1d24); --links-hover-color: var(--black-color, #000); --tables-links-normal-color: var(--main-color, #ed1d24); --tables-links-hover-color: var(--black-color, #000); --order-details-product-links-normal-color: var(--main-color, #ed1d24); --order-details-product-links-hover-color: var(--black-color, #000); /* Pestañas y menús: negro -> rojo (activo en rojo) */ --tabs-normal-color: var(--black-color, #000); --tabs-hover-color: var(--main-color, #ed1d24); --tabs-active-color: var(--main-color, #ed1d24); --tabs-border-color: #ececec; --tabs-hover-border-color: var(--main-color, #ed1d24); --tabs-active-border-color: var(--main-color, #ed1d24); --tabs-divider-color: #ececec; /* Botones y sus bordes: negro -> rojo */ --buttons-border-color: var(--black-color, #000); --forms-buttons-border-color: var(--black-color, #000); --forms-buttons-hover-border-color: var(--main-color, #ed1d24); --tables-buttons-border-color: var(--black-color, #000); --purchase-button-hover-border-color: var(--main-color, #ed1d24); --checkout-button-hover-border-color: var(--main-color, #ed1d24); --order-summary-remove-icon-hover-color: var(--main-color, #ed1d24); } /* Único azul que Elementor deja escrito a fuego (no sale de variable): el botón de añadir método de pago dentro de "Mi cuenta". */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method #add_payment_method #payment #place_order { background: var(--black-color, #000); transition: background .2s ease; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method #add_payment_method #payment #place_order:hover { background: var(--main-color, #ed1d24); } /* ============================================================ Mini presupuesto en el header (YITH Request a Quote) Plantilla propia en woocommerce/widgets/mini-quote-list.php con markup .bloxic-mq. El wrapper .widget_ywraq_mini_list_quote lo conserva YITH para el auto-refresco AJAX. ============================================================ */ /* Anular estilos por defecto de YITH y del contenedor "cart-box" del tema */ .main-header .cart-box { padding-left: 0; margin-left: 24px; } .main-header .cart-box:before { left: -24px; top: 50%; bottom: auto; height: 24px; transform: translateY(-50%); opacity: .12; } .main-header .cart-box .box-inner { padding-left: 0; text-transform: none; display: flex; align-items: center; } .main-header .widget_ywraq_mini_list_quote, .main-header .yith-ywraq-list-widget-wrapper { margin: 0 !important; padding: 0 !important; display: inline-block !important; position: static !important; z-index: auto !important; vertical-align: middle; } /* ---- Disparador (icono + contador), sin caja ---- */ .bloxic-mq { position: relative; display: inline-block; line-height: 1; } .bloxic-mq__trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--black-color, #1a1a1a); text-decoration: none; transition: color .2s ease; } .bloxic-mq__trigger:hover { color: var(--main-color, #e10000); } .bloxic-mq__icon { width: 24px; height: 24px; display: block; } .bloxic-mq__count { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: var(--main-color, #e10000); border-radius: 50%; border: 2px solid #fff; } /* ---- Panel desplegable (resumen en hover) ---- */ .bloxic-mq__panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 1200; width: 360px; max-width: calc(100vw - 30px); background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .14); padding: 18px 18px 20px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease, visibility .22s; } .bloxic-mq__panel:before { /* puente invisible para no perder el hover */ content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 16px; } .bloxic-mq__panel:after { /* flechita */ content: ''; position: absolute; top: -7px; right: 14px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(0,0,0,.04); } .bloxic-mq:hover .bloxic-mq__panel, .bloxic-mq__panel:hover { opacity: 1; visibility: visible; transform: translateY(0); } .bloxic-mq__head { font-size: 13px; color: #555; font-weight: 500; text-transform: none; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; letter-spacing: 0; } .bloxic-mq__head strong { color: var(--main-color, #e10000); } .bloxic-mq__empty { color: #999; font-size: 14px; padding: 8px 0 16px; } .bloxic-mq__list { list-style: none; margin: 0 0 6px; padding: 0; max-height: 320px; overflow-y: auto; } .bloxic-mq__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; } .bloxic-mq__item:last-child { border-bottom: 0; } .bloxic-mq__thumb { flex: 0 0 auto; line-height: 0; } .bloxic-mq__thumb img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; } .bloxic-mq__info { flex: 1 1 auto; min-width: 0; text-decoration: none; } .bloxic-mq__name { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #222; text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bloxic-mq__info:hover .bloxic-mq__name { color: var(--main-color, #e10000); } .bloxic-mq__qty { display: block; font-size: 12px; color: #999; margin-top: 3px; } .bloxic-mq__remove { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: #bbb; text-decoration: none; background: #f6f6f6; transition: all .15s ease; } .bloxic-mq__remove:hover { color: #fff; background: var(--main-color, #e10000); } .bloxic-mq__btn { display: block; text-align: center; margin-top: 14px; padding: 12px 16px; border-radius: 8px; background: var(--main-color, #e10000); color: #fff !important; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; text-decoration: none; transition: filter .2s ease; } .bloxic-mq__btn:hover { filter: brightness(.92); } .bloxic-mq.is-empty .bloxic-mq__btn { display: none; } /* ---- En el header fijo (sticky) ---- */ .main-header .sticky-header .right-box { gap: 8px; } .main-header .sticky-header .cart-box.sticky-quote-box { margin-left: 14px; } .main-header .sticky-header .cart-box.sticky-quote-box:before { display: none; } /* ============================================================ MÓVIL: unificar el header de arriba (.header-lower) con el fijo del scroll (.sticky-header). El fijo trae fondo blanco + sombra/separador horizontal debajo (box-shadow); el de arriba iba transparente y sin sombra, por eso al hacer scroll "cambiaba" el diseño. Le damos el mismo fondo y sombra para que los dos se vean iguales (logo ya a la izquierda en ambos). Solo en móvil; en escritorio el header-lower mantiene su diseño con el menú. ============================================================ */ @media (max-width: 767px) { .main-header .header-lower { background-color: var(--white-color, #fff); box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); position: relative; z-index: 5; } /* El logo del header de arriba llevaba margin-left:30px (.logo-box .logo) y quedaba metido (empezaba en x=45); el del sticky va pegado a la izquierda (x=15). Lo alineamos igual, flush a la izquierda como el sticky. */ .main-header .header-lower .logo-box .logo { margin-left: 0; } /* Separador vertical entre el logo y el carrito/hamburguesa, IGUAL en los dos headers. El tema solo lo trae en el estático (.logo-box:before); lo dejamos con una geometría común y se lo añadimos también al sticky (.logo:before) para que coincidan. */ .main-header .header-lower .logo-box:before, .main-header .sticky-header .logo:before { content: ''; display: block; position: absolute; right: -20px; top: 50%; bottom: auto; transform: translateY(-50%); width: 1px; height: 28px; opacity: 0.12; background-color: var(--black-color, #000); } } /* ============================================================ Títulos de los widgets de la barra lateral (blog, tienda). El tema los pinta en Outfit 500 (.sidebar-title-two h5), pero el kit global de Elementor (.elementor-kit-6 h5) los reescribe a Jost 400 con la misma especificidad y, al cargar después, gana. Recuperamos Outfit como en la demo, con un selector más específico. */ .sidebar-side .sidebar-title-two h5, .sidebar-page-container .sidebar-title-two h5, .footer-widget .sidebar-title-two h5 { font-family: var(--font-family-Outfit), sans-serif; font-weight: 500; /* El kit de Elementor también fuerza el tamaño a 16px; el tema quiere --font-22 (22px), que es el de la demo. */ font-size: var(--font-22, 22px); line-height: 1.4; } /* ============================================================ Flechas de la paginación (blog, archivos...). El tema imprime (peso 400, Regular). Con Font Awesome 5 PRO —la de la demo— ese glifo existe en Regular; con la versión FREE que hay instalada aquí, angle-double-right solo está en el peso Solid (900), así que en Regular sale vacío y la flecha desaparece. Forzamos 900 para usar la variante Solid, que sí está disponible. Cubre también la flecha anterior por si se activa. ============================================================ */ .styled-pagination .fa-angle-double-right, .styled-pagination .fa-angle-double-left, .page-numbers .fa-angle-double-right, .page-numbers .fa-angle-double-left { font-weight: 900; } /* ---- Buscador de la cabecera: barra fija en lugar de la cortina ---- assets/js/header-search.js sustituye la lupa suelta de Header Style 1 por el formulario del popup envuelto en .search-box-two (el estilo ya lo trae header.css del tema). Ocultamos aquí la lupa para que no parpadee mientras carga el JS; el resto del aspecto —píldora, borde rojo al enfocar— es del propio tema, así que no hace falta CSS nuevo. */ .main-header .search-box-outer .search-box-btn { display: none; } /* Botón propio para vaciar el campo (lo inyecta header-search.js). Se oculta la "x" nativa del navegador: quedaba debajo del botón de la lupa y al pulsarla enviaba la búsqueda en lugar de limpiarla. */ .main-header .search-box-two input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* Hueco a la derecha para las dos acciones, que el texto no se meta debajo */ .main-header .search-box-two input[type="search"] { padding-right: 76px; } /* Lupa algo más estrecha para dejar sitio a la x sin solaparse */ .main-header .search-box-two button[type="submit"] { width: 44px; } .main-header .search-box-two .bloxic-search-clear { position: absolute; right: 46px; top: 0; width: 24px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--main-color, #ed1d24); font-size: 22px; line-height: 1; display: none; align-items: center; justify-content: center; transition: color .2s ease; } .main-header .search-box-two .bloxic-search-clear.is-visible { display: inline-flex; } .main-header .search-box-two .bloxic-search-clear:hover { color: var(--black-color, #000); } /* ---- Logo del menú fijo (sticky) ---- Fallo del tema padre, común a Header Style 1 y 2: el ancho del logo se imprime en línea sobre ".main-header .logo-box .logo", pero el marcado del sticky (header-one.php:97 / header-two.php:176) usa un ".logo" suelto, SIN el contenedor .logo-box, así que nunca recibe ese ancho. Con un logo SVG —que no tiene dimensiones intrínsecas— eso lo deja en 0x0 y desaparece al hacer scroll. Le damos altura y ancho automático para que respete su proporción sin depender del ajuste del tema. */ .main-header .sticky-header .logo img { height: 40px; width: auto; max-width: 250px; display: inline-block; } /* ===== Móvil/tablet: el tema oculta .cart-box a partir de 1200px ===== */ @media (max-width: 1200px) { .main-header .cart-box { display: inline-block !important; margin-left: 14px; } .main-header .cart-box:before { display: none; } /* en táctil no hay hover: el icono lleva a la página de presupuesto al tocar */ .bloxic-mq__panel { display: none !important; } } /* ============================================================ Botones +/- en la tabla de la página de presupuesto ============================================================ */ /* Stepper como el carrito de Bloxic: signos − / + planos y cantidad en caja gris clara, sin bordes. */ #yith-ywrq-table-list .product-quantity .quantity { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } #yith-ywrq-table-list .product-quantity input.qty { width: 44px; height: 36px; text-align: center; border: 0; border-radius: 0; background: #f4f4f4; padding: 0; margin: 0; font-family: var(--font-family-Outfit, inherit); font-size: 14px; color: var(--black-color, #111); -moz-appearance: textfield; box-shadow: none; } #yith-ywrq-table-list .product-quantity input.qty::-webkit-outer-spin-button, #yith-ywrq-table-list .product-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #yith-ywrq-table-list .product-quantity .bloxic-qty-btn { width: 28px; height: 36px; padding: 0; margin: 0; cursor: pointer; border: 0; background: transparent; color: var(--black-color, #111); font-size: 20px; line-height: 1; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: color .15s ease; } #yith-ywrq-table-list .product-quantity .bloxic-qty-btn:hover { color: var(--main-color, #e10000); } /* Mismo stepper en la ficha de producto (.quantity-box la pinta nuestro override global/quantity-input.php; los botones, qty-stepper.js). */ .quantity.quantity-box .item-quantity { display: inline-flex; align-items: center; justify-content: center; } .quantity.quantity-box input.qty { /* Look de la demo: caja gris sin borde, cuadrada, 14px/500. Se mantiene ENCIMA del botón (esto solo cambia el diseño, no la posición). */ width: 42px; height: 42px; text-align: center; border: 0; border-radius: 0; padding: 0; margin: 0; background: #ededed; color: #0b0b0b; font-size: var(--font-14, 14px); font-weight: 500; -moz-appearance: textfield; box-shadow: none; min-height: 0; } .quantity.quantity-box input.qty::-webkit-outer-spin-button, .quantity.quantity-box input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity.quantity-box .bloxic-qty-btn { /* −/+ desnudos como la demo: sin caja ni borde, solo el símbolo. */ width: 34px; height: 42px; padding: 0; margin: 0; cursor: pointer; border: 0; background: transparent; color: #0b0b0b; font-size: 18px; line-height: 1; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: color .15s ease; box-shadow: none; } .quantity.quantity-box .bloxic-qty-btn:hover { color: var(--main-color, #e10000); background: transparent; } /* ============================================================ Botón de compra de la ficha + botones de YITH con el look del botón de la plantilla: NEGRO con hover ROJO (--main-color) y esquinas rectas. · El nativo .single_add_to_cart_button ya es negro/rojo; solo le quitamos el radio (6px) y lo separamos del contador (que va encima). · Los de YITH (.add-request-quote-button) salen grises (los pinta el .button del tema); adoptan el mismo color/hover MANTENIENDO su tamaño (no tocamos el padding). En listados de categoría, ficha y relacionados. Acotado a sus propias clases: no afecta a ningún otro elemento. ============================================================ */ /* Color/hover/esquinas de TODOS los botones de YITH (ficha, relacionados y listados) y del nativo. El tema los pinta con !important, así que aquí también usamos !important pero ACOTADO a la clase del propio botón: no puede afectar a ningún otro elemento. NO tocamos el padding: se mantiene el tamaño actual. */ .woocommerce a.add-request-quote-button, .woocommerce a.add-request-quote-button.button { background-color: #000 !important; border: 0 !important; border-radius: 0 !important; color: #FFFFFF !important; } .woocommerce a.add-request-quote-button:hover, .woocommerce a.add-request-quote-button.button:hover { background-color: var(--main-color, #ED1D24) !important; color: #FFFFFF !important; /* El tema/YITH añade un borde de 1px en hover y el botón "salta" 2px; lo anulamos también en hover para que no cambie de tamaño. */ border: 0 !important; } /* Radio de los botones DE LA FICHA (dentro de form.cart): responsive.css les pone 6px con (0,5,1)!important; subimos a (0,6,1) añadiendo .button. */ .wp-singular div.product form.cart .single_add_to_cart_button.button, .wp-singular div.product form.cart a.add-request-quote-button.button { border-radius: 0 !important; } /* Separar el botón de compra del contador (que va encima), solo en la ficha. */ .single-product div.product form.cart .single_add_to_cart_button, .single-product div.product form.cart a.add-request-quote-button { margin-top: 20px !important; } /* En los LISTADOS/relacionados el botón va dentro del widget YITH de Elementor, cuyo CSS fija texto #444 y el hover con (0,3,1)!important y carga después del child; subimos a (0,4,1) para texto y hover. El fondo negro ya lo gana la regla general de arriba. */ .elementor-widget-yith-ywraq-button-quote.elementor-widget a.add-request-quote-button.button { color: #FFFFFF !important; /* El widget fija un borde de 1px en normal (empata la regla general y carga después); lo anulamos aquí para que no haya salto normal↔hover. */ border: 0 !important; } .elementor-widget-yith-ywraq-button-quote.elementor-widget a.add-request-quote-button.button:hover { background-color: var(--main-color, #ED1D24) !important; color: #FFFFFF !important; border: 0 !important; } /* ---- Tabla/resumen de productos en /request-quote/ ---- Mismo lenguaje visual que la tabla del carrito de Bloxic: sin caja ni fondos, cabecera en negro con línea inferior y filas separadas por líneas finas. */ .ywraq-wrapper { margin-bottom: 10px; } #yith-ywrq-table-list.shop_table { width: 100%; border: 0; border-radius: 0; border-collapse: collapse; margin: 0; } #yith-ywrq-table-list.shop_table thead th { background: none; color: var(--black-color, #111); font-family: var(--font-family-Outfit, inherit); font-size: 15px; font-weight: 600; text-transform: capitalize; letter-spacing: 0; text-align: left; padding: 14px 34px; border: 0; border-bottom: 1px solid #e8e8e8; } #yith-ywrq-table-list.shop_table tbody td { padding: 22px 34px; vertical-align: middle; background: none; border: 0; border-bottom: 1px solid #efefef; } /* La celda de borrar se colapsa y la × se superpone en la esquina superior DERECHA de la miniatura (en vez de ir en una columna aparte). */ #yith-ywrq-table-list .product-remove { width: 0 !important; padding: 0 !important; position: relative; overflow: visible; } #yith-ywrq-table-list .product-remove a.remove, #yith-ywrq-table-list a.yith-ywraq-item-remove { position: absolute; top: 12px; left: 80px; z-index: 3; display: inline-flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; padding: 0 !important; background: var(--main-color, #e10000) !important; color: #fff !important; font-size: 13px; line-height: 1 !important; text-align: center; text-decoration: none; transition: background .15s ease; } #yith-ywrq-table-list .product-remove a.remove:hover, #yith-ywrq-table-list a.yith-ywraq-item-remove:hover { background: var(--black-color, #111) !important; color: #fff !important; } #yith-ywrq-table-list .product-thumbnail { /* Ancho fijo para que quepa el recuadro de 90px; padding izquierdo fijo para que la bolita no se descoloque al cambiar el gap de las demás columnas. */ width: 122px; position: relative; padding: 22px 20px 22px 0 !important; } #yith-ywrq-table-list .product-thumbnail img { /* Recuadro blanco CUADRADO con borde y padding; la foto va CONTENIDA dentro (no recortada), como en la imagen de referencia. */ width: 90px !important; height: 90px !important; max-width: none !important; box-sizing: border-box; padding: 8px; background: #fff; border: 1px solid #e6e6e6; object-fit: contain; border-radius: 0; display: block; } #yith-ywrq-table-list .product-name a { color: var(--black-color, #111); font-weight: 600; text-decoration: none; font-family: var(--font-family-Outfit, inherit); font-size: 15px; } #yith-ywrq-table-list .product-name a:hover { color: var(--main-color, #e10000); } #yith-ywrq-table-list .product-name .variation { font-size: 12px; color: #999; margin-top: 4px; } #yith-ywrq-table-list .product-quantity { width: 170px; } /* ============================================================ Botones del login del presupuesto (widget Login "Acceder" + widget Botón "Crear cuenta") con la estética del botón NEGRO del sitio (carrito/login): fondo negro, texto blanco en MAYÚSCULAS, Jost, hover ROJO y esquinas rectas. Son botones de Elementor con estilo por-widget (Acceder salía rojo con borde), por eso usamos !important acotado SOLO a estos dos botones concretos. ============================================================ */ .elementor-widget-login .elementor-button, .elementor-element-758b2f9 .elementor-button, .elementor-widget-login .elementor-button .elementor-button-text, .elementor-element-758b2f9 .elementor-button .elementor-button-text { font-family: var(--font-family-Jost), sans-serif !important; font-size: 15px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: normal !important; color: #FFFFFF !important; } .elementor-widget-login .elementor-button, .elementor-element-758b2f9 .elementor-button { background-color: #000000 !important; border: 0 !important; border-radius: 0 !important; padding: 15px 34px !important; line-height: 1.4 !important; } .elementor-widget-login .elementor-button:hover, .elementor-element-758b2f9 .elementor-button:hover { background-color: var(--main-color, #ED1D24) !important; color: #FFFFFF !important; border: 0 !important; } /* CREAR CUENTA al mismo tamaño que ACCEDER: auto (según su texto), no a todo el ancho, y alineado a la izquierda igual que el botón Acceder. */ .elementor-element-758b2f9 .elementor-button { width: auto !important; display: inline-flex !important; align-items: center; justify-content: center; } .elementor-element-758b2f9 .elementor-button-wrapper, .elementor-element-758b2f9 .elementor-widget-container { text-align: left; } /* Los dos botones al MISMO ancho: el del texto más largo ("CREAR CUENTA", 177px). Con min-width el corto ("ACCEDER") crece hasta igualarlo y ninguno se recorta si en el futuro cambia el texto. */ .elementor-widget-login .elementor-button, .elementor-element-758b2f9 .elementor-button { min-width: 180px; } /* ============================================================ Bloque "Debes iniciar sesión" (columna derecha de /request-quote/ cuando el usuario no está logueado) dentro de una CAJA como el "Cart totals" de Bloxic (.cart-total-box del tema: padding 30px + borde 1px rgba(negro,.06)). El contenedor de Elementor fija su padding con variables --padding-* con especificidad (0,3,0); repetimos .elementor-element para llegar a (0,4,0) y ganar sin !important. ============================================================ */ /* El contenido de /request-quote/ arrancaba pegado a la cabecera: su contenedor lleva padding-bottom:80px (el aire hasta el bloque de Instagram) pero arriba quedaba en 0. Le damos el MISMO aire arriba. Elementor fija el padding con variables a (0,3,0); repetimos .elementor-element para llegar a (0,4,0) y, como en contenedores tipo e-con el vertical no siempre se aplica desde la variable, lo ponemos también de forma explícita. */ .elementor-13062 .elementor-element.elementor-element-80d90f1.elementor-element { --padding-top: 80px; padding-top: 80px; } .elementor-13062 .elementor-element.elementor-element-7e65398.elementor-element { --padding-left: 30px; --padding-right: 30px; /* .e-con solo aplica el padding LÓGICO horizontal (padding-inline-*) a partir de las variables; el vertical se queda en 0 por el reset *{padding:0}. Por eso el de arriba/abajo se pone aquí de forma explícita. */ padding-top: 30px; padding-bottom: 30px; border: 1px solid rgba(var(--black-color-rgb, 0, 0, 0), 0.06); background-color: #FFFFFF; } /* Titular "¡Atención! / Debes iniciar sesión…". Elementor lo pinta en Arial 35px con letter-spacing:-3px (letras muy juntas). Lo pasamos a Outfit —la fuente de los títulos del tema (global.css: h1..h6)— con letter-spacing normal, que es el que usan los títulos de la plantilla. El
se sustituye en functions.php por dos bloques para poder poner "¡Atención!" en negrita y la segunda línea más pequeña y en regular. Especificidad (0,5,0) repitiendo .elementor-heading-title para ganar a la regla de Elementor (0,4,0), sin !important. */ .elementor-13062 .elementor-element.elementor-element-f84372d .elementor-heading-title.elementor-heading-title { font-family: var(--font-family-Outfit), sans-serif; font-size: 30px; font-weight: 400; line-height: 1.3; letter-spacing: normal; } .fds-quote-login__title { display: block; font-weight: 500; } .fds-quote-login__sub { display: block; margin-top: 6px; font-size: 20px; font-weight: 400; } /* Separación entre el bloque de la lista de productos y el de iniciar sesión. El contenedor padre (80d90f1) es un flex row con --column-gap:0; el padding en las columnas no vale (Elementor usa padding lógico y lo pisa), así que ponemos el hueco con column-gap en el propio contenedor. Solo en escritorio; en móvil las columnas se apilan. */ @media (min-width: 1025px) { .elementor-element-80d90f1 { column-gap: 60px !important; } } /* Botonera bajo la tabla (Actualizar lista / Vaciar / PDF): botones planos como los del carrito de Bloxic — primario negro, secundarios gris claro. */ .ywraq-wrapper .update-list-wrapper, .update-list-wrapper { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .update-list-wrapper input[type="submit"].button, .update-list-wrapper button.button { background: var(--black-color, #000); color: #fff; border: 0; border-radius: 0; padding: 14px 28px; margin: 0; font-family: var(--font-family-Outfit, inherit); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; transition: background .2s ease, color .2s ease; } /* Hover del botón primario ("Actualizar lista"): rojo del logo, como el resto de la web (antes era naranja #E74E25, ajeno a la paleta). */ .update-list-wrapper input[type="submit"].button:hover, .update-list-wrapper button.button:hover { background: var(--main-color, #ED1D24); color: #fff; } /* YITH mete margin-top:20px al input de "Actualizar lista" con el selector #yith-ywraq-form .update-list-wrapper input[type="submit"] (especificidad 1,2,1), lo que lo dejaba 20px más bajo que "Limpiar lista". Su CSS carga DESPUÉS que este child, así que igualar la especificidad no basta: la SUPERAMOS a (1,3,1) añadiendo [name="update_raq"] y así ganamos sin !important. Va FUERA de cualquier media query: escritorio y móvil por igual. */ #yith-ywraq-form .update-list-wrapper input[type="submit"][name="update_raq"] { margin: 0; } /* Botones secundarios ("Limpiar lista" y PDF): grises, y al pasar el ratón un gris MÁS CLARO. Ambos tonos ya se usan en la web (#ececec / #f5f5f5). */ .update-list-wrapper button.ywraq_clean_list, .update-list-wrapper #ywraq-list-to-pdf.button { background: #ececec; color: #555; } .update-list-wrapper button.ywraq_clean_list:hover, .update-list-wrapper #ywraq-list-to-pdf.button:hover { background: #f5f5f5; color: #555; } /* En MÓVIL los dos botones no caben en una fila (143 + 171px) y se partían: "Limpiar lista" arriba y "Actualizar lista" abajo, desalineados. Los repartimos a mitades iguales en la misma fila (sin wrap) y ajustamos el padding lateral para que quepa el texto, así quedan alineados a la misma altura. */ @media (max-width: 767px) { .update-list-wrapper { flex-wrap: nowrap; align-items: center; } .update-list-wrapper .after-table-right { flex: 1 1 0; min-width: 0; margin: 0; } .update-list-wrapper .after-table-right .ywraq_clean_list { width: 100%; margin: 0; } /* El margin-top:20px de YITH ya se anula arriba (regla global), aquí solo repartimos los dos botones a mitades iguales. */ .update-list-wrapper input[type="submit"][name="update_raq"] { flex: 1 1 0; min-width: 0; } .update-list-wrapper input[type="submit"].button, .update-list-wrapper button.button { padding: 14px 8px; } } /* ============================================================ Página "Mi cuenta" (/cuenta/) — mismos estilos que la demo Bloxic. La página usa el widget "WooCommerce My Account" de Elementor Pro, que genera el MISMO markup estándar de WooCommerce que la demo (#customer_login, .woocommerce-form-login/register), pero encola widget-woocommerce-my-account.min.css DESPUÉS del tema y pisa sus estilos (botón azul #5bc0de, campos grises rectos, cajas con borde). El tema padre ya trae exactamente el diseño de la demo (woocommerce.css: botones .woocommerce button.button y campos .woocommerce-form-login.login input). Aquí solo lo restauramos dentro del widget: primero con las VARIABLES del propio widget (forma nativa, sin !important) y después con reglas explícitas para lo que Elementor deja fijo en su CSS (fondo del botón, borde de los campos y las cajas). ============================================================ */ .elementor-widget-woocommerce-my-account { /* Campos: píldora blanca con borde fino (valores del tema/demo) */ --forms-fields-normal-background-color: var(--white-color, #fff); --forms-fields-normal-color: var(--color-seventyfour, #a1a1a1); --forms-fields-border-radius: 50px; --forms-fields-padding: 8px 30px; --forms-labels-color: var(--black-color, #000); /* Botones: negro, cuadrado, en mayúsculas */ --forms-buttons-border-radius: 0; --forms-buttons-padding: 17px 44px; --forms-buttons-normal-text-color: var(--white-color, #fff); /* Enlaces ("¿Olvidaste la contraseña?", política de privacidad) */ --links-normal-color: var(--main-color, #ed1d24); /* Sin relleno propio del widget alrededor de los formularios */ --sections-padding: 0; /* Textos en negro como la demo: "Recuérdame" y los avisos/mensajes */ --checkboxes-color: var(--black-color, #000); --login-messages-color: var(--black-color, #000); /* Menú de la zona privada (pestañas): negro, activo y hover en rojo */ --tabs-normal-color: var(--black-color, #000); --tabs-active-color: var(--main-color, #ed1d24); --tabs-hover-color: var(--main-color, #ed1d24); --tabs-padding: 14px 20px; } /* Separación con lo que venga debajo (galería de Instagram, pie...). clamp() la mantiene proporcionada en cualquier resolución: 40px en móvil y hasta 90px en pantallas grandes. Se usa padding y no margin porque Elementor anula el margen inferior de los widgets dentro de sus contenedores flex (.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }). */ .elementor-widget.elementor-widget-woocommerce-my-account { padding-bottom: clamp(40px, 6vw, 90px); } /* Elementor fija estos valores en su hoja (no salen de variables) y sus selectores llevan un :not() que suma especificidad; por eso aquí se repite la clase del widget (.elementor-widget + la del widget), que añade una clase más y permite ganarle sin recurrir a !important. */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .login .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .register .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-login .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-register .button.button { background: var(--black-color, #000); font-family: var(--font-family-Jost, inherit); font-weight: 500; margin-top: 10px; text-transform: uppercase; transition: background .3s ease; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .login .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .register .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-login .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-register .button.button:hover { background: var(--main-color, #ed1d24); } /* Resto de pantallas de la cuenta (recuperar contraseña, editar cuenta, direcciones…): Elementor las pinta en AZUL #5bc0de con un selector de (0,6,0) —p.ej. .e-my-account-tab:not(…) .woocommerce .woocommerce-ResetPassword .button—. Su hoja carga DESPUÉS, así que hay que SUPERAR esa especificidad, no empatarla: la del formulario de contraseña llega a (0,7,0) repitiendo .button, y la genérica a (0,6,1) al añadir el elemento form. Así ningún botón de la zona de cuenta queda azul: todos negros con hover rojo corporativo. */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-ResetPassword .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .order-again .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content-wrapper .button.button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-pagination .button.button { background: var(--black-color, #000); color: var(--white-color, #fff); font-family: var(--font-family-Jost, inherit); font-weight: 500; text-transform: uppercase; transition: background .3s ease; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-ResetPassword .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .order-again .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .shop_table .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content-wrapper .button.button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-pagination .button.button:hover { background: var(--main-color, #ed1d24); color: var(--white-color, #fff); } /* El formulario de recuperar contraseña venía con una caja con borde (de WooCommerce) mientras que los de acceso y registro van sin borde: le quitamos el borde y el padding para que toda la zona de cuenta se vea igual. */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form.woocommerce-ResetPassword { border: none; padding: 0; } /* Campos: borde y alto de la demo (Elementor los pone a border:none) */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form .form-row input.input-text, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form .form-row select, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Input { background: var(--white-color, #fff); border: 2px solid #f4f4f4; height: 56px; font-size: 15px; box-shadow: none; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form .form-row textarea { height: auto; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form .form-row input.input-text:focus, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Input:focus { border-color: rgba(0, 0, 0, .15); outline: none; } /* Sin caja alrededor de cada formulario (la demo va a sangre) */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form.login, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form.register { border: 0; border-radius: 0; padding: 0; margin: 0; } /* Títulos "Acceder" / "Registrarse" */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab #customer_login h2 { font-family: var(--font-family-Outfit, inherit); font-size: 36px; font-weight: 500; color: var(--black-color, #000); margin-bottom: 22px; } /* Etiquetas de los campos */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form .form-row label { font-family: var(--font-family-Jost, inherit); font-size: 16px; font-weight: 500; color: var(--black-color, #000); margin-bottom: 8px; } /* --- Responsive (mobile-first): en móvil/tablet las dos columnas se apilan a ancho completo; a partir de 768px vuelven a ir en paralelo. --- */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab #customer_login .u-column1, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab #customer_login .u-column2 { float: none; width: 100%; margin: 0 0 40px; } /* En MÓVIL el botón va al MISMO ancho que los campos (100%). Antes llevaba un tope de 320px y en pantallas más anchas que eso se quedaba corto respecto a los inputs, y el bloque parecía descuadrado. A partir de 768px vuelve a ancho auto (regla de abajo). */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .button { width: 100%; max-width: none; } @media (min-width: 768px) { .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab #customer_login { display: flex; flex-wrap: wrap; gap: 0 60px; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab #customer_login .u-column1, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab #customer_login .u-column2 { flex: 1 1 0; min-width: 0; margin-bottom: 0; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .button { width: auto; max-width: none; /* Todos al mismo ancho que el botón más largo ("Registrarse", 183px): con min-width el corto ("Acceso") crece hasta igualarlo. En móvil no afecta, porque allí van al 100% del ancho de los campos. */ min-width: 185px; } } /* Tamaño de los textos de aviso al de la demo (16px). Elementor los fija a 12px en su hoja, y como sus selectores llevan :not() hay que repetir la clase del widget para ganarles. El color ya lo pone --login-messages-color. */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce em, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .woocommerce-privacy-policy-text, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .woocommerce-privacy-policy-text, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .woocommerce-privacy-policy-text p, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .woocommerce-privacy-policy-text p, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login p:not([class]), .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register p:not([class]), .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .lost_password, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .lost_password a { font-size: 16px; font-style: normal; } /* Asterisco de campo obligatorio: rojo pleno, como la demo */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .required { color: #f00; border: 0; } /* ============================================================ Zona privada (usuario identificado). Se superponían tres capas sin relación: el borde rojo + barra roja que el tema pinta en cada .woocommerce-MyAccount-navigation li, el fondo gris (#f9fafa / activo #f1f2f3) que Elementor pone en los enlaces, y un marco de 1px alrededor del contenido. Aquí se unifica con el lenguaje del resto del sitio: lista limpia con separadores finos, activo en rojo y contenido sin caja. ============================================================ */ /* --- Menú lateral --- */ .elementor-widget.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul { border-top: 1px solid #ececec; } .elementor-widget.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li { border: 0; border-bottom: 1px solid #ececec; padding: 0; margin: 0; } /* El tema pinta una barra roja de 48px en todos los elementos; aquí solo marca el activo, a la altura real del elemento. */ .elementor-widget.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li:before { content: none; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a { background: transparent; font-family: var(--font-family-Outfit, inherit); font-size: 16px; border-left: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover { background: transparent; border-left-color: var(--main-color, #ed1d24); } /* --- Contenido --- */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content .woocommerce-MyAccount-content-wrapper { border: 0; padding: 0; font-size: 16px; color: var(--color-two, #828a8d); } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content p { font-size: 16px; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content h2, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content h3 { font-family: var(--font-family-Outfit, inherit); color: var(--black-color, #000); margin-bottom: 18px; } /* --- Pestaña "Direcciones": elementos superpuestos --- Elementor coloca el enlace "Añadir/Editar dirección" en position:absolute dando por hecho que el bloque
tiene 45px de padding superior (--sections-padding). Como aquí esa variable vale 0 —para que los formularios de acceso no lleven caja— el enlace caía sobre el texto. Se devuelve al flujo normal del documento. */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Address .edit, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Addresses .edit { position: static; float: none; display: inline-block; margin: 16px 0 0; font-size: 16px; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Address address, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Addresses address { padding: 0; margin: 0; border: 0; font-style: normal; font-size: 16px; line-height: 1.9; color: var(--color-two, #828a8d); } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-Address .title h3 { margin-bottom: 14px; } /* --- Botones de la zona privada (Guardar dirección, Guardar cambios...): rojos con hover a negro. Elementor los deja en azul #5bc0de escrito a fuego, así que hay que ganarle con su mismo :not() más la clase repetida. --- */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-MyAccount-content .button { background: var(--main-color, #ed1d24); color: var(--white-color, #fff); border: 0; border-radius: 0; padding: 17px 44px; font-family: var(--font-family-Jost, inherit); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; transition: background .2s ease; } .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button:hover, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-MyAccount-content .button:hover { background: var(--black-color, #000); } /* Los formularios de la zona privada van a sangre, sin marco, igual que los de acceso (WooCommerce les pone un borde de 1px por defecto). */ .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-address-fields, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-EditAccountForm, .elementor-widget.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce form.edit-account { border: 0; padding: 0; } /* --- Desplegables (País/Región, Provincia) con el mismo aspecto de píldora que los campos de texto. WooCommerce los sustituye por Select2, así que hay que estilar el reemplazo, no solo el